/* =========================================================
           SOLITAIRE THEME VARS (used by shared games.css overrides)
           ========================================================= */
        body.game-page {
            --t-bg: #0c4a2e;
            --t-bg-grad: radial-gradient(ellipse at 50% -20%, #136b44 0%, #0a3d24 70%);
            --t-text: #f5fbf6;
            --t-text-muted: rgba(245,251,246,0.86);
            --t-text-subtle: rgba(245,251,246,0.6);
            --t-primary: #f5d672;
            --t-primary-mid: #d4a017;
            --t-primary-dark: #a07810;
            --t-card-bg: rgba(255,255,255,0.07);
            --t-card-border: rgba(245,214,114,0.28);
            --t-btn-grad: linear-gradient(135deg, #f5d672, #d4a017 55%, #a07810);
        }
        body.game-page .game-name,
        body.game-page .score-value {
            color: #f5d672 !important;
            -webkit-text-fill-color: #f5d672 !important;
            background: none !important;
        }

        /* =========================================================
           SETTINGS + ACTION BAR
           ========================================================= */
        .settings-bar {
            display: flex; flex-wrap: wrap; gap: 0.5rem;
            justify-content: center; margin-bottom: 0.4rem;
            max-width: 760px; padding: 0 0.5rem;
        }
        .setting-group {
            display: flex; align-items: center; gap: 0.3rem;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(245,214,114,0.3);
            border-radius: 30px;
            padding: 0.25rem 0.4rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .setting-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.5rem; text-transform: uppercase;
            letter-spacing: 0.08em; color: #f5d672;
            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: #f5fbf6;
            transition: all 0.18s;
        }
        .setting-btn.active {
            background: linear-gradient(135deg, #f5d672, #d4a017 55%, #a07810);
            color: #1a1207;
            box-shadow: 0 2px 10px rgba(212,160,23,0.45);
        }
        .setting-btn:hover:not(.active):not(:disabled) { background: rgba(245,214,114,0.15); }
        .setting-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        .action-bar {
            display: flex; gap: 0.5rem; flex-wrap: wrap;
            justify-content: center; margin-bottom: 0.45rem;
        }
        .action-btn {
            display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.45rem 0.9rem;
            border: 1px solid rgba(245,214,114,0.32);
            border-radius: 30px;
            background: rgba(255,255,255,0.07);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            font-family: 'Orbitron', monospace;
            font-size: 0.66rem;
            font-weight: 600; letter-spacing: 0.06em;
            color: #f5fbf6; cursor: pointer; transition: all 0.18s;
            text-transform: uppercase;
        }
        .action-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            background: rgba(245,214,114,0.18);
            border-color: rgba(245,214,114,0.6);
        }
        .action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .action-btn.primary {
            background: linear-gradient(135deg, #f5d672, #d4a017 55%, #a07810);
            color: #1a1207;
            border-color: transparent;
            box-shadow: 0 4px 14px rgba(212,160,23,0.4);
        }
        .action-btn.primary:hover:not(:disabled) {
            box-shadow: 0 6px 18px rgba(212,160,23,0.55);
        }
        .action-btn svg { width: 13px; height: 13px; }

        /* =========================================================
           HUD STATS
           ========================================================= */
        .stats-row {
            display: flex; gap: 0.55rem; justify-content: center;
            margin-bottom: 0.5rem; flex-wrap: wrap;
        }
        .stat {
            text-align: center;
            padding: 0.35rem 0.85rem;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(245,214,114,0.28);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            min-width: 72px;
        }
        .stat-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.5rem; text-transform: uppercase;
            letter-spacing: 0.12em; color: rgba(245,214,114,0.85);
        }
        .stat-value {
            font-family: 'Orbitron', monospace;
            font-size: 1rem; font-weight: 800;
            color: #f5fbf6; margin-top: 0.15rem;
        }
        .stat-value.best { color: #f5d672; }

        /* =========================================================
           BOARD
           ========================================================= */
        .game-container {
            position: relative;
            margin: 0 auto;
            /* Width derives from --card-w so a height (dvh) cap on the card
               shrinks the whole board — foundations row included — not just
               the tableau. 7 columns + 6 gaps (0.08·cw each) inside 28px
               padding => 7.48·card-w + 28. Mobile keeps 96vw (narrow screens
               make the vw term win the clamp, so this matches the old layout). */
            width: min(96vw, calc(7.48 * var(--card-w) + 28px));
            border-radius: 18px;
            background: linear-gradient(180deg, #0e5e3b 0%, #0a3d24 100%);
            border: 1px solid rgba(245,214,114,0.22);
            box-shadow:
                inset 0 4px 18px rgba(0,0,0,0.45),
                0 18px 50px rgba(0,0,0,0.5),
                0 0 0 3px rgba(245,214,114,0.08);
            padding: 14px;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            overflow: hidden;
        }

        /* CARD DIMENSIONS — driven by CSS variables for responsiveness.
           --card-w is the SINGLE size knob: the grid columns (via container
           width above) and the tableau min-height both derive from it, so the
           whole board scales together. The min() adds a viewport-HEIGHT cap so
           the full board (chrome + foundations + longest tableau pile) fits
           without scrolling on a laptop; the board total height is ≈ 40px +
           6.3·card-w, and K (the subtracted px) is the non-board chrome above +
           below the board. min() keeps the 9.5vw term winning on tall/narrow
           mobile, so the dvh cap never binds there — mobile is unaffected. */
        .game-container {
            /* --card-w-fit is set by JS (sizeBoard) on DESKTOP so the board fills
               the width left beside the rail AND the viewport height. On mobile
               (or if JS hasn't run) it's unset and the clamp below wins, keeping
               the original width-driven mobile sizing untouched. */
            --card-w: clamp(48px, var(--card-w-fit, min(9.5vw, calc((100dvh - 340px) / 6.3))), 96px);
            --card-h: calc(var(--card-w) * 1.4);
            --card-r: calc(var(--card-w) * 0.085);
            --slot-gap: calc(var(--card-w) * 0.08);
            --stack-offset: calc(var(--card-w) * 0.25); /* face-up cards in tableau */
            --stack-offset-down: calc(var(--card-w) * 0.13); /* face-down cards */
        }

        /* Top row: stock + waste + 3 spacers + 4 foundations */
        .top-row {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--slot-gap);
            margin-bottom: 12px;
        }
        .tableau-row {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--slot-gap);
            min-height: calc(var(--card-h) + var(--stack-offset) * 14);
        }

        /* SLOT (empty card placeholder) */
        .slot {
            position: relative;
            width: 100%;
            aspect-ratio: 5 / 7;
            border-radius: var(--card-r);
            background: rgba(0,0,0,0.18);
            border: 1.5px dashed rgba(245,214,114,0.28);
            display: flex; align-items: center; justify-content: center;
        }
        .slot.foundation::before {
            content: attr(data-suit);
            position: absolute;
            font-size: calc(var(--card-w) * 0.5);
            opacity: 0.22;
            font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
            line-height: 1;
            pointer-events: none;
        }
        .slot.foundation[data-suit="♥"]::before,
        .slot.foundation[data-suit="♦"]::before { color: #ef4444; }
        .slot.foundation[data-suit="♠"]::before,
        .slot.foundation[data-suit="♣"]::before { color: #1a1207; }
        .slot.stock-slot::before {
            content: '↻';
            font-size: calc(var(--card-w) * 0.5);
            color: rgba(245,214,114,0.42);
            font-weight: 700;
        }
        .slot.stock-slot.empty-cycle::before {
            content: '✕';
            color: rgba(239,68,68,0.5);
        }
        .slot.drop-target {
            border-color: rgba(245,214,114,0.95);
            background: rgba(245,214,114,0.18);
            box-shadow: 0 0 18px rgba(245,214,114,0.4);
        }
        .slot.drop-invalid {
            border-color: rgba(239,68,68,0.85);
            background: rgba(239,68,68,0.15);
        }

        /* TABLEAU PILE WRAPPER */
        .pile {
            position: relative;
            width: 100%;
        }
        .pile-slot { /* the visual base for the pile (foundation/tableau/stock/waste) */
            position: relative;
        }

        /* CARD */
        .card {
            position: absolute;
            width: 100%;
            aspect-ratio: 5 / 7;
            border-radius: var(--card-r);
            cursor: grab;
            transition: top 0.22s cubic-bezier(0.4, 0.0, 0.2, 1),
                        left 0.22s cubic-bezier(0.4, 0.0, 0.2, 1),
                        transform 0.22s cubic-bezier(0.4, 0.0, 0.2, 1),
                        box-shadow 0.18s;
            box-shadow: 0 1px 0 rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.35);
            top: 0; left: 0;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: transform, top, left;
        }
        .card.dragging {
            cursor: grabbing;
            transition: none !important;
            z-index: 9999 !important;
            box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 2px rgba(245,214,114,0.5);
        }
        .card.flipping {
            animation: cardFlip 0.22s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        @keyframes cardFlip {
            0% { transform: rotateY(0deg); }
            50% { transform: rotateY(90deg); }
            100% { transform: rotateY(0deg); }
        }
        .card.invalid-shake {
            animation: invalidShake 0.36s ease-in-out;
        }
        @keyframes invalidShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-6px) rotate(-1.5deg); }
            50% { transform: translateX(6px) rotate(1.5deg); }
            75% { transform: translateX(-4px) rotate(-1deg); }
        }
        .card.hint-pulse {
            animation: hintPulse 0.7s ease-in-out 2;
        }
        @keyframes hintPulse {
            0%, 100% { box-shadow: 0 1px 0 rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.35); }
            50% { box-shadow: 0 0 24px rgba(245,214,114,0.95), 0 0 8px rgba(245,214,114,0.7); }
        }

        /* CARD FACE (face-up) */
        .card-face {
            position: absolute; inset: 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-radius: var(--card-r);
            border: 1px solid rgba(0,0,0,0.18);
            display: flex; flex-direction: column;
            padding: calc(var(--card-w) * 0.06);
            box-sizing: border-box;
            overflow: hidden;
        }
        .card-corner {
            display: flex; flex-direction: column;
            line-height: 1;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 800;
            align-items: center;
        }
        .card-corner.top-left { align-self: flex-start; }
        .card-corner.bottom-right {
            align-self: flex-end;
            margin-top: auto;
            transform: rotate(180deg);
        }
        .card-rank {
            font-size: calc(var(--card-w) * 0.28);
            letter-spacing: -0.02em;
        }
        .card-suit-small {
            font-size: calc(var(--card-w) * 0.24);
            margin-top: calc(var(--card-w) * 0.01);
            font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Helvetica Neue', sans-serif;
            line-height: 1;
        }
        .card-center {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-size: calc(var(--card-w) * 0.52);
            font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Helvetica Neue', sans-serif;
            line-height: 1;
            pointer-events: none;
        }
        .card.red .card-corner,
        .card.red .card-center { color: #d1233a; }
        .card.black .card-corner,
        .card.black .card-center { color: #111827; }

        /* CARD BACK (face-down) */
        .card.face-down .card-face { display: none; }
        .card-back {
            position: absolute; inset: 0;
            border-radius: var(--card-r);
            background:
                repeating-linear-gradient(
                    45deg,
                    #1e3a8a 0px, #1e3a8a 4px,
                    #1d3380 4px, #1d3380 8px
                ),
                linear-gradient(135deg, #1e3a8a, #0f1f5f);
            border: 1px solid rgba(0,0,0,0.4);
            box-shadow: inset 0 0 0 calc(var(--card-w) * 0.04) #f5d672,
                        inset 0 0 0 calc(var(--card-w) * 0.05) #0a1851,
                        inset 0 2px 10px rgba(0,0,0,0.4);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .card-back::before {
            content: '';
            position: absolute;
            inset: calc(var(--card-w) * 0.12);
            border: 1.5px solid rgba(245,214,114,0.5);
            border-radius: calc(var(--card-r) * 0.7);
            background:
                radial-gradient(circle at 30% 30%, rgba(245,214,114,0.18) 0%, transparent 35%),
                radial-gradient(circle at 70% 70%, rgba(245,214,114,0.18) 0%, transparent 35%);
        }
        .card-back::after {
            content: '♣';
            position: relative;
            font-size: calc(var(--card-w) * 0.5);
            color: #f5d672;
            text-shadow: 0 2px 4px rgba(0,0,0,0.6);
            transform: rotate(-12deg);
            font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
            opacity: 0.95;
        }
        .card.face-up .card-back { display: none; }
        .card.face-down { cursor: pointer; }

        /* Waste cards (draw-3 fan) */
        .waste-fan-1 { left: calc(var(--card-w) * 0.18) !important; }
        .waste-fan-2 { left: calc(var(--card-w) * 0.36) !important; }

        /* Pause / dim board */
        .game-container.paused .card,
        .game-container.paused .slot { visibility: hidden; }

        /* =========================================================
           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, 30, 18, 0.4), rgba(7, 30, 18, 0.85));
            text-align: center;
            color: #fff;
            font-family: 'Orbitron', monospace;
            padding: 24px;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 50;
            border-radius: 18px;
        }
        .overlay.active { display: flex; }
        .overlay-box {
            background: rgba(10, 35, 20, 0.78);
            border: 1px solid rgba(245,214,114,0.32);
            border-radius: 22px;
            padding: 28px 28px 24px;
            min-width: 260px;
            max-width: 380px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
        }
        .overlay-title {
            font-size: 1.55rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            margin: 0 0 6px;
            color: #f5d672;
            text-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }
        .overlay-sub {
            margin: 0 0 18px;
            color: rgba(245,251,246,0.82);
            font-family: -apple-system, 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: linear-gradient(135deg, #f5d672, #d4a017 55%, #a07810);
            color: #1a1207;
        }
        .overlay-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(212,160,23,0.5); }
        .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); }

        /* Game-over stats grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin: 12px 0 18px;
        }
        .stat-cell {
            padding: 10px 6px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(245,214,114,0.2);
            border-radius: 10px;
        }
        .stat-cell-label {
            font-size: 0.55rem;
            letter-spacing: 0.14em;
            color: rgba(245,214,114,0.75);
            margin-bottom: 4px;
        }
        .stat-cell-value {
            font-size: 1.1rem;
            font-weight: 800;
            color: #f5d672;
        }
        .stat-cell-value.win { color: #6aaa64; }

        /* Start CTA */
        .start-cta {
            background: linear-gradient(135deg, #f5d672, #d4a017 55%, #a07810);
            color: #1a1207;
            padding: 16px 38px;
            border-radius: 99px;
            font-family: 'Orbitron', monospace;
            font-weight: 800;
            font-size: 1.05rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            border: 0;
            box-shadow: 0 14px 36px rgba(212,160,23,0.5);
            animation: startPulse 1.6s ease-in-out infinite;
            cursor: pointer;
        }
        @keyframes startPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 14px 36px rgba(212,160,23,0.5); }
            50% { transform: scale(1.06); box-shadow: 0 18px 44px rgba(212,160,23,0.7); }
        }
        .start-sub {
            display: block;
            margin-top: 14px;
            font-size: 0.84rem;
            color: rgba(245,251,246,0.86);
            font-weight: 500;
            letter-spacing: 0.06em;
            font-family: -apple-system, sans-serif;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }

        /* =========================================================
           WIN ANIMATION
           ========================================================= */
        .win-stage {
            position: absolute; inset: 0;
            pointer-events: none; overflow: hidden;
            z-index: 30;
            display: none;
        }
        .win-stage.active { display: block; }
        .confetti {
            position: absolute;
            width: 8px; height: 14px;
            top: -20px;
            border-radius: 2px;
            pointer-events: none;
        }
        @keyframes confettiFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(120vh) rotate(720deg); opacity: 0.8; }
        }
        .cascade-card {
            position: absolute;
            border-radius: var(--card-r);
            pointer-events: none;
            z-index: 35;
            box-shadow: 0 6px 14px rgba(0,0,0,0.4);
            transition: none !important;
            aspect-ratio: 5 / 7;
        }
        .cascade-card .card-face {
            position: absolute; inset: 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-radius: var(--card-r);
            border: 1px solid rgba(0,0,0,0.18);
            display: flex; flex-direction: column;
            padding: calc(var(--card-w) * 0.06);
            box-sizing: border-box;
            overflow: hidden;
        }

        /* =========================================================
           HELP + HISTORY
           ========================================================= */
        .help-toggle, .history-toggle {
            display: block; margin: 0.45rem auto 0; padding: 0.35rem 1.1rem;
            background: none; border: 1px solid rgba(245,214,114,0.28);
            color: #f5fbf6; 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(245,214,114,0.12); }
        .help-panel, .history-panel {
            display: none; max-width: 760px; margin: 0.8rem auto 0; padding: 1rem 1.2rem;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(245,214,114,0.22);
            border-radius: 14px; color: #f5fbf6;
            font-family: -apple-system, 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.8rem; color: #f5d672; text-transform: uppercase; letter-spacing: 0.06em; }
        .help-panel ul { margin: 0 0 10px; padding-left: 20px; }
        .help-panel li { margin: 3px 0; }
        .help-panel strong { color: #f5d672; }
        .history-title { font-family: 'Orbitron', monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: #f5d672; text-align: center; margin-bottom: 8px; }
        .history-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: rgba(245,214,114,0.08); border-radius: 8px; font-size: 0.78rem; margin-bottom: 4px; }
        .history-score { font-family: 'Orbitron', monospace; font-weight: 700; color: #f5d672; }
        .history-meta { color: rgba(245,251,246,0.66); font-size: 0.72rem; }
        .history-empty { text-align: center; color: rgba(245,251,246,0.4); font-size: 0.84rem; padding: 12px; }

        /* Pause / play icon */
        .pause-icon::before { content: '⏸'; }
        .play-icon::before { content: '▶'; }

        /* Tighten card display on narrow screens */
        @media (max-width: 480px) {
            .game-container { padding: 8px; }
            .help-panel, .history-panel { font-size: 0.78rem; }
        }

        /* =========================================================
           DESKTOP LAYOUT — board fills viewport height, the leftover
           horizontal space becomes a side rail (difficulty / stats /
           help / history). Mirrors the shared Nyza Games games layout so
           the board no longer floats as a small element in empty space.
           ========================================================= */
        .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-main .game-container { margin: 0; }

        .game-rail {
            width: 340px; flex-shrink: 0;
            display: flex; flex-direction: column; gap: 14px;
        }
        .rail-card {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(245,214,114,0.28);
            border-radius: 16px; padding: 14px 16px;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }
        .rail-card-title {
            font-family: 'Orbitron', monospace; font-size: 0.6rem;
            text-transform: uppercase; letter-spacing: 0.14em;
            color: #f5d672; margin-bottom: 10px;
        }
        /* Settings + stats + toggles reflow to fill the rail 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; }
        .game-rail .action-bar { margin: 0; }
        .game-rail .stats-row { margin: 0; gap: 8px; }
        .game-rail .stat { flex: 1; min-width: 0; }
        .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; margin: 10px 0 0; background: none;
            border: none; padding: 0;
        }

        /* Overlays: on DESKTOP confine to the board so the rail
           (difficulty / new game at a different difficulty) stays
           clickable behind them. The board is position:relative +
           overflow:hidden, so the overlay clips to the rounded board. */
        .overlay {
            position: absolute;
            overflow-y: auto;
        }

        /* In-overlay difficulty re-pick — MOBILE only (desktop uses the
           always-visible rail). Lets the start + end screens launch a new
           game at a different difficulty without an overlay hiding the picker. */
        .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: 520px; }
            .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. */
            .overlay { position: fixed; border-radius: 0; }
            .overlay-settings {
                display: flex; flex-wrap: wrap; gap: 8px;
                justify-content: center; margin: 6px 0 14px;
            }
            .overlay-settings .setting-group { background: rgba(255,255,255,0.08); }
        }