/* ── Design tokens ─────────────────────────────────────── */
:root {
    --bg:            #0c1e32;
    --surface:       #102840;
    --surface-strong: #15324f;
    --text:          #e8f4ff;
    --muted:         #9ec8e8;
    --accent:        #06b6d4;
    --accent-soft:   rgba(6, 182, 212, 0.22);
    --success:       #34d39a;
    --danger:        #f87171;
    --shadow:        0 24px 60px rgba(4, 14, 28, 0.60);
    --coral:         #06b6d4;
    --coral-dim:     rgba(6, 182, 212, 0.18);
}

/* ── Light mode ─────────────────────────────────────────── */
body.light-mode {
    --bg:            #4ea6c4;
    --surface:       #5cb6d4;
    --surface-strong: #78c8e4;
    --text:          #041828;
    --muted:         #0c3450;
    --accent:        #024560;
    --accent-soft:   rgba(2, 69, 96, 0.18);
    --success:       #0d6e35;
    --danger:        #991010;
    --shadow:        0 24px 60px rgba(0, 0, 0, 0.25);
    --coral:         #024560;
    --coral-dim:     rgba(2, 69, 96, 0.16);
    background: linear-gradient(180deg, #42a0c0 0%, #54b0cc 50%, #68c0dc 100%);
    color: var(--text);
}

body.light-mode .typebox {
    background: var(--surface-strong);
    border-color: rgba(2, 69, 96, 0.22);
}
body.light-mode .token           { color: var(--muted); }
body.light-mode .token.correct   { color: var(--success); }
body.light-mode .token.incorrect { color: var(--danger); }

body.light-mode .result-value { color: var(--text) !important; }
body.light-mode .results-grid > div:nth-child(1) .result-value {
    text-shadow: 0 0 24px rgba(2, 69, 96, 0.45);
}
body.light-mode .kb-key-mini {
    background: rgba(200, 236, 248, 0.75);
    border-color: rgba(2, 69, 96, 0.22);
    color: var(--text);
}
body.light-mode .action-panel .controls button:not(.kb-toggle):hover {
    background: rgba(0, 0, 0, 0.06);
}
body.light-mode .duration-change:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06);
}
body.light-mode .user-chip {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(2, 69, 96, 0.28);
}
body.light-mode .premium-feature-list li { text-shadow: none; }
body.light-mode .rain-health-bar         { background: rgba(0, 0, 0, 0.10); }
body.light-mode .sw { filter: brightness(1.3) saturate(0.7); opacity: 0.22; }
body.light-mode .action-panel            { opacity: 0.70; }

body.light-mode .challenge-row[data-locked="true"]::after,
body.light-mode .login-area-tab[data-locked="true"]::after,
body.light-mode .diff-btn--locked::after,
body.light-mode .premium-feature-list li[data-tooltip]::after {
    background: rgba(220, 244, 254, 0.97);
    color: var(--text);
    border-color: rgba(2, 69, 96, 0.28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    text-shadow: none;
}
body.light-mode .keyboard {
    background: #4aa2be;
    border-color: rgba(2, 69, 96, 0.22);
    box-shadow: inset 0 2px 5px rgba(0, 20, 50, 0.16);
}
body.light-mode .key {
    background: #cce8f4;
    border-color: rgba(2, 69, 96, 0.20);
    box-shadow: 0 2px 0 rgba(2, 30, 60, 0.24);
}
body.light-mode .key-he { color: var(--text); }
body.light-mode .key-en { color: var(--muted); }

/* ── Race & Rain: dark containers keep dark-mode token values ────────────
   These elements have hard-coded dark backgrounds. Re-scoping the variables
   here means every child (text, icons, chips) inherits the right colours
   without touching each individual rule.                                 */
body.light-mode .race-overlay,
body.light-mode .race-track {
    --text:           #e8f4ff;
    --muted:          #9ec8e8;
    --accent:         #06b6d4;
    --accent-soft:    rgba(51, 151, 168, 0.22);
    --success:        #34d39a;
    --danger:         #f87171;
    --surface:        #102840;
    --surface-strong: #15324f;
    --coral:          #06b6d4;
    --coral-dim:      rgba(6, 182, 212, 0.18);
}

/* Rain game: the HUD sits above the field in light-mode context (fine),
   but the dark overlay panels (intro, gameover) and the in-game restart
   button all need light text.                                             */
body.light-mode .rain-intro,
body.light-mode .rain-gameover,
body.light-mode .rain-field {
    --text:    #e8f4ff;
    --muted:   #9ec8e8;
    --accent:  #06b6d4;
    --success: #34d39a;
    --danger:  #f87171;
}

/* ── Race: replace near-black backgrounds with deep ocean blue ── */
body.light-mode .race-overlay {
    background: linear-gradient(180deg,
        rgba(15, 88, 148, 0.94) 0%,
        rgba(10, 66, 122, 0.96) 70%,
        rgba(2, 42, 88,  0.97) 100%);
}
body.light-mode .race-track {
    background: linear-gradient(180deg, rgba(2, 55, 95, 0.88) 0%, rgba(1, 44, 80, 0.85) 100%);
    border-color: rgba(6, 182, 212, 0.40);
}
body.light-mode .race-countdown {
    background: rgba(2, 48, 88, 0.88);
}
body.light-mode .race-player-chip {
    background: rgba(6, 182, 212, 0.16);
    border-color: rgba(6, 182, 212, 0.32);
}
body.light-mode .race-player-chip.chip-mine {
    background: rgba(6, 182, 212, 0.30);
    border-color: rgba(6, 182, 212, 0.60);
}

/* ── Rain: replace near-black backgrounds with deep ocean blue ── */
body.light-mode .rain-field {
    background: linear-gradient(180deg, rgba(2, 50, 95,  0.72) 0%, rgba(1, 38, 78, 0.82) 100%);
    border-color: rgba(6, 182, 212, 0.30);
}
body.light-mode .rain-intro {
    background: rgba(33, 107, 172, 0.93);
}
body.light-mode .rain-gameover {
    background: rgba(2, 52, 98, 0.92);
}

/* ── Modals: replace near-black backdrop with deep ocean blue in light mode ── */
body.light-mode .results-modal,
body.light-mode .leaderboard-modal,
body.light-mode .bug-modal,
body.light-mode .rr-modal-wrap {
    background: rgba(2, 55, 105, 0.78);
}

/* ── Shadows: replace dark-mode near-black shadows with sea-blue tints ─────
   Dark mode shadows use rgba(4,14,28,…) which become harsh brown-grey blobs
   on a light sea-blue surface. Replace with soft ocean-blue shadows.       */

/* Button hover shadow */
body.light-mode button:hover {
    box-shadow: 0 6px 20px rgba(2, 60, 110, 0.22);
}

/* Modal / card lift shadows — need !important to beat the hardcoded values */
body.light-mode .results-card,
body.light-mode .leaderboard-card,
body.light-mode .bug-card,
body.light-mode .rr-card {
    box-shadow: 0 20px 50px rgba(2, 45, 90, 0.28),
                0 0 0 1px rgba(6, 182, 212, 0.14) !important;
}

/* Race join / action buttons — replace near-black glow with cyan */
body.light-mode .race-join-btn {
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.40);
}
body.light-mode .race-join-btn:hover {
    box-shadow: 0 8px 28px rgba(6, 182, 212, 0.55);
}

/* Keyboard key press — stay light */
body.light-mode .key {
    box-shadow: 0 2px 0 rgba(2, 30, 60, 0.22);
}

/* ── Reset ──────────────────────────────────────────────── */
*        { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html     { scroll-behavior: smooth; background: #040e1c; }

body {
    min-height: 100vh;
    font-family: 'Space Grotesk', 'Rubik', sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #051020 0%, #0a1e38 50%, #0d2445 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px 24px;
    overflow-x: hidden;
    transition: background 0.55s ease, color 0.35s ease;
}

/* Smooth colour transition on key surfaces when toggling light/dark */
.typebox, .leaderboard-card, .results-card, .bug-card, .rr-modal-card,
.top-bar, .mode-tab, .action-panel, .timer-panel, .diff-btn,
.score-row, .page-shell {
    transition: background-color 0.45s ease, background 0.45s ease,
                color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}

/* ── Global button base ─────────────────────────────────── */
button {
    cursor: pointer;
    border: none;
    border-radius: 20px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Rubik', sans-serif;
    letter-spacing: 0.03em;
    background: var(--accent);
    color: #021428;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }
button.secondary { background: transparent; color: var(--muted); border: none; }
button:hover     { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(10, 60, 150, 0.35); }

/* ── Utility ─────────────────────────────────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hint { margin-top: 12px; color: var(--muted); font-size: 0.96rem; text-align: center; }