/* ============================================================ BrainKong — Dark mode (v2.2) Activated by data-theme="dark" on (set by theme.js). Overrides the core tokens plus the common hardcoded light surfaces/borders/text across the app's shared components. ============================================================ */ :root[data-theme="dark"]{ --bg:#0b1310; --surface:#131f19; --surface-soft:#18261f; --text:#e9f1ec; --muted:#94a99e; --border:#25352c; --brand:#37cf8b; --brand-dark:#2bb377; --accent:#173026; --good:#3fd07f; --bad:#f0605e; --warning:#f2ab3c; --shadow:0 14px 34px rgba(0,0,0,.55); --nav:rgba(15,26,20,.72); --bk-ink:#e9f1ec; --bk-shadow-card:0 2px 4px rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.7); --bk-shadow-sm:0 1px 2px rgba(0,0,0,.4); color-scheme:dark; } /* page grounds (override the light auras) */ :root[data-theme="dark"] body, :root[data-theme="dark"] body.home-page{ background: radial-gradient(1150px 620px at 50% -14%, #123024 0%, rgba(18,48,36,0) 60%), radial-gradient(760px 460px at 94% 3%, #2a2413 0%, rgba(42,36,19,0) 52%), #0b1310; } /* header */ :root[data-theme="dark"] .site-header{background:rgba(15,26,20,.74);border-bottom-color:#20302799} /* generic surfaces */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .brainkong-proof-card, :root[data-theme="dark"] .mode-card, :root[data-theme="dark"] .result-panel{background:var(--surface);border-color:var(--border);color:var(--text)} /* menu + answer tiles */ :root[data-theme="dark"] .family-game-card, :root[data-theme="dark"] .mode-btn, :root[data-theme="dark"] .special-mode-btn, :root[data-theme="dark"] .practice-action, :root[data-theme="dark"] .typing-choice, :root[data-theme="dark"] .mc-choice, :root[data-theme="dark"] .brainkong-proof-choice, :root[data-theme="dark"] .special-summary, :root[data-theme="dark"] .scorebox, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .result-box, :root[data-theme="dark"] .stat-pill, :root[data-theme="dark"] .meta-tag, :root[data-theme="dark"] .best-chip{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .family-game-card small, :root[data-theme="dark"] .special-mode-btn small, :root[data-theme="dark"] .practice-action small, :root[data-theme="dark"] .mode-btn small{color:var(--muted)} /* hover states */ :root[data-theme="dark"] .family-game-card:hover, :root[data-theme="dark"] .mode-btn:hover, :root[data-theme="dark"] .special-mode-btn:hover, :root[data-theme="dark"] .practice-action:hover, :root[data-theme="dark"] .typing-choice:hover:not(:disabled), :root[data-theme="dark"] .mc-choice:hover:not(:disabled), :root[data-theme="dark"] .brainkong-proof-choice:hover:not(:disabled){background:#1b2c23;border-color:var(--brand)} :root[data-theme="dark"] .mode-btn.active{background:#16342450;border-color:var(--brand)} /* choice letter markers */ :root[data-theme="dark"] .mc-marker, :root[data-theme="dark"] .brainkong-choice-marker{background:#1e2f26;color:var(--brand);box-shadow:inset 0 0 0 1px rgba(55,207,139,.12)} /* the sentence-to-fix + inputs */ :root[data-theme="dark"] .brainkong-proof-sentence, :root[data-theme="dark"] .game-challenge, :root[data-theme="dark"] .sentence{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .answer-input, :root[data-theme="dark"] .brainkong-proof-input{background:#0f1a15;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .answer-input::placeholder, :root[data-theme="dark"] .brainkong-proof-input::placeholder{color:#6f857a} /* correct / wrong tiles in dark */ :root[data-theme="dark"] .mc-choice.is-correct, :root[data-theme="dark"] .typing-choice.correct, :root[data-theme="dark"] .brainkong-proof-choice.is-correct{background:#123526;border-color:#3f9f77;color:#c6f0da} :root[data-theme="dark"] .mc-choice.is-correct .mc-marker, :root[data-theme="dark"] .brainkong-proof-choice.is-correct .brainkong-choice-marker{background:#2e7c5c;color:#fff} :root[data-theme="dark"] .mc-choice.is-wrong, :root[data-theme="dark"] .typing-choice.wrong, :root[data-theme="dark"] .brainkong-proof-choice.is-wrong{background:#33191a;border-color:#b25757;color:#f4c9c9} :root[data-theme="dark"] .mc-choice.is-wrong .mc-marker, :root[data-theme="dark"] .brainkong-proof-choice.is-wrong .brainkong-choice-marker{background:#a84444;color:#fff} :root[data-theme="dark"] .mc-choice.is-correct::after, :root[data-theme="dark"] .brainkong-proof-choice.is-correct::after{color:#43d78f} :root[data-theme="dark"] .mc-choice.is-wrong::after, :root[data-theme="dark"] .brainkong-proof-choice.is-wrong::after{color:#f0807e} /* secondary / ghost buttons */ :root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .itl-music-toggle, :root[data-theme="dark"] .game-switch-btn, :root[data-theme="dark"] .surprise-btn{background:#17251e;border-color:var(--border);color:var(--text)} /* feedback + verdict */ :root[data-theme="dark"] .feedback.good, :root[data-theme="dark"] .brainkong-proof-feedback.good{color:#5bd79b} :root[data-theme="dark"] .feedback.bad, :root[data-theme="dark"] .brainkong-proof-feedback.bad{color:#f2a17c} :root[data-theme="dark"] .brainkong-proof-result{background:linear-gradient(180deg,#122a20,#131f19);border-color:#2f5f4a} :root[data-theme="dark"] .brainkong-proof-next{background:#15281f;border-color:#2c5842} /* progress track + ticks */ :root[data-theme="dark"] .progress-track, :root[data-theme="dark"] .track{background:#1a2a22;border-color:var(--border)} :root[data-theme="dark"] #write-it-right .progress-track::after{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1.5px),rgba(255,255,255,.10) calc(10% - 1.5px),rgba(255,255,255,.10) 10%)} /* mystery/event banner */ :root[data-theme="dark"] .event-banner{background:#1c2436;color:#cdd6ef} /* footer + links */ :root[data-theme="dark"] .site-footer{background:transparent;border-top-color:var(--border);color:var(--muted)} :root[data-theme="dark"] a.nav-primary, :root[data-theme="dark"] a.nav-secondary{color:var(--muted)} :root[data-theme="dark"] a.nav-primary:hover{color:var(--text)} /* games catalog: family container cards + headings */ :root[data-theme="dark"] .game-family{background:var(--surface);border-color:var(--border)} :root[data-theme="dark"] .family-head h2{color:var(--text)} :root[data-theme="dark"] .family-head p, :root[data-theme="dark"] .games-hub-head .lead, :root[data-theme="dark"] .progress-head .lead{color:var(--muted)} /* injected header controls: XP/score pills + audio control button */ :root[data-theme="dark"] .itl-player-stat{background:#16241d;border:1px solid var(--border);color:var(--text)} :root[data-theme="dark"] .itl-player-stat span{color:var(--muted)} :root[data-theme="dark"] .audio-control-button, :root[data-theme="dark"] .audio-control{background:var(--surface);border-color:var(--border);color:var(--text)} /* home hero: light ink so the headline + card title stay readable in dark */ :root[data-theme="dark"] body.home-page{--bk-ink:#e9f1ec} :root[data-theme="dark"] .home-page .brainkong-first-sub{color:#9fb3a8} :root[data-theme="dark"] .home-page .brainkong-proof-head strong{color:var(--text)} /* generic hub/progress cards + section headings on interior pages */ :root[data-theme="dark"] .progress-section, :root[data-theme="dark"] .progression-rank-card, :root[data-theme="dark"] .progress-nested-section, :root[data-theme="dark"] .seasonal-card, :root[data-theme="dark"] .hub-progress, :root[data-theme="dark"] .today-hub{background:var(--surface);border-color:var(--border);color:var(--text)} /* ============================================================ Brain-game boards in dark mode (per-game surfaces) ============================================================ */ /* display / prompt panels that show the stimulus */ :root[data-theme="dark"] .switch-rule-card, :root[data-theme="dark"] .switch-stimulus, :root[data-theme="dark"] .pattern-sequence, :root[data-theme="dark"] .recall-memory, :root[data-theme="dark"] .memory-scene, :root[data-theme="dark"] .ladder-current, :root[data-theme="dark"] .grid-clue-card, :root[data-theme="dark"] .grid-assist-panel, :root[data-theme="dark"] .distractor-instruction, :root[data-theme="dark"] .typing-target, :root[data-theme="dark"] .connection-selection-status{ background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .switch-stimulus, :root[data-theme="dark"] .switch-stimulus *, :root[data-theme="dark"] .pattern-sequence *, :root[data-theme="dark"] .recall-memory *, :root[data-theme="dark"] .memory-scene *, :root[data-theme="dark"] .typing-target *{color:var(--text)} /* interactive tiles / choices / cells / buttons */ :root[data-theme="dark"] .switch-choice, :root[data-theme="dark"] .v2-choice, :root[data-theme="dark"] .brain-choice, :root[data-theme="dark"] .grid-cell, :root[data-theme="dark"] .grid-word-btn, :root[data-theme="dark"] .distractor-cell, :root[data-theme="dark"] .memory-token, :root[data-theme="dark"] .connection-word, :root[data-theme="dark"] .bk-feedback-cta{ background:#17251e;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .switch-choice:hover:not(:disabled), :root[data-theme="dark"] .v2-choice:hover:not(:disabled), :root[data-theme="dark"] .brain-choice:hover:not(:disabled), :root[data-theme="dark"] .grid-word-btn:hover:not(:disabled), :root[data-theme="dark"] .distractor-cell:hover:not(:disabled), :root[data-theme="dark"] .connection-word:hover:not(:disabled){background:#1c2c23;border-color:var(--brand)} :root[data-theme="dark"] .switch-choice, :root[data-theme="dark"] .v2-choice, :root[data-theme="dark"] .brain-choice{color:var(--text)} /* grid cells: keep number/letter legible */ :root[data-theme="dark"] .grid-cell, :root[data-theme="dark"] .grid-cell *{color:var(--text)} :root[data-theme="dark"] .grid-cell.given, :root[data-theme="dark"] .grid-cell.prefilled{background:#0f1a15;color:var(--muted)} /* pills / badges / strips */ :root[data-theme="dark"] .switch-timer-pill, :root[data-theme="dark"] .v2-level-badge, :root[data-theme="dark"] .grid-difficulty-strip{background:#16241d;border-color:var(--border);color:var(--text)} /* typing input */ :root[data-theme="dark"] .typing-input{background:#0f1a15;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .typing-input::placeholder{color:#6f857a} /* correct / wrong states shared by brain games */ :root[data-theme="dark"] .switch-choice.correct, :root[data-theme="dark"] .v2-choice.correct, :root[data-theme="dark"] .brain-choice.correct, :root[data-theme="dark"] .grid-word-btn.correct{background:#123526;border-color:#3f9f77;color:#c6f0da} :root[data-theme="dark"] .switch-choice.wrong, :root[data-theme="dark"] .v2-choice.wrong, :root[data-theme="dark"] .brain-choice.wrong, :root[data-theme="dark"] .grid-word-btn.wrong{background:#33191a;border-color:#b25757;color:#f4c9c9} /* brain-game live stat pills (Score / streak / lives / timer) */ :root[data-theme="dark"] .v2-live-stats span, :root[data-theme="dark"] .pattern-sequence span, :root[data-theme="dark"] .switch-live-stats span, :root[data-theme="dark"] .switch-brief-stats span, :root[data-theme="dark"] .grid-live-stats span, :root[data-theme="dark"] .grid-game-stats span, :root[data-theme="dark"] .grid-stats span, :root[data-theme="dark"] .typing-live-stats span, :root[data-theme="dark"] .brain-stage-stats span, :root[data-theme="dark"] .game-stats span, :root[data-theme="dark"] .mini-stats span, :root[data-theme="dark"] .bk-return-stats span{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .v2-preview-grid > div{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .v2-preview-grid > div *{color:var(--text)} /* ============================================================ Returning-player home, Progress page + dashboards (comprehensive sweep — every card/strip/pill that was white) ============================================================ */ :root[data-theme="dark"] .achievement-card, :root[data-theme="dark"] .bk-goal-check, :root[data-theme="dark"] .bk-goal-row, :root[data-theme="dark"] .bk-ladder-badge, :root[data-theme="dark"] .bk-quick-card, :root[data-theme="dark"] .bk-return-strip, :root[data-theme="dark"] .bk-return-strip-card, :root[data-theme="dark"] .bk-xp-pill, :root[data-theme="dark"] .habit-item, :root[data-theme="dark"] .mini-progress, :root[data-theme="dark"] .mission-bar, :root[data-theme="dark"] .mission-card, :root[data-theme="dark"] .record-box, :root[data-theme="dark"] .seasonal-badge, :root[data-theme="dark"] .seasonal-goal, :root[data-theme="dark"] .seasonal-progress-bar, :root[data-theme="dark"] .surprise-me-strip, :root[data-theme="dark"] .unlock-card, :root[data-theme="dark"] .v2-progress-card{ background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .achievement-card *, :root[data-theme="dark"] .bk-goal-row *, :root[data-theme="dark"] .bk-quick-card *, :root[data-theme="dark"] .bk-return-strip-card *, :root[data-theme="dark"] .habit-item *, :root[data-theme="dark"] .mission-card *, :root[data-theme="dark"] .record-box *, :root[data-theme="dark"] .seasonal-goal *, :root[data-theme="dark"] .unlock-card *, :root[data-theme="dark"] .v2-progress-card *{color:var(--text)} :root[data-theme="dark"] .achievement-card small, :root[data-theme="dark"] .bk-goal-row small, :root[data-theme="dark"] .bk-quick-card small, :root[data-theme="dark"] .bk-return-strip-card small, :root[data-theme="dark"] .habit-item small, :root[data-theme="dark"] .mission-card small, :root[data-theme="dark"] .record-box small, :root[data-theme="dark"] .unlock-card small, :root[data-theme="dark"] .v2-progress-card small, :root[data-theme="dark"] .achievement-card .muted, :root[data-theme="dark"] .record-box .muted{color:var(--muted)} /* filled portions of progress bars keep the brand fill */ :root[data-theme="dark"] .mini-progress > i, :root[data-theme="dark"] .mini-progress > span, :root[data-theme="dark"] .mission-bar > i, :root[data-theme="dark"] .mission-bar > span, :root[data-theme="dark"] .seasonal-progress-bar > i, :root[data-theme="dark"] .seasonal-progress-bar > span{background:var(--brand)} /* locked achievement/unlock cards read dimmer */ :root[data-theme="dark"] .achievement-card.locked, :root[data-theme="dark"] .unlock-card.locked{background:#101a15;border-color:#1e2c24} :root[data-theme="dark"] .achievement-card.locked *, :root[data-theme="dark"] .unlock-card.locked *{color:var(--muted)} /* pills/badges keep the brand-tinted marker */ :root[data-theme="dark"] .bk-xp-pill, :root[data-theme="dark"] .bk-ladder-badge, :root[data-theme="dark"] .seasonal-badge{background:#1e2f26;color:var(--brand);border-color:var(--border)} /* Feedback form: rating chips, dropdowns, text fields, textarea */ :root[data-theme="dark"] .rating-row label span{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .rating-row label input:checked + span{background:#123526;border-color:#3f9f77} :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="number"]{background:#0f1a15;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] select option{background:#131f19;color:var(--text)} :root[data-theme="dark"] textarea::placeholder, :root[data-theme="dark"] input::placeholder{color:#6f857a} :root[data-theme="dark"] .feedback-fieldset{border-color:var(--border)} :root[data-theme="dark"] .feedback-fieldset legend{color:var(--text)} /* How-to-play: game-family explainer cards (bare divs, white) */ :root[data-theme="dark"] .howto-family-grid > div{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .howto-family-grid > div strong{color:var(--text)} :root[data-theme="dark"] .howto-family-grid > div span{color:var(--muted)} /* Progress "records to beat" stat chips (bare spans, background:white) */ :root[data-theme="dark"] .v2-progress-records span{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .v2-progress-records b{color:var(--text)} :root[data-theme="dark"] .v2-progress-records small{color:var(--muted)} /* Today page daily-task cards (bare inside .today-tasks li) */ :root[data-theme="dark"] .today-tasks li a{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .today-tasks li a:hover{border-color:var(--brand);background:#1b2c23} :root[data-theme="dark"] .today-tasks li.done a{background:#123526;border-color:#2f6f57} :root[data-theme="dark"] .today-tasks li.gotd:not(.done) a{background:#2a2412;border-color:#6b5a20} /* Brain Gauntlet surfaces (all phases were hardcoded #fff) */ :root[data-theme="dark"] .gauntlet-pattern, :root[data-theme="dark"] .gauntlet-type-phrase, :root[data-theme="dark"] .gauntlet-hunt-cell{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .gauntlet-banner{background:#2a2412;border-color:#6b5a20;color:#f0d9a0} :root[data-theme="dark"] .gauntlet-language-bad{background:#33191a;border-color:#7a3b3b;color:#f4c9c9} :root[data-theme="dark"] .gauntlet-reveal{background:#123526;border-color:#2f6f57;color:#c6f0da} :root[data-theme="dark"] .gauntlet-hunt-cell:hover:not(:disabled){background:#1c2c23;border-color:var(--brand)} :root[data-theme="dark"] .gauntlet-type-input{background:#0f1a15;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .gauntlet-type-input::placeholder{color:#6f857a} /* Brain Switch timer pill uses !important in base CSS — must match with !important */ :root[data-theme="dark"] .switch-timer-pill{background:#16241d!important;border-color:var(--border)!important;color:var(--text)} /* streak-saver mini pill */ :root[data-theme="dark"] .mini-saver{background:#16243a;border-color:#2c4a6b;color:#9ec3ea} /* misspelled-word highlight (spelling word-only mode) in dark */ :root[data-theme="dark"] .game-challenge .bk-misspell{text-decoration-color:#f0855f;color:#ffb599} /* post-game feedback card (whole card clickable) */ :root[data-theme="dark"] .itlence-feedback-result{background:#16241d;border-color:var(--border);color:var(--text)} :root[data-theme="dark"] .itlence-feedback-result strong{color:var(--text)} :root[data-theme="dark"] .itlence-feedback-result p{color:var(--muted)} :root[data-theme="dark"] .itlence-feedback-result:hover, :root[data-theme="dark"] .itlence-feedback-result:focus-visible{background:#1b2c23;border-color:var(--brand);box-shadow:0 14px 28px -16px rgba(0,0,0,.6)} :root[data-theme="dark"] .itlence-feedback-result .itlence-feedback-cue{background:var(--brand);color:#04120d} /* theme toggle button */ .bk-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;box-shadow:var(--bk-shadow-sm);transition:transform .14s ease,color .14s ease,border-color .14s ease} .bk-theme-toggle:hover{transform:translateY(-1px);color:var(--brand);border-color:var(--brand)} .bk-theme-toggle:focus-visible{outline:3px solid var(--warning);outline-offset:2px}