:root{color-scheme:light;--ink:#17233b;--muted:#697993;--line:#e2e9f2;--blue:#4b5ce6;--gold:#f7ce65;--rad:18px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#f3f6fc;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #99c2ff;outline-offset:2px}#app{max-width:1240px;margin:auto;padding:18px 24px 26px}.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 0 18px}.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:850;letter-spacing:-.5px;margin-right:auto}.brand-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#5965f2,#8e53e7);box-shadow:0 4px 13px #5866ed32;color:#fff}.switch{display:flex;padding:4px;background:#e7ebf5;border-radius:12px;gap:3px}.switch button{border:0;border-radius:9px;background:transparent;padding:9px 13px;color:#60708c;font-weight:750}.switch button.active{background:#fff;box-shadow:0 2px 8px #20355716;color:#233865}.tag{font-size:11px;font-weight:800;letter-spacing:1px;color:#745400;background:#ffebae;padding:8px 11px;border-radius:50px}.topnotice{font-size:12px;color:#6a7590;margin:-6px 0 16px}.game{background:radial-gradient(circle at 50% 32%,#28449e 0%,#121e57 39%,#0a1236 73%,#060b23 100%);border-radius:26px;color:#fff;min-height:670px;padding:28px;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 20px 55px #15205b26}.game:before{content:"";width:660px;height:660px;position:absolute;z-index:-1;left:12%;top:-330px;border:1px solid #a4b9ff29;border-radius:100%;box-shadow:0 0 0 70px #93a7f706,0 0 0 140px #93a7f70b,0 0 0 210px #93a7f705}.game-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.game-mini{font-size:12px;letter-spacing:2.2px;font-weight:850;color:#e5d29b}.small-chip{background:#ffffff14;border:1px solid #ffffff2e;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;color:#dce7ff}.stage{max-width:770px;text-align:center;margin:39px auto 30px}.orb{height:130px;width:130px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;font-size:53px;background:radial-gradient(circle at 30% 20%,#536ace,#151e5b 60%,#0a153f);border:5px solid #f1c45e;box-shadow:0 0 0 9px #ffdb7038,0 0 0 23px #ffffff0a,0 0 55px #eda95155}.stage h1{font-size:clamp(30px,4.7vw,58px);letter-spacing:-1.8px;line-height:1.07;margin:0 0 17px;font-weight:950}.gold{background:linear-gradient(90deg,#ffed9b,#e9aa3f,#fff3c1);-webkit-background-clip:text;background-clip:text;color:transparent}.stage p{color:#d1ddff;font-size:15px;line-height:1.7;max-width:560px;margin:0 auto}.subjects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;max-width:830px;margin:27px auto 25px}.subject{border:1px solid #93b5ff45;background:#ffffff0e;color:#eff4ff;min-height:112px;border-radius:17px;padding:14px 8px;transition:.2s}.subject:hover{transform:translateY(-2px);background:#ffffff21}.subject.active{background:linear-gradient(140deg,#6a6de44a,#ffda8052);border:2px solid var(--gold);box-shadow:0 0 0 3px #ffd86c1c}.subject i{display:block;font-size:29px;font-style:normal;margin-bottom:8px}.subject b{font-size:13px}.cta{border:0;border-radius:14px;background:linear-gradient(90deg,#f8d779,#eeb75c);color:#2c224a;padding:14px 24px;font-weight:900;box-shadow:0 7px 27px #d9a63b4d}.cta:hover{filter:brightness(1.06)}.game-footer{color:#a8b9f2;text-align:center;font-size:12px;padding-top:25px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 226px;gap:22px;margin-top:20px}.mainplay{min-width:0}.playmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:17px}.level{background:#efd07d;color:#302443;border-radius:100px;font-size:12px;font-weight:900;padding:9px 15px}.progress{height:6px;border-radius:10px;overflow:hidden;background:#ffffff25;margin-bottom:26px}.progress span{display:block;height:100%;background:linear-gradient(90deg,#f0ad54,#fff2a3);transition:width .3s}.qbox{background:linear-gradient(135deg,#263782,#10205f);border:2px solid #789bf27a;min-height:150px;display:grid;align-content:center;padding:28px;border-radius:24px;box-shadow:0 12px 36px #01082c46;text-align:center}.qbox small{color:#f0d781;letter-spacing:1.5px;font-size:11px;font-weight:850;margin-bottom:14px}.qbox strong{font-size:clamp(19px,2.2vw,27px);font-weight:850;line-height:1.46}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.option{border:1.5px solid #829fe96c;background:#172661;color:#fff;min-height:79px;padding:16px;display:flex;align-items:center;text-align:left;gap:12px;border-radius:15px;transition:.12s}.option:hover:not(:disabled){border-color:#f5d06a;background:#233882}.option.selected{background:#cc9342;color:#181942;border-color:#ffe9a4;box-shadow:0 0 0 3px #ffc35522}.option.correct{background:#126b64;border-color:#7ef6c7}.option.wrong{background:#963950;border-color:#ff9dad}.option.hidden{visibility:hidden}.letter{border:1px solid #b2caff80;width:28px;height:28px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:900;color:#ffdd85}.selected .letter{color:#181942;border-color:#28254877}.play-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.secondary{border:1px solid #cad4ea;background:#fff;color:#243455;border-radius:12px;padding:12px 16px;font-weight:800}.secondary:hover{background:#f5f8ff}.secondary.dark{background:#ffffff10;color:#eff4ff;border-color:#91a6e975}.secondary.dark:hover{background:#ffffff24}.side{background:#0c1644b8;border:1px solid #6f8bc64f;border-radius:20px;padding:16px;align-self:start}.side h3{font-size:12px;letter-spacing:1.4px;color:#ffdc82;text-align:center;margin:4px 0 12px}.ladder{display:grid;gap:3px}.step{display:flex;justify-content:space-between;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;padding:5px 8px;color:#91a7e0;font-size:12px;font-weight:750;line-height:1.5}.step.special{color:#ffda78}.step.past{color:#8ae3bb}.step.current{background:#e5b75d;color:#161f46;border-color:#fff1a9}.helps{margin:20px 0 14px;padding-top:16px;border-top:1px solid #9bb8e83f}.helps h3{color:#d8e4ff;text-align:left}.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.help{padding:10px 5px;border:1px solid #8ba6dd8a;color:#f5f8ff;background:#ffffff0c;border-radius:11px;font-size:11px;font-weight:800;min-height:47px}.help:hover:not(:disabled){background:#ffffff25}.help.used{text-decoration:line-through;opacity:.43}.help .emoji{display:block;font-size:18px;margin-bottom:2px}.hint{border:1px solid #d2b25e83;border-radius:12px;padding:13px;color:#ffe9a9;background:#b7872d20;font-size:13px;line-height:1.55;margin:14px 0}.feedback{border-radius:15px;padding:17px;margin:16px 0;background:#ffffff16;border:1px solid #ffffff42;line-height:1.6}.feedback strong{display:block;margin-bottom:4px;color:#ffde86;font-size:17px}.end{max-width:600px;margin:65px auto;text-align:center}.end h2{font-size:39px;margin:15px 0 8px}.end p{color:#e0e9ff;line-height:1.7}.end .result{font-size:35px;font-weight:950;color:#ffe29a;padding:18px}.end .pill{background:#ffffff18;border:1px solid #ffffff37;padding:10px 15px;border-radius:100px;display:inline-block}.admin{background:#fff;border-radius:24px;padding:28px;box-shadow:0 8px 38px #1a31720d;min-height:655px}.adminhead{display:flex;align-items:start;justify-content:space-between;gap:16px;flex-wrap:wrap}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:850;color:#6375ed}.admin h2{font-size:28px;letter-spacing:-1px;margin:6px 0 8px}.sub{color:#6a778f;font-size:13px;line-height:1.6;margin:0}.primary{background:#4454d9;color:#fff;border:0;padding:12px 17px;border-radius:12px;font-weight:850}.primary:hover{background:#3543ba}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:25px 0}.metric{border:1px solid var(--line);border-radius:17px;padding:17px;background:#fcfdff}.metric small{font-size:12px;color:#748198}.metric b{display:block;margin-top:8px;font-size:26px;letter-spacing:-.8px}.metric b span{font-size:13px;color:#7c89a1;font-weight:600}.toolrow{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0 16px}.toolrow input{flex:1;min-width:180px;border:1px solid #d8e2ee;border-radius:11px;padding:11px 13px;color:#1d2e4b}.toolrow select{border:1px solid #d8e2ee;border-radius:11px;padding:11px 13px;color:#253650;background:#fff}.tablewrap{overflow:auto;border:1px solid #e2e8f0;border-radius:16px}table{width:100%;border-collapse:collapse;min-width:730px;text-align:left}th{font-size:11px;color:#76859b;background:#f7f9fd;padding:14px 14px;letter-spacing:.6px}td{font-size:12.5px;padding:13px 14px;border-top:1px solid #e9eef6;vertical-align:middle}tr:hover td{background:#fafcff}.qtitle{font-weight:800;max-width:450px}.smallsub{font-size:11px;color:#7b8aa3;margin-top:4px}.status{display:inline-block;border-radius:100px;padding:6px 9px;font-weight:800;font-size:10px}.status.on{color:#157456;background:#ddfaee}.status.off{color:#865b1b;background:#fff1d3}.smallbtn{border:1px solid #dce4f1;color:#3c4e72;background:#fff;border-radius:9px;padding:6px 9px;font-size:11px;font-weight:800;margin-right:5px}.smallbtn:hover{background:#f0f4ff}.adminnote{padding:13px 15px;background:#edf3ff;border-radius:12px;color:#4e648d;font-size:12px;margin:18px 0 0;line-height:1.55}.modalback{position:fixed;inset:0;background:#091637bb;z-index:999;display:flex;align-items:center;justify-content:center;padding:18px}.modal{background:#fff;color:#1d2d4b;width:min(660px,100%);border-radius:20px;padding:24px;max-height:92vh;overflow:auto;box-shadow:0 30px 80px #01071370}.modal h3{margin:0 0 18px;font-size:22px}.modalgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}.field.wide{grid-column:1/-1}.field label{font-size:11px;color:#617189;font-weight:800}.field input,.field select,.field textarea{width:100%;border:1px solid #d2ddec;border-radius:10px;padding:11px;color:#1d2e4b;background:#fff;font-size:13px}.modal-actions{display:flex;justify-content:end;gap:10px;margin-top:10px}.subjectdot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;background:#6570ed}.subjectdot.eng{background:#f1ad50}.subjectdot.tv{background:#1bb797}.toast{margin:8px 0;padding:12px 14px;border-radius:12px;background:#e8f9f2;color:#196b53;font-size:12px;font-weight:750}.empty{padding:42px;text-align:center;color:#75809a}@media(max-width:900px){.game-layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr;gap:10px}.side .ladder{grid-template-columns:1fr 1fr}.helps{margin:0;padding:0;border:0}.metrics{grid-template-columns:1fr 1fr}}@media(max-width:600px){#app{padding:9px}.nav{padding:9px 0 15px}.brand{font-size:14px}.tag{display:none}.game,.admin{padding:17px;border-radius:20px}.stage{margin:24px auto}.orb{width:96px;height:96px;font-size:39px}.subjects{grid-template-columns:1fr 1fr;gap:8px}.subject{min-height:92px}.options{grid-template-columns:1fr;gap:9px}.option{min-height:62px}.game-layout{gap:12px}.side{grid-template-columns:1fr}.side .ladder{grid-template-columns:repeat(3,1fr)}.step{font-size:10px;padding:5px 6px}.helps{margin-top:10px;padding-top:14px;border-top:1px solid #ffffff22}.metrics{gap:8px}.metric{padding:13px}.metric b{font-size:23px}.modalgrid{grid-template-columns:1fr}.field.wide{grid-column:1}.game-mini{font-size:10px}}

@media(max-width:720px){.game{min-height:690px;padding:18px 13px}.game-layout{grid-template-columns:1fr;gap:15px}.side{order:2}.stage{margin:32px auto}.subjects{grid-template-columns:repeat(2,minmax(0,1fr))}.options{grid-template-columns:1fr}.game-header{gap:8px}.helpgrid{grid-template-columns:repeat(4,1fr)}.help{font-size:10px}.ladder{grid-template-columns:repeat(3,minmax(0,1fr))}.step{font-size:10px;padding:4px}.nav{padding-bottom:12px}#app{padding:9px}}
/* Student soundtrack controls and live MC caption */
.nav-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.sound-toggle{border:1px solid #c8c8ff66;background:#fff1;color:#f5f1ff;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:800;cursor:pointer;transition:background .15s}
.sound-toggle:hover,.sound-toggle:focus-visible{background:#fff3;outline:2px solid #a8c8ff;outline-offset:2px}
.sound-toggle[aria-pressed="false"]{opacity:.76}
.mc-strip{display:flex;align-items:center;gap:12px;margin:0 auto 12px;max-width:1140px;padding:12px 16px;border-radius:14px;background:linear-gradient(90deg,#172d67,#2c2d70);border:1px solid #b0baff55;color:#f7f8ff;box-shadow:0 8px 20px #07113826}
.mc-avatar{font-size:28px;line-height:1.3;flex-shrink:0}
.mc-meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.mc-meta b{font-size:12px;color:#fbdc8d}
#mc-caption{font-size:12px;line-height:1.5;max-height:4.5em;overflow:auto;overflow-wrap:anywhere}
@media(max-width:600px){.nav-controls{gap:5px}.sound-toggle{font-size:11px;padding:8px 10px}.mc-strip{padding:10px;margin-bottom:8px}#mc-caption{font-size:11px}}
/* Learning arcade, phase one */
.sound-toggle{background:#fff;color:#263765;border-color:#cbd5ed}.sound-toggle:hover{background:#edf2ff}.portal{color:#17233b}.hub{background:#fff;border:1px solid #e3eafa;border-radius:28px;padding:34px;box-shadow:0 14px 50px #223c7b0b}.hub-welcome{display:flex;align-items:center;gap:22px}.hub-mascot{background:#fff0b6;border-radius:26px;font-size:64px;padding:18px}.hub h1{font-size:clamp(26px,4vw,40px);margin:8px 0;letter-spacing:-1px}.hub p{color:#63718c;line-height:1.6}.section-title{font-size:17px;margin-top:28px}.hub .subjects{max-width:none;margin:15px 0 28px}.hub .subject{color:#22365d;background:#f4f7ff;border-color:#dae3f6}.hub .subject.active{border-color:#5f67e9;background:#eeedff}.game-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.game-card{position:relative;display:block;text-align:left;border:1px solid #d9e2f4;border-radius:22px;padding:25px;background:linear-gradient(145deg,#f0edff,#fff);color:#23334f;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #1a32651a}.game-card.race{background:linear-gradient(145deg,#e1f8ef,#fff)}.game-card.wheel{background:linear-gradient(145deg,#fff1d8,#fff)}.card-icon{display:block;font-size:52px;margin-bottom:18px}.card-time{position:absolute;right:16px;top:20px;font-size:11px;color:#65758f}.game-card h3{font-size:22px;line-height:1.2;margin:12px 0}.game-card p{min-height:50px;font-size:14px}.game-card b{font-size:12px;color:#4958c7}.hub-tip,.recent{margin-top:22px;padding:16px;background:#f4f7ff;border-radius:13px;color:#536780;font-size:13px}.setup{text-align:center;max-width:800px;margin:16px auto 45px}.setup>button:first-child{display:block;margin-bottom:32px}.setup h1{font-size:36px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.mode-card{color:#edf3ff;text-align:left;padding:22px;border:1px solid #b4c9ff66;background:#ffffff10;border-radius:18px}.mode-card b{display:block;font-size:20px;margin-bottom:12px}.mode-card span{display:block;font-size:13px;line-height:1.7}.mode-card.active{border:2px solid #ffdc86;background:#6c64b44d}.rules{font-size:12px;line-height:1.8;color:#c6d3f5;margin:20px auto;max-width:680px}.car-choices{display:flex;align-items:center;justify-content:center;gap:10px}.car-choices button{font-size:28px}.car-choices .picked{border:3px solid #eabc52}.learning-layout{grid-template-columns:minmax(0,1fr)}.learning-layout:has(.side){grid-template-columns:minmax(0,1fr) 220px}.race-scene{margin:20px 0 26px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#2a675f,#174945);border:1px solid #88cfc5}.race-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.track{position:relative;height:66px;background:#304950;border-radius:13px;border-bottom:2px dashed #e6eaf0;margin:8px 0}.track-car{position:absolute;top:5px;font-size:30px;transition:left .7s;max-width:70px}.track-car small{display:block;font-size:10px;white-space:nowrap}.finish-flag{position:absolute;right:8px;top:15px;font-size:24px}.opponent{background:#234047}.speed-tip{font-size:12px;color:#d5f7e7}.wheel-stage{text-align:center;padding:28px 0}.wheel-wrap{position:relative;width:260px;height:260px;margin:32px auto}.wheel-disc{width:100%;height:100%;border:9px solid #ffc963;border-radius:50%;background:conic-gradient(#695de5 0deg 60deg,#e29445 60deg 120deg,#318e9b 120deg 180deg,#cf5d97 180deg 240deg,#4b79c3 240deg 300deg,#529b72 300deg);transition:transform 1.35s cubic-bezier(.15,.7,.2,1);box-shadow:0 12px 35px #02092366;position:relative}.wheel-disc span{position:absolute;font-size:28px}.wheel-disc span:nth-child(1){top:12%;left:58%}.wheel-disc span:nth-child(2){top:40%;left:79%}.wheel-disc span:nth-child(3){top:72%;left:60%}.wheel-disc span:nth-child(4){top:73%;left:26%}.wheel-disc span:nth-child(5){top:41%;left:6%}.wheel-disc span:nth-child(6){top:13%;left:25%}.wheel-pointer{position:absolute;top:-24px;left:116px;z-index:2;font-size:36px;color:#ffdc86}.wheel-center{position:absolute;inset:93px;border-radius:50%;background:#fff4ce;display:grid;place-items:center;font-size:35px;box-shadow:0 0 0 6px #ffffff33}.learning-end{max-width:850px;margin:35px auto}.learning-end h2{font-size:clamp(25px,4vw,36px)}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.summary-grid>div{padding:20px;background:#ffffff13;border:1px solid #afc5ff44;border-radius:16px}.summary-grid small{display:block;color:#c7d6f7}.summary-grid b{display:block;font-size:24px;color:#ffdf8e;margin-top:12px}.topic-summary{text-align:left;background:#ffffff0c;padding:16px;border-radius:14px}.topic-summary>div{display:flex;justify-content:space-between;gap:16px;padding:9px;font-size:13px}.review-stage{max-width:850px;margin:25px auto}.game.race{background:radial-gradient(circle at 50% 0%,#26595b,#0b263e 70%)}.game.wheel{background:radial-gradient(circle at 50% 0%,#584077,#1a173f 70%)}
@media(max-width:760px){.hub{padding:22px}.hub-welcome{align-items:flex-start;gap:12px}.hub-mascot{font-size:38px;padding:12px}.game-cards{grid-template-columns:1fr}.game-card p{min-height:0}.game-card{padding:20px}.card-icon{font-size:40px;margin-bottom:6px}.mode-grid{grid-template-columns:1fr}.learning-layout:has(.side){grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr}.summary-grid>div{padding:13px}.summary-grid b{font-size:22px}.topic-summary>div{flex-wrap:wrap}.setup h1{font-size:28px}.setup .orb{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.wheel-disc,.track-car,.game-card{transition:none}.game-card:hover{transform:none}}
.wheel-disc span{font-size:10px;font-weight:800;width:67px;line-height:1.3;text-align:center;overflow-wrap:break-word}.wheel-disc span:nth-child(1){left:53%;top:17%}.wheel-disc span:nth-child(2){left:70%;top:43%}.wheel-disc span:nth-child(3){left:52%;top:72%}.wheel-disc span:nth-child(4){left:19%;top:72%}.wheel-disc span:nth-child(5){left:0;top:43%}.wheel-disc span:nth-child(6){left:18%;top:17%}
/* Studio edition: midnight arcade, original vector scenes, calmer reading surfaces. */
:root{color-scheme:dark;--ink:#edf2ff;--muted:#b3bed6;--blue:#9680ff;--gold:#ffdc85;--line:#ffffff1c}
body{background:radial-gradient(ellipse at 10% 0%,#31245b 0,transparent 44%),radial-gradient(ellipse at 90% 30%,#163a4b 0,transparent 45%),#0c1123;color:var(--ink);min-height:100vh}
#app{max-width:1320px;padding:24px 28px 36px}.nav{padding:0 4px 22px}.brand{font-size:21px;color:#f5f4ff}.brand-icon{width:42px;height:42px;font-size:25px;border:1px solid #d1bbff44}.brand>span{color:#bcabff!important}.tag{background:#e9d79a13;border:1px solid #ffdc8536;color:#ebdcaf;letter-spacing:1.4px}.sound-toggle{background:#ffffff0b;border:1px solid #9c9fd43b;color:#e7e7ff;min-height:40px}.sound-toggle:hover{background:#ffffff18}
.mc-strip{max-width:none;background:#121b32c9;border:1px solid #a2b6db22;border-radius:20px;margin-bottom:20px;padding:13px 20px;box-shadow:none}.mc-avatar{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff2b5,#d9ab55);font-size:32px;border:1px solid #ffeea1}.mc-mic{position:absolute;right:-7px;bottom:-1px;font-size:17px}.mc-meta b{font-size:12px;letter-spacing:.8px}.mc-meta{flex:1}#mc-caption{color:#cad3e8;font-size:12px}.equalizer{display:flex;align-items:center;gap:3px;height:23px;margin:0 5px}.equalizer i{display:block;width:3px;height:8px;background:#8dd7c2;border-radius:4px;animation:equalize 1.2s ease-in-out infinite}.equalizer i:nth-child(2){animation-delay:.2s}.equalizer i:nth-child(3){animation-delay:.4s}.equalizer i:nth-child(4){animation-delay:.6s}.sound-toggle[aria-pressed=false]{opacity:.7}
.portal{color:#eef2ff}.hub{position:relative;background:linear-gradient(140deg,#1a203bcc,#131d31e6);border:1px solid #c5b8ff25;border-radius:30px;padding:34px;box-shadow:0 28px 80px #0003;overflow:hidden}.hub-welcome{position:relative;min-height:240px;border-radius:23px;background:radial-gradient(ellipse at 5% 50%,#4f386766,transparent 55%),linear-gradient(110deg,#28233f,#1b30404d);border:1px solid #c6beeb18;padding:30px 34px;gap:32px;isolation:isolate}.hub-welcome:after{content:'✦';position:absolute;z-index:-1;right:38px;top:-4px;font-size:190px;line-height:1;color:#ffd5770d;transform:rotate(15deg)}.hub-welcome:before{content:'';position:absolute;right:74px;top:22px;width:180px;height:180px;border:1px solid #ffd97820;border-radius:50%;box-shadow:0 0 0 27px #ffd97806,0 0 0 55px #ffd97804;z-index:-1}.eyebrow{color:#c6b6ff;font-size:10px;letter-spacing:2.4px}.hub h1{max-width:620px;font-size:clamp(29px,3.5vw,46px);font-weight:900;line-height:1.15;letter-spacing:-1.5px;color:#fff3d4;margin:13px 0}.hub p{color:#bbc6dc;font-size:14px;max-width:550px}.hub-mascot{position:relative;flex:0 0 132px;width:132px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;background:linear-gradient(145deg,#ffdb8060,#ffd87508);border:1px solid #ffdf8055;border-radius:36px;box-shadow:0 12px 50px #ffc36612}.hub-mascot>span{font-size:76px;filter:drop-shadow(0 8px 5px #7b4c2933);animation:mascotFloat 4s ease-in-out infinite}.hub-mascot b{color:#ffe39d;font-size:11px;letter-spacing:.5px;margin-top:8px}.mascot-star{position:absolute;right:0;top:-17px;font-size:26px;color:#fff0b8;font-style:normal}.hero-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:21px}.hero-badges span{font-size:10px;color:#e0d8f2;background:#fff1;padding:7px 10px;border-radius:8px;border:1px solid #fff1}.section-title{display:flex;align-items:center;gap:10px;font-size:14px;margin:28px 0 15px;color:#e2e7f5;letter-spacing:.3px}.section-title:after{content:'';height:1px;background:linear-gradient(90deg,#c6cfee22,transparent);flex:1;margin-left:7px}.hub .subjects{margin:0 0 26px;gap:12px}.hub .subject{display:flex;align-items:center;justify-content:center;gap:12px;min-height:76px;background:#0c152c5c;border:1px solid #a0b0e22b;color:#cbd6ed;border-radius:14px;transition:background .2s,border-color .2s,transform .2s}.hub .subject i{font-size:26px;margin:0}.hub .subject b{font-size:13px}.hub .subject.active{background:linear-gradient(120deg,#7160c232,#5756943b);color:#fff5dc;border:1px solid #c0a9ff;box-shadow:inset 0 0 20px #b394ff0d}.hub .subject:hover{background:#9682ce25}
.game-cards{gap:18px}.game-card{padding:20px 22px 24px;border-radius:22px;background:radial-gradient(circle at 50% 0%,#68519b66,transparent 70%),#24213e;color:#fff;border:1px solid #c8b5ff3c;min-height:345px;overflow:hidden;box-shadow:inset 0 1px #ffffff12}.game-card.race{background:radial-gradient(circle at 50% 0%,#368f8466,transparent 70%),#15323b;border-color:#92dac43c}.game-card.wheel{background:radial-gradient(circle at 50% 0%,#b67b4566,transparent 70%),#372937;border-color:#e8bf853c}.game-card:hover{transform:translateY(-6px);box-shadow:0 22px 35px #0004;border-color:#ffe8a596}.game-art{width:100%;height:153px;margin:9px 0 0;filter:drop-shadow(0 8px 12px #0002);transition:transform .3s}.game-card:hover .game-art{transform:translateY(-5px) rotate(-2deg)}.card-icon{position:absolute;top:16px;left:19px;font-size:18px;margin:0;opacity:.8}.card-time{top:18px;right:18px;color:#d0cae4;background:#ffffff09;border:1px solid #ffffff17;padding:5px 8px;border-radius:7px;font-size:10px}.game-card h3{font-size:21px;letter-spacing:-.4px;margin:12px 0 9px}.game-card p{color:#c6cce0;font-size:12px;line-height:1.65;min-height:42px;margin:0 0 21px}.game-card b{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;color:#b9c6e5;padding-top:16px;border-top:1px solid #ffffff1c}.card-cta{color:#fff1cc;font-size:11px;padding:7px 9px;border-radius:8px;background:#ffffff12}.hub-tip,.recent{background:#0b14272e;border:1px solid #a5b4de19;color:#b1c4da;font-size:11px;padding:12px 16px}.recent{margin-top:22px}.hub-tip{margin-top:10px}.game-footer{font-size:10px;color:#97a9c9;padding-top:22px}
.game{padding:30px;border-radius:28px;border:1px solid #bfc5ef33;background:radial-gradient(ellipse at 50% -10%,#434582 0%,#191e44 50%,#0c142a 100%);box-shadow:0 26px 75px #0004}.game-header>b{font-size:18px;letter-spacing:.2px}.game:after{content:'';position:absolute;left:4%;right:4%;top:0;height:2px;background:linear-gradient(90deg,transparent,#f2d9a3,transparent);opacity:.6}.setup h1{font-size:40px;letter-spacing:-1px;color:#fff3d1}.setup>p{color:#c3cbe0;font-size:14px}.orb{background:radial-gradient(circle at 35% 20%,#74659b,#28274f 65%);border-width:3px;box-shadow:0 0 0 10px #ffe09510,0 0 0 22px #ffe09505,0 0 60px #d7bc9a22}.mode-card{background:#ffffff07;border-color:#c4c9f133;transition:.2s;min-height:133px}.mode-card.active{background:linear-gradient(135deg,#d5ad621b,#ae8be723);border:1px solid #e5c581;box-shadow:0 0 0 3px #e6c4810a}.mode-card:hover{background:#ffffff10}.cta{background:linear-gradient(120deg,#ffe9a3,#f0bd60);color:#31283c;font-size:13px;letter-spacing:.5px;box-shadow:0 8px 25px #ffc87520;padding:15px 25px;transition:transform .2s,box-shadow .2s}.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #ffc87535}.secondary.dark{background:#ffffff06;border:1px solid #a7b6dc3b;font-size:11px}.small-chip{font-size:10px;background:#ffffff07;border-color:#aab9dc25}.level{background:linear-gradient(100deg,#ffe7a3,#d7b170);padding:8px 15px;font-size:10px;letter-spacing:1px}.qbox{position:relative;min-height:164px;padding:36px 30px 29px;background:linear-gradient(150deg,#323963b0,#18294b);border:1px solid #a5b8f45e;border-radius:21px;box-shadow:0 16px 28px #0002,inset 0 1px #ffffff13}.qbox strong{font-size:clamp(20px,2.3vw,28px);font-weight:780;line-height:1.55}.qbox small{font-size:10px;letter-spacing:1.4px;margin:9px 0 12px}.listen-again{position:absolute;right:10px;top:9px;background:#ffffff09;color:#d4ddf2;border:1px solid #ffffff18;font-size:10px;padding:5px 8px;border-radius:7px}.option{background:#202d4f;border:1px solid #8d9fc04a;border-radius:14px;min-height:76px;padding:18px;transition:background .18s,box-shadow .18s,transform .18s;font-size:15px}.option b{font-weight:650}.option:hover:not(:disabled){background:#354269;border-color:#e2c784;transform:translateX(3px)}.option.selected{background:linear-gradient(110deg,#d1a755,#edce89);border-color:#fff1b3;color:#24213f;box-shadow:0 0 0 3px #ffdc7520,0 4px 20px #e0bb4b17}.option.correct{background:linear-gradient(120deg,#216f64,#2b8065);border-color:#9af6c9;box-shadow:0 0 25px #65e7b52b;opacity:1}.option.wrong{background:#6b334d;border-color:#ea94ad;opacity:.8}.option:disabled{opacity:.68}.option.correct:disabled{opacity:1}.letter{border-radius:50%;width:32px;height:32px;background:#ffffff09;border-color:#b8c9e54f}.selected .letter{background:#ffffff44}.side{background:#111a327a;border-color:#a4badf25;border-radius:18px}.step{padding:5px 9px}.step.current{background:linear-gradient(110deg,#e3bf77,#ffe1a0);box-shadow:0 2px 18px #eec5741c;animation:ladderGlow 2s ease-in-out infinite}.progress{height:4px;margin-bottom:20px;background:#ffffff12}.progress span{box-shadow:0 0 14px #ffdf8e80}.streak-banner{color:#ffe7a6;background:linear-gradient(90deg,#c68b3926,transparent);border-left:2px solid #ffc971;padding:10px 12px;margin-bottom:14px;font-size:12px;animation:popIn .4s ease}.feedback{position:relative;background:#ffffff07;border:1px solid #b7c7e22e;font-size:13px;border-radius:14px;padding:17px 20px;animation:popIn .35s ease}.feedback-win{background:#24796519;border-color:#71ceab4d}.feedback-win strong{color:#b5f8d4}.feedback-learn{background:#82744312}.point-pop{float:right;color:#a0f0cb;font-weight:900;font-size:17px;letter-spacing:.5px;animation:scorePop .7s ease}.feedback span:not(.point-pop){display:block}.feedback>div{margin-top:8px;color:#d0d9eb}.play-actions{margin-top:20px}.game.race{background:radial-gradient(ellipse at 50% 0%,#20545a,#132b3b 45%,#0d192d)}.race-scene{border:1px solid #8dcebd42;background:linear-gradient(160deg,#234c4a,#163332);padding:16px 21px 18px;overflow:hidden;position:relative}.race-sky{display:flex;justify-content:space-between;align-items:end;height:48px;border-bottom:1px solid #a9d6ce29;margin:-10px -5px 14px}.race-sky>span{font-size:43px;opacity:.32}.race-sky>b{font-size:10px;letter-spacing:3px;color:#b4d7ca;padding-bottom:12px}.race-title{font-size:12px;color:#d8f0e4}.track{height:68px;border:0;border-radius:9px;background:linear-gradient(90deg,#222f3c,#34424b);box-shadow:inset 0 2px #ffffff15,inset 0 -2px #0004}.track:after{content:'';position:absolute;inset:49% 0 auto 0;height:2px;background:repeating-linear-gradient(90deg,#ffe9a75e 0 22px,transparent 22px 45px);pointer-events:none}.track-car{z-index:1;font-size:34px;top:2px;filter:drop-shadow(0 3px 3px #0006);transition:left 1.1s cubic-bezier(.22,1,.36,1)}.track-car small{background:#101d2d;padding:3px 6px;border-radius:4px;font-size:8px;line-height:1.3;color:#dae4ef}.opponent{background:#23343d;opacity:.8}.finish-flag{font-size:30px;right:8px;top:11px}.speed-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:#daf4d8}.speed-panel span{display:flex;align-items:center;gap:12px}.speed-panel b{font-size:14px;color:#ffe6a3;min-width:25px}.speed-panel small{font-size:10px;color:#a8c8bb}.speed-meter{height:5px;flex:1;min-width:80px;max-width:200px;background:#fff1;border-radius:8px;overflow:hidden}.speed-meter i{display:block;height:100%;background:linear-gradient(90deg,#55bca6,#ffe29a);transition:width .25s linear}
.game.wheel{background:radial-gradient(ellipse at 50% 0%,#573957,#29223e 50%,#14192f)}.wheel-stage h2{font-size:30px;color:#fff2cd;letter-spacing:-.6px;margin:12px 0}.wheel-stage>p{color:#d6cbe3;font-size:13px}.wheel-wrap{width:310px;height:310px;margin:42px auto;filter:drop-shadow(0 0 32px #f9c28522)}.wheel-wrap:before{content:'';position:absolute;inset:-13px;border:1px dashed #ffe1a757;border-radius:50%;box-shadow:0 0 0 8px #ffebbd05}.wheel-disc{border:10px solid #f4d58f;background:conic-gradient(#73539c 0deg 60deg,#af6546 60deg 120deg,#267e7e 120deg 180deg,#b36189 180deg 240deg,#425f9f 240deg 300deg,#58937a 300deg);transition:transform 2.25s cubic-bezier(.12,.64,.16,1);box-shadow:inset 0 0 30px #0003,0 14px 35px #03081780}.wheel-disc span{font-size:11px;width:80px;color:#fff7e3;text-shadow:0 1px 3px #0007}.wheel-center{inset:113px;border:3px solid #ffeac4;background:radial-gradient(circle at 30% 20%,#fff5d0,#eac575);box-shadow:0 0 0 6px #ffffff20,0 8px 15px #0002}.wheel-pointer{left:138px;top:-26px;color:#fff1cd;text-shadow:0 5px 7px #0005;filter:drop-shadow(0 0 5px #ffdc7655)}.wheel-disc.spinning{filter:brightness(1.1)}
.lock-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:radial-gradient(ellipse at center,#1e2549ef,#080e22ed);backdrop-filter:blur(5px);pointer-events:none;animation:popIn .22s ease}.lock-orbit{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:45px;border:1px solid #f2d49766;background:#ffe09a0a;box-shadow:0 0 0 15px #f2d49708,0 0 65px #e2bd6917;animation:lockPulse 1s ease-in-out infinite}.lock-overlay>b{font-size:24px;letter-spacing:3px;color:#ffe8b5}.lock-overlay>span{font-size:13px;color:#c4cce2}.lock-dots{display:flex;gap:8px;margin-top:8px}.lock-dots i{width:6px;height:6px;background:#ffe29e;border-radius:50%;animation:lockPulse .9s infinite}.lock-dots i:nth-child(2){animation-delay:.15s}.lock-dots i:nth-child(3){animation-delay:.3s}.confetti{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.confetti i{position:absolute;left:var(--x);top:-15px;width:7px;height:13px;background:#ffdc85;animation:confettiFall 2.4s var(--d) ease-out both}.confetti i:nth-child(3n){background:#90ecd1}.confetti i:nth-child(3n+1){background:#b7a6ff;width:6px;height:6px}.learning-end{margin:38px auto;max-width:800px}.learning-end h2{color:#ffedbb;letter-spacing:-.5px}.summary-grid>div{background:#ffffff07;border-color:#a4b6db29;box-shadow:inset 0 1px #ffffff08}.summary-grid b{font-size:29px}.topic-summary{background:#0d152830;border:1px solid #ffffff14}.topic-summary>div+div{border-top:1px solid #ffffff0b}.topic-summary b{color:#e9d39f}.car-choices .picked{border:2px solid #ffe3a0;background:#fff1}.car-choices .secondary{background:#fff1;border-color:#fff2;color:#fff}
@keyframes confettiFall{0%{transform:translateY(-15px) rotate(0);opacity:0}12%{opacity:.85}100%{transform:translateY(800px) rotate(var(--r));opacity:0}}@keyframes mascotFloat{50%{transform:translateY(-7px) rotate(-3deg)}}@keyframes equalize{50%{height:20px}}@keyframes popIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes scorePop{0%{transform:scale(.75);opacity:0}55%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes lockPulse{50%{transform:scale(1.04);opacity:.65}}@keyframes ladderGlow{50%{box-shadow:0 0 18px #f3d48235}}
@media(max-width:900px){.hub-welcome{padding:25px;gap:23px}.hub h1{font-size:34px}.game-card{padding:17px}.game-card h3{font-size:18px}.game-card b{flex-wrap:wrap;gap:10px}.game-art{height:125px}.hub-mascot{flex-basis:110px;width:110px;height:130px}.hub-mascot>span{font-size:65px}.hero-badges{gap:6px}.game{padding:23px}.game-cards{gap:12px}}
@media(max-width:760px){#app{padding:12px}.nav{padding:4px 3px 17px}.brand{font-size:17px}.brand-icon{width:36px;height:36px}.mc-strip{padding:10px 13px;margin-bottom:12px}.mc-avatar{width:38px;height:38px;font-size:25px}.equalizer{display:none}.hub{padding:18px;border-radius:23px}.hub-welcome{padding:23px 18px;min-height:200px;gap:14px}.hub-mascot{flex-basis:80px;width:80px;height:99px;border-radius:24px;align-self:flex-start;margin-top:10px}.hub-mascot>span{font-size:46px}.hub-mascot b{font-size:9px}.hub h1{font-size:29px;letter-spacing:-.8px}.hub p{font-size:12px}.hero-badges{margin-top:14px}.hero-badges span{font-size:9px;padding:5px 7px}.hero-badges span:last-child{display:none}.hub-welcome:before,.hub-welcome:after{display:none}.hub .subject{min-height:62px;gap:9px}.hub .subject i{font-size:23px}.hub .subject b{font-size:12px}.game-cards{grid-template-columns:1fr;gap:14px}.game-card{min-height:180px;padding:20px 20px 21px 42%;display:flex;flex-direction:column;justify-content:center}.game-art{position:absolute;left:0;top:31px;width:40%;height:120px;margin:0}.card-icon{top:12px;left:15px;font-size:14px}.card-time{top:13px;right:14px;font-size:9px}.game-card h3{font-size:19px;margin:26px 0 8px}.game-card p{font-size:11px;margin:0 0 12px}.game-card b{padding-top:10px;font-size:9px;flex-wrap:nowrap}.card-cta{font-size:9px;padding:5px}.game{padding:18px 14px;border-radius:23px}.game-header>b{font-size:15px}.setup h1{font-size:30px}.setup .orb{margin-top:27px}.qbox{padding:38px 18px 25px;min-height:150px}.qbox strong{font-size:21px}.qbox small{font-size:9px}.options{gap:9px;margin:16px 0}.option{min-height:67px;padding:14px;font-size:14px}.playmeta{gap:7px}.small-chip{font-size:9px;padding:7px 10px}.race-scene{padding:13px;margin:18px 0}.race-sky{height:37px}.race-sky>span{font-size:30px}.race-sky>b{font-size:8px;letter-spacing:2px}.race-title{font-size:11px}.speed-panel{gap:9px}.speed-panel small{width:100%;font-size:9px}.track{height:65px}.wheel-wrap{width:280px;height:280px}.wheel-center{inset:103px;font-size:31px}.wheel-pointer{left:124px}.wheel-disc span{width:72px;font-size:10px}.wheel-stage h2{font-size:25px}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.summary-grid>div{padding:14px 7px}.summary-grid small{font-size:9px}.summary-grid b{font-size:20px}.learning-end h2{font-size:27px}.lock-overlay>b{font-size:19px}.game-footer{font-size:9px}.end .play-actions .cta{width:100%}.listen-again{font-size:9px}}
@media(max-width:390px){.hub-welcome{display:block}.hub-mascot{float:right;margin-left:10px;margin-top:20px}.hub h1{font-size:27px}.hero-badges{clear:both}.game-card{padding-left:37%}.game-art{width:36%}.game-card h3{font-size:17px}.game-card b{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}

.equalizer.muted i{animation:none;height:4px;background:#8a9aaf}

/* Animate from explicit previous positions even when the view is re-rendered. */
.wheel-disc.spinning{animation:wheelSpin 2.25s cubic-bezier(.12,.64,.16,1) both}
.track-car.moving{animation:carAdvance .95s cubic-bezier(.22,1,.36,1) both}
@keyframes wheelSpin{from{transform:rotate(var(--wheel-from))}to{transform:rotate(var(--wheel-to))}}
@keyframes carAdvance{from{left:min(var(--car-from),calc(100% - 65px))}to{left:min(var(--car-to),calc(100% - 65px))}}
/* Compact play layouts: one question, one decision, secondary content on demand. */
#app:has(main[data-screen=play]){max-width:1180px;padding:14px 22px 20px}
#app:has(main[data-screen=play]) .nav{padding-bottom:10px}
#app:has(main[data-screen=play]) .brand{font-size:17px}
#app:has(main[data-screen=play]) .brand-icon{width:32px;height:32px;font-size:21px}
#app:has(main[data-screen=play]) .tag{font-size:9px;padding:6px 9px}
#app:has(main[data-screen=play]) .sound-toggle{min-height:32px;font-size:10px;padding:6px 10px}
#app:has(main[data-screen=play]) .mc-strip{padding:7px 12px;margin-bottom:10px;border-radius:13px;gap:10px}
#app:has(main[data-screen=play]) .mc-avatar{height:30px;width:30px;border-radius:10px;font-size:20px}
#app:has(main[data-screen=play]) .mc-mic{font-size:12px}
#app:has(main[data-screen=play]) .mc-meta{gap:2px}
#app:has(main[data-screen=play]) .mc-meta b{font-size:10px}
#app:has(main[data-screen=play]) #mc-caption{font-size:10px;max-height:3em}
main[data-screen=play].game{min-height:0;padding:20px 22px;border-radius:22px}
main[data-screen=play] .game-header>b{font-size:15px}
main[data-screen=play] .game-header .secondary{padding:7px 10px;font-size:10px}
main[data-screen=play] .game-layout{grid-template-columns:minmax(0,1fr) 185px;gap:16px;margin-top:14px}
main[data-screen=play] .playmeta{margin-bottom:10px;gap:7px}
main[data-screen=play] .progress{margin-bottom:12px;height:3px}
main[data-screen=play] .qbox{min-height:117px;padding:27px 22px 20px;border-radius:16px}
main[data-screen=play] .qbox strong{font-size:clamp(19px,2.1vw,25px);line-height:1.42}
main[data-screen=play] .qbox small{font-size:9px;letter-spacing:.8px;margin:4px 0 9px}
main[data-screen=play] .options{gap:10px;margin:14px 0}
main[data-screen=play] .option{min-height:61px;padding:12px 14px;font-size:14px;border-radius:12px}
main[data-screen=play] .letter{width:27px;height:27px;font-size:12px}
main[data-screen=play] .cta{padding:12px 20px;font-size:12px;border-radius:11px}
main[data-screen=play] .secondary.dark{padding:9px 12px}
main[data-screen=play] .play-actions{margin-top:12px;gap:8px}
main[data-screen=play] .feedback{padding:12px 15px;margin:12px 0;font-size:12px}
main[data-screen=play] .feedback strong{font-size:15px}
main[data-screen=play] .game-footer{font-size:9px;padding-top:15px}
main[data-screen=play] .side{padding:12px;background:#0b142440;border-radius:14px;display:block}
.safe-milestones{display:grid;gap:8px;margin-bottom:12px}.safe-milestones span{font-size:10px;color:#e8d8a5;padding:9px;background:#ffffff07;border:1px solid #e3cf8920;border-radius:9px}
.prize-drawer summary,.compact-help summary{cursor:pointer;list-style-position:inside;font-size:11px;font-weight:750;color:#e7e9ff;padding:9px 0}
.prize-drawer[open] summary,.compact-help[open] summary{margin-bottom:7px;border-bottom:1px solid #ffffff15}
main[data-screen=play] .step{font-size:10px;padding:3px 6px;line-height:1.3}
main[data-screen=play] .side h3{font-size:9px;letter-spacing:.7px;margin-top:7px}
main[data-screen=play] .helps{margin:9px 0 0;padding:6px 0 0;border-top:1px solid #ffffff15}
.compact-help small{font-size:9px;color:#bdc9df;display:block;margin-top:8px}.compact-help .help{min-height:42px;font-size:10px;padding:7px 4px}.compact-help .help .emoji{font-size:15px}
main[data-screen=play] .learning-layout,main[data-screen=play] .learning-layout:has(.side){grid-template-columns:1fr}
main[data-screen=play] .learning-layout .side{padding:0;border:0;background:none}
main[data-screen=play] .learning-layout .helps{margin:0;padding:0;border:0;max-width:440px}
main[data-screen=play] .learning-layout .helpgrid{grid-template-columns:1fr;max-width:160px}
main[data-screen=play] .learning-layout .help .emoji{display:inline;margin-right:6px}
main[data-screen=play] .race-scene{padding:10px 14px;margin:12px 0 15px;border-radius:13px}
main[data-screen=play] .race-sky{display:none}
main[data-screen=play] .race-title{font-size:11px;margin-bottom:7px}
main[data-screen=play] .track{height:43px;margin:5px 0;border-radius:7px}
main[data-screen=play] .track-car{font-size:23px;top:0;line-height:1.05}
main[data-screen=play] .track-car small{font-size:7px;padding:2px 4px}
main[data-screen=play] .finish-flag{font-size:21px;top:8px}
main[data-screen=play] .speed-panel{margin-top:8px;font-size:10px;gap:9px}
main[data-screen=play] .speed-panel b{font-size:12px}
main[data-screen=play] .speed-panel small{font-size:9px}
main[data-screen=play] .streak-banner{font-size:10px;padding:7px 10px;margin-bottom:9px}
main[data-screen=play] .wheel-stage{padding:18px 0 8px}
main[data-screen=play] .wheel-stage h2{font-size:25px;margin:10px 0}
main[data-screen=play] .wheel-wrap{width:238px;height:238px;margin:29px auto}
main[data-screen=play] .wheel-disc{border-width:8px}
main[data-screen=play] .wheel-disc span{width:61px;font-size:9px}
main[data-screen=play] .wheel-center{inset:87px;font-size:27px;border-width:2px}
main[data-screen=play] .wheel-pointer{left:104px;top:-25px;font-size:31px}
main[data-screen=play] .wheel-stage>p{font-size:11px;margin:13px 0}
main[data-screen=play] .wheel-stage .rules{margin:13px auto;font-size:10px}
main[data-screen=play] .learning-end{margin:20px auto;max-width:700px}
main[data-screen=play] .learning-end .orb{height:78px;width:78px;font-size:34px;margin-bottom:20px}
main[data-screen=play] .learning-end h2{font-size:27px}
main[data-screen=play] .summary-grid{margin:20px 0;gap:10px}
main[data-screen=play] .summary-grid>div{padding:13px}
main[data-screen=play] .summary-grid b{font-size:25px;margin-top:7px}
main[data-screen=play] .topic-summary{padding:10px}
main[data-screen=play] .topic-summary>div{padding:7px;font-size:12px}
@media(max-width:760px){#app:has(main[data-screen=play]){padding:9px}main[data-screen=play].game{padding:15px 12px}main[data-screen=play] .game-layout{grid-template-columns:1fr;gap:9px}main[data-screen=play] .side{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;border:0;background:none}main[data-screen=play] .safe-milestones{display:none}main[data-screen=play] .helps{margin:0;padding:0;border:0}main[data-screen=play] .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}main[data-screen=play] .helpgrid{grid-template-columns:repeat(2,1fr)}main[data-screen=play] .options{grid-template-columns:1fr;gap:8px}main[data-screen=play] .option{min-height:54px;padding:11px 12px;font-size:14px}main[data-screen=play] .qbox{min-height:112px;padding:29px 15px 19px}main[data-screen=play] .qbox strong{font-size:20px}main[data-screen=play] .game-header>b{font-size:13px}main[data-screen=play] .race-scene{padding:9px 11px;margin:10px 0 12px}main[data-screen=play] .speed-panel small{width:100%}main[data-screen=play] .wheel-stage h2{font-size:22px}main[data-screen=play] .learning-layout .side{display:block}main[data-screen=play] .feedback{font-size:11px}main[data-screen=play] .summary-grid b{font-size:20px}}
/* VnDoc learning portal: original supplied mascot sheet, cropped by CSS. */
.vndoc-mascot{display:inline-block;flex:none;width:64px;height:80px;background-image:url('/mascot-vndoc.png');background-size:505% 270%;background-position:49.35% 25.5%;background-repeat:no-repeat;border-radius:22%;vertical-align:middle;filter:drop-shadow(0 5px 5px #0a123325)}
.vndoc-mascot.pose-happy{background-size:914% 580%;background-position:84.2% 8.4%;width:64px;height:68px}
.vndoc-mascot.pose-think{background-size:1010% 640%;background-position:84.1% 37%;width:64px;height:68px}
.vndoc-mascot.pose-trophy{background-size:880% 555%;background-position:85.2% 65%;width:64px;height:72px}
.brand-home{border:0;background:none;color:inherit;padding:0;cursor:pointer;font:inherit;display:flex;align-items:center;gap:10px}.brand-home b{color:#bfc7ff}.brand-home .brand-icon{width:38px;height:46px;background-color:transparent;padding:0;border-radius:12px}.nav{gap:16px}.nav-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.account-pill{border:1px solid #ffe3a64d;background:#fff0bf;color:#273358;border-radius:30px;padding:10px 17px;font-weight:800;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.logout{font-size:11px;padding:10px}.mc-strip .mc-avatar{width:37px;height:46px;border-radius:10px;background-color:transparent;font-size:initial;padding:0;position:static}.mc-strip{min-height:60px}.hub-welcome{align-items:center;padding:28px 30px;gap:36px;background:radial-gradient(circle at 12% 45%,#ffde8250,transparent 40%),linear-gradient(120deg,#50499855,#29326320);border:1px solid #ffffff14;border-radius:28px}.hub-mascot{width:180px;height:auto;min-height:220px;flex-shrink:0;background:none;box-shadow:none;border:0;padding:0}.hub-mascot .hero-mascot{width:160px;height:200px}.hub-mascot b{bottom:0;white-space:nowrap}.hub-welcome h1{font-size:clamp(28px,3vw,44px);line-height:1.16;margin:12px 0}.hero-login{margin-top:20px}.portal-picker{display:flex;align-items:center;gap:20px;padding:18px 4px;border-bottom:1px solid #ffffff15;margin-top:8px;color:#cbd5ee;font-size:13px}.portal-picker label{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:800;color:white}.portal-picker select,.auth-card input,.auth-card select{border:1px solid #a7b8db66;background:#111e3a;color:#fff;border-radius:12px;padding:12px;font:inherit}.portal-picker select{min-width:130px}.game-card{position:relative;min-height:260px;padding:20px 22px 24px!important;overflow:hidden}.card-mascot{position:absolute;top:80px;right:17px;width:50px!important;height:60px!important}.game-card .game-art{height:110px;margin:0 0 10px}.game-card .card-time{top:15px}.game-card h3{font-size:21px;margin:10px 0}.game-card p{font-size:13px;line-height:1.55}.game-card.coming-soon{opacity:.65;cursor:default}.hub-tip{display:flex;align-items:center;gap:12px}.tip-mascot{width:30px!important;height:36px!important}.auth-stage{display:grid;grid-template-columns:1fr 1fr;gap:42px;max-width:920px;margin:16px auto}.auth-story{display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center}.auth-mascot{width:175px;height:220px}.auth-story h1{font-size:37px;line-height:1.15;margin:15px 0}.auth-story p{color:#c5d4f2;max-width:330px;line-height:1.7}.auth-card{background:#ffffff0b;border:1px solid #ffffff20;padding:28px;border-radius:24px}.auth-card h2{font-size:24px;margin:24px 0 8px}.auth-card p{font-size:12px;line-height:1.7;color:#cbd5ed}.auth-card label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;margin:15px 0}.auth-card input,.auth-card select{width:100%;box-sizing:border-box;min-height:46px}.auth-card form .cta{width:100%;margin-top:8px}.auth-switch{border:0;background:none;color:#ffe59c;cursor:pointer;padding:10px 0;font:inherit;font-size:13px}.account-stage{text-align:center;max-width:800px;margin:auto;padding:20px}.account-mascot,.result-mascot{width:110px!important;height:124px!important;margin:6px auto 16px}.history-list{display:grid;gap:12px;margin-top:20px}.history-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:#ffffff0a;border:1px solid #ffffff15;border-radius:14px;padding:16px}.history-list span,.history-list small{font-size:12px;color:#cbd5ee}.feedback .feedback-mascot{float:left;width:46px!important;height:52px!important;margin-right:12px}.wheel-center{padding:0;overflow:hidden}.wheel-center .vndoc-mascot{width:42px;height:52px}.setup{max-width:860px;margin:auto;padding:26px!important}.setup .orb{width:74px;height:74px;font-size:36px;margin:20px auto}.setup h1{font-size:32px}.setup .mode-grid{margin:22px auto}.setup .mode-card{padding:18px}.setup .rules{margin:18px auto}.option b{overflow-wrap:anywhere}.play-actions{flex-wrap:wrap}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffe297;outline-offset:3px}
@media(max-width:760px){.nav{padding:12px 0;align-items:center}.nav .brand{font-size:17px}.nav-controls{gap:6px}.nav-controls .tag{display:none}.account-pill{font-size:11px;padding:9px 12px;max-width:100px}.logout{padding:8px;font-size:10px}.sound-toggle{font-size:10px!important;padding:9px!important}.nav .brand-icon{width:28px;height:35px}.nav-controls .logout{display:none}.hub-welcome{padding:18px 15px;gap:14px}.hub-mascot{width:90px;min-height:128px}.hub-mascot .hero-mascot{width:88px;height:110px}.hub-mascot b{font-size:9px;white-space:normal}.hub-welcome h1{font-size:26px}.hub-welcome p{font-size:12px}.hero-badges{gap:5px}.hero-badges span{font-size:9px;padding:5px 7px}.hero-login{font-size:11px;padding:13px;margin-top:12px}.portal-picker{gap:10px;align-items:flex-start;flex-direction:column}.portal-picker select{padding:10px}.game-cards{grid-template-columns:1fr!important;gap:12px}.game-card{min-height:155px;padding:17px 17px 17px 130px!important;text-align:left}.game-card .game-art{position:absolute;left:6px;top:25px;width:118px;height:90px}.game-card .card-mascot{left:70px;top:75px;width:34px!important;height:42px!important}.game-card h3{font-size:18px;padding-right:30px;margin:22px 0 7px}.game-card p{font-size:11px;margin:0 0 12px}.game-card .card-time{font-size:9px;top:12px;right:14px}.game-card>b{font-size:11px}.auth-stage{grid-template-columns:1fr;gap:15px;margin:0}.auth-story{flex-direction:row;flex-wrap:wrap;gap:10px}.auth-story .auth-mascot{width:65px;height:82px}.auth-story h1{font-size:23px;margin:0}.auth-story .eyebrow,.auth-story>p{display:none}.auth-card{padding:20px}.auth-card h2{margin-top:18px}.account-stage{padding:8px}.account-stage h1{font-size:25px}.history-list>div{flex-wrap:wrap}.history-list b{width:100%;font-size:14px}.mc-meta span{font-size:10px!important}.qbox strong{font-size:clamp(18px,5vw,23px)!important}.options{gap:9px!important}.option{min-height:57px!important;padding:10px!important}.option b{font-size:14px}.play-actions .cta{flex:1;min-height:48px}.side{gap:8px}.setup h1{font-size:26px}.setup .mode-grid{grid-template-columns:1fr}.setup .mode-card{padding:15px;text-align:left}.setup .mode-card span{font-size:11px}.setup .orb{width:60px;height:60px;margin:14px auto}.account-stage .logout-mobile{display:block}}
@media(prefers-reduced-motion:reduce){.vndoc-mascot,.hero-mascot{animation:none!important}}

/* Cloud Garden: fourth learning game on the existing EduGames portal. */
.game-card.cloud-garden{background:linear-gradient(155deg,#e9fff3,#b0edf6 58%,#e1ffe0);border-color:#6bd7a4;color:#214f54;position:relative}
.game-card.cloud-garden h3{color:#12604e}
.game-card.cloud-garden .card-time{background:#effff5;color:#276f5a}
.game-card.cloud-garden .card-cta{color:#157b68}
.garden-card-art{height:155px;position:relative;margin:0 0 14px;border-radius:19px;background:linear-gradient(155deg,#6ad0f7,#b5f4fd 60%,#d4f2be);overflow:hidden;isolation:isolate}
.garden-sky{position:absolute;left:5%;top:6%;color:white;font-size:1.35rem;letter-spacing:2.3rem}
.garden-island{position:absolute;z-index:2;width:42%;height:44px;text-align:center;font-size:2.25rem;line-height:1.15;filter:drop-shadow(0 6px 1px #5770478c);border-radius:60% 45% 60% 45%;background:linear-gradient(#83c84a 0 62%,#a66a37 63%);border-bottom:12px solid #7b543d}
.garden-island.is-one{top:32%;left:6%;transform:rotate(-8deg)}
.garden-island.is-two{top:10%;right:6%;transform:rotate(7deg)}
.garden-fall{position:absolute;top:48%;width:16px;height:95px;border-radius:0 0 19px 19px;background:linear-gradient(90deg,#4faadb,#bcfff5,#50b9da);box-shadow:2px 2px 5px #267d9a55}
.garden-fall.fall-one{left:24%}.garden-fall.fall-two{left:73%;top:27%}
.garden-guide{position:absolute;z-index:3;width:61px;height:66px;object-fit:contain;left:9%;top:9%;filter:drop-shadow(2px 4px 2px #4a604b77);pointer-events:none}
.game-card.cloud-garden:focus-visible{outline:4px solid #167e63;outline-offset:3px}

/* Cloud Garden card: crop original mascot from reference poster instead of shrinking full reference sheet. */
.garden-card-art .garden-guide{position:absolute;z-index:4;left:8%;top:3%;width:76px;height:88px;display:block;background-image:url('/mascot-vndoc.png');background-size:400px 267px;background-position:-160px -40px;border-radius:12px;mask-image:radial-gradient(ellipse 82% 82% at 50% 50%,#000 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%,#000 65%,transparent 100%)}

/* Student-created accounts: keep form readable on small Android/iPhone screens. */
.auth-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 15px}
.auth-tabs button{min-width:0;min-height:44px;border:1px solid #ffffff55;border-radius:12px;
 color:#d4e8ff;background:#1b2c4a;padding:10px 8px;font-weight:900;cursor:pointer}
.auth-tabs button.selected{background:#ffe1a1;color:#65451e;border-color:#ffc66f}
.auth-tabs button:focus-visible{outline:3px solid #ffe29c;outline-offset:2px}
.auth-card .password-note{border:1px solid #a6d9c8;background:#164336;color:#ecfff6;
 border-radius:11px;padding:10px 12px;font-size:.82rem;line-height:1.5;margin:4px 0 12px}
@media(max-width:600px){.auth-tabs button{font-size:.85rem}.auth-card{padding:18px}.auth-stage{gap:14px}}


/* Emoji cars face left by default; mirror the sprite only, never its label or motion. */
.track-car .vehicle-sprite{display:block;transform:scaleX(-1);transform-origin:center}

/* Approved VnDoc mascot covers: preserve the full artwork and Vietnamese titles. */
.hub .game-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hub .game-card{display:flex;flex-direction:column;padding:0!important;min-height:0;overflow:hidden;text-align:left}
.game-cover{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;flex:none;background:#152640}
.game-card-body{display:flex;flex:1;flex-direction:column;padding:18px 20px 20px;gap:9px}
.hub .game-card .card-time{position:static;align-self:flex-start;display:inline-block;margin:0;padding:5px 9px;background:#ffffff12;border-radius:7px;font-size:10px;color:inherit}
.hub .game-card h3{font-size:22px;margin:0;padding:0;line-height:1.25}
.hub .game-card p{min-height:0;margin:0 0 8px;font-size:13px;line-height:1.6}
.hub .game-card b{margin-top:auto;padding-top:12px;border-top:1px solid #ffffff20;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.hub .game-card.coming-soon .game-cover{opacity:.7}
.hub .game-card.cloud-garden p{color:#315f63}
.hub .game-card.cloud-garden b{color:#245956;border-color:#2c686733}
@media(max-width:760px){.hub .game-cards{grid-template-columns:1fr;gap:16px}.game-card-body{padding:15px 17px 17px}.hub .game-card h3{font-size:20px}.hub .game-card p{font-size:12px}}