/* ============================================================
   Avatar stage — ported from html-spring.html
   ============================================================ */
@font-face {
  font-family: Recoleta-Regular; /* set name */
  src: url(vendor/Recoleta-Regular.ttf); /* url of the font */
}

.cl_cam{ color:#FF671F }

.numberavt {
  background: linear-gradient(to right, #FFD4C2, #FFFCA3);
  -webkit-background-clip: text;
  background-clip: text;  
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: 'Recoleta-Regular';
  font-size: 200px; line-height: 1;
  font-weight: 400;
}

.bg_avt_bt{ background-color: #FFD4C2;}
.c35gd-avatar-demo {
  width: min(100%, 920px);
  margin: 0 auto;
}

.c35gd-avatar-demo .stage {
  position: relative;
  width: 100%;
  min-height: 260px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /*border-radius: clamp(14px, 4vw, 28px);
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(135deg, #c84916 0%, #ec841d 48%, #ffc23a 100%);
  box-shadow: 0 28px 80px rgba(0,0,0,.42);*/
  isolation: isolate;
}

/* Slots — fixed frames, classes never change */
.c35gd-avatar-demo .avatar-slot {
  --size: 92px;
  position: absolute;
  width: var(--size);
  max-width: 32vw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 5;
}

.c35gd-avatar-demo .avatar-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
  box-shadow:
    0 12px 28px rgba(89,27,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.28);
}

.c35gd-avatar-demo .avatar-frame img,
.c35gd-avatar-demo .flying-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hide empty slots (no src set) */
.c35gd-avatar-demo .avatar-frame img:not([src]),
.c35gd-avatar-demo .avatar-frame img[src=""] {
  visibility: hidden;
}

/* Slot positions */
.c35gd-avatar-demo .slot-1 {
  --size: clamp(52px, 15vw, 112px);
  left: 30%;
  top: 40%;
}
.c35gd-avatar-demo .slot-2 {
  --size: clamp(42px, 12vw, 92px);
  left: 43%;
  top: 25%;
}
.c35gd-avatar-demo .slot-3 {
  --size: clamp(46px, 13vw, 100px);
  left: 66%;
  top: 33%;
}
.c35gd-avatar-demo .slot-4 {
  --size: clamp(50px, 14vw, 106px);
  left: 71%;
  top: 66%;
}
.c35gd-avatar-demo .slot-5 {
  --size: clamp(44px, 12.5vw, 96px);
  left: 35%;
  top: 79%;
}

/* Center slot — always largest */
.c35gd-avatar-demo .slot-6 {
  --size: clamp(96px, 30vw, 235px);
  left: 50%;
  top: 55%;
  z-index: 15;
}
.c35gd-avatar-demo .slot-6 .avatar-frame {
  border-width: 7px;
  box-shadow:
    0 22px 48px rgba(83,23,0,.42),
    0 0 0 5px rgba(255,255,255,.14);
}

/* Flying clone (rotation animation) */
.c35gd-avatar-demo .flying-avatar {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
  box-shadow: 0 16px 36px rgba(70,20,0,.35);
  pointer-events: none;
  z-index: 50;
  will-change: left, top, width, height, transform;
}
.c35gd-avatar-demo .flying-avatar.to-center {
  border-width: 7px;
  box-shadow:
    0 22px 48px rgba(83,23,0,.42),
    0 0 0 5px rgba(255,255,255,.14);
}

.tit_avt_form{ font-size:24px; font-weight:600; text-align:center; margin-top:-25px; margin-bottom:10px; }

@media (max-width: 700px) {
  .c35gd-avatar-demo .stage {
    aspect-ratio: 4 / 5;
  }
  .numberavt{ font-size:100px }
}
@media (max-width: 500px) {
  .numberavt{ font-size:70px }

}
@media (max-width: 380px) {
  .c35gd-avatar-demo .slot-1 { --size: clamp(44px, 15vw, 112px); }
  .c35gd-avatar-demo .slot-2 { --size: clamp(36px, 12vw, 92px); }
  .c35gd-avatar-demo .slot-3 { --size: clamp(40px, 13vw, 100px); }
  .c35gd-avatar-demo .slot-4 { --size: clamp(42px, 14vw, 106px); }
  .c35gd-avatar-demo .slot-5 { --size: clamp(38px, 12.5vw, 96px); }
  .c35gd-avatar-demo .slot-6 { --size: clamp(80px, 30vw, 235px); }
}

/* ============================================================
   Submit form
   ============================================================ */

.c35gd-avatar-wrap {
  max-width: 600px;
  margin: 0 auto;
}

.c35gd-avatar-notice {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 15px;
}
.c35gd-avatar-notice--error {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}
.c35gd-avatar-notice--success {
  background: #eafaf1;
  color: #1e8449;
  border: 1px solid #a9dfbf;
}
.c35gd-avatar-notice .c35gd-avatar-existing-img {
  margin-top: 12px;
  text-align: center;
}

.c35gd-avatar-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c35gd-avatar-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c35gd-avatar-form__label {
  font-weight: 600;
  font-size: 14px;
  align-items: center;
}
.c35gd-avatar-form__label small {
  font-weight: 400;
  color: #666;
}

.c35gd-avatar-form input[type="text"],
.c35gd-avatar-form input[type="file"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
}
.c35gd-avatar-form input[type="text"]:focus {
  outline: none;
  border-color: #ec841d;
  box-shadow: 0 0 0 2px rgba(236,132,29,.2);
}

.c35gd-avatar-btn {
  display: inline-block;
  padding: 11px 28px;
  background: linear-gradient(135deg, #c84916, #ec841d);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s;
}
.c35gd-avatar-btn:hover { opacity: .88; color: #fff; }
.c35gd-avatar-btn:disabled { opacity: .6; cursor: not-allowed; }
.c35gd-avatar-btn--submit { margin-top: 4px; }