/* ==========================================================================
   Camerino: the dressing room (camerino-view.js).
     .cam-mirror     the vanity mirror; its bulbs are the studio's amber
                     column bulbs (.cam-bulb), they chase on a costume change
     .cam-figure     the contestant (design/avatar.js layers), leaning with
                     the pointer (--tx, --ty), breathing and blinking
     .cam-atril      a small atril with the name on its display (.pd)
     .cam-looks      the wardrobe: one radio per look
   Also the home entrance (.gs-cta--camerino) and the profile summary.
   ========================================================================== */

@property --tx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ty { syntax: "<number>"; inherits: true; initial-value: 0; }

.modal.camerino { max-width: 900px; padding: var(--s-5) var(--s-6) var(--s-6); }
.cam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-4); }
.cam-head .modal-title { margin: 0; }
.cam-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }

/* --- The mirror -------------------------------------------------------- */
.cam-stage { display: grid; gap: 12px; justify-items: center; text-align: center; }
.cam-mirror {
  --tx: 0; --ty: 0;
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 4 / 4.6;
  padding: 22px; border-radius: 22px;
  background: linear-gradient(160deg, #2a3550, #141c2e 45%, #0b111d);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 -10px 24px rgb(0 0 0 / .45), var(--shadow-3);
  transition: --tx .6s var(--ease-out), --ty .6s var(--ease-out);
}
.cam-bulbs { position: absolute; inset: 11px; pointer-events: none; }
.cam-bulb {
  position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6dd, var(--spot) 55%, #b97815);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--spot) 70%, transparent), 0 0 18px color-mix(in srgb, var(--spot) 30%, transparent);
}
/* The chase: once round the mirror, each bulb a beat after the one before. */
.cam-bulbs.is-chasing .cam-bulb { animation: cam-chase .7s var(--ease-out) calc(var(--i) * 22ms) both; }
@keyframes cam-chase {
  0%, 100% { filter: none; transform: none; }
  30% { filter: brightness(1.7) saturate(1.2); transform: scale(1.35); box-shadow: 0 0 14px 4px var(--spot-strong), 0 0 30px var(--spot); }
}

.cam-glass {
  position: relative; height: 100%; overflow: hidden; border-radius: 12px; isolation: isolate;
  background:
    radial-gradient(120% 60% at 50% 108%, color-mix(in srgb, var(--pc) 30%, transparent), transparent 60%),
    linear-gradient(180deg, #0c1424, #070b14 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 0 40px rgb(0 0 0 / .6);
}
/* A reflection sweeping the glass, slow and faint. */
.cam-glass::after {
  content: ""; position: absolute; inset: -20% -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .07) 48%, transparent 54%);
  translate: calc(var(--tx) * 6%) 0;
}
.cam-spot {
  position: absolute; left: 50%; top: -10%; width: 90%; height: 95%; translate: -50% 0; z-index: 0;
  background: radial-gradient(50% 70% at 50% 0%, rgb(255 240 210 / .22), transparent 70%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.cam-figure {
  position: absolute; left: 50%; bottom: 17%; z-index: 1; width: 78%; aspect-ratio: 1; translate: -50% 0;
  transform: perspective(900px) rotateY(calc(var(--tx) * 18deg)) rotateX(calc(var(--ty) * -8deg));
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 18px rgb(0 0 0 / .45));
}
.cam-avatar { display: block; width: 100%; height: 100%; overflow: visible; }
/* Layers move apart with the lean: the hat most, the body against it. */
.cam-avatar .av-body { translate: calc(var(--tx) * -1px) 0; }
.cam-avatar .av-head { translate: calc(var(--tx) * 2.2px) calc(var(--ty) * 1.2px); }
.cam-avatar .av-hat { translate: calc(var(--tx) * 1.2px) calc(var(--ty) * .8px); }
/* Idle: breathing, a nod, a blink. */
.cam-avatar .av-body { transform-box: fill-box; transform-origin: 50% 100%; animation: cam-breathe 3.8s ease-in-out infinite; }
.cam-avatar .av-head-in { transform-box: fill-box; transform-origin: 50% 85%; animation: cam-nod 5.2s ease-in-out infinite; }
.cam-avatar .av-eyes { transform-box: fill-box; transform-origin: center; animation: cam-blink 5.6s infinite; }
@keyframes cam-breathe { 50% { transform: scale(1.012, 1.03); } }
@keyframes cam-nod { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-2.5deg) translateY(-.4px); } 65% { transform: rotate(2deg) translateY(.3px); } }
@keyframes cam-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
/* A costume change: the figure turns away and back (the look swaps half way). */
.cam-figure.is-turning { animation: cam-turn .36s var(--ease-in-out); }
@keyframes cam-turn {
  50% { transform: perspective(900px) rotateY(90deg) scale(.96); filter: brightness(2.2) drop-shadow(0 0 18px var(--spot)); }
}

