/* A persistent, accessible colour mode layered over the existing page designs. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-left: 6px;
    border: 1px solid #dce4f2;
    border-radius: 12px;
    background: #fff;
    color: #314264;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: #b9b2f5; color: #533de3; }
.theme-toggle svg { width: 21px; height: 21px; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }

:root[data-theme="dark"] body,
:root[data-theme="dark"] body.home-page {
    --c-bg: #0d1427;
    --c-surface: #18243a;
    --c-text: #eef2ff;
    --c-text-muted: #afbdd6;
    --c-purple: #a895ff;
    --c-purple-soft: #292349;
    --c-blue: #6fbcff;
    --c-blue-soft: #183653;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .16);
    --shadow-card: 0 16px 40px rgba(0, 0, 0, .2);
    background: radial-gradient(circle at 77% 8%, rgba(77, 66, 165, .24), transparent 34%),
                radial-gradient(circle at 10% 34%, rgba(28, 116, 183, .12), transparent 33%), #0d1427;
    color: var(--c-text);
}
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .home-page .site-header {
    background: rgba(14, 22, 41, .92);
    border-bottom-color: #293750;
    backdrop-filter: blur(16px);
}
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .home-page .logo { color: #f3f5ff; }
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .site-nav .nav-link-assessment,
:root[data-theme="dark"] .nav-categories > summary,
:root[data-theme="dark"] .home-page .nav-link,
:root[data-theme="dark"] .home-page .site-nav .nav-link-assessment { color: #b9c6e2 !important; }
:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .site-nav .nav-link-assessment:hover,
:root[data-theme="dark"] .nav-categories > summary:hover { background: #28284e; color: #ded7ff !important; }
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .nav-toggle,
:root[data-theme="dark"] .lang-current,
:root[data-theme="dark"] .home-page .lang-current {
    background: #1b2942;
    border-color: #34435e;
    color: #e4eaff;
}
:root[data-theme="dark"] .theme-toggle:hover { background: #302c60; border-color: #6859bd; }
:root[data-theme="dark"] .nav-toggle span { background: #dbe5ff; }
:root[data-theme="dark"] .lang-menu,
:root[data-theme="dark"] .nav-categories-menu,
:root[data-theme="dark"] .site-nav.open {
    background: #19253b;
    border-color: #34435e;
    box-shadow: 0 18px 40px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .lang-option { color: #d5e0f5; }
:root[data-theme="dark"] .lang-option:hover,
:root[data-theme="dark"] .lang-option.active { background: #292b52; }
:root[data-theme="dark"] .header-cta { background: #6551dc; box-shadow: none; }
:root[data-theme="dark"] .header-cta:hover { background: #7866eb; }
:root[data-theme="dark"] .site-footer { background: #101b30; border-top-color: #293750; }
:root[data-theme="dark"] .footer-categories { border-bottom-color: #293750; }
:root[data-theme="dark"] .footer-categories a,
:root[data-theme="dark"] .footer-nav a { color: #b2c0dc; }
:root[data-theme="dark"] .footer-muted { color: #8f9db7; }

/* Shared cards and content surfaces. */
:root[data-theme="dark"] .game-panel,
:root[data-theme="dark"] .score-badge,
:root[data-theme="dark"] .cv-page .cv-panel,
:root[data-theme="dark"] .content-body,
:root[data-theme="dark"] .guide-card,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .back-link,
:root[data-theme="dark"] .game-card,
:root[data-theme="dark"] .guide-pager-link {
    background: #19263d;
    border-color: #30405c;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    color: #eaf0ff;
}
:root[data-theme="dark"] .game-card:hover,
:root[data-theme="dark"] .guide-card:hover { border-color: #7566c9; }
:root[data-theme="dark"] .game-title,
:root[data-theme="dark"] .content-hero h1,
:root[data-theme="dark"] .guide-card-title,
:root[data-theme="dark"] .game-card-title,
:root[data-theme="dark"] .free-play-title,
:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .cv-hero-title { color: #f1f4ff; }
:root[data-theme="dark"] .game-subtitle,
:root[data-theme="dark"] .content-lead,
:root[data-theme="dark"] .content-muted,
:root[data-theme="dark"] .guide-card-desc,
:root[data-theme="dark"] .guide-card-meta,
:root[data-theme="dark"] .game-card-desc,
:root[data-theme="dark"] .free-play-sub,
:root[data-theme="dark"] .score-badge .label { color: #adbbd6; }
:root[data-theme="dark"] .content-eyebrow,
:root[data-theme="dark"] .back-link,
:root[data-theme="dark"] .game-card-cta { color: #b8aaff; }
:root[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { background-color: #142037; border-color: #3a4b69; color: #f1f4ff; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #93a3c2; }

/* Game states must retain their colour cues without losing text contrast. */
:root[data-theme="dark"] .reaction-zone.state-idle { background: linear-gradient(135deg, #35315f, #252c56); }
:root[data-theme="dark"] .reaction-zone.state-result { background: linear-gradient(135deg, #194b70, #193854); }
:root[data-theme="dark"] .reaction-zone.state-early { background: linear-gradient(135deg, #5a421b, #49341e); }
:root[data-theme="dark"] .reaction-zone.state-idle .reaction-text,
:root[data-theme="dark"] .reaction-zone.state-result .reaction-text,
:root[data-theme="dark"] .reaction-zone.state-early .reaction-text,
:root[data-theme="dark"] .reaction-zone.state-idle .reaction-sub,
:root[data-theme="dark"] .reaction-zone.state-result .reaction-sub,
:root[data-theme="dark"] .reaction-zone.state-early .reaction-sub { color: #f1f4ff; }
:root[data-theme="dark"] .cps-zone { background: linear-gradient(135deg, #42301f, #33283a); border-color: #b67840; }
:root[data-theme="dark"] .cps-zone:active { background: #503a27; }
:root[data-theme="dark"] .cps-zone-text { color: #ffd2a8; }
:root[data-theme="dark"] .cps-zone-sub { color: #eeb47f; }
:root[data-theme="dark"] .wordle-cell:not(.correct):not(.present):not(.absent),
:root[data-theme="dark"] .key:not(.correct):not(.present):not(.absent),
:root[data-theme="dark"] .schulte-tile:not(.found):not(.error),
:root[data-theme="dark"] .speed-math-btn:not(.flash-correct):not(.flash-wrong),
:root[data-theme="dark"] .geo-option:not(.correct):not(.wrong),
:root[data-theme="dark"] .count-option:not(.correct):not(.wrong) {
    background: #263650;
    border-color: #445471;
    color: #eff3ff;
}
:root[data-theme="dark"] .key:not(.correct):not(.present):not(.absent):hover,
:root[data-theme="dark"] .schulte-tile:not(.found):not(.error):hover,
:root[data-theme="dark"] .speed-math-btn:not(.flash-correct):not(.flash-wrong):hover,
:root[data-theme="dark"] .geo-option:not(.correct):not(.wrong):hover { background: #344863; }
:root[data-theme="dark"] .wordle-cell.absent,
:root[data-theme="dark"] .key.absent { background: #46526a; border-color: #46526a; color: #fff; }
:root[data-theme="dark"] .geo-option.correct,
:root[data-theme="dark"] .count-option.correct,
:root[data-theme="dark"] .schulte-tile.found { background: #175041; border-color: #25bc83; color: #baf8df; }
:root[data-theme="dark"] .geo-option.wrong,
:root[data-theme="dark"] .count-option.wrong,
:root[data-theme="dark"] .schulte-tile.error { background: #522b3d !important; border-color: #e55c7c !important; color: #ffd5df !important; }
:root[data-theme="dark"] .matrix-tile:not(.lit):not(.good):not(.bad),
:root[data-theme="dark"] .vm-tile:not(.lit):not(.good):not(.bad) { background: #31405c; box-shadow: inset 0 -4px rgba(0,0,0,.12); }
:root[data-theme="dark"] .vm-tile.lit { background: #e7f2ff; }

/* Home: preserve the existing layout and make each layer legible at night. */
:root[data-theme="dark"] .home-page .assessment-badge { color: #aebaff; }
:root[data-theme="dark"] .home-page .assessment-hero-title { color: #f2f5ff; }
:root[data-theme="dark"] .home-page .assessment-hero-title span {
    background: linear-gradient(100deg, #ab92ff, #83c8ff);
    -webkit-background-clip: text;
    background-clip: text;
}
:root[data-theme="dark"] .home-page .assessment-hero-sub,
:root[data-theme="dark"] .home-page .assessment-hero-meta,
:root[data-theme="dark"] .home-page .home-daily-heading p,
:root[data-theme="dark"] .home-page .home-featured-heading p,
:root[data-theme="dark"] .home-page .free-play-sub { color: #b2c0da; }
:root[data-theme="dark"] .home-page .home-orbit { border-color: rgba(143, 181, 255, .25); }
:root[data-theme="dark"] .home-page .home-hero-visual::before {
    background: radial-gradient(circle, rgba(85, 75, 227, .3), rgba(31, 115, 210, .1) 48%, transparent 72%);
}
:root[data-theme="dark"] .home-page .home-brain { filter: drop-shadow(0 28px 42px rgba(77, 80, 234, .28)); }
:root[data-theme="dark"] .home-page .home-daily,
:root[data-theme="dark"] .home-page .featured-card,
:root[data-theme="dark"] .home-page .game-card {
    background: #19263d;
    border-color: #30405c;
    box-shadow: 0 14px 32px rgba(0,0,0,.15);
}
:root[data-theme="dark"] .home-page .home-daily h2,
:root[data-theme="dark"] .home-page .home-daily-copy h3,
:root[data-theme="dark"] .home-page .home-featured-heading h2,
:root[data-theme="dark"] .home-page .featured-card-copy strong,
:root[data-theme="dark"] .home-page .category-title,
:root[data-theme="dark"] .home-page .game-card-title { color: #f1f4ff; }
:root[data-theme="dark"] .home-page .home-daily-copy p,
:root[data-theme="dark"] .home-page .featured-card-copy small,
:root[data-theme="dark"] .home-page .game-card-desc { color: #b2c0da; }
:root[data-theme="dark"] .home-page .challenge-board { background: #273550; border-color: #3b4c69; }
:root[data-theme="dark"] .home-page .challenge-board-cell,
:root[data-theme="dark"] .home-page .challenge-option-art { background: #21314b; }
:root[data-theme="dark"] .home-page .challenge-question,
:root[data-theme="dark"] .home-page .challenge-option { color: #e1eaff; }
:root[data-theme="dark"] .home-page .pattern-shape i { background: #becce7; }
:root[data-theme="dark"] .home-page .pattern-shape.shape-0 i:nth-child(4),
:root[data-theme="dark"] .home-page .pattern-shape.shape-1 i:nth-child(3),
:root[data-theme="dark"] .home-page .pattern-shape.shape-2 i:nth-child(1),
:root[data-theme="dark"] .home-page .pattern-shape.shape-3 i:nth-child(2) { background: #50617e; }
:root[data-theme="dark"] .home-page .challenge-option:hover .challenge-option-art { background: #30415d; }
:root[data-theme="dark"] .home-page .challenge-option input:checked + .challenge-option-art { background: #35305c; border-color: #a590ff; }
:root[data-theme="dark"] .home-page .challenge-option.is-correct .challenge-option-art { background: #17493f; }
:root[data-theme="dark"] .home-page .challenge-option.is-incorrect .challenge-option-art { background: #522b3d; }
:root[data-theme="dark"] .home-page .challenge-feedback.is-correct { color: #5ee5b7; }
:root[data-theme="dark"] .home-page .challenge-feedback.is-incorrect { color: #ffa4b5; }
:root[data-theme="dark"] .home-page .daily-guide-link,
:root[data-theme="dark"] .home-page .featured-arrow { color: #bcaeff; }
:root[data-theme="dark"] .home-page .featured-card:hover,
:root[data-theme="dark"] .home-page .game-card:hover { border-color: #7566c9; box-shadow: 0 18px 35px rgba(0,0,0,.23); }
:root[data-theme="dark"] .home-page .icon-blue { background: #183e65; color: #73bfff; }
:root[data-theme="dark"] .home-page .icon-purple { background: #352660; color: #bea5ff; }
:root[data-theme="dark"] .home-page .icon-orange { background: #49351f; color: #ffbc68; }
:root[data-theme="dark"] .home-page .icon-green { background: #173f37; color: #65ddb0; }
:root[data-theme="dark"] .home-page .icon-pink { background: #4d2742; color: #ff9ccc; }
:root[data-theme="dark"] .home-page .icon-rose { background: #4d283b; color: #ff9bb2; }
:root[data-theme="dark"] .home-page .icon-royal { background: #213867; color: #9db9ff; }
:root[data-theme="dark"] .home-page .icon-cyan { background: #174456; color: #78def7; }
:root[data-theme="dark"] .home-page .icon-multi { background: #39315d; color: #c7b3ff; }
:root[data-theme="dark"] .home-page .game-card-cta { background: #2c2a53; color: #c7bbff; }
:root[data-theme="dark"] .home-page .category-emoji { background: #27324c; border-radius: 13px; }

.home-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.home-page .home-orbit-token svg,
.home-page .featured-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.home-page .home-orbit-token svg { width: 34px; height: 34px; }
@media (max-width: 600px) {
    .home-page .home-orbit-token svg { width: 25px; height: 25px; }
}

@media (max-width: 850px) {
    .theme-toggle { order: -1; width: 38px; height: 38px; margin-left: 0; }
}
@media (max-width: 420px) {
    .header-inner { gap: 6px; }
    .header-actions { gap: 4px; }
    .logo, .home-page .logo { font-size: 1rem; }
    .logo-emoji, .home-page .logo-emoji { width: 31px; height: 31px; }
    .nav-toggle { width: 38px; height: 38px; }
    .lang-current { padding: 6px 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}