/* ===========================================================================
 * Word Arena — 3D word games chrome
 * The DOM layer that sits over the WebGL canvas: entrance/loader, HUD, the
 * on-screen keyboard, result overlay, leaderboard drawer, hints and banners.
 *
 * Aesthetic: a neon coliseum in the void — deep indigo/violet space, an ember
 * horizon, and electric cyan/magenta/gold accents. Distinct from the Cosmos
 * (starfield) and Library (warm wood) experiences.
 *
 * All colors live here (not the theme tokens) because the arena is a full-bleed
 * immersive surface with its own palette, mirroring timeline-3d.css / library-3d.css.
 * Respects prefers-reduced-motion, RTL (dir="rtl"), and >=44px touch targets.
 * =========================================================================== */

/* Modern Kufi Arabic for Arabic button labels (the arena doesn't load main.css,
   so the webfont must be declared here). */
@font-face {
    font-family: "Noto Kufi Arabic";
    src: url("../fonts/NotoKufiArabic-500.ttf") format("truetype");
    font-weight: 400 600;
    font-display: swap;
}
@font-face {
    font-family: "Noto Kufi Arabic";
    src: url("../fonts/NotoKufiArabic-700.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Theme tokens for the injected 2D game panels (word-games.css). The arena
       is a standalone immersive page that does NOT load main.css / the site
       header / theme.js, so the shared theme variables are undefined here and
       the games fall back to white. Define the dark palette so Word Search,
       Anagrams and the mini-games render on the dark theme in the salon. */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border-color: #334155;
    --color-primary: #6366f1;
    --color-primary-hover: #818cf8;
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f0b04a;
    --color-gray-50: #1e293b;
    --color-gray-100: #334155;

    --wa-bg: #070512;
    --wa-bg-2: #0e0a24;
    --wa-ink: #eef0ff;
    --wa-muted: #a7a3d0;
    --wa-cyan: #24e0ff;
    --wa-magenta: #ff3ea5;
    --wa-gold: #ffcf5c;
    --wa-green: #35e089;
    --wa-panel: rgba(16, 12, 38, 0.72);
    --wa-panel-brd: rgba(140, 120, 255, 0.28);
    --wa-glow: 0 0 24px rgba(90, 70, 255, 0.45);
    --wa-radius: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--wa-bg);
    color: var(--wa-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

.wa-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    touch-action: none;
}
.wa-stage canvas { display: block; }

/* Transition fade between states */
.wa-fade {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--wa-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.wa-fade.is-active { opacity: 1; pointer-events: all; }

/* ---- Loader / entrance --------------------------------------------------- */
.wa-loader {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px 700px at 50% 120%, rgba(255, 90, 60, 0.16), transparent 60%),
        radial-gradient(900px 700px at 50% -10%, rgba(90, 70, 255, 0.28), transparent 55%),
        linear-gradient(180deg, var(--wa-bg) 0%, var(--wa-bg-2) 100%);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
.wa-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.wa-loader-orbs { position: absolute; inset: 0; overflow: hidden; }
.wa-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    animation: wa-drift 14s ease-in-out infinite alternate;
}
.wa-orb.o1 { width: 320px; height: 320px; left: 10%; top: 20%; background: var(--wa-magenta); }
.wa-orb.o2 { width: 380px; height: 380px; right: 8%; top: 30%; background: var(--wa-cyan); animation-delay: -4s; }
.wa-orb.o3 { width: 260px; height: 260px; left: 44%; bottom: 6%; background: var(--wa-gold); animation-delay: -8s; }

@keyframes wa-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(30px, -26px, 0) scale(1.12); }
}

.wa-loader-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 32px;
    max-width: 520px;
}
.wa-loader-title {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
    background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta) 60%, var(--wa-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(120, 90, 255, 0.4);
}
.wa-loader-tagline {
    color: var(--wa-muted);
    font-size: 1.05rem;
    margin: 0 0 28px;
    line-height: 1.5;
}
.wa-progress {
    width: 260px;
    max-width: 80vw;
    height: 6px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.wa-progress {
    position: relative;
}
.wa-progress-bar {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wa-cyan), var(--wa-magenta), var(--wa-gold));
    background-size: 200% 100%;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 14px rgba(90, 70, 255, 0.6);
    animation: wa-bar-flow 2.4s linear infinite;
}
/* A travelling glare that keeps the bar visibly "working" while it fills. */
.wa-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: wa-bar-sheen 1.5s ease-in-out infinite;
}
@keyframes wa-bar-flow { to { background-position: 200% 0; } }
@keyframes wa-bar-sheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

.wa-status { color: var(--wa-muted); font-size: 0.9rem; min-height: 1.2em; margin: 0 0 22px; }
/* Sign of life on the status line while loading. The dots are a FIXED string
   (never change width) and only breathe in opacity, so the centered text never
   reflows / jumps sideways. */
.wa-loader.is-loading .wa-status::after {
    content: "···";
    display: inline-block;
    width: 1.4em;
    text-align: start;
    letter-spacing: 0.12em;
    animation: wa-dots 1.5s ease-in-out infinite;
}
@keyframes wa-dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* Breathing title glow while the salon builds. */
.wa-loader.is-loading .wa-loader-title { animation: wa-title-pulse 2.6s ease-in-out infinite; }
@keyframes wa-title-pulse {
    0%, 100% { text-shadow: 0 0 30px rgba(120, 90, 255, 0.35); filter: brightness(1); }
    50% { text-shadow: 0 0 52px rgba(120, 90, 255, 0.75); filter: brightness(1.12); }
}

.wa-enter-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    min-height: 52px;
    padding: 0 34px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a0720;
    background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta));
    box-shadow: 0 8px 30px rgba(90, 70, 255, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}
.wa-enter-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(90, 70, 255, 0.65); }
.wa-enter-btn:active:not(:disabled) { transform: translateY(0); }
.wa-enter-btn:disabled { opacity: 0.45; cursor: default; }
/* When the (real) preload finishes, the button lights up with a confident pop
   + a gentle attention pulse so it's clear the arena is ready to enter. */
.wa-enter-btn.is-ready { animation: wa-enter-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4), wa-enter-glow 2.2s ease-in-out 0.5s infinite; }
@keyframes wa-enter-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes wa-enter-glow {
    0%, 100% { box-shadow: 0 8px 30px rgba(90, 70, 255, 0.5); }
    50% { box-shadow: 0 10px 44px rgba(36, 224, 255, 0.7); }
}

/* ---- HUD ------------------------------------------------------------------ */
.wa-hud { position: fixed; z-index: 20; }

.wa-topright {
    top: calc(12px + env(safe-area-inset-top, 0px));
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
    display: flex;
    gap: 8px;
    align-items: center;
    /* Never let the button cluster run past the screen edge — wrap it into a
       neat right-aligned block instead of clipping behind the browser chrome. */
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100vw - 24px);
}
.wa-hud-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--wa-panel-brd);
    background: var(--wa-panel);
    color: var(--wa-ink);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.wa-hud-btn:hover { transform: translateY(-1px); border-color: var(--wa-cyan); background: rgba(36, 224, 255, 0.12); }
.wa-hud-btn.is-on { border-color: var(--wa-cyan); color: var(--wa-cyan); }
.wa-hud-btn .wa-ico { font-size: 1.15rem; line-height: 1; }
.wa-ico-tiles { display: inline-flex; align-items: center; justify-content: center; }
.wa-ico-tiles svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.45)); }
/* "2D" badge — a clean text glyph in place of the old folder emoji, sized to
   sit like the other HUD icons. */
.wa-ico-2d {
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--wa-cyan);
}

/* Unified "2D Hub →" exit button — the single way back to the classic 2D hub
   (replaced the separate "Classic 2D" + "✕" buttons). Desktop shows the full
   label ("2D Hub →"); the standalone "2D" icon glyph is mobile-only (see the
   560px breakpoint) so desktop never shows "2D" twice. */
