/* ==========================================================
           WORDLE — Nyza Games
           Clean NYT-style on warm off-white with smooth juice:
             • flip + scale-pop letter reveal (200ms stagger)
             • row shake on invalid submit
             • tile bounce on typing
             • confetti on win
             • daily / practice modes, 3 length tiers, streak, stats,
               hint button, pause feature, virtual keyboard.
           ========================================================== */

        body.game-page {
            --t-bg: #ffffff;
            --t-bg-grad: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
            --t-text: #1a1a1b;
            --t-text-muted: #3a3a3c;
            --t-text-subtle: #787c7e;
            --t-primary: #6aaa64;
            --t-primary-mid: #538d4e;
            --t-primary-dark: #c9b458;
            --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, #6aaa64, #538d4e);
            --t-correct: #538d4e;
            --t-present: #b59f3b;
            --t-absent: #3a3a3c;
        }
        body.game-page .game-name,
        body.game-page .hub-title,
        body.game-page .score-value { color: #1a1a1b !important; -webkit-text-fill-color: #1a1a1b !important; background: none !important; }

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

        /* -------- Top control bar (modes + length) -------- */
        .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 0.95rem; border: none; border-radius: 20px;
            font-family: inherit; font-size: 0.72rem; 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(106,170,100,0.10); }
        .seg-btn:active { transform: translateY(1px); }
        .seg-btn.active {
            background: linear-gradient(135deg, #6aaa64, #538d4e);
            color: #fff;
            box-shadow: 0 2px 10px rgba(83,141,78,0.35);
        }
        .seg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .seg-btn .seg-sub { display: block; font-size: 0.55rem; opacity: 0.7; font-weight: 600; margin-top: 1px; letter-spacing: 0.06em; }

        /* -------- HUD strip (streak + buttons) -------- */
        .hud-strip {
            display: flex; gap: 0.6rem; align-items: center; justify-content: space-between;
            margin-bottom: 0.6rem;
        }
        .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.10));
            border: 1px solid rgba(245,158,11,0.35);
        }
        .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: 36px; height: 36px; 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(106,170,100,0.12); border-color: rgba(106,170,100,0.4); color: #538d4e; }
        .hud-btn:active { transform: scale(0.94); }
        .hud-btn.used { opacity: 0.35; cursor: not-allowed; }
        .hud-btn svg { width: 18px; height: 18px; }

        /* -------- Board -------- */
        .board {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            margin-bottom: 0.7rem; perspective: 600px;
        }
        .row { display: flex; gap: 6px; }
        .cell {
            /* Width-aware (12vw) AND height-aware (8dvh): on desktop the rail
               eats the horizontal space, so the board is sized off the viewport
               HEIGHT (the dvh term) to FILL the screen — matching 2048/snake's
               larger boards instead of floating as a small grid. The dvh term
               also keeps the 6-row grid + keyboard above the fold on short
               (≈720p) laptops. On tall/narrow mobile, min() picks the 12vw width
               term, so mobile sizing is unchanged. */
            width: clamp(38px, min(12vw, 8dvh), 78px); height: clamp(38px, min(12vw, 8dvh), 78px);
            display: flex; align-items: center; justify-content: center;
            background: transparent;
            border: 2px solid #d3d6da;
            border-radius: 8px;
            font-family: 'Orbitron', monospace;
            font-size: clamp(1.2rem, 4.5vw, 1.7rem);
            font-weight: 700;
            text-transform: uppercase; color: #1a1a1b;
            transform-style: preserve-3d;
            transition: transform 0.15s ease, border-color 0.18s, background 0.18s;
        }
        .cell.filled {
            border-color: #878a8c;
            background: rgba(0,0,0,0.025);
            animation: tilePop 0.12s ease;
        }
        @keyframes tilePop {
            0%   { transform: scale(0.85); }
            55%  { transform: scale(1.10); }
            100% { transform: scale(1.0); }
        }
        .cell.hint-reveal {
            border-color: #b59f3b;
            background: rgba(181,159,59,0.12);
            animation: tilePop 0.25s ease;
        }
        .cell.flip {
            animation: cellFlip 0.6s ease forwards;
        }
        @keyframes cellFlip {
            0%   { transform: rotateX(0deg);   }
            45%  { transform: rotateX(90deg);  }
            55%  { transform: rotateX(90deg);  }
            100% { transform: rotateX(0deg);   }
        }
        .cell.correct {
            background: var(--t-correct);
            border-color: var(--t-correct);
            color: #fff;
            box-shadow: 0 4px 12px rgba(83,141,78,0.30);
            animation: cellPop 0.32s cubic-bezier(0.34,1.56,0.64,1);
        }
        .cell.present {
            background: var(--t-present);
            border-color: var(--t-present);
            color: #fff;
            box-shadow: 0 4px 12px rgba(181,159,59,0.30);
        }
        .cell.absent {
            background: var(--t-absent);
            border-color: var(--t-absent);
            color: #fff;
        }
        @keyframes cellPop {
            0%   { transform: scale(0.9); }
            45%  { transform: scale(1.18); }
            100% { transform: scale(1.0); }
        }
        @keyframes rowShake {
            0%, 100% { transform: translateX(0); }
            10%, 90% { transform: translateX(-7px); }
            30%, 70% { transform: translateX(7px); }
            50%      { transform: translateX(-5px); }
        }
        .row.shake { animation: rowShake 0.42s ease; }

        /* -------- Win-row dance -------- */
        @keyframes winBounce {
            0%   { transform: translateY(0);    }
            20%  { transform: translateY(-12px);}
            40%  { transform: translateY(0);    }
            60%  { transform: translateY(-6px); }
            80%  { transform: translateY(0);    }
            100% { transform: translateY(0);    }
        }
        .cell.win-bounce { animation: winBounce 0.55s ease; }

        /* -------- Virtual keyboard -------- */
        .keyboard { display: flex; flex-direction: column; align-items: center; gap: 5px; }
        .kb-row { display: flex; gap: 4px; }
        .key {
            /* Height-aware: scale keyboard rows off viewport height (7.2dvh) so
               on desktop they grow with the taller board yet still stay above
               the fold on short (≈720p) laptops. min() keeps mobile
               (width-limited, tall) on the 11vw term unchanged. */
            min-width: clamp(26px, 7.5vw, 44px); height: clamp(40px, min(11vw, 7.2dvh), 60px);
            display: flex; align-items: center; justify-content: center;
            border: none; border-radius: 6px;
            font-family: inherit; font-size: clamp(0.7rem, 2.5vw, 0.9rem); font-weight: 700;
            cursor: pointer; background: #d3d6da; color: #1a1a1b;
            box-shadow: 0 2px 0 rgba(0,0,0,0.18);
            transition: transform 0.1s, box-shadow 0.1s, background 0.2s, color 0.2s;
            text-transform: uppercase; user-select: none;
        }
        .key:hover:not(:disabled) { background: #a8aaad; }
        .key:active:not(:disabled) {
            transform: translateY(2px);
            box-shadow: 0 0 0 rgba(0,0,0,0.18);
        }
        .key.wide { min-width: clamp(50px, 13vw, 76px); font-size: 0.65rem; letter-spacing: 0.02em; }
        .key.correct { background: var(--t-correct); color: #fff; }
        .key.present { background: var(--t-present); color: #fff; }
        .key.absent  { background: var(--t-absent);  color: #fff; opacity: 0.85; }
        .key:disabled { opacity: 0.6; cursor: not-allowed; }

        /* -------- Toast -------- */
        .toast {
            position: fixed; top: 88px; left: 50%; transform: translate(-50%, -10px);
            padding: 0.7rem 1.3rem; border-radius: 10px;
            background: #1a1a1b; color: #fff;
            font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
            z-index: 200;
            box-shadow: 0 10px 28px rgba(0,0,0,0.30);
            opacity: 0; pointer-events: none;
            transition: opacity 0.25s, transform 0.25s;
        }
        .toast.visible { opacity: 1; transform: translate(-50%, 0); }

        /* -------- Overlays (pause / stats / gameover) -------- */
        .ht-overlay {
            position: fixed; inset: 0;
            background: rgba(15, 15, 18, 0.62);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none; align-items: center; justify-content: center;
            z-index: 500; padding: 1rem;
        }
        .ht-overlay.active { display: flex; }
        .ht-overlay-box {
            width: min(420px, 100%);
            background: #ffffff;
            color: #1a1a1b;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 18px;
            padding: 1.6rem 1.4rem 1.3rem;
            text-align: center;
            box-shadow: 0 24px 60px rgba(0,0,0,0.35);
            max-height: 90vh; overflow-y: auto;
        }
        .ht-overlay-title {
            font-family: 'Orbitron', monospace; font-size: 1.4rem; font-weight: 800;
            margin: 0 0 0.4rem; letter-spacing: 0.02em;
            background: linear-gradient(135deg, #6aaa64, #538d4e);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .ht-overlay-sub {
            font-size: 0.88rem; color: #3a3a3c; margin: 0 0 1rem; line-height: 1.5;
        }
        .ht-answer-word {
            font-family: 'Orbitron', monospace;
            font-size: 1.9rem; font-weight: 800;
            letter-spacing: 0.18em;
            color: #538d4e;
            margin: 0.4rem 0 1rem;
            animation: revealWord 0.6s ease;
        }
        @keyframes revealWord {
            0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
            60%  { opacity: 1; transform: translateY(0) scale(1.06); }
            100% { opacity: 1; transform: translateY(0) scale(1.0); }
        }
        .ht-overlay-row {
            display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 0.4rem;
        }
        .ht-btn {
            padding: 0.65rem 1.3rem; border: none; border-radius: 30px;
            font-family: 'Orbitron', monospace; font-size: 0.72rem; font-weight: 800;
            letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
            text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
        }
        .ht-btn-primary {
            background: linear-gradient(135deg, #6aaa64, #538d4e); color: #fff;
        }
        .ht-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(83,141,78,0.40); }
        .ht-btn-ghost {
            background: rgba(0,0,0,0.04); color: #1a1a1b;
            border: 1px solid rgba(0,0,0,0.12);
        }
        .ht-btn-ghost:hover { background: rgba(0,0,0,0.08); }
        .ht-btn-close {
            position: absolute; top: 12px; right: 14px;
            width: 30px; height: 30px;
            background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.10);
            border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
            color: #3a3a3c;
        }
        .ht-btn-close:hover { background: rgba(0,0,0,0.10); color: #1a1a1b; }
        .ht-overlay-box { position: relative; }

        /* -------- Stats grid -------- */
        .stats-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 0.4rem; margin: 0.6rem 0 1rem;
        }
        .stat-cell {
            padding: 0.5rem 0.2rem;
            background: rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 10px;
        }
        .stat-cell-num { font-family: 'Orbitron', monospace; font-size: 1.1rem; font-weight: 800; color: #1a1a1b; }
        .stat-cell-lbl { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.10em; color: #787c7e; margin-top: 2px; }

        /* Histogram */
        .hist-title {
            font-family: 'Orbitron', monospace; font-size: 0.7rem; text-transform: uppercase;
            letter-spacing: 0.1em; color: #538d4e; margin: 0.4rem 0 0.6rem;
        }
        .hist {
            display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.6rem;
            text-align: left;
        }
        .hist-row {
            display: flex; align-items: center; gap: 6px; font-size: 0.78rem;
        }
        .hist-idx { font-family: 'Orbitron', monospace; font-weight: 700; width: 14px; color: #1a1a1b; flex-shrink: 0; }
        .hist-bar-wrap { flex: 1; background: rgba(0,0,0,0.05); height: 22px; border-radius: 4px; overflow: hidden; }
        .hist-bar {
            height: 100%; background: linear-gradient(90deg, #538d4e, #6aaa64);
            display: flex; align-items: center; justify-content: flex-end;
            padding: 0 6px; color: #fff; font-family: 'Orbitron', monospace; font-size: 0.7rem; font-weight: 700;
            min-width: 22px; transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
        }
        .hist-bar.zero { background: rgba(0,0,0,0.18); color: #fff; }
        .hist-row.highlight .hist-bar { background: linear-gradient(90deg, #b59f3b, #d97706); }

        /* Game-over guesses cell  */
        .end-guess-summary {
            font-family: 'Orbitron', monospace;
            font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
            color: #787c7e; margin-bottom: 0.6rem;
        }

        /* -------- Confetti -------- */
        .confetti-layer {
            position: fixed; inset: 0; pointer-events: none; z-index: 600; overflow: hidden;
        }
        .confetti {
            position: absolute; top: -16px;
            width: 9px; height: 14px; border-radius: 2px;
            opacity: 0.92;
            animation: confettiFall var(--dur) linear forwards;
        }
        @keyframes confettiFall {
            0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
            85%  { opacity: 1; }
            100% { transform: translate(var(--x), 110vh) rotate(720deg); opacity: 0; }
        }

        /* -------- Help / History toggles -------- */
        .panel-toggle {
            margin-top: 0.7rem;
            padding: 0.4rem 1.0rem;
            background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.10);
            color: #3a3a3c; border-radius: 20px;
            font-family: 'Orbitron', monospace; font-size: 0.65rem;
            font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
            cursor: pointer; transition: background 0.18s, color 0.18s;
        }
        .panel-toggle:hover { background: rgba(106,170,100,0.10); color: #538d4e; }
        .panel-toggle + .panel-toggle { margin-left: 0.4rem; }
        .help-panel, .history-panel {
            display: none; width: min(460px, 95vw); margin-top: 0.7rem;
            padding: 1rem 1.1rem; text-align: left;
            background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.10); border-radius: 12px;
            font-size: 0.82rem; line-height: 1.55; color: #3a3a3c;
        }
        .help-panel.active, .history-panel.active { display: block; }
        .help-panel h3 {
            font-family: 'Orbitron', monospace; font-size: 0.68rem; text-transform: uppercase;
            letter-spacing: 0.1em; color: #538d4e; margin: 0.2rem 0 0.4rem;
        }
        .help-panel ul { padding-left: 1.1rem; margin: 0 0 0.6rem; }
        .help-panel li { margin-bottom: 0.25rem; }
        .help-color-swatch {
            display: inline-block; width: 22px; height: 22px; border-radius: 4px; vertical-align: middle;
            margin: 0 0.2rem; color: #fff; text-align: center; line-height: 22px; font-weight: 700; font-size: 0.7rem;
            font-family: 'Orbitron', monospace;
        }

        .history-title {
            font-family: 'Orbitron', monospace; font-size: 0.65rem; text-transform: uppercase;
            letter-spacing: 0.1em; color: #538d4e; text-align: center; margin-bottom: 0.5rem;
        }
        .history-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 240px; overflow-y: auto; }
        .history-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.45rem 0.7rem; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
            border-radius: 8px; font-size: 0.72rem;
        }
        .history-score { font-family: 'Orbitron', monospace; font-weight: 800; }
        .history-score.win  { color: #538d4e; }
        .history-score.loss { color: #c53030; }
        .history-meta { color: #787c7e; font-size: 0.66rem; }
        .history-empty { text-align: center; color: #787c7e; font-size: 0.78rem; padding: 1rem; }

        /* -------- Daily already-played hint -------- */
        .daily-banner {
            font-size: 0.68rem; color: #b45309;
            background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.30);
            border-radius: 10px; padding: 0.25rem 0.6rem;
            margin-bottom: 0.3rem; text-align: center; line-height: 1.25;
        }

        /* ============================================================
           DESKTOP FILL-THE-SCREEN LAYOUT (mirrors snake.html / 2048.html)
           The board + keyboard live in .game-main; the leftover HORIZONTAL
           space is consumed by a side rail (mode / difficulty / streak /
           stats / recent games / how-to-play). Previously the whole game
           floated as one narrow column in a sea of empty desktop 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%;
        }
        /* The board column hugs its content (no empty strip beside it).
           No backdrop-filter here, so a `position:fixed` mobile overlay is
           positioned relative to the viewport, not trapped to this box. */
        .game-main .wordle-container {
            width: auto; max-width: 100%; margin: 0;
        }

        .game-rail {
            width: 340px; flex-shrink: 0;
            display: flex; flex-direction: column; gap: 14px;
        }
        .rail-card {
            background: rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.10);
            border-radius: 16px; padding: 14px 16px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 12px rgba(0,0,0,0.05);
        }
        .rail-card-title {
            font-family: 'Orbitron', monospace; font-size: 0.6rem;
            text-transform: uppercase; letter-spacing: 0.14em;
            color: #538d4e; margin-bottom: 10px;
        }
        /* The mode + length segments stack full-width in the rail. */
        .game-rail .control-bar { margin: 0; gap: 0.55rem; }
        .game-rail .seg { width: 100%; justify-content: stretch; }
        .game-rail .seg-btn { flex: 1; }
        /* Streak + action buttons share a rail card row. */
        .game-rail .hud-strip { margin: 0; }
        /* Recent games + help live in the rail (always-open panels). */
        .game-rail .panel-toggle { display: block; width: 100%; margin: 0; text-align: left; }
        .game-rail .panel-toggle + .panel-toggle { margin-left: 0; margin-top: 8px; }
        .game-rail .help-panel, .game-rail .history-panel {
            width: auto; max-width: none; margin: 10px 0 0;
            background: none; border: none; padding: 0;
        }

        /* Overlays confined to the board on desktop (was full-screen `fixed`),
           so the rail (mode / difficulty re-pick) stays clickable behind the
           end screen. .game-main is the position:relative, NON-filtered
           ancestor; the blur is dropped there so confinement works. */
        .game-main .ht-overlay {
            position: absolute;
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: rgba(255,255,255,0.86);
            border-radius: 16px;
            overflow-y: auto;
            z-index: 20;
        }

        /* In-overlay mode + difficulty re-pick — MOBILE only (desktop uses the
           always-visible rail). Lets the end screen launch a new game 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 .control-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; }
            .game-rail .seg { width: auto; }
            .game-rail .seg-btn { flex: none; }
            /* Mobile: overlays go full-screen (no rail beside the board to
               preserve), so end / start screens get the whole viewport. */
            .game-main .ht-overlay { position: fixed; border-radius: 0; background: rgba(15,15,18,0.62); }
            .overlay-settings {
                display: flex; flex-direction: column; gap: 0.5rem;
                align-items: center; margin: 0.2rem 0 0.9rem;
            }
        }

        @media (max-width: 420px) {
            .wordle-container { padding: 0.8rem 0.6rem 1rem; }
            .ht-overlay-box { padding: 1.3rem 1rem 1.1rem; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }