/* Stage, not a second fitting room. All motion wraps the existing composition. */
.runway-screen { position:relative; isolation:isolate; height:100dvh; min-height:640px; overflow:hidden; color:#fff; background:radial-gradient(ellipse at 27% 25%,#8c4a94,transparent 55%),linear-gradient(145deg,#201640,#482560 65%,#241c49); }
.runway-screen [hidden] { display:none!important; }
.runway-screen::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.22; background:radial-gradient(circle,#fff 1px,transparent 1.5px) 0 0/37px 37px; }
.runway-header { position:relative; z-index:30; height:80px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 28px; border-bottom:1px solid #ffffff24; background:#251943b3; }
.runway-header small { color:#ffd4e9; font-size:.65rem; font-weight:1000; letter-spacing:.15em; }
.runway-header h1 { margin:3px 0 0; font-size:clamp(1.35rem,2.8vw,2rem); line-height:1; letter-spacing:-.04em; }
.runway-skip { min-height:48px; padding:0 18px; border:2px solid #ffe596; border-radius:18px; color:#ffe9a0; background:#35214f; font-weight:1000; font-size:.8rem; cursor:pointer; box-shadow:0 4px 0 #160e2d; }
.runway-skip:active { transform:translateY(3px); }
.curtain { position:absolute; z-index:20; top:80px; bottom:0; width:51%; pointer-events:none; background:repeating-linear-gradient(90deg,#842d68 0 13%,#b74786 14% 27%,#722457 28% 40%); box-shadow:inset 0 0 40px #22082780; transition:transform .65s cubic-bezier(.7,0,.3,1); }
.curtain::after { content:''; position:absolute; inset:0; background:linear-gradient(#e1af52 0 8px,transparent 9px); }
.curtain-left { left:0; border-right:6px solid #e2b254; }.curtain-right { right:0; border-left:6px solid #e2b254; }
.runway-screen:not(.phase-curtain) .curtain-left { transform:translateX(-99%); }.runway-screen:not(.phase-curtain) .curtain-right { transform:translateX(99%); }
.spotlight { position:absolute; z-index:1; pointer-events:none; top:80px; width:45%; height:85%; opacity:0; background:linear-gradient(#fff6cc55,transparent 88%); clip-path:polygon(48% 0,52% 0,100% 100%,0 100%); transition:opacity .4s; }
.spotlight.left { left:0; transform:rotate(-14deg); transform-origin:top; }.spotlight.right { left:20%; transform:rotate(14deg); transform-origin:top; }
.runway-screen:not(.phase-curtain) .spotlight { opacity:1; }
.runway-layout { position:relative; z-index:3; height:calc(100% - 80px); min-height:0; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(440px,1fr); }
.runway-stage { position:relative; min-height:0; overflow:hidden; perspective:700px; }
.runway-stage::before { content:''; position:absolute; left:13%; right:13%; top:48%; bottom:-14%; transform:perspective(450px) rotateX(26deg); transform-origin:top; border:3px solid #ffc9e888; border-radius:40% 40% 0 0; background:linear-gradient(90deg,#bc68ab,#ffcce9 48%,#ba65ac); box-shadow:0 -6px 35px #ffb9e87a; }
.catwalk-lines { position:absolute; inset:50% 15% 0; opacity:.4; background:repeating-linear-gradient(90deg,transparent 0 24%,#fff7 24.5% 25%); pointer-events:none; }
.stage-halo { position:absolute; inset:9% 10% 28%; border-radius:50%; background:radial-gradient(ellipse,#ffd8f033,transparent 68%); box-shadow:inset 0 0 0 1px #ffdcf11a; }
.runway-status { position:absolute; z-index:12; top:17px; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; padding:9px 18px; border:1px solid #ffe99c80; border-radius:999px; background:#352048bd; color:#ffeca0; text-align:center; font-size:.72rem; font-weight:1000; }
.runway-performer { position:absolute; z-index:5; left:50%; top:50%; width:280px; height:500px; margin:-236px 0 0 -140px; scale:1.32; transform-origin:50% 90%; transform:translate(0,0); }
.runway-performer:has(.body-compact) { scale:1.5; }
.runway-screen .on-runway { opacity:1; transform:none; animation:none; transition:none; }
.runway-screen .on-runway .doll { animation:none; }
.runway-screen .character-name { display:none; }
/* The old shadow sat well below the painted feet and reinforced floating.
   Ground only the runway composition; wardrobe/photo framing stays intact. */
.runway-screen .character-shadow { bottom:94px; width:110px; height:14px; filter:blur(2px); }
.runway-screen .character-stage:has(.body-compact) .character-shadow { bottom:72px; width:118px; }
.phase-curtain .runway-performer { opacity:0; transform:translate(-14px,-38px) scale(.88); }
/* One continuous track survives the walk/pose clock ticks. Changing the pose
   class must not restart the animation or reset its velocity. */
.phase-walk .runway-performer,
.phase-pose .runway-performer { animation:show-flow 3.25s linear both, show-footfall .48s ease-in-out 3; }
.phase-final .stage-halo { background:radial-gradient(ellipse,#ffe69144,transparent 70%); }
.audience { position:absolute; z-index:7; bottom:14px; left:10%; right:10%; display:flex; justify-content:space-between; align-items:center; color:#ffdda8; font-size:1.5rem; opacity:.45; }
.phase-celebrate .audience span { animation:audience-cheer .45s ease 3 alternate; }.audience span:nth-child(even) { animation-delay:.15s; }
.runway-celebration { position:absolute; z-index:8; inset:14% 10% 12%; pointer-events:none; opacity:0; }
.runway-celebration span { position:absolute; color:#ffe275; font-size:1.8rem; text-shadow:0 3px 0 #a26578; }
.runway-celebration span:nth-child(1){left:6%;top:10%}.runway-celebration span:nth-child(2){right:4%;top:23%;color:#ffacdb}.runway-celebration span:nth-child(3){left:0;top:58%}.runway-celebration span:nth-child(4){right:0;top:67%}.runway-celebration span:nth-child(5){left:15%;top:36%;color:#ffacdb}.runway-celebration span:nth-child(6){right:12%;top:6%}
.runway-celebration strong { position:absolute; bottom:0; left:0; padding:5px 20px; border-radius:20px; background:#ffcc66; color:#713359; font-size:1.5rem; box-shadow:0 5px 0 #bf6d72; }
.phase-celebrate .runway-celebration { animation:show-celebrate 1s ease both; }.phase-celebrate .runway-celebration span { animation:show-sparkle .8s ease both; }
.flash { position:absolute; z-index:15; inset:0; background:#fff3dc; opacity:0; pointer-events:none; }.pose-3 .flash { animation:show-flash .35s ease; }
.results-panel { min-width:0; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:22px 22px 18px; background:linear-gradient(160deg,#23173980,#241b49e6); border-left:1px solid #ffffff18; overflow:hidden; }
.results-title { display:flex; justify-content:center; align-items:center; gap:12px; text-align:center; }.results-title>span { color:#ffe28a; }.results-title small { color:#eeb8db; font-size:.64rem; font-weight:1000; letter-spacing:.08em; }.results-title h2 { margin:4px 0 0; font-size:1.7rem; }
.judges-row { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:end; }
.judge-card { position:relative; display:grid; place-items:center; gap:5px; opacity:1; animation:none; transition:opacity .25s; }
.speech-bubble { position:relative; width:100%; min-height:94px; display:grid; place-items:center; padding:10px 8px; border-radius:19px; background:#fff; color:#50355f; text-align:center; font-size:.72rem; font-weight:1000; line-height:1.3; box-shadow:0 5px 0 #0002; visibility:hidden; opacity:0; }
.speech-bubble::after { content:''; position:absolute; bottom:-13px; left:50%; border:9px solid transparent; border-top-color:#fff; transform:translateX(-50%); }
.judge-avatar { position:relative; width:72px; height:72px; display:grid; place-items:center; margin-top:10px; border:4px solid #fff; border-radius:50% 50% 44% 44%; background:var(--judge); color:#fff; box-shadow:0 5px 0 #0003; font-size:1.45rem; font-weight:1000; }
.judge-avatar::before,.judge-avatar::after { content:''; position:absolute; top:31px; width:6px; height:8px; border-radius:50%; background:#49314d; }.judge-avatar::before { left:17px; }.judge-avatar::after { right:17px; }
.judge-avatar i { position:absolute; top:-15px; right:-3px; width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:var(--judge); background:#fff2ac; font-style:normal; font-size:.9rem; }
.judge-avatar em { position:absolute; top:-26px; left:-17px; font-style:normal; color:#ffe384; opacity:0; }
.judge-card>strong { font-size:.68rem; }.judge-card>small { color:#e2c4e8; font-size:.5rem; font-weight:1000; letter-spacing:.05em; }
.judge-score { min-height:42px; display:flex; align-items:baseline; gap:2px; color:#ffe177; visibility:hidden; opacity:0; }.judge-score b { font-size:2rem; line-height:1.2; }.judge-score span { font-size:.66rem; }
.reveal-waiting .judge-avatar { opacity:.4; transform:scale(.9); }.reveal-waiting>strong,.reveal-waiting>small { opacity:.6; }
.reveal-reaction .judge-avatar { animation:judge-react .4s ease both; }.reveal-reaction .judge-avatar em { animation:reaction-sparkle .5s ease both; }
.reveal-comment .speech-bubble,.reveal-score .speech-bubble { visibility:visible; opacity:1; }.reveal-comment .speech-bubble { animation:bubble-reveal .32s ease both; }
.reveal-score .judge-score { visibility:visible; opacity:1; animation:vote-bounce .45s ease both; }
.phase-final .judge-score { animation:none; }
.show-progress { display:flex; justify-content:center; align-items:center; gap:10px; min-height:50px; color:#e8beda; font-size:.62rem; font-weight:1000; }.show-progress i { width:7px; height:7px; border-radius:50%; background:#ffd46f; }
.final-region { display:grid; gap:16px; }.grand-finale { display:grid; place-items:center; gap:4px; animation:finale-in .4s ease both; }.grand-finale h2 { margin:0; font-size:1.45rem; }.final-stars { color:#ffe079; font-size:1.5rem; letter-spacing:.12em; text-shadow:0 3px 0 #a65a38; }.final-score { display:flex; align-items:baseline; gap:6px; padding:4px 14px; border:1px solid #ffffff33; border-radius:999px; background:#ffffff0f; }.final-score span { font-size:.58rem; font-weight:1000; }.final-score strong { color:#ffe46e; font-size:1.8rem; }.final-score i { font-style:normal; font-size:.65rem; }
.runway-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; }.runway-actions [data-action="new-outfit"] { grid-column:1/-1; min-height:52px; font-size:.85rem; }.runway-actions .photo-cta { min-height:46px; padding-inline:10px; background:linear-gradient(135deg,#63bfc4,#7164c8); box-shadow:0 5px 0 #3f4f91; font-size:.7rem; }.runway-actions .secondary-cta { min-height:46px; padding:5px; color:#eacfe7; font-size:.67rem; text-decoration:underline; text-underline-offset:4px; }
@keyframes show-flow {
  0% { opacity:1; transform:translate(-14px,-38px) scale(.88); animation-timing-function:cubic-bezier(.3,.15,.45,1); }
  46% { transform:translate(0,0) scale(1) rotate(0); animation-timing-function:ease-in-out; }
  64% { transform:translate(-4px,0) scale(1) rotate(-.8deg); animation-timing-function:ease-in-out; }
  82% { transform:translate(4px,0) scale(1) rotate(.8deg); animation-timing-function:ease-in-out; }
  100% { opacity:1; transform:translate(0,0) scale(1) rotate(0); }
}
/* A tiny rhythmic lift during approach, on the whole composition only. */
@keyframes show-footfall { 0%,100% { translate:0 0; } 50% { translate:0 -1.4px; } }
@keyframes audience-cheer { to{transform:translateY(-7px) rotate(10deg)} }
@keyframes show-celebrate { 0%{opacity:0} 20%,80%{opacity:1} 100%{opacity:0} }
@keyframes show-sparkle { from{transform:scale(.4) rotate(-20deg)} to{transform:scale(1.12) rotate(12deg)} }
@keyframes show-flash { 35%{opacity:.28} 100%{opacity:0} }
@keyframes judge-react { 50%{transform:translateY(-7px) rotate(-5deg) scale(1.1)} }
@keyframes reaction-sparkle { 30%,70%{opacity:1;transform:translateY(-6px)} }
@keyframes bubble-reveal { from{opacity:0;transform:translateY(8px) scale(.95)} }
@keyframes vote-bounce { 0%{opacity:0;transform:scale(.4)} 65%{opacity:1;transform:scale(1.17)} 100%{transform:none} }
@media (max-height:800px) and (min-width:800px) { .runway-performer{scale:1.18}.results-panel{gap:12px;padding:16px 20px}.speech-bubble{min-height:88px}.final-region{gap:12px} }
@media (max-height:800px) and (min-width:800px) { .runway-performer:has(.body-compact){scale:1.4} }
@media (max-width:1100px) and (min-width:800px) { .runway-layout{grid-template-columns:minmax(0,1fr) minmax(440px,1fr)}.results-panel{padding-inline:15px}.speech-bubble{font-size:.68rem}.results-title h2{font-size:1.5rem} }
@media (max-width:799px) {
  .runway-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.93fr) minmax(0,1fr);height:calc(100% - 76px);min-height:0}
  .runway-header{height:76px;padding:10px 18px}.runway-header h1{font-size:1.55rem}.runway-skip{font-size:.7rem;padding-inline:12px}
  .runway-performer{scale:1.03;margin-top:-240px}.runway-status{top:8px;font-size:.65rem;padding:7px 12px}
  .runway-performer:has(.body-compact){scale:1.2}
  .audience{bottom:4px;font-size:1.1rem}.runway-stage::before{top:45%}.runway-celebration strong{bottom:6%;font-size:1.1rem}
  .results-panel{min-height:0;padding:12px 25px;gap:9px;border-left:0;border-top:1px solid #ffffff20;overflow:hidden}
  .results-title h2{font-size:1.4rem}.results-title small{font-size:.55rem}.speech-bubble{min-height:68px;font-size:.72rem;padding:9px}
  .judge-avatar{width:56px;height:56px;margin-top:7px;font-size:1.15rem;border-width:3px}.judge-avatar::before,.judge-avatar::after{top:24px;width:5px;height:6px}.judge-avatar::before{left:13px}.judge-avatar::after{right:13px}.judge-avatar i{width:24px;height:24px;top:-12px;font-size:.7rem}
  .judge-card{gap:3px}.judge-card>strong{font-size:.62rem}.judge-card>small{font-size:.46rem}.judge-score{min-height:31px}.judge-score b{font-size:1.55rem}
  .final-region{gap:9px}.grand-finale{gap:2px}.grand-finale h2{font-size:1.16rem}.final-stars{font-size:1.05rem}.final-score{padding:2px 11px}.final-score strong{font-size:1.35rem}
  .runway-actions{grid-template-columns:1.4fr 1fr auto;gap:10px}.runway-actions [data-action="new-outfit"]{grid-column:auto;min-height:48px;font-size:.7rem;padding-inline:13px}.runway-actions .photo-cta{font-size:.64rem}.runway-actions .secondary-cta{font-size:.58rem;max-width:105px}
  .curtain{top:76px}.spotlight{top:76px;width:70%;height:50%}.spotlight.right{left:30%}
}
@media (max-width:540px), (max-height:850px) and (max-width:799px) {
  .runway-screen{height:auto;min-height:100dvh}.runway-layout{height:auto;grid-template-rows:400px auto}.runway-header h1{font-size:1.2rem}.runway-header{padding-inline:12px}
  .results-panel{padding:18px 12px;min-height:370px;overflow:visible}.runway-actions{grid-template-columns:1fr 1fr}.runway-actions [data-action="new-outfit"]{grid-column:1/-1}.speech-bubble{font-size:.62rem}.runway-performer{scale:.85}.runway-performer:has(.body-compact){scale:1.05}
}
/* Reduced-motion also shortens the JS clock; no travel, flash or bounce. */
.reduced-show .runway-performer { opacity:1;transform:none;animation:none!important; }
.reduced-show .flash,.reduced-show .runway-celebration,.reduced-show .audience { display:none; }
.skipped-show .curtain { transition:none; }.skipped-show .grand-finale { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .runway-screen *,.runway-screen *::before,.runway-screen *::after{animation:none!important;transition:none!important}
  .runway-screen .runway-performer{opacity:1;transform:none!important}.runway-screen .flash,.runway-screen .runway-celebration{display:none}
}