.wa-hud-2d { gap: 0.45em; }
.wa-hud-2d .wa-ico { display: none; }
.wa-hud-2d .wa-2d-arrow {
    font-weight: 800;
    line-height: 1;
    color: var(--wa-cyan);
}
[dir="rtl"] .wa-hud-2d .wa-2d-arrow { display: inline-block; transform: scaleX(-1); }

/* Arabic: force modern Kufi (Noto Kufi Arabic) across the ENTIRE arena — the
   splash/loader, HUD, the start-game popup, on-screen keyboards, result modals
   AND the injected 2D game panels (which otherwise inherit word-games.css'
   generic `.mg` font). The arena must NEVER show a generic system Arabic font,
   so this uses !important to beat the `.mg`/word-games.css declarations.
   (Only affects DOM text; the WebGL tile glyphs are drawn separately.) */
.wa-rtl,
.wa-rtl *,
.wa-rtl button,
.wa-rtl input,
.wa-rtl textarea,
.wa-rtl select {
    font-family: "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.wa-topleft {
    top: calc(12px + env(safe-area-inset-top, 0px));
    inset-inline-start: max(12px, env(safe-area-inset-left, 0px));
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Current game name shown beside the Daily/Play toggle so it's never ambiguous */
.wa-game-name {
    display: none;
    max-width: min(34vw, 220px);
    min-width: 0;
    flex: 0 1 auto;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--wa-panel-brd);
    background: var(--wa-panel);
    color: var(--wa-gold, #f2c14e);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.wa-game-name.is-shown { display: inline-block; }
@media (max-width: 760px) { .wa-game-name { max-width: 28vw; font-size: 0.8rem; padding: 5px 10px; } }
/* On phones the top-right icon cluster and the left toggle leave no room for a
   name pill — hide it there (the player just picked the game). */
@media (max-width: 640px) { .wa-game-name.is-shown { display: none; } }

/* Exit-to-library door button (mirrors the reader's exit affordance), sits to
   the inline-start of the Daily/Play toggle. */
.wa-exit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid var(--wa-panel-brd);
    background: var(--wa-panel);
    color: var(--wa-gold, #f2c14e);
    cursor: pointer;
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wa-exit-btn:hover,
.wa-exit-btn:focus-visible {
    color: #0a0720;
    background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta));
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    outline: none;
}
/* The door arrow should point OUT toward the screen edge (leftwards in LTR, so
   it reads as "leave"). The base Feather icon points right, so mirror it in LTR
   and leave it un-mirrored in RTL (where the button sits on the right edge). */
.wa-exit-btn svg { display: block; transform: scaleX(-1); }
[dir="rtl"] .wa-exit-btn svg { transform: none; }
@media (max-width: 760px) { .wa-exit-btn { width: 40px; height: 40px; } }

/* Mode + game switch pills */
.wa-modeswitch {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid var(--wa-panel-brd);
    background: var(--wa-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.wa-mode-pill {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--wa-muted);
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.wa-mode-pill.is-active { background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta)); color: #0a0720; }
/* Daily finished for today: the pill locks (server dedups the result, so a
   replay would never count) and reads "✓ Played today". */
.wa-mode-pill--done { color: var(--wa-muted); opacity: 0.55; cursor: not-allowed; }
.wa-mode-pill--done.is-active { background: transparent; color: var(--wa-muted); }
.wa-mode-pill:disabled { pointer-events: none; }

/* ---- Game detail card (lobby preview) ------------------------------------ */
.wa-detail {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.wa-detail.is-open { opacity: 1; pointer-events: auto; }
.wa-detail-backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 4, 14, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wa-detail-card {
    position: relative;
    z-index: 1;
    width: min(90vw, 340px);
    padding: 18px 20px 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(30,22,44,0.96), rgba(16,11,26,0.98));
    border: 1px solid var(--wa-panel-brd);
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    text-align: center;
    transform: translateY(10px) scale(0.96);
    transition: transform 0.24s cubic-bezier(0.2,0.8,0.3,1);
}
.wa-detail.is-open .wa-detail-card { transform: none; }
.wa-detail-cover {
    width: 168px; height: 250px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.55);
    margin: 0 auto 14px;
    display: block;
    background: rgba(255,255,255,0.05);
}
.wa-detail-name { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--wa-ink); }
.wa-detail-tag { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.4; color: var(--wa-muted); }
.wa-detail-actions { display: flex; gap: 10px; justify-content: center; }
.wa-detail-howto {
    margin-top: 12px;
    background: none; border: 0;
    color: var(--wa-muted);
    font-size: 0.85rem; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
}
.wa-detail-howto:hover { color: var(--wa-ink); }
@media (max-width: 560px) { .wa-detail-cover { width: 132px; height: 196px; } .wa-detail-name { font-size: 1.15rem; } }

