/* ============================================================
           MAHJONG SOLITAIRE — Nyza Games
           Pure HTML/CSS tile rendering. Absolutely positioned divs,
           z-index per layer, custom tile face glyphs.
           ============================================================ */

        body.game-page {
            --t-bg: #0c1a1e;
            --t-bg-grad: radial-gradient(ellipse at 50% -10%, #1a3030 0%, #0a1518 70%);
            --t-text: #f3e6c4;
            --t-text-muted: rgba(243,230,196,0.88);
            --t-primary: #d4a017;
            --t-primary-mid: #f5d672;
            --t-primary-dark: #8b6914;
            --t-card-bg: rgba(245,214,114,0.08);
            --t-card-border: rgba(245,214,114,0.32);
            --t-btn-grad: linear-gradient(135deg, #f5d672, #d4a017 55%, #a07810);
            --table-felt: radial-gradient(ellipse at center, #1d4332 0%, #0e2419 75%);
        }
        body.game-page .game-name,
        body.game-page .score-value {
            color: var(--t-primary-mid) !important;
            -webkit-text-fill-color: var(--t-primary-mid) !important;
            background: none !important;
        }

        /* ----- Settings bar (top-of-page layout switcher) ----- */
        .settings-bar {
            display: flex; flex-wrap: wrap; gap: 0.5rem;
            justify-content: center; margin: 0 auto 0.8rem;
            max-width: 720px;
        }
        .setting-group {
            display: flex; align-items: center; gap: 0.35rem;
            background: rgba(245,214,114,0.08);
            border: 1px solid rgba(245,214,114,0.32);
            border-radius: 30px; padding: 0.3rem 0.5rem;
            min-height: 38px;
        }
        .setting-label {
            font-family: 'Orbitron', monospace; font-size: 0.55rem;
            text-transform: uppercase; letter-spacing: 0.12em;
            color: rgba(245,214,114,0.78); padding-left: 0.5rem;
            font-weight: 700;
        }
        .setting-btn {
            padding: 0.4rem 0.85rem; border: none; border-radius: 20px;
            font-family: inherit; font-size: 0.7rem; font-weight: 700;
            cursor: pointer; background: transparent; color: #f3e6c4;
            transition: all 0.18s;
            letter-spacing: 0.06em;
            min-height: 30px;
        }
        .setting-btn.active {
            background: linear-gradient(135deg, #f5d672, #d4a017);
            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.16);
        }
        .setting-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        /* Hide the rail's "Game Setup" layout card while the start overlay
           is active — the overlay has its own layout picker, so showing two
           would be redundant. The card reappears the moment the game starts
           so players can switch layout mid-session (well, between games).
           Uses the modern :has() selector (Baseline 2023). */
        body:has(#overlayStart.active) .game-rail .rail-card:has(.settings-bar) {
            display: none;
        }

        /* ----- Game container -----
           Give the felt-table a generous desktop width so fitBoardToContainer()
           has room to scale tiles up. On mobile (≤640px) we let it shrink to
           viewport width; padding floor of 6px keeps tiles off the edge. */
        .game-container {
            position: relative;
            width: 100%;
            max-width: min(1120px, 96vw);
            margin: 0 auto;
            border-radius: 20px;
            background: var(--table-felt);
            border: 1px solid rgba(245,214,114,0.18);
            box-shadow: 0 20px 60px rgba(0,0,0,0.55),
                        0 0 0 3px rgba(245,214,114,0.1) inset;
            overflow: hidden;
            padding: 0;
            touch-action: manipulation;
        }
        .game-container::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 30% 20%, rgba(245,214,114,0.05) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(245,214,114,0.04) 0%, transparent 50%);
            pointer-events: none;
        }

        /* ----- HUD ----- */
        .game-hud {
            position: relative; z-index: 10;
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px;
            background: rgba(7,12,15,0.55);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(245,214,114,0.18);
            gap: 8px;
        }
        .hud-stats {
            display: flex; align-items: center; gap: 14px;
            font-family: 'Orbitron', monospace;
            flex-wrap: wrap;
        }
        .hud-stat {
            display: flex; flex-direction: column; align-items: flex-start;
            min-width: 42px;
        }
        .hud-stat-label {
            font-size: 0.48rem; letter-spacing: 0.16em;
            text-transform: uppercase; color: rgba(245,214,114,0.65);
            margin-bottom: 1px;
        }
        .hud-stat-value {
            font-size: 0.92rem; font-weight: 800;
            color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .hud-stat-value.best { color: var(--t-primary-mid); }
        .hud-stat-value.time { color: #b8e0d2; }
        .hud-actions {
            display: flex; align-items: center; gap: 6px;
            flex-wrap: wrap;
        }
        .hud-btn {
            position: relative;
            min-width: 44px; height: 36px;
            padding: 0 10px;
            border-radius: 10px;
            background: rgba(7,12,15,0.6);
            border: 1px solid rgba(245,214,114,0.28);
            color: #fff;
            font-family: 'Orbitron', monospace;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            gap: 5px;
            transition: transform 0.15s, background 0.15s, opacity 0.15s;
        }
        .hud-btn:hover:not(:disabled) {
            background: rgba(212,160,23,0.4);
            transform: translateY(-1px);
        }
        .hud-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }
        .hud-btn-icon {
            font-size: 0.85rem;
            line-height: 1;
        }
        .hud-btn-badge {
            background: rgba(245,214,114,0.85);
            color: #1a1207;
            border-radius: 8px;
            padding: 1px 5px;
            font-size: 0.55rem;
            font-weight: 800;
            min-width: 14px;
            text-align: center;
        }
        .hud-pause-btn {
            width: 38px; height: 38px;
            border-radius: 12px;
            background: rgba(7,12,15,0.6);
            border: 1px solid rgba(245,214,114,0.28);
            color: #fff;
            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.4); transform: scale(1.06); }
        .pause-icon::before { content: '⏸'; }
        .play-icon::before { content: '▶'; }

        /* ----- Board surface ----- */
        .board-wrap {
            position: relative;
            width: 100%;
            /* Gold sunburst behind the tile pyramid — mirrors poster */
            background:
                radial-gradient(ellipse 70% 55% at 50% 45%,
                    rgba(255,215,0,0.20) 0%,
                    rgba(255,165,30,0.12) 35%,
                    transparent 75%),
                radial-gradient(circle at 50% 50%,
                    rgba(255,215,0,0.06) 0%,
                    transparent 100%);
            overflow: hidden;
            min-height: 200px;
            border-radius: 18px;
            position: relative;
        }
        /* Soft gold radial glow behind the board — kept simple so it never
           fights with tile rendering or click hit-targets. The earlier
           conic-gradient + mix-blend-mode + 60s rotation was visually busy
           and triggered repaint cost on some browsers; replaced with a
           static radial. */
        .board-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 65% 55% at 50% 45%,
                rgba(255,215,0,0.12) 0%,
                rgba(255,165,30,0.05) 45%,
                transparent 80%);
            pointer-events: none;
            z-index: 0;
        }
        .board {
            position: relative;
            margin: 0 auto;
            transform-origin: top center;
            z-index: 1;
        }

        /* ----- Tile rendering ----- */
        .tile {
            position: absolute;
            width: 48px; height: 64px;
            border-radius: 6px;
            background: linear-gradient(180deg, #fffbe8 0%, #f3e3b3 100%);
            border: 1px solid rgba(0,0,0,0.25);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.85),
                inset 0 -2px 0 rgba(0,0,0,0.18),
                inset -2px 0 0 rgba(0,0,0,0.15),
                inset 2px 0 0 rgba(255,255,255,0.5),
                0 1px 0 rgba(0,0,0,0.35);
            cursor: pointer;
            transition: transform 0.12s ease-out, box-shadow 0.12s, filter 0.12s;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .tile.blocked {
            cursor: default;
            filter: brightness(0.55) saturate(0.7);
        }
        .tile:not(.blocked):hover {
            transform: translateY(-1px) scale(1.02);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.85),
                inset 0 -2px 0 rgba(0,0,0,0.18),
                0 4px 12px rgba(0,0,0,0.5),
                0 0 0 1px rgba(245,214,114,0.55);
        }
        .tile.selected {
            background: linear-gradient(180deg, #fff5c4 0%, #f5d672 100%) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.95),
                0 0 0 2px #f5d672,
                0 0 16px rgba(245,214,114,0.85),
                0 4px 14px rgba(0,0,0,0.5) !important;
            transform: translateY(-2px) scale(1.04);
            z-index: 999 !important;
        }
        .tile.hint {
            animation: tileHint 0.9s ease-in-out 3;
            z-index: 998 !important;
        }
        @keyframes tileHint {
            0%, 100% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.85),
                    0 0 0 0 rgba(102,255,178,0);
            }
            50% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.85),
                    0 0 0 3px #66ffb2,
                    0 0 22px rgba(102,255,178,0.9);
            }
        }
        .tile.removing {
            animation: tileRemove 0.42s ease-out forwards;
            pointer-events: none;
            z-index: 9999 !important;
        }
        @keyframes tileRemove {
            0%   { transform: scale(1) rotate(0deg); opacity: 1; }
            40%  { transform: scale(1.25) rotate(-2deg); opacity: 1; filter: brightness(1.5); }
            100% { transform: scale(0.2) rotate(8deg); opacity: 0; filter: brightness(2) blur(2px); }
        }
        .tile.shake {
            animation: tileShake 0.34s ease-in-out;
        }
        @keyframes tileShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-3px) rotate(-1.5deg); }
            40% { transform: translateX(3px) rotate(1.5deg); }
            60% { transform: translateX(-2px); }
            80% { transform: translateX(2px); }
        }

        /* ----- Tile face glyphs ----- */
        .tile-face {
            font-family: 'Orbitron', monospace;
            color: #1a1207;
            line-height: 1;
            text-align: center;
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
        }
        .tile-face .face-glyph {
            font-size: 26px;
            font-weight: 700;
            line-height: 1;
        }
        /* Suit colors */
        .tile[data-suit="dot"] .tile-face,
        .tile[data-suit="bam"] .tile-face,
        .tile[data-suit="char"] .tile-face { color: #15394b; }
        .tile[data-suit="char"] .face-glyph { color: #c0392b; font-weight: 900; }
        .tile[data-suit="dot"] .face-glyph { color: #1a6e8e; }
        .tile[data-suit="bam"] .face-glyph { color: #1e7a3d; }
        .tile[data-suit="wind"] .face-glyph { color: #1c1c1c; font-weight: 900; }
        .tile[data-suit="dragon-red"] .face-glyph { color: #c93030; font-weight: 900; }
        .tile[data-suit="dragon-green"] .face-glyph { color: #2d8a4e; font-weight: 900; }
        .tile[data-suit="dragon-white"] .face-glyph {
            color: transparent;
            -webkit-text-stroke: 2px #1c1c1c;
            font-weight: 900;
        }
        .tile[data-suit="flower"] .face-glyph { font-size: 22px; }
        .tile[data-suit="season"] .face-glyph { font-size: 22px; }
        .tile[data-suit="flower"] { background: linear-gradient(180deg, #fff8e0 0%, #f5c4d0 100%); }
        .tile[data-suit="season"] { background: linear-gradient(180deg, #fff8e0 0%, #c4e5d0 100%); }

        /* CSS-drawn dots for the dot suit */
        .dot-pattern {
            display: grid;
            gap: 3px;
            padding: 4px;
            width: 100%;
            height: 100%;
            align-content: center;
            justify-content: center;
            justify-items: center;
            align-items: center;
        }
        .dot-circle {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #5fb3d9, #1a6e8e 75%, #0e4a64);
            box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset;
        }
        .dot-circle.red {
            background: radial-gradient(circle at 30% 30%, #ff7878, #c93030 75%, #8a1818);
        }
        .dot-circle.green {
            background: radial-gradient(circle at 30% 30%, #7ad99c, #2d8a4e 75%, #185030);
        }

        /* Bamboo sticks */
        .bam-pattern {
            display: grid;
            gap: 2px;
            padding: 4px;
            width: 100%;
            height: 100%;
            align-content: center;
            justify-content: center;
            justify-items: center;
        }
        .bam-stick {
            width: 4px; height: 12px;
            background: linear-gradient(90deg, #1e5e2e, #2d8a4e, #1e5e2e);
            border-radius: 2px;
            box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
            position: relative;
        }
        .bam-stick::after {
            content: '';
            position: absolute;
            top: 50%; left: -1px; right: -1px;
            height: 1px;
            background: rgba(0,0,0,0.4);
            transform: translateY(-50%);
        }
        .bam-1 {
            display: flex; align-items: center; justify-content: center;
            width: 100%; height: 100%; padding: 4px;
        }
        .bam-1-bird {
            font-size: 24px;
            color: #c93030;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }

        /* Character (man) digits */
        .char-pattern {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%; height: 100%;
            padding: 3px;
            gap: 1px;
        }
        .char-digit {
            font-size: 22px;
            font-weight: 900;
            line-height: 1;
            color: #c93030;
            font-family: 'Times New Roman', serif;
        }
        .char-wan {
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            color: #15394b;
            font-family: 'Times New Roman', serif;
        }

        /* Wind/Dragon big char */
        .wind-glyph, .dragon-glyph {
            font-size: 28px;
            font-weight: 900;
            font-family: 'Times New Roman', serif;
            line-height: 1;
        }

        /* Tile depth shadow on bottom-right for stacked layers visual */
        .tile.layer-shadow::after {
            content: '';
            position: absolute;
            right: -3px; bottom: -3px;
            top: 3px; left: -3px;
            background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
            border-radius: 6px;
            z-index: -1;
        }

        /* ----- Match flash ----- */
        .match-flash {
            position: absolute;
            pointer-events: none;
            width: 80px; height: 80px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(245,214,114,0.9) 0%, rgba(245,214,114,0) 70%);
            animation: matchFlash 0.6s ease-out forwards;
            z-index: 9998;
        }
        @keyframes matchFlash {
            0% { transform: scale(0.3); opacity: 1; }
            100% { transform: scale(2.5); opacity: 0; }
        }

        /* ----- Win flash overlay ----- */
        .win-flash {
            position: absolute; inset: 0;
            background: radial-gradient(circle, rgba(245,214,114,0.85) 0%, rgba(245,214,114,0) 75%);
            pointer-events: none;
            animation: winFlash 1.6s ease-out forwards;
            z-index: 9997;
        }
        @keyframes winFlash {
            0%   { opacity: 0; }
            12%  { opacity: 1; }
            55%  { opacity: 0.55; }
            100% { opacity: 0; }
        }

        /* ----- Confetti ----- */
        .confetti {
            position: absolute;
            width: 8px; height: 14px;
            top: -20px;
            border-radius: 2px;
            pointer-events: none;
            animation: confettiFall linear forwards;
            z-index: 9996;
        }
        @keyframes confettiFall {
            0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(120vh) rotate(720deg); opacity: 0.7; }
        }

        /* ============================================================
           Overlays — rewritten 2026-05-18 for Nyza Games.
           Sizing: max-width ~560px (CSS-Tricks / Frontend Masters modal
           sweet spot). Line-length ≤ 50ch on the sub-text per UX research
           (50–75 cpl reading band). Uses dvi/dvh viewport units so iOS
           Safari bottom-chrome doesn't push the card off-screen. Title
           gets user-select:none so accidental tap-and-hold can't produce
           the glaring blue selection rectangle that confused the previous
           pass.
           ============================================================ */
        .overlay {
            /* Fixed (not absolute) so the overlay covers the FULL viewport
               and is centered in the screen — not trapped inside the
               .game-container box. Previously the container sized itself
               to the (empty) board on first load and clipped the start
               card; this fixes that. */
            position: fixed; inset: 0;
            display: none;
            align-items: center; justify-content: center;
            background: linear-gradient(180deg, rgba(7,12,15,0.7), rgba(7,12,15,0.92));
            text-align: center; color: #fff;
            font-family: 'Orbitron', monospace;
            padding: clamp(16px, 4vw, 32px);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            z-index: 10000;
            overflow-y: auto;
        }
        .overlay.active { display: flex; }
        .overlay-box {
            background:
                radial-gradient(ellipse at 50% -10%, rgba(245,214,114,0.10), transparent 65%),
                rgba(12,20,24,0.94);
            border: 1px solid rgba(245,214,114,0.34);
            border-radius: 26px;
            padding: clamp(26px, 4.5vw, 40px) clamp(24px, 5vw, 44px);
            width: 100%;
            max-width: min(560px, 94vw);
            max-height: min(92dvh, 760px);
            box-shadow:
                0 24px 70px rgba(0,0,0,0.7),
                0 0 0 1px rgba(245,214,114,0.06) inset,
                0 1px 0 rgba(255,255,255,0.05) inset;
            box-sizing: border-box;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .overlay-title {
            font-size: clamp(1.35rem, 4.4vw, 1.85rem);
            font-weight: 900;
            letter-spacing: 0.03em;
            margin: 0 0 10px;
            color: var(--t-primary-mid);
            text-shadow: 0 2px 14px rgba(0,0,0,0.55);
            line-height: 1.15;
            user-select: none;
            -webkit-user-select: none;
        }
        /* Selection styling — applied at body scope and on every descendant
           of .overlay-box because nested-`::selection` doesn't reliably
           inherit through Safari/Firefox. -moz- prefix for older Gecko. */
        ::selection {
            background: rgba(245,214,114,0.4);
            color: #fff8dc;
        }
        ::-moz-selection {
            background: rgba(245,214,114,0.4);
            color: #fff8dc;
        }
        .overlay-sub {
            margin: 0 auto 22px;
            max-width: 46ch;
            color: rgba(255,255,255,0.82);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: clamp(0.92rem, 2.2vw, 1rem);
            line-height: 1.55;
        }
        .overlay-btn-row {
            display: flex; gap: 12px; flex-wrap: wrap;
            justify-content: center;
            margin-top: 6px;
        }
        .overlay-btn {
            padding: 13px 24px;
            border-radius: 99px;
            border: 0;
            cursor: pointer;
            font-family: 'Orbitron', monospace;
            font-size: 0.82rem; font-weight: 800;
            letter-spacing: 0.1em; text-transform: uppercase;
            transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
            text-decoration: none;
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px;
            min-height: 44px;   /* WCAG touch-target floor */
        }
        .overlay-btn-primary {
            background: linear-gradient(135deg, #f5d672, #d4a017);
            color: #1a1207;
            box-shadow: 0 10px 26px rgba(212,160,23,0.35);
        }
        .overlay-btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 32px 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); }
        /* Layout picker inside the start overlay — clearly buttons,
           distinct from the read-only best-time tiles below. */
        .overlay-layout-row {
            display: flex; gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 6px 0 22px;
        }
        .overlay-layout-btn {
            flex: 1 1 auto;
            min-width: 92px;
            padding: 10px 14px;
            border-radius: 14px;
            background: rgba(245,214,114,0.05);
            border: 1.5px solid rgba(245,214,114,0.25);
            color: rgba(243,230,196,0.85);
            font-family: 'Orbitron', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .overlay-layout-btn:hover {
            background: rgba(245,214,114,0.12);
            border-color: rgba(245,214,114,0.45);
            transform: translateY(-1px);
        }
        .overlay-layout-btn.active {
            background: linear-gradient(135deg, rgba(245,214,114,0.22), rgba(212,160,23,0.12));
            border-color: var(--t-primary-mid);
            color: var(--t-primary-mid);
            box-shadow: 0 6px 18px rgba(212,160,23,0.18);
        }
        .overlay-layout-btn-shape {
            font-size: 0.58rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            color: rgba(243,230,196,0.55);
            text-transform: uppercase;
        }
        .overlay-layout-btn.active .overlay-layout-btn-shape {
            color: rgba(245,214,114,0.8);
        }
        .bests-section-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(243,230,196,0.55);
            margin: 4px 0 8px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin: 12px 0 18px;
        }
        .stats-grid.three { grid-template-columns: repeat(3, 1fr); }
        .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-mid);
        }

        /* ----- Start CTA pulse ----- */
        .start-cta {
            background: linear-gradient(135deg, #f5d672, #d4a017);
            color: #1a1207;
            padding: 18px 48px;
            border-radius: 99px;
            font-family: 'Orbitron', monospace;
            font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.1rem);
            letter-spacing: 0.18em; text-transform: uppercase;
            box-shadow: 0 14px 36px rgba(212,160,23,0.5);
            animation: startPulse 1.8s ease-in-out infinite;
            cursor: pointer;
            border: 0;
            min-height: 52px;
            min-width: min(280px, 80%);
        }
        .start-cta:hover {
            animation-play-state: paused;
            transform: translateY(-2px) scale(1.03);
        }
        @keyframes startPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 14px 36px rgba(212,160,23,0.5);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 20px 48px rgba(212,160,23,0.78);
            }
        }
        .start-sub {
            display: block; margin-top: 14px;
            font-size: 0.78rem;
            color: rgba(243,230,196,0.7);
            font-weight: 500;
            letter-spacing: 0.08em;
            font-family: -apple-system, sans-serif;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }

        /* ----- Help + History ----- */
        .help-toggle, .history-toggle {
            display: block;
            margin: 0.8rem auto 0;
            padding: 0.55rem 1.3rem;
            background: rgba(245,214,114,0.04);
            border: 1px solid rgba(245,214,114,0.32);
            color: #f3e6c4;
            border-radius: 22px;
            font-family: 'Orbitron', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            min-height: 38px;
            transition: background 0.15s, border-color 0.15s, transform 0.15s;
        }
        .help-toggle:hover, .history-toggle:hover {
            background: rgba(245,214,114,0.14);
            border-color: rgba(245,214,114,0.55);
            transform: translateY(-1px);
        }
        .help-panel, .history-panel {
            display: none;
            max-width: 580px;
            margin: 0.8rem auto 0;
            padding: 1rem 1.2rem;
            background: rgba(245,214,114,0.06);
            border: 1px solid rgba(245,214,114,0.32);
            border-radius: 14px;
            color: #f3e6c4;
            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.85rem;
            color: var(--t-primary-mid);
        }
        .help-panel ul { margin: 0 0 10px; 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-mid);
            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: var(--t-primary-mid);
        }
        .history-meta {
            color: rgba(243,230,196,0.65);
            font-size: 0.72rem;
        }
        .history-empty {
            text-align: center;
            color: rgba(243,230,196,0.45);
            font-size: 0.84rem;
            padding: 12px;
        }

        /* ----- Bests grid in start overlay -----
           Visually distinct from the layout picker above: rounded corners
           that don't quite match buttons + a softer inset background so it
           reads as read-only stats, not clickable. */
        .bests-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 0 0 20px;
        }
        .best-cell {
            padding: 12px 8px 10px;
            background: rgba(7,12,15,0.45);
            border: 1px solid rgba(245,214,114,0.16);
            border-radius: 12px;
            box-shadow: 0 2px 0 rgba(0,0,0,0.25) inset;
        }
        .best-cell-label {
            font-size: 0.54rem;
            letter-spacing: 0.18em;
            font-weight: 700;
            color: rgba(245,214,114,0.68);
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        .best-cell-value {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--t-primary-mid);
            font-family: 'Orbitron', monospace;
            line-height: 1.1;
        }

        /* ============================================================
           Desktop layout — board fills the viewport HEIGHT, the leftover
           HORIZONTAL space is consumed by a side rail (Game Setup / live
           stats / How-to-Play / History). Mirrors the snake.html pattern,
           themed to Mahjong's gold-felt palette. Below 900px the layout
           stacks to a single column and the rail drops below the board.
           ============================================================ */
        .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;
            flex: 1 1 auto; max-width: 1120px;
        }
        /* Drop the backdrop-filter here so the position:absolute overlays
           (desktop) are NOT trapped by a filtered containing block. The
           blur was invisible behind the opaque felt-table anyway. The felt
           gradient + glow are unaffected. */
        .game-main .game-container {
            margin: 0;
            backdrop-filter: none; -webkit-backdrop-filter: none;
        }

        .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);
        }
        .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 stretch full-width inside the rail */
        .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; }
        /* Live stats (Time / Pairs / Left / Best) stay in the on-board HUD —
           glanceable during play. The rail carries Setup + How-to-Play +
           History, which is what consumes the leftover desktop width. */
        /* How-to-Play + History live open inside 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; margin: 10px 0 0; background: none;
            border: none; padding: 0;
        }

        /* Overlays: confine to the .game-main board box on desktop (was
           full-screen `fixed`) so the rail's layout picker + stats stay
           clickable behind them. .game-main is position:relative and has
           no backdrop-filter, so the overlay anchors to it cleanly. */
        .overlay {
            position: absolute;
            border-radius: 20px;
        }

        /* In-overlay layout re-pick — MOBILE only (desktop uses the
           always-visible rail). Lets the end screen launch a NEW game at a
           different layout without hunting for a panel below. */
        .overlay-settings { display: none; }

        @media (min-width: 900px) {
            /* Keep .game-main tall even before the board is built, so the
               position:absolute start/game-over overlays (inset:0) cover a
               full-height area and center their card — instead of clamping
               to the empty ~200px board-wrap and clipping the start card. */
            .game-main { min-height: min(640px, calc(100vh - 150px)); }
        }

        @media (max-width: 899px) {
            .game-layout { flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; }
            .game-rail { width: 100%; max-width: 560px; }
            .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 the start / end screens get the whole viewport. */
            .overlay { position: fixed; border-radius: 0; }
            .overlay-settings { display: block; }
        }

        /* ----- Mobile sizing ----- */
        @media (max-width: 640px) {
            .hud-stat { min-width: 36px; }
            .hud-stat-value { font-size: 0.78rem; }
            .hud-btn { min-width: 38px; height: 32px; font-size: 0.55rem; padding: 0 8px; }
            .hud-pause-btn { width: 34px; height: 34px; }
            .game-hud { padding: 8px 8px; gap: 6px; }
            .hud-stats { gap: 8px; }
        }