/* =====================================================================
   Word Games — Hub + Wordle styles
   ---------------------------------------------------------------------
   Theming: every color is read from a CSS custom property so the whole
   feature tracks the platform's light / dark / sepia / high-contrast
   themes and updates live on theme switch with no reload (Req 16.5, 16.7).
   Game-specific palette tokens (--wg-*) are defined per theme below and
   referenced via var() throughout — no raw colors live in component rules.

   Layout: logical properties (margin-inline, inset-*, text-align:start)
   keep the UI correct in both LTR and RTL without per-direction rules
   (Req 15.3, 15.4). Controls are >=44px touch targets and the layout is
   single-column at <=768px (Req 16.2, 19.2, 19.3, 19.4).
   ===================================================================== */

/* ---- Game-specific palette tokens (per theme) ---------------------- */

:root {
    --wg-correct-bg: #16a34a;
    --wg-correct-fg: #ffffff;
    --wg-present-bg: #d97706;
    --wg-present-fg: #ffffff;
    --wg-absent-bg: #6b7280;
    --wg-absent-fg: #ffffff;

    --wg-tile-size: 58px;
    --wg-tile-border: var(--border-color, #d1d5db);
    --wg-tile-filled-border: var(--text-muted, #9ca3af);
    --wg-tile-empty-bg: var(--bg-primary, #ffffff);
    --wg-tile-empty-fg: var(--text-primary, #111827);

    --wg-key-bg: var(--bg-tertiary, #e5e7eb);
    --wg-key-fg: var(--text-primary, #111827);
    --wg-key-radius: 10px;

    --wg-overlay-scrim: rgba(15, 23, 42, 0.55);
    --wg-radius: 16px;
}

[data-theme="dark"] {
    --wg-correct-bg: #22c55e;
    --wg-correct-fg: #062012;
    --wg-present-bg: #f59e0b;
    --wg-present-fg: #1f1300;
    --wg-absent-bg: #475569;
    --wg-absent-fg: #f8fafc;
    --wg-overlay-scrim: rgba(0, 0, 0, 0.66);
}

[data-theme="sepia"] {
    --wg-correct-bg: #15803d;
    --wg-correct-fg: #ffffff;
    --wg-present-bg: #b45309;
    --wg-present-fg: #ffffff;
    --wg-absent-bg: #a8a29e;
    --wg-absent-fg: #1c1917;
    --wg-overlay-scrim: rgba(92, 75, 55, 0.5);
}

[data-theme="high-contrast"] {
    /* High contrast: >=4.5:1 text and >=3:1 non-text against black (Req 16.7).
       The per-tile symbol indicator carries the state independent of color. */
    --wg-correct-bg: #00e676;
    --wg-correct-fg: #000000;
    --wg-present-bg: #ffd400;
    --wg-present-fg: #000000;
    --wg-absent-bg: #111111;
    --wg-absent-fg: #ffffff;
    --wg-tile-border: var(--border-color, #00d4ff);
    --wg-tile-filled-border: var(--text-primary, #ffffff);
    --wg-key-bg: #1a1a1a;
    --wg-key-fg: #ffffff;
    --wg-overlay-scrim: rgba(0, 0, 0, 0.8);
}

/* ---- Shared utilities ---------------------------------------------- */

.wg-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible focus indicator, >=3:1 against adjacent surfaces (Req 16.2). */
.wg-hub :focus-visible,
.wg-wordle :focus-visible,
.wg-overlay :focus-visible {
    outline: 3px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =====================================================================
   Hub (cards referenced by word-games.php)
   ===================================================================== */

.wg-hub {
    padding-block: clamp(24px, 5vw, 56px);
}

.wg-hub-hero {
    text-align: center;
    margin-block-end: 32px;
}

.wg-hub-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.wg-hub-subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 56ch;
}

/* Guest banner ("sign in to save", Req 14.3) */
.wg-guest-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    margin-block-end: 28px;
    border-radius: var(--wg-radius);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.wg-guest-banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 600;
}

.wg-guest-banner-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.wg-guest-banner-cta {
    flex-shrink: 0;
}

/* Empty state (Req 1.8) */
.wg-empty-state {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed var(--border-color);
    border-radius: var(--wg-radius);
    background: var(--bg-secondary);
}

.wg-empty-state-icon {
    color: var(--text-muted);
    margin-block-end: 12px;
}

.wg-empty-state-title {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.wg-empty-state-desc {
    color: var(--text-secondary);
    margin: 0;
}

/* Game grid + cards */
.wg-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-block-end: 32px;
}

.wg-game-grid--unavailable {
    opacity: 0.85;
}

.wg-game-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border-radius: var(--wg-radius);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wg-game-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.wg-game-card--unavailable {
    box-shadow: none;
}

.wg-game-card--unavailable:hover {
    transform: none;
    box-shadow: none;
}

.wg-game-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wg-game-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.wg-game-card-hint {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

.wg-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wg-badge--available {
    background: color-mix(in srgb, var(--color-success, #10b981) 18%, transparent);
    color: var(--color-success, #10b981);
}

.wg-badge--unavailable {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.wg-game-card-actions {
    display: flex;
    gap: 10px;
    margin-block-start: auto;
}

/* Play buttons (>=44px touch target, Req 16.2) */
.wg-play-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* =====================================================================
   Wordle game surface
   ===================================================================== */

.wg-game-stage {
    margin-block-start: 28px;
}

.wg-wordle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 520px;
    margin-inline: auto;
    padding: 20px;
    border-radius: var(--wg-radius);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.wg-wordle__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.wg-wordle__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.wg-wordle__instructions {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.wg-wordle__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.wg-wordle__close:hover {
    background: var(--bg-tertiary);
}

.wg-wordle__message {
    min-height: 1.4em;
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.wg-wordle__message--error {
    color: var(--color-error, #ef4444);
}

/* ---- Board --------------------------------------------------------- */

.wg-board {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    width: 100%;
    max-width: calc(var(--wg-tile-size) * 5 + 24px);
    margin-inline: auto;
}

.wg-board__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.wg-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    user-select: none;
    border: 2px solid var(--wg-tile-border);
    border-radius: 8px;
    background: var(--wg-tile-empty-bg);
    color: var(--wg-tile-empty-fg);
}

.wg-tile[data-state="filled"] {
    border-color: var(--wg-tile-filled-border);
}

/* Resolved states */
.wg-tile[data-state="correct"] {
    background: var(--wg-correct-bg);
    color: var(--wg-correct-fg);
    border-color: var(--wg-correct-bg);
}

.wg-tile[data-state="present"] {
    background: var(--wg-present-bg);
    color: var(--wg-present-fg);
    border-color: var(--wg-present-bg);
}

/* Revealed-hint letter placed inside its board cell (dashed = given hint, not a
   played result). Colored with the "correct" green so it reads as confirmed. */
.wg-tile[data-state="hint"] {
    background: color-mix(in srgb, var(--wg-correct-bg, #6aaa64) 28%, transparent);
    color: var(--text-primary, #f8fafc);
    border-color: var(--wg-correct-bg, #6aaa64);
    border-style: dashed;
}

.wg-tile[data-state="absent"] {
    background: var(--wg-absent-bg);
    color: var(--wg-absent-fg);
    border-color: var(--wg-absent-bg);
}

/* Non-color indicators (Req 16.3): each resolved state also shows a distinct
   corner symbol so the feedback is distinguishable without color perception. */
.wg-tile[data-state="correct"]::after,
.wg-tile[data-state="present"]::after,
.wg-tile[data-state="absent"]::after {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.9;
}

.wg-tile[data-state="correct"]::after { content: "\2714"; }  /* ✓ in word, right spot */
.wg-tile[data-state="present"]::after { content: "\25D0"; }  /* ◐ in word, wrong spot */
.wg-tile[data-state="absent"]::after  { content: "\2715"; }  /* ✕ not in word */

/* ---- Animations (Req 16.1: 100-500ms; Req 19.3) -------------------- */

@keyframes wg-pop {
    0%   { transform: scale(0.86); }
    55%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.wg-tile--pop {
    animation: wg-pop 120ms ease-out;
}

@keyframes wg-flip {
    0%   { transform: rotateX(0deg); }
    50%  { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

.wg-tile--flip {
    animation: wg-flip var(--wg-flip-ms, 220ms) ease-in-out both;
}

@keyframes wg-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

.wg-board__row--shake {
    animation: wg-shake 320ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .wg-tile--pop,
    .wg-tile--flip,
    .wg-board__row--shake {
        animation-duration: 1ms;
    }
}

/* ---- On-screen keyboard (hidden by default, mobile-only) ------------------- */

.wg-keyboard {
    /* Uniform key widths (row width ÷ --kb-cols, set per-layout by the JS) so
       every letter key is the SAME size — no flex-stretch differences between
       rows. Enter/Backspace span 1.5 units. */
    --kb-cols: 11;
    --kb-gap: 6px;
    --kb-unit: calc((100% - (var(--kb-cols) - 1) * var(--kb-gap)) / var(--kb-cols));
    display: none; /* Hidden on desktop — mobile uses touch keyboard */
    flex-direction: column;
    gap: 8px;
    width: 100%;
    /* Keys are authored in physical-keyboard order (e.g. Arabic row 1 starts at
       ض, the Q-position key). Force LTR flow so the RTL stage doesn't mirror the
       rows — otherwise ض lands on the right and the layout no longer matches the
       user's physical keyboard (the "swapped sides" bug). */
    direction: ltr;
}

.wg-keyboard__row {
    display: flex;
    justify-content: center;
    gap: var(--kb-gap);
    width: 100%;
}

.wg-key {
    flex: 0 0 auto;
    width: var(--kb-unit);
    min-width: 0;
    height: 52px;
    min-height: 52px;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    /* Match the mini-games (Ladder) tactile keyboard: gradient + 3D shadow */
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, #ffffff 14%), var(--bg-secondary));
    color: var(--text-primary);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform 0.08s ease, background 0.15s ease, box-shadow .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wg-key:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 45%, var(--border-color));
}

.wg-key:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.wg-key--action {
    width: calc(var(--kb-unit) * 1.5 + var(--kb-gap) * 0.5);
    font-size: 1.05rem;
    padding: 0 2px;
}

/* Enter/Backspace icons in Wordle keyboard (match mini-games sizing) */
.wg-key--action svg,
.wg-key--action span { font-size: 1.3rem; }

.wg-key[data-state="correct"] {
    background: var(--wg-correct-bg);
    color: var(--wg-correct-fg);
    border-color: var(--wg-correct-bg);
}

.wg-key[data-state="present"] {
    background: var(--wg-present-bg);
    color: var(--wg-present-fg);
    border-color: var(--wg-present-bg);
}

.wg-key[data-state="absent"] {
    background: var(--wg-absent-bg);
    color: var(--wg-absent-fg);
    border-color: var(--wg-absent-bg);
}

/* =====================================================================
   Result overlay — backdrop-blur, modal-like (Req 19.4)
   ===================================================================== */

.wg-overlay {
    position: fixed;
    inset: 0;
    /* Must sit ABOVE the game stage (#wg-game-stage is z-index 3000) — otherwise
       the win/result popup renders behind the board and only appears once the
       game is closed. Above the help (3400) / leaderboard too. */
    z-index: 3600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wg-overlay--visible {
    opacity: 1;
    visibility: visible;
}

/* Backdrop covers 100% of the viewport and obscures the content behind it
   (Req 19.4) using a scrim + blur for the platform's premium modal feel. */
.wg-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--wg-overlay-scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wg-overlay__card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    padding: 28px 24px;
    border-radius: var(--wg-radius);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s ease;
}

.wg-overlay--visible .wg-overlay__card {
    transform: translateY(0) scale(1);
}

.wg-overlay__icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-block-end: 8px;
}

.wg-overlay__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.wg-overlay__answer {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.wg-overlay__note {
    min-height: 1.2em;
    color: var(--color-primary);
    font-weight: 600;
    margin: 4px 0 0;
}

.wg-overlay__stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 18px 0;
    flex-wrap: wrap;
}

.wg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
}

.wg-stat__value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}

.wg-stat__label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wg-overlay__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: 12px;
}

/* Self-contained buttons so the overlay never depends on page button CSS. */
.wg-btn {
    min-height: 44px;
    padding: 11px 20px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}

.wg-btn--primary {
    background: var(--color-primary);
    color: #ffffff;
}

.wg-btn--primary:hover {
    filter: brightness(1.06);
}

.wg-btn--secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.wg-btn--secondary:hover {
    background: var(--bg-secondary);
}

/* =====================================================================
   Responsive — single column + touch targets <=768px (Req 19.2, 19.3)
   Never any horizontal scroll from 320px to 1920px (Req 19.1).
   ===================================================================== */

@media (max-width: 768px) {
    .wg-game-grid {
        grid-template-columns: 1fr;
    }

    .wg-game-card-actions {
        flex-direction: column;
    }

    .wg-wordle {
        padding: 14px;
        border: none;
        box-shadow: none;
        gap: 14px;
    }

    .wg-board {
        max-width: min(92vw, 360px);
    }

    /* Keep keys as comfortable >=44px touch targets on phones (Req 16.2). */
    .wg-key {
        min-height: 48px;
        min-width: 26px;
        border-radius: 8px;
    }

    .wg-overlay__actions {
        flex-direction: column;
    }

    .wg-btn {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .wg-key {
        min-width: 22px;
        font-size: 0.9rem;
        padding: 0 4px;
    }
}

/* =====================================================================
   RTL — logical properties cover most cases; explicitly mirror the few
   physical glyphs/animations that need it (Req 15.3, 15.4).
   ===================================================================== */

[dir="rtl"] .wg-guest-banner,
[dir="rtl"] .wg-game-card-head {
    /* flex + logical gaps already mirror; nothing physical to flip here */
}

[dir="rtl"] .wg-tile[data-state]::after {
    /* corner symbol stays in the inline-start corner via logical property */
    inset-inline-start: 4px;
}

/* =====================================================================
   Word Search game surface
   ---------------------------------------------------------------------
   Mirrors the Wordle surface conventions: theme custom properties only,
   logical properties for LTR/RTL, >=44px touch targets, single column at
   <=768px. Cell selection/found states are conveyed by background AND a
   border/weight change so they read without color alone (Req 5.4, 5.5).
   ===================================================================== */

:root {
    --wg-ws-cell-bg: var(--bg-primary, #ffffff);
    --wg-ws-cell-fg: var(--text-primary, #111827);
    --wg-ws-cell-border: var(--border-color, #d1d5db);
    --wg-ws-select-bg: var(--color-primary, #2563eb);
    --wg-ws-select-fg: #ffffff;
    --wg-ws-found-bg: var(--wg-correct-bg, #16a34a);
    --wg-ws-found-fg: var(--wg-correct-fg, #ffffff);
}

[data-theme="high-contrast"] {
    --wg-ws-select-bg: #00d4ff;
    --wg-ws-select-fg: #000000;
    --wg-ws-found-bg: #00e676;
    --wg-ws-found-fg: #000000;
    --wg-ws-cell-border: var(--text-primary, #ffffff);
}

.wg-wordsearch {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 920px;
    margin-inline: auto;
    padding: 20px;
    border-radius: var(--wg-radius);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.wg-wordsearch__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wg-wordsearch__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.wg-wordsearch__instructions {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.wg-wordsearch__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.wg-wordsearch__close:hover {
    background: var(--bg-tertiary);
}

.wg-wordsearch__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wg-wordsearch__progress {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

.wg-wordsearch__message {
    min-height: 1.4em;
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.wg-wordsearch__message--error {
    color: var(--color-error, #ef4444);
}

/* Body: grid + remaining-words list side-by-side, stacking on narrow screens. */
.wg-wordsearch__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(160px, 26%, 240px);
    gap: 20px;
    align-items: start;
}

.wg-wordsearch__gridwrap {
    min-width: 0;
}

/* ---- The letter grid ---------------------------------------------- */

.wg-ws-grid {
    display: grid;
    /* one square column per grid cell; --wg-ws-cols set inline by the JS. */
    grid-template-columns: repeat(var(--wg-ws-cols, 10), 1fr);
    gap: clamp(2px, 0.6vw, 5px);
    width: 100%;
    touch-action: none; /* let pointer drag-selection own the gesture */
    user-select: none;
}

.wg-ws-grid__row {
    display: contents;
}

.wg-ws-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    /* Lighter, airier letters — heavy bold read cramped and hurt the eyes,
       especially for Arabic glyphs. Shared by Word Search + Secret Word.
       Cells are larger now (see the grid sizing below), so the glyph can grow
       a touch while the WEIGHT drops for a calmer, more legible look. */
    font-size: clamp(1rem, 4.2vw, 1.45rem);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--wg-ws-cell-border);
    border-radius: 6px;
    background: var(--wg-ws-cell-bg);
    color: var(--wg-ws-cell-fg);
    transition: background 0.1s ease, transform 0.08s ease, border-color 0.1s ease;
}

.wg-ws-cell[data-state="selecting"] {
    background: var(--wg-ws-select-bg);
    color: var(--wg-ws-select-fg);
    border-color: var(--wg-ws-select-bg);
    transform: scale(1.04);
    z-index: 1;
}

.wg-ws-cell[data-state="found"] {
    background: var(--wg-ws-found-bg);
    color: var(--wg-ws-found-fg);
    border-color: var(--wg-ws-found-bg);
    /* Slightly bolder than the default so a found cell still reads without
       relying on color (Req 5.4), but no longer heavy. */
    font-weight: 600;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .wg-ws-cell {
        transition-duration: 1ms;
    }
}

/* ---- Remaining-words list (Req 5.7) ------------------------------- */

.wg-wordsearch__words {
    border-inline-start: 1px solid var(--border-color);
    padding-inline-start: 16px;
}

.wg-wordsearch__words-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.wg-ws-wordlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wg-ws-wordlist__item {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 2px;
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* A found word is struck through AND dimmed so the removal reads without
   relying on color alone (Req 5.4); it stays listed but visibly resolved. */
.wg-ws-wordlist__item--found {
    color: var(--text-muted);
    opacity: 0.65;
    text-decoration: line-through;
}

/* =====================================================================
   Word Search — responsive: single column at <=768px (Req 19.2)
   ===================================================================== */

@media (max-width: 768px) {
    .wg-wordsearch {
        padding: 14px;
        border: none;
        box-shadow: none;
    }

    .wg-wordsearch__body {
        grid-template-columns: 1fr;
    }

    /* Word list moves below the grid: drop the inline divider, add a top one. */
    .wg-wordsearch__words {
        border-inline-start: none;
        border-block-start: 1px solid var(--border-color);
        padding-inline-start: 0;
        padding-block-start: 14px;
    }

    .wg-ws-wordlist {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

/* =====================================================================
   Anagrams / Word Scramble game surface
   ---------------------------------------------------------------------
   Mirrors the Wordle / Word Search surface conventions: theme custom
   properties only (no literal colors that ignore the active theme),
   >=44px touch targets, RTL-aware via logical properties, and a single
   column at <=768px (Req 6.3, 6.5, 6.6, 19.x). The scramble is presented
   as tactile letter tiles the player taps into an arrangement row.
   ===================================================================== */

:root {
    --wg-an-tile-bg: var(--bg-primary, #ffffff);
    --wg-an-tile-fg: var(--text-primary, #111827);
    --wg-an-tile-border: var(--border-color, #d1d5db);
    --wg-an-tile-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    --wg-an-placed-bg: var(--color-primary, #2563eb);
    --wg-an-placed-fg: #ffffff;
    --wg-an-slot-bg: var(--bg-secondary, #f3f4f6);
    --wg-an-slot-border: var(--border-color, #d1d5db);
}

[data-theme="high-contrast"] {
    --wg-an-tile-border: var(--text-primary, #ffffff);
    --wg-an-placed-bg: #00d4ff;
    --wg-an-placed-fg: #000000;
    --wg-an-slot-border: var(--text-primary, #ffffff);
}

.wg-anagrams {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
    border-radius: var(--wg-radius, 16px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.wg-anagrams__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wg-anagrams__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.wg-anagrams__instructions {
    margin: 4px 0 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.wg-anagrams__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    transition: background 0.12s ease, color 0.12s ease;
}

.wg-anagrams__close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.wg-anagrams__message {
    min-height: 1.4em;
    margin: 0;
    font-weight: 600;
    text-align: center;
    color: var(--text-secondary);
}

.wg-anagrams__message--error {
    color: var(--color-error, #ef4444);
}

/* ---- Arrangement row (the answer being built) --------------------- */

.wg-an-answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    padding: 12px;
    border-radius: 12px;
    background: var(--wg-an-slot-bg);
    border: 2px dashed var(--wg-an-slot-border);
}

.wg-an-answer__placeholder {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
}

/* Brief shake to signal a rejected submission (Req 6.5/6.6). */
.wg-an-answer--shake {
    animation: wg-an-shake 0.32s ease;
}

@keyframes wg-an-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ---- Tile pool (the scrambled letters) ---------------------------- */

.wg-an-pool {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
}

.wg-an-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 10px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid var(--wg-an-tile-border);
    border-radius: 10px;
    background: var(--wg-an-tile-bg);
    color: var(--wg-an-tile-fg);
    box-shadow: var(--wg-an-tile-shadow);
    transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.wg-an-tile:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary, #2563eb);
}

.wg-an-tile:active {
    transform: translateY(0) scale(0.96);
}

/* A used tile stays in place as a dimmed, empty slot so the layout is stable. */
.wg-an-tile[data-used="1"] {
    visibility: hidden;
    pointer-events: none;
}

.wg-an-tile--placed {
    background: var(--wg-an-placed-bg);
    color: var(--wg-an-placed-fg);
    border-color: var(--wg-an-placed-bg);
    box-shadow: none;
}

.wg-an-tile--placed:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .wg-an-tile,
    .wg-an-answer--shake {
        transition-duration: 1ms;
        animation: none;
    }
}

/* ---- Controls ----------------------------------------------------- */

.wg-anagrams__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.wg-anagrams__actions .wg-btn {
    flex: 0 1 auto;
}

/* =====================================================================
   Anagrams — responsive: single column / full-width controls at <=768px
   ===================================================================== */

@media (max-width: 768px) {
    .wg-anagrams {
        padding: 14px;
        border: none;
        box-shadow: none;
    }

    .wg-anagrams__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wg-anagrams__actions .wg-btn {
        width: 100%;
    }
}

/* =====================================================================
   Crossword game surface
   ---------------------------------------------------------------------
   Mirrors the Wordle / Word Search / Anagrams conventions: theme custom
   properties only (no literal colors that ignore the active theme),
   logical properties for LTR/RTL, >=44px touch targets, and a single
   column at <=768px where the clue list reflows below the grid
   (Req 7.4, 16.2, 16.3, 19.x). Per-cell correctness after a Check is
   conveyed by background AND a ✓/✗ symbol so it reads without relying on
   color alone (Req 7.5, 16.3 spirit).
   ===================================================================== */

:root {
    --wg-cw-cell-bg: var(--bg-primary, #ffffff);
    --wg-cw-cell-fg: var(--text-primary, #111827);
    --wg-cw-cell-border: var(--border-color, #d1d5db);
    --wg-cw-block-bg: var(--text-primary, #111827);
    --wg-cw-active-bg: var(--color-primary, #2563eb);
    --wg-cw-active-fg: #ffffff;
    --wg-cw-inentry-bg: color-mix(in srgb, var(--color-primary, #2563eb) 16%, var(--bg-primary, #ffffff));
    --wg-cw-correct-bg: var(--wg-correct-bg, #16a34a);
    --wg-cw-correct-fg: var(--wg-correct-fg, #ffffff);
    --wg-cw-incorrect-bg: var(--color-error, #ef4444);
    --wg-cw-incorrect-fg: #ffffff;
}

[data-theme="high-contrast"] {
    --wg-cw-cell-border: var(--text-primary, #ffffff);
    --wg-cw-active-bg: #00d4ff;
    --wg-cw-active-fg: #000000;
    --wg-cw-inentry-bg: #003a4d;
    --wg-cw-correct-bg: #00e676;
    --wg-cw-correct-fg: #000000;
    --wg-cw-incorrect-bg: #ff5252;
    --wg-cw-incorrect-fg: #000000;
}

.wg-crossword {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.wg-crossword__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.wg-crossword__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.wg-crossword__instructions {
    font-size: 0.95rem;
    color: var(--text-muted, #6b7280);
    margin: 4px 0 0;
}

.wg-crossword__close {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.wg-crossword__close:hover {
    background: var(--bg-secondary, #f3f4f6);
}

.wg-crossword__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wg-crossword__progress {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    margin: 0 0 6px;
}

.wg-crossword__message {
    min-height: 1.2em;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.wg-crossword__message--error {
    color: var(--color-error, #ef4444);
}

/* Body: grid + clue lists side-by-side, stacking on narrow screens. */
.wg-crossword__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 34%, 340px);
    gap: 20px;
    align-items: start;
}

.wg-crossword__gridwrap {
    min-width: 0;
    /* Wide grids scroll within their own box so the page never scrolls
       horizontally from 320px upward (Req 19.1). */
    overflow: auto;
}

/* ---- The crossword grid ------------------------------------------- */

.wg-cw-grid {
    display: grid;
    /* one square column per grid column; --wg-cw-cols set inline by the JS.
       minmax keeps cells tappable (>=44px target via the input) while letting
       small grids expand to fill the available width. */
    grid-template-columns: repeat(var(--wg-cw-cols, 10), minmax(38px, 1fr));
    gap: 2px;
    width: 100%;
}

.wg-cw-grid__row {
    display: contents;
}

.wg-cw-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 38px;
    min-height: 38px;
}

/* Blocked square: not part of any word. */
.wg-cw-cell--block {
    background: transparent;
}

.wg-cw-cell--fillable {
    background: var(--wg-cw-cell-bg);
    border: 1px solid var(--wg-cw-cell-border);
    border-radius: 4px;
    overflow: hidden;
}

/* Clue-number badge in the entry's starting cell. */
.wg-cw-cell__num {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 2px;
    font-size: clamp(0.5rem, 1.5vw, 0.62rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted, #6b7280);
    pointer-events: none;
    z-index: 2;
}

.wg-cw-cell__input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wg-cw-cell-fg);
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 2.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1;
    caret-color: var(--color-primary, #2563eb);
    transition: background 0.1s ease, color 0.1s ease;
}

.wg-cw-cell__input:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: -2px;
}

/* Cells of the active entry get a soft tint; the focused cell is strongest. */
.wg-cw-cell--inentry .wg-cw-cell__input {
    background: var(--wg-cw-inentry-bg);
}

.wg-cw-cell--active .wg-cw-cell__input {
    background: var(--wg-cw-active-bg);
    color: var(--wg-cw-active-fg);
    caret-color: var(--wg-cw-active-fg);
}

/* ---- Per-cell correctness after Check (Req 7.5, 7.6) -------------- */
/* Background carries the state AND a corner ✓/✗ glyph so correctness reads
   without relying on color alone (Req 16.3 spirit / color-blind safe). */

.wg-cw-cell[data-check="correct"] {
    background: var(--wg-cw-correct-bg);
}

.wg-cw-cell[data-check="correct"] .wg-cw-cell__input {
    color: var(--wg-cw-correct-fg);
}

.wg-cw-cell[data-check="incorrect"] {
    background: var(--wg-cw-incorrect-bg);
}

.wg-cw-cell[data-check="incorrect"] .wg-cw-cell__input {
    color: var(--wg-cw-incorrect-fg);
}

.wg-cw-cell[data-check]::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 1px;
    font-size: clamp(0.55rem, 1.6vw, 0.72rem);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.wg-cw-cell[data-check="correct"]::after {
    content: "\2713"; /* ✓ */
    color: var(--wg-cw-correct-fg);
}

.wg-cw-cell[data-check="incorrect"]::after {
    content: "\2717"; /* ✗ */
    color: var(--wg-cw-incorrect-fg);
}

.wg-cw-cell__input:focus {
    transition-duration: 1ms;
}

@media (prefers-reduced-motion: reduce) {
    .wg-cw-cell__input {
        transition-duration: 1ms;
    }
}

/* ---- Clue lists (Req 7.4) ----------------------------------------- */

.wg-crossword__clues {
    border-inline-start: 1px solid var(--border-color);
    padding-inline-start: 16px;
    min-width: 0;
}

.wg-crossword__cluegroup + .wg-crossword__cluegroup {
    margin-block-start: 18px;
}

.wg-crossword__clues-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.wg-cw-cluelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wg-cw-cluelist__item {
    margin: 0;
}

.wg-cw-clue {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    min-height: 44px; /* >=44px touch target (Req 16.2) */
    padding: 8px 10px;
    text-align: start;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.wg-cw-clue:hover {
    background: var(--bg-primary, #ffffff);
}

.wg-cw-clue--active {
    background: var(--wg-cw-inentry-bg);
    border-color: var(--color-primary, #2563eb);
    font-weight: 700;
}

.wg-cw-clue__num {
    flex: none;
    font-weight: 800;
    color: var(--color-primary, #2563eb);
}

.wg-cw-clue__text {
    min-width: 0;
}

/* =====================================================================
   Crossword — responsive: single column at <=768px, clue list below grid
   (Req 19.2, 7.4)
   ===================================================================== */

@media (max-width: 768px) {

    .wg-crossword {
        padding: 14px;
        border: none;
        box-shadow: none;
    }

    .wg-crossword__body {
        grid-template-columns: 1fr;
    }

    /* Clue list moves below the grid: drop the inline divider, add a top one. */
    .wg-crossword__clues {
        border-inline-start: none;
        border-block-start: 1px solid var(--border-color);
        padding-inline-start: 0;
        padding-block-start: 14px;
    }

    .wg-crossword__toolbar .wg-btn {
        flex: 1 1 auto;
    }
}

/* ---- Enter the 3D Arena CTA (hub hero) ---------------------------------- */
.wg-arena-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(100deg, #1a1140 0%, #3a1a5c 45%, #5c1a3a 100%);
    border: 1px solid rgba(140, 120, 255, 0.4);
    box-shadow: 0 10px 34px rgba(90, 70, 255, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.wg-arena-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 60px at 20% 0%, rgba(36, 224, 255, 0.35), transparent 70%),
                radial-gradient(120px 60px at 90% 100%, rgba(255, 62, 165, 0.35), transparent 70%);
    opacity: 0.8;
    pointer-events: none;
}
.wg-arena-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(90, 70, 255, 0.5); }
.wg-arena-cta-ico { font-size: 1.8rem; position: relative; z-index: 1; }
.wg-arena-cta-text { display: flex; flex-direction: column; text-align: start; position: relative; z-index: 1; }
.wg-arena-cta-text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }
.wg-arena-cta-text small { font-size: 0.82rem; opacity: 0.85; }
.wg-arena-cta-arrow { font-size: 1.3rem; position: relative; z-index: 1; transition: transform 0.2s ease; }
.wg-arena-cta:hover .wg-arena-cta-arrow { transform: translateX(4px); }
[dir="rtl"] .wg-arena-cta-arrow { transform: scaleX(-1); }
[dir="rtl"] .wg-arena-cta:hover .wg-arena-cta-arrow { transform: scaleX(-1) translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .wg-arena-cta, .wg-arena-cta-arrow { transition: none; }
}

/* ==========================================================================
   Hub gallery — full portrait "deck cards" that showcase the cover art
   ========================================================================== */
.wg-game-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: two cards across */
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
    padding: 8px 0 4px;
}
@media (min-width: 720px) {
    /* Desktop / tablet: three columns. */
    .wg-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}

.wg-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: #1c1408;
    box-shadow: 0 14px 34px rgba(40, 26, 8, 0.28);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s ease;
}
/* Hover-zoom ONLY for a genuine mouse pointer. On touch / hybrid devices (and
   DevTools device emulation) :hover latches on tap and never clears until you
   tap elsewhere — that was the "card stays zoomed after mouse exit" bug. Gating
   with (hover:hover) means touch never zooms, so nothing can get stuck. The
   always-on `will-change:transform` was also removed: it could leave Chrome's
   compositor pinned mid-transform when the mouse left quickly. */
@media (hover: hover) and (pointer: fine) {
    .wg-card--available:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 26px 60px rgba(40, 26, 8, 0.45);
    }
    .wg-card--available:hover .wg-card-art img { transform: scale(1.04); }
}

/* The cover art IS the card face (portrait, ~9:16). */
.wg-card-art {
    position: relative;
    aspect-ratio: 9 / 16;
    background: linear-gradient(150deg, #2a2016, #120b05);
    overflow: hidden;
}
.wg-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
/* (hover image-zoom is defined in the (hover:hover) block above) */

/* Placeholder title if a cover image is missing. */
.wg-card-arttitle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffd79a;
    background: radial-gradient(circle at 50% 40%, rgba(255, 207, 92, 0.15), transparent 70%);
}

/* Unavailable: dim the art + ribbon. */
.wg-card--unavailable .wg-card-art img,
.wg-card--unavailable .wg-card-arttitle { filter: grayscale(0.75) brightness(0.62); }
.wg-card-ribbon {
    position: absolute;
    top: 16px;
    inset-inline-end: -34px;
    transform: rotate(45deg);
    background: #6b7280;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Action footer beneath the art (keeps the printed cover title clean). */
.wg-card-foot {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(180deg, #241a0c, #1c1408);
}
.wg-card-foot .wg-play-btn {
    flex: 1;
    appearance: none;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.wg-card-foot .wg-play-btn--daily {
    color: #2a1a06;
    background: linear-gradient(92deg, #ffcf5c, #e0813c);
}
.wg-card-foot .wg-play-btn--practice {
    color: #ffe9c4;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(202, 162, 74, 0.5);
}
.wg-card-foot .wg-play-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.wg-card-foot .wg-play-btn:active { transform: translateY(0); }

.wg-card-hint {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #9a8f78;
    background: #1c1408;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .wg-card, .wg-card-art img, .wg-card-foot .wg-play-btn { transition: none; }
    .wg-card--available:hover { transform: none; }
}

/* ==========================================================================
   Mini-games framework (Hangman, Word Scramble, …) — parchment surface
   ========================================================================== */
.mg {
    background: #fbf7ef;
    color: #2a2016;
    border-radius: 16px;
    padding: 20px;
    max-width: 640px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.mg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mg-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: #3a2a12; }
.mg-instr { margin: 4px 0 0; color: #7a6a4a; font-size: 0.92rem; }
.mg-close {
    flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
    background: rgba(0,0,0,0.06); color: #3a2a12; font-size: 1.5rem; line-height: 1;
}
.mg-close:hover { background: rgba(0,0,0,0.12); }
.mg-msg { min-height: 1.4em; margin: 6px 0 14px; text-align: center; font-weight: 700; color: #7a6a4a; }
.mg-msg.is-win { color: #2f7a30; }
.mg-msg.is-lose { color: #b0392f; }
.mg-loading { text-align: center; color: #7a6a4a; padding: 30px 0; }
.mg-body { display: flex; flex-direction: column; align-items: center; }

.mg-btn {
    appearance: none; min-height: 44px; padding: 0 18px; margin-top: 6px;
    border-radius: 11px; border: 1px solid rgba(202,162,74,0.6);
    background: rgba(202,162,74,0.12); color: #3a2a12; font-weight: 700; font-size: 0.92rem; cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.mg-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.mg-btn.primary { border: 0; color: #2a1a06; background: linear-gradient(92deg, #ffcf5c, #e0813c); }

/* Hangman */
.mg-hm-lives { display: flex; gap: 5px; margin-bottom: 16px; font-size: 1.4rem; }
.mg-heart { color: #d64545; }
.mg-heart.spent { color: #d8cfc0; }
.mg-hm-word { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.mg-hm-slot {
    width: 34px; height: 46px; border-bottom: 3px solid #b59a6a;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: #3a2a12;
}
.mg-hm-slot.missed { color: #b0392f; }
.mg-keyboard { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; }
.mg-key {
    min-width: 38px; height: 46px; padding: 0 6px; border-radius: 9px;
    border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #2a2016;
    font-weight: 700; font-size: 1rem; text-transform: uppercase; cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease;
}
.mg-key:hover:not(:disabled) { background: #f3ead6; }
.mg-key:active:not(:disabled) { transform: translateY(2px); }
.mg-key.good { background: #2f7a30; color: #fff; border-color: #2f7a30; }
.mg-key.bad { background: #e3d9c6; color: #a0937c; border-color: transparent; }
.mg-key:disabled { cursor: default; }

/* Word Scramble */
.mg-sc-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; }
.mg-sc-tile {
    width: 52px; height: 60px; border-radius: 10px;
    background: linear-gradient(180deg, #fff, #efe6d2); border: 1px solid #cdbb96;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; font-weight: 800; text-transform: uppercase; color: #3a2a12;
    box-shadow: 0 3px 0 #cdbb96;
}
.mg-sc-form { display: flex; gap: 8px; width: 100%; max-width: 360px; min-width: 0; }
.mg-sc-input {
    flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 11px;
    border: 2px solid #cdbb96; background: #fff; color: #2a2016;
    font-size: 1.1rem; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 0.08em;
}
.mg-sc-input:focus { outline: none; border-color: #e0813c; }
.mg-sc-input.shake { animation: mg-shake 0.32s ease; }
@keyframes mg-shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-7px);} 40%,80%{transform:translateX(7px);} }
.mg-sc-tools { display: flex; gap: 8px; margin-top: 14px; }

@media (max-width: 520px) {
    .mg-sc-tile { width: 44px; height: 52px; font-size: 1.6rem; }
    .mg-key { min-width: 30px; height: 44px; font-size: 0.95rem; }
    .mg-hm-slot { width: 28px; height: 40px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mg-btn, .mg-key { transition: none; }
    .mg-sc-input.shake { animation: none; }
}

/* ---- Mini-game stat bar, hint, result panel ----------------------------- */
.mg-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; flex-wrap: wrap; }
.mg-stat { font-weight: 800; color: #7a5a2a; font-size: 0.95rem; }
.mg-hintbtn {
    margin-inline-start: auto; appearance: none; min-height: 36px; padding: 0 14px;
    border-radius: 999px; border: 1px solid rgba(202,162,74,0.6);
    background: rgba(202,162,74,0.12); color: #3a2a12; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.mg-hintbtn:hover { background: rgba(202,162,74,0.22); }

.mg-result { text-align: center; margin-top: 18px; padding: 18px; border-radius: 16px; background: rgba(202,162,74,0.08); border: 1px solid rgba(202,162,74,0.3); animation: mg-pop 0.3s ease; }
@keyframes mg-pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-result-emoji { font-size: 2.4rem; display: flex; justify-content: center; align-items: center; }
.mg-result-title { margin: 4px 0 2px; font-size: 1.4rem; font-weight: 800; color: #3a2a12; }
.mg-result.win .mg-result-title { color: #2f7a30; }
.mg-result-note { margin: 0 0 12px; color: #7a6a4a; }
.mg-result-stats { display: flex; justify-content: center; gap: 20px; margin: 12px 0 16px; flex-wrap: wrap; }
.mg-rstat-num { font-size: 1.4rem; font-weight: 800; color: #b5732f; }
.mg-rstat-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9a8a6a; }
.mg-result-actions { display: flex; gap: 10px; justify-content: center; }
.mg-result-save { margin: 12px 0 0; font-size: 0.82rem; min-height: 1.1em; transition: opacity 0.2s ease; }
.mg-result-save.is-ok { color: #2f7a30; }
.mg-result-save.is-guest { color: #9a6a1a; }

/* Vowels-hidden blanks */
.mg-hm-slot.vowel { border-bottom-color: #e0813c; }

/* ---- Word Wheel --------------------------------------------------------- */
.mg-ww-input { min-height: 44px; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #3a2a12; margin-bottom: 10px; }
.mg-ww-hive { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 340px; margin: 0 auto 4px; }
.mg-ww-key {
    width: 56px; height: 56px; border-radius: 12px; border: 1px solid #cdbb96;
    background: linear-gradient(180deg, #fff, #efe6d2); color: #3a2a12;
    font-size: 1.5rem; font-weight: 800; text-transform: uppercase; cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease;
}
.mg-ww-key:hover { background: #f6edd8; }
.mg-ww-key:active { transform: translateY(2px); }
.mg-ww-key.center { background: linear-gradient(180deg, #ffd77a, #e0a13c); border-color: #c98f2c; color: #2a1a06; }
.mg-ww-ctrls { display: flex; gap: 8px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.mg-ww-prog { text-align: center; font-weight: 700; color: #7a6a4a; margin-bottom: 8px; }
.mg-ww-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mg-ww-word { padding: 3px 10px; border-radius: 999px; background: rgba(47,122,48,0.12); color: #2f6a30; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; }

/* ---- Word Ladder -------------------------------------------------------- */
.mg-wl-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.mg-wl-word { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.1em; color: #3a2a12; }
.mg-wl-word.target { color: #b5732f; }
.mg-wl-arrow { color: #9a8a6a; font-size: 1.3rem; }
.mg-wl-ladder { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.mg-wl-rung { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.14em; color: #3a2a12; background: rgba(202,162,74,0.1); padding: 4px 16px; border-radius: 8px; }


/* ============================================================================
   Word Games — 2025 refresh: forced-dark hub, unified modal, new components
   Appended last so these rules win over the earlier light/parchment styles.
   ============================================================================ */

/* ---- Forced dark hub -------------------------------------------------------
   The hub locks data-theme="dark" via JS. Hide the theme switcher here so the
   "always dark" contract is obvious and the switcher can't fight the lock. */
body.wg-force-dark .theme-toggle,
body.wg-force-dark .settings-theme-toggle,
body.wg-force-dark .theme-controls-panel { display: none !important; }
body.wg-modal-open { overflow: hidden; }

.wg-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    justify-content: center;
    margin-top: 22px;
}
/* Leaderboard entry — a tactile "trophy" card with a warm gold accent so the
   compete action reads clearly while staying secondary to the arena CTA. */
.wg-lb-open {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 16px;
    border: 1px solid rgba(220, 180, 90, 0.45);
    background:
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        linear-gradient(135deg, rgba(255, 214, 120, 0.9), rgba(200, 150, 60, 0.5)) border-box;
    color: var(--text-primary);
    cursor: pointer;
    text-align: start;
    box-shadow: 0 6px 20px rgba(180, 130, 40, 0.18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wg-lb-open:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(180, 130, 40, 0.32); }
.wg-lb-open:focus-visible { outline: 2px solid rgba(220, 180, 90, 0.9); outline-offset: 2px; }
.wg-lb-open-ico {
    font-size: 1.7rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(180, 130, 40, 0.4));
}
.wg-lb-open-text { display: flex; flex-direction: column; }
.wg-lb-open-text strong { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em; }
.wg-lb-open-text small { font-size: 0.8rem; color: var(--text-secondary); }

/* ---- Hub stats strip (signed-in player progress) ----------------------- */
.wg-stats-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 6px auto 26px;
    max-width: 720px;
}
.wg-stat {
    flex: 1 1 130px;
    min-width: 120px;
    padding: 16px 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wg-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.wg-stat-num {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--color-primary, #818cf8);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.wg-stat-ico { font-size: 1.2rem; }
.wg-stat-lbl {
    margin-top: 6px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #8b93a7);
}
.wg-stats-empty {
    margin: 0 auto 26px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px dashed var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    max-width: 520px;
}
.wg-stat-bump { animation: wg-stat-bump 0.4s ease; }
@keyframes wg-stat-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); color: var(--color-success, #22c55e); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .wg-lb-open, .wg-stat { transition: none; }
    .wg-stat-bump { animation: none; }
}

/* ---- Share button + toast ---------------------------------------------- */
.wg-share-btn { display: inline-flex; align-items: center; gap: 6px; }
.wg-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 16px);
    z-index: 100000;
    max-width: min(90vw, 420px);
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(20, 22, 30, 0.96);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.wg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
    .wg-toast { transition: opacity 0.25s ease; }
}

/* ---- "More games coming" banner (end of hub) --------------------------- */
.wg-soon-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 40px auto 8px;
    max-width: 720px;
    padding: 20px 24px;
    border-radius: 18px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        linear-gradient(120deg, var(--color-primary, #6366f1), #22d3ee 50%, #a855f7) border-box;
    box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--color-primary, #6366f1) 55%, transparent);
}
.wg-soon-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(180px 90px at 12% 0%, color-mix(in srgb, #22d3ee 30%, transparent), transparent 70%),
        radial-gradient(180px 90px at 90% 100%, color-mix(in srgb, #a855f7 30%, transparent), transparent 70%);
    opacity: 0.8;
}
.wg-soon-ico {
    position: relative;
    flex: none;
    font-size: 1.9rem;
    line-height: 1;
    animation: wg-soon-twinkle 2.4s ease-in-out infinite;
}
.wg-soon-text { position: relative; display: flex; flex-direction: column; gap: 3px; text-align: start; }
.wg-soon-title { font-size: 1.06rem; font-weight: 800; color: var(--text-primary); letter-spacing: 0.01em; }
.wg-soon-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; }
.wg-soon-dots { position: relative; display: inline-flex; gap: 5px; margin-inline-start: auto; flex: none; }
.wg-soon-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-primary, #6366f1);
    opacity: 0.5;
    animation: wg-soon-bounce 1.4s ease-in-out infinite;
}
.wg-soon-dots span:nth-child(2) { animation-delay: 0.18s; }
.wg-soon-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes wg-soon-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
    50% { transform: scale(1.18) rotate(8deg); opacity: 1; }
}
@keyframes wg-soon-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.45; }
    50% { transform: translateY(-5px); opacity: 1; }
}
@media (max-width: 560px) {
    .wg-soon-banner { flex-wrap: wrap; text-align: center; }
    .wg-soon-dots { margin-inline-start: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-soon-ico, .wg-soon-dots span { animation: none; }
}

/* ---- Unified game modal ----------------------------------------------------
   #wg-game-stage renders inline (hidden). When a game mounts it becomes a
   full-screen, blurred, scrollable modal that centers whichever game panel
   (.wg-wordle / .mg / .wg-wordsearch / .wg-anagrams) is inside it. */
.wg-game-stage:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 3000;
    margin: 0;
    display: flex;
    /* Desktop: center-align game cards vertically */
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 4vh, 40px) 14px;
    background: rgba(6, 8, 15, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: wg-modal-fade .18s ease;
}
/* When we take over the screen via the Fullscreen API, fill it edge-to-edge
   (incl. where the browser nav bar used to be) and keep content clear of any
   notch / rounded corners via safe-area insets. */
.wg-game-stage:fullscreen,
.wg-game-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: rgba(6, 8, 15, 0.92);
    padding:
        max(clamp(10px, 4vh, 40px), env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        max(clamp(10px, 4vh, 40px), env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
}
@keyframes wg-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wg-modal-pop { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.wg-game-stage:not([hidden]) > * {
    width: 100%;
    max-height: none;
    animation: wg-modal-pop .22s cubic-bezier(.2, .8, .2, 1);
}
.wg-game-stage:not([hidden]) > .wg-wordle { max-width: 520px; }
.wg-game-stage:not([hidden]) > .mg { max-width: 680px; }
.wg-game-stage:not([hidden]) > .wg-anagrams { max-width: 620px; }
.wg-game-stage:not([hidden]) > .wg-wordsearch { max-width: 1020px; }

/* Desktop: wider containers + adjusted vertical positioning */
@media (pointer: fine) and (min-width: 761px) {
    .wg-game-stage:not([hidden]) > .wg-wordle { max-width: 620px; }
    .wg-game-stage:not([hidden]) > .mg { max-width: 820px; }
    .wg-game-stage:not([hidden]) > .wg-anagrams { max-width: 740px; }
    .wg-game-stage:not([hidden]) > .wg-wordsearch { max-width: 1180px; }
    
    /* Position games slightly above center for better visual balance */
    .wg-game-stage:not([hidden]) {
        align-items: center;
        padding-top: max(20px, calc(50vh - 400px));
        padding-bottom: 20px;
    }
}

/* ---- Desktop: Game "arcade" frame with gradient neon glow ----------------- */
.wg-game-stage:not([hidden]) > .wg-wordle,
.wg-game-stage:not([hidden]) > .mg,
.wg-game-stage:not([hidden]) > .wg-anagrams,
.wg-game-stage:not([hidden]) > .wg-wordsearch {
    position: relative;
    border-radius: 20px;
    background: var(--bg-primary);
    padding: 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    /* Remove conflicting borders from base game styles */
    border: none !important;
}

/* Gradient neon border using ::before pseudo-element */
.wg-game-stage:not([hidden]) > .wg-wordle::before,
.wg-game-stage:not([hidden]) > .mg::before,
.wg-game-stage:not([hidden]) > .wg-anagrams::before,
.wg-game-stage:not([hidden]) > .wg-wordsearch::before {
    content: '';
    position: absolute;
    inset: -3px; /* Extend slightly outside to create border effect */
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #4facfe 75%,
        #00f2fe 100%
    );
    z-index: -1;
    opacity: 0.95;
    filter: blur(1px);
    box-shadow:
        0 0 40px rgba(102, 126, 234, 0.6),
        0 0 80px rgba(118, 75, 162, 0.4);
    animation: wg-neon-pulse 3s ease-in-out infinite;
}

@keyframes wg-neon-pulse {
    0%, 100% { 
        opacity: 0.9; 
        filter: blur(1px) brightness(1); 
    }
    50% { 
        opacity: 1; 
        filter: blur(1px) brightness(1.2); 
    }
}

/* ---- Mobile: Frameless, top-aligned layout + keyboard dock ---------------- */
@media (pointer: coarse), (max-width: 760px) {
    /* Top-align: game card at the top, keyboard dock at the bottom — no centering gap */
    .wg-game-stage:not([hidden]) {
        align-items: flex-start;
        padding: 0;
        background: var(--bg-primary); /* Fill entire backdrop with game bg */
    }
    
    /* Remove neon frame on mobile — clean, frameless cards */
    .wg-game-stage:not([hidden]) > .wg-wordle,
    .wg-game-stage:not([hidden]) > .mg,
    .wg-game-stage:not([hidden]) > .wg-anagrams,
    .wg-game-stage:not([hidden]) > .wg-wordsearch {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 20px;
        /* FILL all space: games WITH keyboard fill to keyboard edge, 
           games WITHOUT keyboard fill 100vh */
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    
    /* Games WITH keyboard: fill exactly to keyboard top */
    .wg-game-stage:not([hidden]) > .mg--fill,
    .wg-game-stage:not([hidden]) > .wg-wordle {
        min-height: calc(100dvh - 234px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 234px - env(safe-area-inset-bottom, 0px));
    }
    
    /* Wordle mobile: center content vertically between header and keyboard */
    .wg-game-stage:not([hidden]) > .wg-wordle {
        justify-content: space-evenly;
        gap: 16px; /* Balanced spacing between elements */
    }
    
    /* ANAGRAMS: header/bar/clue pinned at top · answer row + tile pool centred
       (the star) · Submit/Shuffle/Clear buttons at the bottom (thumb-reachable).
       Two `margin-top: auto` split the free space so the play zone floats in the
       middle and the actions sit at the bottom. */
    .wg-game-stage:not([hidden]) > .wg-anagrams {
        justify-content: flex-start;
        gap: 14px;
    }
    .wg-game-stage:not([hidden]) > .wg-anagrams > .wg-an-answer { margin-top: auto; }
    .wg-game-stage:not([hidden]) > .wg-anagrams > .wg-anagrams__actions { margin-top: auto; }
    
    /* Mini-games (with AND without keyboard): the header + stat bar + message
       stay pinned at the TOP; the body absorbs the remaining space and centers
       its game content. This keeps the header anchored (no floating gap above
       the title) while still balancing the playfield. NO page scrolling. */
    .wg-game-stage:not([hidden]) > .mg,
    .wg-game-stage:not([hidden]) > .mg--fill {
        justify-content: flex-start;
        overflow: hidden;
    }
    /* Body fills leftover height and centers its content (all mini-games). */
    .wg-game-stage:not([hidden]) > .mg > .mg-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        width: 100%;
    }
    
    /* Hangman mobile: larger gallows for better visibility */
    .wg-game-stage:not([hidden]) .mg-hm-figure {
        width: 160px;
        height: 180px;
    }
    
    /* Undo the gradient ::before on mobile */
    .wg-game-stage:not([hidden]) > .wg-wordle::before,
    .wg-game-stage:not([hidden]) > .mg::before,
    .wg-game-stage:not([hidden]) > .wg-anagrams::before,
    .wg-game-stage:not([hidden]) > .wg-wordsearch::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wg-game-stage:not([hidden]),
    .wg-game-stage:not([hidden]) > * { animation: none; }
}

/* ---- Mini-game shell: repaint from parchment to the (dark) theme ---------- */
.mg {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    font-family: inherit;
}
.mg-title { color: var(--text-primary); }
.mg-instr { color: var(--text-secondary); }
.mg-close {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.mg-close:hover { background: var(--bg-tertiary); }
.mg-msg { color: var(--text-secondary); }
.mg-msg.is-win { color: var(--color-success, #22c55e); }
.mg-msg.is-error { color: var(--color-danger, #ef4444); font-weight: 800; }
.mg-msg.is-lose { color: var(--color-error, #ef4444); }
.mg-loading { color: var(--text-secondary); }

.mg-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.mg-btn:hover { background: var(--bg-tertiary); }
.mg-btn.primary {
    border: 0;
    color: #10131c;
    background: linear-gradient(92deg, var(--color-primary, #6366f1), var(--color-primary-hover, #818cf8));
}

.mg-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 12px;
}
.mg-stat { color: var(--text-primary); }
.mg-hintbtn {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.mg-hintbtn:hover { background: var(--bg-tertiary); }

/* Keyboard + tiles */
.mg-key {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.mg-key:hover:not(:disabled) { background: var(--bg-tertiary); }
.mg-key.good { background: var(--color-success, #22c55e); color: #08210f; border-color: transparent; }
.mg-key.bad { background: var(--bg-tertiary); color: var(--text-muted, #8b93a7); border-color: transparent; opacity: .55; }

.mg-hm-slot { color: var(--text-primary); border-bottom-color: var(--border-color); }
.mg-hm-slot.missed { color: var(--color-error, #ef4444); }
.mg-hm-slot.vowel { border-bottom-color: var(--color-primary, #6366f1); }

.mg-sc-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 3px 0 var(--border-color);
}
.mg-sc-input {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}
.mg-sc-input:focus { border-color: var(--color-primary, #6366f1); }

/* Result panel */
.mg-result { background: var(--bg-secondary); border: 1px solid var(--border-color); }
.mg-result-title { color: var(--text-primary); }
.mg-result.win .mg-result-title { color: var(--color-success, #22c55e); }
.mg-result-note { color: var(--text-secondary); }
.mg-rstat-num { color: var(--color-primary, #818cf8); }
.mg-rstat-lbl { color: var(--text-muted, #8b93a7); }
.mg-result-save.is-ok { color: var(--color-success, #22c55e); }
.mg-result-save.is-guest { color: var(--color-warning, #f0b04a); }

/* Word Ladder + Word Wheel word chips */
.mg-wl-word { color: var(--text-primary); }
.mg-wl-word.target { color: var(--color-primary, #818cf8); }
.mg-wl-arrow { color: var(--text-muted, #8b93a7); }
.mg-wl-rung { color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); }
.mg-ww-input { color: var(--text-primary); }
.mg-ww-prog { color: var(--text-secondary); }
.mg-ww-word { background: color-mix(in srgb, var(--color-success, #22c55e) 18%, transparent); color: var(--color-success, #4ade80); }

/* ---- Word Wheel: a REAL radial wheel (centre letter truly centred) -------- */
.mg-ww-wheel {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 6px auto 16px;
    transform-origin: center center;
}
/* Shuffle = spin the whole wheel a couple of turns (the spin IS the shuffle). */
@keyframes mg-ww-spin { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
.mg-ww-wheel.is-spinning { animation: mg-ww-spin 0.62s cubic-bezier(.15,.7,.2,1); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mg-ww-wheel.is-spinning { animation: none; } }
.mg-ww-wheel .mg-ww-key {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.mg-ww-wheel .mg-ww-key:hover { background: var(--bg-tertiary); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.mg-ww-wheel .mg-ww-key:active { transform: translate(0, 2px); }
/* Six outer letters placed on a circle via --i (0..5) */
.mg-ww-wheel .mg-ww-key.pos {
    --angle: calc(var(--i) * 60deg);
    transform: rotate(var(--angle)) translate(96px) rotate(calc(-1 * var(--angle)));
}
.mg-ww-wheel .mg-ww-key.pos:hover {
    transform: rotate(var(--angle)) translate(96px) rotate(calc(-1 * var(--angle))) scale(1.06);
}
.mg-ww-wheel .mg-ww-key.center {
    z-index: 2;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: linear-gradient(180deg, var(--color-primary, #6366f1), var(--color-primary-hover, #4f46e5));
    border: 0;
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary, #6366f1) 45%, transparent);
}
@media (max-width: 520px) {
    .mg-ww-wheel { width: 220px; height: 220px; }
    .mg-ww-wheel .mg-ww-key.pos { transform: rotate(var(--angle)) translate(80px) rotate(calc(-1 * var(--angle))); }
    .mg-ww-wheel .mg-ww-key.pos:hover { transform: rotate(var(--angle)) translate(80px) rotate(calc(-1 * var(--angle))) scale(1.06); }
}

/* ---- Hangman: progressive SVG gallows ------------------------------------- */
/* Top zone: gallows (left) + clue (right), height-efficient. */
.mg-hm-top { width: 100%; display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.mg-hm-figwrap { flex: none; }
.mg-hm-figure { width: 116px; height: 132px; margin: 0; display: block; }
.mg-hm-figure .hm-structure { stroke: var(--text-secondary); stroke-width: 6; stroke-linecap: round; fill: none; }
.mg-hm-figure .hm-part {
    stroke: var(--text-primary);
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
}
.mg-hm-figure .hm-part.show { opacity: 1; }
.mg-hm-figure .hm-head { fill: none; stroke: var(--text-primary); stroke-width: 5; }
.mg-hm-figure.is-lost .hm-part { stroke: var(--color-error, #ef4444); }
.mg-hm-figure.is-lost .hm-body-group { transform-box: fill-box; transform-origin: 50% 0%; animation: hm-swing 2.6s ease-in-out infinite; }
@keyframes hm-swing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .mg-hm-figure.is-lost .hm-body-group { animation: none; } }

.mg-hm-clue {
    flex: 1;
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: start;
    min-height: 1.2em;
}
.mg-hm-clue b { color: var(--text-primary); }
/* Hearts stay centered; word + keyboard tight to save height. */
.mg-hm-lives { justify-content: center; margin-bottom: 12px; }
.mg-hm-word { margin-bottom: 16px; }
@media (max-width: 560px) {
    .mg-hm-top { flex-direction: column; gap: 12px; align-items: center; }
    .mg-hm-clue { text-align: center; }
}

/* ---- Cryptogram (phrase) --------------------------------------------------- */
.mg-cr-quote { color: var(--text-secondary); font-size: .9rem; text-align: center; margin-bottom: 12px; }
.mg-cr-phrase { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-bottom: 18px; }
.mg-cr-word { display: flex; gap: 5px; }
.mg-cr-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.mg-cr-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mg-cr-slot {
    width: 34px; height: 44px; border-radius: 8px;
    background: var(--bg-secondary); border: 2px solid var(--border-color);
    color: var(--text-primary); font-size: 1.2rem; font-weight: 800; text-transform: uppercase;
    text-align: center; line-height: 40px; padding: 0;
    transition: border-color .15s ease, background .15s ease;
}
@media (max-width: 560px) {
    .mg-cr-slot { width: 42px; height: 52px; font-size: 1.35rem; line-height: 48px; border-radius: 10px; }
    .mg-cr-phrase { gap: 10px 30px; } /* more space between words */
}
.mg-cr-slot:focus { outline: none; border-color: var(--color-primary, #6366f1); background: var(--bg-tertiary); }
.mg-cr-slot.solved { border-color: var(--color-success, #22c55e); color: var(--color-success, #4ade80); }
.mg-cr-cipher { font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--text-muted, #8b93a7); text-transform: uppercase; }
.mg-cr-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Mini-game polish pass — bring Hangman / Scramble / Word Wheel / Speed Words /
   Word Ladder / Vowels / Cryptogram up to the Wordle tactile standard: gradient
   tiles, inset highlight, soft shadow, hover-lift + press, and focus rings.
   ========================================================================== */

/* Shared tactile tile surface (scramble tiles, hangman keys, wheel keys). */
.mg-sc-tile,
.mg-key,
.mg-ww-wheel .mg-ww-key {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, #ffffff 14%), var(--bg-secondary));
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.mg-sc-tile { box-shadow: 0 3px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07); }
.mg-key:hover:not(:disabled),
.mg-ww-wheel .mg-ww-key.pos:hover,
.mg-ww-wheel .mg-ww-key:hover {
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 45%, var(--border-color));
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--color-primary, #6366f1) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.mg-key:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.mg-key.good { box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 16px -4px var(--color-success, #22c55e); }

/* Letter slots (hangman / vowels): tile-like with a bright underline accent. */
.mg-hm-slot {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom: 3px solid var(--color-primary, #6366f1);
    border-radius: 10px 10px 6px 6px;
}
.mg-hm-slot.vowel { border-bottom-color: var(--color-warning, #f0b04a); }
.mg-hm-slot.missed { color: var(--color-error, #ef4444); border-bottom-color: var(--color-error, #ef4444); }

/* Desktop: larger letter slots for Vowels Hidden/Hangman */
@media (pointer: fine) and (min-width: 761px) {
    .mg-hm-slot {
        width: 44px;
        height: 56px;
        font-size: 2rem;
        border-bottom: 4px solid var(--color-primary, #6366f1);
    }
    .mg-hm-word {
        gap: 10px;
        margin-bottom: 32px;
    }
}

/* Inputs: focus ring consistent with the rest of the suite. */
.mg-sc-input:focus {
    outline: none;
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 30%, transparent);
}

/* Stat bar → pill chips (time + score), monospaced digits so they don't jitter. */
.mg-bar { gap: 8px; align-items: center; }
.mg-stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    color: var(--text-primary); font-weight: 800; font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.mg-hintbtn { border-radius: 999px; margin-inline-start: auto; }

/* Buttons: tactile press + primary glow (matches the hub CTAs). */
.mg-btn { transition: transform .12s ease, box-shadow .15s ease, background .15s ease, filter .15s ease; }
.mg-btn:active { transform: translateY(1px); }
.mg-btn.primary { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--color-primary, #6366f1) 70%, transparent); }
.mg-btn.primary:hover { filter: brightness(1.05); box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--color-primary, #6366f1) 80%, transparent); }

/* Cryptogram cells: subtle gradient + focus ring + solved glow. */
.mg-cr-slot {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, #ffffff 14%), var(--bg-secondary));
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mg-cr-slot:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 30%, transparent); }
.mg-cr-slot.solved { box-shadow: 0 0 14px -4px var(--color-success, #22c55e); }
.mg-cr-cipher { color: var(--text-muted, #8b93a7); font-weight: 700; letter-spacing: .04em; }

/* Word Ladder: clean stacked "rungs" + start/target pills. */
.mg-wl-ladder { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 14px; }
.mg-wl-rung {
    padding: 8px 20px; border-radius: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.mg-wl-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.mg-wl-word {
    padding: 6px 14px; border-radius: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800;
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
}
.mg-wl-word.target { border-color: var(--color-primary, #6366f1); color: var(--color-primary, #818cf8); }
.mg-wl-arrow { color: var(--text-muted, #8b93a7); font-size: 1.2rem; }

/* Word Wheel / Speed Words found-word chips. */
.mg-ww-word { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success, #22c55e) 25%, transparent); }

/* Result panel: soft lift + entrance. */
.mg-result { border-radius: 16px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .6); animation: mg-result-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes mg-result-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .mg-sc-tile, .mg-key, .mg-ww-wheel .mg-ww-key, .mg-btn, .mg-cr-slot { transition: none; }
    .mg-result { animation: none; }
}

/* ---- Leaderboard: sliding side drawer (a real "board") --------------------- */
.wg-lb-modal[hidden] { display: none; }
.wg-lb-modal { position: fixed; inset: 0; z-index: 3200; }
.wg-lb-scrim {
    position: absolute; inset: 0;
    background: rgba(6, 8, 15, 0.6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .3s ease;
}
.wg-lb-modal.is-open .wg-lb-scrim { opacity: 1; }

/* Panel is anchored to the inline-end edge (right in LTR, left in RTL) and
   slides in from that side. */
.wg-lb-card {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(440px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-inline-start: 1px solid var(--border-color);
    box-shadow: -24px 0 64px rgba(0, 0, 0, 0.5);
    padding: 0 20px 0;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
    overflow: hidden;
}
[dir="rtl"] .wg-lb-card { box-shadow: 24px 0 64px rgba(0, 0, 0, 0.5); transform: translateX(-100%); }
.wg-lb-modal.is-open .wg-lb-card { transform: translateX(0); }

/* Header bleeds edge-to-edge and flush to the very top of the drawer (no bare
   navy strip above it). Gradient fades down from a warm primary tint. */
.wg-lb-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 -20px 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-color);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-primary, #6366f1) 22%, var(--bg-primary)),
            var(--bg-primary));
}
.wg-lb-title { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
.wg-lb-title-ico { font-size: 1.5rem; filter: drop-shadow(0 2px 6px rgba(220, 170, 40, .5)); }
.wg-lb-close {
    flex: none; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
    background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color);
    font-size: 1.6rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.wg-lb-close:hover { background: var(--bg-tertiary); transform: rotate(90deg); }
.wg-lb-toolbar {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px;
}
.wg-lb-selectlabel {
    font-weight: 700; color: var(--text-muted, #8b93a7); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .06em;
}
/* Custom-styled native select: reset the OS look, add a gradient pill, a warm
   focus ring, and a hand-drawn chevron (mirrored for RTL). */
.wg-lb-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 100%; min-height: 48px; padding: 0 44px 0 16px; border-radius: 14px;
    background-color: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 800; font-size: 1rem; cursor: pointer;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5);
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
[dir="rtl"] .wg-lb-select { padding: 0 16px 0 44px; background-position: left 15px center; }
.wg-lb-select:hover {
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 55%, var(--border-color));
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--color-primary, #6366f1) 55%, transparent);
}
.wg-lb-select:focus-visible {
    outline: none;
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 35%, transparent);
}
/* Native <option> popups are drawn by the OS OUTSIDE the CSS custom-property
   cascade, so var(--bg-secondary) resolved to nothing and options fell back to
   white with near-invisible text. Use LITERAL colors, keyed by theme. */
.wg-lb-select option { font-weight: 700; background-color: #17121f; color: #f4f0ff; }
[data-theme="light"] .wg-lb-select option { background-color: #ffffff; color: #16151a; }
@media (prefers-reduced-motion: reduce) { .wg-lb-select { transition: none; } }
.wg-lb-body { flex: 1; overflow-y: auto; margin: 0 -20px; padding: 4px 20px 20px; }
.wg-lb-loading, .wg-lb-empty { text-align: center; color: var(--text-secondary); padding: 40px 0; }

/* Podium (top 3) */
.wg-lb-podium {
    display: flex; align-items: flex-end; justify-content: center; gap: 10px;
    padding: 12px 0 4px; margin-bottom: 18px;
}
.wg-lb-seat { flex: 1; max-width: 128px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.wg-lb-seat-name { font-size: .82rem; font-weight: 700; color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.wg-lb-seat-val { font-size: .95rem; font-weight: 800; color: var(--color-primary, #818cf8); font-variant-numeric: tabular-nums; }
.wg-lb-pedestal {
    width: 100%; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 2px; padding-top: 8px; color: #fff;
}
.wg-lb-pedestal-medal { font-size: 1.4rem; }
.wg-lb-pedestal-rank { font-size: 1.1rem; font-weight: 900; opacity: .85; }
.wg-lb-seat-1 .wg-lb-pedestal { height: 88px; background: linear-gradient(180deg, #fcd34d, #d69e2e); box-shadow: 0 -6px 24px -6px rgba(240, 190, 60, .7); }
.wg-lb-seat-2 .wg-lb-pedestal { height: 66px; background: linear-gradient(180deg, #e2e8f0, #94a3b8); }
.wg-lb-seat-3 .wg-lb-pedestal { height: 52px; background: linear-gradient(180deg, #f0b078, #b45309); }
.wg-lb-seat-1 .wg-lb-avatar { transform: scale(1.12); }
.wg-lb-seat.is-me .wg-lb-seat-name { color: var(--color-primary, #818cf8); }

/* Avatars */
.wg-lb-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.wg-lb-avatar-1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wg-lb-avatar-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.wg-lb-avatar-3 { background: linear-gradient(135deg, #f0b078, #b45309); }

/* Ranked list 4+ */
.wg-lb-listhead {
    display: flex; align-items: center; gap: 12px; padding: 0 12px 8px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #8b93a7); font-weight: 700;
}
.wg-lb-lh-rank { width: 24px; text-align: center; }
.wg-lb-lh-player { flex: 1; }
.wg-lb-lh-val { text-align: end; }
.wg-lb-list { display: flex; flex-direction: column; gap: 6px; }
.wg-lb-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px;
    background: var(--bg-secondary); border: 1px solid transparent; transition: transform .12s ease, border-color .12s ease;
}
.wg-lb-row:hover { transform: translateX(2px); }
[dir="rtl"] .wg-lb-row:hover { transform: translateX(-2px); }
.wg-lb-row.is-me { border-color: var(--color-primary, #6366f1); background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--bg-secondary)); }
.wg-lb-rank { width: 24px; text-align: center; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wg-lb-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-weight: 700; color: var(--text-primary); }
.wg-lb-bar { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted, #8b93a7) 22%, transparent); overflow: hidden; }
.wg-lb-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary, #6366f1), #22d3ee); }
[dir="rtl"] .wg-lb-bar-fill { background: linear-gradient(270deg, var(--color-primary, #6366f1), #22d3ee); }
.wg-lb-val { font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wg-lb-you {
    font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 999px; background: var(--color-primary, #6366f1); color: #fff;
}
.wg-lb-count { text-align: center; color: var(--text-muted, #8b93a7); font-size: .8rem; margin: 16px 0 4px; }

@media (prefers-reduced-motion: reduce) {
    .wg-lb-card, .wg-lb-scrim, .wg-lb-close, .wg-lb-row { transition: none; }
}

/* ---- Word Search: fixed header, non-scrolling grid, scrollable word list --- */
.wg-wordsearch.wg-ws-pro { display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.wg-ws-pro .wg-wordsearch__head { flex: none; }
.wg-ws-pro .wg-ws-bar { flex: none; }
.wg-ws-pro .wg-ws-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 18px;
    align-items: start;
    min-height: 0;
    flex: 1;
}
.wg-ws-pro .wg-ws-gridwrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.wg-ws-pro .wg-ws-wordcol {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(60vh, 520px);
}
.wg-ws-pro .wg-ws-wordcol-title { flex: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #8b93a7); margin: 0 0 8px; }
.wg-ws-pro .wg-ws-wordlist {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-inline-end: 4px;
}

/* Desktop: 2-column word list centered in its space */
@media (pointer: fine) and (min-width: 761px) {
    .wg-ws-pro .wg-ws-wordcol {
        max-height: none;
        justify-content: center; /* Center vertically */
        padding: 0 20px; /* Add horizontal padding for centering effect */
    }
    .wg-ws-pro .wg-ws-wordlist {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        overflow-y: visible;
        align-content: start;
        justify-items: center; /* Center items in their grid cells */
    }
}
.wg-ws-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin: 8px 0 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.wg-ws-bar .wg-ws-stat { font-weight: 600; color: var(--text-primary); font-size: .95rem; }
.wg-ws-bar .wg-ws-hintbtn {
    margin-inline-start: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); font-weight: 600; font-size: .85rem;
}
.wg-ws-bar .wg-ws-hintbtn:hover { background: var(--bg-tertiary); }
/* Size the (square) grid to the largest square that fits WITHOUT overflowing:
   - never wider than its own column (min(100%, …));
   - height budget = viewport minus the stage padding + header + stat bar
     (~200px) so it doesn't push the panel into a scroll;
   - clamp() floors it (so short/laptop windows still get a comfortable board
     instead of a squeezed one) and ceilings it (so it never balloons on tall
     monitors). Cells therefore read bigger on the wide desktop layout where
     there used to be a lot of wasted space. */
.wg-ws-pro .wg-ws-grid {
    max-width: min(100%, clamp(300px, calc(100vh - 200px), 700px));
    margin: 0 auto;
}
.wg-ws-cell.wg-ws-hint {
    animation: wg-ws-hintpulse 0.85s ease 3;
    z-index: 2;
}
@keyframes wg-ws-hintpulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 4px var(--color-primary, #6366f1); transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .wg-ws-cell.wg-ws-hint { animation: none; outline: 3px solid var(--color-primary, #6366f1); }
}
@media (max-width: 640px) {
    .wg-ws-pro .wg-ws-layout { grid-template-columns: 1fr; }
    .wg-ws-pro .wg-ws-wordcol { max-height: 160px; }
    .wg-ws-pro .wg-ws-grid { max-width: 100%; }
}

/* ---- Wordle spice bar ------------------------------------------------------ */
.wg-wordle__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Keep the timer, streak and Hint on ONE row — never wrap the Hint to a
       second line (which pushed the grid down). Chips shrink instead. */
    flex-wrap: nowrap;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.wg-wordle__stat { font-weight: 800; color: var(--text-primary); font-size: .95rem; min-width: 0; }
.wg-wordle__hintbtn {
    flex: none; white-space: nowrap;
    margin-inline-start: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); font-weight: 700; font-size: .85rem;
    transition: background .15s ease;
}
@media (max-width: 420px) {
    .wg-wordle__bar { gap: 7px; padding: 8px 9px; }
    .wg-wordle__stat { padding: 5px 9px; font-size: .95rem; } /* match .mg-stat size */
    .wg-wordle__stat--time { min-width: 66px; }
    .wg-wordle__hintbtn { padding: 0 12px; font-size: .92rem; }
}
.wg-wordle__hintbtn:hover:not(:disabled) { background: var(--bg-tertiary); }
.wg-wordle__hintbtn:disabled { opacity: .5; cursor: default; }
.wg-wordle__kbhint {
    width: 100%;
    text-align: center;
    color: var(--text-muted, #8b93a7);
    font-size: .8rem;
    margin: 2px 0 0;
}
@media (hover: none) and (pointer: coarse) {
    .wg-wordle__kbhint { display: none; }
}
.wg-wordle__hintchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.wg-wordle__hintchips:empty { display: none; }
.wg-wordle__hintchip {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .82rem;
    background: color-mix(in srgb, var(--color-success, #22c55e) 20%, transparent);
    color: var(--color-success, #4ade80);
    border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent);
}


/* ============================================================================
   Word Games — polish pass: stat chips (no timer bump), help modal, help button
   ============================================================================ */

/* Each stat sits in its own fixed-width chip so a ticking timer (or changing
   score) never reflows / "bumps" its neighbours. Tabular figures keep width
   constant as digits change. */
.mg-stat,
.wg-wordle__stat,
.wg-ws-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.mg-stat--time,
.wg-wordle__stat--time,
.wg-ws-stat--time { min-width: 86px; }

/* Streak chip (🔥 N) — warm accent, parity with Wordle's streak. */
.mg-stat--streak { color: var(--color-warning, #f0b04a); }

/* Keep the stat bar on ONE row — the streak chip was pushing "💡 Hint" onto a
   second line. Tighten the gap + hint padding so all chips fit. And when there
   is NO hint button (Speed Words), centre the remaining chips. */
.mg-bar { gap: 6px; flex-wrap: nowrap; }
.mg-bar:not(:has(.mg-hintbtn)) { justify-content: center; }
@media (max-width: 480px) {
    .mg-bar { gap: 5px; }
    .mg-stat { padding: 5px 8px; }
    .mg-stat--time { min-width: 70px; }
    /* Keep margin-inline-start: auto (from base) so the hint stays pinned RIGHT;
       only trim its padding here. */
    .mg-bar .mg-hintbtn { padding: 0 9px; }
}

/* ============================================================================
   Hint LAMP character (shared across every game + language).
   Icon-only 💡 (no "Hint" text → never wraps the stat bar). Idle jump + a
   "Stuck? Tap me" speech bubble when the player looks stuck (toggled by JS
   adding `.wg-hint-lamp--nudge`).
   ============================================================================ */
.wg-hint-lamp {
    position: relative;
    width: 44px;
    min-width: 44px !important;
    height: 44px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.wg-hint-lamp__icon {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    transform-origin: 50% 85%;
    animation: wg-lamp-idle 5.5s ease-in-out infinite;
    will-change: transform;
}
/* Lamp glyph injected via CSS (kept OUT of the JS so the JS minifier never sees
   an emoji/surrogate escape and can't mangle the hintLamp code). */
.wg-hint-lamp__icon::before { content: "\1F4A1"; }
/* Idle: a little hop + wobble every cycle so the lamp feels alive. */
@keyframes wg-lamp-idle {
    0%, 82%, 100% { transform: translateY(0) rotate(0deg); }
    86% { transform: translateY(-5px) rotate(-9deg); }
    90% { transform: translateY(-1px) rotate(7deg); }
    94% { transform: translateY(-4px) rotate(-4deg); }
    98% { transform: translateY(0) rotate(2deg); }
}
/* Nudge: energetic jump + warm glow when the player seems stuck. */
.wg-hint-lamp--nudge .wg-hint-lamp__icon {
    animation: wg-lamp-jump 0.62s ease-in-out infinite;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--color-warning, #f0b04a) 85%, transparent));
}
@keyframes wg-lamp-jump {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-10px) scale(1.2); }
    70% { transform: translateY(0) scale(1); }
}
/* Speech bubble */
.wg-hint-lamp__bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    white-space: nowrap;
    padding: 8px 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary, #6366f1), #a855f7);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 1.3, 0.4, 1);
    z-index: 40;
}
.wg-hint-lamp__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 18px;
    border: 7px solid transparent;
    border-top-color: #a855f7;
}
.wg-hint-lamp--nudge .wg-hint-lamp__bubble { opacity: 1; transform: translateY(0) scale(1); }

/* RTL (Arabic): anchor the bubble + tail on the left. */
[dir="rtl"] .wg-hint-lamp__bubble { right: auto; left: 0; transform-origin: bottom left; }
[dir="rtl"] .wg-hint-lamp__bubble::after { right: auto; left: 18px; }

@media (prefers-reduced-motion: reduce) {
    .wg-hint-lamp__icon,
    .wg-hint-lamp--nudge .wg-hint-lamp__icon { animation: none; }
    .wg-hint-lamp__bubble { transition: opacity 0.15s ease; transform: none; }
}

/* The bars become a clean rail holding the chips. */
.mg-bar,
.wg-wordle__bar,
.wg-ws-bar {
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 8px 10px;
}

/* Info (?) button used in every game header. */
.wg-help-btn {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .12s ease;
}
.wg-help-btn:hover { background: var(--bg-tertiary); transform: translateY(-1px); }

/* Grouped header actions (help + close) on the right. */
.mg-head-actions,
.wg-wordle__actions,
.wg-wordsearch__actions,
.wg-anagrams__actions { display: flex; gap: 8px; flex: none; align-items: flex-start; }

/* ---- Help / How-to-play modal --------------------------------------------- */
.wg-help-modal {
    position: fixed;
    inset: 0;
    z-index: 3400;
    display: flex;
    align-items: center;
    align-items: safe center;
    justify-content: center;
    padding: clamp(10px, 6vh, 60px) 16px;
    background: rgba(6, 8, 15, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow-y: auto;
    animation: wg-modal-fade .18s ease;
}
.wg-help-card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
    padding: 22px;
    animation: wg-modal-pop .22s cubic-bezier(.2, .8, .2, 1);
}
.wg-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wg-help-title { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.wg-help-close {
    flex: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color);
    font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.wg-help-close:hover { background: var(--bg-tertiary); }
.wg-help-body { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
.wg-help-body p { margin: 0 0 10px; }
.wg-help-body h4 { color: var(--text-primary); margin: 14px 0 6px; font-size: 1rem; }
.wg-help-body ul { margin: 0 0 10px; padding-inline-start: 20px; }
.wg-help-body li { margin: 5px 0; }
.wg-help-body b { color: var(--text-primary); }
.wg-help-body kbd {
    background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px;
    padding: 1px 6px; font-size: .85em; font-weight: 700; color: var(--text-primary);
}

/* Tighter Word Search grid cap so the whole board always fits (no bottom
   overflow), accounting for the header + stat bar chrome. */
.wg-ws-pro .wg-ws-grid { max-width: min(100%, 460px, calc(100dvh - 250px)); }
.wg-ws-pro { max-height: calc(100dvh - 40px); }

/* DESKTOP — give the board room to breathe. On phones the 460px cap above
   already fits a portrait screen; on a real (mouse) desktop there is a lot of
   horizontal space going to waste, so the whole grid is enlarged and the
   letters grow with it. The height term still floors it on short laptop windows
   so the board can never overflow the modal. This is the "relaxed" feel the 3D
   arena has, brought to the 2D board. */
@media (pointer: fine) and (min-width: 761px) {
    .wg-ws-pro .wg-ws-grid { max-width: min(100%, 720px, calc(100dvh - 210px)); }
    /* Bigger cells → let the glyph grow for the same airy, legible look. */
    .wg-ws-pro .wg-ws-cell { font-size: clamp(1.25rem, 2.4vw, 1.9rem); }
    .wg-ws-pro .wg-ws-grid { gap: clamp(4px, 0.5vw, 8px); }
}

/* The stat bar must stay a SINGLE row — when the Hint button wrapped to a
   second line it grew the header and pushed the grid down over the word list.
   Keep it compact and non-wrapping on every width. */
.wg-ws-bar { flex-wrap: nowrap; gap: 10px; }
.wg-ws-bar .wg-ws-stat { white-space: nowrap; }
.wg-ws-bar .wg-ws-hintbtn { flex: none; }
@media (max-width: 640px) {
    .wg-ws-bar { gap: 6px; padding: 7px 9px; }
    .wg-ws-bar .wg-ws-stat { font-size: .95rem; padding: 5px 9px; gap: 5px; } /* match .mg-stat size */
    .wg-ws-stat--time { min-width: 60px; }
    .wg-ws-bar .wg-ws-hintbtn { min-height: 34px; padding: 0 12px; font-size: .9rem; }
    /* Reserve room for the header + bar + the word list below, so the enlarged
       grid never overlaps the words on phones. */
    .wg-ws-pro .wg-ws-grid { max-width: min(100%, calc(100dvh - 330px)); }
    .wg-ws-pro .wg-ws-wordcol { max-height: 148px; }
    /* Pull the grid up: hug the top of its track (was vertically centred, which
       left an unbalanced gap under the stat bar) and tighten the row gap. */
    .wg-ws-pro .wg-ws-gridwrap { align-items: flex-start; }
    .wg-ws-pro .wg-ws-layout { gap: 10px; }
    .wg-ws-bar { margin: 6px 0 8px; }
}


/* ============================================================================
   Mini-games — on-screen keyboard, fixed-canvas layout, typed display,
   centered result overlay, cryptogram letter-picker cells (2026-07-10)
   ============================================================================ */

/* ---- Fixed-canvas games (Speed Words, Word Ladder, Vowels, Cryptogram) -----
   Fill the fullscreen stage: content sits up top, the keyboard is pinned to the
   bottom, and only the middle content area scrolls. */
.wg-game-stage:not([hidden]) > .mg--fill {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}
.mg--fill .mg-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.mg--fill .mg-kb { margin-top: auto; }
/* Vowels: keep the content hugging the TOP (the keyboard's margin-top:auto
   still pins it to the bottom) so the clue sits just under the stat bar. */
.mg--fill .mg-body { justify-content: flex-start; }
/* The clue is a DIRECT child of the flex-column body, where the shared
   `.mg-hm-clue { flex:1 }` (meant for the hangman ROW layout) would make it grow
   and eat the whole column. Pin it to its content height AND — since the hub is
   dark — drop the boxed panel look: plain centered text, no background/border,
   sitting high and close to the word cells. Hangman's clue (nested in
   .mg-hm-top) is unaffected. */
.mg--fill .mg-body > .mg-hm-clue {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 12px;
    margin: 0 0 14px;
    max-width: 48ch;
    text-align: center;
    font-size: 1.02rem;
    color: var(--text-secondary);
}
.mg-typed-list { width: 100%; max-height: 26vh; overflow-y: auto; overscroll-behavior: contain; align-content: flex-start; }
.mg-cr-scroll { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; align-items: center; }
.mg--fill .mg-wl-ladder { width: 100%; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }

/* ---- Typed-word display (games that no longer use a native <input>) -------- */
.mg-typed {
    min-height: 52px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 4px 0 10px;
    padding: 6px 18px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    position: relative;
}

/* Blinking cursor for better typing feedback */
.mg-typed::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.4em;
    background: var(--color-primary, #6366f1);
    margin-left: 4px;
    animation: mg-cursor-blink 1s step-end infinite;
    vertical-align: middle;
}
/* Hide cursor when there's an error shake */
.mg-typed.shake::after { display: none; }

@keyframes mg-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Desktop: larger, more spacious typed input */
@media (pointer: fine) and (min-width: 761px) {
    .mg-typed {
        min-height: 68px;
        min-width: 220px;
        font-size: 2.2rem;
        padding: 12px 28px;
        margin: 12px 0 20px;
    }
}

.mg-typed.shake { animation: mg-shake 0.32s ease; }

/* ---- On-screen keyboard ---------------------------------------------------- */
/* ---- On-screen keyboard (hidden by default, mobile-only) ------------------- */
.mg-kb {
    /* Uniform key widths (row width ÷ --kb-cols set by JS): all letter keys the
       same size, no flex-stretch differences between rows. */
    --kb-cols: 10;
    --kb-gap: 6px;
    --kb-unit: calc((100% - (var(--kb-cols) - 1) * var(--kb-gap)) / var(--kb-cols));
    display: none; /* Hidden on desktop — mobile uses touch keyboard */
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-width: 560px;
    margin: 10px auto 0;
    align-items: center;
}
.mg-kb-row { display: flex; gap: var(--kb-gap); justify-content: center; width: 100%; }
.mg-kb-key {
    flex: 0 0 auto;
    width: var(--kb-unit);
    min-width: 0;
    height: 52px;
    border-radius: 9px;
    cursor: pointer;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, #ffffff 14%), var(--bg-secondary));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .08s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mg-kb-key:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 45%, var(--border-color));
}
.mg-kb-key:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.mg-kb-key.primary { background: var(--color-primary, #6366f1); color: #fff; border-color: transparent; }
.mg-kb-key.mg-kb-wide { width: calc(var(--kb-unit) * 1.5 + var(--kb-gap) * 0.5); font-size: .85rem; }
/* No-Enter keyboards (Cryptogram): the left spacer and the Backspace are BOTH
   the same `.mg-kb-wide` width, so the letter row is already symmetric/centred.
   Force the spacer to match the backspace width exactly (no :has, no !important
   grid tricks — those relied on CSS features the server optimizer can mangle).
   `.mg-kb-spacer` only exists on no-Enter keyboards, so this is safely scoped. */
.mg-kb-key.mg-kb-spacer {
    width: calc(var(--kb-unit) * 1.5 + var(--kb-gap) * 0.5);
    visibility: hidden;
}
/* Enter/Backspace use crisp SVG icons (matching the 3D arena keyboard). */
.mg-kb-key svg { width: 22px; height: 22px; display: block; }
.mg-kb-key.mg-kb-bksp svg { width: 24px; height: 24px; }
/* Invisible left spacer (Backspace-only variant) keeps the letters centred. */
.mg-kb-key.mg-kb-spacer { background: transparent; border: 0; box-shadow: none; visibility: hidden; pointer-events: none; cursor: default; }
/* Used/spent letters: dimmed AND non-tappable (a plaintext letter maps to one
   cipher, so once it's placed it can't be tapped again — Backspace frees it).
   Dimming is the standard "spent key" cue; green is reserved for "correct". */
.mg-kb-key.is-used { opacity: .38; pointer-events: none; filter: grayscale(0.4); }
/* Wordle feedback colors on the shared keyboard (correct/present/absent). */
.mg-kb-key[data-state="correct"] { background: var(--wg-correct-bg, #6aaa64); color: var(--wg-correct-fg, #fff); border-color: var(--wg-correct-bg, #6aaa64); }
.mg-kb-key[data-state="present"] { background: var(--wg-present-bg, #c9b458); color: var(--wg-present-fg, #fff); border-color: var(--wg-present-bg, #c9b458); }
.mg-kb-key[data-state="absent"]  { background: var(--wg-absent-bg, #3a3a3c); color: var(--wg-absent-fg, #fff); border-color: var(--wg-absent-bg, #3a3a3c); opacity: .85; }
/* Long-press indicator dot (Arabic keys with alternates). */
.mg-kb-key.mg-kb-lp::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary, #6366f1); opacity: .6; }
.mg-kb-key { position: relative; }
/* Long-press popup row (appears above the key). */
.mg-kb-popup { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 20; white-space: nowrap; }
.mg-kb-popup-key { min-width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 1.1rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mg-kb-popup-key:active { background: var(--color-primary, #6366f1); color: #fff; }
/* RTL keyboard */
.mg-kb[dir="rtl"] .mg-kb-row { direction: rtl; }

/* ---- Mobile-only: Full-width keyboard dock + frameless layout -------------
   The keyboard is a fixed dock at the bottom of the screen. The game area fills
   from the top down to where the keyboard starts — no gap, no frame. The
   keyboard slides UP on mount (mobile native feel). Desktop uses native keyboard. */
@media (pointer: coarse), (max-width: 760px) {
    .wg-game-stage:not([hidden]) .mg-kb {
        display: flex; /* Show keyboard on mobile */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 14px; /* Lift keyboard from bottom edge for comfortable tapping */
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 10;
        gap: 7px;
        padding: 16px 4px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-primary);
        border-top: none;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .4);
        border-radius: 0;
        /* Slide-up entrance */
        animation: mg-kb-slide-up .28s cubic-bezier(.22,1,.36,1);
    }
    
    /* Gradient ROW sitting at the BOTTOM of the keyboard, filling the 14px lift
       gap down to the screen edge (neon brand colors). */
    .wg-game-stage:not([hidden]) .mg-kb::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 14px; /* Fills the lifted gap below the keyboard */
        background: linear-gradient(90deg, var(--color-primary, #6366f1), #22d3ee 50%, #a855f7);
        box-shadow: 0 0 16px 2px color-mix(in srgb, var(--color-primary, #6366f1) 60%, transparent);
        pointer-events: none;
        z-index: 2;
    }
    
    .wg-game-stage:not([hidden]) .mg-kb-key { height: 54px; font-size: 1.15rem; border-radius: 9px; }
    .wg-game-stage:not([hidden]) .mg-kb-key svg { width: 23px; height: 23px; }

    /* Game area fills exactly from the top of the viewport to the top of the
       keyboard dock — no gap, no frame, content stretches to fill. */
    .wg-game-stage:not([hidden]) > .mg--fill,
    .wg-game-stage:not([hidden]) > .wg-wordle {
        width: 100%;
        max-width: 100%;
        height: calc(100dvh - 234px - env(safe-area-inset-bottom, 0px)); /* Adjusted for keyboard lift */
        max-height: calc(100dvh - 234px - env(safe-area-inset-bottom, 0px));
        overflow: hidden; /* NO scrolling — everything must fit */
        border-radius: 0;
        border: 0;
        box-shadow: none;
        position: relative;
    }
    
    /* Anchor for the top/bottom gradient pseudo-elements on EVERY game. */
    .wg-game-stage:not([hidden]) > .mg,
    .wg-game-stage:not([hidden]) > .wg-wordle,
    .wg-game-stage:not([hidden]) > .wg-anagrams,
    .wg-game-stage:not([hidden]) > .wg-wordsearch { position: relative; }

    /* Visible gradient bar at the TOP of EVERY game area (neon brand colors). */
    .wg-game-stage:not([hidden]) > .mg::before,
    .wg-game-stage:not([hidden]) > .wg-wordle::before,
    .wg-game-stage:not([hidden]) > .wg-anagrams::before,
    .wg-game-stage:not([hidden]) > .wg-wordsearch::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-primary, #6366f1), #22d3ee 50%, #a855f7);
        box-shadow: 0 0 12px 1px color-mix(in srgb, var(--color-primary, #6366f1) 55%, transparent);
        pointer-events: none;
        z-index: 5;
    }

    /* Bottom gradient ROW for games WITHOUT a docked keyboard (keyboard games
       already carry it on the keyboard's bottom edge). Pinned to the screen
       bottom; the 20px container padding keeps content clear of it. */
    .wg-game-stage:not([hidden]) > .mg:not(.mg--fill)::after,
    .wg-game-stage:not([hidden]) > .wg-anagrams::after,
    .wg-game-stage:not([hidden]) > .wg-wordsearch::after {
        content: '';
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 14px;
        background: linear-gradient(90deg, var(--color-primary, #6366f1), #22d3ee 50%, #a855f7);
        box-shadow: 0 0 16px 2px color-mix(in srgb, var(--color-primary, #6366f1) 60%, transparent);
        pointer-events: none;
        z-index: 6;
    }
    
    .mg--fill .mg-body { padding-bottom: 0; flex: 1; justify-content: center; display: flex; flex-direction: column; }

    /* ========================================================================
       PER-GAME vertical composition (mobile).
       Every game gets an intentional 3-zone rhythm so it reads like a real
       mobile game, not a centered clump:
         · CONTEXT  (clue / target / prompt) hugs the TOP, under the stat bar
         · PLAY     (word · wheel · ladder · phrase) is centred, given the room
         · INPUT    (typed echo) sits right ABOVE the keyboard where eyes are
       Achieved with `margin: auto` on the play zone so free space splits evenly
       above and below it — no scrolling, everything fits.
       ======================================================================== */

    /* — VOWELS HIDDEN: clue (top) · masked word (centre) · typed echo (bottom) */
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-hm-clue) { justify-content: flex-start; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-hm-clue {
        flex: 0 0 auto; margin: 2px 0 0; padding: 14px 16px;
        background: var(--bg-secondary); border: 1px solid var(--border-color);
        border-radius: 14px; max-width: 44ch; text-align: center;
    }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-hm-clue) > .mg-hm-word { flex: 0 0 auto; margin: auto 0; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-hm-clue) > .mg-typed { flex: 0 0 auto; margin: 0 0 4px; }

    /* — WORD LADDER: start→target (top) · ladder (centre) · typed echo (bottom) */
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-wl-ladder) { justify-content: flex-start; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-wl-head { flex: 0 0 auto; margin: 2px 0 0; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-wl-ladder { flex: 0 1 auto; margin: auto 0; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-wl-ladder) > .mg-typed { flex: 0 0 auto; margin: 0 0 4px; }

    /* — SPEED WORDS: typed echo is the hero up top · found words fill below */
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-typed-list) { justify-content: flex-start; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-typed-list) > .mg-typed { flex: 0 0 auto; margin: 10px 0 14px; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-typed-list { flex: 1 1 auto; min-height: 0; align-content: flex-start; }

    /* — CRYPTOGRAM: the phrase is centred in the available room */
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-cr-scroll) { justify-content: center; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-cr-scroll { flex: 1 1 auto; }

    /* — HANGMAN (non-fill, inline keyboard): gallows + clue + hearts + word form
         ONE tight cluster centred as a unit; the keyboard sits at the bottom.
         A single auto-margin above the cluster and above the keyboard splits the
         free space evenly — no lonely gaps between the pieces. */
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-keyboard) { justify-content: flex-start; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-keyboard) > .mg-hm-top { flex: 0 0 auto; margin: auto 0 12px; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-keyboard) > .mg-hm-lives { flex: 0 0 auto; margin: 0 0 12px; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-keyboard) > .mg-hm-word { flex: 0 0 auto; margin: 0 0 4px; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-keyboard) > .mg-keyboard { flex: 0 0 auto; margin-top: auto; padding-top: 18px; margin-bottom: 16px; }

    /* Hangman clue distanced under the gallows (mobile stacks .mg-hm-top). */
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-hm-top > .mg-hm-clue { margin-top: 6px; }

    /* — WORD WHEEL (non-fill): input · wheel · controls form the centred play
         cluster; progress + found list are pushed to the bottom. Two auto
         margins (above input, above progress) split the free space evenly. */
    .wg-game-stage:not([hidden]) > .mg > .mg-body:has(> .mg-ww-wheel) { justify-content: flex-start; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-ww-input { flex: 0 0 auto; margin: auto 0 0; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-ww-wheel { flex: 0 0 auto; margin: 12px 0; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-ww-ctrls { flex: 0 0 auto; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-ww-prog { flex: 0 0 auto; margin-top: auto; padding-top: 14px; }
    .wg-game-stage:not([hidden]) > .mg > .mg-body > .mg-ww-list { flex: 0 1 auto; min-height: 0; margin-top: 8px; }
}

@keyframes mg-kb-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { 
    .wg-game-stage:not([hidden]) .mg-kb { animation: none; } 
}

/* Desktop: hide the on-screen keyboard entirely (use native keyboard) */
@media (pointer: fine) and (min-width: 761px) {
    .wg-game-stage:not([hidden]) .mg-kb {
        display: none;
    }
    
    /* Desktop keyboard hint: visible on ALL games with keyboards */
    .wg-game-stage:not([hidden]) > .mg--fill::after,
    .wg-game-stage:not([hidden]) > .wg-wordle::after {
        content: '⌨️ Use your keyboard';
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.8);
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
        font-weight: 600;
        pointer-events: none;
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.3px;
    }
}

@media (pointer: coarse) and (max-width: 400px), (max-width: 400px) {
    .mg--fill .mg-kb,
    .wg-game-stage:not([hidden]) .wg-keyboard { --kb-gap: 4px; gap: 6px; padding: 8px 3px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .mg--fill .mg-kb-key,
    .wg-game-stage:not([hidden]) .wg-key { height: 50px; font-size: 1.05rem; }
    .wg-game-stage:not([hidden]) > .mg--fill,
    .wg-game-stage:not([hidden]) > .wg-wordle { height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) and (max-width: 520px), (max-width: 520px) {
    .mg-kb { gap: 6px; --kb-gap: 5px; }
    .mg-kb-key { height: 48px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .mg-kb-key { transition: none; } }

/* ---- Centered, zoom-in result overlay (was appended below the board) ------- */
.mg-result-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(6, 8, 15, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: wg-modal-fade .2s ease;
}
.mg-result-overlay .mg-result {
    margin: 0;
    max-width: 420px;
    width: 100%;
    animation: mg-result-zoom .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes mg-result-zoom { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .mg-result-overlay, .mg-result-overlay .mg-result { animation: none; }
}

/* ---- Cryptogram: tap-to-select cells + on-screen letter picker ------------- */
.mg-cr-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.mg-cr-glyph {
    width: 34px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, #ffffff 14%), var(--bg-secondary));
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mg-cr-cell.filled .mg-cr-glyph { background: var(--bg-tertiary); }
.mg-cr-cell.is-sel .mg-cr-glyph {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 30%, transparent);
}
.mg-cr-cell.solved .mg-cr-glyph,
.mg-cr-cell.cr-correct .mg-cr-glyph {
    border-color: var(--color-success, #22c55e);
    color: var(--color-success, #4ade80);
    background: color-mix(in srgb, #22c55e 16%, var(--bg-tertiary));
    box-shadow: 0 0 14px -4px var(--color-success, #22c55e);
}
/* Colour feedback: letter is in the phrase but wrong here → orange; not in the
   phrase at all → red. */
.mg-cr-cell.cr-present .mg-cr-glyph {
    border-color: #f0a13a;
    color: #f5b455;
    background: color-mix(in srgb, #f0a13a 16%, var(--bg-tertiary));
}
.mg-cr-cell.cr-absent .mg-cr-glyph {
    border-color: #e05a5a;
    color: #f08a8a;
    background: color-mix(in srgb, #e05a5a 15%, var(--bg-tertiary));
}
@media (max-width: 560px) {
    .mg-cr-glyph { width: 28px; height: 38px; font-size: 1rem; }
}


/* ============================================================================
   2026-07-10 (cont.) — Wordle board fits the screen height; tighter Cryptogram
   ============================================================================ */

/* Size the Wordle board to the viewport HEIGHT while it's in the game modal, so
   the board + stat bar + on-screen keyboard all fit without scrolling — the
   keyboard shifts up on shorter screens instead of falling off the bottom.
   (The board is 6 rows tall / 5 wide, so width ≈ height × 5/6.) */
.wg-game-stage:not([hidden]) .wg-board { max-width: min(78vw, 258px, 38vh); }
@supports (height: 100dvh) {
    .wg-game-stage:not([hidden]) .wg-board { max-width: min(78vw, 258px, 38dvh); }
}
/* Smaller tiles with LARGER letters. NOTE: only size here — never set a
   `background` on .wg-tile in the modal, or it overrides the green/yellow/absent
   state colors (.wg-tile[data-state=...]) since this selector is more specific. */
.wg-game-stage:not([hidden]) .wg-tile {
    font-size: clamp(1.35rem, 6.6vh, 2rem);
    line-height: 1;
    overflow: hidden;
}
/* Arabic glyphs render considerably taller than Latin at the same point size
   (ascenders/descenders + diacritic dots), so at the shared clamp they drew
   larger than the tile itself. Give the RTL board a contained size + tight
   line-box so the letter sits neatly inside the cell. */
.wg-game-stage:not([hidden])[dir="rtl"] .wg-tile {
    font-size: clamp(1rem, 4.4vh, 1.55rem);
    line-height: 1;
}
/* Remove the sub-title/instructions inside EVERY game — the "?" help covers it,
   and we need the vertical space for the board + keyboard. */
.wg-game-stage:not([hidden]) .wg-wordle__instructions,
.wg-game-stage:not([hidden]) .wg-wordsearch__instructions,
.wg-game-stage:not([hidden]) .wg-anagrams__instructions,
.wg-game-stage:not([hidden]) .mg-instr { display: none !important; }

/* Score status ("1 / 7 found"): give the chip room so the spaced text always
   shows in full and never gets squeezed by the bar. */
.wg-ws-bar #wg-ws-progress {
    flex: 0 0 auto;
    /* Use `pre` (not `nowrap`) so the intentional double space the JS inserts
       before the "Found" label is preserved instead of collapsing to one —
       otherwise "Found" reads glued to "0 / 7". Still never wraps. */
    white-space: pre;
    letter-spacing: .01em;
}

/* Cryptogram: desktop gets LARGER cells + generous word spacing for better UX */
@media (pointer: fine) and (min-width: 761px) {
    .mg-cr-glyph { 
        width: 42px; 
        height: 52px; 
        font-size: 1.35rem; 
    }
    .mg-cr-phrase { 
        gap: 8px 24px; /* vertical gap 8px, horizontal gap between words 24px */
    }
    .mg-cr-word {
        gap: 6px; /* gap between letters in same word */
    }
}

/* Cryptogram: mobile/tablet — smaller cells, tighter gaps */
@media (pointer: coarse), (max-width: 760px) {
    .mg-cr-glyph { width: 30px; height: 40px; font-size: 1.1rem; }
    .mg-cr-phrase { gap: 10px 30px; } /* more space between words */
}

.mg--fill .mg-instr { display: none; }
@media (max-width: 560px) {
    .mg-cr-glyph { width: 26px; height: 34px; font-size: .95rem; }
    .mg-cr-phrase { gap: 8px 28px; } /* more space between words */
}


/* ---- Leaderboard: Today / All-time tabs ------------------------------------ */
.wg-lb-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    margin: 0 0 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.wg-lb-tab {
    flex: 1 1 0;
    min-height: 40px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 800;
    font-size: .92rem;
    transition: background .15s ease, color .15s ease;
}
.wg-lb-tab:hover { color: var(--text-primary); }
.wg-lb-tab.is-active {
    background: linear-gradient(180deg, var(--color-primary, #6366f1), color-mix(in srgb, var(--color-primary, #6366f1) 78%, #000));
    color: #fff;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary, #6366f1) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) { .wg-lb-tab { transition: none; } }

/* Secondary lines (all-time appearances count). */
.wg-lb-seat-sub { font-size: .68rem; color: var(--text-muted, #8b93a7); font-weight: 700; }
.wg-lb-val-sub { font-size: .72rem; color: var(--text-muted, #8b93a7); font-weight: 600; }


/* ---- Mini-game loading spinner (e.g. Speed Words dictionary fetch) --------- */
.mg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 34px 0;
}
.mg-loading::before {
    content: '';
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary, #6366f1);
    animation: mg-spin .8s linear infinite;
}
@keyframes mg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-loading::before { animation: none; } }


/* ---- Daily played state + Cryptogram tools spacing (2026-07-10) ------------ */
/* Locked "Daily" button once today's daily is done (one-per-day, shared puzzle). */
.wg-play-btn--done,
.wg-play-btn--daily:disabled {
    opacity: .6;
    cursor: default;
    filter: grayscale(.3);
}
.wg-play-btn--done { color: var(--color-success, #4ade80); }

/* Cryptogram: keep the "Reveal a letter" tools off the on-screen keyboard. */
.mg-cr-tools { margin: 12px 0 14px; }
.mg--fill .mg-cr-tools { flex: none; }

/* ==================================================================
   Secret Word (كلمة السر) — leftover-cell highlight + secret entry
   ================================================================== */

/* Once every word is found, the remaining cells glow to mark them as the
   secret. A warm amber reads as "reward / reveal" and contrasts the green
   found cells. */
.wg-ws-cell[data-state="secret"] {
    background: var(--wg-sw-secret-bg, #f59e0b);
    color: var(--wg-sw-secret-fg, #1a1204);
    border-color: var(--wg-sw-secret-bg, #f59e0b);
    font-weight: 800;
    animation: wg-sw-secretpop 0.5s ease;
}
@keyframes wg-sw-secretpop {
    0% { transform: scale(0.9); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.wg-sw-secret {
    margin: 16px auto 6px;
    max-width: 560px;
    padding: 16px;
    border-radius: 16px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    text-align: center;
}

/* ---- Secret-entry phase (all words found) --------------------------------
   The word column is now useless, and the grid + secret keyboard together are
   taller than the panel. Drop the word list, let the grid sit at its natural
   size in normal flow, and make the whole panel scroll so NO grid rows are
   hidden behind the keyboard and the grid never overlaps the word column. */
.wg-secretword.wg-sw-secretmode {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.wg-secretword.wg-sw-secretmode .wg-ws-wordcol { display: none; }
/* Keep every fixed section at its natural height. In a scrolling flex column
   the message would otherwise shrink to its 1-line min-height and its wrapped
   2nd line would spill over the grid. flex:none stops that. */
.wg-secretword.wg-sw-secretmode .wg-wordsearch__message {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0 auto 8px;
    /* Smaller, lighter prompt that fits two lines instead of three. */
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
    max-width: 40ch;
    color: var(--text-secondary, #9aa4b2);
}
.wg-secretword.wg-sw-secretmode .wg-ws-layout {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
}
.wg-secretword.wg-sw-secretmode .wg-ws-gridwrap {
    display: flex;
    justify-content: center;   /* horizontally centre the grid */
    align-items: flex-start;
    min-height: 0;
}
/* Contain + centre the grid so the leftover (secret) cells and the keyboard
   both stay on screen on phones. Explicit width + auto margins guarantee the
   centring (margin-inline:auto alone wasn't reliable in the flex wrap).
   3-class specificity overrides the .wg-ws-pro caps. */
.wg-secretword.wg-sw-secretmode .wg-ws-grid {
    width: min(100%, 320px);
    max-width: 320px;
    margin: 0 auto;
}
.wg-secretword.wg-sw-secretmode .wg-sw-secret {
    flex: 0 0 auto;
}
/* (Keyboard sizing is handled by the uniform --kb-unit model below.) */

/* Narrow phones (~392dp): Arabic secret keyboards have 11-key rows that can't
   fit at a 26px min-width, so the keyboard + tiles overflowed and clipped at
   the panel edges. Let the keys shrink to fill each row, tighten gaps/padding,
   and cap the tiles so the whole bottom section fits without horizontal
   overflow. */
@media (max-width: 480px) {
    /* Use the full panel width so the keyboard can breathe. */
    .wg-secretword .wg-sw-secret {
        padding-inline: 6px;
        max-width: 100%;
    }
    /* Uniform keys auto-scale to fit (width = row ÷ --kb-cols); just tighten
       the gap a touch so 11-key Arabic rows have comfortable keys. */
    .wg-secretword .wg-sw-kb { --kb-gap: 5px; }
    .wg-secretword .wg-sw-kb-key { height: 50px; font-size: 1.15rem; }
    .wg-secretword .wg-sw-tiles { gap: 6px; }
    .wg-secretword .wg-sw-tile {
        width: clamp(30px, 8vw, 42px);
        height: clamp(38px, 11vw, 50px);
        font-size: clamp(1.05rem, 3.8vw, 1.45rem);
    }
}

/* Secret (leftover) cells: a touch bolder than the lighter base so they stand
   out for reading the hidden word. (Base cell weight/size now applies to both
   Word Search and Secret Word.) */
.wg-secretword .wg-ws-cell[data-state="secret"] {
    font-weight: 700;
}

/* ---- Inline SVG icons (result modals + buttons) --------------------------- */
.wg-ico-svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; flex: none; }
/* Buttons that pair an icon with a label sit as a neat inline row. */
.wg-share-btn, .mg-btn.wg-btn--icontext, .wg-btn.wg-btn--icontext {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.wg-share-btn .wg-ico-svg { width: 1.15rem; height: 1.15rem; }
/* Celebration icon in the result modals (mini-games + secret word). */
.mg-result-emoji .wg-ico-svg, .wg-overlay__icon .wg-ico-svg { width: 2.6rem; height: 2.6rem; }
.mg-result.win .mg-result-emoji, .wg-overlay__icon--win { color: #f5c451; }
.mg-result.lose .mg-result-emoji { color: var(--text-muted, #8b93a7); }
/* Streak flame inline with its number. */
.mg-rstat-num .wg-ico-svg { width: 1em; height: 1em; color: #f97316; vertical-align: -0.12em; }

/* Anagrams description clue (from the AI hint cache). */
.wg-an-clue {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #6366f1) 34%, transparent);
    color: var(--text-primary, #f8fafc);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Secret-word clue line (definition / revealed-letter feedback). */
.wg-sw-hint {
    margin: 0 auto 14px;
    max-width: 460px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 40%, transparent);
    color: var(--text-primary, #f8fafc);
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 600;
}

/* On-screen keyboard hint (shown only where the letter keys are hidden). */
.wg-sw-kbhint {
    display: none;
    margin: 12px 0 2px;
    font-size: 0.82rem;
    color: var(--text-muted, #8b93a7);
}
/* Desktops (mouse + hover) already have a physical keyboard, so the on-screen
   letter keys are noise — hide them and surface the "just type" hint. Enter /
   Delete stay clickable. Touch tablets report a coarse pointer, so this rule
   does NOT match them and they keep the full on-screen keyboard. */
@media (pointer: fine) and (hover: hover) {
    .wg-secretword .wg-sw-kb { display: none; }
    .wg-secretword .wg-sw-kbhint { display: block; }
}
.wg-sw-secret__label {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary, #f8fafc);
}

.wg-sw-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.wg-sw-tile {
    width: clamp(34px, 9vw, 46px);
    height: clamp(42px, 11vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    font-family: inherit;
    font-weight: 800;
    border-radius: 10px;
    border: 2px solid var(--border-color, #4b5563);
    background: var(--bg-primary, #111827);
    color: var(--text-primary, #f8fafc);
    text-transform: uppercase;
    padding: 0;
    cursor: default;
    transition: border-color 0.12s ease, transform 0.08s ease, background 0.18s ease, color 0.18s ease;
    position: relative;
}
.wg-sw-tile[data-filled="1"] {
    border-color: var(--wg-sw-secret-bg, #f59e0b);
    transform: translateY(-2px);
    cursor: pointer;   /* tap a filled slot to send the letter back */
}
/* Hint-revealed letters are locked in place and can't be tapped away. */
.wg-sw-tile[data-locked="1"] {
    cursor: default;
    border-color: color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 70%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 50%, transparent);
}
/* Correct-order confirmation flip (played in sequence on a win). */
.wg-sw-tile[data-correct="1"] {
    border-color: var(--color-success, #22c55e);
    background: var(--color-success, #22c55e);
    color: #08130a;
    transform: translateY(-2px) scale(1.05);
}
.wg-sw-tile[data-correct="1"]::after { display: none; }

/* Blinking cursor in the current active empty tile (only the next slot). */
.wg-sw-tile[data-filled="0"][data-active="1"]::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 60%;
    background: var(--color-primary, #6366f1);
    animation: wg-sw-cursor-blink 1s step-end infinite;
}
/* The active empty slot also gets a soft ring so the drop target is obvious. */
.wg-sw-tile[data-filled="0"][data-active="1"] {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 22%, transparent);
}
@keyframes wg-sw-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Desktop: add padding to prevent scrollbar */
@media (pointer: fine) and (min-width: 761px) {
    .wg-secretword.wg-sw-secretmode {
        padding-bottom: 20px; /* Extra space to avoid scrollbar */
    }
}

/* On-screen keyboard for the secret (QWERTY / AZERTY / Arabic).
   Real-keyboard model: every letter key is ONE uniform width (row width ÷ the
   column count set by JS as --kb-cols); shorter rows centre; Backspace/Enter
   span 1.5 units. No flex-stretch, so keys never differ in size between rows. */
.wg-sw-kb {
    --kb-cols: 11;
    --kb-gap: 6px;
    --kb-unit: calc((100% - (var(--kb-cols) - 1) * var(--kb-gap)) / var(--kb-cols));
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}
.wg-sw-kb-row {
    display: flex;
    gap: var(--kb-gap);
    justify-content: center;
    width: 100%;
}
.wg-sw-kb-key {
    flex: 0 0 auto;
    width: var(--kb-unit);
    height: 52px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #4b5563);
    background: var(--bg-tertiary, #1f2937);
    color: var(--text-primary, #f8fafc);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: background 0.1s ease, transform 0.06s ease;
}
.wg-sw-kb-key:hover { background: var(--color-primary, #6366f1); color: #fff; }
.wg-sw-kb-key:active { transform: translateY(1px); }
.wg-sw-kb-key.wg-sw-kb-wide { width: calc(var(--kb-unit) * 1.5 + var(--kb-gap) * 0.5); font-size: 1rem; }
.wg-sw-kb-key.primary { background: var(--color-primary, #6366f1); color: #fff; }

.wg-sw-shake { animation: wg-sw-shake 0.4s ease; }
@keyframes wg-sw-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* Tap instruction under the label in the secret phase. */
.wg-sw-taphint {
    text-align: center;
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-secondary, #9aa4b2);
}

/* In the secret phase the leftover cells are tappable letters. */
.wg-secretword.wg-sw-secretmode .wg-ws-cell[data-state="secret"] { cursor: pointer; }
/* A leftover letter that has been placed into a slot: dimmed + tap to release. */
.wg-ws-cell[data-state="secret-used"] {
    background: color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 22%, transparent);
    color: color-mix(in srgb, var(--wg-sw-secret-fg, #1a1204) 55%, transparent);
    border-color: color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 45%, transparent);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.wg-ws-cell[data-state="secret-used"]:hover { opacity: 0.72; }

/* Reveal beat: the leftover cells lift + glow in reading order. */
.wg-ws-cell.wg-sw-reveal {
    animation: wg-sw-reveal 0.6s ease;
    z-index: 2;
}
@keyframes wg-sw-reveal {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-6px) scale(1.16); box-shadow: 0 8px 18px color-mix(in srgb, var(--wg-sw-secret-bg, #f59e0b) 55%, transparent); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wg-ws-cell[data-state="secret"],
    .wg-ws-cell.wg-sw-reveal,
    .wg-sw-tile[data-correct="1"],
    .wg-sw-shake { animation: none; transform: none; }
}

/* ==========================================================================
   2D result modal — matched to the 3D arena result card (.wa-card).
   The hub forces dark theme, so we use the arena palette directly. This block
   is last in the file so it wins the cascade over the earlier .mg-result rules.
   ========================================================================== */
.mg-result-overlay {
    background: rgba(6, 5, 18, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 20px;
}
.mg-result-overlay .mg-result,
.mg-result {
    width: min(440px, 92vw);
    max-width: min(440px, 92vw);
    margin: 0;
    text-align: center;
    background: rgba(16, 12, 38, 0.92);
    border: 1px solid rgba(140, 120, 255, 0.28);
    border-radius: 20px;
    padding: 30px 26px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.mg-result-emoji { font-size: 3rem; margin-bottom: 6px; color: #ffcf5c; }
.mg-result.win .mg-result-emoji { color: #ffcf5c; }
.mg-result.lose .mg-result-emoji { color: #a7a3d0; }
.mg-result-title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; color: #eef0ff; }
.mg-result.win .mg-result-title { color: #35e089; }
.mg-result.lose .mg-result-title { color: #ff3ea5; }
.mg-result-note { margin: 0 0 14px; color: #a7a3d0; line-height: 1.5; }
.mg-result-stats { display: flex; justify-content: center; gap: 26px; margin: 12px 0 20px; }
.mg-rstat-num { font-size: 1.6rem; font-weight: 800; color: #24e0ff; }
.mg-rstat-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #a7a3d0; }
.mg-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mg-result-actions .mg-btn {
    appearance: none;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(140, 120, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #eef0ff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s ease, background 0.15s ease;
}
.mg-result-actions .mg-btn:hover { transform: translateY(-1px); }
.mg-result-actions .mg-btn.primary {
    border: 0;
    color: #0a0720;
    background: linear-gradient(92deg, #24e0ff, #ff3ea5);
}
.mg-result-save.is-ok { color: #35e089; }
.mg-result-save.is-guest { color: #ffcf5c; }
@media (prefers-reduced-motion: reduce) {
    .mg-result, .mg-result-overlay .mg-result { animation: none; }
}

/* ==========================================================================
   Word Search / Secret Word — DESKTOP "pro" board.
   Both games share `.wg-wordsearch.wg-ws-pro`. The panel was 1180px wide, which
   left the ~460px board stranded in a big empty band and let the grid run to the
   modal's bottom edge. Retighten into a centered card: the board and the word
   column sit together with real breathing room, the board is sized off the modal
   height so it never touches the bottom, and the word list is a tidy 2-up column.
   (Appended last so it wins over the earlier max-width/grid caps.)
   ========================================================================== */
@media (pointer: fine) and (min-width: 761px) {
    /* Bigger game window so the board isn't squeezed. */
    .wg-game-stage:not([hidden]) > .wg-wordsearch { max-width: 1080px; }

    /* A DEFINITE height (not just max-height) so the flex chain below can resolve
       the board's `max-height: 100%` — otherwise the grid would collapse. */
    .wg-wordsearch.wg-ws-pro { height: calc(100dvh - 40px); padding: 22px 30px 28px; gap: 12px; }

    .wg-ws-pro .wg-ws-layout {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 48px;
        min-height: 0;
    }
    /* The grid area takes ALL the height left after the header + stat bar, and
       centers the board in it. */
    .wg-ws-pro .wg-ws-gridwrap {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    /* Fit the SQUARE board inside whatever space remains (both width AND height):
       aspect-ratio keeps it square, the two max-* constraints make the smaller
       dimension win, so it can NEVER overflow the modal — no magic numbers, no
       dependence on the exact header/bar height. As large as the window allows. */
    .wg-ws-pro .wg-ws-grid {
        aspect-ratio: 1 / 1;
        width: auto;
        height: auto;
        max-width: min(100%, 600px);
        max-height: 100%;
        grid-auto-rows: 1fr;
        margin: 0;
    }
    /* Rows are 1fr now, so let cells fill their row instead of self-sizing square. */
    .wg-ws-pro .wg-ws-cell { aspect-ratio: auto; min-width: 0; }
    /* Trim the chrome a touch so more height goes to the board. */
    .wg-ws-pro .wg-wordsearch__title { font-size: 1.3rem; }
    .wg-ws-pro .wg-ws-bar { margin: 6px 0 10px; }
    /* Word column beside the board: wider so long words fit on one line, own
       vertical scroll, NO horizontal scrollbar, subtle divider. */
    .wg-ws-pro .wg-ws-wordcol {
        flex: 0 0 clamp(250px, 27vw, 340px);
        width: clamp(250px, 27vw, 340px);
        max-height: none;
        justify-content: flex-start;
        padding: 2px 0 0 30px;
        border-inline-start: 1px solid var(--border-color);
    }
    .wg-ws-pro .wg-ws-wordlist {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 18px;
        overflow-y: auto;
        overflow-x: hidden;
        align-content: start;
        justify-items: start;
        padding-inline-end: 4px;
    }
    /* A rare very long word wraps instead of forcing a horizontal scrollbar. */
    .wg-ws-pro .wg-ws-wordlist__item { min-width: 0; overflow-wrap: anywhere; }
}

/* ==========================================================================
   Embed mode — the hub loaded inside the reader's Word Games modal (iframe).
   Chromeless: no site header/footer (omitted server-side). Hide the hero, the
   3D-arena CTA, the leaderboard button, the stats strip and the "coming soon"
   banner so ONLY the game grid shows. A styled, vertical-only scrollbar.
   ========================================================================== */
body.wg-embed { overflow-x: hidden; background: var(--bg-primary, #0f172a); }
body.wg-embed .wg-hub-hero,
body.wg-embed .wg-stats-strip,
body.wg-embed .wg-soon-banner { display: none !important; }
body.wg-embed .wg-hub { padding-top: 18px; padding-bottom: 24px; }
body.wg-embed .container { max-width: 100%; }
/* The game grid should breathe inside the modal. */
body.wg-embed .wg-game-grid { margin-top: 4px; }

/* Themed scrollbar for the embedded hub (Firefox + WebKit). No horizontal bar. */
body.wg-embed { scrollbar-width: thin; scrollbar-color: rgba(146,120,255,0.55) transparent; }
body.wg-embed::-webkit-scrollbar { width: 10px; height: 0; }
body.wg-embed::-webkit-scrollbar-track { background: transparent; }
body.wg-embed::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(146,120,255,0.7), rgba(36,224,255,0.55));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
body.wg-embed::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(160,138,255,0.9), rgba(60,230,255,0.75));
    background-clip: padding-box;
}