/* ====== Settings bar (difficulty / daily / hardcore) ====== */
        .settings-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 0.4rem; max-width: 560px; }
        .setting-group { display: flex; align-items: center; gap: 0.3rem; background: var(--t-card-bg); border: 1px solid var(--t-card-border); border-radius: 30px; padding: 0.25rem 0.4rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.18); }
        .setting-label { font-family: 'Orbitron', monospace; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-text-muted); padding-left: 0.4rem; }
        .setting-btn { padding: 0.3rem 0.7rem; border: none; border-radius: 20px; font-family: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--t-text); transition: all 0.18s; }
        .setting-btn.active { background: var(--t-btn-grad); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
        .setting-btn:hover:not(.active):not(:disabled) { background: rgba(255,255,255,0.08); }
        .setting-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        /* ====== Stats row (timer / mistakes / hints) ====== */
        .stats-row { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
        .stat { text-align: center; padding: 0.4rem 0.9rem; background: var(--t-card-bg); border: 1px solid var(--t-card-border); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.12); min-width: 78px; }
        .stat-label { font-family: 'Orbitron', monospace; font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--t-text-muted); }
        .stat-value { font-family: 'Orbitron', monospace; font-size: 1rem; font-weight: 700; color: var(--t-text); margin-top: 0.15rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
        .stat-value.warn { color: #ef4444; }

        /* ====== Game container ====== */
        /* No backdrop-filter here: keeps it a clean position:relative ancestor so
           the mobile position:fixed overlays stay viewport-relative. */
        .game-container { --cell-size: clamp(24px, min(calc((100vw - 72px) / 9), calc((100dvh - 360px) / 9)), 64px); position: relative; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0.7rem 4px 0.8rem; }

        /* ====== Sudoku board ====== */
        /* --cell-size fills the available HEIGHT (so the board no longer floats
           as a small grid on desktop) while never overflowing the width budget.
           The dvh term keeps the WHOLE board + numpad on screen with no scroll;
           the desktop budget below subtracts the side rail. Capped at 84px so a
           4K monitor doesn't get a giant board. */
        .sudoku-wrap { display: flex; justify-content: center; align-items: center; margin: 0 auto 0.6rem; position: relative; }
        .sudoku-board { display: grid; grid-template-columns: repeat(9, var(--cell-size)); grid-template-rows: repeat(9, var(--cell-size)); background: linear-gradient(135deg, #1c1b24 0%, #0e0d14 100%); border: 3px solid var(--t-primary); border-radius: 14px; padding: 6px; box-shadow: inset 0 4px 14px rgba(0,0,0,0.55), 0 18px 48px rgba(0,0,0,0.5), 0 0 0 4px rgba(212,160,23,0.12); position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: filter 0.4s ease, opacity 0.4s ease; }
        .sudoku-board.paused .cell { visibility: hidden; }
        .sudoku-board.won { animation: boardWin 1.4s ease-out forwards; }
        @keyframes boardWin {
            0%   { filter: brightness(1) drop-shadow(0 0 0 rgba(252,214,99,0)); }
            50%  { filter: brightness(1.25) drop-shadow(0 0 25px rgba(252,214,99,0.7)); }
            100% { filter: brightness(1.1) drop-shadow(0 0 18px rgba(252,214,99,0.6)); }
        }
        .sudoku-board.shake { animation: boardShake 0.45s; }
        @keyframes boardShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-6px); }
            40% { transform: translateX(6px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(4px); }
        }

        /* ====== Individual cell ====== */
        .cell { width: var(--cell-size); height: var(--cell-size); display: flex; align-items: center; justify-content: center; background: rgba(247,236,210,0.04); color: var(--t-text); font-family: 'Orbitron', monospace; font-size: calc(var(--cell-size) * 0.46); font-weight: 700; cursor: pointer; position: relative; border: 1px solid rgba(212,160,23,0.18); transition: background 0.16s, color 0.16s, transform 0.12s; }
        .cell:hover:not(.given) { background: rgba(212,160,23,0.12); }

        /* Thick borders for 3x3 boxes */
        .cell[data-r="0"] { border-top-width: 2px;    border-top-color: var(--t-primary); }
        .cell[data-r="3"] { border-top-width: 2px;    border-top-color: var(--t-primary); }
        .cell[data-r="6"] { border-top-width: 2px;    border-top-color: var(--t-primary); }
        .cell[data-r="8"] { border-bottom-width: 2px; border-bottom-color: var(--t-primary); }
        .cell[data-c="0"] { border-left-width: 2px;   border-left-color: var(--t-primary); }
        .cell[data-c="3"] { border-left-width: 2px;   border-left-color: var(--t-primary); }
        .cell[data-c="6"] { border-left-width: 2px;   border-left-color: var(--t-primary); }
        .cell[data-c="8"] { border-right-width: 2px;  border-right-color: var(--t-primary); }

        /* Corner rounding so the inner card looks tight */
        .cell[data-r="0"][data-c="0"] { border-top-left-radius: 8px; }
        .cell[data-r="0"][data-c="8"] { border-top-right-radius: 8px; }
        .cell[data-r="8"][data-c="0"] { border-bottom-left-radius: 8px; }
        .cell[data-r="8"][data-c="8"] { border-bottom-right-radius: 8px; }

        /* Cell states */
        .cell.given { color: var(--t-primary); background: rgba(212,160,23,0.05); cursor: default; font-weight: 800; }
        .cell.user { color: #e0eaff; }
        .cell.selected { background: rgba(212,160,23,0.32) !important; box-shadow: inset 0 0 0 2px var(--t-primary); z-index: 2; }
        .cell.peer { background: rgba(212,160,23,0.10); }
        .cell.same-number { background: rgba(212,160,23,0.20) !important; color: #fff !important; }
        .cell.error { color: #ef4444 !important; background: rgba(239,68,68,0.18) !important; animation: errorFlash 0.7s ease-out; }
        @keyframes errorFlash {
            0%   { background: rgba(239,68,68,0.55); transform: scale(1.04); }
            30%  { background: rgba(239,68,68,0.35); transform: scale(0.96); }
            100% { background: rgba(239,68,68,0.18); transform: scale(1); }
        }
        .cell.entered { animation: cellPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes cellPop {
            0%   { transform: scale(0.4); opacity: 0; }
            70%  { transform: scale(1.18); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .cell.glow-line { animation: glowLine 1.2s ease-out; }
        @keyframes glowLine {
            0%   { box-shadow: inset 0 0 0 0 rgba(252,214,99,0); }
            40%  { box-shadow: inset 0 0 18px 4px rgba(252,214,99,0.7); background: rgba(252,214,99,0.25); }
            100% { box-shadow: inset 0 0 0 0 rgba(252,214,99,0); }
        }
        .cell.win { background: linear-gradient(135deg, rgba(252,214,99,0.45), rgba(212,160,23,0.55)) !important; color: #fff !important; box-shadow: inset 0 0 12px rgba(252,214,99,0.65); }
        .cell.hint-reveal { animation: hintReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes hintReveal {
            0%   { transform: scale(0.2) rotate(-15deg); background: rgba(74,222,128,0.6); }
            60%  { transform: scale(1.2) rotate(5deg); background: rgba(74,222,128,0.35); }
            100% { transform: scale(1) rotate(0); }
        }

        /* Notes grid inside a cell */
        .notes { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; padding: 2px; gap: 0; }
        .note { font-size: calc(var(--cell-size) * 0.22); color: rgba(243,230,196,0.7); display: flex; align-items: center; justify-content: center; font-weight: 500; }

        /* ====== Number pad ====== */
        .num-pad-wrap { margin: 0 auto; width: 100%; max-width: calc(var(--cell-size, 56px) * 9 + 12px); display: flex; flex-direction: column; gap: 0.4rem; }
        .num-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.35rem; }
        .num-btn { aspect-ratio: 1 / 1; min-height: 38px; display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', monospace; font-size: 1.15rem; font-weight: 700; background: linear-gradient(180deg, rgba(247,236,210,0.07), rgba(247,236,210,0.02)); border: 1px solid rgba(212,160,23,0.25); border-radius: 10px; color: var(--t-text); cursor: pointer; transition: transform 0.12s, background 0.16s, box-shadow 0.16s; position: relative; }
        .num-btn:hover { background: rgba(212,160,23,0.2); transform: translateY(-1px); }
        .num-btn:active { transform: scale(0.96); }
        .num-btn.complete { opacity: 0.35; cursor: default; }
        .num-btn.complete:hover { transform: none; background: linear-gradient(180deg, rgba(247,236,210,0.07), rgba(247,236,210,0.02)); }
        .num-btn .count { position: absolute; top: 2px; right: 4px; font-size: 0.55rem; color: var(--t-text-muted); font-family: 'Orbitron', monospace; }

        .num-pad-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
        .tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.55rem 0.6rem; background: var(--t-card-bg); border: 1px solid var(--t-card-border); border-radius: 12px; font-family: inherit; font-size: 0.74rem; font-weight: 600; color: var(--t-text); cursor: pointer; transition: all 0.18s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
        .tool-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(212,160,23,0.15); }
        .tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .tool-btn.active { background: var(--t-btn-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(212,160,23,0.45); }
        .tool-btn svg { width: 16px; height: 16px; }

        /* ====== Overlays (start / pause / gameover / win) ====== */
        .overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(7,5,10,0.55), rgba(7,5,10,0.88)); text-align: center; color: #fff; font-family: 'Orbitron', monospace; padding: 24px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
        .overlay.active { display: flex; }
        .overlay-box { background: rgba(7,5,10,0.78); border: 1px solid rgba(212,160,23,0.4); border-radius: 22px; padding: 28px 28px 24px; min-width: 260px; max-width: 380px; box-shadow: 0 18px 60px rgba(0,0,0,0.5); }
        .overlay-title { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; margin: 0 0 6px; color: var(--t-primary); text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
        .overlay-sub { margin: 0 0 18px; color: rgba(243,230,196,0.8); font-family: 'Poppins', sans-serif; font-size: 0.92rem; line-height: 1.5; }
        .overlay-btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
        .overlay-btn { padding: 11px 20px; border-radius: 99px; border: 0; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .overlay-btn-primary { background: var(--t-btn-grad); color: #1a1207; }
        .overlay-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(212,160,23,0.4); }
        .overlay-btn-ghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; }
        .overlay-btn-ghost:hover { background: rgba(255,255,255,0.15); }

        /* Stats grid on win/game-over */
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 16px; }
        .stat-cell { padding: 10px 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; }
        .stat-cell-label { font-size: 0.55rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
        .stat-cell-value { font-size: 1.1rem; font-weight: 800; color: var(--t-primary); }

        /* Streak chip */
        .streak-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto 12px; padding: 4px 12px; background: linear-gradient(135deg, rgba(252,214,99,0.18), rgba(212,160,23,0.18)); border: 1px solid rgba(212,160,23,0.4); border-radius: 999px; font-size: 0.74rem; color: #fcd663; font-family: 'Orbitron', monospace; }

        /* Confetti */
        .confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 20; }
        .confetti-piece { position: absolute; width: 8px; height: 14px; top: -20px; opacity: 0.95; animation: confettiFall linear forwards; transform-origin: center; }
        @keyframes confettiFall {
            0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
            100% { transform: translate(var(--cx, 0), 110vh) rotate(720deg); opacity: 0.4; }
        }

        /* Help + history toggles */
        .help-toggle, .history-toggle { display: block; margin: 0.7rem auto 0; padding: 0.4rem 1.1rem; background: none; border: 1px solid var(--t-card-border); color: var(--t-text-muted); border-radius: 20px; font-family: 'Orbitron', monospace; font-size: 0.66rem; cursor: pointer; letter-spacing: 0.12em; text-transform: uppercase; }
        .help-toggle:hover, .history-toggle:hover { background: rgba(212,160,23,0.1); color: var(--t-text); }
        .help-panel, .history-panel { display: none; max-width: 540px; margin: 0.8rem auto 0; padding: 1rem 1.2rem; background: var(--t-card-bg); border: 1px solid var(--t-card-border); border-radius: 14px; color: var(--t-text); font-family: 'Poppins', sans-serif; font-size: 0.86rem; line-height: 1.55; }
        .help-panel.active, .history-panel.active { display: block; }
        .help-panel h3 { margin: 0 0 6px; font-family: 'Orbitron', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-primary); }
        .help-panel ul { margin: 0 0 12px; padding-left: 20px; }
        .help-panel li { margin: 3px 0; }
        .history-title { font-family: 'Orbitron', monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t-primary); text-align: center; margin-bottom: 10px; }
        .history-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: rgba(212,160,23,0.06); border-radius: 8px; font-size: 0.78rem; margin-bottom: 4px; }
        .history-score { font-family: 'Orbitron', monospace; font-weight: 700; color: var(--t-primary); }
        .history-meta { color: var(--t-text-muted); font-size: 0.72rem; }
        .history-empty { text-align: center; color: var(--t-text-subtle); font-size: 0.84rem; padding: 12px; }

        /* Top HUD bar */
        .hud-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
        .hud-pause-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--t-card-bg); border: 1px solid var(--t-card-border); color: var(--t-text); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s; }
        .hud-pause-btn:hover { background: rgba(212,160,23,0.18); transform: scale(1.05); }
        .hud-pause-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        .daily-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: linear-gradient(135deg, rgba(252,214,99,0.18), rgba(212,160,23,0.18)); border: 1px solid rgba(212,160,23,0.4); border-radius: 999px; font-family: 'Orbitron', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fcd663; }
        .daily-badge[hidden] { display: none; }

        @media (max-width: 480px) {
            .game-container { --cell-size: clamp(28px, min(9.5vw, calc((100dvh - 300px) / 9)), 44px); }
            .num-btn { font-size: 1rem; min-height: 34px; }
            .stat { min-width: 70px; padding: 0.35rem 0.7rem; }
            .stat-value { font-size: 0.88rem; }
            .tool-btn { font-size: 0.68rem; padding: 0.5rem 0.4rem; }
        }

        /* ============================================================
           Desktop layout: board column + side rail. The board fills the
           viewport height; the rail consumes the leftover horizontal space
           with difficulty/mode/lives, stats, recent games and how-to-play.
           Overlays are CONFINED to .game-main (position:absolute) on desktop
           so the rail's difficulty selector stays clickable behind the start
           & end screens — you can start a new game at a different difficulty.
           ============================================================ */
        .game-layout {
            display: flex; gap: 22px; align-items: flex-start;
            justify-content: center; width: 100%;
            max-width: 1400px; margin: 0 auto; padding: 0 18px;
            box-sizing: border-box;
        }
        .game-main {
            position: relative; display: flex; flex-direction: column;
            align-items: center; min-width: 0; max-width: 100%;
        }
        .game-rail {
            width: 340px; flex-shrink: 0;
            display: flex; flex-direction: column; gap: 14px;
        }
        .rail-card {
            background: var(--t-card-bg);
            border: 1px solid var(--t-card-border);
            border-radius: 16px; padding: 14px 16px;
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 12px rgba(0,0,0,0.12);
        }
        .rail-card-title {
            font-family: 'Orbitron', monospace; font-size: 0.6rem;
            text-transform: uppercase; letter-spacing: 0.14em;
            color: var(--t-primary); margin-bottom: 10px;
        }
        /* Settings + stats fill the rail card full-width. */
        .game-rail .settings-bar {
            flex-direction: column; align-items: stretch;
            gap: 10px; margin: 0; max-width: none;
        }
        .game-rail .setting-group { justify-content: space-between; flex-wrap: wrap; }
        .game-rail .stats-row { margin: 0; gap: 8px; flex-wrap: wrap; }
        .game-rail .stat { flex: 1; min-width: 64px; }
        /* Recent games + help live open in the rail. */
        .game-rail .history-toggle, .game-rail .help-toggle {
            display: block; width: 100%; margin: 0; text-align: left;
        }
        .game-rail .history-panel, .game-rail .help-panel {
            max-width: none; margin: 10px 0 0; background: none;
            border: none; padding: 0;
        }

        /* Overlays confined to the board on desktop (were full-screen `fixed`),
           so the rail stays clickable behind the start / end screen.
           .game-main is the position:relative, NON-filtered ancestor. */
        .game-main .overlay {
            position: absolute;
            z-index: 20;
            overflow-y: auto;
            border-radius: 18px;
        }

        /* In-overlay difficulty re-pick — MOBILE only (desktop uses the
           always-visible rail selector). Lets the start / end screen launch a
           new run at a different difficulty without hunting for the rail. */
        .overlay-settings { display: none; }

        @media (max-width: 899px) {
            .game-layout { flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; }
            .game-rail { width: 100%; max-width: 480px; }
            .game-rail .settings-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; }
            .game-rail .setting-group { justify-content: center; }
            /* Mobile: overlays go full-screen (no rail beside the board to
               preserve), so start / end screens get the whole viewport. */
            .game-main .overlay { position: fixed; border-radius: 0; }
            .overlay-settings {
                display: flex; flex-wrap: wrap; gap: 8px;
                justify-content: center; margin: 4px 0 14px;
            }
        }