/* ---- Settings ---- */
        .settings-bar {
            display: flex; flex-wrap: wrap; gap: 0.5rem;
            justify-content: center; margin-bottom: 0.6rem;
            max-width: 560px; padding: 0 0.5rem;
        }
        .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.3rem 0.45rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.08),
                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.2s;
        }
        .setting-btn.active {
            background: var(--t-btn-grad); color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        }
        .setting-btn:hover:not(.active) { background: rgba(255,255,255,0.08); }

        /* ---- Action Bar ---- */
        .action-bar {
            display: flex; gap: 0.5rem; flex-wrap: wrap;
            justify-content: center; margin-bottom: 0.5rem;
        }
        .action-btn {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.45rem 0.9rem;
            border: 1px solid var(--t-card-border);
            border-radius: 30px;
            background: var(--t-card-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            font-family: inherit; font-size: 0.75rem; font-weight: 500;
            color: var(--t-text); cursor: pointer; transition: all 0.2s;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 3px 10px rgba(0,0,0,0.15);
        }
        .action-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); }
        .action-btn.active {
            background: var(--t-btn-grad); color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 14px rgba(239,68,68,0.4);
        }
        .action-btn svg { width: 14px; height: 14px; }

        /* ---- Stats ---- */
        .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.08),
                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 .icon { width: 14px; height: 14px; }

        /* ---- Board container ---- */
        /* No backdrop-filter here: keeps it a clean position:relative ancestor
           so the mobile position:fixed overlays stay viewport-relative. */
        .game-container { position: relative; }
        .ms-scroll-wrap {
            /* Width follows the .game-main column (flex grows it to fill the
               space left by the rail), so the board scales to whatever fits on
               screen. The 720px cap keeps it sane on huge monitors / mobile.
               overflow:auto on BOTH axes is required: the Hard board (30 cols)
               is ~895px wide even at its 26px min-cell floor, so it scrolls
               horizontally INSIDE this 720px wrap instead of spilling out and
               colliding with the side rail. The HEIGHT clip (max-height) is
               mobile-only (below) so desktop boards grow to fill the column. */
            width: 100%;
            max-width: 720px;
            overflow: auto;
            margin: 0 auto;
            border-radius: 16px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .ms-scroll-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
        .ms-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(239,68,68,0.35); border-radius: 4px; }

        .ms-board {
            display: inline-block;
            padding: 14px;
            /* Black velvet board with golden radial glow — matches poster */
            background:
                radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,215,0,0.10), transparent 70%),
                linear-gradient(135deg, #1a1308 0%, #07050a 70%);
            border: 1px solid rgba(255,215,0,0.32);
            border-radius: 16px;
            box-shadow:
                inset 0 4px 12px rgba(0,0,0,0.65),
                inset 0 -2px 8px rgba(255,215,0,0.05),
                0 22px 60px rgba(0,0,0,0.55),
                0 0 0 1px rgba(0,0,0,0.5),
                0 0 40px rgba(255,215,0,0.18);
            user-select: none;
            touch-action: pan-x pan-y pinch-zoom;
            position: relative;
        }
        .ms-board.paused .ms-cell,
        .ms-board.paused .ms-row { visibility: hidden; }
        .ms-board.shake { animation: boardShake 0.45s; }
        @keyframes boardShake {
            0%, 100% { transform: translateX(0); }
            20%   { transform: translateX(-6px) rotate(-0.6deg); }
            40%   { transform: translateX(7px)  rotate(0.6deg);  }
            60%   { transform: translateX(-4px) rotate(-0.4deg); }
            80%   { transform: translateX(4px)  rotate(0.4deg);  }
        }
        .ms-board.flash-red::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at center, rgba(239,68,68,0.45), transparent 70%);
            border-radius: 14px;
            animation: redFlash 0.85s ease-out forwards;
            pointer-events: none; z-index: 5;
        }
        @keyframes redFlash {
            0%   { opacity: 0; }
            20%  { opacity: 1; }
            100% { opacity: 0; }
        }
        .ms-row { display: flex; gap: 3px; }
        .ms-row + .ms-row { margin-top: 3px; }

        .ms-cell {
            width: var(--cell-size, 32px);
            height: var(--cell-size, 32px);
            display: flex; align-items: center; justify-content: center;
            /* Brushed gold metallic cell — matches poster's gold ingots */
            background:
                linear-gradient(145deg, #fde68a 0%, #f4c84b 30%, #c69310 70%, #8a6914 100%);
            border-radius: 5px;
            box-shadow:
                inset 0 2px 0 rgba(255,250,210,0.85),
                inset 0 -2px 0 rgba(60,40,0,0.55),
                inset 1px 0 0 rgba(255,250,210,0.45),
                inset -1px 0 0 rgba(80,55,0,0.45),
                0 2px 5px rgba(0,0,0,0.4);
            font-family: 'Orbitron', monospace;
            font-weight: 800;
            font-size: calc(var(--cell-size, 32px) * 0.5);
            cursor: pointer;
            position: relative;
            transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s;
        }
        .ms-cell:hover:not(.revealed):not(.flagged) {
            transform: translateY(-1px) scale(1.04);
            filter: brightness(1.15) saturate(1.1);
            box-shadow:
                inset 0 2px 0 rgba(255,250,210,1),
                inset 0 -2px 0 rgba(60,40,0,0.5),
                0 5px 14px rgba(255,200,0,0.5),
                0 0 18px rgba(255,200,0,0.35);
        }
        .ms-cell:active:not(.revealed):not(.flagged) { transform: scale(0.96); }
        .ms-cell.revealed {
            /* Revealed cell — darker gold "inset" feel, like a stamped slot */
            background:
                linear-gradient(180deg, #2a1f08 0%, #110a02 100%);
            box-shadow:
                inset 0 2px 6px rgba(0,0,0,0.7),
                inset 0 -1px 0 rgba(255,215,0,0.08),
                inset 0 0 0 1px rgba(255,215,0,0.18);
            cursor: default;
            animation: cellReveal 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .ms-cell.revealed:hover { transform: none; filter: none; }
        @keyframes cellReveal {
            0%   { transform: scale(0.4); opacity: 0; }
            70%  { transform: scale(1.08); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .ms-cell.flagged {
            /* Flagged cell — deep crimson with gold inner highlight (poster vibe) */
            background:
                radial-gradient(circle at 30% 30%, #ff5b5b 0%, #c41e1e 45%, #6a0a0a 100%);
            box-shadow:
                inset 0 2px 0 rgba(255,220,200,0.35),
                inset 0 -2px 0 rgba(0,0,0,0.6),
                0 3px 12px rgba(255,80,80,0.6),
                0 0 0 1px rgba(255,215,0,0.4);
            animation: flagDrop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes flagDrop {
            0%   { transform: scale(0.5) rotate(-12deg); }
            70%  { transform: scale(1.18) rotate(4deg);  }
            100% { transform: scale(1) rotate(0deg);     }
        }
        .ms-cell.mine {
            background: radial-gradient(circle at 35% 30%, #ff7a7a 0%, #ef4444 35%, #b91c1c 75%, #7f1d1d 100%);
            box-shadow:
                0 0 24px rgba(239,68,68,0.85),
                inset 0 0 10px rgba(0,0,0,0.45);
            animation: mineBoom 0.55s ease;
        }
        @keyframes mineBoom {
            0%   { transform: scale(1); }
            30%  { transform: scale(1.3) rotate(8deg); }
            55%  { transform: scale(0.92) rotate(-4deg); }
            100% { transform: scale(1) rotate(0); }
        }
        .ms-cell.mine.detonated {
            background: radial-gradient(circle at 35% 30%, #ffd166 0%, #ff7a00 25%, #cc1f1f 60%, #5a0e0e 100%);
            box-shadow: 0 0 32px rgba(255,122,0,0.95), inset 0 0 12px rgba(0,0,0,0.55);
        }
        .ms-cell.bad-flag {
            background: linear-gradient(135deg, #6b7280, #374151);
            opacity: 0.7;
        }
        .ms-cell.bad-flag::after {
            content: '✕';
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: calc(var(--cell-size, 32px) * 0.55);
            color: #ef4444;
            text-shadow: 0 0 6px rgba(239,68,68,0.6);
        }
        .ms-cell.win-glow {
            background: linear-gradient(145deg, #064e3b 0%, #022c22 100%);
            box-shadow:
                0 0 20px rgba(16,185,129,0.7),
                inset 0 0 8px rgba(16,185,129,0.4);
            animation: winPulse 1.3s ease-in-out infinite;
        }
        @keyframes winPulse {
            0%, 100% { filter: brightness(1); box-shadow: 0 0 16px rgba(16,185,129,0.6), inset 0 0 8px rgba(16,185,129,0.35); }
            50%      { filter: brightness(1.25); box-shadow: 0 0 28px rgba(16,185,129,0.9), inset 0 0 12px rgba(16,185,129,0.55); }
        }
        .ms-cell .num { line-height: 1; pointer-events: none; }
        .ms-cell .flag-svg,
        .ms-cell .mine-svg { width: 70%; height: 70%; pointer-events: none; }

        /* Color-coded numbers — brighter pop against the dark stamped slot */
        .ms-cell[data-n="1"] .num { color: #60a5fa; text-shadow: 0 0 8px rgba(96,165,250,0.8); }
        .ms-cell[data-n="2"] .num { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,0.7); }
        .ms-cell[data-n="3"] .num { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,0.8); }
        .ms-cell[data-n="4"] .num { color: #c084fc; text-shadow: 0 0 8px rgba(192,132,252,0.75); }
        .ms-cell[data-n="5"] .num { color: #fb923c; text-shadow: 0 0 8px rgba(251,146,60,0.8); }
        .ms-cell[data-n="6"] .num { color: #22d3ee; text-shadow: 0 0 8px rgba(34,211,238,0.75); }
        .ms-cell[data-n="7"] .num { color: #fef3c7; text-shadow: 0 0 8px rgba(254,243,199,0.7); }
        .ms-cell[data-n="8"] .num { color: #fcd34d; text-shadow: 0 0 8px rgba(252,211,77,0.7); }

        /* ---- Pause overlay ---- */
        .pause-overlay {
            position: fixed; inset: 0; z-index: 10000;
            display: none; align-items: center; justify-content: center;
            background: rgba(8,6,12,0.78);
            backdrop-filter: blur(8px);
            border-radius: 14px;
            z-index: 6;
            text-align: center;
        }
        .pause-overlay.active { display: flex; }
        .pause-text {
            font-family: 'Orbitron', monospace;
            font-size: clamp(1.2rem, 5vw, 2rem);
            font-weight: 800; letter-spacing: 0.15em;
            background: linear-gradient(135deg, var(--t-primary-mid), var(--t-primary-dark));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* ---- Confetti ---- */
        .confetti {
            position: absolute;
            top: -20px; width: 10px; height: 14px;
            opacity: 0;
            animation: confettiFall 3s ease-out forwards;
            pointer-events: none;
            z-index: 30;
            border-radius: 2px;
        }
        @keyframes confettiFall {
            0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
            100% { transform: translateY(520px) rotate(720deg); opacity: 0; }
        }

        /* ---- Help ---- */
        .help-toggle {
            margin-top: 0.8rem; font-size: 0.75rem;
            color: var(--t-text-muted); cursor: pointer;
            background: none; border: none; font-family: inherit;
            transition: color 0.2s;
        }
        .help-toggle:hover { color: var(--t-primary); }
        .help-panel {
            display: none; max-width: 540px; width: 92vw;
            margin: 0.8rem auto 0;
            padding: 1.2rem;
            background: var(--t-card-bg);
            border: 1px solid var(--t-card-border);
            border-radius: 12px; text-align: left;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .help-panel.active { display: block; }
        .help-panel h3 {
            font-family: 'Orbitron', monospace;
            font-size: 0.7rem; text-transform: uppercase;
            letter-spacing: 0.1em; color: var(--t-primary);
            margin-bottom: 0.5rem; margin-top: 0.8rem;
        }
        .help-panel h3:first-child { margin-top: 0; }
        .help-panel p, .help-panel li {
            font-size: 0.8rem; color: var(--t-text);
            line-height: 1.6;
        }
        .help-panel ul { padding-left: 1.2rem; margin-bottom: 0.4rem; }

        /* ---- Game-over stat grid ---- */
        .end-stats {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 0.6rem; margin: 0.8rem 0 1.2rem;
            max-width: 320px;
        }
        .end-stat {
            background: var(--t-card-bg);
            border: 1px solid var(--t-card-border);
            border-radius: 10px;
            padding: 0.5rem 0.6rem;
        }
        .end-stat .lbl {
            font-family: 'Orbitron', monospace;
            font-size: 0.5rem; text-transform: uppercase;
            letter-spacing: 0.1em; color: var(--t-text-muted);
        }
        .end-stat .val {
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem; font-weight: 700;
            color: var(--t-text); margin-top: 0.15rem;
        }
        .end-stat.best .val { color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.4); }
        .end-title-win  { color: #10b981 !important; text-shadow: 0 0 12px rgba(16,185,129,0.4); }
        .end-title-lose { color: #ef4444 !important; text-shadow: 0 0 12px rgba(239,68,68,0.4);  }

        /* ============================================================
           DESKTOP LAYOUT: board column + side rail (2026-06-03)
           The fixed-cell board grows to fill the viewport height (JS
           applyCellSize); the 340px rail consumes the leftover horizontal
           space with difficulty/stats/recent/how-to-play. Overlays (pause +
           game-over) are CONFINED to .game-main (position:absolute) on desktop
           so the rail's difficulty selector stays clickable behind them — 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%; flex: 1 1 auto;
        }
        .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 + actions fill the rail card full-width. */
        .game-rail .settings-bar {
            flex-direction: column; align-items: stretch;
            gap: 10px; margin: 0; max-width: none; padding: 0;
        }
        .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; }
        .game-rail .action-bar { margin: 0; gap: 8px; }
        /* Recent games + help live open in the rail. */
        .game-rail .help-toggle, .game-rail .history-toggle {
            display: block; width: 100%; margin: 0; text-align: left;
        }
        .game-rail .help-panel, .game-rail .history-panel {
            max-width: none; width: auto; margin: 10px 0 0; background: none;
            border: none; padding: 0;
        }

        /* Recent-games (read-only history) list in the rail */
        .history-title {
            font-family: 'Orbitron', monospace; font-size: 0.66rem;
            text-transform: uppercase; letter-spacing: 0.1em;
            color: var(--t-primary); text-align: left; margin-bottom: 10px;
        }
        .history-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 6px 12px; background: rgba(255,255,255,0.04);
            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;
        }
        .history-result.win { color: #10b981; }
        .history-result.lose { color: #ef4444; }

        /* Overlays confined to the board on desktop (the shared
           .game-over-overlay + .pause-overlay are normally position:fixed).
           .game-main is the position:relative, NON-filtered ancestor. The
           backdrop-filter from games.css is dropped so the overlay clips to
           the column rather than capturing the whole viewport. */
        .game-main .game-over-overlay,
        .game-main .pause-overlay {
            position: absolute; inset: 0;
            z-index: 20; overflow-y: auto;
            border-radius: 16px;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        }

        /* In-overlay difficulty re-pick — MOBILE only (desktop uses the
           always-visible rail selector). Lets the 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; }
            /* Height clip is mobile-only: caps the board so it pans within the
               viewport instead of pushing the page. Desktop has no max-height,
               so the board grows to fill the column (overflow:auto on the base
               rule still handles horizontal scroll for the wide Hard board). */
            .ms-scroll-wrap { max-height: 70vh; }
            /* Mobile: overlays go full-screen (no rail beside the board to
               preserve), so pause / end screens get the whole viewport. */
            .game-main .game-over-overlay,
            .game-main .pause-overlay { position: fixed; border-radius: 0; }
            .overlay-settings {
                display: flex; flex-wrap: wrap; gap: 8px;
                justify-content: center; margin: 4px 0 14px;
            }
        }

        /* ===== Minesweeper — dark bunker theme ===== */
        body.game-page {
            --t-bg: #0f172a;
            --t-bg-grad: radial-gradient(ellipse at 50% 0%, #1e293b 0%, #0f172a 70%);
            --t-text: #f3f4f6;
            --t-text-muted: #d1d5db;
            --t-text-subtle: #9ca3af;
            --t-primary: #ef4444;
            --t-primary-mid: #f87171;
            --t-primary-dark: #b91c1c;
            --t-glass-bg: rgba(30,41,59,0.55);
            --t-glass-border: rgba(71,85,105,0.7);
            --t-card-bg: rgba(51,65,85,0.55);
            --t-card-border: rgba(100,116,139,0.5);
            --t-btn-grad: linear-gradient(135deg, #f87171, #ef4444 55%, #b91c1c);
        }
        body.game-page .game-name { color: #ef4444 !important; -webkit-text-fill-color: #ef4444 !important; background: none !important; }

.ms-cell { padding:0; font:inherit; color:inherit; }
.ms-cell:focus-visible { outline:3px solid #cdbaff; outline-offset:1px; z-index:2; }