/* ==========================================================
           CROSSWORD MINI — Nyza Games
           NYT-style 5x5 mini crossword with daily + free play modes.
           Auto-check, reveal hints, confetti, pause, leaderboard.
           ========================================================== */

        body.game-page {
            --t-bg: #ffffff;
            --t-bg-grad: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
            --t-text: #1a1a1b;
            --t-text-muted: #3a3a3c;
            --t-text-subtle: #787c7e;
            --t-primary: #1361b0;
            --t-primary-mid: #2a7fd2;
            --t-primary-dark: #0a4a8f;
            --t-glass-bg: rgba(0,0,0,0.04);
            --t-glass-border: rgba(0,0,0,0.15);
            --t-card-bg: rgba(0,0,0,0.03);
            --t-card-border: rgba(0,0,0,0.12);
            --t-btn-grad: linear-gradient(135deg, #2a7fd2, #1361b0);
            --t-correct: #2d9c5e;
            --t-present: #c9b458;
            --t-absent: #3a3a3c;
        }
        body.game-page .game-name,
        body.game-page .hub-title,
        body.game-page .score-value {
            color: #1361b0 !important;
            -webkit-text-fill-color: #1361b0 !important;
            background: none !important;
        }

        .xw-container { width: min(500px, 95vw); padding: 1rem 1.2rem 1.2rem; }

        /* -------- Mode toggle -------- */
        .control-bar {
            display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
            margin-bottom: 0.6rem;
        }
        .seg {
            display: flex; gap: 0.35rem; background: rgba(0,0,0,0.04);
            border: 1px solid rgba(0,0,0,0.12); border-radius: 24px; padding: 0.25rem;
        }
        .seg-btn {
            padding: 0.4rem 1.1rem; border: none; border-radius: 20px;
            font-family: inherit; font-size: 0.74rem; font-weight: 700;
            letter-spacing: 0.04em; cursor: pointer;
            background: transparent; color: #1a1a1b;
            transition: background 0.18s, color 0.18s, transform 0.12s;
        }
        .seg-btn:hover:not(.active):not(:disabled) { background: rgba(19,97,176,0.08); }
        .seg-btn:active { transform: translateY(1px); }
        .seg-btn.active {
            background: linear-gradient(135deg, #2a7fd2, #1361b0);
            color: #fff;
            box-shadow: 0 2px 10px rgba(19,97,176,0.3);
        }
        .seg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        /* -------- HUD strip -------- */
        .hud-strip {
            display: flex; gap: 0.6rem; align-items: center; justify-content: space-between;
            margin-bottom: 0.6rem;
        }
        .hud-timer {
            display: flex; align-items: center; gap: 0.5rem;
            padding: 0.45rem 0.95rem; border-radius: 24px;
            background: linear-gradient(135deg, rgba(19,97,176,0.10), rgba(42,127,210,0.04));
            border: 1px solid rgba(19,97,176,0.25);
        }
        .hud-timer-val {
            font-family: 'Orbitron', monospace; font-size: 1.05rem;
            font-weight: 800; color: #0a4a8f; letter-spacing: 0.05em;
        }
        .hud-timer-label {
            font-family: 'Orbitron', monospace; font-size: 0.55rem;
            text-transform: uppercase; letter-spacing: 0.12em; color: #1361b0;
        }
        .hud-streak {
            display: flex; align-items: center; gap: 0.5rem;
            padding: 0.45rem 0.85rem; border-radius: 24px;
            background: linear-gradient(135deg, rgba(255,180,80,0.18), rgba(255,140,40,0.08));
            border: 1px solid rgba(245,158,11,0.30);
        }
        .hud-streak-fire { font-size: 1rem; line-height: 1; }
        .hud-streak-val { font-family: 'Orbitron', monospace; font-size: 1rem; font-weight: 800; color: #b45309; }
        .hud-streak-label { font-family: 'Orbitron', monospace; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.12em; color: #92400e; }
        .hud-buttons { display: flex; gap: 0.45rem; }
        .hud-btn {
            width: 38px; height: 38px; border: 1px solid rgba(0,0,0,0.12);
            border-radius: 10px; background: rgba(0,0,0,0.04);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            color: #3a3a3c; transition: transform 0.12s, background 0.15s, border-color 0.15s;
        }
        .hud-btn:hover { background: rgba(19,97,176,0.12); border-color: rgba(19,97,176,0.35); color: #1361b0; }
        .hud-btn:active { transform: scale(0.94); }
        .hud-btn svg { width: 19px; height: 19px; }

        /* -------- Grid -------- */
        .grid-wrap {
            display: flex; justify-content: center; margin-bottom: 0.6rem;
            position: relative;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 2px;
            background: #1a1a1b;
            padding: 2px;
            border-radius: 6px;
            /* Square grid sized by width; the dvh term shrinks it when the
               viewport is short so grid + clue + keyboard fit with no scroll.
               min() keeps tall/narrow mobile (width-limited) unaffected.
               Desktop cap bumped to 500px so the board reads as intentional
               beside the rail (the rail consumes the horizontal slack). */
            width: clamp(180px, min(80vw, calc(100dvh - 530px)), 500px);
            aspect-ratio: 1 / 1;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }
        .cell {
            position: relative;
            background: #ffffff;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            font-family: 'Poppins', -apple-system, sans-serif;
            font-size: clamp(1.4rem, 5.5vw, 1.9rem);
            font-weight: 700;
            text-transform: uppercase;
            color: #1a1a1b;
            user-select: none;
            transition: background 0.12s;
            overflow: hidden;
        }
        .cell.black {
            background: #1a1a1b;
            cursor: default;
        }
        .cell.highlight {
            background: #cee0f4;
        }
        .cell.active {
            background: #fadd6a;
        }
        .cell.correct {
            color: #1361b0;
        }
        .cell.wrong {
            color: #c0392b;
        }
        .cell.revealed {
            color: #c0392b;
        }
        .cell .cell-num {
            position: absolute;
            top: 1px; left: 3px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.55rem;
            font-weight: 700;
            color: #1a1a1b;
            line-height: 1;
        }
        .cell .cell-check {
            position: absolute;
            bottom: 1px; right: 2px;
            width: 10px; height: 10px;
            color: #2d9c5e;
            opacity: 0;
            transform: scale(0);
            transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
        }
        .cell.word-correct .cell-check {
            opacity: 1;
            transform: scale(1);
        }
        @keyframes solveFlash {
            0% { background: #ffffff; }
            50% { background: #d6f5d6; }
            100% { background: #d6f5d6; }
        }
        .grid.solved .cell:not(.black) {
            animation: solveFlash 0.6s ease-out forwards;
        }
        @keyframes cellPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.18); }
            100% { transform: scale(1); }
        }
        .cell.pop > .cell-letter {
            animation: cellPop 0.18s ease-out;
            display: inline-block;
        }

        /* -------- Clue display -------- */
        .clue-bar {
            display: flex; align-items: center; gap: 0.6rem;
            padding: 0.6rem 1rem;
            background: linear-gradient(135deg, rgba(19,97,176,0.06), rgba(42,127,210,0.02));
            border: 1px solid rgba(19,97,176,0.18);
            border-radius: 14px;
            margin-bottom: 0.6rem;
            min-height: 52px;
        }
        .clue-arrow {
            width: 32px; height: 32px;
            border: none; border-radius: 8px;
            background: rgba(19,97,176,0.10);
            color: #1361b0;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .clue-arrow:hover { background: rgba(19,97,176,0.20); }
        .clue-arrow svg { width: 16px; height: 16px; }
        .clue-info { flex: 1; }
        .clue-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.62rem;
            font-weight: 700;
            color: #1361b0;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 2px;
        }
        .clue-text {
            font-size: 0.95rem;
            color: #1a1a1b;
            line-height: 1.35;
            font-weight: 500;
        }

        /* -------- Keyboard -------- */
        .keyboard {
            display: flex; flex-direction: column; gap: 5px;
            margin-bottom: 0.6rem;
        }
        .kb-row {
            display: flex; gap: 4px; justify-content: center;
        }
        .kb-key {
            flex: 1;
            min-width: 0;
            max-width: 38px;
            height: 44px;
            border: none;
            border-radius: 6px;
            background: #d3d6da;
            color: #1a1a1b;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.12s, transform 0.08s;
            text-transform: uppercase;
            display: flex; align-items: center; justify-content: center;
        }
        .kb-key:active { transform: scale(0.92); background: #b8bcc0; }
        .kb-key:hover { background: #c5c8cc; }
        .kb-key.wide {
            flex: 1.6;
            max-width: 60px;
            font-size: 0.7rem;
            letter-spacing: 0.04em;
        }

        /* -------- Action buttons -------- */
        .actions {
            display: flex; gap: 0.45rem; justify-content: center;
            flex-wrap: wrap; margin-bottom: 0.6rem;
        }
        .action-btn {
            padding: 0.5rem 0.9rem;
            border: 1px solid rgba(19,97,176,0.25);
            border-radius: 20px;
            background: rgba(19,97,176,0.05);
            color: #1361b0;
            font-family: inherit;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            cursor: pointer;
            text-transform: uppercase;
            transition: background 0.15s, transform 0.1s;
            display: inline-flex; align-items: center; gap: 0.3rem;
        }
        .action-btn:hover { background: rgba(19,97,176,0.12); }
        .action-btn:active { transform: scale(0.96); }
        .action-btn.danger {
            border-color: rgba(192,57,43,0.25);
            background: rgba(192,57,43,0.05);
            color: #c0392b;
        }
        .action-btn.danger:hover { background: rgba(192,57,43,0.12); }
        .action-btn svg { width: 13px; height: 13px; }

        /* -------- Overlays -------- */
        .overlay {
            position: fixed; inset: 0;
            display: none;
            align-items: center; justify-content: center;
            background: rgba(7,5,10,0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1000;
            padding: 24px;
            text-align: center;
        }
        .overlay.active { display: flex; }
        .overlay-box {
            background: #ffffff;
            border: 1px solid rgba(19,97,176,0.20);
            border-radius: 22px;
            padding: 30px 30px 26px;
            min-width: 280px;
            max-width: 380px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .overlay-title {
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            margin: 0 0 6px;
            color: #1361b0;
        }
        .overlay-sub {
            margin: 0 0 18px;
            color: #3a3a3c;
            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 22px;
            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, #2a7fd2, #1361b0);
            color: #fff;
        }
        .overlay-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(19,97,176,0.35); }
        .overlay-btn-ghost {
            background: rgba(0,0,0,0.04);
            border: 1px solid rgba(0,0,0,0.15);
            color: #1a1a1b;
        }
        .overlay-btn-ghost:hover { background: rgba(0,0,0,0.08); }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin: 14px 0 18px;
        }
        .stat-cell {
            padding: 12px 6px;
            background: rgba(19,97,176,0.05);
            border: 1px solid rgba(19,97,176,0.12);
            border-radius: 10px;
        }
        .stat-cell-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.55rem;
            letter-spacing: 0.14em;
            color: #1361b0;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        .stat-cell-value {
            font-family: 'Orbitron', monospace;
            font-size: 1.15rem;
            font-weight: 800;
            color: #0a4a8f;
        }

        /* Confetti */
        .confetti {
            position: fixed;
            width: 10px; height: 14px;
            top: -20px;
            opacity: 0;
            pointer-events: none;
            z-index: 999;
        }
        @keyframes confettiFall {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
        }

        /* Help panel */
        .help-toggle {
            display: block; margin: 0.7rem auto 0; padding: 0.45rem 1.1rem;
            background: rgba(19,97,176,0.04); border: 1px solid rgba(19,97,176,0.25);
            color: #1361b0; border-radius: 20px; font-family: 'Orbitron', monospace;
            font-size: 0.66rem; cursor: pointer; letter-spacing: 0.12em; text-transform: uppercase;
        }
        .help-toggle:hover { background: rgba(19,97,176,0.10); }
        .help-panel {
            display: none; max-width: 480px; margin: 0.8rem auto 0;
            padding: 1rem 1.2rem;
            background: rgba(19,97,176,0.04);
            border: 1px solid rgba(19,97,176,0.20);
            border-radius: 14px;
            color: #1a1a1b;
            font-family: -apple-system, sans-serif;
            font-size: 0.86rem; line-height: 1.55;
        }
        .help-panel.active { display: block; }
        .help-panel h3 {
            margin: 0 0 6px;
            font-family: 'Orbitron', monospace;
            font-size: 0.78rem;
            color: #1361b0;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .help-panel ul { margin: 0 0 10px; padding-left: 20px; }
        .help-panel li { margin: 3px 0; }
        .help-panel kbd {
            background: rgba(19,97,176,0.10);
            border: 1px solid rgba(19,97,176,0.25);
            border-radius: 4px;
            padding: 1px 6px;
            font-size: 0.75rem;
            font-family: 'Orbitron', monospace;
            color: #0a4a8f;
        }

        /* ==========================================================
           DESKTOP LAYOUT — fill the screen.
           The 5x5 mini board stays a sane size; the side RAIL consumes
           the leftover horizontal space (the play column no longer floats
           as a tiny card in a sea of empty viewport). On mobile the layout
           stacks to a column and the rail drops full-width 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;
        }
        .game-main {
            position: relative; display: flex; flex-direction: column;
            align-items: center; min-width: 0; max-width: 100%;
        }
        /* The play column hugs its content (no empty strip beside the grid). */
        .game-main .xw-container { width: auto; max-width: 100%; padding-top: 0; }

        .game-rail {
            width: 340px; flex-shrink: 0;
            display: flex; flex-direction: column; gap: 14px;
        }
        .rail-card {
            background: rgba(19,97,176,0.05);
            border: 1px solid rgba(19,97,176,0.18);
            border-radius: 16px; padding: 14px 16px;
        }
        .rail-card-title {
            font-family: 'Orbitron', monospace; font-size: 0.6rem;
            text-transform: uppercase; letter-spacing: 0.14em;
            color: #1361b0; margin-bottom: 10px;
        }
        /* Help lives open inside the rail (toggle hidden, panel always shown).
           This is a single-instance element moved into the rail, so there is
           no duplication of any id / [data-mode] / HUD control. */
        .game-rail .help-toggle { display: none; }
        .game-rail .help-panel {
            display: block; max-width: none; margin: 0;
            background: none; border: none; padding: 0;
            font-size: 0.82rem;
        }
        .game-rail .help-panel h3:first-child { margin-top: 0; }

        @media (max-width: 899px) {
            .game-layout {
                flex-direction: column; align-items: center;
                gap: 14px; padding: 0 12px;
            }
            .game-rail { width: 100%; max-width: 480px; }
            /* On mobile the help card drops below the board; restore the
               collapsible toggle so it doesn't dominate the small screen. */
            .game-rail .help-toggle { display: block; }
            .game-rail .help-panel { display: none; }
            .game-rail .help-panel.active { display: block; }
        }

        @media (max-width: 480px) {
            .xw-container { padding: 0.6rem 0.6rem 1rem; }
            .grid { width: min(95vw, 360px); }
            .kb-key { height: 44px; max-width: 34px; font-size: 0.9rem; }
            .kb-key.wide { max-width: 54px; font-size: 0.66rem; }
            .clue-text { font-size: 0.88rem; }
        }