:root { --ink:#101a38; --navy:#091a38; --plum:#6c236f; --purple:#9c4ec7; --teal:#26d8c4; --teal-dark:#087e7c; --gold:#ffd65b; --cream:#fff8df; --coral:#ff775f; }
* { box-sizing: border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:var(--ink); background:var(--navy); font-family:ui-rounded,"Nunito","Avenir Next",system-ui,sans-serif; }
button { font:inherit; }
button:focus-visible { outline:4px solid #fff; outline-offset:3px; }
.lesson,.tower { width:100%; height:100%; min-width:1100px; min-height:680px; }
.tower { position:relative; isolation:isolate; overflow:hidden; background:#0b1735 url("art/tower-backdrop-01.webp") center/cover no-repeat; }
.world-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(3,9,30,.7),rgba(5,15,38,.12) 30%,rgba(5,12,31,.36)),linear-gradient(0deg,rgba(5,12,31,.45),transparent 45%); }
.floating-runes i { position:absolute; z-index:0; color:rgba(255,222,109,.28); font-size:22px; font-style:normal; font-weight:1000; text-shadow:0 0 18px #ffe372; animation:float 5s ease-in-out infinite alternate; }
.floating-runes i:nth-child(1){left:5%;top:22%}.floating-runes i:nth-child(2){left:25%;top:8%;animation-delay:-1s}.floating-runes i:nth-child(3){right:12%;top:25%;animation-delay:-2s}.floating-runes i:nth-child(4){right:5%;bottom:13%;animation-delay:-3s}.floating-runes i:nth-child(5){left:40%;bottom:5%;animation-delay:-4s}
.game-hud { position:absolute; z-index:10; top:20px; left:24px; right:24px; height:68px; display:grid; grid-template-columns:190px 1fr 255px; gap:16px; align-items:center; }
.chapter-card,.chapter-track,.difficulty,.scoreboard { height:68px; border:1px solid rgba(255,255,255,.23); border-radius:20px; color:#fff; background:rgba(8,18,46,.84); box-shadow:0 9px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(12px); }
.chapter-card { display:flex; flex-direction:column; justify-content:center; padding:0 19px; }
.chapter-card span,.difficulty span,.scoreboard span { color:#b9d9e8; font-size:10px; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; }
.chapter-card strong { margin-top:4px; font-size:17px; }
.chapter-track { display:flex; align-items:center; justify-content:center; padding:0 26px; }
.chapter-track i { width:32px; height:32px; display:grid; place-items:center; flex:none; border:2px solid #73809d; border-radius:50%; color:#b9c3d9; font-style:normal; font-size:12px; font-weight:1000; transition:150ms ease-out; }
.chapter-track i.is-current { color:var(--ink); border-color:var(--gold); background:var(--gold); box-shadow:0 0 20px rgba(255,214,91,.65); transform:scale(1.1); }
.chapter-track i.is-done { color:#053d3d; border-color:var(--teal); background:var(--teal); }
.chapter-track b { width:min(70px,8vw); height:3px; background:#596680; }
.difficulty { display:none; position:absolute; left:206px; right:287px; padding:10px 18px; }
.difficulty:not([hidden]) { display:block; }
.difficulty > span { display:flex; justify-content:space-between; }.difficulty > span b { color:var(--gold); font-size:13px; }
.difficulty > i { display:block; height:8px; margin:7px 0 4px; overflow:hidden; border-radius:99px; background:#34435f; }.difficulty > i b { display:block; height:100%; width:20%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width 250ms ease-out; }
.difficulty > strong { display:block; color:#fff4bf; font-size:11px; }
.scoreboard { display:grid; grid-template-columns:repeat(3,1fr); padding:8px 4px; }
.scoreboard div { display:flex; flex-direction:column; align-items:center; justify-content:center; border-left:1px solid rgba(255,255,255,.14); }.scoreboard div:first-child{border:0}.scoreboard strong{margin-top:3px;font-size:18px}.scoreboard strong> b{font:inherit}.scoreboard div:first-child strong{color:var(--gold)}
.game-card { position:absolute; z-index:2; inset:104px 24px 24px; display:grid; grid-template-columns:245px minmax(760px,1fr); gap:22px; }
.mascot-zone { position:relative; align-self:end; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.speech { position:relative; z-index:3; width:220px; min-height:72px; display:grid; place-items:center; margin-bottom:-18px; padding:14px 17px 20px; border:3px solid var(--ink); border-radius:23px 23px 8px 23px; color:var(--ink); background:var(--cream); box-shadow:0 7px 0 rgba(4,10,30,.45); font-size:13px; font-weight:900; line-height:1.3; text-align:center; }
.speech::after { position:absolute; right:27px; bottom:-12px; width:20px; height:20px; content:""; transform:rotate(45deg); border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--cream); }
.mascot { position:relative; z-index:2; width:265px; height:460px; margin-bottom:-20px; object-fit:contain; filter:drop-shadow(0 20px 14px rgba(0,0,0,.45)); transform-origin:50% 85%; }
.tower.is-correct .mascot { animation:mascot-cheer 650ms ease-out; }.tower.is-miss .mascot{animation:mascot-oops 380ms ease-out}
.casting-desk { position:relative; min-width:0; display:grid; grid-template-rows:auto minmax(390px,1fr) 34px 70px; padding:24px 28px 18px; overflow:hidden; border:1px solid rgba(255,255,255,.33); border-radius:34px; background:linear-gradient(145deg,rgba(255,252,237,.97),rgba(239,246,255,.95)); box-shadow:0 15px 0 rgba(8,13,38,.46),0 28px 70px rgba(2,6,22,.36),inset 0 1px #fff; }
.casting-desk::after { position:absolute; inset:0; z-index:-1; content:""; background:radial-gradient(circle at 83% 38%,rgba(38,216,196,.14),transparent 28%),radial-gradient(circle at 20% 82%,rgba(156,78,199,.11),transparent 30%); }
.challenge-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; min-height:82px; }
.challenge-heading span { color:var(--teal-dark); font-size:10px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }.challenge-heading h1{margin:4px 0 2px;font-size:clamp(27px,2.5vw,38px);line-height:1}.challenge-heading p{margin:7px 0 0;color:#53617a;font-size:13px;font-weight:750}
.listen { min-width:112px; min-height:52px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border:2px solid #9fc4c7; border-radius:16px; color:#075d61; background:#e7fffa; box-shadow:0 4px 0 #8fc5c0; cursor:pointer; font-size:12px; font-weight:1000; transition:transform 120ms ease-out; }.listen:hover{transform:translateY(-2px)}.listen i{font-size:17px;font-style:normal}.listen.is-speaking{animation:speaker-pulse 500ms ease-out}
.spell-stage { position:relative; min-height:390px; display:grid; grid-template-columns:230px minmax(460px,1fr); gap:20px; align-items:center; }
.picture-card { position:relative; width:215px; height:255px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; border:3px solid #352358; border-radius:32px; background:linear-gradient(160deg,#7c3ca2,#3c235e); box-shadow:0 10px 0 #201437,0 20px 35px rgba(38,20,64,.25),inset 0 2px rgba(255,255,255,.25); cursor:pointer; overflow:hidden; }
.picture-card::before { position:absolute; inset:10px; content:""; border:1px solid rgba(255,222,112,.45); border-radius:24px; }.picture-card img{position:relative; z-index:2; width:185px;height:185px;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.25));transition:transform 150ms ease-out}.picture-card:hover img{transform:scale(1.05) rotate(-2deg)}.picture-card small{position:relative;z-index:2;color:#fff3c2;font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}.picture-glow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,224,97,.6),rgba(57,224,206,.14) 55%,transparent 72%);animation:glow 1.7s ease-in-out infinite alternate}.cue-emoji{position:relative;z-index:2;display:none;width:185px;height:185px;place-items:center;font-size:112px;line-height:1;filter:drop-shadow(0 8px 5px rgba(0,0,0,.24))}.picture-card.is-emoji img{display:none}.picture-card.is-emoji .cue-emoji{display:grid}
.spell-workspace { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.phoneme-track { min-height:40px; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }.phoneme{min-width:42px;padding:7px 11px;border-radius:999px;color:#5a6880;background:#e1e8f0;font-size:12px;font-weight:1000;text-align:center;transition:150ms ease-out}.phoneme.is-active{color:#06494a;background:#9cf5e8;box-shadow:0 0 0 4px rgba(38,216,196,.15);transform:translateY(-3px)}.phoneme.is-done{color:#fff;background:var(--teal-dark)}
.word-slots { width:100%; min-height:102px; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; border:2px dashed #a998c5; border-radius:24px; background:rgba(255,255,255,.6); transition:150ms ease-out; }.word-slots.is-dragover{border-color:var(--teal-dark);background:#dbfff8;box-shadow:0 0 0 7px rgba(38,216,196,.13)}
.slot { width:64px;height:72px;display:grid;place-items:center;border:0;border-bottom:6px solid #77839a;border-radius:14px 14px 8px 8px;color:var(--ink);background:#edf1f6;font-size:32px;font-weight:1000;text-transform:lowercase; }.slot.is-filled{border-color:#a46bb5;background:#fff;color:#632776;box-shadow:inset 0 0 0 2px #d6b7e0;animation:tile-snap 220ms ease-out}.slot.is-wrong{color:#a23838;border-color:var(--coral);background:#fff0ed}
.tile-bank { min-height:86px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:15px; }.letter-tile{min-width:58px;height:64px;padding:0 15px;border:2px solid #3b2650;border-radius:15px;color:#2d183a;background:linear-gradient(#fff4b8,#ffd867);box-shadow:0 6px 0 #b66f2e,0 9px 14px rgba(39,24,55,.18),inset 0 2px #fffbe0;cursor:grab;font-size:28px;font-weight:1000;text-transform:lowercase;transition:transform 120ms ease-out}.letter-tile:hover{transform:translateY(-4px) rotate(-2deg)}.letter-tile:active{cursor:grabbing;transform:translateY(1px)}.letter-tile[disabled]{opacity:.32;filter:grayscale(.5);cursor:default;transform:none}
.desk-actions { width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:11px; }.quiet{min-height:44px;padding:0 14px;border:0;border-radius:13px;color:#5b5270;background:#e9e5ef;cursor:pointer;font-size:11px;font-weight:1000}.desk-actions span{color:#7d879a;font-size:11px;font-weight:800}
.spell-effect { position:absolute; z-index:6; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none; transform:scale(.55); }.spell-effect img{position:absolute;width:500px;height:500px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,220,76,.8))}.cast-word{position:relative;z-index:2;color:#fff;text-shadow:0 4px 0 #522052,0 0 25px #ffd95c;font-size:72px;font-weight:1000;letter-spacing:.08em}.tower.is-casting .spell-effect{animation:spell-cast 900ms ease-out}.tower.is-casting .picture-card,.tower.is-casting .spell-workspace{animation:stage-whoa 900ms ease-out}
.feedback { min-height:34px; display:grid; place-items:center; color:#27675f; font-size:13px; font-weight:900;text-align:center}.feedback.is-error{color:#a73c38}
.action-area { min-height:70px; display:flex; align-items:center; justify-content:center; }.explain-grid{width:min(720px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.explain,.primary{min-height:58px;border:2px solid #4f3467;border-radius:17px;cursor:pointer;font-weight:1000}.explain{padding:8px;color:#3b2948;background:#fff;box-shadow:0 5px 0 #c5b2d2;font-size:12px}.explain small{display:block;margin-top:3px;color:#7f7189;font-size:9px}.primary{min-width:260px;padding:0 24px;color:#fff;background:linear-gradient(#b65dd1,#7d309c);box-shadow:0 6px 0 #4a1d61;font-size:15px}.primary.is-gold{color:#40210f;border-color:#6d401f;background:linear-gradient(#ffe37b,#ffbd42);box-shadow:0 6px 0 #a66128}
.toast{position:absolute;z-index:30;left:50%;bottom:30px;max-width:70%;padding:11px 18px;opacity:0;transform:translate(-50%,10px);border:2px solid #fff1af;border-radius:999px;color:#39220d;background:var(--gold);box-shadow:0 5px 0 #87511f,0 12px 30px rgba(0,0,0,.35);font-size:13px;font-weight:1000;transition:150ms ease-out;pointer-events:none}.toast.is-showing{opacity:1;transform:translate(-50%,0)}
.celebration i{position:absolute;z-index:20;left:50%;top:48%;width:12px;height:12px;border-radius:3px;background:var(--gold);opacity:0}.tower.is-celebrating .celebration i{animation:confetti 760ms ease-out}.celebration i:nth-child(2n){background:var(--teal)}.celebration i:nth-child(3n){background:var(--coral)}.celebration i:nth-child(1){--x:-350px;--y:-220px}.celebration i:nth-child(2){--x:-270px;--y:170px}.celebration i:nth-child(3){--x:-140px;--y:-270px}.celebration i:nth-child(4){--x:20px;--y:-300px}.celebration i:nth-child(5){--x:160px;--y:-250px}.celebration i:nth-child(6){--x:290px;--y:150px}.celebration i:nth-child(7){--x:360px;--y:-170px}.celebration i:nth-child(8){--x:130px;--y:230px}
.tower.is-miss .casting-desk{animation:gentle-shake 360ms 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}
@keyframes float{to{transform:translateY(-13px) rotate(5deg);opacity:.7}}@keyframes glow{to{transform:scale(1.14);opacity:.65}}@keyframes tile-snap{0%{transform:scale(.65) rotate(-8deg)}70%{transform:scale(1.1) rotate(2deg)}}@keyframes speaker-pulse{50%{transform:scale(1.08);box-shadow:0 4px 0 #8fc5c0,0 0 0 8px rgba(38,216,196,.2)}}@keyframes mascot-cheer{35%{transform:translateY(-22px) rotate(-5deg) scale(1.04)}70%{transform:translateY(-5px) rotate(4deg)}}@keyframes mascot-oops{25%{transform:rotate(-4deg) translateX(-5px)}65%{transform:rotate(4deg) translateX(5px)}}@keyframes gentle-shake{25%{transform:translateX(-7px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes spell-cast{0%{opacity:0;transform:scale(.4) rotate(-20deg)}35%{opacity:1;transform:scale(1.08) rotate(3deg)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}@keyframes stage-whoa{30%{filter:brightness(1.35);transform:scale(.98)}60%{filter:brightness(.75);transform:scale(1.01)}}@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(300deg)}}
@media(max-width:1180px){.game-card{grid-template-columns:215px minmax(760px,1fr)}.mascot{width:225px}.speech{width:195px}.spell-stage{grid-template-columns:205px minmax(440px,1fr)}.picture-card{width:195px}}
@media(max-height:760px){.game-hud{top:12px;height:60px}.chapter-card,.chapter-track,.scoreboard{height:60px}.game-card{inset:84px 20px 18px}.casting-desk{padding-top:16px;grid-template-rows:auto minmax(330px,1fr) 28px 62px}.challenge-heading{min-height:72px}.spell-stage{min-height:330px}.picture-card{height:220px}.picture-card img{height:155px}.mascot{height:400px}.slot{height:62px}.tile-bank{min-height:70px}.letter-tile{height:56px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}