:root{
  font-family:ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#173544;
  background:#eef8ff;
  --deep:#0e384b;
  --line:#d3e4e6;
  --mint:#bff4da;
  --green:#28c487;
  --green-dark:#0f9467;
  --blue:#226892;
  --soft:#f9fcff;
  --danger:#ff7d7d;
  --warning:#ffc95c;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f2f9ff 0%,#f7fffb 100%)}
button,a{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
.hidden{display:none!important}
.muted{color:#718990}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px max(16px,calc((100vw - 1180px)/2));background:#fff;box-shadow:0 2px 14px #0c405016;position:sticky;top:0;z-index:30}
.brand{display:flex;gap:10px;align-items:center}
.brand-icon{font-size:34px}
.brand strong{display:block;font-size:19px}
.brand small{display:block;color:#587981;font-size:12px}
.top nav{display:flex;align-items:center;gap:16px}
.top a{font-size:13px;color:#215e84;text-decoration:none}
.text-btn,.back{border:0;background:transparent;color:#316f80;font-weight:700;padding:9px}

main{max-width:1180px;margin:auto;padding:20px 16px 60px;min-height:calc(100vh - 130px)}
h1{font-size:clamp(32px,5.2vw,64px);line-height:1.06;margin:12px 0 16px;letter-spacing:-1.8px}
h1 span{color:#baf5cb}
h2{font-size:clamp(20px,3vw,28px);margin:8px 0 14px}
h3{margin:0 0 10px}
.eyebrow,.hero-kicker{font-size:12px;letter-spacing:1.5px;font-weight:850;text-transform:uppercase}
.under-title{margin:6px 0 0;font-size:13px}

.hero{border-radius:26px;background:linear-gradient(125deg,#12384e,#117d73);color:#fff;padding:clamp(22px,5vw,55px);position:relative;min-height:290px;overflow:hidden}
.hero p{max-width:600px;line-height:1.68;color:#d7f7f6;margin:0}
.hero-tank{position:absolute;font-size:45px;right:35px;bottom:18px;transform:rotate(-4deg);white-space:nowrap}

.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(16px,3vw,28px);margin-top:20px;box-shadow:0 8px 30px #0d4e560a}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.centered{justify-content:center;flex-wrap:wrap}
.chip{background:#d9f5e8;color:#167c60;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700}
.actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:23px}
.button{border:none;border-radius:14px;background:linear-gradient(145deg,#2cc184,#12a4a2);color:#fff;padding:12px 20px;font-weight:800;box-shadow:0 5px 18px #1b7e8040}
.button.secondary{color:#246879;background:#e6f6fa;box-shadow:none}

.grades{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.grade,.unit{border:1.5px solid #d4e8e8;background:#f9fcfc;text-align:left;padding:16px;border-radius:14px;transition:.14s}
.grade:hover,.unit:hover{border-color:#34bd94;transform:translateY(-1px);background:#edfff7}
.grade strong{display:block;font-size:18px}
.grade small,.unit small,.unit .unit-meta{color:#5b8585}
.unit{min-height:124px;display:flex;flex-direction:column;gap:8px}
.unit strong{font-size:18px}
.unit .unit-meta{font-size:12px}
.unit .progressbar{width:100%;background:#e2eff0;height:8px;border-radius:999px;margin-top:auto}
.unit .progressbar>span{display:block;height:100%;background:linear-gradient(90deg,#35ba86,#67d1a7);border-radius:999px}

.flashcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:12px;max-height:55vh;overflow:auto}
.flashcard{background:#f6fbfb;border:1px solid var(--line);border-radius:13px;padding:15px}
.flashcard h3{font-size:21px;margin:0}
.flashcard p{margin:7px 0;color:#456778}
.flashcard small{color:#7d9298}
.flashcard button{margin-top:6px;border:1px solid #c1dfe2;border-radius:8px;background:#fff;padding:5px 10px}

.game-heading{margin:10px 0 16px}
.game-heading h2{margin:0}
.scores{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.scores span{background:#ffffffb8;border:1px solid #d6eaee;border-radius:999px;padding:7px 12px;min-width:70px;text-align:center;font-size:14px}

.battle-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.mission-card{background:linear-gradient(180deg,#0f2f44,#15496a);color:#fff;border-radius:22px;padding:18px;box-shadow:0 8px 26px #0f39542b;position:sticky;top:86px}
.mission-card h3{font-size:20px}
.mission-card ul{margin:0;padding-left:18px;line-height:1.65;color:#d7effb}
.mission-card li+li{margin-top:6px}
.mini-status{margin-top:16px;background:#ffffff14;border:1px solid #ffffff1e;border-radius:16px;padding:12px;display:grid;gap:8px}
.mini-status strong{font-size:13px}
.mini-status span{font-size:12px;color:#cae7ff}

.battle{background:#fff;border:1px solid #cbe1e1;border-radius:22px;padding:14px;text-align:center;box-shadow:0 8px 25px #11565517}
.energy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.energy-card{background:#f6fbff;border:1px solid #d9ebf1;border-radius:16px;padding:12px;text-align:left}
.energy-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:8px}
.energy-bar{height:14px;border-radius:999px;background:#d9ece5;overflow:hidden}
.energy-bar>span{display:block;height:100%;width:40%;background:linear-gradient(90deg,#2dca87,#70dfa4);border-radius:999px;transition:width .25s ease}
.energy-bar.enemy{background:#eadcf5}
.energy-bar.enemy>span{background:linear-gradient(90deg,#7c77ff,#b096ff)}

.battle canvas{display:block;width:100%;height:clamp(220px,38vw,360px);border-radius:18px;background:linear-gradient(#87d3f2,#dff6ff)}
.word-slots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.slot{height:50px;min-width:38px;padding:6px 7px;border-bottom:4px solid #377998;background:#e5f4f4;border-radius:8px 8px 3px 3px;font-size:25px;font-weight:850;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,background .12s ease}
.slot.filled{background:#daf9e8;transform:translateY(-1px)}
.slot.fixed{background:#fff7e0;border-bottom-color:#d59e2d}
.slot.space{background:transparent;min-width:16px;border:0}
.hint{min-height:20px;color:#577e80;margin:8px 0 10px}
.controls{margin:8px 0 6px}
.keyboard{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:640px;margin:14px auto 10px}
.key{min-width:39px;height:44px;background:#eff8fd;border:1px solid #bdd6e0;border-bottom:3px solid #94bdcb;border-radius:10px;font-weight:800;color:#235c71;touch-action:manipulation}
.key:active{transform:translateY(2px)}
.feedback{min-height:30px;font-weight:700;border-radius:14px;padding:8px 12px;margin-top:8px;background:#eff8fb;color:#2b697c}
.feedback.good{background:#ebfff4;color:#147858}
.feedback.bad{background:#fff1f1;color:#b03a3a}
.feedback.neutral{background:#eef8ff;color:#2b697c}

.results{text-align:center;max-width:700px;margin:30px auto}
.confetti{font-size:48px}
.statrow{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;margin-top:25px}
.stat{background:#eafbf2;border-radius:14px;padding:15px;min-width:138px;border:1px solid #d6f0e0}
.stat b{font-size:26px;display:block;margin-bottom:4px}
.results .actions{justify-content:center}

footer{padding:18px;text-align:center;background:#0e3747;color:#cae5e4;font-size:12px}

@media(max-width:980px){
  .battle-layout{grid-template-columns:1fr}
  .mission-card{position:relative;top:0}
}

@media(max-width:760px){
  .grades{grid-template-columns:repeat(3,1fr)}
  .top{gap:8px;padding:8px 10px}
  .brand strong{font-size:14px}
  .brand small{font-size:10px}
  .top nav{gap:6px}
  .top nav a{font-size:11px}
  .hero-tank{opacity:.22;font-size:27px}
  .scores{gap:6px;justify-content:flex-start}
  .scores span{font-size:12px;padding:6px 9px;min-width:auto}
  .key{min-width:31px;height:39px}
  .slot{min-width:28px;height:42px;font-size:20px}
  .panel{margin-top:12px}
  .button{padding:10px 13px;font-size:13px}
  .energy-grid{grid-template-columns:1fr}
}

@media(max-width:520px){
  .grades{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:240px}
  .mission-card{padding:15px}
  .battle{padding:10px}
}

/* Battle upgrade V2: simple widgets, zero extra library cost. */
.difficulty-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 16px;margin:12px 0 18px;border:1px solid #cbdfe8;border-radius:16px;background:#f3fbff}
.difficulty-row strong{font-size:16px}
.difficulty-row p{font-size:13px;margin:5px 0 0}
.difficulty-row select{border:1px solid #b2d0da;background:white;border-radius:11px;padding:12px;font:inherit;min-width:210px;color:#12394d;font-weight:700}
.boss-banner{padding:12px;text-align:center;margin-bottom:12px;font-weight:900;letter-spacing:1px;border-radius:14px;color:#792637;background:linear-gradient(95deg,#fff0bc,#ffbca9,#fff0bc);border:1px solid #f59f75;animation:boss-pulse 1.4s ease-in-out infinite}
@keyframes boss-pulse{50%{filter:brightness(1.1);transform:scale(1.01)}}
.mascot-coach{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;border-radius:15px;padding:10px 14px;background:#fff8e5;border:1px solid #f6dfa9;max-width:680px;min-height:54px;color:#675022;font-weight:750;font-size:14px}
.mascot-face{font-size:31px;line-height:1}
.power-section{border-radius:17px;background:linear-gradient(130deg,#f2f9ff,#e9fff4);border:1px solid #c9e7e9;padding:13px;margin:12px auto;max-width:700px}
.power-label{font-weight:850;font-size:13px;color:#23596c;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.power-label small{font-weight:500;font-size:11px;color:#607f91}
.powers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px}
.power-button{background:white;border:1px solid #b8dde4;border-bottom:3px solid #84bfc7;border-radius:12px;padding:10px 8px;font-weight:800;color:#194e61;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;touch-action:manipulation}
.power-button small{font-weight:500;color:#688797}
.power-button .stock{background:#d8f8ee;border-radius:999px;padding:2px 7px;color:#117b55}
.power-button:disabled{opacity:.38;cursor:not-allowed}
.power-button:not(:disabled):active{transform:translateY(2px)}
.active-powers{font-size:12px;color:#306a73;margin:9px 0 0;min-height:17px}
.local-leaderboard{background:#f8fbff;border:1px solid #d7e8f2;border-radius:17px;margin:24px auto 2px;text-align:left;padding:17px;max-width:520px}
.local-leaderboard h3{font-size:16px;color:#24566a;margin-bottom:10px}
.local-leaderboard ol{margin:0;padding-left:23px}
.local-leaderboard li{padding:6px 0;border-bottom:1px dashed #d5e7ee}
.local-leaderboard li:last-child{border-bottom:none}
@media(max-width:600px){.difficulty-row{flex-direction:column;align-items:stretch}.difficulty-row select{width:100%}.powers{grid-template-columns:repeat(3,1fr);gap:5px}.power-button{padding:8px 4px;font-size:12px}.power-button small{display:none}.mascot-coach{font-size:12px}}
@media(prefers-reduced-motion:reduce){.boss-banner{animation:none}.slot,.energy-bar>span{transition:none}}


/* Responsive Battle V2 hotfix — canvas height follows viewport, not monitor width. */
@media (min-width:981px){
  main{max-width:1380px;padding-top:12px}
  #view-game .game-heading{margin:4px 0 10px}
  #view-game .game-heading h2{font-size:24px}
  #view-game .battle-layout{grid-template-columns:minmax(190px,235px) minmax(0,1fr);gap:12px}
  #view-game .mission-card{padding:14px;top:76px}
  #view-game .mission-card h3{font-size:17px;margin-bottom:6px}
  #view-game .mission-card ul{font-size:12px;line-height:1.4}
  #view-game .mission-card li+li{margin-top:5px}
  #view-game .mini-status{margin-top:10px;padding:9px}
  #view-game .battle{min-width:0;padding:10px}
  #view-game .energy-grid{gap:8px;margin-bottom:8px}
  #view-game .energy-card{padding:8px 10px}
  #view-game .energy-head{font-size:12px;margin-bottom:5px}
  #view-game .energy-bar{height:11px}
  #view-game canvas{height:clamp(190px,26vh,270px)}
  #view-game .mascot-coach{min-height:38px;padding:6px 12px;margin:7px auto 0;font-size:12px}
  #view-game .mascot-face{font-size:24px}
  #view-game .word-slots{margin:8px 0 5px;gap:5px}
  #view-game .slot{height:38px;min-width:30px;font-size:20px;border-bottom-width:3px}
  #view-game .hint{margin:4px 0;min-height:16px;font-size:12px}
  #view-game .controls{margin:5px 0}
  #view-game .controls .button{padding:8px 14px;font-size:12px}
  #view-game .power-section{padding:8px 10px;margin:6px auto}
  #view-game .power-label{font-size:12px}
  #view-game .powers{gap:6px;margin-top:6px}
  #view-game .power-button{padding:6px 8px;font-size:12px}
  #view-game .active-powers{margin:5px 0 0}
  #view-game .keyboard{max-width:670px;gap:5px;margin:7px auto 5px}
  #view-game .key{min-width:32px;height:34px;border-radius:8px}
  #view-game .feedback{min-height:25px;margin-top:5px;padding:6px 10px;font-size:12px}
}
@media(max-width:980px){
  #view-game .battle-layout{grid-template-columns:minmax(0,1fr);gap:10px}
  #view-game .mission-card{position:static;display:flex;align-items:center;gap:14px;padding:12px 15px}
  #view-game .mission-card h3{font-size:15px;margin:0;min-width:100px}
  #view-game .mission-card ul{display:none}
  #view-game .mini-status{margin:0;flex:1;padding:8px 10px}
  #view-game .battle{min-width:0;padding:10px}
  #view-game canvas{height:clamp(195px,29vh,275px)}
  #view-game .word-slots{margin:9px 0 6px}
  #view-game .mascot-coach{margin-top:7px}
  #view-game .controls{margin:6px 0}
  #view-game .power-section{margin:7px auto;padding:9px}
}
@media(max-width:600px){
  #view-game .game-heading{margin:0 0 10px;align-items:flex-start;gap:6px}
  #view-game .game-heading h2{font-size:19px}
  #view-game .under-title{font-size:11px}
  #view-game .mission-card{padding:9px 10px;gap:7px;align-items:stretch}
  #view-game .mission-card h3{min-width:70px;font-size:13px;align-self:center}
  #view-game .mini-status{font-size:11px;padding:7px 9px}
  #view-game .mini-status strong{font-size:11px}
  #view-game .mini-status span{font-size:10px}
  #view-game .energy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:6px}
  #view-game .energy-card{padding:7px 8px;min-width:0}
  #view-game .energy-head{font-size:11px;gap:5px;margin-bottom:5px}
  #view-game .energy-bar{height:10px}
  #view-game canvas{height:clamp(180px,46vw,230px)}
  #view-game .battle{padding:8px}
  #view-game .slot{height:38px;min-width:28px;font-size:19px;padding:4px 5px}
  #view-game .mascot-coach{font-size:11px;padding:6px;min-height:39px}
  #view-game .mascot-face{font-size:23px}
  #view-game .hint{font-size:11px;margin:4px 0}
  #view-game .controls .button{padding:9px 8px;font-size:12px}
  #view-game .word-slots{gap:4px;margin:8px 0 4px}
  #view-game .keyboard{gap:5px;margin:8px auto 5px}
  #view-game .key{height:40px;min-width:31px}
  #view-game .feedback{padding:7px;font-size:12px}
  #view-game .power-label small{display:none}
}
@media(max-height:720px) and (min-width:981px){
  #view-game canvas{height:190px}
  #view-game .mission-card ul{font-size:11px}
  #view-game .game-heading{margin:0 0 6px}
  #view-game .power-section{margin:4px auto}
}
@media(prefers-reduced-motion:reduce){
  #view-game .slot,#view-game .energy-bar>span{transition:none}
}