/* ---- Entry choice: Standalone vs My Book puzzles (Phase 2) --------------- */
.wa-choose {
    position: fixed; inset: 0; z-index: 42;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.wa-choose.is-open { opacity: 1; pointer-events: auto; }
.wa-choose-backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 4, 14, 0.72);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.wa-choose-panel {
    position: relative; z-index: 1;
    width: min(94vw, 620px);
    padding: 30px 26px 32px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(30,22,44,0.97), rgba(16,11,26,0.98));
    border: 1px solid var(--wa-panel-brd, rgba(214,188,120,0.28));
    box-shadow: 0 28px 70px rgba(0,0,0,0.62);
    text-align: center;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.26s cubic-bezier(0.2,0.8,0.3,1);
}
.wa-choose.is-open .wa-choose-panel { transform: none; }
.wa-choose-title {
    margin: 0 0 22px; font-size: 1.5rem; font-weight: 800;
    color: var(--wa-ink, #f4efe2); letter-spacing: 0.01em;
}
.wa-choose-opts { display: flex; gap: 16px; justify-content: center; }
.wa-choose-opt {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 26px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(214,188,120,0.22);
    color: var(--wa-ink, #f4efe2);
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.wa-choose-opt:hover, .wa-choose-opt:focus-visible {
    transform: translateY(-4px);
    background: rgba(214,188,120,0.10);
    border-color: rgba(214,188,120,0.55);
    box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px rgba(214,188,120,0.25) inset;
    outline: none;
}
.wa-choose-opt-ic {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(214,188,120,0.28), rgba(214,188,120,0.06));
    color: #e7cf8f;
}
.wa-choose-opt-t { font-size: 1.08rem; font-weight: 700; }
.wa-choose-opt-s { font-size: 0.85rem; line-height: 1.35; color: var(--wa-muted, #b9b0c4); }
@media (max-width: 560px) {
    .wa-choose-panel { padding: 24px 18px 26px; }
    .wa-choose-title { font-size: 1.25rem; margin-bottom: 18px; }
    .wa-choose-opts { flex-direction: column; gap: 12px; }
    .wa-choose-opt { flex-direction: row; text-align: start; padding: 16px; gap: 14px; }
    .wa-choose-opt-ic { flex: 0 0 auto; width: 46px; height: 46px; }
    .wa-choose-opt-txt, .wa-choose-opt-t, .wa-choose-opt-s { text-align: start; }
}

/* Book scope is Practice-only (no shared Daily yet) → hide the Daily/Play switch. */
body.wa-book-scope .wa-modeswitch { display: none !important; }

/* ---- World switch (Standalone <-> Book puzzles) kebab menu --------------- */
.wa-world { position: relative; display: inline-flex; }
.wa-world-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(16,11,26,0.66); color: var(--wa-ink, #f4efe2);
    border: 1px solid rgba(214,188,120,0.3);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.wa-world-btn:hover { background: rgba(214,188,120,0.16); border-color: rgba(214,188,120,0.55); transform: translateY(-1px); }
.wa-world-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
    min-width: 210px; padding: 6px;
    background: rgba(20,14,30,0.96); border: 1px solid rgba(214,188,120,0.3);
    border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 60;
}
.wa-world-item {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: none; border: 0; cursor: pointer;
    color: var(--wa-ink, #f4efe2); font-size: 0.95rem; font-weight: 600;
    text-align: start;
}
.wa-world-item:hover, .wa-world-item:focus-visible { background: rgba(214,188,120,0.14); outline: none; }
.wa-world-item svg { flex: 0 0 auto; color: #e7cf8f; }
/* A `hidden` menu item must actually disappear — the `display:flex` above would
   otherwise beat the UA `[hidden]{display:none}` and show BOTH switch options. */
.wa-world-item[hidden] { display: none !important; }
/* Layering fix: the top-left cluster is `.wa-hud{z-index:20}`, which creates a
   stacking context — so the world-switch dropdown (inner z-index:60) was trapped
   BELOW the docked score strip (.wa-stats, z-index:57) and rendered behind it.
   While the menu is open, raise the whole cluster above the score strip (and the
   game panel z58) but below true modals (z70). At rest it stays at 20 — no change,
   no regression. Applies to every language (shared CSS). */
.wa-hud.wa-topleft.wa-menu-open { z-index: 65; }
@media (prefers-reduced-motion: reduce) { .wa-world-btn { transition: none; } }

/* ---- Library (bookshelf) view bar ---------------------------------------- */
.wa-lib-bar {
    position: fixed; z-index: 20;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 50%; transform: translateX(-50%) translateY(-8px);
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 14px;
    border-radius: 999px;
    background: rgba(16,11,26,0.72);
    border: 1px solid rgba(214,188,120,0.28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: calc(100vw - 24px);
}
.wa-lib-bar.is-shown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.wa-lib-title {
    font-size: 0.95rem; font-weight: 700; color: var(--wa-ink, #f4efe2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-inline-end: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .wa-choose, .wa-choose-panel, .wa-choose-opt, .wa-lib-bar { transition: none; }
}

/* ---- Bottom dock: hint row + on-screen keyboard as ONE unit -------------- */
/* The flipping hint row sits directly ABOVE the keyboard tray, so the keyboard
   never covers the hint. */
.wa-dock {
    position: fixed;
    z-index: 18;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
}

/* Flip-hint row — a legible strip on a soft dark fade, sitting on the 3D scene
   right above the light keyboard tray. */
.wa-hint {
    order: 0;
    color: #e7dfc9;
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    padding: 16px 16px 10px;
    background: linear-gradient(180deg, rgba(14,9,3,0) 0%, rgba(14,9,3,0.55) 60%, rgba(14,9,3,0.78) 100%);
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    perspective: 600px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.wa-hint.is-shown { opacity: 1; }
/* Desktop (physical keyboard): the tray is just a few action pills, so move the
   flipping hint row BELOW them, flush to the very bottom edge. On touch the full
   on-screen keyboard occupies the bottom, so the hint stays above it (default
   order) and is never covered. */
body:not(.wa-touch) .wa-hint {
    order: 2;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(14,9,3,0.82) 0%, rgba(14,9,3,0.5) 55%, rgba(14,9,3,0) 100%);
}
.wa-hint-face {
    display: inline-block;
    transform-origin: center;
    opacity: 1;
    transition: transform 0.24s ease;
}
.wa-hint-face.is-flipping { transform: rotateX(90deg); }
.wa-kb-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .wa-hint-face { transition: opacity 0.2s ease; } }

/* ---- On-screen keyboard: standard iOS-style tray ------------------------- */
/* Row 1 = 10 keys; row 2 = 9 keys (naturally indented/centred); row 3 =
   Enter (shift slot) + 7 letters + Backspace, the two special keys flexing to
   fill the sides so the letters stay the SAME width across every row. Light
   tray + white keys, exactly like the phone's own keyboard. */
/* Glass keyboard — no opaque tray. The keys are frosted, gold-rimmed glass
   tiles that let the candlelit salon glow through, so the keyboard reads as
   part of the room rather than a phone UI pasted on top. */
.wa-keyboard {
    order: 1;
    --kb-gap: 6px;
    --kb-key: clamp(28px, calc((100vw - 14px - 9 * var(--kb-gap)) / 10), 46px);
    display: flex;
    flex-direction: column;
    gap: var(--kb-gap);
    padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
    background: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.wa-keyboard.is-shown { opacity: 1; pointer-events: auto; }
/* When no keyboard is shown (lounge, Word Wheel, Word Search…) collapse it so
   it reserves NO space — the flip-hint row then sits flush on the bottom edge
   instead of floating up above an invisible keyboard. */
.wa-keyboard:not(.is-shown) { display: none; }
.wa-kb-row { display: flex; justify-content: center; align-items: stretch; gap: var(--kb-gap); }
.wa-key {
    appearance: none;
    flex: 0 1 var(--kb-key);
    width: var(--kb-key);
    height: 46px;
    border-radius: 11px;
    /* Warm dark glass: the scene frosts through, tinted to the salon. */
    background: linear-gradient(180deg, rgba(58, 46, 30, 0.42), rgba(24, 17, 10, 0.42));
    border: 1px solid rgba(202, 162, 74, 0.32);
    color: #f6ecd2;
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 240, 200, 0.14);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease;
}
.wa-key:active {
    background: linear-gradient(180deg, rgba(240, 200, 110, 0.55), rgba(180, 130, 45, 0.5));
    border-color: rgba(255, 226, 150, 0.85);
    color: #fff8e6;
    transform: translateY(1px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 200, 0.25), 0 0 14px rgba(240, 200, 110, 0.4);
}
/* Enter (shift slot) + Backspace: quieter glass, gold-tinted icon, flexing to
   fill the row's sides. A spacer with the same flex keeps letters centred when
   Enter is omitted. */
.wa-key--action {
    flex: 1 1 auto;
    width: auto;
    min-width: calc(var(--kb-key) * 1.25);
    background: linear-gradient(180deg, rgba(40, 32, 20, 0.30), rgba(18, 13, 8, 0.30));
    border-color: rgba(202, 162, 74, 0.22);
    color: rgba(246, 230, 190, 0.92);
}
.wa-key--action svg { width: 26px; height: 26px; display: block; }
.wa-key--action:active {
    background: linear-gradient(180deg, rgba(202, 162, 74, 0.42), rgba(140, 100, 40, 0.4));
    color: #fff8e6;
    transform: translateY(1px);
}
.wa-key--spacer {
    background: none; border-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
/* Long-press indicator + popup (Arabic alternate chars). */
.wa-key--lp { position: relative; }
.wa-key--lp::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255,214,90,0.7); }
.wa-kb-popup { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(16,12,6,0.96); border: 1px solid rgba(202,162,74,0.5); box-shadow: 0 8px 24px rgba(0,0,0,.6); z-index: 30; white-space: nowrap; }
.wa-kb-popup-key { min-width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(202,162,74,0.4); background: rgba(30,22,12,0.95); color: #efe2c4; font-size: 1.1rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wa-kb-popup-key:active { background: rgba(202,162,74,0.35); color: #fff; }
/* RTL keyboard */
.wa-keyboard[dir="rtl"] .wa-kb-row { direction: rtl; }
}

/* Anagrams (3D) secondary action row: Shuffle / Clear as glass pills. */
.wa-actions-row { gap: 12px; margin-top: 6px; }
/* Icon + label pills: bigger, clearly readable text with a leading glyph. */
.wa-actions-row .wa-key--pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wa-pill-ico { width: 18px; height: 18px; flex: none; display: block; }
.wa-pill-label { line-height: 1; }
.wa-actions-row .wa-key--pill {
    flex: 0 1 auto; width: auto; min-width: 104px; max-width: 180px; height: 48px;
    padding: 0 22px; border-radius: 999px;
    font-size: 0.98rem; font-weight: 800; letter-spacing: 0.02em; text-transform: none;
}
.wa-actions-row .wa-key--pill.wa-key--primary {
    background: linear-gradient(180deg, rgba(240, 200, 110, 0.9), rgba(170, 120, 40, 0.85));
    border-color: rgba(255, 226, 150, 0.9);
    color: #2a1c00;
    text-shadow: none;
    box-shadow: 0 4px 16px rgba(202, 162, 74, 0.45), inset 0 1px 0 rgba(255, 245, 210, 0.4);
}
/* "How to play" HUD button — only visible while a game is mounted */
.wa-help-btn { display: none; }
.wa-help-btn.is-shown { display: inline-flex; }
/* Secret Word (3D): the secret-entry tiles above the on-screen keyboard */
.wa-sw-tiles { gap: 8px; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; }
.wa-sw-tile {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 44px; padding: 0 6px;
    border: 2px solid var(--wa-panel-brd, rgba(202,162,74,0.5));
    border-radius: 8px; background: rgba(20, 14, 6, 0.6);
    font: 700 1.3rem Georgia, serif; color: #ffe9bd; text-transform: uppercase;
    cursor: default;
    transition: border-color 0.12s ease, background 0.18s ease, color 0.18s ease, transform 0.08s ease;
}
.wa-sw-tile[data-filled="1"] { border-color: var(--wa-gold, #caa24a); background: rgba(90, 63, 18, 0.7); cursor: pointer; }
/* Hint-locked letters can't be tapped away. */
.wa-sw-tile[data-locked="1"] { cursor: default; box-shadow: inset 0 0 0 1px rgba(240, 200, 90, 0.5); }
/* The next slot (drop target) gets a soft ring + blinking caret. */
.wa-sw-tile[data-filled="0"][data-active="1"] {
    border-color: rgba(240, 200, 90, 0.9);
    box-shadow: 0 0 0 3px rgba(240, 200, 90, 0.22);
}
.wa-sw-tile[data-filled="0"][data-active="1"]::after {
    content: ''; width: 2px; height: 58%;
    background: rgba(255, 233, 189, 0.9);
    animation: wa-sw-caret 1s step-end infinite;
}
@keyframes wa-sw-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
/* Correct-order confirmation flip (sequenced on a win). */
.wa-sw-tile[data-correct="1"] {
    border-color: #37c26b; background: #2f9d53; color: #08130a;
    transform: translateY(-2px) scale(1.06);
}
.wa-sw-tile[data-correct="1"]::after { display: none; }
/* Wrong-order shake on the slot row. */
.wa-sw-shake { animation: wa-sw-shake 0.4s ease; }
@keyframes wa-sw-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-sw-tile[data-correct="1"], .wa-sw-shake, .wa-sw-tile[data-active="1"]::after { animation: none; transform: none; }
}
/* Desktop physical-keyboard tip shown in place of the on-screen keys */
.wa-kb-hint { margin: 4px 0 0; font-size: 0.85rem; color: rgba(240, 224, 180, 0.7); text-align: center; }
/* Hangman (3D): lives + clue row above the on-screen keyboard */
.wa-hm-info { gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; max-width: 720px; }
.wa-hm-hearts { font-size: 1.2rem; letter-spacing: 2px; color: #e2536a; }
.wa-hm-hearts[data-low="1"] { color: #ff6b6b; }
.wa-hm-clue { font-size: 0.9rem; color: var(--wa-ink-soft, #d9c9a0); opacity: 0.92; }
.wa-key[data-state="correct"] { background: var(--wa-green); color: #05210f; border-color: var(--wa-green); }
.wa-key[data-state="present"] { background: var(--wa-gold); color: #2a1e00; border-color: var(--wa-gold); }
.wa-key[data-state="absent"]  { background: rgba(60, 54, 90, 0.6); color: #6f6a94; border-color: transparent; }

/* ---- Message line -------------------------------------------------------- */
.wa-message {
    position: fixed;
    z-index: 19;
    inset-inline: 0;
    top: 74px;
    padding: 0 12px;
    text-align: center;
    pointer-events: none;
}
/* On phones, anchor the message just BELOW the top stats strip (clock/score,
   which docks at ~84px + safe-area and is ~52px tall) and well ABOVE the
   bottom keyboard dock — it wraps to multiple lines instead of cropping. */
@media (max-width: 760px), (orientation: portrait) {
    .wa-message { top: calc(146px + env(safe-area-inset-top, 0px)); bottom: auto; }
}
.wa-message span {
    display: inline-block;
    max-width: min(92vw, 560px);
    background: var(--wa-panel);
    border: 1px solid var(--wa-panel-brd);
    color: var(--wa-ink);
    padding: 10px 18px;
    border-radius: 18px;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (max-width: 560px) {
    .wa-message span { font-size: 0.98rem; padding: 10px 16px; }
}
.wa-message.is-shown span { opacity: 1; transform: none; }
.wa-message.is-error span { border-color: var(--wa-magenta); color: #ffd7ea; }

/* ---- Word Search list (mobile DOM strip, pinned to the bottom) ----------- */
.wa-wordlist {
    position: fixed;
    z-index: 19;
    left: 50%;
    transform: translateX(-50%);
    /* Lifted to sit ABOVE the flip-hint band (Word Search / Secret Word have no
       keyboard, so the hint ticker owns the bottom edge — the word-list chip
       floats just above it instead of covering it). */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    display: none;
    width: max-content;
    max-width: 96vw;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 24, 44, 0.84), rgba(10, 12, 26, 0.92));
    border: 1px solid rgba(36, 224, 255, 0.28);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.wa-wordlist.is-shown { display: block; }
.wa-wl-title {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wa-muted);
    margin-bottom: 7px;
}
.wa-wl-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; }
.wa-wl-chip {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f4ecd8;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.wa-wl-chip.is-found {
    color: rgba(120, 200, 110, 0.95);
    text-decoration: line-through;
    opacity: 0.65;
    border-color: rgba(120, 200, 110, 0.35);
}

/* Short screens (landscape phones etc.): keep the same below-the-stats anchor. */
@media (max-width: 760px), (max-height: 620px) {
    .wa-message {
        top: calc(140px + env(safe-area-inset-top, 0px));
        bottom: auto;
    }
    /* Free up the crowded top-right cluster on phones: the cinematic replay is
       non-essential there. */
    .wa-touch #wa-intro-btn { display: none; }
}

/* ---- Result overlay (modal) ---------------------------------------------- */
.wa-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.wa-overlay.is-open { display: flex; }
.wa-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 4, 16, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.wa-card {
    position: relative;
    width: min(440px, 92vw);
    background: var(--wa-panel);
    border: 1px solid var(--wa-panel-brd);
    border-radius: 20px;
    padding: 30px 26px 24px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), var(--wa-glow);
    animation: wa-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes wa-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wa-card-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--wa-ink);
    font-size: 1.4rem;
    cursor: pointer;
}
.wa-card-emoji { font-size: 3rem; margin-bottom: 6px; }
.wa-card-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }
.wa-card-title.win { color: var(--wa-green); }
.wa-card-title.lose { color: var(--wa-magenta); }
.wa-card-note { color: var(--wa-muted); margin: 0 0 18px; line-height: 1.5; }
.wa-card-stats { display: flex; justify-content: center; gap: 22px; margin-bottom: 20px; }
.wa-stat { text-align: center; }
.wa-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--wa-cyan); }
.wa-stat-label { font-size: 0.72rem; color: var(--wa-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wa-card-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wa-btn {
    appearance: none;
    border: 1px solid var(--wa-panel-brd);
    background: rgba(255, 255, 255, 0.06);
    color: var(--wa-ink);
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease, background 0.15s ease;
}
.wa-btn:hover { transform: translateY(-1px); }
.wa-btn.primary { border: 0; color: #0a0720; background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta)); }
/* Share-to-community button in result cards: icon + label, matches the 2D hub. */
.wa-share-btn { gap: 8px; }
.wa-share-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.wa-share-btn:disabled { opacity: 0.6; cursor: default; }

/* ---- Leaderboard drawer -------------------------------------------------- */
.wa-drawer {
    position: fixed;
    /* Above the docked score rail (.wa-stats, z-index 57) and game panel so the
       leaderboard never slides behind the top score row. */
    z-index: 62;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    width: min(360px, 88vw);
    background: linear-gradient(180deg, var(--wa-bg-2), var(--wa-bg));
    border-inline-start: 1px solid var(--wa-panel-brd);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.3, 0.8, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
[dir="rtl"] .wa-drawer { transform: translateX(-100%); }
.wa-drawer.is-open { transform: none; }
.wa-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wa-drawer-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.wa-drawer-close {
    width: 40px; height: 40px; border-radius: 10px; border: 0;
    background: rgba(255, 255, 255, 0.06); color: var(--wa-ink); font-size: 1.3rem; cursor: pointer;
}
.wa-drawer-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.wa-drawer-tab {
    appearance: none; border: 1px solid var(--wa-panel-brd); background: transparent;
    color: var(--wa-muted); min-height: 34px; padding: 0 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.wa-drawer-tab.is-active { background: rgba(36, 224, 255, 0.14); color: var(--wa-cyan); border-color: var(--wa-cyan); }
.wa-lb-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wa-lb-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
}
.wa-lb-row.is-you { border-color: var(--wa-cyan); background: rgba(36, 224, 255, 0.1); }
.wa-lb-rank { font-weight: 800; color: var(--wa-gold); text-align: center; }
.wa-lb-row:nth-child(1) .wa-lb-rank { font-size: 1.15rem; }
.wa-lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-lb-metric { font-weight: 800; color: var(--wa-cyan); }
.wa-lb-empty { color: var(--wa-muted); text-align: center; padding: 40px 10px; line-height: 1.5; }
/* Daily | All Time view tabs (pill style, matches the drawer's other tabs). */
/* "Choose a game" dropdown — full-width, primary selector at the top. */
.wa-lb-gamebar { padding: 2px 2px 10px; }
.wa-lb-game { width: 100%; min-height: 42px; font-weight: 700; }
.wa-lb-tabs { display: flex; gap: 8px; padding: 2px 2px 10px; }
.wa-lb-tab {
    flex: 1;
    appearance: none; border: 1px solid var(--wa-panel-brd); background: transparent;
    color: var(--wa-muted); min-height: 38px; padding: 0 14px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wa-lb-tab:hover { color: var(--wa-ink); }
.wa-lb-tab.is-active { background: rgba(36, 224, 255, 0.14); color: var(--wa-cyan); border-color: var(--wa-cyan); }
.wa-lb-langbar { display: flex; justify-content: flex-end; padding: 2px 2px 6px; }
.wa-lb-lang {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 5px 10px;
    font: inherit;
    cursor: pointer;
}
.wa-lb-lang:focus-visible { outline: 2px solid var(--wa-cyan); outline-offset: 1px; }

/* ---- Guest banner -------------------------------------------------------- */
.wa-guest {
    position: fixed;
    z-index: 22;
    bottom: 78px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 12px;
    max-width: 92vw;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--wa-panel);
    border: 1px solid var(--wa-panel-brd);
    color: var(--wa-ink);
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[dir="rtl"] .wa-guest { transform: translateX(50%); }
.wa-guest.is-shown { display: flex; }
.wa-guest a {
    color: #0a0720;
    background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta));
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Screen-reader only -------------------------------------------------- */
.wa-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;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 560px) {
    .wa-hud-btn .wa-lbl { display: none; }
    /* Space is tight on phones: hide the intro-replay button (compromise — the
       intro already played). */
    #wa-intro-btn { display: none; }
    /* Compact, evenly-sized icon buttons so the whole settings cluster fits
       across a phone without clipping. */
    .wa-topright { gap: 6px; }
    .wa-hud-btn {
        min-height: 40px;
        width: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 11px;
    }
    /* On mobile the 2D Hub button matches the other icon-only HUD buttons:
       just the "2D" glyph + arrow (no "Hub" text) — it still sizes to its
       (slightly wider, 2-glyph) content instead of the fixed square. */
    .wa-hud-2d {
        width: auto;
        padding: 0 12px;
        gap: 0.3em;
    }
    .wa-hud-2d .wa-ico { display: inline; font-size: 0.92rem; font-weight: 800; }
    .wa-hud-btn .wa-ico { font-size: 1.05rem; }
    .wa-key { height: 42px; font-size: 1.15rem; }
    /* Hug the top edge on phones: drop the extra +12px that stacked on top of the
       safe-area inset (it read as "the top row shifted down"). Keep both HUD
       corners on the same line. */
    .wa-topleft, .wa-topright { top: max(6px, env(safe-area-inset-top, 0px)); }
    /* The whole row is two edge-anchored clusters; when left + right widths
       exceed the viewport they collide in the middle ("cascading"). Tighten the
       gaps and slim every control so the total stays under a phone's width. */
    .wa-topleft { gap: 5px; }
    .wa-topright { gap: 5px; }
    .wa-hud-btn { min-height: 38px; width: 38px; }
    .wa-hud-2d { padding: 0 10px; }
    .wa-exit-btn { width: 38px; height: 38px; }
    .wa-world-btn { width: 34px; height: 34px; }
    .wa-topright { max-width: calc(100vw - 188px); }
    .wa-modeswitch { padding: 3px; }
    .wa-mode-pill { padding: 0 9px; font-size: 0.74rem; min-height: 32px; }
}
/* Very narrow phones (~390px and below): squeeze harder so the whole top row
   still fits on one line without the two clusters overlapping. */
@media (max-width: 430px) {
    .wa-topleft { gap: 4px; }
    .wa-topright { gap: 4px; }
    .wa-hud-btn { min-height: 36px; width: 36px; }
    .wa-hud-2d { padding: 0 8px; }
    .wa-world-btn { width: 32px; height: 32px; }
    .wa-exit-btn { width: 36px; height: 36px; }
    .wa-modeswitch { padding: 2px; }
    .wa-mode-pill { padding: 0 8px; font-size: 0.7rem; min-height: 30px; }
    .wa-topright { max-width: calc(100vw - 172px); }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .wa-orb { animation: none; }
    .wa-card { animation: none; }
    .wa-progress-bar, .wa-progress-bar::after,
    .wa-loader.is-loading .wa-loader-title,
    .wa-loader.is-loading .wa-status::after,
    .wa-enter-btn.is-ready { animation: none; }
    .wa-fade, .wa-loader, .wa-keyboard, .wa-drawer, .wa-hint, .wa-message span,
    .wa-enter-btn, .wa-hud-btn, .wa-btn { transition: none; }
}

/* ---- Attribution credit (leaderboard drawer footer) --------------------- */
.wa-credit {
    margin: 12px 4px 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--wa-muted);
    opacity: 0.8;
}
.wa-credit a { color: var(--wa-cyan); text-decoration: none; }
.wa-credit a:hover { text-decoration: underline; }

/* ---- Game picker --------------------------------------------------------- */
.wa-picker {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 5, 2, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wa-picker.is-open { display: flex; }
.wa-picker-panel {
    position: relative;
    width: min(680px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 30px 26px 26px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(180deg, rgba(40, 28, 16, 0.96), rgba(24, 16, 9, 0.98));
    border: 1px solid rgba(202, 162, 74, 0.4);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(202, 162, 74, 0.15);
    animation: wa-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.wa-picker-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--wa-ink);
    font-size: 1.4rem;
    cursor: pointer;
}
.wa-picker-title {
    margin: 0 0 4px;
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(92deg, #ffcf5c, #e0a13c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.wa-picker-sub { margin: 0 0 22px; color: var(--wa-muted); font-size: 0.95rem; }
.wa-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.wa-pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(202, 162, 74, 0.28);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.wa-pick-card:hover { transform: translateY(-3px); border-color: rgba(255, 207, 92, 0.7); background: rgba(255, 207, 92, 0.08); }
.wa-pick-card.is-disabled { opacity: 0.55; }
.wa-pick-card.is-disabled:hover { transform: none; border-color: rgba(202, 162, 74, 0.28); background: rgba(255, 255, 255, 0.05); }
.wa-pick-name { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--wa-ink); }
.wa-pick-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wa-muted);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px dashed rgba(202, 162, 74, 0.5);
}
.wa-pick-card .wa-btn.primary {
    background: linear-gradient(92deg, #ffcf5c, #e0813c);
    color: #2a1a06;
}

@media (prefers-reduced-motion: reduce) {
    .wa-picker-panel { animation: none; }
    .wa-pick-card { transition: none; }
}

/* ---- Cinematic intro overlay -------------------------------------------- */
.wa-intro {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 1;
    transition: opacity 0.7s ease;
}
.wa-intro.is-open { display: flex; }
.wa-intro.is-fading { opacity: 0; }
.wa-intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* center-weighted framing; key action stays centered */
    object-position: center;
    background: #000;
}
/* Both intro controls live in one centred row so they read balanced (same
   height, aligned baseline, centred as a pair — not pinned to opposite edges). */
.wa-intro-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 16px;
}
.wa-intro-skip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.wa-intro-skip:hover { background: rgba(0, 0, 0, 0.7); transform: translateY(-1px); }
.wa-intro-hide-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    user-select: none;
}
.wa-intro-hide-label input {
    width: 18px;
    height: 18px;
    accent-color: var(--wa-cyan);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .wa-intro { transition: none; }
}

/* ---- 2D game panel (word search / anagrams / crossword over the salon) --- */
.wa-gamepanel {
    position: fixed;
    inset: 0;
    z-index: 58;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 66px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    /* Light scrim + soft blur: the salon stays visible behind the game so it
       reads as an overlay on the room, not an opaque page. */
    background: radial-gradient(120% 90% at 50% 0%, rgba(8, 5, 2, 0.30), rgba(8, 5, 2, 0.58));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.wa-gamepanel.is-open { display: flex; }
.wa-gamepanel-bar {
    position: fixed;
    top: 14px;
    inset-inline-start: 16px;
    z-index: 59;
}
.wa-gamepanel-back {
    appearance: none;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--wa-panel-brd);
    background: var(--wa-panel);
    color: var(--wa-ink);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.wa-gamepanel-back:hover { transform: translateY(-1px); border-color: var(--wa-cyan); }
/* The stage wrapper is transparent in the arena — the game card itself becomes
   the floating glass surface (below), so the salon shows through. */
.wa-gamepanel #wg-game-stage:not([hidden]) {
    width: auto;
    max-width: min(96vw, 980px);
    margin: 0 auto;
    background: none;
    padding: 0;
    box-shadow: none;
}

/* Frosted-glass game surfaces floating over the salon — translucent + blur, a
   cyan/gold rim, and a deep shadow so they feel like a HUD in the room rather
   than a solid card pasted on top. */
.wa-gamepanel .wg-wordle,
.wa-gamepanel .wg-wordsearch,
.wa-gamepanel .wg-anagrams,
.wa-gamepanel .mg {
    background:
        linear-gradient(180deg, rgba(18, 22, 40, 0.82), rgba(10, 12, 26, 0.86)) padding-box,
        linear-gradient(135deg, rgba(36, 224, 255, 0.55), rgba(168, 85, 247, 0.45)) border-box !important;
    border: 1.5px solid transparent !important;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 44px rgba(36, 224, 255, 0.12);
}

/* The stat bar (score / timer / streak / hint — the "spices") reads as a glass
   HUD strip on the game surface. */
.wa-gamepanel .mg-bar,
.wa-gamepanel .wg-ws-bar {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .wa-gamepanel-back { transition: none; }
}

/* ---- Selected-game caption (touch: name of the zoomed-in case) ---------- */
.wa-pick-caption {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
    z-index: 57;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 26px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 24, 44, 0.82), rgba(10, 12, 26, 0.88));
    border: 1px solid rgba(240, 200, 90, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 86vw;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.wa-pick-caption.is-shown { display: flex; opacity: 1; transform: translate(-50%, 0); }
.wa-pick-caption-name { font-size: 1.3rem; font-weight: 800; color: var(--wa-ink); letter-spacing: .01em; }
.wa-pick-caption-hint { font-size: .78rem; color: var(--wa-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Start / Cancel actions replace the old "tap again to play" hint. The caption
   itself ignores pointer events (so it never blocks the canvas), but the two
   buttons re-enable them so they're tappable. */
.wa-pick-caption-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.wa-pick-caption-btn {
    pointer-events: auto;
    appearance: none;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.wa-pick-caption-btn.is-start {
    color: #2a1a06;
    background: linear-gradient(92deg, #ffcf5c, #e0813c);
    box-shadow: 0 8px 24px rgba(224, 129, 60, 0.4);
}
.wa-pick-caption-btn.is-start:active { transform: translateY(1px); }
.wa-pick-caption-btn.is-start:hover { box-shadow: 0 12px 30px rgba(224, 129, 60, 0.55); }
.wa-pick-caption-btn.is-cancel {
    color: var(--wa-ink);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
.wa-pick-caption-btn.is-cancel:hover { background: rgba(255, 255, 255, 0.14); }
@media (prefers-reduced-motion: reduce) {
    .wa-pick-caption { transition: opacity .2s ease; }
    .wa-pick-caption-btn { transition: none; }
}

/* ---- Game stats HUD (scoreboard + spices) — docked glass rail ----------- */
.wa-stats {
    position: fixed;
    inset-inline-start: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 57;
    display: none;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.wa-stats.is-shown { display: flex; }
.wa-stats-chip,
.wa-stats-hint {
    pointer-events: auto;
    width: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 24, 44, 0.72), rgba(10, 12, 26, 0.80));
    border: 1px solid rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    color: var(--wa-ink);
}
.wa-stats-ico { font-size: 1.15rem; line-height: 1; }
.wa-stats-val { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wa-stats-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wa-muted); }
.wa-stats-hint {
    cursor: pointer;
    border-color: rgba(240, 200, 90, 0.5);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wa-stats-hint:hover { transform: translateY(-2px); border-color: rgba(240, 200, 90, 0.9); box-shadow: 0 14px 34px rgba(180, 130, 40, 0.35); }
.wa-stats-hint .wa-stats-lbl { color: var(--wa-ink); font-size: .7rem; }
.wa-stats-hint[hidden] { display: none; }
/* Help "?" chip: lives in the score row now, shown only while a game is mounted
   (toggled via .is-shown, like the old HUD button it replaced). */
.wa-stats-help { display: none; border-color: rgba(36, 224, 255, 0.5); }
.wa-stats-help.is-shown { display: flex; }
.wa-stats-help:hover { border-color: rgba(36, 224, 255, 0.9); box-shadow: 0 14px 34px rgba(36, 224, 255, 0.25); }
.wa-stats-help .wa-stats-ico { font-weight: 800; }
.wa-stats-chip.is-bump { animation: wa-stat-bump .4s ease; }
@keyframes wa-stat-bump { 40% { transform: scale(1.16); } }
/* Mobile / short screens: dock across the top as a horizontal strip. */
@media (max-width: 760px), (max-height: 620px) {
    .wa-stats {
        top: calc(84px + env(safe-area-inset-top, 0px));
        /* Use physical `left` (not logical `inset-inline-start`) so the strip
           centres correctly in BOTH LTR and RTL — it's a viewport-fixed HUD. */
        inset-inline-start: auto;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        flex-wrap: nowrap;                 /* never wrap/cascade the row */
        gap: 7px;
        max-width: calc(100vw - 10px);
    }
    /* Comfortable pills that still fit all five (time·streak·score·hint·help)
       on one row down to a 390px-wide phone. */
    .wa-stats-chip,
    .wa-stats-hint { width: auto; flex-direction: row; gap: 6px; padding: 8px 12px; border-radius: 999px; }
    .wa-stats-ico { font-size: 1.08rem; }
    .wa-stats-val { font-size: 1.08rem; }
    .wa-stats-lbl { display: none; }
}
/* Very small phones (< 360px): trim just enough to avoid overflow. */
@media (max-width: 360px) {
    .wa-stats { gap: 5px; }
    .wa-stats-chip,
    .wa-stats-hint { padding: 7px 9px; }
    .wa-stats-ico { font-size: 1rem; }
    .wa-stats-val { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-stats-hint { transition: none; }
    .wa-stats-chip.is-bump { animation: none; }
}

/* ---- Game-case hover tooltip -------------------------------------------- */
.wa-tip {
    position: fixed;
    z-index: 30;
    transform: translate(-50%, -100%);
    padding: 7px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(40,28,16,0.96), rgba(24,16,9,0.96));
    border: 1px solid rgba(202, 162, 74, 0.55);
    color: #ffe9c4;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.wa-tip.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wa-tip { transition: none; } }


/* ==========================================================================
   Leaderboard modal — ARENA SKIN
   The arena reuses the 2D hub's leaderboard markup (.wg-lb-*), but this file is
   loaded ONLY on the arena, so these overrides retheme it into the candlelit
   neon salon (deep violet glass + cyan / magenta / gold) without touching the
   2D hub. Loaded AFTER word-games.css, so equal-specificity rules win.
   ========================================================================== */

/* Deeper, violet-tinted scrim for a more immersive dim. */
.wg-lb-modal .wg-lb-scrim {
    background: radial-gradient(120% 90% at 70% 0%, rgba(90, 70, 255, 0.32), transparent 60%),
                rgba(4, 3, 12, 0.72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Glassy deep-violet panel with a neon edge-glow down the inner border. */
.wg-lb-modal .wg-lb-card {
    background:
        radial-gradient(140% 60% at 100% 0%, rgba(90, 70, 255, 0.22), transparent 55%),
        linear-gradient(180deg, rgba(22, 16, 50, 0.98), rgba(10, 7, 24, 0.99));
    border-inline-start: 1px solid var(--wa-panel-brd);
    box-shadow: -26px 0 70px rgba(0, 0, 0, 0.6),
                inset 1px 0 0 rgba(36, 224, 255, 0.35),
                inset 22px 0 60px -40px rgba(36, 224, 255, 0.4);
}

/* Header: violet-to-glass fade, gold trophy glow, cyan hairline underline. */
.wg-lb-modal .wg-lb-head {
    background: linear-gradient(180deg, rgba(90, 70, 255, 0.26), rgba(22, 16, 50, 0));
    border-bottom: 1px solid var(--wa-panel-brd);
    box-shadow: 0 1px 0 rgba(36, 224, 255, 0.22);
}
.wg-lb-modal .wg-lb-title { color: var(--wa-ink); letter-spacing: 0.01em; }
.wg-lb-modal .wg-lb-title-ico { filter: drop-shadow(0 2px 10px rgba(255, 207, 92, 0.7)); }
.wg-lb-modal .wg-lb-close {
    background: var(--wa-panel); color: var(--wa-ink); border: 1px solid var(--wa-panel-brd);
}
.wg-lb-modal .wg-lb-close:hover {
    background: rgba(36, 224, 255, 0.14); border-color: var(--wa-cyan); color: var(--wa-cyan);
}

/* Labels + selects (game & language dropdowns). */
.wg-lb-modal .wg-lb-selectlabel { color: var(--wa-muted); }
.wg-lb-modal .wg-lb-select {
    background-color: rgba(20, 15, 46, 0.9);
    border: 1.5px solid var(--wa-panel-brd);
    color: var(--wa-ink);
    /* Cyan chevron to match the arena accent. */
    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='%2324e0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.7);
}
.wg-lb-modal .wg-lb-select:hover {
    border-color: color-mix(in srgb, var(--wa-cyan) 55%, var(--wa-panel-brd));
    box-shadow: 0 10px 28px -12px rgba(36, 224, 255, 0.5);
}
.wg-lb-modal .wg-lb-select:focus-visible {
    border-color: var(--wa-cyan);
    box-shadow: 0 0 0 3px rgba(36, 224, 255, 0.32);
}

/* Daily | All-time tabs (rendered by the hub modal). */
.wg-lb-modal .wg-lb-tab { border-color: var(--wa-panel-brd); color: var(--wa-muted); }
.wg-lb-modal .wg-lb-tab:hover { color: var(--wa-ink); }
.wg-lb-modal .wg-lb-tab.is-active {
    background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta));
    color: #0a0720; border-color: transparent;
    box-shadow: 0 6px 20px -8px rgba(255, 62, 165, 0.6);
}

/* Podium — gold champion glow, neon avatar rings. */
.wg-lb-modal .wg-lb-seat-val { color: var(--wa-cyan); }
.wg-lb-modal .wg-lb-seat-1 .wg-lb-seat-val { color: var(--wa-gold); }
.wg-lb-modal .wg-lb-seat.is-me .wg-lb-seat-name { color: var(--wa-cyan); }
.wg-lb-modal .wg-lb-seat-1 .wg-lb-pedestal {
    background: linear-gradient(180deg, #ffe08a, #e0a52e);
    box-shadow: 0 -8px 30px -6px rgba(255, 207, 92, 0.8);
}
.wg-lb-modal .wg-lb-avatar {
    background: linear-gradient(135deg, #5a46ff, #ff3ea5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(140, 120, 255, 0.35);
}
.wg-lb-modal .wg-lb-avatar-1 {
    background: linear-gradient(135deg, #ffd76a, #e0a52e);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 207, 92, 0.6);
}

/* Ranked rows 4+. */
.wg-lb-modal .wg-lb-row {
    background: rgba(20, 15, 46, 0.6);
    border: 1px solid rgba(140, 120, 255, 0.14);
}
.wg-lb-modal .wg-lb-row:hover { border-color: var(--wa-panel-brd); }
.wg-lb-modal .wg-lb-row.is-me {
    border-color: var(--wa-cyan);
    background: rgba(36, 224, 255, 0.1);
}
.wg-lb-modal .wg-lb-rank { color: var(--wa-muted); }
.wg-lb-modal .wg-lb-name { color: var(--wa-ink); }
.wg-lb-modal .wg-lb-val { color: var(--wa-ink); }
.wg-lb-modal .wg-lb-bar { background: rgba(167, 163, 208, 0.18); }
.wg-lb-modal .wg-lb-bar-fill { background: linear-gradient(90deg, var(--wa-cyan), var(--wa-magenta)); }
[dir="rtl"] .wg-lb-modal .wg-lb-bar-fill { background: linear-gradient(270deg, var(--wa-cyan), var(--wa-magenta)); }
.wg-lb-modal .wg-lb-you {
    background: linear-gradient(92deg, var(--wa-cyan), var(--wa-magenta)); color: #0a0720;
}

/* Column heads, footer count, empty / loading states. */
.wg-lb-modal .wg-lb-listhead,
.wg-lb-modal .wg-lb-count { color: var(--wa-muted); }
.wg-lb-modal .wg-lb-loading,
.wg-lb-modal .wg-lb-empty { color: var(--wa-muted); }


/* ==========================================================================
   Guest sign-in CTA (shown in the shared result modal instead of a score card)
   ========================================================================== */
/* Kill the old mid-gameplay "sign in to save" notes — the upsell now happens
   at the end of a round via the CTA card, never over the live board. */
.wa-guest { display: none !important; }
.wg-guest-banner { display: none !important; }

.wa-cta { text-align: center; padding: 6px 4px 2px; }
.wa-cta-ico-wrap {
    width: 64px; height: 64px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--wa-gold);
    background: radial-gradient(circle at 50% 40%, rgba(255, 207, 92, 0.22), rgba(255, 207, 92, 0.05));
    border: 1px solid rgba(255, 207, 92, 0.4);
    box-shadow: 0 0 26px -6px rgba(255, 207, 92, 0.5);
}
.wa-cta-ico { width: 30px; height: 30px; display: block; }
.wa-cta-title { margin: 0 0 10px; font-size: 1.4rem; font-weight: 800; color: var(--wa-ink); }
.wa-cta-text { margin: 0 0 22px; font-size: 1rem; line-height: 1.5; color: var(--wa-muted); }
.wa-cta-actions { flex-direction: column; gap: 10px; }
.wa-cta-actions .wa-btn { width: 100%; text-decoration: none; }

/* ==========================================================================
   Lobby navigation D-pad
   On-screen arrows for laptops with no mouse (trackpad zoom is slow) and for
   touch. Press-and-hold glides; the buttons drive the same camera velocities
   as the arrow keys. Shown only in the lobby (.is-visible), bottom-inline-end.
   Frosted gold-glass to match the salon's on-screen keyboard.
   ========================================================================== */
.wa-navpad {
    position: fixed;
    z-index: 21;
    inset-inline-end: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 46px;
    gap: 6px;
    width: 150px;
    justify-items: center;
    align-items: center;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.wa-navpad.is-visible {
    opacity: 0.92;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.wa-navpad__mid {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.wa-navpad__btn {
    grid-column: 2;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.1rem;
    color: #ffe9c4;
    border-radius: 12px;
    border: 1px solid rgba(202, 162, 74, 0.5);
    background: linear-gradient(180deg, rgba(46, 33, 18, 0.62), rgba(24, 16, 9, 0.62));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 233, 196, 0.14);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}
.wa-navpad__mid .wa-navpad__btn { grid-column: auto; }
.wa-navpad__btn:hover {
    border-color: rgba(255, 214, 90, 0.85);
    background: linear-gradient(180deg, rgba(64, 46, 24, 0.72), rgba(34, 24, 13, 0.72));
}
.wa-navpad__btn:active {
    transform: translateY(1px) scale(0.96);
    background: rgba(202, 162, 74, 0.4);
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .wa-navpad { transition: opacity 0.2s ease; transform: none; }
    .wa-navpad.is-visible { transform: none; }
}
/* On touch devices the camera is moved with a TWO-FINGER drag (lobby: pan the
   view · shelf: swipe to change page), so the on-screen D-pad is redundant and
   just eats screen space — hide it. Desktop/trackpad keeps it. */
@media (pointer: coarse) {
    .wa-navpad { display: none !important; }
}

/* ---- Bookshelf pager (◀ page x / y ▶) ------------------------------------
   Shown only in the library when the player has more than one page of books
   (25 per page). Frosted gold-glass to match the salon. */
.wa-bookpager {
    position: fixed;
    z-index: 22;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(10px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(202, 162, 74, 0.5);
    background: linear-gradient(180deg, rgba(46, 33, 18, 0.66), rgba(24, 16, 9, 0.66));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 233, 196, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.wa-bookpager.is-visible {
    opacity: 0.96;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.wa-bookpager__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.15rem;
    color: #ffe9c4;
    border-radius: 50%;
    border: 1px solid rgba(202, 162, 74, 0.5);
    background: linear-gradient(180deg, rgba(64, 46, 24, 0.6), rgba(34, 24, 13, 0.6));
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}
.wa-bookpager__btn:hover:not(:disabled) {
    border-color: rgba(255, 214, 90, 0.85);
    background: linear-gradient(180deg, rgba(80, 58, 30, 0.72), rgba(44, 31, 16, 0.72));
}
.wa-bookpager__btn:active:not(:disabled) { transform: scale(0.94); color: #fff; }
.wa-bookpager__btn:disabled { opacity: 0.35; cursor: default; }
.wa-bookpager__label {
    min-width: 58px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--wa-ink, #f4efe2);
    font-variant-numeric: tabular-nums;
}
/* Page-arrows group + language chip sit side by side; each hides independently. */
.wa-bookpager__nav { display: inline-flex; align-items: center; gap: 12px; }
.wa-bookpager__nav[hidden] { display: none; }
.wa-bookpager__lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    color: #ffe9c4;
    border: 1px solid rgba(202, 162, 74, 0.5);
    background: linear-gradient(180deg, rgba(64, 46, 24, 0.6), rgba(34, 24, 13, 0.6));
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}
.wa-bookpager__lang[hidden] { display: none; }
.wa-bookpager__lang:hover { border-color: rgba(255, 214, 90, 0.85); background: linear-gradient(180deg, rgba(80, 58, 30, 0.72), rgba(44, 31, 16, 0.72)); }
.wa-bookpager__lang:active { transform: scale(0.96); color: #fff; }
.wa-bookpager__globe { font-size: 1.05rem; line-height: 1; }
.wa-bookpager__langlbl { font-size: 0.95rem; font-weight: 700; letter-spacing: .02em; }
/* A lone chip (single page, multiple languages) shouldn't carry a dangling gap. */
.wa-bookpager__nav[hidden] + .wa-bookpager__lang,
.wa-bookpager__lang:only-child { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .wa-bookpager { transition: opacity 0.2s ease; }
}


/* ==========================================================================
   "How to play" help modal — re-skinned for the salon (warm brown/gold glass).
   The shared modal (WordGames.help in core.js, styled by word-games.css with the
   2D slate tokens) looked like the flat dark-blue 2D card over the 3D arena.
   These overrides live here — the arena-only stylesheet, loaded AFTER
   word-games.css — so the 2D hub keeps its own look while the arena gets a
   candlelit, semi-transparent brown-glass panel that belongs to the salon.
   ========================================================================== */
.wg-help-modal {
    /* Warm, transparent brown veil instead of the cold slate wash. */
    background: rgba(18, 11, 5, 0.60);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
}
.wg-help-card {
    max-width: 440px;
    /* Frosted brown glass with a soft candlelight glow from the top. */
    background:
        radial-gradient(120% 140% at 50% -12%, rgba(122, 86, 40, 0.34), transparent 60%),
        linear-gradient(180deg, rgba(52, 37, 19, 0.94), rgba(31, 21, 10, 0.96));
    border: 1px solid rgba(202, 162, 74, 0.55);
    border-radius: 18px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 224, 150, 0.14);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #efe2c4;
}
.wg-help-title {
    color: var(--wa-gold, #ffcf5c);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 10px rgba(255, 196, 80, 0.25);
}
.wg-help-close {
    background: linear-gradient(180deg, rgba(64, 46, 24, 0.72), rgba(34, 24, 13, 0.72));
    border: 1px solid rgba(202, 162, 74, 0.5);
    color: #f3e4c0;
}
.wg-help-close:hover {
    background: linear-gradient(180deg, rgba(90, 64, 30, 0.88), rgba(52, 37, 18, 0.88));
    border-color: rgba(255, 214, 90, 0.85);
    color: #fff;
}
.wg-help-body { color: #d9c9a6; }
.wg-help-body b,
.wg-help-body strong { color: #f5e7c4; }
.wg-help-body h4 { color: var(--wa-gold, #ffcf5c); }
.wg-help-body a { color: var(--wa-gold, #ffcf5c); }
.wg-help-body kbd {
    background: rgba(64, 46, 24, 0.72);
    border: 1px solid rgba(202, 162, 74, 0.5);
    color: #f3e4c0;
}