/* ═══════════════════════════════════════════
   MIDDLE SCHOOL THEME OVERRIDES (grades 6–8)
   iOS / web first — Android uses elementary grades only for now.
═══════════════════════════════════════════ */

/* ─── CIRCUIT / MATH ──────────────────────── */
body.theme-ms-circuit { background: #0a0e18; }
body.theme-ms-circuit #screen-title,
body.theme-ms-circuit #screen-mode,
body.theme-ms-circuit #screen-stats,
body.theme-ms-circuit #screen-summary,
body.theme-ms-circuit #screen-question,
body.theme-ms-circuit #screen-levelup { background: linear-gradient(180deg, #121a2e 0%, #080c14 100%); }
body.theme-ms-circuit #screen-levelup { background: radial-gradient(circle at 50% 35%, #1a2848 0%, #080c14 70%); }
body.theme-ms-circuit .mc-panel { background: #0c1220; border-color: #1e3050; box-shadow: inset -4px -4px 0 #060810, inset 4px 4px 0 #243858; }
body.theme-ms-circuit .screen-header, body.theme-ms-circuit .hud { background: #060810; }
body.theme-ms-circuit .xp-bar-fill { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
body.theme-ms-circuit .xp-label, body.theme-ms-circuit .hud-value, body.theme-ms-circuit .hud-streak,
body.theme-ms-circuit .section-title, body.theme-ms-circuit .mode-name { color: #80deea; }
body.theme-ms-circuit .logo-block { background: #1565c0; }
body.theme-ms-circuit .mode-card { background: #0a1020; border-color: #1e3050; }
body.theme-ms-circuit .mode-card.selected { border-color: #00e5ff; box-shadow: 0 0 12px #00e5ff; }
body.theme-ms-circuit .diff-btn.active { background: #0d2848; border-color: #00e5ff; }
body.theme-ms-circuit .hint-text { background: #060810; border-color: #00e5ff; color: #80deea; }

/* ─── NEON GRID / MATH ────────────────────── */
body.theme-ms-neon { background: #120818; }
body.theme-ms-neon #screen-title,
body.theme-ms-neon #screen-mode,
body.theme-ms-neon #screen-stats,
body.theme-ms-neon #screen-summary,
body.theme-ms-neon #screen-question,
body.theme-ms-neon #screen-levelup { background: linear-gradient(180deg, #1a0a28 0%, #0a0410 100%); }
body.theme-ms-neon .mc-panel { background: #140820; border-color: #3a1058; box-shadow: inset -4px -4px 0 #080410, inset 4px 4px 0 #502878; }
body.theme-ms-neon .screen-header, body.theme-ms-neon .hud { background: #080410; }
body.theme-ms-neon .xp-bar-fill { background: #ff00ff; box-shadow: 0 0 8px #ff00ff; }
body.theme-ms-neon .xp-label, body.theme-ms-neon .hud-value, body.theme-ms-neon .section-title,
body.theme-ms-neon .mode-name { color: #e040fb; }
body.theme-ms-neon .hud-streak { color: #69f0ae; }
body.theme-ms-neon .logo-block { background: #6a1b9a; }
body.theme-ms-neon .mode-card.selected { border-color: #ff00ff; box-shadow: 0 0 14px #ff00ff; }
body.theme-ms-neon .hint-text { border-color: #ff00ff; color: #f48fb1; }

/* ─── STREET ART / MATH ───────────────────── */
body.theme-ms-street { background: #1a1208; }
body.theme-ms-street #screen-title,
body.theme-ms-street #screen-mode,
body.theme-ms-street #screen-stats,
body.theme-ms-street #screen-summary,
body.theme-ms-street #screen-question,
body.theme-ms-street #screen-levelup { background: linear-gradient(180deg, #2a1808 0%, #120a04 100%); }
body.theme-ms-street .mc-panel { background: #1e1408; border-color: #4a3010; box-shadow: inset -4px -4px 0 #0a0602, inset 4px 4px 0 #6a4820; }
body.theme-ms-street .screen-header, body.theme-ms-street .hud { background: #0a0602; }
body.theme-ms-street .xp-bar-fill { background: #ff6d00; box-shadow: 0 0 8px #ff6d00; }
body.theme-ms-street .xp-label, body.theme-ms-street .hud-value, body.theme-ms-street .section-title,
body.theme-ms-street .mode-name { color: #ffab40; }
body.theme-ms-street .hud-streak { color: #18ffff; }
body.theme-ms-street .logo-block { background: #e65100; }
body.theme-ms-street .mode-card.selected { border-color: #ff6d00; box-shadow: 0 0 12px #ff6d00; }
body.theme-ms-street .hint-text { border-color: #ff6d00; color: #ffcc80; }

/* ─── NEWSROOM / ELA ──────────────────────── */
body.theme-ms-newsroom { background: #1c1c1c; }
body.theme-ms-newsroom #screen-title,
body.theme-ms-newsroom #screen-mode,
body.theme-ms-newsroom #screen-stats,
body.theme-ms-newsroom #screen-summary,
body.theme-ms-newsroom #screen-question,
body.theme-ms-newsroom #screen-levelup { background: linear-gradient(180deg, #2a2a2a 0%, #141414 100%); }
body.theme-ms-newsroom .mc-panel { background: #222222; border-color: #444444; box-shadow: inset -4px -4px 0 #0a0a0a, inset 4px 4px 0 #555555; }
body.theme-ms-newsroom .screen-header, body.theme-ms-newsroom .hud { background: #0e0e0e; }
body.theme-ms-newsroom .xp-bar-fill { background: #ffc107; box-shadow: 0 0 6px #ffc107; }
body.theme-ms-newsroom .xp-label, body.theme-ms-newsroom .hud-value, body.theme-ms-newsroom .section-title,
body.theme-ms-newsroom .mode-name { color: #fff9c4; }
body.theme-ms-newsroom .hud-streak { color: #ef5350; }
body.theme-ms-newsroom .logo-block { background: #424242; }
body.theme-ms-newsroom .mode-card.selected { border-color: #ffc107; box-shadow: 0 0 12px #ffc107; }
body.theme-ms-newsroom .hint-text { border-color: #ffc107; color: #fff9c4; }

/* ─── GRAPHIC NOVEL / ELA ─────────────────── */
body.theme-ms-graphic { background: #1a0828; }
body.theme-ms-graphic #screen-title,
body.theme-ms-graphic #screen-mode,
body.theme-ms-graphic #screen-stats,
body.theme-ms-graphic #screen-summary,
body.theme-ms-graphic #screen-question,
body.theme-ms-graphic #screen-levelup { background: linear-gradient(180deg, #280838 0%, #100418 100%); }
body.theme-ms-graphic .mc-panel { background: #180820; border-color: #401858; box-shadow: inset -4px -4px 0 #080210, inset 4px 4px 0 #602878; }
body.theme-ms-graphic .screen-header, body.theme-ms-graphic .hud { background: #080210; }
body.theme-ms-graphic .xp-bar-fill { background: #ff4081; box-shadow: 0 0 8px #ff4081; }
body.theme-ms-graphic .xp-label, body.theme-ms-graphic .hud-value, body.theme-ms-graphic .section-title,
body.theme-ms-graphic .mode-name { color: #ff80ab; }
body.theme-ms-graphic .hud-streak { color: #ffd740; }
body.theme-ms-graphic .logo-block { background: #880e4f; }
body.theme-ms-graphic .mode-card.selected { border-color: #ff4081; box-shadow: 0 0 14px #ff4081; }
body.theme-ms-graphic .hint-text { border-color: #ff4081; color: #f8bbd0; }

/* ─── DEBATE HALL / ELA ───────────────────── */
body.theme-ms-debate { background: #0a1028; }
body.theme-ms-debate #screen-title,
body.theme-ms-debate #screen-mode,
body.theme-ms-debate #screen-stats,
body.theme-ms-debate #screen-summary,
body.theme-ms-debate #screen-question,
body.theme-ms-debate #screen-levelup { background: linear-gradient(180deg, #101838 0%, #080c18 100%); }
body.theme-ms-debate .mc-panel { background: #0c1428; border-color: #1a2850; box-shadow: inset -4px -4px 0 #060810, inset 4px 4px 0 #283868; }
body.theme-ms-debate .screen-header, body.theme-ms-debate .hud { background: #060810; }
body.theme-ms-debate .xp-bar-fill { background: #c62828; box-shadow: 0 0 6px #c62828; }
body.theme-ms-debate .xp-label, body.theme-ms-debate .hud-value, body.theme-ms-debate .section-title,
body.theme-ms-debate .mode-name { color: #ef9a9a; }
body.theme-ms-debate .hud-streak { color: #90caf9; }
body.theme-ms-debate .logo-block { background: #1a237e; }
body.theme-ms-debate .mode-card.selected { border-color: #c62828; box-shadow: 0 0 12px #c62828; }
body.theme-ms-debate .hint-text { border-color: #c62828; color: #ffcdd2; }

/* ─── CHEMISTRY / SCIENCE ─────────────────── */
body.theme-ms-chemistry { background: #0a1810; }
body.theme-ms-chemistry #screen-title,
body.theme-ms-chemistry #screen-mode,
body.theme-ms-chemistry #screen-stats,
body.theme-ms-chemistry #screen-summary,
body.theme-ms-chemistry #screen-question,
body.theme-ms-chemistry #screen-levelup { background: linear-gradient(180deg, #102818 0%, #081008 100%); }
body.theme-ms-chemistry .mc-panel { background: #0c2014; border-color: #1a4028; box-shadow: inset -4px -4px 0 #060c08, inset 4px 4px 0 #285838; }
body.theme-ms-chemistry .screen-header, body.theme-ms-chemistry .hud { background: #060c08; }
body.theme-ms-chemistry .xp-bar-fill { background: #69f0ae; box-shadow: 0 0 8px #69f0ae; }
body.theme-ms-chemistry .xp-label, body.theme-ms-chemistry .hud-value, body.theme-ms-chemistry .section-title,
body.theme-ms-chemistry .mode-name { color: #a5d6a7; }
body.theme-ms-chemistry .hud-streak { color: #fff176; }
body.theme-ms-chemistry .logo-block { background: #2e7d32; }
body.theme-ms-chemistry .mode-card.selected { border-color: #69f0ae; box-shadow: 0 0 12px #69f0ae; }
body.theme-ms-chemistry .hint-text { border-color: #69f0ae; color: #c8e6c9; }

/* ─── WEATHER LAB / SCIENCE ───────────────── */
body.theme-ms-weather { background: #081828; }
body.theme-ms-weather #screen-title,
body.theme-ms-weather #screen-mode,
body.theme-ms-weather #screen-stats,
body.theme-ms-weather #screen-summary,
body.theme-ms-weather #screen-question,
body.theme-ms-weather #screen-levelup { background: linear-gradient(180deg, #0c2848 0%, #061018 100%); }
body.theme-ms-weather .mc-panel { background: #0a1828; border-color: #1a3858; box-shadow: inset -4px -4px 0 #040810, inset 4px 4px 0 #285878; }
body.theme-ms-weather .screen-header, body.theme-ms-weather .hud { background: #040810; }
body.theme-ms-weather .xp-bar-fill { background: #40c4ff; box-shadow: 0 0 8px #40c4ff; }
body.theme-ms-weather .xp-label, body.theme-ms-weather .hud-value, body.theme-ms-weather .section-title,
body.theme-ms-weather .mode-name { color: #81d4fa; }
body.theme-ms-weather .hud-streak { color: #ffee58; }
body.theme-ms-weather .logo-block { background: #0277bd; }
body.theme-ms-weather .mode-card.selected { border-color: #40c4ff; box-shadow: 0 0 12px #40c4ff; }
body.theme-ms-weather .hint-text { border-color: #40c4ff; color: #b3e5fc; }

/* ─── ENGINEERING / SCIENCE ───────────────── */
body.theme-ms-engineering { background: #141414; }
body.theme-ms-engineering #screen-title,
body.theme-ms-engineering #screen-mode,
body.theme-ms-engineering #screen-stats,
body.theme-ms-engineering #screen-summary,
body.theme-ms-engineering #screen-question,
body.theme-ms-engineering #screen-levelup { background: linear-gradient(180deg, #222222 0%, #0c0c0c 100%); }
body.theme-ms-engineering .mc-panel { background: #1a1a1a; border-color: #333333; box-shadow: inset -4px -4px 0 #080808, inset 4px 4px 0 #484848; }
body.theme-ms-engineering .screen-header, body.theme-ms-engineering .hud { background: #080808; }
body.theme-ms-engineering .xp-bar-fill { background: #ff9100; box-shadow: 0 0 8px #ff9100; }
body.theme-ms-engineering .xp-label, body.theme-ms-engineering .hud-value, body.theme-ms-engineering .section-title,
body.theme-ms-engineering .mode-name { color: #ffcc80; }
body.theme-ms-engineering .hud-streak { color: #b0bec5; }
body.theme-ms-engineering .logo-block { background: #455a64; }
body.theme-ms-engineering .mode-card.selected { border-color: #ff9100; box-shadow: 0 0 12px #ff9100; }
body.theme-ms-engineering .hint-text { border-color: #ff9100; color: #ffe0b2; }