:root { --ink:#171a37; --purple:#7157ff; --purple2:#9b63ff; --cyan:#24d6e7; --gold:#ffd14a; --paper:#fff; --muted:#6c7295; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:"Trebuchet MS",system-ui,sans-serif; background:#10142d; min-height:100vh; }
button { font:inherit; }
.screen { display:none; min-height:100vh; }
.screen.active { display:block; }
#welcome-screen { padding:42px 18px; background:radial-gradient(circle at 15% 15%,#563f9b55,transparent 30%),radial-gradient(circle at 85% 35%,#176f8855,transparent 25%),linear-gradient(145deg,#10142d,#202050); position:relative; overflow:hidden; }
.stars,.stars:before { position:absolute; inset:0; content:""; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:43px 43px; opacity:.32; }
.stars:before { transform:translate(20px,16px); background-size:71px 71px; }
.welcome-card,.victory-card { position:relative; max-width:780px; margin:auto; padding:34px 40px; text-align:center; background:#fff; border-radius:30px; box-shadow:0 24px 70px #0007; }
.brand-mark { width:62px; height:62px; display:grid; place-items:center; margin:-65px auto 10px; border-radius:20px; color:#fff; font-size:35px; background:linear-gradient(145deg,var(--purple2),var(--purple)); box-shadow:0 10px 25px #7257ff77; transform:rotate(-7deg); }
.eyebrow { margin:8px 0 0; color:var(--purple); font-weight:800; text-transform:uppercase; letter-spacing:2px; font-size:12px; }
h1,h2,h3 { font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif; }
h1 { margin:-2px 0 2px; font-size:48px; line-height:1; } h1 span { color:var(--purple); }
.lede { color:var(--muted); margin:10px auto 25px; }
fieldset { border:0; padding:0; margin:19px 0; } legend { width:100%; margin-bottom:8px; font-weight:800; font-size:14px; text-align:left; }
.choice-row { display:flex; gap:10px; }
.choice { flex:1; border:2px solid #e8e9f4; background:#f8f8fc; color:#555b7c; border-radius:14px; padding:10px; cursor:pointer; font-weight:800; transition:.18s; }
.choice:hover,.world:hover { transform:translateY(-2px); border-color:#b8adff; }
.choice.selected,.world.selected { color:#5b45e5; border-color:var(--purple); background:#f1efff; box-shadow:0 4px 0 #d8d2ff; }
.subject { padding:13px; font-size:16px; }.subject span { margin-right:5px; }
.world-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.world { border:2px solid #e8e9f4; background:#f8f8fc; border-radius:16px; padding:11px 8px; cursor:pointer; transition:.18s; }
.world-art { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 6px; border-radius:50%; font-size:27px; }
.space-art { background:#dffaff; }.magic-art { background:#f4e7ff; }.ocean-art { background:#e1f1ff; }
.world strong,.world small { display:block; }.world strong { font-size:13px; }.world small { color:var(--muted); font-size:10px; margin-top:2px; }
.level-picker { padding:15px!important; border:2px solid #ddd8ff; background:#faf9ff; border-radius:18px; }.step-number { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:5px; border-radius:50%; color:#fff; background:var(--purple); font-size:12px; }.field-help { margin:-3px 0 10px; color:var(--muted); text-align:left; font-size:11px; }.grade-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.grade-card { display:flex; align-items:center; gap:8px; text-align:left; padding:11px!important; }.grade-card strong,.grade-card small { display:block; }.grade-card small { color:var(--muted); margin-top:3px; font-size:9px; line-height:1.2; }.grade-number { flex:0 0 38px; display:grid; place-items:center; height:38px; border-radius:11px; background:#e8e4ff; color:#5540dc; font-size:20px; font-weight:800; }
.primary { width:100%; border:0; padding:14px 20px; color:#fff; background:linear-gradient(135deg,var(--purple2),var(--purple)); border-radius:14px; font-weight:800; font-size:17px; cursor:pointer; box-shadow:0 6px 0 #503bc5; transition:.15s; }
.primary:hover { transform:translateY(-2px); }.primary:active { transform:translateY(3px); box-shadow:0 3px 0 #503bc5; }
.grownup-note { color:#9397af; font-size:11px; margin:16px 0 -15px; }

#battle-screen { background:#f1f2f9; padding-bottom:35px; }
.game-header { height:70px; display:flex; align-items:center; gap:18px; padding:10px max(20px,calc((100% - 900px)/2)); background:#fff; box-shadow:0 2px 14px #31375815; }
.icon-button { border:0; background:#f1efff; color:var(--purple); width:42px; height:42px; border-radius:12px; font-size:22px; cursor:pointer; }
.switch-level { border:0; background:#f1efff; color:var(--purple); height:42px; padding:0 12px; border-radius:12px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.mission-progress { flex:1; font-size:12px; font-weight:800; color:var(--muted); }.bar { height:9px; margin-top:5px; border-radius:10px; overflow:hidden; background:#e8e9f2; }.bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),#63e69d); transition:.4s; }
.stats { display:flex; gap:12px; white-space:nowrap; }.stats span { background:#f6f6fb; padding:8px 10px; border-radius:10px; }
.arena { min-height:315px; padding:28px 20px 12px; color:#fff; background:radial-gradient(circle at 50% 80%,#5c62ad 0,transparent 30%),linear-gradient(#141937,#29366d); position:relative; overflow:hidden; }
.arena:before { content:""; position:absolute; inset:0; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:35px 35px; opacity:.28; }
.arena.magic { background:radial-gradient(circle at 50% 90%,#9c61b8 0,transparent 30%),linear-gradient(#251739,#593a70); }.arena.ocean { background:radial-gradient(circle at 50% 90%,#1c8fa7 0,transparent 35%),linear-gradient(#082f54,#0d6681); }
.scene-copy { position:relative; text-align:center; }.scene-copy p { color:#8bf3ff; font-size:11px; letter-spacing:2px; font-weight:800; margin:0; }.scene-copy h2 { margin:3px; font-size:22px; }
.fighters { max-width:680px; margin:25px auto 0; display:flex; align-items:center; justify-content:space-around; position:relative; }
.fighter { text-align:center; min-width:180px; }.avatar { font-size:78px; filter:drop-shadow(0 10px 10px #0007); animation:float 2.5s ease-in-out infinite; }.enemy .avatar { animation-delay:-1s; }
@keyframes float { 50% { transform:translateY(-8px); } }
.speech { display:inline-block; background:#fff; color:var(--ink); padding:6px 12px; border-radius:12px; font-size:12px; font-weight:800; opacity:0; transform:translateY(5px); transition:.2s; }.speech.show { opacity:1; transform:none; }
.nameplate { margin-top:5px; font-size:12px; font-weight:800; letter-spacing:1px; }.nameplate span { display:block; font-size:10px; font-weight:600; opacity:.8; }
.enemy-health { height:7px; width:120px; background:#ffffff44; border-radius:5px; margin:4px auto; overflow:hidden; }.enemy-health i { display:block; height:100%; width:100%; background:#ff647c; transition:.4s; }.versus { font-family:"Baloo 2"; font-weight:800; color:var(--gold); font-size:22px; }
.question-card { max-width:720px; margin:-4px auto 0; padding:24px 30px 28px; background:#fff; border-radius:0 0 24px 24px; box-shadow:0 12px 30px #33395922; }
.question-meta { display:flex; justify-content:space-between; font-size:11px; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:1px; }.question-meta span:last-child { color:#e85c3b; }
.question-card h3 { font-size:27px; text-align:center; margin:18px 0; line-height:1.25; }
.passage { background:#f5f6fb; border-left:4px solid var(--cyan); border-radius:10px; padding:12px 15px; margin:13px 0; font-size:14px; line-height:1.5; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.answer { min-height:52px; border:2px solid #e4e5ef; border-radius:13px; background:#fff; color:var(--ink); font-weight:800; cursor:pointer; padding:10px; }.answer:hover { border-color:var(--purple); background:#f7f5ff; }.answer.correct { border-color:#20bd75; background:#e9fff4; color:#118752; }.answer.wrong { border-color:#ff647c; background:#fff0f2; color:#c83850; }
.feedback { text-align:center; margin:15px 0 5px; font-weight:800; }.feedback.good { color:#128a58; }.feedback.bad { color:#c83850; }.question-card .primary { max-width:330px; display:block; margin:18px auto 0; }
.hidden { display:none!important; }

#victory-screen { padding:60px 18px; background:radial-gradient(circle,#7157ff,#252456 70%); }.victory-card { max-width:620px; margin:auto; }.trophy { font-size:80px; filter:drop-shadow(0 10px 10px #60430044); }.victory-card h2 { font-size:40px; margin:0; }.victory-card>p:not(.eyebrow) { color:var(--muted); }.reward-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:25px 0; }.reward-row div { background:#f5f4ff; border-radius:15px; padding:15px 5px; }.reward-row span,.reward-row small { display:block; }.reward-row span { font-family:"Baloo 2"; color:var(--purple); font-size:27px; font-weight:800; }.reward-row small { color:var(--muted); font-size:11px; }.text-button { border:0; background:none; color:var(--purple); font-weight:800; margin-top:18px; cursor:pointer; }
@media (max-width:600px) { .welcome-card { padding:30px 20px; }.grade-grid { grid-template-columns:1fr; }.grade-card small { font-size:10px; }.world-grid { grid-template-columns:1fr; }.world { display:grid; grid-template-columns:50px 1fr; text-align:left; align-items:center; }.world-art { grid-row:1/3; margin-right:9px; }.world small { grid-column:2; }.game-header { gap:8px; padding:9px 10px; }.switch-level span { display:none; }.stats { gap:4px; }.stats span { padding:7px 5px; font-size:12px; }.arena { min-height:285px; }.fighter { min-width:120px; }.avatar { font-size:61px; }.question-card { border-radius:0; padding:21px 16px; }.answers { grid-template-columns:1fr; }.question-card h3 { font-size:23px; }.victory-card { padding:28px 18px; } }

/* Product-ready additions */
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:10px 14px; background:#fff; color:#3223a4; border-radius:8px; transform:translateY(-150%); }.skip-link:focus { transform:none; }
.name-field { display:block; margin-bottom:7px; text-align:left; font-size:14px; font-weight:800; }.player-input { width:100%; border:2px solid #e4e5ef; border-radius:13px; padding:12px 14px; color:var(--ink); background:#fbfbfe; font:inherit; font-weight:800; outline:none; }.player-input:focus { border-color:var(--purple); box-shadow:0 0 0 4px #7157ff1c; }
.welcome-actions { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-top:24px; }.secondary { border:2px solid #dad6ff; color:#5946d7; background:#f7f5ff; border-radius:14px; font-weight:800; cursor:pointer; }
.sound-button { border:0; width:38px; border-radius:10px; background:#f1efff; cursor:pointer; }.daily-goal { display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }.mini-bar { flex:1; height:6px; background:#ececf4; border-radius:8px; overflow:hidden; }.mini-bar i { display:block; width:0; height:100%; background:linear-gradient(90deg,#ffc83d,#ff8f4b); transition:.35s; }
.hint-button { display:block; margin:12px auto 0; border:0; color:#614de1; background:#f1efff; padding:8px 13px; border-radius:10px; font-weight:800; cursor:pointer; }.hint-button:disabled { opacity:.45; }.mastery-summary { margin:18px 0; text-align:left; background:#f7f7fc; border-radius:14px; padding:14px; font-size:13px; }.mastery-summary strong { display:block; color:#33279a; margin-bottom:6px; }
.modal { position:fixed; z-index:90; inset:0; display:grid; place-items:center; padding:18px; background:#10142ddd; }.modal-card { position:relative; width:min(600px,100%); max-height:90vh; overflow:auto; padding:30px; border-radius:24px; background:#fff; box-shadow:0 20px 70px #0008; }.modal-card h2 { margin:4px 0; font-size:30px; }.modal-close { position:absolute; right:16px; top:14px; width:38px; height:38px; border:0; border-radius:50%; background:#f0eff8; color:#4b4f70; font-size:25px; cursor:pointer; }.privacy-note { color:var(--muted); font-size:12px; }.dashboard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }.dashboard-grid div { background:#f4f2ff; border-radius:13px; padding:14px; text-align:center; }.dashboard-grid strong,.dashboard-grid span { display:block; }.dashboard-grid strong { color:var(--purple); font-size:24px; }.dashboard-grid span { color:var(--muted); font-size:10px; text-transform:uppercase; font-weight:800; }.skill-history { display:grid; gap:7px; margin:10px 0 20px; }.history-row { display:flex; justify-content:space-between; gap:10px; padding:9px 12px; background:#f6f6fa; border-radius:9px; font-size:12px; }.danger-button { border:1px solid #ffc3cc; background:#fff4f5; color:#bd3047; border-radius:10px; padding:9px 12px; cursor:pointer; font-weight:800; }.noscript { margin:20px; padding:15px; background:#fff; border-radius:10px; }
button:focus-visible,input:focus-visible { outline:4px solid #2bd6e6; outline-offset:2px; }
@media (max-width:600px) { .welcome-actions { grid-template-columns:1fr; }.secondary { padding:12px; }.dashboard-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
.account-shell{min-height:100vh;padding:40px 18px;background:radial-gradient(circle at top,#4f3b9b,#11152f 65%)}.account-card{max-width:620px;margin:auto;padding:30px;background:#fff;border-radius:24px}.account-card h1{font-size:34px}.account-card label{display:block;margin:14px 0;font-weight:800}.account-card input,.account-card select{display:block;width:100%;margin-top:6px;padding:12px;border:2px solid #e4e5ef;border-radius:10px;font:inherit}.account-tabs{display:flex;margin:20px 0}.account-tabs button{flex:1;padding:10px;border:0;background:#eee}.account-tabs .selected{background:#7157ff;color:#fff}.profile-choice{width:100%;display:grid;grid-template-columns:40px 1fr auto;align-items:center;text-align:left;margin:8px 0;padding:12px;border:2px solid #e4e5ef;border-radius:12px;background:#fff}.profile-choice strong,.profile-choice small{display:block}.profile-choice.selected{border-color:#7157ff;background:#f4f2ff}
.grade-grid-eight{grid-template-columns:repeat(4,1fr)}.grade-grid-eight .grade-card{justify-content:center}.grade-grid-eight .grade-number{flex-basis:32px;height:32px;font-size:17px}@media(max-width:600px){.grade-grid-eight{grid-template-columns:repeat(2,1fr)!important}}
.welcome-card{border:1px solid #ffffffaa;box-shadow:0 30px 90px #070a1d99,0 0 0 1px #8f7cff22}.brand-mark{width:76px;height:76px;margin:-73px auto 13px;border-radius:22px;background:none;box-shadow:0 15px 35px #39269e66;transform:none;overflow:hidden}.brand-mark img{display:block;width:100%;height:100%}h1{letter-spacing:-2px}.welcome-card .lede{max-width:520px;line-height:1.5}.level-picker{box-shadow:inset 0 1px #fff}.choice,.world,.secondary{box-shadow:0 2px 0 #dfe1ed}.choice.selected,.world.selected{box-shadow:0 4px 0 #d8d2ff,0 8px 18px #7157ff18}.primary{letter-spacing:.1px;background:linear-gradient(135deg,#9462ff,#6552ed 55%,#4b46cf)}.primary span{display:inline-block;transition:transform .2s}.primary:hover span{transform:translateX(4px)}