.cam-atril { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 74%; translate: -50% 0; }
.cam-atril::before {
  /* the desk: satin edge over the display */
  content: ""; display: block; height: 9px; margin: 0 -6%; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #4a5878, #26324b); box-shadow: 0 2px 6px rgb(0 0 0 / .5);
}
.pd.cam-pd {
  position: relative; width: 100%; height: 68px; padding: 6px 10px 8px; border-width: 3px; border-radius: 0 0 12px 12px;
  background-size: 8px 8px, auto;
}
.cam-pd .pd-top { font-size: 26px; max-width: 100%; }
.cam-pd .pd-bottom { font-size: 14px; }

.cam-caption { display: grid; gap: 4px; max-width: 34ch; }
.cam-skin-name { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); line-height: .95; text-transform: uppercase; }
.cam-skin-desc { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }

.cam-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cam-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0;
  background: var(--sw); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .35);
  transition: transform var(--dur-fast) var(--ease-pop), border-color var(--dur-fast);
}
.cam-swatch[aria-pressed="true"] { border-color: var(--text-1); transform: scale(1.15); }
.cam-swatch:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 2px; }
.cam-note { margin: 0; color: var(--text-3); font-size: var(--fs-xs); }

/* --- The wardrobe and the panel ----------------------------------------- */
.cam-panel { display: grid; gap: var(--s-5); align-content: start; }
.cam-wardrobe { margin: 0; padding: 0; border: 0; min-width: 0; }
.cam-legend { padding: 0; margin-bottom: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--text-1); }
.cam-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cam-look {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--r-md); cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--line-1);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cam-look input { position: absolute; opacity: 0; pointer-events: none; }
.cam-look-face { grid-row: span 2; width: 52px; height: 52px; transition: transform var(--dur-base) var(--ease-pop); }
.cam-look-face .avatar-svg { display: block; width: 100%; height: 100%; }
.cam-look-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; text-transform: uppercase; }
.cam-look-tag { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; background: var(--ink-5); color: var(--text-2); }
.cam-look-tag.is-current { background: var(--spot-soft); color: var(--spot); }
@media (hover: hover) { .cam-look:hover { border-color: var(--line-2); } .cam-look:hover .cam-look-face { transform: translateY(-2px) rotate(-3deg); } }
/* The look on the mirror: lit like the mirror, a bulb in its corner. */
.cam-look:has(input:checked) {
  border-color: var(--spot-line);
  background: radial-gradient(90% 120% at 0% 50%, var(--spot-soft), transparent 70%), var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--spot-line);
}
.cam-look:has(input:checked)::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6dd, var(--spot) 60%); box-shadow: 0 0 10px var(--spot);
}
.cam-look:has(input:focus-visible) { outline: 2px solid var(--signal-strong); outline-offset: 2px; }
.cam-wardrobe:disabled .cam-look { opacity: .55; cursor: default; }

.cam-name input { width: 100%; }
.cam-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cam-save .field-hint { margin: 0; }
.field-hint.is-ok { color: var(--success); }
.cam-guest { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ink-3); border: 1px dashed var(--line-2); }
.cam-guest p { margin: 0; color: var(--text-2); }
.cam-guest strong { color: var(--text-1); }

/* --- Home entrance and profile summary ---------------------------------- */
.gs-cta--camerino .cta-face {
  flex-shrink: 0; width: 44px; height: 44px; margin: -4px 0;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--spot-line), 0 0 14px color-mix(in srgb, var(--spot) 30%, transparent);
}
.gs-cta--camerino .cta-face .avatar-svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) { .gs-cta--camerino:hover .cta-face { box-shadow: 0 0 0 2px var(--spot), 0 0 18px color-mix(in srgb, var(--spot) 45%, transparent); } }

.profile-contestant {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--ink-3); border: 1px solid var(--line-1);
}
.profile-contestant-face { width: 48px; height: 48px; }
.profile-contestant-face .avatar-svg { display: block; width: 100%; height: 100%; }
.profile-contestant-text { display: grid; gap: 2px; min-width: 0; }
.profile-contestant-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-contestant-text span { font-size: var(--fs-sm); color: var(--text-2); }

/* --- Small screens: the mirror on top, the wardrobe as a row ------------- */
@media (max-width: 719px) {
  .modal.camerino { padding: var(--s-4); }
  .cam-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .cam-mirror { max-width: 280px; padding: 18px; }
  .cam-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cam-look { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 8px 4px; text-align: center; row-gap: 4px; }
  .cam-look-face { grid-row: auto; width: 46px; height: 46px; }
  .cam-look-name { font-size: .92rem; }
  .cam-look-tag { justify-self: center; margin: 0; }
  .cam-save .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cam-avatar .av-body, .cam-avatar .av-head-in, .cam-avatar .av-eyes, .cam-figure.is-turning, .cam-bulbs.is-chasing .cam-bulb { animation: none; }
  .cam-mirror { --tx: 0 !important; --ty: 0 !important; }
}