:root { color-scheme: only light; --ink:#17324a; --navy:#153a56; --sky:#dff5ff; --cream:#fff9e8; --gold:#ffc83d; --gold-dark:#b96b13; --green:#49af62; --green-dark:#267346; --red:#ef5b49; --blue:#2b87b9; --muted:#617282; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family:ui-rounded,"Avenir Next","Nunito Sans",system-ui,sans-serif; color:var(--ink); background:#9bdc75; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible { outline:4px solid #fff; outline-offset:2px; box-shadow:0 0 0 7px var(--blue); }
.lesson,.race-world { width:100%; height:100%; min-height:650px; }
.race-world { position:relative; isolation:isolate; overflow:hidden; background:url("art/world-01.webp") center 46%/cover no-repeat; }
.world-vignette { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,63,99,.34),transparent 23%,transparent 55%,rgba(13,49,52,.28)); }
.race-hud { position:absolute; z-index:10; top:18px; left:24px; right:24px; height:70px; display:flex; align-items:center; gap:18px; padding:10px 16px; border:2px solid rgba(255,255,255,.7); border-radius:19px; background:rgba(16,48,66,.88); box-shadow:0 8px 24px rgba(13,37,49,.24); color:white; backdrop-filter:blur(10px); }
.quest-mark { min-width:160px; line-height:1; }.quest-mark span { display:block; color:var(--gold); font-size:12px; font-weight:1000; letter-spacing:.16em; text-transform:uppercase; }.quest-mark strong { display:block; margin-top:6px; font-size:16px; }
.level-track { width:205px; text-align:center; }.level-track>span { display:block; margin-bottom:5px; font-size:11px; font-weight:900; }.level-track>div { display:flex; align-items:center; }.level-track i { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; border:2px solid rgba(255,255,255,.65); border-radius:50%; font-style:normal; font-size:11px; font-weight:1000; }.level-track i.is-current { color:var(--ink); border-color:var(--gold); background:var(--gold); transform:scale(1.12); }.level-track i.is-done { color:white; border-color:var(--green); background:var(--green); }.level-track b { height:3px; flex:1; background:rgba(255,255,255,.3); }.level-track b.is-done { background:var(--green); }
.difficulty-card { min-width:220px; }.difficulty-card>span { display:flex; justify-content:space-between; font-size:10px; font-weight:900; }.difficulty-card>i { height:7px; display:block; margin:5px 0; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.2); }.difficulty-card>i>b { width:18%; height:100%; display:block; border-radius:inherit; background:var(--gold); transition:width 300ms ease-out; }.difficulty-card>strong { display:block; color:#c7f0cf; font-size:11px; }
.scoreboard { display:flex; gap:7px; margin-left:auto; }.scoreboard>div { min-width:76px; padding:6px 10px; border-radius:11px; background:rgba(255,255,255,.11); text-align:center; }.scoreboard span { display:block; color:#d9e7ed; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.scoreboard strong { display:block; margin-top:2px; font-size:17px; line-height:1; }.scoreboard strong> b { font:inherit; }.scoreboard div:nth-child(3) strong { color:var(--gold); }
.track-stage { position:absolute; z-index:2; top:91px; left:5%; right:5%; height:235px; pointer-events:none; }
.progress-rail { position:absolute; left:10%; right:9%; bottom:48px; height:10px; overflow:hidden; border:2px solid rgba(72,51,23,.5); border-radius:99px; background:rgba(255,248,195,.72); box-shadow:0 3px 0 rgba(71,51,23,.18); }.progress-rail i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#f06a45,var(--gold)); transition:width 480ms cubic-bezier(.2,.9,.25,1); }
.kart-wrap { position:absolute; left:4%; bottom:30px; width:185px; transform:translateX(0); transition:left 520ms cubic-bezier(.18,.86,.24,1.12); filter:drop-shadow(0 12px 8px rgba(53,37,16,.32)); }.kart { width:100%; display:block; }.kart-wrap.is-racing .kart { animation:kart-hop 480ms ease-out; }.kart-wrap.is-buzzing { animation:buzz 240ms ease-out; }.speed-lines { position:absolute; left:-35px; top:55%; }.speed-lines i { width:32px; height:4px; display:block; margin:7px; border-radius:99px; background:white; opacity:0; }.is-racing .speed-lines i { animation:speed-line 420ms ease-out; }.is-racing .speed-lines i:nth-child(2){ animation-delay:45ms; width:24px; }.is-racing .speed-lines i:nth-child(3){ animation-delay:80ms; width:38px; }
.finish-flag { position:absolute; right:0; bottom:37px; width:115px; filter:drop-shadow(0 8px 6px rgba(40,30,15,.3)); }.treasure { position:absolute; right:8%; bottom:18px; width:125px; opacity:0; transform:scale(.55) translateY(20px); transition:opacity 240ms ease-out,transform 420ms cubic-bezier(.2,1.2,.3,1); filter:drop-shadow(0 9px 7px rgba(40,30,15,.28)); }.treasure.is-visible { opacity:1; transform:scale(1) translateY(0); }
.game-deck { position:absolute; z-index:5; left:24px; right:24px; bottom:20px; height:535px; display:grid; grid-template-columns:210px 1fr; gap:15px; padding:14px; border:2px solid rgba(255,255,255,.75); border-radius:24px; background:rgba(247,251,239,.94); box-shadow:0 11px 0 rgba(23,67,55,.27),0 24px 55px rgba(13,44,47,.24); backdrop-filter:blur(12px); }
.dragon-zone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:12px 8px; border-radius:17px; background:linear-gradient(180deg,#dff5ff,#e8f8df); }.dragon-bubble { position:absolute; top:12px; left:7px; right:7px; min-height:59px; display:grid; place-items:center; padding:10px; border:2px solid #8bc9d8; border-radius:15px; background:white; box-shadow:0 4px 0 #c5e3e8; font-size:13px; font-weight:900; line-height:1.25; text-align:center; }.dragon-bubble::after { content:""; position:absolute; left:50%; bottom:-10px; width:16px; height:16px; border-right:2px solid #8bc9d8; border-bottom:2px solid #8bc9d8; background:white; transform:translateX(-50%) rotate(45deg); }.dragon { width:150px; margin-bottom:98px; filter:drop-shadow(0 9px 7px rgba(33,77,47,.18)); transform-origin:50% 90%; }.dragon.is-cheering { animation:dragon-cheer 620ms ease-out; }.dragon.is-worried { animation:dragon-wobble 350ms ease-out; }
.gauge-stack { position:absolute; left:10px; right:10px; bottom:12px; display:grid; gap:9px; }.gauge { display:grid; grid-template-columns:57px 1fr 37px; align-items:center; gap:5px; }.gauge span,.gauge strong { font-size:10px; font-weight:1000; }.gauge strong { text-align:right; }.gauge>i { height:9px; overflow:hidden; border-radius:99px; background:#bed5cf; }.gauge>i>b { width:0; height:100%; display:block; border-radius:inherit; background:var(--blue); transition:width 250ms ease-out; }.gauge:nth-child(2)>i>b { background:var(--green); }
.typing-card { min-width:0; display:grid; grid-template-rows:auto 92px 26px 66px 1fr; align-content:start; padding:18px 25px 15px; overflow:hidden; border:2px solid #d6d8c7; border-radius:18px; background:var(--cream); }
.mission-copy { text-align:center; }.mission-copy>span { color:var(--red); font-size:10px; font-weight:1000; letter-spacing:.13em; text-transform:uppercase; }.mission-copy h1 { margin:3px 0 3px; font-size:clamp(23px,2.6vw,36px); line-height:1; letter-spacing:-.035em; }.mission-copy p { margin:0; color:var(--muted); font-size:13px; }
.word-lane { position:relative; display:grid; place-items:center; margin:11px auto 6px; width:min(820px,100%); overflow:hidden; border:2px solid #b2c6bb; border-radius:16px; background:linear-gradient(180deg,#fff,#eff8eb); box-shadow:inset 0 2px 8px rgba(32,72,62,.08); }.word-lane::before,.word-lane::after { content:""; position:absolute; top:0; bottom:0; width:40px; z-index:2; }.word-lane::before { left:0; background:linear-gradient(90deg,#fff,transparent); }.word-lane::after { right:0; background:linear-gradient(-90deg,#fff,transparent); }.word-card { max-width:95%; padding:8px 18px; font-family:"SFMono-Regular",Consolas,monospace; font-size:clamp(29px,4vw,48px); font-weight:900; letter-spacing:.035em; white-space:pre; animation:word-in 330ms ease-out; }.word-card span:first-child { color:var(--green-dark); }.word-card b { display:inline-block; min-width:.62em; color:white; border-radius:6px; background:var(--red); text-align:center; box-shadow:0 4px 0 #b5372e; }.word-card span:last-child { color:#596a72; }.word-lane.is-empty .word-card { font-family:inherit; font-size:18px; white-space:normal; color:var(--muted); }
.feedback { display:grid; place-items:center; color:var(--green-dark); font-size:13px; font-weight:900; text-align:center; }.feedback.is-error { color:#b43b32; }
.action-area { display:flex; align-items:center; justify-content:center; gap:12px; }.choice,.primary,.secondary { min-height:48px; padding:0 20px; border:2px solid #b8c9c2; border-radius:13px; background:white; box-shadow:0 5px 0 #d5dfda; font-weight:1000; transition:transform 140ms ease-out,box-shadow 140ms ease-out; }.choice { min-width:190px; }.choice small { display:block; color:var(--muted); font-size:10px; }.choice:hover,.primary:hover,.secondary:hover { transform:translateY(-2px); }.choice:active,.primary:active,.secondary:active { transform:translateY(4px); box-shadow:0 1px 0 #d5dfda; }.primary { min-width:210px; color:white; border-color:#1f6942; background:var(--green); box-shadow:0 6px 0 #1f6942; }.secondary { color:var(--navy); background:#eaf5f8; }
.keyboard { width:min(850px,100%); align-self:end; justify-self:center; display:grid; gap:7px; padding-top:9px; }.key-row { display:flex; justify-content:center; gap:6px; }.key { min-width:46px; height:47px; display:grid; place-items:center; padding:0 9px; border:1px solid #9aaca7; border-radius:9px; background:white; box-shadow:0 4px 0 #aebbb5; font-family:"SFMono-Regular",Consolas,monospace; font-size:16px; font-weight:900; text-transform:uppercase; transition:transform 80ms ease-out,background 100ms ease-out,box-shadow 80ms ease-out; }.key.is-next { color:#5b3300; border-color:#d68b13; background:var(--gold); box-shadow:0 5px 0 var(--gold-dark),0 0 0 4px rgba(255,200,61,.28); animation:key-pulse 900ms ease-in-out infinite; }.key.is-pressed { transform:translateY(4px); box-shadow:0 0 0 #aebbb5; background:#d9f0df; }.key.key-space { width:250px; text-transform:none; font-size:12px; }.keyboard.is-hidden { visibility:hidden; }
.celebration { position:absolute; z-index:20; inset:0; pointer-events:none; }.celebration i { position:absolute; left:50%; top:43%; width:15px; height:15px; opacity:0; border-radius:3px; background:var(--gold); }.celebration.is-active i { animation:confetti 750ms ease-out both; }.celebration i:nth-child(1){--x:-310px;--y:-180px}.celebration i:nth-child(2){--x:-220px;--y:170px;background:var(--red);animation-delay:45ms}.celebration i:nth-child(3){--x:-100px;--y:-220px;background:var(--blue);animation-delay:90ms}.celebration i:nth-child(4){--x:70px;--y:190px;background:var(--green);animation-delay:130ms}.celebration i:nth-child(5){--x:180px;--y:-190px;background:var(--red);animation-delay:160ms}.celebration i:nth-child(6){--x:300px;--y:120px;background:var(--blue);animation-delay:200ms}.celebration i:nth-child(7){--x:360px;--y:-80px;background:var(--green);animation-delay:240ms}.celebration i:nth-child(8){--x:-370px;--y:70px;animation-delay:270ms}
.toast { position:absolute; z-index:30; left:50%; bottom:30px; max-width:70%; padding:10px 18px; opacity:0; transform:translate(-50%,12px); border-radius:999px; color:white; background:var(--ink); 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); }
.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 word-in { from { opacity:0; transform:translateX(80px) scale(.94); } }
@keyframes key-pulse { 50% { transform:translateY(-2px); } }
@keyframes kart-hop { 45% { transform:translateY(-11px) rotate(-2deg); } }
@keyframes buzz { 20%,60% { transform:translateX(-5px) rotate(-1deg); } 40%,80% { transform:translateX(5px) rotate(1deg); } }
@keyframes speed-line { 0% { opacity:0; transform:translateX(25px); } 30% { opacity:.9; } 100% { opacity:0; transform:translateX(-45px); } }
@keyframes dragon-cheer { 35% { transform:translateY(-12px) rotate(-4deg) scale(1.04); } 65% { transform:rotate(4deg); } }
@keyframes dragon-wobble { 25% { transform:rotate(-5deg); } 75% { transform:rotate(5deg); } }
@keyframes confetti { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.3); } 25% { opacity:1; } 100% { opacity:0; transform:translate(var(--x),var(--y)) rotate(270deg) scale(1.2); } }
@media (max-height:760px) { .race-hud{top:10px}.track-stage{top:75px;height:190px}.game-deck{height:480px;bottom:12px}.typing-card{grid-template-rows:auto 78px 22px 58px 1fr;padding-top:13px}.key{height:39px}.dragon{width:125px}.dragon-zone{padding-top:5px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }