:root { --navy:#071c2d; --ink:#0a2637; --panel:#0b3042; --panel-2:#0e4150; --cream:#fff7dc; --paper:#fffdf2; --teal:#25d4b2; --teal-dark:#087f77; --amber:#ffc84b; --orange:#f3763e; --red:#e94d60; --sky:#7fe7ff; --muted:#b9d4d7; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:white; background:var(--navy); font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif; }
button { font:inherit; cursor:pointer; color:inherit; }
.lesson,.stadium { width:100%; height:100%; min-width:1100px; min-height:690px; }
.stadium { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(rgba(3,18,29,.2),rgba(3,18,29,.52)),url("art/stadium-backdrop-01.webp") center/cover no-repeat; }
.stadium::before { position:absolute; z-index:-1; inset:0; content:""; background:radial-gradient(circle at 54% 44%,transparent 0 34%,rgba(2,13,23,.46) 79%),linear-gradient(180deg,rgba(5,21,35,.14),rgba(2,14,23,.74)); }
.stadium::after { position:absolute; z-index:-1; left:-8%; right:-8%; bottom:-18%; height:39%; content:""; border-top:3px solid rgba(89,255,212,.42); border-radius:50% 50% 0 0; background:repeating-linear-gradient(90deg,rgba(26,118,82,.72) 0 110px,rgba(18,100,69,.72) 110px 220px); box-shadow:0 -14px 50px rgba(16,214,157,.14); transform:perspective(500px) rotateX(55deg); }
.stadium-lights { position:absolute; inset:0; z-index:0; pointer-events:none; }
.stadium-lights i { position:absolute; top:-18%; width:12%; height:72%; opacity:.22; transform-origin:top; background:linear-gradient(180deg,rgba(255,240,177,.72),transparent); filter:blur(10px); }
.stadium-lights i:nth-child(1){left:12%;transform:rotate(-18deg)}.stadium-lights i:nth-child(2){left:34%;transform:rotate(-7deg)}.stadium-lights i:nth-child(3){right:32%;transform:rotate(7deg)}.stadium-lights i:nth-child(4){right:10%;transform:rotate(18deg)}

.game-hud { position:absolute; z-index:15; left:22px; right:22px; top:18px; height:72px; display:flex; align-items:stretch; gap:12px; }
.case-file,.stat-patches,.difficulty-meter,.scoreboard { border:2px solid rgba(127,231,255,.34); background:linear-gradient(180deg,rgba(12,54,71,.94),rgba(5,31,44,.97)); box-shadow:inset 0 1px rgba(255,255,255,.11),0 6px 0 rgba(0,10,18,.48),0 12px 28px rgba(0,8,15,.25); backdrop-filter:blur(8px); }
.case-file { width:174px; display:grid; place-content:center; padding:9px 17px; border-radius:17px 8px 17px 8px; }
.case-file span { color:var(--teal); font-size:10px; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; }.case-file strong { margin-top:3px; font-size:18px; }
.stat-patches { flex:1; min-width:390px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:16px; }
.stat-patches span { min-width:76px; padding:8px 10px; border:2px solid #315d68; border-radius:999px; color:#7fa4a8; background:#082a3a; font-size:10px; font-weight:1000; letter-spacing:.08em; text-align:center; transition:all 160ms ease-out; }
.stat-patches i { width:28px; height:2px; border-radius:2px; background:#315d68; }.stat-patches span.is-active { color:#082735; border-color:#ffdf78; background:var(--amber); box-shadow:0 0 0 5px rgba(255,200,75,.12),0 0 18px rgba(255,196,69,.32); }.stat-patches span.is-done { color:#07362f; border-color:#64f5d3; background:var(--teal); }
.difficulty-meter { width:206px; display:grid; grid-template-columns:1fr auto; align-content:center; gap:6px 10px; padding:10px 14px; border-radius:16px; }.difficulty-meter span { color:var(--muted); font-size:11px; }.difficulty-meter span b { color:var(--teal); }.difficulty-meter > strong { grid-row:1/3; grid-column:2; align-self:center; color:var(--amber); font-size:24px; }.difficulty-meter > i { height:7px; overflow:hidden; border-radius:99px; background:#062330; }.difficulty-meter > i b { display:block; height:100%; width:18%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--amber),var(--orange)); transition:width 220ms ease-out; }
.scoreboard { display:flex; border-radius:8px 18px 8px 18px; }.scoreboard div { min-width:72px; display:grid; place-content:center; padding:7px 11px; text-align:center; }.scoreboard div+div { border-left:1px solid rgba(127,231,255,.18); }.scoreboard span { color:#9dc0c5; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.scoreboard strong { margin-top:2px; color:white; font-size:20px; line-height:1; }.scoreboard strong:first-letter { color:var(--amber); }

.coach-zone { position:absolute; z-index:5; left:20px; top:112px; bottom:25px; width:245px; display:flex; align-items:flex-end; justify-content:center; }
.mascot { position:relative; z-index:3; width:245px; max-height:67%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 16px 17px rgba(0,8,15,.58)); transform-origin:50% 90%; transition:transform 180ms ease-out,filter 180ms ease-out; }
.coach-bubble { position:absolute; z-index:5; left:3px; right:3px; top:3%; min-height:100px; display:grid; place-items:center; padding:17px 18px; border:3px solid #183b47; border-radius:23px 23px 23px 7px; color:#14313a; background:var(--cream); box-shadow:0 7px 0 rgba(4,24,34,.72),0 14px 26px rgba(0,9,17,.32); font-size:14px; font-weight:900; line-height:1.28; text-align:center; }
.coach-bubble::after { position:absolute; left:38px; bottom:-14px; width:22px; height:22px; content:""; transform:rotate(45deg); border-right:3px solid #183b47; border-bottom:3px solid #183b47; background:var(--cream); }
.kit-prop { position:absolute; z-index:4; left:-13px; bottom:-7px; width:105px; height:105px; object-fit:contain; filter:drop-shadow(0 9px 9px rgba(0,9,15,.46)); transform:rotate(-7deg); }
.coach-zone.is-cheering .mascot { animation:coach-cheer 650ms cubic-bezier(.2,.8,.25,1.2); filter:drop-shadow(0 0 24px rgba(255,216,89,.58)) drop-shadow(0 16px 17px rgba(0,8,15,.58)); }.coach-zone.is-thinking .mascot { animation:coach-think 2.4s ease-in-out infinite; }.coach-zone.is-oops .mascot { animation:coach-oops 420ms ease-out; }

.case-board { position:absolute; z-index:4; left:277px; right:190px; top:111px; bottom:25px; display:grid; grid-template-rows:auto minmax(330px,1fr) 38px auto; gap:8px; padding:19px 22px 17px; border:3px solid rgba(111,240,214,.5); border-radius:28px 10px 28px 10px; background:linear-gradient(180deg,rgba(8,43,57,.95),rgba(5,27,40,.97)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 0 rgba(0,12,20,.62),0 28px 55px rgba(0,8,14,.4); backdrop-filter:blur(11px); }
.case-heading { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.case-heading>div:first-child { min-width:0; }.case-heading span { color:var(--teal); font-size:10px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }.case-heading h1 { margin:4px 0 3px; font-size:clamp(27px,2.8vw,41px); line-height:1; letter-spacing:-.035em; text-shadow:0 3px 0 #011923; }.case-heading p { margin:0; max-width:680px; color:var(--muted); font-size:14px; line-height:1.35; }
.target-badge { flex:0 0 91px; height:67px; display:grid; place-content:center; border:2px solid #ffc84b; border-radius:8px 18px 8px 18px; color:#092b37; background:linear-gradient(145deg,#fff0a2,var(--amber)); box-shadow:inset 0 2px white,0 5px 0 #8b4f11; text-align:center; transform:rotate(1deg); }.target-badge span { color:#80500e; font-size:8px; }.target-badge strong { margin-top:1px; font-size:18px; letter-spacing:.04em; }

.data-stage { position:relative; min-height:330px; overflow:hidden; display:grid; grid-template-rows:104px 1fr; gap:8px; padding:17px; border:2px solid #2f7180; border-radius:19px; background:linear-gradient(180deg,rgba(3,28,40,.86),rgba(8,51,60,.88)); box-shadow:inset 0 0 42px rgba(0,8,15,.58),0 4px 0 #011722; }
.data-stage::before { position:absolute; inset:0; content:""; opacity:.2; pointer-events:none; background-image:linear-gradient(rgba(115,238,216,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(115,238,216,.13) 1px,transparent 1px); background-size:28px 28px; }
.card-rack { position:relative; z-index:2; min-height:88px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:9px 13px; border:2px dashed rgba(127,231,255,.27); border-radius:15px; background:rgba(1,20,31,.42); }
.data-card { position:relative; width:61px; height:70px; display:grid; place-items:center; padding:0; border:3px solid #e7f6ef; border-radius:10px 10px 14px 14px; color:#0c3440; background:linear-gradient(145deg,#fffdf0,#bff6e8); box-shadow:inset 0 -8px rgba(34,207,177,.16),0 6px 0 #08776f,0 9px 14px rgba(0,9,14,.35); font-size:25px; font-weight:1000; transform:rotate(var(--tilt,0deg)); transition:transform 140ms ease-out,filter 140ms ease-out,opacity 140ms ease-out; animation:card-pop 220ms ease-out both; }
.data-card::before { position:absolute; margin-top:-47px; width:25px; height:4px; content:""; border-radius:99px; background:#eebf49; }.data-card:hover { transform:translateY(-5px) rotate(0); filter:brightness(1.08); }.data-card:active { transform:translateY(3px) scale(.97); }.data-card.is-picked { opacity:.25; transform:scale(.82); }.data-card.is-middle { border-color:#ffe276; background:linear-gradient(145deg,#fff9c9,#ffc84b); box-shadow:inset 0 -8px rgba(197,106,17,.16),0 6px 0 #9b5912,0 0 24px rgba(255,205,71,.5); }
.model-zone { position:relative; z-index:2; min-height:184px; display:flex; align-items:center; justify-content:center; }
.model-empty { color:#779ba1; font-size:13px; font-weight:900; letter-spacing:.04em; text-align:center; }.model-empty::before { display:block; margin-bottom:7px; content:"⌁  ⌁  ⌁"; color:#477985; font-size:28px; }
.stack-model { width:min(670px,94%); height:183px; display:flex; align-items:flex-end; justify-content:center; gap:15px; padding:0 15px 12px; border-bottom:5px solid #82eed5; }.stack { min-width:52px; display:flex; flex-direction:column-reverse; align-items:center; gap:3px; }.stack i { width:49px; height:29px; display:grid; place-items:center; border:2px solid #dffef5; border-radius:7px; color:#09333d; background:var(--teal); box-shadow:0 3px 0 #097a70; font-size:13px; font-style:normal; font-weight:1000; animation:stack-in 220ms ease-out both; }.stack.is-tallest i { color:#56330b; border-color:#fff0ae; background:var(--amber); box-shadow:0 3px 0 #96550e; }.stack strong { margin-top:4px; color:#c9e7e5; font-size:12px; }
.ordered-model { width:min(720px,97%); display:flex; align-items:center; justify-content:center; gap:7px; }.ordered-model b { min-width:48px; height:55px; display:grid; place-items:center; border:2px solid #dcfff6; border-radius:9px; color:#09313a; background:#bdf8e9; box-shadow:0 4px 0 #0a7b72; font-size:19px; }.ordered-model b.is-middle { color:#573405; border-color:#fff2a6; background:var(--amber); box-shadow:0 4px 0 #8f500e,0 0 24px rgba(255,200,75,.5); transform:translateY(-8px) scale(1.1); }.median-bracket { position:absolute; bottom:24px; color:var(--amber); font-size:12px; font-weight:1000; }
.range-model { width:min(720px,92%); position:relative; padding-top:63px; }.number-line { height:9px; position:relative; border:2px solid #c9fff4; border-radius:99px; background:#1e807c; box-shadow:0 4px 0 #052d36; }.number-line::before,.number-line::after { position:absolute; top:50%; width:16px; height:16px; content:""; transform:translateY(-50%) rotate(45deg); border:3px solid #fff6c7; background:var(--amber); box-shadow:0 0 18px rgba(255,204,75,.5); }.number-line::before{left:-4px}.number-line::after{right:-4px}.endpoint { position:absolute; top:-51px; min-width:64px; text-align:center; }.endpoint:first-child{left:-27px}.endpoint:last-child{right:-27px}.endpoint strong { display:block; color:var(--amber); font-size:25px; }.endpoint span { color:#a8c9ca; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.range-span { position:absolute; left:50%; top:-29px; transform:translateX(-50%); color:white; font-size:14px; font-weight:1000; }
.mean-model { width:min(700px,96%); display:grid; grid-template-columns:1fr 70px 1fr; align-items:center; gap:15px; }.total-pile,.share-pile { min-height:115px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:5px; padding:14px; border:2px solid #3c8991; border-radius:16px; background:rgba(3,29,39,.64); }.total-pile i,.share-group i { width:13px; height:13px; border:2px solid #ffec9c; border-radius:50%; background:var(--amber); box-shadow:0 2px 0 #87500e; }.share-pile { display:flex; align-items:center; justify-content:center; gap:7px; }.share-group { min-width:43px; min-height:76px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:3px; padding:7px; border:2px solid #7cebd5; border-radius:10px; background:rgba(33,190,162,.2); }.mean-arrow { color:var(--amber); font-size:34px; text-align:center; animation:arrow-pulse 1.3s ease-in-out infinite; }.model-label { position:absolute; bottom:7px; color:#b9d4d7; font-size:11px; font-weight:900; }
.case-stamp { position:absolute; z-index:8; right:19px; bottom:17px; padding:7px 12px; opacity:0; transform:rotate(-9deg) scale(1.6); border:4px double var(--amber); border-radius:8px; color:var(--amber); font-size:24px; font-weight:1000; letter-spacing:.08em; pointer-events:none; }.case-stamp.is-visible { animation:stamp-in 420ms cubic-bezier(.2,.8,.3,1.35) forwards; }

.feedback { min-height:38px; display:grid; place-items:center; padding:3px 8px 0; color:#d9f5ef; font-size:13px; font-weight:900; text-align:center; }.feedback.is-error { color:#ff9aa8; }.action-area { min-height:68px; display:flex; align-items:flex-end; justify-content:center; gap:11px; }
.answer-grid,.explain-grid { width:min(760px,100%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.answer,.explain,.primary { min-height:60px; border:2px solid #66d9c6; border-radius:15px; background:linear-gradient(180deg,#146677,#0c4859); box-shadow:inset 0 2px rgba(255,255,255,.12),0 6px 0 #032632; font-weight:1000; transition:transform 140ms ease-out,box-shadow 140ms ease-out,filter 140ms ease-out; }.answer { color:#fff1a8; font-size:26px; }.explain { padding:8px 12px; font-size:13px; }.explain small { display:block; margin-top:4px; color:#afd2d4; font-size:10px; }.answer:hover,.explain:hover,.primary:hover { transform:translateY(-3px); filter:brightness(1.13); box-shadow:inset 0 2px rgba(255,255,255,.12),0 9px 0 #032632; }.answer:active,.explain:active,.primary:active { transform:translateY(4px); box-shadow:inset 0 2px rgba(255,255,255,.12),0 2px 0 #032632; }.primary { min-width:278px; padding:0 24px; color:#183139; border-color:#fff3ab; background:linear-gradient(180deg,#ffe98b,#ffc342); box-shadow:inset 0 2px white,0 6px 0 #915211; font-size:16px; }.primary:hover { box-shadow:inset 0 2px white,0 9px 0 #915211; }.primary:active { box-shadow:inset 0 2px white,0 2px 0 #915211; }.primary.is-teal { color:#07352f; border-color:#c9fff5; background:linear-gradient(180deg,#6ff3d7,#25caa9); box-shadow:inset 0 2px white,0 6px 0 #087268; }
.arrange-hint { color:#b6d3d4; font-size:12px; font-weight:900; }.arrange-actions { display:flex; align-items:center; gap:10px; }.mini { min-height:48px; padding:0 16px; border:2px solid #4f8f98; border-radius:13px; background:#0a3b4c; box-shadow:0 4px 0 #031e29; font-size:12px; font-weight:900; }

.trophy-zone { position:absolute; z-index:3; right:20px; top:122px; bottom:25px; width:151px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:26px; border:2px solid rgba(255,215,101,.32); border-radius:76px 76px 22px 22px; background:linear-gradient(180deg,rgba(6,34,47,.28),rgba(4,27,38,.87)); box-shadow:inset 0 0 30px rgba(255,204,75,.1),0 9px 0 rgba(0,10,18,.42); }.trophy-zone img { width:142px; height:142px; object-fit:contain; filter:drop-shadow(0 0 24px rgba(255,205,76,.38)) drop-shadow(0 12px 12px rgba(0,8,14,.55)); animation:trophy-float 3.4s ease-in-out infinite; }.trophy-zone span { margin-top:10px; color:var(--amber); font-size:24px; font-weight:1000; }.trophy-zone strong { color:#9ec2c4; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.toast { position:absolute; z-index:50; left:50%; bottom:30px; max-width:76%; padding:11px 18px; opacity:0; transform:translate(-50%,12px); border:2px solid #fff1a6; border-radius:999px; color:#19323a; background:var(--amber); box-shadow:0 5px 0 #8c4e0f,0 11px 24px rgba(0,8,14,.44); pointer-events:none; font-size:13px; font-weight:900; transition:opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing{opacity:1;transform:translate(-50%,0)}
.confetti { position:absolute; z-index:30; left:57%; top:44%; width:0; height:0; pointer-events:none; }.confetti i { position:absolute; width:10px; height:16px; opacity:0; background:var(--amber); }.confetti i:nth-child(2n){background:var(--teal)}.confetti i:nth-child(3n){background:var(--orange)}.stadium.is-celebrating .confetti i{animation:confetti 760ms ease-out both}.confetti i:nth-child(1){--x:-260px;--y:-180px}.confetti i:nth-child(2){--x:-160px;--y:-240px}.confetti i:nth-child(3){--x:-70px;--y:-200px}.confetti i:nth-child(4){--x:70px;--y:-230px}.confetti i:nth-child(5){--x:160px;--y:-180px}.confetti i:nth-child(6){--x:240px;--y:-120px}.confetti i:nth-child(7){--x:-230px;--y:-70px}.confetti i:nth-child(8){--x:230px;--y:-30px}.case-board.is-miss{animation:gentle-shake 390ms ease-out}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
button:focus-visible { outline:4px solid white; outline-offset:3px; }
@keyframes card-pop{from{opacity:0;transform:translateY(13px) scale(.72) rotate(var(--tilt,0deg))}70%{transform:translateY(-3px) scale(1.05) rotate(var(--tilt,0deg))}}
@keyframes stack-in{from{opacity:0;transform:translateY(-15px) scale(.72)}}@keyframes arrow-pulse{50%{transform:translateX(7px);filter:drop-shadow(0 0 9px rgba(255,202,67,.7))}}@keyframes stamp-in{to{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes coach-cheer{0%,100%{transform:translateY(0) rotate(0)}32%{transform:translateY(-23px) rotate(-5deg) scale(1.06)}62%{transform:translateY(-6px) rotate(4deg)}}@keyframes coach-think{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes coach-oops{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg) translateX(-5px)}65%{transform:rotate(4deg) translateX(5px)}}
@keyframes trophy-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes gentle-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(220deg) scale(1.2)}}
@media(max-width:1180px){.case-board{left:242px;right:168px}.coach-zone{width:210px}.mascot{width:215px}.trophy-zone{width:133px}.stat-patches span{min-width:65px}.scoreboard div{min-width:62px}.game-hud{gap:8px}.case-file{width:155px}}
@media(max-height:760px){.game-hud{top:11px;height:62px}.case-board{top:88px;bottom:14px;grid-template-rows:auto minmax(300px,1fr) 31px auto;padding-top:13px}.coach-zone{top:92px;bottom:14px}.trophy-zone{top:94px;bottom:14px}.case-heading{min-height:63px}.case-heading h1{font-size:29px}.data-stage{min-height:300px;grid-template-rows:92px 1fr}.data-card{width:56px;height:62px}.action-area{min-height:60px}.answer,.explain,.primary{min-height:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}