:root{--navy:#102a3b;--deep:#071821;--cream:#fff7d6;--gold:#ffd457;--gold-dark:#a95e13;--coral:#fa6a5c;--coral-dark:#9c302d;--mint:#6de0c2;--teal:#167b7d;--ink:#17313c;--muted:#d8edf0}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Avenir Next",Avenir,"Trebuchet MS",system-ui,sans-serif;color:white;background:var(--deep)}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:4px solid white;outline-offset:3px}.lesson,.fairground{width:100%;height:100%}.fairground{position:relative;isolation:isolate;overflow:hidden;background:#16384a url("art/fairground-backdrop-01.webp") center/cover no-repeat}.world-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(5,22,34,.18),rgba(5,16,25,.35) 55%,rgba(3,13,20,.66)),radial-gradient(circle at 54% 40%,transparent 0 25%,rgba(4,16,23,.25) 75%)}.bulbs{position:absolute;z-index:0;left:5%;right:5%;top:12px;height:38px;display:flex;justify-content:space-between;border-top:3px solid rgba(31,19,15,.8);transform:rotate(-.4deg)}.bulbs i{width:16px;height:22px;margin-top:-3px;border:2px solid #70411a;border-radius:45% 45% 55% 55%;background:var(--gold);box-shadow:0 0 14px #ffd457,0 0 28px rgba(255,212,87,.55);animation:twinkle 2.4s ease-in-out infinite}.bulbs i:nth-child(3n){background:#ff8e80;animation-delay:-.8s}.bulbs i:nth-child(3n+1){background:#8bf2d6;animation-delay:-1.5s}
.game-hud{position:absolute;z-index:5;left:28px;right:28px;top:35px;height:82px;display:grid;grid-template-columns:230px 1fr 230px;align-items:center;gap:20px}.station-sign,.ticket-track,.scoreboard,.difficulty-card{height:76px;border:3px solid #6d3715;border-radius:18px;background:linear-gradient(180deg,#fff0aa,#f4b845);box-shadow:inset 0 2px white,0 7px 0 rgba(56,25,8,.78),0 12px 30px rgba(2,10,15,.3);color:var(--ink)}.station-sign{display:grid;place-content:center;padding:10px 20px;transform:rotate(-1deg);text-align:center}.station-sign span,.ticket-track>span{color:#8d4514;font-size:10px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.station-sign strong{font-size:18px}.ticket-track{width:440px;justify-self:center;display:grid;place-content:center;padding:8px 28px;text-align:center}.ticket-track>div{display:flex;align-items:center;justify-content:center;margin-top:4px}.ticket-track i{width:32px;height:32px;display:grid;place-items:center;border:2px solid #874813;border-radius:50%;background:#fff8cf;font-style:normal;font-weight:1000;transition:transform 160ms ease-out,background 160ms ease-out}.ticket-track i.is-complete{color:white;background:var(--teal);transform:rotate(-7deg) scale(1.08)}.ticket-track b{width:52px;height:4px;background:#bb7221}.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);padding:7px 10px}.scoreboard div{display:grid;place-content:center;text-align:center;border-right:1px dashed #c37b28}.scoreboard div:last-child{border:0}.scoreboard span{font-size:9px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}.scoreboard strong{font-size:21px}.scoreboard strong:first-letter{color:#c45a24}.difficulty-card{position:absolute;left:50%;top:0;width:300px;padding:9px 17px;transform:translateX(-50%);text-align:center}.difficulty-card span{font-size:10px;font-weight:1000;text-transform:uppercase}.difficulty-card>i{height:8px;display:block;margin:5px 0;border:1px solid #875018;border-radius:99px;background:#fff8d9;overflow:hidden}.difficulty-card>i b{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--coral))}.difficulty-card>strong{font-size:12px}
.game-shell{position:absolute;z-index:2;left:28px;right:28px;top:135px;bottom:28px;display:grid;grid-template-columns:285px minmax(720px,1fr);gap:22px}.host-zone{position:relative;overflow:hidden;border:3px solid rgba(255,230,139,.72);border-radius:30px;background:linear-gradient(180deg,rgba(16,65,74,.78),rgba(7,28,39,.92));box-shadow:inset 0 0 40px rgba(109,224,194,.12),0 10px 0 rgba(3,14,21,.7),0 22px 44px rgba(3,13,20,.36)}.speech{position:absolute;z-index:3;left:20px;right:20px;top:23px;padding:14px 12px;border:3px solid #6a3718;border-radius:20px;color:var(--ink);background:var(--cream);box-shadow:0 6px 0 rgba(52,25,9,.7);font-size:16px;font-weight:1000;line-height:1.25;text-align:center}.speech::after{position:absolute;left:50%;bottom:-16px;content:"";transform:translateX(-50%);border:8px solid transparent;border-top-color:#6a3718}.host{position:absolute;z-index:2;left:50%;bottom:45px;width:260px;max-height:68%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 14px 12px rgba(2,10,16,.6));transition:filter 160ms ease-out}.props{position:absolute;z-index:1;left:4px;right:4px;bottom:-20px;width:95%;height:145px;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(2,10,16,.5))}.host-zone.is-cheering .host{animation:host-cheer 650ms cubic-bezier(.2,.8,.3,1.2)}.host-zone.is-oops .host{animation:host-oops 430ms ease-out}.host-zone.is-thinking .host{animation:host-think 2.4s ease-in-out infinite}
.booth-panel{min-width:0;display:grid;grid-template-rows:auto minmax(300px,1fr) 38px auto;gap:9px;padding:20px 24px;border:3px solid #70401d;border-radius:30px;background:linear-gradient(180deg,rgba(255,249,222,.96),rgba(255,232,169,.97));box-shadow:inset 0 3px white,0 10px 0 rgba(72,32,11,.78),0 22px 48px rgba(2,10,15,.4);color:var(--ink)}.challenge-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.challenge-header span{color:#bd4b3f;font-size:10px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.challenge-header h1{margin:4px 0 2px;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.04em}.challenge-header p{margin:0;color:#53666b;font-size:14px}.skill-stamp{flex:0 0 auto;min-width:142px;padding:10px 14px;transform:rotate(2deg);border:2px dashed #b34b3f;border-radius:12px;color:#9c302d;background:#fff9dd;font-size:12px;font-weight:1000;text-align:center;text-transform:uppercase}.booth-stage{position:relative;min-height:310px;overflow:hidden;border:3px solid #125f68;border-radius:25px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(217,246,233,.9) 46%,rgba(87,192,180,.85));box-shadow:inset 0 0 34px rgba(8,73,76,.25),0 5px 0 #0a4148}.booth-stage::before{position:absolute;left:0;right:0;top:0;height:22px;content:"";background:repeating-linear-gradient(90deg,var(--coral) 0 48px,#fff4cf 48px 96px);box-shadow:0 5px 0 rgba(99,43,23,.32)}.stage-art{position:absolute;inset:28px 20px 16px;display:grid;place-items:center}.jar-game{position:relative;width:300px;height:260px;display:grid;place-items:center}.jar-img{position:absolute;width:250px;height:250px;object-fit:contain;opacity:.34;filter:saturate(1.2)}.candy-cloud{position:relative;z-index:2;width:175px;height:174px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:5px;padding:18px 12px 8px;border:4px solid rgba(54,115,123,.7);border-radius:35px 35px 52px 52px;background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(203,245,239,.28));box-shadow:inset 10px 0 14px rgba(255,255,255,.6),inset -8px 0 12px rgba(19,98,104,.15)}.candy{width:17px;height:17px;border:2px solid #853826;border-radius:50%;background:#fb715e;box-shadow:inset 3px 3px rgba(255,255,255,.5),0 2px 0 rgba(79,31,22,.25);animation:pop-in 180ms ease-out both}.candy:nth-child(3n){border-color:#176565;background:#65dfc1}.candy:nth-child(4n){border-color:#9b6813;background:#ffd457}.candy:nth-child(5n){border-color:#61427c;background:#ad83d8}.length-game{width:min(690px,90%);display:grid;gap:22px}.mystery-object{height:56px;display:flex;align-items:center;justify-content:center}.rocket{height:48px;width:58%;border:4px solid #8c342b;border-radius:32px 60% 60% 32px;background:repeating-linear-gradient(90deg,var(--coral) 0 38px,#fff2c5 38px 72px);box-shadow:0 7px 0 rgba(90,39,22,.3)}.ruler{position:relative;height:72px;border:4px solid #925619;border-radius:14px;background:#ffd660;box-shadow:inset 0 4px #fff0a1,0 6px 0 #6e3c13}.ruler::before{position:absolute;inset:9px 12px;content:"";background:repeating-linear-gradient(90deg,#714015 0 2px,transparent 2px 18px)}.ruler::after{position:absolute;left:50%;top:0;bottom:0;width:4px;content:"";background:var(--coral)}.sum-game{display:grid;place-items:center;gap:13px}.sum-tickets{display:flex;align-items:center;gap:16px}.number-ticket{min-width:145px;padding:20px;border:4px solid #864a18;border-radius:18px;background:#ffd45c;box-shadow:inset 0 3px white,0 7px 0 #9e5718;font-size:45px;font-weight:1000;text-align:center}.operator{font-size:38px;font-weight:1000}.rounding-hint{padding:9px 18px;border:2px dashed var(--teal);border-radius:99px;background:#effff9;font-size:15px;font-weight:900}.reason-game{display:grid;place-items:center;gap:15px}.reason-total{padding:22px 34px;border:4px solid #884519;border-radius:20px;background:#fff4c3;box-shadow:0 7px 0 rgba(101,49,14,.45);text-align:center}.reason-total span{display:block;color:#9c302d;font-size:11px;font-weight:1000;text-transform:uppercase}.reason-total strong{font-size:52px}.reason-math{font-size:20px;font-weight:1000}.reveal-panel{position:absolute;z-index:8;right:24px;top:52px;width:190px;min-height:150px;display:grid;place-content:center;padding:17px;opacity:0;transform:rotateY(90deg) scale(.7);border:4px solid #8b4916;border-radius:22px;color:var(--ink);background:linear-gradient(145deg,#fffcea,#ffd55d);box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 8px 0 #6f3711,0 0 28px rgba(255,208,62,.8);text-align:center;pointer-events:none}.reveal-panel span{color:#a24435;font-size:10px;font-weight:1000;letter-spacing:.11em;text-transform:uppercase}.reveal-panel strong{font-size:47px;line-height:1}.reveal-panel small{font-weight:900}.reveal-panel.is-open{opacity:1;animation:reveal 580ms cubic-bezier(.2,.8,.2,1.2) both}.burst{position:absolute;z-index:7;right:118px;top:130px}.burst i{position:absolute;width:11px;height:11px;opacity:0;background:var(--coral);clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation:burst 700ms ease-out both}.burst i:nth-child(2n){background:var(--gold)}.burst i:nth-child(3n){background:var(--teal)}.feedback{min-height:38px;display:grid;place-items:center;color:#456268;font-size:14px;font-weight:900;text-align:center}.feedback.is-error{color:#a53232}.action-area{min-height:74px;display:flex;align-items:end;justify-content:center}.choice-grid,.explain-grid{width:min(760px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.choice,.explain,.primary{min-height:64px;border:3px solid #8e4717;border-radius:18px;color:var(--ink);background:linear-gradient(180deg,#fff5b8,#ffc94f);box-shadow:inset 0 3px white,0 7px 0 #925017;font-weight:1000;transition:transform 140ms ease-out,filter 140ms ease-out,box-shadow 140ms ease-out}.choice{font-size:27px}.choice small,.explain small{display:block;margin-top:2px;color:#6c5e4c;font-size:10px}.explain{padding:8px 12px;font-size:14px}.choice:hover,.explain:hover,.primary:hover{transform:translateY(-3px);filter:brightness(1.04);box-shadow:inset 0 3px white,0 10px 0 #925017}.choice:active,.explain:active,.primary:active{transform:translateY(4px);box-shadow:inset 0 2px white,0 2px 0 #925017}.primary{min-width:280px;padding:0 28px;color:white;border-color:#6e2824;background:linear-gradient(180deg,#ff8172,#e95149);box-shadow:inset 0 3px rgba(255,255,255,.45),0 7px 0 #8e2e2a;font-size:17px}.primary:hover{box-shadow:inset 0 3px rgba(255,255,255,.45),0 10px 0 #8e2e2a}.toast{position:absolute;z-index:30;left:50%;bottom:42px;max-width:70%;padding:12px 20px;opacity:0;transform:translate(-50%,10px);border:3px solid #6a3614;border-radius:99px;color:var(--ink);background:#fff5ba;box-shadow:0 7px 0 rgba(60,27,9,.7);font-weight:1000;pointer-events:none;transition:opacity 150ms ease-out,transform 150ms ease-out}.toast.is-showing{opacity:1;transform:translate(-50%,0)}.game-shell.is-miss .booth-panel{animation:shake 390ms ease-out}.game-shell.is-celebrating .booth-panel{box-shadow:inset 0 3px white,0 10px 0 rgba(72,32,11,.78),0 0 55px rgba(255,214,83,.55)}.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}
@keyframes twinkle{50%{filter:brightness(1.5);transform:translateY(2px)}}@keyframes pop-in{from{opacity:0;transform:scale(.25) rotate(-25deg)}70%{transform:scale(1.15)}}@keyframes reveal{0%{opacity:0;transform:rotateY(90deg) scale(.7)}65%{opacity:1;transform:rotateY(-8deg) scale(1.07)}100%{opacity:1;transform:rotateY(0) scale(1)}}@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.2)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg) scale(1.25)}}@keyframes host-cheer{0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}35%{transform:translateX(-50%) translateY(-22px) rotate(-4deg) scale(1.05)}65%{transform:translateX(-50%) translateY(-5px) rotate(4deg)}}@keyframes host-oops{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(calc(-50% - 6px)) rotate(-5deg)}65%{transform:translateX(calc(-50% + 5px)) rotate(4deg)}}@keyframes host-think{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@media(max-width:1120px){.game-hud{grid-template-columns:190px 1fr 220px}.ticket-track{width:390px}.game-shell{grid-template-columns:230px minmax(700px,1fr)}.host{width:225px}.choice-grid,.explain-grid{gap:9px}.choice{font-size:24px}}@media(max-height:760px){.game-hud{top:20px;height:68px}.station-sign,.ticket-track,.scoreboard,.difficulty-card{height:66px}.game-shell{top:102px;bottom:17px}.booth-panel{padding-top:12px;grid-template-rows:auto minmax(270px,1fr) 32px auto}.challenge-header{min-height:73px}.challenge-header h1{font-size:31px}.booth-stage{min-height:270px}.action-area{min-height:62px}.choice,.explain,.primary{min-height:56px}.host{bottom:28px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}