/* Reading Fashion Show — peach paper, berry ribbons and a little theater magic. */
@font-face{font-family:Showtime;src:url('./assets/fonts/Baloo2-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Fashion;src:url('../../fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Fashion;src:url('../../fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600 800;font-display:swap}
:root{--paper:#fff5ee;--surface:#fffdfa;--cream:#ffede2;--rose-wash:#ffedf4;--rose:#c53779;--rose-deep:#a12760;--lilac:#f0e7fb;--ink:#38263f;--muted:#796474;--line:#eadde5;--violet:#8052b3;--gold:#efba52;--success:#30765c;--shadow:0 12px 36px #7042670b,0 3px 9px #70426706;font-family:Fashion,system-ui,sans-serif}
body{background:radial-gradient(ellipse at 7% 5%,#ffe5de,transparent 42%),radial-gradient(ellipse at 95% 85%,#ece2fa,transparent 45%),var(--paper)}
h1,h2{font-family:Showtime,Fashion,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.12}
h1{font-size:clamp(34px,4.6vw,58px)}
.screen-header h1{font-size:clamp(32px,4.2vw,48px);margin-bottom:8px}
.eyebrow{letter-spacing:.14em;font-size:11px}
.screen-header p{font-size:14px;line-height:1.7}
.btn{font-size:14px;border-radius:14px;font-weight:600;min-height:48px}
.btn.primary{background:linear-gradient(125deg,#d83e7e,#b72f88);box-shadow:0 4px 0 #90215e,0 8px 20px #b52c7128;border-color:#b72f741f}
.btn.primary:hover:not(:disabled){background:linear-gradient(125deg,#c52d6d,#9c2878);box-shadow:0 5px 0 #90215e,0 11px 22px #b52c7130;transform:translateY(-2px)}
.btn.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #90215e}
.btn.secondary{border-color:#d7b7d8;background:#fffafb}
.game-settings{width:46px;height:46px;top:12px;right:14px;color:#805271;background:#ffffffd9;border-color:#e6cddc;z-index:20;box-shadow:0 3px 9px #6035520a}
.icon-button,.close-button{width:48px;height:48px;min-width:48px}
:focus-visible{outline-color:#7746ab}
.progress-dots{gap:8px;margin:0 0 16px}
.progress-dots .dot{width:30px;height:30px;border-radius:11px;font-size:12px;font-weight:600;border-color:#e4cfdc;background:#fffbf8}
.progress-dots .dot.active{background:var(--rose);color:white;border-color:var(--rose);box-shadow:0 3px 9px #b6337224}
.progress-dots .dot.done{background:#e7f4ea;color:#35654c;border-color:#c6e0cc}

/* Opening stage: all decoration stays behind the single, central invitation. */
body[data-screen=start] .shell{padding:0;max-width:none}
.welcome-screen{isolation:isolate;overflow:hidden;min-height:100dvh;padding:74px 20px 70px;justify-content:center;background:#fdf1ed;animation:none}
.showtime-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,#fffbed 0,#fff0e9 46%,#eedcf2 80%)}
.theater-halo{position:absolute;width:65%;height:95%;left:17.5%;top:-10%;border-radius:50%;background:radial-gradient(ellipse,#fffefa 10%,#fff5dd4a 65%,transparent 70%)}
.theater-arch{position:absolute;inset:7% 16% 7%;border:1px solid #bc83b32b;border-radius:48% 48% 8px 8px;box-shadow:0 0 0 12px #fffcf740,0 0 0 13px #dab1c22a}
.welcome-curtain{position:absolute;top:-2%;bottom:7%;width:18%;background:repeating-linear-gradient(90deg,#7b417f 0,#b371a3 15%,#d698b9 28%,#955587 42%,#763e79 55%);filter:drop-shadow(9px 7px 8px #6e3e6025);transform-origin:top;animation:curtainBreathe 9s ease-in-out infinite;clip-path:polygon(0 0,100% 0,90% 24%,67% 48%,47% 63%,33% 92%,0 100%)}
.welcome-curtain:after{content:'';position:absolute;top:61%;left:0;width:55%;height:9px;background:linear-gradient(#fbe1a0,#c9984b,#ffeaba);transform:rotate(-22deg);box-shadow:0 4px 8px #60363f30}
.curtain-left{left:-2%}.curtain-right{right:-2%;scale:-1 1;animation-delay:-4.5s}
.welcome-valance{position:absolute;inset:-45px -5% auto;height:102px;border-radius:0 0 50% 50%;background:repeating-linear-gradient(95deg,#9a5a91 0,#c684a8 6%,#d997b6 10%,#9b5a91 14%);border-bottom:4px solid #dfb66f;box-shadow:0 5px 12px #85467515}
.welcome-beam{position:absolute;top:-10%;left:50%;height:110%;width:32%;transform-origin:50% 0;clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);background:linear-gradient(#ffefaf15,#fffbe880);mix-blend-mode:screen;animation:spotlightSweep 13s ease-in-out infinite}
.beam-left{margin-left:-20%;--beam-from:-24deg;--beam-to:16deg}.beam-right{margin-left:-11%;--beam-from:22deg;--beam-to:-16deg;animation-delay:-6.5s}
.welcome-runway{position:absolute;inset:72% 12% -10%;clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);background:linear-gradient(#f6d4d847,#e4c9e882);border-top:1px solid #fff8e9}
.welcome-runway:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 36px,#fffaf780 37px,transparent 38px)}
.welcome-runway span{position:absolute;top:0;bottom:0;width:1px;background:#fffef6a0;transform-origin:top}
.welcome-runway span:nth-child(1){left:40%;transform:rotate(17deg)}.welcome-runway span:nth-child(2){left:50%}.welcome-runway span:nth-child(3){left:60%;transform:rotate(-17deg)}
.fashion-float{position:absolute;width:clamp(65px,9.5vw,132px);filter:drop-shadow(0 12px 8px #87566a20);animation:fashionFloat 7s ease-in-out infinite;animation-delay:var(--float-delay);transform:rotate(var(--tilt))}
.fashion-float svg{width:100%;height:100%}
.float-dress{left:13%;top:24%;width:clamp(100px,13vw,182px)}.float-bow{right:14%;top:22%}.float-bag{right:12%;top:56%}.float-shoe{left:13%;top:66%}.float-crown{left:26%;top:8%;width:74px}.float-book{right:26%;top:76%;width:75px}
.theater-twinkle{position:absolute;left:var(--sx);top:var(--sy);color:#c28f48;font-size:22px;animation:theaterTwinkle 4.2s ease-in-out infinite;animation-delay:var(--spark-delay)}
.welcome-copy{position:relative;max-width:680px;width:100%;padding:22px 12px;z-index:1}
.welcome-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;color:#956531;font-weight:600;margin-bottom:18px}
.welcome-kicker:before,.welcome-kicker:after{content:'✦';font-size:16px;color:#c69244}
.welcome-screen h1{font-family:Showtime,Fashion,sans-serif;font-size:clamp(54px,7.4vw,104px);line-height:.96;font-weight:700;letter-spacing:-.045em;margin:0 0 20px;color:#412445;text-shadow:0 3px 0 #fff8f0}
.welcome-screen h1 em{font:inherit;color:#c3377d;display:inline-block;position:relative}
.welcome-screen h1 em:after{content:'';display:block;width:82%;height:10px;margin:4px auto -9px;border-top:4px solid #e9ba67;border-radius:50%;transform:rotate(-3deg)}
.welcome-tagline{font-size:16px;color:#796073;line-height:1.8;max-width:380px;margin:28px auto 23px}
.welcome-actions .play-button{min-height:62px;min-width:246px;border-radius:18px;gap:28px;font-size:18px;padding:16px 26px}
.play-button>span{width:26px;height:26px;display:grid;place-items:center;background:#ffffff20;border-radius:50%;font-size:15px}
.welcome-secondary{justify-content:center;gap:10px;margin:14px 0 0}
.welcome-secondary .btn{font-size:12px;color:#79536e;min-height:44px;padding:9px 13px}
.welcome-facts{margin:25px 0 0;gap:0;color:#876f7b;font-size:11px;letter-spacing:.01em}
.welcome-facts span{padding:0 13px}.welcome-facts span+span{border-left:1px solid #dabdcb}.welcome-facts span+span:before{content:none}
.welcome-caption{position:absolute;bottom:21px;left:0;right:0;margin:0;font-size:10px;font-weight:600;letter-spacing:.24em;color:#946887}

/* Learning stays calm, legible and satisfying. */
.skill-screen{max-width:950px;padding-bottom:28px}
.skill-screen .screen-header{margin:15px 0 24px}
.skill-group-title h2{font-family:Showtime,sans-serif;font-size:25px}
.skill-group-title>span{font-size:11px;background:#f1e6f6;border-radius:99px;padding:5px 10px;color:#73538a}
.skill-card{border:1px solid #e7d8e4;border-radius:18px;background:#fffdfa;box-shadow:0 3px 0 #e9d9e42b}
.skill-card h3{font:700 23px/1.15 Showtime,sans-serif;letter-spacing:-.02em}
.skill-card p{font-size:12px;line-height:1.6}
.skill-icon{height:50px;width:50px;min-width:50px;border-radius:15px;background:linear-gradient(135deg,#ffeadc,#fae4f1);font-size:25px}
.skill-group:last-child .skill-icon{background:linear-gradient(135deg,#eee2fb,#e2f0ed)}
.skill-arrow{display:grid;place-items:center;width:32px;height:32px;min-width:32px;border-radius:50%;background:#fcf0f6}
.skill-card:hover{border-color:#ca87b2;box-shadow:0 7px 18px #79516912}
body[data-screen=questions] .panel{background:transparent;border:0;box-shadow:none;padding:27px 0}
.question-card{border:1px solid #e8d8e3;border-radius:24px;box-shadow:0 12px 36px #6d436a0d;position:relative;overflow:hidden;padding:26px 30px}
.question-card:before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#e75792 0 40%,#a67acb 40% 72%,#eabc66 72%)}
.question-card h2{font:700 clamp(23px,2.8vw,31px)/1.25 Showtime,sans-serif}
.question-heading{gap:16px;align-items:center}
.question-heading .btn{white-space:nowrap;background:#f2e9fa;color:#7446a0;min-height:44px}
.question-path{display:flex;gap:7px;margin:0 auto 20px;max-width:160px}
.question-path span{height:6px;flex:1;border-radius:10px;background:#e6dbe5}.question-path .done{background:#55a485}.question-path .current{background:#ce4685}
.answer{border:2px solid #efe3ea;background:#fffaf7;border-radius:14px;font-size:17px;min-height:62px;padding:14px 17px;display:flex;align-items:center}
.answer>span{min-width:30px;height:30px;background:#f3e9f3;border:0;border-radius:9px;color:#856086;font-weight:600}
.answer:hover:not(:disabled){border-color:#d18fb5;box-shadow:0 4px 12px #ad70911a}
.answer.correct{border-color:#5baf88;background:#edf9f0;box-shadow:0 0 0 4px #73bc9620}
.answer.correct>span{background:#438969;color:white}
.success-feedback{border:1px solid #c6e3cf;border-radius:16px}
.success-feedback strong{font:700 27px/1.2 Showtime,sans-serif}
.passage{background:#f5effa;border:1px solid #e3d3ef;border-left:4px solid #a87cc6;border-radius:14px;font-family:Fashion,system-ui,sans-serif;font-size:17px;line-height:1.8}
.countdown-number{font:700 112px/1 Showtime,sans-serif;color:#bd3277;border:3px solid #edc588;background:radial-gradient(circle,#fffdfa 45%,#ffe8f1);box-shadow:0 0 0 12px #fff9f5,0 0 0 13px #e8c9db,0 18px 65px #b35b9120}

/* Theme reveal: keep the reference art as the main visual evidence. */
.theme-roll-screen h1,.inspiration-screen h1,.anything-card h2{font-family:Showtime,sans-serif;font-weight:700}
.theme-slot{border-color:#d283ae;background:#fffdfa;box-shadow:0 0 0 8px #fffcf5,0 0 0 10px #e2c4d8,0 15px 45px #a3588820;border-radius:22px}
.roller-ticket{font-family:Showtime,sans-serif}.roller-ticket strong{font-weight:700}
.theme-reveal-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:22px;background:linear-gradient(135deg,#ffeddd,#f2dff7);border:1px solid #ead0df;margin:8px auto 12px;font-size:38px;box-shadow:0 5px 15px #a35b7f0c;transform:rotate(-5deg)}
.inspiration-screen .eyebrow{display:block;margin-bottom:4px}
.theme-description{font-size:15px;margin:8px 0}.theme-hint{font-size:13px;margin:0 auto 12px;max-width:690px;color:#795e73}
.theme-palette{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 18px;font-size:11px;color:#7b6177}
.theme-palette>div{display:flex;gap:6px}.theme-color{display:block;width:25px;height:25px;background:var(--swatch);border:3px solid #fffbf8;border-radius:50%;box-shadow:0 0 0 1px #e1cdd8}
.theme-palette small{font-size:11px;font-style:italic}
.inspiration-card{border-radius:18px;padding:7px;box-shadow:0 7px 18px #89577810;background:#fffefa;transform:rotate(-1.5deg)}
.inspiration-card:nth-child(2){transform:rotate(1deg)}.inspiration-card:nth-child(3){transform:rotate(-.75deg)}
.inspiration-card figcaption span{color:#ae467a;font-weight:600;font-size:10px}.inspiration-card figcaption strong{font-size:12px}
.reference-frame{height:clamp(165px,31dvh,280px)}
.ready-theme{position:relative;background:linear-gradient(#fff5eeeb,#fff5ee 20%);margin-top:10px;padding:12px 10px 18px}
.anything-card{border:1px solid #e5c7df;background:radial-gradient(ellipse at top left,#fff7cd,transparent 55%),linear-gradient(120deg,#ffe5ed,#ece4fb);border-radius:26px}

/* Dressing room: a lit plinth, clear category rail and room to see the clothes. */
.dressing-screen{padding-top:24px}.dressing-top{padding-right:51px;min-height:62px;margin-bottom:14px}
.dressing-top h1{font:700 32px/1.15 Showtime,sans-serif}.dressing-top .eyebrow{font-size:10px}
.dress-theme-note .lock-note{font-size:11px}.dress-theme-note .btn{font-size:12px;min-height:40px}
.style-toolbox{background:#f3e5f0;border-color:#e7cfdf;padding:7px;gap:7px;border-radius:20px;box-shadow:0 4px 12px #a5768e06}
.style-tool{min-height:66px;background:#fffaf8;border-radius:13px;color:#77586f}.style-tool>span{font-size:24px}.style-tool strong{font-size:11px}
.style-tool.active{background:linear-gradient(135deg,#cd3f80,#aa3e90);border-color:#b63d84;box-shadow:0 3px 0 #8f306e;color:white}
.style-tool:hover:not(.active){background:#fff1f6;border-color:#d68fb8}
.stage-card,.closet-panel{border-radius:22px;border-color:#e6d2e0;box-shadow:var(--shadow)}
.stage-header{background:#fffcf9;min-height:56px;padding:8px 14px;font-size:10px;color:#7d5872}
.stage-header .timer{font:700 25px/1 Showtime,sans-serif;min-width:85px;min-height:40px;letter-spacing:0;border-radius:14px;background:#f8e6f0;color:#b73376;border:1px solid #eed0e0}
.avatar-stage{background:radial-gradient(ellipse at 50% 30%,#fffdf5 0,#f6e9ed 52%,#ebddf3 100%);isolation:isolate}
.avatar-stage:before{content:'';position:absolute;inset:5% 8% 8%;border:1px solid #fff9f6cc;border-radius:46% 46% 6px 6px;box-shadow:0 0 0 6px #ffffff30;pointer-events:none;z-index:0}
.avatar-stage:after{inset:auto 12% 5px;height:25px;background:linear-gradient(#fff6fc,#ddc7e0);border:1px solid #cfb9d58a;box-shadow:0 6px 0 #d8c3da;filter:none;z-index:0}
.avatar-stage:has([data-camera]:not([data-camera=full])):after{display:none}
.avatar-stage .avatar-render{height:clamp(290px,calc(100dvh - 315px),540px);padding:8px 8px 13px;position:relative;z-index:1}
.studio-toolbar{background:#fffcfa;gap:7px;border-top:1px solid #efdfeb}.studio-toolbar .btn{font-size:11px}
.wearing-details{border-top:1px dashed #ead8e3;padding:0 12px 8px}.wearing-details summary{min-height:42px;font-size:11px;color:#825b76;font-weight:600}
.equipped-list{display:flex;flex-wrap:wrap;gap:6px;padding:3px 0 5px;max-height:132px}
.equipped-chip{display:inline-flex;align-items:center;flex:0 0 auto;gap:0;max-width:100%;padding:0;border:1px solid #e4bfd6;background:#fff2f7;border-radius:10px;min-height:40px;overflow:hidden}
.equipped-chip>button{display:block;width:auto;height:auto;margin:0;border-radius:0;background:transparent;border:0;font-size:10px;min-height:40px;color:#875572;padding:6px 8px;line-height:1.4}
.equipped-chip>button:first-child{flex:1;text-align:left}.equipped-chip>button:last-child{min-width:38px;font-size:20px;border-left:1px solid #efdae5;padding:5px}
.equipped-chip>button:hover{background:#f6dfe9}
.clear-outfit{display:flex;width:100%;min-height:42px;margin:6px 0 2px;border:1px solid #e6bfd4;background:#fff1f6;color:#a43270;font-size:11px;padding:9px 8px;border-radius:11px}
.clear-outfit:hover:not(:disabled){background:#f9dfeb;border-color:#cd88ad}
.feature-browser{display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:3px;padding-right:9px;min-width:0}
.feature-browser .custom-sections{min-width:0;align-self:start;grid-auto-rows:max-content;max-height:calc(100dvh - 228px);padding:9px;scrollbar-color:#d6adcc #fbf1f5;overscroll-behavior:contain}
.feature-scroll-buttons{padding-block:12px}
.subgroups{padding:10px 12px;gap:7px;border:0;background:#fffaf8}.subgroups button{font-size:11px;min-height:42px;padding:7px 12px}
.subgroups button[aria-pressed=true]{color:#99517a;border-color:#db9cbd;background:#fae7f1}
.filters{padding:2px 14px 12px}.filters input[type=search]{height:44px;font-size:12px;border-radius:12px;background:#fffaf9}.filters .theme-picks-label{color:#a67523;font-size:11px}.filters label input{accent-color:#ba347d}
.piece-browser{grid-template-columns:minmax(0,1fr) 50px;gap:3px;padding-right:9px}
.piece-browser .item-grid{gap:10px;padding:3px 10px 12px 14px;max-height:clamp(200px,calc(100dvh - 382px),470px);min-height:170px;scrollbar-color:#d6adcc #fbf1f5}
.item-card{border:1px solid #ead9e3;border-radius:15px;background:#fffdfa;transition:transform .15s,border-color .15s,box-shadow .15s}
.item-card:hover:not(:disabled){border-color:#ce7fa9;box-shadow:0 3px 12px #a14d8120;transform:translateY(-1px)}
.item-card.selected{border-color:#c43a7b;box-shadow:inset 0 0 0 1px #c43a7b;background:#ffe9f2}
.item-preview{height:125px;background:radial-gradient(ellipse at top,#fffaf4,#f0e5ed);border-bottom:1px solid #eedfe8}
.item-name{font-size:11px;line-height:1.4;min-height:45px;padding:8px}
.item-card.selected:after{display:none}.equipped-check{background:#bf397b;color:white;top:7px;right:7px;width:23px;height:23px;border:2px solid #fff;border-radius:50%;font-size:13px}
.theme-match-badge{position:absolute;top:7px;left:7px;padding:3px 6px;border-radius:6px;background:#fff1bc;color:#865914;border:1px solid #e4c479;font-size:9px;font-weight:600;box-shadow:0 2px 4px #85521210}
.theme-match-badge:has(+.equipped-check){max-width:calc(100% - 43px)}
.piece-scroll-button{height:48px;width:48px;min-height:48px;border-radius:14px;background:#ae488a;border-color:#ae488a;box-shadow:0 3px 0 #843167}.piece-scroll-button:hover:not(:disabled){background:#913570}
.piece-scroll-buttons>span{font-size:9px}.piece-scroll-button:disabled{opacity:.6}
.color-picker{background:#fbf0f6;border-top:1px solid #e8cfdf;padding:12px 15px;max-height:190px}.color-picker .field-label{font-size:11px;line-height:1.5}
.color-picker .field-label>span{display:block;font-size:10px;margin-top:2px}
.color-picker .color-swatch{width:30px;height:30px;min-width:30px;min-height:30px;border:3px solid #ffffffa0;box-shadow:0 0 0 1px #ddcbd8}
.color-swatch.selected{outline:2px solid #bf3378;outline-offset:2px}
.custom-color .btn{min-height:40px;font-size:11px}.custom-color label{font-size:11px}.more-colors summary{min-height:32px;padding-top:7px}
.option-button{border-radius:14px;background:#fffdfa;color:#796071}.option-button.selected{border-color:#c33b7e;box-shadow:inset 0 0 0 1px #c33b7e;background:#ffe9f2;color:#a32867}
.feature-preview{background:radial-gradient(ellipse at top,#fff6ee,#f1e5ef)}
.option-button>span:last-child{font-size:11px;padding:8px 5px}
.custom-panel .field-label{color:#8a5378;font-size:13px;font-weight:600}
.time-urgent .stage-card{box-shadow:0 0 0 3px #ecb04f66,0 0 27px #eaa44720}
.time-urgent .timer{background:#b95122;color:white;border-color:#a4451d}.time-urgent .rush-message{background:#fff0cf;color:#995022;font-weight:600}

/* The show and keepsake. Existing five-second performances remain untouched. */
.solo-show .screen-header h1{font-family:Showtime,sans-serif;font-size:38px}
.catwalk-scene{border:3px solid #e2b777;border-radius:90px 90px 20px 20px;background:radial-gradient(ellipse at 50% 24%,#fffbed,#f4deed 53%,#c69cca);box-shadow:0 10px 32px #70436714,inset 0 0 0 6px #fff3e933}
.curtain{opacity:.9;width:18%;background:repeating-linear-gradient(90deg,#81417e,#a66599 18px,#ca8db4 30px,#874985 46px)}
.runway-floor{height:24%;opacity:.9;background:repeating-linear-gradient(0deg,#f2d7df,#fff2e9 2px,#ebcede 45px,#fff1e8 47px);border-top:1px solid #ffefcd}
.spotlight{background:linear-gradient(#fff5ca99,#fff6df77,transparent);animation:runwayLight 7s ease-in-out infinite alternate;transform-origin:top}
.show-caption{background:#fff9eeef;border:1px solid #e7cda6;box-shadow:0 3px 9px #73547314;bottom:10px;border-radius:14px}
.show-caption strong{font:700 24px/1.2 Showtime,sans-serif}.show-caption span{font-size:11px}
.voting-panel{background:linear-gradient(145deg,#fff4cd,#fffaf0 70%);border-color:#e4ba63;border-radius:23px;box-shadow:0 7px 24px #bb873e15}
.voting-panel h2{font-family:Showtime,sans-serif;font-size:36px}.vote-invitation{font-size:13px;color:#925b18}.vote-instruction{font-size:13px}.voting-panel .show-clock>span{font-family:Showtime,sans-serif;color:#ae4b8a}
.star-vote{border-radius:13px}.star-vote.filled{color:#9d6610;background:#ffe8a0;box-shadow:0 3px 0 #d9b565}
.your-walk{border-color:#c7a5dc;background:linear-gradient(145deg,#f5e7fc,#fff8f2)}
.podium{gap:13px;margin-top:25px;position:relative;padding:0 10px 18px;border-bottom:2px solid #e6d2dc;border-radius:0 0 50% 50%}
.podium-step{border:1px solid #cfc0df;box-shadow:inset -10px 0 0 #5e327512,0 7px 12px #74506c0d;background:linear-gradient(135deg,#f1e8fb,#c8b4e2);border-radius:14px 14px 7px 7px}
.place-1 .podium-step{border-color:#d7ac50;background:linear-gradient(125deg,#fff0ad,#efc36c);box-shadow:inset -10px 0 0 #bc8b2220,0 6px 20px #ddad4224}
.place-3 .podium-step{background:linear-gradient(135deg,#f9dfc7,#dfaf91);border-color:#d4a68c}.place-4 .podium-step{background:#eee3ec;border-color:#dfd0df}
.podium-step h2{font-family:Showtime,sans-serif}.place-number{font-family:Showtime,sans-serif}.winner-crown{color:#cb9134;text-shadow:0 2px 0 #fff5c5}
.is-you .podium-step{outline-color:#bb3881;outline-offset:4px}
.final-medal{width:64px;height:64px;background:linear-gradient(140deg,#fff2b9,#f3cb78);border:2px solid #d5a34c;box-shadow:0 0 0 6px #fffaf1,0 0 0 7px #e8c894;color:#9f6d20;font-size:38px}
.final-screen .screen-header{margin-top:20px}.final-screen .screen-header h1{font-family:Showtime,sans-serif}
.learning-recap{background:#fffaf6;border:1px solid #ead8e4;border-radius:18px;padding:12px 0;box-shadow:var(--shadow);margin:17px auto 9px;max-width:670px}
.learning-recap strong{font:700 35px/1.2 Showtime,sans-serif;color:#b6387a}.learning-recap>div:nth-child(2) strong{color:#8052b3}.learning-recap>div:nth-child(3) strong{color:#a5742d}
.learning-recap span{font-size:11px}.practice-label{font-size:11px}
.look-story{gap:21px;margin:30px auto 24px;max-width:820px}
.story-look{border-radius:9px;padding:9px;box-shadow:0 8px 22px #83567614;position:relative;transform:rotate(-3deg)}
.story-look:nth-child(2){transform:rotate(2deg)}.story-look:nth-child(3){transform:rotate(-1deg)}
.story-look:before{content:'';position:absolute;top:-9px;left:calc(50% - 23px);width:46px;height:19px;background:#e7bbd780;border-left:1px solid #fff8;border-right:1px solid #fff8;z-index:2;transform:rotate(-5deg)}
.story-photo{background:radial-gradient(ellipse at 50% 30%,#fff8e9,#f0d8e8 80%);border-radius:5px;height:230px}
.story-look:nth-child(2) .story-photo{background:radial-gradient(ellipse at 50% 30%,#fff9ef,#e4d7f4 80%)}
.story-look:nth-child(3) .story-photo{background:radial-gradient(ellipse at 50% 30%,#fff9ef,#f5ddc9 80%)}
.story-photo>span{font:700 24px/1 Showtime,sans-serif;color:#9f719078}.story-caption strong{font:700 22px/1.2 Showtime,sans-serif}.story-caption small{font-size:10px!important}
.final-actions{margin:28px 0 22px}.final-standings{margin-top:18px;background:#ffffff70}
.modal{background:#fffaf6;border-color:#e0c6da;border-radius:24px;box-shadow:0 20px 75px #46224133}.modal h2{font-family:Showtime,sans-serif}

@keyframes fashionFloat{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-16px) rotate(calc(var(--tilt) + 7deg))}}
@keyframes curtainBreathe{0%,100%{transform:skewX(0)}50%{transform:skewX(-2deg)}}
@keyframes spotlightSweep{0%,100%{transform:rotate(var(--beam-from))}50%{transform:rotate(var(--beam-to))}}
@keyframes theaterTwinkle{0%,100%{opacity:.35;transform:scale(.65)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes runwayLight{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

@media(min-width:681px) and (max-height:650px){
 .welcome-screen{padding:54px 20px 50px}.welcome-copy{padding:8px 0}.welcome-screen h1{font-size:clamp(58px,7vw,82px)}.welcome-kicker{margin-bottom:12px}.welcome-tagline{margin:20px auto 18px;font-size:14px}.welcome-facts{margin-top:18px}.welcome-caption{bottom:14px}
 .dressing-screen{padding-top:17px}.dressing-top{min-height:52px;margin-bottom:8px}.style-tool{min-height:55px}.style-toolbox{margin-bottom:9px}.stage-header{min-height:48px}.avatar-stage .avatar-render{height:clamp(230px,calc(100dvh - 288px),400px)}.piece-browser .item-grid{max-height:calc(100dvh - 354px);min-height:165px}.item-preview{height:106px}
 .inspiration-screen{padding-top:14px}.theme-reveal-icon{width:47px;height:47px;font-size:29px;margin:5px auto 8px}.inspiration-screen h1{font-size:37px}.theme-palette{margin:10px auto 13px}.reference-frame{height:170px}.ready-theme p{font-size:11px;margin-bottom:8px}
 .solo-show .screen-header h1{font-size:32px}.catwalk-scene{height:clamp(285px,calc(100dvh - 186px),450px)}
}
@media(max-width:940px){
 .welcome-copy{max-width:580px}.float-dress{left:6%;top:27%;width:125px}.float-bow{right:7%;top:24%}.float-bag{right:6%;top:61%}.float-shoe{left:8%;top:72%}.float-crown{left:24%}.float-book{right:23%;top:81%}
 .dressing-layout{grid-template-columns:minmax(195px,.65fr) minmax(0,1.5fr)}.piece-browser .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.item-preview{height:111px}
}
@media(max-width:680px){
 .shell{padding:0 13px}.screen-header h1{font-size:34px}.screen-header p{font-size:13px}
 .welcome-screen{padding:90px 20px 85px;min-height:100dvh}.welcome-copy{padding:0;max-width:440px}.welcome-screen h1{font-size:clamp(53px,10.7vw,74px)}.welcome-kicker{font-size:9px;margin-bottom:18px}.welcome-tagline{font-size:14px;max-width:270px;margin:25px auto 23px}.welcome-secondary{gap:3px}.welcome-secondary .btn{font-size:11px;padding:9px 8px}.welcome-facts{font-size:10px;margin-top:20px}.welcome-facts span{padding:0 8px}.welcome-caption{font-size:8px;bottom:25px}
 .theater-arch{inset:11% 8% 7%}.welcome-curtain{width:19%;bottom:22%}.welcome-valance{height:91px}.fashion-float{width:65px}.float-dress{left:3%;top:16%;width:81px}.float-bow{right:4%;top:15%}.float-bag{right:5%;top:77%;width:65px}.float-shoe{left:4%;top:77%;width:75px}.float-crown{left:calc(50% - 26px);top:8%;width:52px}.float-book{display:none}.theater-twinkle{font-size:16px}.welcome-runway{inset:75% -12% -10%}
 .skill-group-title{align-items:flex-start}.skill-group-title h2{font-size:22px}.skill-group-title>span{font-size:10px;max-width:105px;text-align:center;padding:5px 8px}.skill-card h3{font-size:23px}
 body[data-screen=questions] .panel{padding-top:30px}.question-card{padding:24px 18px}.question-heading .btn{margin-top:3px}.answer{padding:12px;font-size:16px}.answer>span{margin-right:8px}.answers{gap:9px}.success-feedback strong{font-size:25px}.passage{font-size:16px}
 .theme-palette{gap:8px;flex-wrap:wrap;margin:12px 0}.theme-palette small{display:none}.theme-palette>span{font-size:10px}.theme-color{width:23px;height:23px}.inspiration-card figcaption strong{font-size:10px;line-height:1.45}.inspiration-card figcaption span{font-size:9px}.reference-frame{height:190px}.theme-description{font-size:14px}.theme-hint{font-size:12px}.ready-theme{padding:12px 5px 18px}
 .dressing-screen{padding-top:22px}.dressing-top{min-height:61px;padding-right:35px;gap:6px}.dressing-top h1{font-size:26px}.dressing-top .eyebrow{font-size:9px}.dress-theme-note .lock-note{font-size:9px;max-width:125px}.dress-theme-note .btn{font-size:10px;padding:4px;min-height:36px}
 .style-toolbox{grid-template-columns:repeat(5,minmax(0,1fr));padding:6px;gap:5px}.style-tool{min-height:55px;flex-direction:column;gap:2px}.style-tool strong{font-size:10px}.style-tool>span{font-size:23px}
 .dressing-layout{grid-template-columns:minmax(115px,.64fr) minmax(0,1.5fr);gap:9px}.stage-card,.closet-panel{border-radius:16px}.stage-header{min-height:50px;padding:5px}.stage-header .timer{min-width:72px;font-size:22px}.avatar-stage .avatar-render{height:300px;min-height:0;padding:5px 3px 13px}.avatar-stage:before{inset:5% 5% 8%}
 .studio-toolbar{padding:6px 4px;gap:3px}.studio-toolbar .btn{min-height:42px;font-size:10px;padding:6px 3px;flex-basis:100%}.studio-toolbar .icon-button{height:42px;width:42px;min-width:42px}
 .wearing-details{padding:0 6px 5px}.wearing-details summary{font-size:10px;min-height:40px}.equipped-chip{width:100%}.equipped-chip>button{font-size:9px}.equipped-chip>button:last-child{min-width:31px}.equipped-list{max-height:148px}
 .subgroups{padding:7px;gap:5px}.subgroups button{font-size:10px;min-height:40px;padding:6px 10px}.filters{padding:3px 7px 9px;gap:7px}.filters input[type=search]{font-size:11px;height:42px}.filters .theme-picks-label{font-size:10px}.accessory-hint{font-size:10px;line-height:1.5}
 .piece-browser .item-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:3px 7px 10px;gap:7px;max-height:calc(100dvh - 430px);min-height:175px}.item-preview{height:106px}.item-name{font-size:10px;padding:6px;min-height:43px}.theme-match-badge{font-size:8px;padding:2px 4px;top:5px;left:5px}.equipped-check{width:19px;height:19px;right:4px;top:4px;font-size:11px}
 .color-picker{padding:10px;max-height:196px}.color-picker .field-label{font-size:10px}.color-picker .field-label>span{font-size:9px}.color-picker .color-swatch{width:29px;height:29px;min-width:29px}.custom-color{gap:5px}.custom-color label{font-size:10px}
 .custom-panel .field-label{font-size:12px}.custom-panel .custom-section{padding:9px!important}.custom-panel .option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.option-button>span:last-child{font-size:10px}.custom-sections{max-height:calc(100dvh - 265px)}
 .solo-show .screen-header h1{font-size:29px}.catwalk-scene{height:310px}.show-caption strong{font-size:21px}.show-caption span{font-size:10px}.voting-panel{padding:15px}.voting-panel h2{font-size:31px}.vote-invitation{font-size:11px}.vote-instruction{font-size:12px}.star-votes{gap:6px}.star-vote{min-width:44px;min-height:65px}.star-vote>span{font-size:36px}
 .podium{gap:7px;padding:0 0 14px}.podium-step{padding:8px 3px}.podium-step h2{font-size:21px}.place-1 .podium-step h2{font-size:24px}.place-number{font-size:21px;float:none;display:block;line-height:1}.podium-step>span:last-child{font-size:10px}.podium-step small{font-size:9px}.place-4 .podium-step{height:68px}.place-3 .podium-step{height:80px}.place-2 .podium-step{height:96px}.place-1 .podium-step{height:119px}
 .learning-recap{padding:10px 0}.learning-recap>div{padding:0 7px}.learning-recap strong{font-size:28px}.learning-recap span{font-size:10px}.look-story{gap:10px;margin:24px auto}.story-look{padding:6px;transform:rotate(-2deg)}.story-photo{height:170px}.story-caption{flex-direction:column;align-items:flex-start;padding:7px 2px 1px}.story-caption strong{font-size:19px}.story-caption small{font-size:9px!important}.story-caption .btn{min-height:40px}.final-actions{gap:10px}.final-actions .btn{min-height:48px}
}
@media(max-width:540px){
 .feature-browser{grid-template-columns:minmax(0,1fr);padding-right:0}.feature-scroll-buttons{grid-row:1;flex-direction:row;padding:8px;gap:7px}.feature-scroll-buttons>span{margin-right:auto}.feature-browser .custom-sections{grid-row:2;max-height:calc(100dvh - 330px);padding:0}
 .clear-outfit{font-size:9px;min-height:44px;line-height:1.4}
 .game-settings{width:38px;height:38px;right:8px;top:8px;font-size:20px}
 .piece-browser{grid-template-columns:minmax(0,1fr);gap:3px;padding-right:0}.piece-scroll-buttons{grid-row:1;flex-direction:row;gap:7px;padding:2px 8px 7px}.piece-scroll-button{width:48px;height:48px;min-height:48px}.piece-browser .item-grid{grid-row:2}.piece-scroll-buttons>span{margin-right:auto}
 .dressing-layout{grid-template-columns:112px minmax(0,1fr)}.closet-panel .item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item-preview{height:100px}.item-name{font-size:9px}.theme-match-badge{font-size:7px}.equipped-check{width:17px;height:17px}.item-card.selected .theme-match-badge{max-width:calc(100% - 27px)}
 .theme-inspiration{gap:7px}.reference-frame{height:168px}.theme-reveal-icon{width:56px;height:56px;font-size:31px}.inspiration-screen h1{font-size:35px}.theme-description{font-size:13px}
 .learning-recap span{font-size:9px}.story-photo{height:155px}.final-screen .screen-header h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
 .welcome-curtain,.welcome-beam,.fashion-float,.theater-twinkle,.spotlight,.screen,.success-feedback,.answer.correct,.correct-seal,.podium-contestant,.time-urgent .timer{animation:none!important}
 .fashion-float{transform:rotate(var(--tilt))}.welcome-beam{transform:rotate(var(--beam-from))}.theater-twinkle{opacity:.7}
 .btn,.item-card,.skill-card{transition:none}
}

/* Curriculum-audit presentation: concept-first academic choices and separated evidence. */
.academic-skill-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px}
.skill-card-copy{min-width:0}
.skill-grade-button{align-self:stretch;min-width:104px;min-height:46px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font:900 12px/1.2 Nunito,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.skill-grade-button:hover,.skill-grade-button:focus-visible{background:var(--yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.direction-text{margin:0 0 14px;font-size:clamp(18px,2.1vw,22px);font-weight:900;line-height:1.4;color:var(--ink)}
.student-read-card{margin:0 0 15px;padding:18px 20px;border:3px solid var(--ink);border-radius:18px;background:#fffdf4;box-shadow:5px 5px 0 rgba(38,28,21,.16)}
.student-read-card .evidence-label{display:block;margin-bottom:8px;font-size:10px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:var(--berry)}
.student-read-text{margin:0;white-space:pre-line;font-size:clamp(19px,2vw,23px);font-weight:750;line-height:1.65;color:var(--ink)}
.student-read-card .passage{margin:0;white-space:pre-line;font-size:clamp(24px,3.1vw,34px);font-weight:800;line-height:1.55;color:var(--ink)}
.focus-span{padding:0 .11em;border-bottom:4px solid var(--yellow);border-radius:3px;background:#fff0a8}
.answer-evidence .answer{font-size:clamp(23px,3vw,30px);line-height:1.3}
.support-note{display:block;margin:-7px 0 13px;font-size:11px;font-weight:800;color:#6b5b52}

@media(max-width:680px){
 .academic-skill-card{grid-template-columns:40px minmax(0,1fr);align-items:center}
 .academic-skill-card .skill-grade-button{grid-column:1/-1;width:100%;min-height:44px}
 .direction-text{font-size:18px}
 .student-read-card{padding:15px 14px}
 .student-read-card .passage{font-size:22px;line-height:1.5}
 .student-read-text{font-size:19px}
 .answer-evidence .answer{font-size:28px}
}