/* variables.css */
/* ═══════════════════════════════════════════════════════
   WordDuel — Design Tokens v2 (3D / Glassmorphism)
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Colors: Light Mode ("Sky Playground") ──────── */
    --bg-primary: #DBEAFE;
    --bg-secondary: #EFF6FF;
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-input: rgba(255, 255, 255, 0.6);
    --bg-overlay: rgba(0, 0, 0, 0.4);

    /* Gradient background */
    --bg-gradient-from: #DBEAFE;
    --bg-gradient-to: #EFF6FF;
    --bg-pattern-opacity: 0.06;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;   /* 4.7:1 on white; #94A3B8 was 2.5:1 */
    --text-inverse: #FFFFFF;

    /* Core blue accent (consistent in both modes) */
    --accent-primary: #2563EB;   /* #3B82F6 was 3.4:1 as link text on the light background */
    --accent-primary-hover: #1D4ED8;
    --accent-primary-light: rgba(59, 130, 246, 0.12);
    --accent-secondary: #06B6D4;
    --accent-secondary-hover: #0891B2;

    /* Tile/keyboard base gradient */
    --tile-gradient-from: #3B82F6;
    --tile-gradient-to: #60A5FA;
    --tile-shadow-color: #1D4ED8;

    /* State colors (same in both modes) */
    --correct: #22C55E;
    --correct-to: #4ADE80;
    --correct-shadow: #15803D;
    --correct-light: rgba(34, 197, 94, 0.15);

    --present: #F59E0B;
    --present-to: #FBBF24;
    --present-shadow: #B45309;
    --present-light: rgba(245, 158, 11, 0.15);

    --absent: #475569;
    --absent-to: #64748B;
    --absent-shadow: #1E293B;
    --absent-light: rgba(75, 85, 99, 0.15);

    --danger: #EF4444;
    --danger-hover: #DC2626;
    --danger-to: #F87171;
    --danger-shadow: #991B1B;
    --warning: #F59E0B;
    --info: #3B82F6;

    /* Gem / gold */
    --gem-gold: #F59E0B;
    --gem-glow: rgba(245, 158, 11, 0.4);
    --gold: #F59E0B;
    --gold-to: #FBBF24;
    --gold-shadow: #B45309;

    /* Purple variant */
    --purple: #8B5CF6;
    --purple-to: #A78BFA;
    --purple-shadow: #5B21B6;

    --border-color: rgba(59, 130, 246, 0.15);
    --border-light: rgba(59, 130, 246, 0.08);

    /* Keyboard (vibrant blue in both modes) */
    --keyboard-bg: #3B82F6;
    --keyboard-text: #FFFFFF;
    --tile-border: rgba(255, 255, 255, 0.5);
    --tile-empty-bg: rgba(59, 130, 246, 0.08);
    --tile-empty-border: rgba(59, 130, 246, 0.2);

    /* ── Typography ────────────────────────────────── */
    --font-heading: 'Fredoka One', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
    --text-7xl: 5.5rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ── Spacing ───────────────────────────────────── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 7rem;
    --space-6xl: 10rem;

    /* ── Border Radius (rounder feel) ──────────────── */
    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.375rem;
    --radius-2xl: 1.75rem;
    --radius-full: 9999px;

    /* ── Shadows (blue-tinted) ─────────────────────── */
    --shadow-xs: 0 1px 2px rgba(30, 58, 138, 0.08);
    --shadow-sm: 0 2px 6px rgba(30, 58, 138, 0.1);
    --shadow-md: 0 4px 14px rgba(30, 58, 138, 0.12);
    --shadow-lg: 0 8px 30px rgba(30, 58, 138, 0.15);
    --shadow-xl: 0 16px 48px rgba(30, 58, 138, 0.2);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(59, 130, 246, 0.5);

    /* 3D depth shadows for tiles & keys */
    --tile-shadow: 0 5px 0 var(--tile-shadow-color), 0 6px 12px rgba(0, 0, 0, 0.15);
    --tile-shadow-correct: 0 5px 0 var(--correct-shadow), 0 6px 12px rgba(0, 0, 0, 0.15);
    --tile-shadow-present: 0 5px 0 var(--present-shadow), 0 6px 12px rgba(0, 0, 0, 0.15);
    --tile-shadow-absent: 0 5px 0 var(--absent-shadow), 0 6px 12px rgba(0, 0, 0, 0.15);
    --key-shadow: 0 4px 0 var(--tile-shadow-color), 0 5px 10px rgba(0, 0, 0, 0.12);

    /* Button variant shadows */
    --btn-shadow-green: 0 5px 0 #15803D, 0 6px 12px rgba(0, 0, 0, 0.15);
    --btn-shadow-blue: 0 5px 0 #1D4ED8, 0 6px 12px rgba(0, 0, 0, 0.15);
    --btn-shadow-purple: 0 5px 0 var(--purple-shadow), 0 6px 12px rgba(0, 0, 0, 0.15);
    --btn-shadow-gold: 0 5px 0 var(--gold-shadow), 0 6px 12px rgba(0, 0, 0, 0.15);
    --btn-shadow-danger: 0 5px 0 var(--danger-shadow), 0 6px 12px rgba(0, 0, 0, 0.15);

    /* ── Glass Effect (light = white glass) ────────── */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-blur: blur(24px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.5);
    --glass-bg-strong: rgba(255, 255, 255, 0.85);
    --glass-bg-subtle: rgba(255, 255, 255, 0.4);
    /* names some pages use (cards, inputs, sheets) that were never defined, so those parts had no background or border (2026-10-27) */
    --surface: #FFFFFF; --surface-elevated: #FFFFFF; --surface-card: rgba(255, 255, 255, 0.85); --surface-glass: rgba(255, 255, 255, 0.75);
    --surface-2: #F8FAFC; --surface-3: #E2E8F0; --bg-card-solid: #FFFFFF; --bg-elevated: #FFFFFF;
    --border: rgba(59, 130, 246, 0.18); --border-subtle: rgba(59, 130, 246, 0.10); --border-default: rgba(59, 130, 246, 0.22);

    /* ── Transitions ───────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index Scale ─────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 10070;   /* above every window (Share 10000, a show 10030, the look sheet 10040, the badge message 10060): the box takes no tap, components.css */
    --z-tooltip: 600;

    /* ── Layout ─────────────────────────────────────── */
    --max-width: 1200px;
    --max-width-sm: 640px;
    --max-width-game: 500px;
    --header-height: 64px;

    /* ── Game-specific ─────────────────────────────── */
    --tile-size: 62px;
    --tile-gap: 6px;
    --key-height: 58px;
    --key-width: 44px;
    --key-gap: 6px;
    --tile-border-width: 2px;
    --tile-3d-depth: 5px;
    --key-3d-depth: 4px;
}

/* ── Dark Mode ("Night Arena") ─────────────────────── */
[data-theme="dark"] {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-card: rgba(30, 58, 138, 0.25);
    --bg-input: rgba(30, 58, 138, 0.3);
    --bg-overlay: rgba(0, 0, 0, 0.6);

    --bg-gradient-from: #0F172A;
    --bg-gradient-to: #1E293B;
    --bg-pattern-opacity: 0.04;

    --text-primary: #F1F5F9;
    color-scheme: dark;   /* the browser's own scrollbar and controls follow the theme */
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-inverse: #0F172A;

    --accent-primary: #3B82F6;
    --accent-primary-hover: #60A5FA;
    --accent-primary-light: rgba(59, 130, 246, 0.15);
    --accent-secondary: #22D3EE;
    --accent-secondary-hover: #06B6D4;

    --danger: #F87171;
    --danger-hover: #FCA5A5;
    --warning: #FBBF24;
    --info: #60A5FA;

    --gem-gold: #FBBF24;
    --gem-glow: rgba(251, 191, 36, 0.4);

    --border-color: rgba(59, 130, 246, 0.2);
    --border-light: rgba(59, 130, 246, 0.1);

    --keyboard-bg: #3B82F6;
    --keyboard-text: #FFFFFF;
    --tile-border: rgba(255, 255, 255, 0.4);
    --tile-empty-bg: rgba(59, 130, 246, 0.12);
    --tile-empty-border: rgba(59, 130, 246, 0.25);

    /* Shadows (darker) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.35);
    --shadow-glow-strong: 0 0 40px rgba(59, 130, 246, 0.55);

    /* Glass (blue-tinted dark glass) */
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: 1px solid rgba(59, 130, 246, 0.15);
    --glass-bg-strong: rgba(15, 23, 42, 0.85);
    --glass-bg-subtle: rgba(15, 23, 42, 0.4);
    --surface: #1E293B; --surface-elevated: #1E293B; --surface-card: rgba(30, 41, 59, 0.85); --surface-glass: rgba(30, 58, 138, 0.18);
    --surface-2: #1E293B; --surface-3: #334155; --bg-card-solid: #1B2740; --bg-elevated: #1E293B;
    --border: rgba(148, 163, 184, 0.2); --border-subtle: rgba(148, 163, 184, 0.12); --border-default: rgba(148, 163, 184, 0.25);
}
/* base.css */
/* ═══════════════════════════════════════════════════════
   WordDuel — Base Styles v2 (3D / Glassmorphism)
   ═══════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: linear-gradient(165deg, var(--bg-gradient-from) 0%, var(--bg-gradient-to) 100%);
    background-attachment: fixed;
    transition: background var(--transition-slow), color var(--transition-slow);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Letter-scatter background pattern */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ctext x='50' y='80' font-size='24' fill='%233B82F6' opacity='0.15' font-family='sans-serif'%3EW%3C/text%3E%3Ctext x='150' y='140' font-size='18' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3EO%3C/text%3E%3Ctext x='280' y='60' font-size='22' fill='%233B82F6' opacity='0.12' font-family='sans-serif'%3ER%3C/text%3E%3Ctext x='400' y='120' font-size='16' fill='%233B82F6' opacity='0.08' font-family='sans-serif'%3ED%3C/text%3E%3Ctext x='500' y='80' font-size='20' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3ES%3C/text%3E%3Ctext x='100' y='250' font-size='20' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3EA%3C/text%3E%3Ctext x='250' y='200' font-size='16' fill='%233B82F6' opacity='0.08' font-family='sans-serif'%3EL%3C/text%3E%3Ctext x='380' y='280' font-size='22' fill='%233B82F6' opacity='0.12' font-family='sans-serif'%3EG%3C/text%3E%3Ctext x='520' y='220' font-size='18' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3EM%3C/text%3E%3Ctext x='70' y='400' font-size='18' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3EP%3C/text%3E%3Ctext x='200' y='350' font-size='20' fill='%233B82F6' opacity='0.08' font-family='sans-serif'%3EE%3C/text%3E%3Ctext x='340' y='420' font-size='24' fill='%233B82F6' opacity='0.12' font-family='sans-serif'%3EN%3C/text%3E%3Ctext x='460' y='380' font-size='16' fill='%233B82F6' opacity='0.08' font-family='sans-serif'%3ET%3C/text%3E%3Ctext x='120' y='520' font-size='22' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3EC%3C/text%3E%3Ctext x='300' y='540' font-size='18' fill='%233B82F6' opacity='0.12' font-family='sans-serif'%3EH%3C/text%3E%3Ctext x='450' y='500' font-size='20' fill='%233B82F6' opacity='0.1' font-family='sans-serif'%3EI%3C/text%3E%3C/svg%3E");
    opacity: var(--bg-pattern-opacity);
    pointer-events: none;
    z-index: 0;
}

/* All content above background */
body>* {
    position: relative;
    z-index: 1;
}

/* ── Typography ────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: var(--text-4xl);
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-base);
}

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

a:hover {
    color: var(--accent-primary-hover);
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

strong {
    font-weight: var(--weight-semibold);
}

small {
    font-size: var(--text-sm);
}

/* ── Lists ─────────────────────────────────────────── */
ul,
ol {
    list-style: none;
}

/* ── Images ────────────────────────────────────────── */
img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── Inputs ────────────────────────────────────────── */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-primary-light);
}

/* ── Utilities ─────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container--sm {
    max-width: var(--max-width-sm);
}

.container--game {
    max-width: var(--max-width-game);
}

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

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-gradient {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-between {
    justify-content: space-between;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

/* ── Glass panel utility ───────────────────────────── */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-xl);
}

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary-light);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ── Selection ─────────────────────────────────────── */
::selection {
    background: var(--accent-primary);
    color: #FFFFFF;
}

/* ── Keyframe Animations ───────────────────────────── */
@keyframes pulse-border {

    0%,
    100% {
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    50% {
        border-color: var(--accent-primary-hover);
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

@keyframes flame-flicker {

    0%,
    100% {
        transform: scale(1) rotate(-2deg);
    }

    25% {
        transform: scale(1.1) rotate(2deg);
    }

    50% {
        transform: scale(0.95) rotate(-1deg);
    }

    75% {
        transform: scale(1.05) rotate(1deg);
    }
}

@keyframes shine-sweep {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

@keyframes float-up {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.2;
    }

    100% {
        transform: translateY(-10vh) scale(1);
        opacity: 0;
    }
}

@keyframes tile-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* iPhone Safari zooms the whole page when a text box under 16 px gets focus, and stays zoomed (owner's iPhone, support chat, 2026-11-04). iOS only: other devices keep their sizes. */
@supports (-webkit-touch-callout:none){.sc-input__field,.rm-in:not(#t-code),.rl-chatform input,.blog-search__input,.name-edit-form__input,.referral-card__input,.chat__input,#askname-in{font-size:16px!important}}

/* components.css */
/* ═══════════════════════════════════════════════════════
   WordDuel — UI Components v2 (3D / Glassmorphism)
   ═══════════════════════════════════════════════════════ */

/* ── Buttons (3D Embossed) ─────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: 1;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Shine sweep on hover */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-15deg);
    pointer-events: none;
    transition: none;
}

.btn:hover::after {
    animation: shine-sweep 0.6s ease forwards;
}

/* 3D press effect */
.btn:active {
    transform: translateY(4px) !important;
}

/* ── Button Variants ──────────────────────────────── */
.btn--primary {
    background: linear-gradient(180deg, var(--correct-to) 0%, var(--correct) 100%);
    box-shadow: var(--btn-shadow-green);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #15803D, 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn--primary:active {
    box-shadow: 0 1px 0 #15803D, 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn--secondary {
    background: linear-gradient(180deg, var(--tile-gradient-to) 0%, var(--tile-gradient-from) 100%);
    box-shadow: var(--btn-shadow-blue);
}

.btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #1D4ED8, 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn--secondary:active {
    box-shadow: 0 1px 0 #1D4ED8, 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn--success {
    background: linear-gradient(180deg, var(--correct-to) 0%, var(--correct) 100%);
    box-shadow: var(--btn-shadow-green);
}

.btn--success:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #15803D, 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn--danger {
    background: linear-gradient(180deg, var(--danger-to) 0%, var(--danger) 100%);
    box-shadow: var(--btn-shadow-danger);
}

.btn--danger:hover {
    transform: translateY(-2px);
}

.btn--purple {
    background: linear-gradient(180deg, var(--purple-to) 0%, var(--purple) 100%);
    box-shadow: var(--btn-shadow-purple);
}

.btn--purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--purple-shadow), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn--gold {
    background: linear-gradient(180deg, var(--gold-to) 0%, var(--gold) 100%);
    box-shadow: var(--btn-shadow-gold);
    color: #1a1a2e;
    text-shadow: none;
}

.btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--gold-shadow), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
    box-shadow: none;
    text-shadow: none;
}

.btn--ghost:hover {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Share button — green gradient */
.btn--share {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 0 #047857, 0 6px 12px rgba(16, 185, 129, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn--share:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #047857, 0 8px 16px rgba(16, 185, 129, 0.4);
}

/* Gem badge inside buttons */
.gem-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-left: var(--space-xs);
}

/* Button Sizes */
.btn--sm {
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

.btn--lg {
    padding: 1rem 2rem;
    font-size: var(--text-lg);
    border-radius: var(--radius-xl);
}

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

.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Cards (Glass) ────────────────────────────────── */
.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card--interactive {
    cursor: pointer;
}

.card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--accent-primary);
}

.card--glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
}

.card--glow {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.card__body {
    margin-bottom: var(--space-md);
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

/* ── Badges (3D pills) ────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.3rem 0.85rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
}

.badge--primary {
    background: linear-gradient(180deg, var(--tile-gradient-to) 0%, var(--tile-gradient-from) 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge--success {
    background: linear-gradient(180deg, var(--correct-to) 0%, var(--correct) 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge--warning {
    background: linear-gradient(180deg, var(--present-to) 0%, var(--present) 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge--danger {
    background: linear-gradient(180deg, var(--danger-to) 0%, var(--danger) 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge--gold {
    background: linear-gradient(180deg, var(--gold-to) 0%, var(--gold) 100%);
    color: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── Input Fields (Glass) ─────────────────────────── */
.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.input-group__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}

.input-group__input {
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.input-group__input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light), var(--shadow-glow);
}

.input-group__error {
    font-size: var(--text-xs);
    color: var(--danger);
}

/* ── Modal (Glass) ────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-modal-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    animation: fadeIn var(--transition-base);
}

.modal-backdrop.is-open {
    display: flex;
}

.modal {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    z-index: var(--z-modal);
    animation: slideUp var(--transition-spring);
}

.modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.modal__close:hover {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
}

/* ── Toast / Notification ──────────────────────────── */
.toast-container {
    pointer-events: none;   /* a short message over the game buttons never swallows a tap */
    position: fixed;
    top: calc(var(--header-height) + var(--slambar-h, 0px) + var(--space-md));   /* below the announcement bar, not on it */
    right: var(--space-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.25rem;
    background: var(--bg-card-solid, var(--bg-secondary));   /* solid: page text showed through the message */
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    animation: slideInRight var(--transition-spring);
    min-width: 280px;
}

.toast--success {
    border-left: 3px solid var(--correct);
}

.toast--error {
    border-left: 3px solid var(--danger);
}

.toast--info {
    border-left: 3px solid var(--info);
}

/* ── Header ────────────────────────────────────────── */
.header {
    position: sticky;
    top: 0;
    height: var(--header-height);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: var(--glass-border);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
}

.header__inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Branded W tile in logo */
.header__logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    box-shadow: 0 3px 0 #1a5276, 0 4px 8px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    font-size: var(--text-base);
    font-weight: var(--weight-extrabold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.header__logo span:nth-child(2) {
    color: var(--text-primary);
}

.header__logo span:nth-child(3) {
    color: #2980b9;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Gem counter pill */
.header__gem-count {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--gem-gold);
    box-shadow: 0 0 12px var(--gem-glow);
}

.header__gem-count { position: relative; }
.header__gem-count::after { content: ''; position: absolute; inset: -8px -2px; }   /* same look, a thumb-sized touch area */
.header__gem-icon {
    width: 18px;
    height: 18px;
}

/* ── Footer ────────────────────────────────────────── */
.footer {
    margin-top: var(--space-4xl);
    padding: var(--space-2xl) 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: var(--glass-border);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

/* ── Tabs (Glass) ─────────────────────────────────── */
.tabs {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.tab {
    flex: 1;
    padding: 0.6rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.tab.is-active {
    background: linear-gradient(180deg, var(--tile-gradient-to) 0%, var(--tile-gradient-from) 100%);
    color: #FFFFFF;
    box-shadow: 0 3px 0 var(--tile-shadow-color), 0 4px 8px rgba(0, 0, 0, 0.12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tab:hover:not(.is-active) {
    color: var(--text-primary);
    background: var(--accent-primary-light);
}

/* ── Timer Bar (Blue gradient) ─────────────────────── */
.timer-bar {
    width: 100%;
    height: 16px;
    background: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-md);
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
}

.timer-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--tile-gradient-from) 0%, var(--correct) 100%);
    transition: width 0.3s linear, background 0.5s ease;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.timer-bar__text {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 1;
}

.timer-bar--urgent {
    animation: timerPulse 0.8s ease-in-out infinite;
}

.timer-bar--urgent .timer-bar__text {
    color: var(--danger);
    font-weight: 800;
}

@keyframes timerPulse {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.3);
    }
}

/* ── Avatar (Glow ring) ──────────────────────────── */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: #FFFFFF;
    font-size: var(--text-sm);
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--accent-primary-light), var(--shadow-sm);
}

.avatar--lg {
    width: 64px;
    height: 64px;
    font-size: var(--text-xl);
    box-shadow: 0 0 0 4px var(--accent-primary-light), 0 0 20px rgba(59, 130, 246, 0.2);
}

/* ── Stat Box ──────────────────────────────────────── */
.stat {
    text-align: center;
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
}

.stat__value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--accent-primary);
    line-height: 1;
}

.stat__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}

/* ── XP Progress Bar ──────────────────────────────── */
.xp-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.xp-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--correct) 100%);
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

/* ── Skeleton Loading ──────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-light) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ── Divider ───────────────────────────────────────── */
.divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* ═══════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Social Connect Grid ───────────────────────── */
.social-connect-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.social-connect-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.social-connect-card:hover {
    border-color: var(--accent-primary);
    transform: translateX(4px);
}

.social-connect-card--claimed {
    opacity: 0.6;
}

.social-connect-card__icon {
    font-size: 1.5rem;
    width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
}

.social-connect-card__info {
    flex: 1;
    min-width: 0;
}

.social-connect-card__name {
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    color: var(--text-primary);
}

.social-connect-card__reward {
    font-size: var(--text-sm);
    color: #10b981;
    font-weight: 600;
}

.social-connect-card__status {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.social-connect-card__check {
    font-size: 1.2rem;
}

/* ── Referral Card ─────────────────────────────── */
.referral-card {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.referral-card__link-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.referral-card__input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-mono, monospace);
    min-width: 0;
}

.referral-card__stats {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
}

.referral-card__stat {
    text-align: center;
}

.referral-card__stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.referral-card__stat-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

/* ── Share Options (two-button pattern) ─────────── */
.share-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
    margin-top: var(--space-sm);
}

/* ── Player Profile Popup (In-Battle) ───────────────────── */
.player-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.player-popup-backdrop.is-open {
    opacity: 1;
    pointer-events: all;
}

.player-popup {
    /* Force dark regardless of user theme */
    color-scheme: dark;
    background: rgba(14, 20, 35, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08);
    width: 300px;
    max-width: 92vw;
    padding: 28px 24px 22px;
    text-align: center;
    position: relative;
    transform: scale(0.88) translateY(16px);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    color: #f1f5f9;
}

.player-popup-backdrop.is-open .player-popup {
    transform: scale(1) translateY(0);
}

.player-popup__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(148,163,184,0.8);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.player-popup__close:hover { color: #f1f5f9; background: rgba(255,255,255,0.08); }

.player-popup__avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.player-popup__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.18);
    object-fit: cover;
    background: rgba(30,41,59,0.8);
    font-size: 2.2rem;
    line-height: 68px;
    display: block;
}

.player-popup__avatar--emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

.player-popup__online-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: #22c55e;
}
.player-popup__online-dot.is-offline { background: var(--text-tertiary); }

.player-popup__name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.player-popup__league {
    font-size: 0.8rem;
    color: rgba(148,163,184,0.9);
    margin-bottom: 14px;
}

.player-popup__stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    width: 100%;
}

.player-popup__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: rgba(30,41,59,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    min-width: 70px;
    flex: 1;
}

.player-popup__stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.1;
}

.player-popup__stat-label {
    font-size: 0.68rem;
    color: rgba(148,163,184,0.8);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 2px;
}

.player-popup__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.player-popup__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    font-size: 2rem;
}

.player-popup__actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.player-popup__actions .btn--ghost.pp-action-btn { color: #E2E8F0; }   /* the popup is dark in both themes */
.player-popup__actions .pp-action-btn {
    flex: 1;
    font-size: 0.78rem;
    padding: 8px 10px;
    white-space: nowrap;
}

/* Clickable opponent avatar trigger */
.battle-opponent-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s;
}
.battle-opponent-btn:hover { transform: scale(1.06); }
.battle-opponent-btn:hover .player-avatar { border-color: var(--accent-primary); }

/* ── Friends Tab (Profile Page) ─────────────────────── */
.ft-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ft-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--border-light, rgba(255,255,255,0.07));
    border-radius: var(--radius-lg);
    transition: background 0.15s, box-shadow 0.15s;
    gap: var(--space-sm);
}
.ft-card:hover {
    background: var(--glass-bg-strong, rgba(20,30,48,0.6));
    box-shadow: var(--shadow-sm);
}

.ft-card__left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    flex: 1;
}

.ft-card__left > div { min-width: 0; }   /* a long name ends in dots instead of pushing the page wider */

.ft-avatar-wrap { position: relative; flex-shrink: 0; }

.ft-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card);
    border: 2px solid var(--border-light, rgba(255,255,255,0.1));
}
.ft-avatar--emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.ft-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card, #0f0f1a);
}
.ft-dot--online  { background: #22c55e; }
.ft-dot--offline { background: var(--text-tertiary); }

.ft-card__name {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-league { font-size: var(--text-sm); }

.ft-card__sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 1px;
}

.ft-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.ft-loading, .ft-empty, .ft-error {
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

@media (max-width: 480px) {
    .ft-card {
        flex-direction: column;
        align-items: stretch;
    }
    .ft-card__actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--space-xs);
    }
}

/* ── Inline Unfriend Confirmation ──────────────────────────── */
.ft-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 100%;
    animation: ft-confirm-in 0.15s ease;
}

@keyframes ft-confirm-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Danger button variant */
.btn--danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
}
.btn--danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
}
/* the popup's close button sat on the player's banner and was hard to see: a solid round button above everything */
.player-popup__close{z-index:6;top:10px;right:10px;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;
  background:rgba(15,23,42,.82);border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:1.35rem;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.player-popup__close:hover{background:#0F172A;color:#fff;border-color:#fff}
.player-popup__close:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}

/* 2026-10-27 visual QA fixes (site-wide) */
/* names drawn over dark banner art keep their light colour in the light theme (pack cards, look cards) */
[data-theme="light"] .mp__hero .nm .tx, [data-theme="light"] .lookcard .nm .tx { color: var(--c); }
/* the light-theme frame behind an equipped keyboard theme must not stick out sideways (it made phones scroll 6 px) */
[data-theme=light] .wb[data-t].keyboard::before { inset: -6px 0; }
/* the timer's time label sits on a small pill, so it stays readable when the bar shrinks past it */
.timer-bar__text { background: rgba(15, 23, 42, 0.72); color: #F1F5F9; padding: 1px 6px; border-radius: 999px; }
[data-theme="light"] .timer-bar__text { background: rgba(255, 255, 255, 0.92); color: #0F172A; }
.timer-bar--urgent .timer-bar__text { color: #FCA5A5; }
[data-theme="light"] .timer-bar--urgent .timer-bar__text { color: #B91C1C; }
/* phones: messages appear centred under the bar instead of over the page title */
@media (max-width: 600px) { .toast-container { left: var(--space-md); right: var(--space-md); align-items: center; } }
/* light theme: gold/amber text on white reads poorly, so it takes a deeper amber */
[data-theme="light"] .powerup-btn__cost, [data-theme="light"] .mp__list .mp__gems { color: #B45309; }
[data-theme="light"] .stat-card--orange .stat-card__value { color: #C2410C; }
/* light theme: bright green text on white was 2.2:1 (Looks sets, prices) */
[data-theme="light"] .sx-set-p em, [data-theme="light"] .sx-price em, [data-theme="light"] .sx-own, [data-theme="light"] .sx-card.owned .sx-price, [data-theme="light"] .sx-ok { color: #15803D; }

/* responsive.css */
/* ═══════════════════════════════════════════════════════
   WordDuel — Responsive Breakpoints v2 (3D preserved)
   ═══════════════════════════════════════════════════════ */

/* ── Extra-small phones / foldables (≤ 320px) ─────── */
@media (max-width: 320px) {
    :root {
        --tile-size: 40px;
        --tile-gap: 3px;
        --key-height: 42px;
        --key-width: 24px;
        --key-gap: 3px;
        --tile-3d-depth: 3px;
        --key-3d-depth: 2px;
    }

    h1 {
        font-size: var(--text-xl);
    }

    h2 {
        font-size: var(--text-lg);
    }

    .container {
        padding: 0 var(--space-sm);
    }

    .hero__title {
        font-size: var(--text-2xl);
    }

    .tile {
        font-size: var(--text-lg);
    }

    .key {
        font-size: 0.65rem;
    }

    .battle__players {
        gap: var(--space-xs);
    }

    .mini-tile {
        width: 16px;
        height: 16px;
        border-radius: 2px;
    }

    /* Powerups: stack vertically on tiny screens */
    .powerups {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .powerups .btn {
        font-size: var(--text-xs);
        padding: 6px 12px;
    }
}

/* ── Small phones (321px – 375px) ────────────────── */
@media (min-width: 321px) and (max-width: 375px) {
    :root {
        --tile-size: 46px;
        --tile-gap: 4px;
        --key-height: 46px;
        --key-width: 28px;
        --key-gap: 4px;
        --tile-3d-depth: 4px;
        --key-3d-depth: 3px;
    }

    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    .container {
        padding: 0 var(--space-md);
    }

    .hero__title {
        font-size: var(--text-3xl);
    }

    .battle__players {
        gap: var(--space-sm);
    }

    .mini-tile {
        width: 18px;
        height: 18px;
        border-radius: 3px;
    }

    .tile {
        font-size: var(--text-xl);
    }

    .key {
        font-size: var(--text-xs);
    }
}

/* ── Phones (≤ 640px) ──────────────────────────────── */
@media (max-width: 640px) {
    :root {
        --tile-size: 52px;
        --tile-gap: 5px;
        --key-height: 50px;
        --key-width: 32px;
        --key-gap: 4px;
        --header-height: 56px;
        --tile-3d-depth: 4px;
        --key-3d-depth: 3px;
    }

    h1 {
        font-size: var(--text-3xl);
    }

    .container {
        padding: 0 var(--space-md);
    }

    .header__nav {
        gap: var(--space-xs);
    }

    .mode-grid {
        grid-template-columns: 1fr;
    }

    .battle__players {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .battle__result-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .footer__links {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .leaderboard-table {
        font-size: var(--text-sm);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .tile {
        font-size: var(--text-xl);
    }
}

/* ── Tablets (641px – 1024px) ──────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
    :root {
        --tile-size: 58px;
        --tile-gap: 5px;
        --key-height: 54px;
        --key-width: 40px;
        --tile-3d-depth: 4px;
        --key-3d-depth: 4px;
    }

    .mode-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Desktop (≥ 1025px) ────────────────────────────── */
@media (min-width: 1025px) {
    :root {
        --tile-size: 62px;
        --tile-3d-depth: 5px;
        --key-3d-depth: 4px;
    }

    .mode-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Landscape phones ──────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --tile-size: 38px;
        --key-height: 38px;
        --key-width: 28px;
        --tile-3d-depth: 3px;
        --key-3d-depth: 2px;
    }

    .game {
        gap: var(--space-sm);
        padding: var(--space-sm) 0;
    }

    .game__status {
        min-height: 20px;
        font-size: var(--text-sm);
    }

    .tile {
        font-size: var(--text-base);
    }

    .key {
        font-size: 0.7rem;
    }
}

/* ── Hover-capable devices only ────────────────────── */
@media (hover: hover) {
    .card--interactive:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg), var(--shadow-glow);
    }

    .key:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Print ─────────────────────────────────────────── */
@media print {

    .header,
    .footer,
    .keyboard,
    .chat,
    .powerups,
    .btn,
    .toast-container {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}
/* ── Keyboard always fits the screen ───────────────────
   On narrow phones the keys may shrink below their preferred width instead of pushing the page sideways. */
@media (max-width: 420px) {
    .key { min-width: 0; padding: 0 2px; }
    .key--wide, .key--action { min-width: 0; max-width: none; flex: 1.6 1 0; }
}

/* header-footer.css */
/* ═══════════════════════════════════════════════════════
   WordlyPlay — Global Header & Footer v2 (Glassmorphism)
   ═══════════════════════════════════════════════════════ */

/* ── Floating Header (transparent → solid on scroll) ── */
.header {
    transition: background var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.header--scrolled {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: var(--shadow-md);
}

/* Sign up button: gradient */
.header__actions .btn--primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--purple, #8B5CF6) 100%);
    border: none;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.header__actions .btn--primary:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

/* Nav link animated underline */
.gnav__link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--purple, #8B5CF6));
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.gnav__link:hover::before {
    width: 60%;
}

/* Slide-up animation */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Desktop Navigation ─────────────────────────────── */
.gnav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.gnav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: color 0.2s, background 0.2s, text-shadow 0.2s;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    line-height: 1;
}

.gnav__link:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.gnav__link.is-active {
    color: var(--accent-primary);
    font-weight: var(--weight-bold);
}

.gnav__link.is-active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--tile-gradient-from), var(--tile-gradient-to));
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.gnav__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* ── Dropdown (Glass) ───────────────────────────────── */
.gnav__dropdown {
    position: relative;
}

.gnav__dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: calc(var(--z-sticky) + 10);
}

.gnav__dropdown:hover .gnav__dropdown-menu,
.gnav__dropdown:focus-within .gnav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.gnav__dropdown:hover .gnav__chevron {
    transform: rotate(180deg);
}

.gnav__dropdown-item {
    display: block;
    padding: 10px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}

.gnav__dropdown-item:hover {
    color: var(--text-primary);
    background: var(--accent-primary-light);
}

.gnav__dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 6px;
}

/* ── Header Actions (right side) ────────────────────── */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header__profile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.header__profile-link:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.header__logout-btn {
    font-size: var(--text-xs) !important;
    padding: 0.4rem 0.8rem !important;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.header__logout-btn:hover {
    opacity: 1;
}

/* ── Hamburger Button ───────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.hamburger:hover {
    background: var(--accent-primary-light);
}

.hamburger__line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Overlay ─────────────────────────────────── */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: calc(var(--z-sticky) + 50);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Slide-out Nav (Glass) ───────────────────── */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height for mobile browsers */
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: var(--glass-border);
    z-index: calc(var(--z-sticky) + 100);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevent whole nav from scrolling; links section scrolls */
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.mobile-nav__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
}

.mobile-nav__close:hover {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
}

.mobile-nav__links {
    flex: 1;
    min-height: 0; /* critical: allows flex child to shrink and scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-nav__link {
    display: block;
    padding: 12px 16px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.mobile-nav__link:hover {
    color: var(--text-primary);
    background: var(--accent-primary-light);
}

.mobile-nav__link.is-active {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--tile-gradient-from), var(--tile-gradient-to));
    box-shadow: var(--shadow-sm);
}

.mobile-nav__divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-xs) 0;
}

.mobile-nav__section-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    padding: 8px 16px 4px;
}

.mobile-nav__footer {
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.mobile-nav__gems {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
    font-weight: var(--weight-bold);
    color: var(--gem-gold);
    text-shadow: 0 0 8px var(--gem-glow);
}

/* ═══════════════════════════════════════════════════════
   Global Footer (Glass)
   ═══════════════════════════════════════════════════════ */

.gfooter {
    margin-top: var(--space-4xl);
    padding: var(--space-3xl) 0 var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--accent-primary), var(--purple, #8B5CF6), var(--accent-secondary)) 1;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.gfooter__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.gfooter__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.gfooter__social-link:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: translateY(-2px);
}

.gfooter__heading {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gfooter__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.gfooter__list a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s, text-shadow 0.15s;
    font-weight: var(--weight-medium);
}

.gfooter__list a:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.gfooter__seo {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-lg);
}

.gfooter__seo p {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    line-height: 1.7;
    max-width: 720px;
    margin: 0;
}

.gfooter__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.gfooter__bottom span {
    display: inline-flex;
    align-items: center;
}

.gfooter__developer { gap: .3em; }
@media (pointer: coarse), (max-width: 768px) { .gfooter a { display: inline-block; padding: 6px 0; margin: -6px 0; } }   /* a bigger touch area, the same look */   /* inline-flex dropped the space before the link */

.gfooter__bottom span:not(:last-child)::after {
    content: '·';
    margin-left: var(--space-sm);
    color: var(--text-tertiary);
    opacity: 0.5;
}

.gfooter__developer a,
.gfooter__contact a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    transition: color 0.15s, text-shadow 0.15s;
}

.gfooter__developer a:hover,
.gfooter__contact a:hover {
    color: var(--purple, #8B5CF6);
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

/* ── Notification Bell ──────────────────────────────── */
.notif-bell {
    position: relative;
}

@keyframes bellPulse {
    0%,100% { transform: rotate(0); }
    25% { transform: rotate(-18deg); }
    75% { transform: rotate(18deg); }
}
.notif-bell.is-pulsing svg { animation: bellPulse 0.5s ease; }

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    font-family: var(--font-body);
}

.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-height: 420px;
    background: var(--bg-card-solid);   /* solid: a blur inside the header's own blur never applies, so the page showed through */
    border: 1px solid var(--border-light, rgba(255,255,255,0.1));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.4));
    z-index: calc(var(--z-sticky) + 200);
    overflow: hidden;
    flex-direction: column;
}

.notif-dropdown.is-open { display: flex; }

.notif-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.07));
    flex-shrink: 0;
}

.notif-dropdown__title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.notif-dropdown__mark-all {
    background: none;
    border: none;
    font-size: var(--text-xs);
    color: var(--accent-primary);
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
}
.notif-dropdown__mark-all:hover { text-decoration: underline; }

.notif-list {
    overflow-y: auto;
    flex: 1;
    max-height: 320px;
}

.notif-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.04));
}
.notif-item:hover { background: var(--glass-bg); }
.notif-item.is-unread { background: rgba(59,130,246,0.06); }

.notif-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-card);
}
.notif-avatar--emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.notif-body { flex: 1; min-width: 0; }

.notif-msg {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.notif-msg strong { color: var(--text-primary); }

.notif-time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.notif-actions {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.btn--xs {
    padding: 0.25rem 0.6rem !important;
    font-size: var(--text-xs) !important;
    border-radius: var(--radius-md) !important;
}

.notif-dropdown__footer {
    display: block;
    padding: 10px 16px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--accent-primary);
    text-decoration: none;
    border-top: 1px solid var(--border-light, rgba(255,255,255,0.07));
    flex-shrink: 0;
    transition: background 0.15s;
}
.notif-dropdown__footer:hover { background: var(--glass-bg); }

@media (max-width: 480px) {
    .notif-dropdown { width: calc(100vw - 24px); right: -48px; max-width: 320px; }
}
/* small phones: the bell is about 47 px from the edge, so this keeps the panel 12 px or more inside the screen */
@media (max-width: 400px) {
    .notif-dropdown { right: -35px; }
}

/* ═══════════════════════════════════════════════════════
   Theme Toggle (borderless)
   ═══════════════════════════════════════════════════════ */

.header__theme-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    cursor: pointer;
    padding: 0;
}

.header__theme-toggle:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

/* ═══════════════════════════════════════════════════════
   Mobile Menu — User Section
   ═══════════════════════════════════════════════════════ */

.mobile-nav__user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    background: var(--accent-primary-light);
}

.mobile-nav__user-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.mobile-nav__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary), var(--purple, #8B5CF6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.mobile-nav__user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mobile-nav__username {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav__user-gems {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--gem-gold);
    font-weight: var(--weight-semibold);
}

.mobile-nav__notif-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.mobile-nav__notif-link:hover {
    color: var(--accent-primary);
    background: var(--glass-bg);
}

.mobile-nav__notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   Mobile Menu — Theme Toggle Switch
   ═══════════════════════════════════════════════════════ */

.mobile-nav__theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
}

.mobile-nav__theme-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}

.mobile-nav__theme-switch {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.mobile-nav__theme-switch-track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--border-color, #ccc);
    position: relative;
    transition: background 0.3s ease;
}

.mobile-nav__theme-switch.is-active .mobile-nav__theme-switch-track {
    background: var(--accent-primary);
}

.mobile-nav__theme-switch-thumb {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mobile-nav__theme-switch.is-active .mobile-nav__theme-switch-thumb {
    transform: translateX(20px);
}

/* ═══════════════════════════════════════════════════════
   Mobile Login Button (non-logged-in users)
   ═══════════════════════════════════════════════════════ */

.header__mobile-login {
    display: none; /* Hidden on desktop by default */
}

/* ═══════════════════════════════════════════════════════
   Responsive: Mobile
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .gnav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Hide desktop-only header elements on mobile */
    .header__desktop-only {
        display: none !important;
    }

    /* Show mobile login button for non-logged-in users */
    .header__mobile-login {
        display: inline-flex !important;
    }

    /* Shrink header action icons for mobile */
    .header__actions {
        gap: var(--space-xs);
    }

    .header__gem-count {
        padding: 4px 10px;
        font-size: var(--text-xs);
    }

    .header__gem-icon {
        width: 14px;
        height: 14px;
    }

    .header__profile-link svg,
    .notif-bell svg {
        width: 18px;
        height: 18px;
    }

    .header__profile-link {
        padding: 4px;
    }

    .notif-bell {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .gfooter__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

/* ── Extra-small phones (≤ 375px) — compact mobile menu ── */
@media (max-width: 375px) {
    .mobile-nav__link {
        padding: 10px 14px;
        font-size: var(--text-sm);
    }

    .mobile-nav__section-title {
        padding: 6px 14px 2px;
    }

    .mobile-nav__footer {
        padding: var(--space-sm) var(--space-md);
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    }

    .mobile-nav__user {
        padding: var(--space-sm) var(--space-md);
    }

    .mobile-nav__header {
        padding: var(--space-sm) var(--space-md);
    }
}

/* ── Ultra-small / foldables (≤ 320px) — minimal menu ── */
@media (max-width: 320px) {
    .mobile-nav__link {
        padding: 8px 12px;
        font-size: var(--text-xs);
    }

    .mobile-nav__divider {
        margin: 2px 0;
    }

    .mobile-nav__section-title {
        padding: 4px 12px 2px;
        font-size: 0.6rem;
    }

    .mobile-nav__links {
        padding: var(--space-xs) var(--space-sm);
        gap: 1px;
    }

    .mobile-nav__footer .btn {
        padding: 8px;
        font-size: var(--text-sm);
    }
}

@media (max-width: 480px) {
    .gfooter__grid {
        grid-template-columns: 1fr;
    }
}
/* 2026-10-21: "New" pill beside a menu item (Royale) */
.gnav__new{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:linear-gradient(90deg,#F59E0B,#FBBF24);color:#1a1200;font:900 10px/1.2 var(--font-body,'Nunito'),sans-serif;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
/* ── Menus v2 (2026-10): Games mega menu, Tournaments menu, tile drawer on phones ── */
.gnav__soon{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:var(--border-light);color:var(--text-tertiary);font:800 9.5px/1.4 var(--font-body,'Nunito'),sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.gnav__gold{color:#B45309}[data-theme=dark] .gnav__gold{color:#FBBF24}
.gnav__mega{display:grid;grid-template-columns:repeat(3,max-content);gap:4px 14px;padding:12px 14px;left:0;transform:translateY(4px)}
.gnav__dropdown:hover .gnav__mega,.gnav__dropdown:focus-within .gnav__mega{transform:translateY(0)}
@media (max-width:1100px){.gnav__mega{left:-72px}}   /* iPad landscape, small laptops: the right column stayed past the screen edge and made the page scroll sideways (961-1100 px: the bar is tighter there) */
.gnav__tmenu{min-width:230px}
.gnav__col{display:grid;align-content:start;gap:1px}
.gnav__col>b{font:900 10.5px/1 var(--font-body,'Nunito'),sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);padding:6px 10px 8px}
.gnav__mi{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:var(--radius-md);color:var(--text-primary);text-decoration:none;font-weight:800;font-size:var(--text-sm);line-height:1.25;white-space:nowrap}
.gnav__mi>em{font-style:normal;width:20px;flex:none;text-align:center}
.gnav__mi>span>small:last-child{display:block;font-weight:600;font-size:12px;color:var(--text-tertiary)}
a.gnav__mi:hover,a.gnav__mi:focus-visible{background:var(--accent-primary-light)}
.gnav__mi.is-soon{opacity:.62;cursor:default}
/* phone drawer */
.mnav{gap:12px!important}
.mnav-play{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;border-radius:14px;font:400 18px/1 var(--font-heading);color:#fff!important;text-decoration:none;background:linear-gradient(180deg,#60A5FA,#2563EB);box-shadow:0 4px 0 #1E40AF}
.mnav-grp{display:grid;gap:6px}.mnav-grp .mobile-nav__section-title{padding:0 2px}
.mnav-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mnav-tile{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-weight:800;font-size:14px;line-height:1.15;text-decoration:none;min-width:0}
.mnav-tile>em{font-style:normal;font-size:18px;flex:none}
.mnav-tile>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mnav-tile>span small{display:block;font-weight:700;font-size:11px;color:var(--text-tertiary)}
.mnav-tile.wide{grid-column:span 2}
.mnav-tile.gold{border-color:rgba(217,119,6,.45);background:linear-gradient(90deg,rgba(251,191,36,.16),var(--bg-card))}
.mnav-tile>.gnav__new,.mnav-tile>.gnav__soon{position:absolute;top:-7px;right:6px;margin:0}
.mnav-tile.is-soon{opacity:.6}
a.mnav-tile:hover,a.mnav-tile:focus-visible{border-color:var(--accent-primary)}
/* "More word lengths" (4/6/7 Letter Wordle): one menu row with three pill links */
.gnav__lens{cursor:default}
.gnav__lens-row{display:flex;gap:6px;margin-top:7px}
.gnav__lens-row a,.mnav-lens a{border-radius:999px;background:var(--accent-primary-light);color:var(--accent-primary-hover);font-weight:800;text-decoration:none;white-space:nowrap}
.gnav__lens-row a{padding:5px 11px;font-size:12.5px}
.gnav__lens-row a:hover,.gnav__lens-row a:focus-visible,.mnav-lens a:hover,.mnav-lens a:focus-visible{background:var(--accent-primary);color:#fff}
.mnav-tile.lens{flex-wrap:wrap;row-gap:8px;padding-bottom:9px}
.mnav-tile>.mnav-lens{display:flex;gap:6px;flex:1 0 100%;overflow:visible}
.mnav-lens a{flex:1;display:grid;place-items:center;min-height:38px;border-radius:10px;font-size:14px}
[data-theme="dark"] .gnav__lens-row a,[data-theme="dark"] .mnav-lens a{background:rgba(96,165,250,.16);color:#93C5FD}
.mnav-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mnav-icons.is-6{grid-template-columns:repeat(3,1fr)}
.mnav-icons a{display:grid;justify-items:center;gap:2px;padding:8px 0;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);font-size:11.5px;font-weight:800;color:var(--text-secondary);text-decoration:none}
.mnav-icons a em{font-style:normal;font-size:18px}.mnav-icons a.is-active{border-color:var(--accent-primary);color:var(--accent-primary)}
@media (max-width:340px){.mnav-tile{font-size:13px;padding:7px 8px}.mnav-tile>em{font-size:16px}}
.gnav__mega,.gnav__tmenu{background:var(--bg-secondary);backdrop-filter:none;-webkit-backdrop-filter:none}
/* 961–1100 px: the two dropdowns made the bar ~60px wider; drop the trophy icon and tighten the links so nothing spills off-screen */
@media (min-width:961px) and (max-width:1100px){.gnav__ico{display:none}.gnav__link{padding:6px 10px}}

/* a signed-in header on a 320 px phone: the icons give back the few px that made the whole page slide sideways (2026-11-03) */
@media (max-width:340px){.header__actions{gap:2px}.header__inner{padding-left:8px;padding-right:6px}.header__gem-count{padding:4px 7px}}

/* premium-layout.css */
/* ═══════════════════════════════════════════════════════
   WordDuel — Premium Layout System
   Astros-inspired layout patterns (theme-agnostic)
   ═══════════════════════════════════════════════════════ */

/* ── Premium Hero ─────────────────────────────────── */
.premium-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-lg);
    position: relative;
    overflow: hidden;
}

.premium-hero::before,
.premium-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.5;
}

.premium-hero::before {
    width: 600px;
    height: 600px;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, var(--accent-primary-light) 0%, transparent 70%);
}

.premium-hero::after {
    width: 500px;
    height: 500px;
    bottom: -5%;
    right: -10%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
}

.premium-hero > * {
    position: relative;
    z-index: 1;
}

.premium-hero__title {
    font-size: var(--text-6xl);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}

.premium-hero__subtitle {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
    line-height: var(--leading-relaxed);
}

.premium-hero__actions {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Premium Section ──────────────────────────────── */
.premium-section {
    padding: var(--space-xl) 0;
    position: relative;
}

.premium-section--compact {
    padding: var(--space-md) 0;
}

.premium-section__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.premium-section__title {
    font-size: var(--text-4xl);
    font-weight: 900;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.01em;
}

.premium-section__subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
}

/* ── Premium Card ─────────────────────────────────── */
.premium-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                border-color var(--transition-base);
    position: relative;
    overflow: hidden;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 0 30px var(--accent-primary-light);
    border-color: var(--accent-primary);
}

.premium-card--interactive {
    cursor: pointer;
}

.premium-card--no-hover:hover {
    transform: none;
    box-shadow: none;
}

.premium-card--centered {
    text-align: center;
}

/* ── Premium Badge (Pill) ─────────────────────────── */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.premium-badge--primary {
    background: var(--accent-primary);
    color: #FFFFFF;
}

.premium-badge--success {
    background: var(--correct);
    color: #052E16;   /* white on bright green was 2.3:1 */
}

.premium-badge--warning {
    background: var(--present);
    color: #0F172A;
}

.premium-badge--purple {
    background: var(--purple);
    color: #FFFFFF;
}

.premium-badge--outline {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.premium-badge--live {
    background: #DC2626;
    color: #FFFFFF;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}

/* ── Premium Stat ─────────────────────────────────── */
.premium-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    padding: var(--space-xl) 0;
}

.premium-stat {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    min-width: 140px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.premium-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.premium-stat__value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--accent-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.premium-stat__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

/* ── Premium Grid ─────────────────────────────────── */
.premium-grid {
    display: grid;
    gap: var(--space-xl);
}

.premium-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.premium-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.premium-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ── Premium CTA Banner ──────────────────────────── */
.premium-cta {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    background: linear-gradient(135deg, 
        var(--accent-primary-light) 0%, 
        rgba(139, 92, 246, 0.08) 50%,
        rgba(0, 214, 143, 0.06) 100%
    );
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.premium-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, var(--accent-primary-light) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.5;
}

.premium-cta > * {
    position: relative;
    z-index: 1;
}

.premium-cta__title {
    font-size: var(--text-4xl);
    font-weight: 900;
    margin-bottom: var(--space-sm);
}

.premium-cta__desc {
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--text-lg);
}

/* ── Premium Button (gradient) ────────────────────── */
.btn--gradient {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--purple) 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn--gradient:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
}

.btn--glow {
    box-shadow: 0 0 20px var(--accent-primary-light), 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn--glow:hover {
    box-shadow: 0 0 30px var(--accent-primary-light), 0 6px 25px rgba(59, 130, 246, 0.4);
}

/* ── Premium Timeline (How to Play) ───────────────── */
.premium-timeline {
    display: flex;
    gap: var(--space-xl);
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
}

.premium-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), var(--purple), transparent);
    opacity: 0.3;
    z-index: 0;
}

.premium-timeline__step {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.premium-timeline__number {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--purple) 100%);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.premium-timeline__title {
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
}

.premium-timeline__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* ── Premium Feature (side-by-side) ───────────────── */
.premium-feature {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

.premium-feature__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary-light);
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    transition: transform var(--transition-base);
}

.premium-card:hover .premium-feature__icon {
    transform: scale(1.1);
}

.premium-feature__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-xs);
}

.premium-feature__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* ── Premium FAQ Accordion ────────────────────────── */
.premium-faq {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.premium-faq__item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: border-color var(--transition-base);
}

.premium-faq__item.is-open {
    border-color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
}

.premium-faq__question {
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
    cursor: pointer;
    background: none;
    text-align: left;
    transition: color var(--transition-fast);
}

.premium-faq__question:hover {
    color: var(--accent-primary);
}

.premium-faq__question::after {
    content: '+';
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    transition: transform var(--transition-base);
    flex-shrink: 0;
    margin-left: var(--space-md);
}

.premium-faq__item.is-open .premium-faq__question::after {
    content: '−';
    color: var(--accent-primary);
}

.premium-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-smooth);
}

.premium-faq__item.is-open .premium-faq__answer {
    max-height: 400px;
}

.premium-faq__answer-inner {
    padding: 0 var(--space-xl) var(--space-xl);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── Mini Leaderboard ─────────────────────────────── */
.mini-leaderboard {
    max-width: 600px;
    margin: 0 auto;
}

.mini-leaderboard__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.mini-leaderboard__row:nth-child(odd) {
    background: var(--glass-bg-subtle);
}

.mini-leaderboard__row--gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.mini-leaderboard__rank {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    width: 32px;
    text-align: center;
}

.mini-leaderboard__name {
    flex: 1;
    font-weight: var(--weight-semibold);
}

.mini-leaderboard__score {
    font-family: var(--font-heading);
    color: var(--accent-primary);
    font-weight: var(--weight-bold);
}

/* ── Testimonial Card ─────────────────────────────── */
.testimonial-card {
    padding: var(--space-xl);
    text-align: left;
}

.testimonial-card__stars {
    color: var(--gem-gold);
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
    letter-spacing: 0.1em;
}

.testimonial-card__text {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: var(--space-md);
    line-height: var(--leading-relaxed);
}

.testimonial-card__author {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--weight-semibold);
}

/* ── Word of the Day ──────────────────────────────── */
.wotd {
    display: flex;
    gap: var(--space-2xl);
    align-items: center;
}

.wotd__content {
    flex: 1;
}

.wotd__word {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.wotd__type {
    font-size: var(--text-sm);
    color: var(--accent-primary);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-sm);
}

.wotd__pronunciation {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    margin-bottom: var(--space-md);
}

.wotd__definition {
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-md);
    line-height: var(--leading-relaxed);
}

.wotd__example {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--accent-primary);
    margin-bottom: var(--space-lg);
}

.wotd__decoration {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    opacity: 0.8;
}

/* ── Scroll Animations ────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll[data-delay="1"] { transition-delay: 100ms; }
.animate-on-scroll[data-delay="2"] { transition-delay: 200ms; }
.animate-on-scroll[data-delay="3"] { transition-delay: 300ms; }
.animate-on-scroll[data-delay="4"] { transition-delay: 400ms; }
.animate-on-scroll[data-delay="5"] { transition-delay: 500ms; }

/* ── Explore Games Hub ────────────────────────────── */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
}

.explore-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    text-decoration: none;
    color: inherit;
}

.explore-card__icon {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary-light);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.explore-card:hover .explore-card__icon {
    transform: scale(1.1) rotate(-5deg);
}

.explore-card__title {
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    margin-bottom: 2px;
}

.explore-card__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ── About Section ────────────────────────────────── */
.about-section {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.about-section p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* ── Daily Challenge Widget ───────────────────────── */
.daily-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.daily-widget__info {
    flex: 1;
    min-width: 250px;
}

.daily-widget__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-xs);
}

.daily-widget__stat {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.daily-widget__sub {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.daily-widget__yesterday {
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-bg-subtle);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .premium-hero__title {
        font-size: var(--text-4xl);
    }

    .premium-section {
        padding: var(--space-lg) 0;
    }

    .premium-section__title {
        font-size: var(--text-3xl);
    }

    .premium-grid--2,
    .premium-grid--3 {
        grid-template-columns: 1fr;
    }

    .premium-timeline {
        flex-direction: column;
        align-items: center;
    }

    .premium-timeline::before {
        display: none;
    }

    .premium-timeline__step {
        max-width: 100%;
    }

    .premium-cta__title {
        font-size: var(--text-3xl);
    }

    .wotd {
        flex-direction: column;
        text-align: center;
    }

    .wotd__example {
        text-align: left;
    }

    .wotd__decoration {
        width: 120px;
        height: 120px;
        font-size: 4rem;
    }

    .daily-widget {
        flex-direction: column;
        text-align: center;
    }

    .premium-hero {
        min-height: auto;
        padding: var(--space-2xl) 0 var(--space-lg);
    }
}

@media (max-width: 480px) {
    .premium-hero__title {
        font-size: var(--text-3xl);
    }

    .premium-stats {
        gap: var(--space-sm);
    }

    .premium-stat {
        min-width: 0;
        flex: 1 1 45%;
        padding: var(--space-md);
    }

    .premium-stat__value {
        font-size: var(--text-2xl);
    }
}

/* Short screens (school Chromebooks at 1366x650, small phones): Play Now stays on the first screen. Same pieces and words, less air. */
@media (max-height: 720px) {
    .premium-hero { min-height: 0; padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .premium-hero .premium-badge { margin-bottom: var(--space-sm) !important; }
    .premium-hero .hero__demo { margin-bottom: var(--space-md); }
    .premium-hero .hero__demo-tile { width: 44px; height: 44px; font-size: var(--text-lg); }
    .premium-hero__title { font-size: var(--text-4xl); margin-bottom: var(--space-sm); }
    .premium-hero__subtitle { font-size: var(--text-base); margin-bottom: var(--space-md); }
    .premium-hero__actions { gap: var(--space-sm); }
}
@media (max-height: 720px) and (max-width: 480px) {
    .premium-hero .hero__demo-tile { width: 36px; height: 36px; font-size: var(--text-base); }
    .premium-hero__title { font-size: var(--text-2xl); }
    .premium-hero__subtitle { font-size: var(--text-sm); line-height: 1.4; }
}
/* a phone on its side: the demo tiles step aside, so Play Now is still on the first screen */
@media (max-height: 480px) {
    .premium-hero .hero__demo { display: none; }
}
/* the badge stays on one line on small phones */
@media (max-width: 360px) {
    .premium-hero .premium-badge { font-size: 11px; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
}
/* small phones: long buttons wrap inside their card instead of pushing the content off-centre */
@media (max-width: 390px) {
    .daily-widget__info, .wotd__content { min-width: 0; width: 100%; }
    .daily-widget .btn, .wotd .btn { white-space: normal; }
}
@media (max-width: 640px) {
    .wotd__decoration { width: 72px; height: 72px; font-size: 2.4rem; }
}

/* game-options.css */
/* WordlyPlay — game options: the on/off switches in the ⚙ menu, Colorblind tiles, the Hard Mode chip */
.gopt-title{margin-top:6px;border-top:1px solid rgba(148,163,184,.18);padding-top:10px}
.settings-dropdown > .gopt-title:first-child{margin-top:0;border-top:0;padding-top:2px}   /* nothing above it (the Daily menu): no divider */
.gopt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.gopt .option-meta{display:block}
.gopt-sw{flex:none;width:34px;height:20px;border-radius:999px;background:rgba(148,163,184,.35);position:relative;transition:background .15s}
.gopt-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.gopt.is-on .gopt-sw{background:#22C55E}.gopt.is-on .gopt-sw::after{transform:translateX(14px)}
/* Colorblind: orange = right letter, right spot; blue = in the word, other spot (the same colours as the app) */
:root[data-cb="on"]{--correct:#E66100;--correct-to:#F5852F;--correct-shadow:#B34B00;--correct-light:rgba(230,97,0,.15);--present:#7DD3FC;--present-to:#BAE6FD;--present-shadow:#0284C7;--present-light:rgba(125,211,252,.18)}
/* our keys and empty tiles are blue, so "in the word" is a pale sky blue with dark letters: never mistaken for an unused key */
:root[data-cb="on"] .tile[data-state="present"],:root[data-cb="on"] .key[data-state="present"]{color:#0C4A6E!important;text-shadow:none!important}
:root[data-cb="on"] .key[data-state="correct"],:root[data-cb="on"] .key[data-state="present"]{position:relative}
:root[data-cb="on"] .key[data-state="correct"]::after{content:'';position:absolute;left:32%;right:32%;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.95)}
:root[data-cb="on"] .key[data-state="present"]::after{content:'';position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:#0C4A6E}
:root[data-cb="on"] .tile[data-state="correct"],:root[data-cb="on"] .tile[data-state="present"]{position:relative}
:root[data-cb="on"] .tile[data-state="correct"]::after{content:'';position:absolute;left:30%;right:30%;bottom:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.9)}
:root[data-cb="on"] .tile[data-state="present"]::after{content:'';position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#0C4A6E}
/* the result card's small board follows too */
:root[data-cb="on"] .wc-mini b.c{background:#E66100}:root[data-cb="on"] .wc-mini b.p{background:#7DD3FC}
/* Hard Mode chip over the board */
.hard-chip{display:none;align-items:center;gap:5px;margin:0 auto 6px;width:max-content;padding:2px 10px;border-radius:999px;font:800 11.5px/1.5 var(--font-body,'Nunito',sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#FECACA;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.5)}
.hard-chip.is-on{display:flex}
[data-theme=light] .hard-chip{color:#B91C1C;background:rgba(239,68,68,.08)}
/* "Add to home screen" card (comeback.js) */
.cb-card{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translate(-50%,-12px);opacity:0;transition:transform .25s,opacity .25s;z-index:10030;width:min(92vw,400px);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#111827;color:#F1F5F9;border:1px solid rgba(96,165,250,.55);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cb-card.is-in{transform:translate(-50%,0);opacity:1}
.cb-card img{border-radius:10px;flex:none}
.cb-card__t{flex:1;min-width:0}.cb-card__t>b{display:block;font:800 14px/1.25 var(--font-body,'Nunito',sans-serif)}.cb-card__t small{color:#94A3B8;font-size:12.5px;line-height:1.35}
.cb-card__go{flex:none;border:0;border-radius:10px;padding:8px 14px;font:400 14px/1 var(--font-heading,'Fredoka One',sans-serif);color:#fff;background:linear-gradient(180deg,#3B82F6,#2563EB);box-shadow:0 3px 0 #1D4ED8;cursor:pointer}
.cb-card__x{position:relative;flex:none;min-width:36px;min-height:36px;display:grid;place-items:center;border:0;background:none;color:#94A3B8;font-size:20px;line-height:1;padding:0;cursor:pointer}.cb-card__x::after{content:'';position:absolute;inset:-4px -8px -4px -2px}
@media (max-width:400px){.cb-card{gap:6px;padding:8px}.cb-card img{width:32px;height:32px}.cb-card__t>b{font-size:13px}.cb-card__go{padding:8px 10px}.cb-card__x{min-width:30px}.cb-card__t small{display:none}}   /* small phones: two lines, so it hides less of the board for its 12 seconds */
@media (prefers-reduced-motion:reduce){.cb-card{transition:none}}
/* the ⚙ menu: solid background (it sat see-through over the board) and kept on screen on phones (it ran off the left edge) */
.game-controls .settings-dropdown,#daily-opts-dropdown{background:#111827;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme=light] .game-controls .settings-dropdown,[data-theme=light] #daily-opts-dropdown{background:#FFFFFF}
@media (max-width:600px){.game-controls .settings-dropdown{right:auto;left:0;max-width:calc(100vw - 24px)}}
/* "Press Space for the next word" under Play again: only on devices with a keyboard and mouse/trackpad */
.wc-key-hint{display:none;margin:2px 0 4px;text-align:center;font:700 12px/1.4 var(--font-body,'Nunito',sans-serif);color:var(--text-tertiary,#94A3B8)}
.wc-key-hint kbd{display:inline-block;padding:0 6px;border-radius:5px;border:1px solid rgba(148,163,184,.5);border-bottom-width:2px;font:800 11px/1.5 var(--font-body,'Nunito',sans-serif);color:inherit;background:rgba(148,163,184,.1)}
@media (hover:hover) and (pointer:fine){.wc-key-hint{display:block}}
/* the after-Daily card sits at the bottom, under the result */
.cb-card--bottom{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px)}
.cb-card--bottom.is-in{transform:translate(-50%,0)}
/* "📲 Add to home screen" in the phone menu */
.cb-menu{display:block;width:100%;text-align:left;border:1px solid rgba(96,165,250,.5)!important;background:rgba(59,130,246,.14)!important;color:#BFDBFE!important;border-radius:12px;margin:6px 0;cursor:pointer;font:inherit}
.cb-menu small{display:block;font-size:11.5px;font-weight:600;color:#94A3B8;margin-top:2px}
[data-theme=light] .cb-menu{color:#1D4ED8!important;background:rgba(59,130,246,.08)!important}
/* Colorblind wins over a board theme's own colours */
:root[data-cb="on"] .wb[data-t]{--c:#E66100;--c-lip:#B34B00;--p:#7DD3FC;--p-lip:#0284C7}
:root[data-cb="on"] .wb[data-t] .tile[data-state=present]{color:#0C4A6E}

/* royale.css */
/* WordlyPlay — Royale page (/wordle-battle-royale): landing content + the full-screen game layer */
.ry-hero{position:relative;padding:var(--space-3xl) 0 var(--space-2xl);overflow:hidden}
.ry-hero::before{content:'';position:absolute;inset:-20% 0 auto;height:420px;background:radial-gradient(ellipse at 50% 30%,rgba(251,191,36,.16),transparent 60%);pointer-events:none}
.ry-hero .container{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-2xl);align-items:center}
@media (max-width:860px){.ry-hero .container{grid-template-columns:1fr}}
.ry-kicker{font:800 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-secondary)}
.ry-hero h1{font-family:var(--font-heading);font-weight:400;font-size:clamp(34px,7vw,56px);line-height:1.05;margin:10px 0 12px;background:linear-gradient(90deg,#FBBF24,#F59E0B 45%,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.ry-lede{font-size:var(--text-lg);color:var(--text-secondary);max-width:52ch;margin:0 0 var(--space-lg);line-height:var(--leading-relaxed)}
.ry-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ry-play{font:900 18px/1 var(--font-body);border:0;border-radius:16px;padding:17px 28px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#60A5FA,#2563EB);box-shadow:0 5px 0 #1E40AF,0 12px 30px rgba(37,99,235,.35)}
.ry-play:active{transform:translateY(3px);box-shadow:0 2px 0 #1E40AF}.ry-play:disabled{opacity:.6;cursor:wait}
.ry-play:focus-visible,.rl-key:focus-visible,.rl-btn:focus-visible{outline:3px solid #FBBF24;outline-offset:3px}
.ry-alt{color:var(--text-secondary);font-weight:800;text-decoration:none;padding:10px 4px}.ry-alt:hover{color:var(--text-primary)}
a.rl-btn{text-decoration:none;display:inline-flex;align-items:center}
.ry-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:var(--space-md);color:var(--text-tertiary);font-size:var(--text-sm)}
.ry-meta span::before{content:'✓ ';color:var(--correct)}
.ry-bracket-art{width:100%;max-width:440px;justify-self:center;aspect-ratio:1/1}
.ry-bracket-art svg{width:100%;height:100%;display:block}
/* article */
.ry-article{padding:var(--space-2xl) 0 var(--space-4xl)}
.ry-article .container{max-width:820px}
.ry-article h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,4.4vw,32px);line-height:1.15;margin:var(--space-3xl) 0 var(--space-md);text-wrap:balance}
.ry-article h3{font-size:var(--text-lg);margin:var(--space-xl) 0 var(--space-sm)}
.ry-article p,.ry-article li{color:var(--text-secondary);line-height:var(--leading-relaxed);font-size:var(--text-base)}
.ry-article p{margin:0 0 var(--space-md)}.ry-article ol,.ry-article ul{padding-left:1.3em;margin:0 0 var(--space-md)}.ry-article li{margin:6px 0}
.ry-article strong{color:var(--text-primary)}
.ry-article a{color:var(--accent-primary);text-decoration:underline;text-underline-offset:2px}
.ry-answer{border-left:4px solid #FBBF24;background:var(--bg-card);border-radius:0 14px 14px 0;padding:var(--space-md) var(--space-lg);margin:var(--space-lg) 0}
.ry-answer p:last-child{margin:0}
.ry-table{overflow-x:auto;margin:0 0 var(--space-lg);border:1px solid var(--border-color);border-radius:14px}
.ry-table table{border-collapse:collapse;width:100%;min-width:480px;font-size:var(--text-sm)}
.ry-table th,.ry-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-color);color:var(--text-secondary);vertical-align:top}
.ry-table th{color:var(--text-primary);font-weight:800;background:var(--bg-card)}
.ry-table tr:last-child td{border-bottom:0}.ry-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800}
.ry-up{color:var(--correct)}.ry-down{color:var(--danger)}
.ry-steps{counter-reset:s;list-style:none;padding:0!important}
.ry-steps li{counter-increment:s;position:relative;padding-left:44px;margin:14px 0}
.ry-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:900 15px/1 var(--font-body);color:#1a1200;background:linear-gradient(180deg,#FDE68A,#F59E0B)}
.ry-tiles{display:inline-flex;gap:3px;vertical-align:middle}.ry-tiles i{width:14px;height:14px;border-radius:3px;display:inline-block}
.ry-tiles .g{background:var(--correct)}.ry-tiles .y{background:var(--present)}.ry-tiles .x{background:var(--absent)}
.ry-faq details{border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card);margin:10px 0}
.ry-faq summary{cursor:pointer;padding:14px 16px;font-weight:800;color:var(--text-primary);list-style:none;display:flex;justify-content:space-between;gap:12px}
.ry-faq summary::-webkit-details-marker{display:none}.ry-faq summary::after{content:'+';color:var(--text-tertiary);font-size:20px;line-height:1}
.ry-faq details[open] summary::after{content:'–'}.ry-faq details>div{padding:0 16px 14px}.ry-faq details>div p:last-child{margin:0}
.ry-band{margin:var(--space-2xl) 0;padding:var(--space-lg);border-radius:18px;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(251,191,36,.12));border:1px solid var(--border-color);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ry-band p{margin:0;color:var(--text-primary);font-weight:800}
.ry-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:var(--space-md) 0}
.ry-links a{display:block;padding:14px 16px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border-color);text-decoration:none!important;color:var(--text-primary)!important;font-weight:800}
.ry-links h3{margin:0;font-size:var(--text-base);color:var(--text-primary)}.ry-links a span{display:block;font-weight:600;color:var(--text-tertiary);font-size:var(--text-sm);margin-top:3px}
.ry-updated{color:var(--text-tertiary);font-size:var(--text-sm)}

/* ---------------------------------------------------------------- the game layer */
html.rl-open,html.rl-open body{overflow:hidden}
/* colours: dark is the default; light follows the site's theme switch (data-theme on <html>) */
#royale-layer{--rl-bg:#0F172A;--rl-glow:#1d2b52;--rl-ink:#F1F5F9;--rl-ink2:#A8B5C9;--rl-ink3:#8D9CB6;--rl-line:#2B3A55;--rl-line2:#2f4064;--rl-hole:#3a4d74;
  --rl-surf:#162238;--rl-surf3:#24324d;--rl-surf3-lip:#111a2c;--rl-top:rgba(11,18,32,.88);--rl-brand:linear-gradient(90deg,#FBBF24,#22D3EE);--rl-gold:#FBBF24;--rl-gold-ink:#FBBF24;
  --rl-me:#60A5FA;--rl-me-ink:#93C5FD;--rl-av1:#22304D;--rl-av2:#0A1020;--rl-track:#1b2740;--rl-seat-on:#36558a;--rl-map:linear-gradient(180deg,#121c33,#0d1527);
  --rl-wire:#2a3a5a;--rl-wire-live:#9a6f12;--rl-empty:#26344F;--rl-absent:#56657d;--rl-ok:#4ADE80;--rl-bad:#F87171;--rl-warn:#FCD34D;--rl-gem-ink:#FDE68A;
  --rl-cup:radial-gradient(circle,#3a2a07,#1a1406);--rl-cup-bd:#6b5212;--rl-panel:rgba(11,20,36,.95);--rl-card:#1E293B;--rl-scrim:rgba(5,9,18,.72);--rl-shadow:rgba(0,0,0,.5)}
[data-theme=light] #royale-layer{--rl-bg:#EEF4FF;--rl-glow:#D6E4FF;--rl-ink:#0F172A;--rl-ink2:#475569;--rl-ink3:#5B6B82;--rl-line:#C9D7EE;--rl-line2:#B7C8E6;--rl-hole:#A9BCDD;
  --rl-surf:#FFFFFF;--rl-surf3:#E3EBF8;--rl-surf3-lip:#C3D0E6;--rl-top:rgba(255,255,255,.9);--rl-brand:linear-gradient(90deg,#B45309,#0E7490);--rl-gold:#F59E0B;--rl-gold-ink:#B45309;
  --rl-me:#2563EB;--rl-me-ink:#1D4ED8;--rl-av1:#E8EEF9;--rl-av2:#CBD7EA;--rl-track:#DCE6F5;--rl-seat-on:#93B4E6;--rl-map:linear-gradient(180deg,#FFFFFF,#F2F6FE);
  --rl-wire:#C3D1E8;--rl-wire-live:#D97706;--rl-empty:#E2E8F0;--rl-absent:#94A3B8;--rl-ok:#15803D;--rl-bad:#DC2626;--rl-warn:#B45309;--rl-gem-ink:#92400E;
  --rl-cup:radial-gradient(circle,#FFF7DB,#FDE7A6);--rl-cup-bd:#E8C468;--rl-panel:rgba(255,255,255,.97);--rl-card:#FFFFFF;--rl-scrim:rgba(15,23,42,.45);--rl-shadow:rgba(15,23,42,.16)}
[data-theme=light] .rl-bub{background:#0F172A;color:#F8FAFC}[data-theme=light] #rl-toast{background:#0F172A;color:#F8FAFC}
#royale-layer [hidden],#royale-layer[hidden]{display:none!important}
.ry-bracket-art{max-width:min(440px,100%)}@media (max-width:860px){.ry-bracket-art{max-width:260px}}
.ry-table.fit table{min-width:0}
#royale-layer{position:fixed;inset:0;z-index:9000;background:radial-gradient(circle at 50% -10%,var(--rl-glow),var(--rl-bg) 55%);background-color:var(--rl-bg);color:var(--rl-ink);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .18s;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);font-family:var(--font-body)}
#royale-layer.on{opacity:1}
.rl-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--rl-top);backdrop-filter:blur(8px);border-bottom:1px solid var(--rl-line)}
.rl-top b{font-family:var(--font-heading);font-weight:400;font-size:20px;background:var(--rl-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.rl-x{width:40px;height:40px;border-radius:12px;border:1px solid var(--rl-line);background:var(--rl-surf);color:var(--rl-ink2);font-size:20px;cursor:pointer;display:inline-grid;place-items:center;padding:0;line-height:1}  /* centred content: on iPhone the gear sat at the left edge of its box (2026-10-28) */
.rl-wrap{max-width:1060px;margin:0 auto;padding:12px 14px 30px}
.rl-btn{font:900 15px/1 var(--font-body);border:0;border-radius:13px;padding:14px 20px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#60A5FA,#2563EB);box-shadow:0 4px 0 #1E40AF}
.rl-btn.alt{background:var(--rl-surf3);box-shadow:0 4px 0 var(--rl-surf3-lip);color:var(--rl-ink)}.rl-btn:active{transform:translateY(2px)}
.rl-av{width:34px;height:34px;border-radius:50%;display:inline-block;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 35%,var(--rl-av1),var(--rl-av2))}
.rl-av img{width:100%;height:100%;object-fit:cover;display:block}.rl-av.xl{width:88px;height:88px;box-shadow:0 0 0 4px rgba(251,191,36,.6)}
/* lobby */
#rl-lobby{text-align:center;max-width:640px;margin:0 auto}
#rl-lobby h2,#rl-lobby .rl-h2{font-family:var(--font-heading);font-weight:400;font-size:28px;margin:8px 0 0}
#rl-clock{font-family:var(--font-heading);font-size:44px;color:var(--rl-gold-ink);margin:6px 0}
.rl-barw{height:8px;border-radius:99px;background:var(--rl-track);overflow:hidden;margin:8px auto;max-width:360px}#rl-bar{height:100%;width:0;background:linear-gradient(90deg,#22D3EE,#3B82F6);transition:width .6s ease}
#rl-count{color:var(--rl-ink2)}
#rl-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.rl-seat{background:var(--rl-surf);border:1px dashed var(--rl-line2);border-radius:16px;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;min-width:0}
.rl-seat .ring{width:30px;height:30px;border-radius:50%;border:2px dashed var(--rl-hole)}
.rl-seat small{font-size:11.5px;color:var(--rl-ink2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-seat:not(.empty){border-style:solid;border-color:var(--rl-seat-on)}
.rl-seat.arrive{animation:rl-land .5s cubic-bezier(.2,1.3,.4,1)}.rl-seat.arrive .rl-av{animation:rl-drop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes rl-land{0%{transform:scale(.85)}100%{transform:none}}@keyframes rl-drop{0%{transform:translateY(-22px) scale(.5);opacity:0}100%{transform:none;opacity:1}}
#rl-lobby-msg{color:var(--rl-ink3);font-size:13px;min-height:20px}
@media (max-height:560px) and (orientation:landscape){#rl-seats{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.rl-seat{min-height:64px}#rl-clock{font-size:32px}}
/* map */
.rl-maphead h2,.rl-maphead .rl-h2{font-family:var(--font-heading);font-weight:400;font-size:22px;margin:2px 0}
#rl-map-status{color:var(--rl-ink2);font-size:14px}
.rl-mapwrap{margin-top:10px;border-radius:22px;background:radial-gradient(ellipse at 50% 50%,rgba(251,191,36,.10),transparent 45%),var(--rl-map);border:1px solid var(--rl-line);padding:4px;overflow:hidden}
#rl-map-canvas{position:relative;width:100%}
.rl-lines{position:absolute;inset:0;pointer-events:none}
.rl-lines path{fill:none;stroke-linejoin:round;stroke-linecap:round}.rl-lines .base{stroke:var(--rl-wire);stroke-width:2}.rl-lines .base.live{stroke:var(--rl-wire-live);stroke-width:2.5}
.rl-lines .adv{stroke:var(--rl-gold);stroke-width:3;filter:drop-shadow(0 0 3px rgba(251,191,36,.45))}.rl-lines .adv.mine{stroke:var(--rl-me);filter:drop-shadow(0 0 3px rgba(96,165,250,.5))}
.rl-nd{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;width:84px;text-align:center;transition:opacity .5s,filter .5s;animation:rl-in .45s backwards}
@keyframes rl-in{from{opacity:0;transform:translate(-50%,-40%)}}
.rl-nd .rl-av{border:2px solid var(--rl-line2)}.rl-nd.live .rl-av{border-color:#F59E0B}.rl-nd.won .rl-av{border-color:var(--correct)}.rl-nd.me .rl-av{border-color:var(--rl-me);box-shadow:0 0 0 3px rgba(96,165,250,.35)}
.rl-nd.lost{opacity:.42;filter:grayscale(1)}
.rl-nd .nm{font-size:11px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rl-ink2)}.rl-nd.me .nm{color:var(--rl-me-ink);font-weight:800}
.rl-nd .hole{width:30px;height:30px;border-radius:50%;border:2px dashed var(--rl-hole)}
.rl-nd.s1 .rl-av,.rl-nd.s2 .rl-av,.rl-nd.s3 .rl-av{width:38px;height:38px}
.rl-nd .chip{display:flex;align-items:center;gap:4px;min-height:12px;font-size:10px;color:var(--rl-ink3);white-space:nowrap}.rl-nd .chip .sq{display:flex;gap:1.5px}
.rl-nd .chip .sq i{width:7px;height:7px;border-radius:1.5px;background:var(--rl-empty)}.rl-nd .chip i.correct{background:var(--correct)}.rl-nd .chip i.present{background:var(--present)}.rl-nd .chip i.absent{background:var(--rl-absent)}
.rl-nd .chip em{font-style:normal;font-variant-numeric:tabular-nums}.rl-nd .chip .ok{color:var(--rl-ok);font-size:10.5px}
@media (max-width:899px){.rl-nd.s0{width:78px}.rl-nd.s0 .nm{max-width:78px;font-size:10px}.rl-nd.s0 .rl-av{width:30px;height:30px}.rl-nd.s0 .chip .sq i{width:6px;height:6px}}
@media (orientation:portrait) and (max-width:399px){.rl-nd.s0{width:min(calc(12.5% + 32px),calc(25% - 9px))}.rl-nd.s0 .nm{max-width:100%}}   /* the outermost players on a narrow phone: a long name ends in '…' inside the card, not cut by its edge */
@media (orientation:portrait) and (max-width:429px){.rl-nd.s1{width:min(84px,calc(25% - 9px))}.rl-nd.s1 .nm{max-width:100%}}   /* the third row has no zigzag: four players a quarter of the canvas apart (less 7 px), so a long name stops short of its neighbour's; on a zigzag row the same width is the limit under 360 wide */
@media (orientation:landscape) and (min-width:684px) and (max-width:899px){#rl-map-canvas .rl-nd.s0{width:min(78px,calc(10% + 6px))}#rl-map-canvas .rl-nd.s0 .nm{max-width:100%}}   /* the same on a phone on its side, where the Royale tree lies flat */
.rl-trophy{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.rl-trophy .cup{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:var(--rl-cup);border:2px solid var(--rl-cup-bd);filter:grayscale(.6)}
.rl-trophy.won .cup{filter:none;border-color:var(--rl-gold);box-shadow:0 0 34px rgba(251,191,36,.45);animation:rl-land .6s cubic-bezier(.2,1.3,.4,1)}
.rl-trophy .rl-av.champ{width:64px;height:64px}.rl-trophy .cupb{position:absolute;right:-6px;bottom:-6px;font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.rl-trophy .tl{font:900 11px/1.25 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--rl-gold-ink);max-width:200px;overflow-wrap:anywhere}
.rl-legend{text-align:center;font-size:12px;color:var(--rl-ink3);margin:8px 0 0}
.rl-panel{position:sticky;bottom:12px;margin-top:12px;background:var(--rl-panel);border:1px solid var(--rl-line);border-radius:18px;padding:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 12px 40px var(--rl-shadow)}
.rl-panel p{margin:0;color:var(--rl-ink2);flex:1 1 200px}.rl-panel .btns{display:flex;gap:8px;flex-wrap:wrap}
/* match */
#rl-match{max-width:560px;margin:0 auto}
.rl-mtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.rl-mtop h2{font-family:var(--font-heading);font-weight:400;font-size:20px;margin:0}.rl-mtop span{color:var(--rl-ink3);font-size:12.5px}
.rl-rival{display:flex;align-items:center;gap:10px;margin:8px 0;background:var(--rl-surf);border:1px solid var(--rl-line);border-radius:16px;padding:8px 10px;position:relative}
.rl-rival .who{display:flex;flex-direction:column;min-width:0;flex:1}.rl-rival .who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#rl-riv-count{font-size:12px;color:var(--rl-ink3)}
#rl-riv-tiles{display:flex;gap:3px}#rl-riv-tiles i{width:16px;height:16px;border-radius:4px;background:var(--rl-empty)}#rl-riv-tiles i.correct{background:var(--correct)}#rl-riv-tiles i.present{background:var(--present)}#rl-riv-tiles i.absent{background:var(--rl-absent)}
#rl-bubbles{position:absolute;right:8px;top:100%;margin-top:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:3;pointer-events:none}
.rl-bub{background:#F8FAFC;color:#0F172A;font:800 13px/1.2 var(--font-body);padding:7px 11px;border-radius:14px 14px 4px 14px;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:rl-land .3s;transition:opacity .6s}
.rl-bub.mine{background:#2563EB;color:#fff;border-radius:14px 14px 14px 4px;align-self:flex-start}.rl-bub.gone{opacity:0}
#rl-chat-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 8px}
.rl-qc{border:1px solid var(--rl-line);background:var(--rl-surf);color:var(--rl-ink);border-radius:10px;padding:9px 4px;font:800 12px/1.2 var(--font-body);cursor:pointer;min-height:40px}
#rl-you-count{text-align:center;color:var(--rl-ink3);font-size:12px;margin:2px 0 6px}
#rl-idle{text-align:center;color:var(--rl-warn);font-weight:800;font-size:13px;margin:0 0 6px}
/* the normal game's board, keyboard and power-ups (game.css), sized to fit the screen */
#rl-match{--tile-size:44px;--key-height:clamp(38px,6.2dvh,54px)}
#rl-match .grid{margin:2px auto 8px;justify-content:center}
#rl-match .keyboard{max-width:520px;margin:0 auto;width:100%}
#rl-match .powerups{margin:0 auto 8px;justify-content:center;flex-wrap:nowrap;gap:6px}#rl-match .powerup-btn{padding:7px 10px;font-size:12.5px;min-height:34px;white-space:nowrap}
#rl-match .powerup-info{margin:0 0 6px}
.rl-tools{display:flex;gap:8px;align-items:center}#rl-gems{font:900 14px/1 var(--font-body);color:var(--rl-gem-ink);background:var(--rl-surf);border:1px solid var(--rl-line);border-radius:999px;padding:9px 12px}
#rl-riv-tiles.bump{animation:rl-land .35s}
.rl-bub.emo{background:transparent;box-shadow:none;padding:0;width:64px}.rl-bub.emo svg,.rl-bub.emo .emo{width:64px;height:auto;display:block}
.rl-qc.emo{padding:2px;line-height:0}.rl-qc.emo svg,.rl-qc.emo .emo{width:38px;height:38px}
/* landscape phones: board and keyboard side by side */
@media (orientation:landscape) and (max-height:520px){#rl-match{max-width:940px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:'top top' 'riv riv' 'chat chat' 'board pw' 'board info' 'board keys';column-gap:18px;align-items:start;--tile-size:clamp(24px,calc((100dvh - 200px) / 7),44px);--key-height:clamp(34px,11dvh,46px)}
  .rl-mhead{grid-area:top;grid-auto-flow:column;justify-content:space-between;margin:0 0 2px}.rl-mhead .rl-cbtn{width:34px;height:34px}.rl-rival{grid-area:riv;margin:4px 0;padding:5px 8px}#rl-chat-sheet{grid-area:chat}#rl-you-count{display:none}#rl-idle{display:none!important}#powerup-info{grid-area:info}#game-grid{grid-area:board}#powerups{grid-area:pw;margin:0!important}#keyboard{grid-area:keys;align-self:center}
  .rl-top{padding:6px 12px}.rl-x{width:34px;height:34px}.rl-badge{font-size:11px;padding:5px 11px}}
/* overlays */
.rl-modal{position:fixed;inset:0;z-index:12;display:grid;place-items:center;background:var(--rl-scrim);padding:16px}
.rl-modal .card{background:var(--rl-card);color:var(--rl-ink);border:1px solid var(--rl-line);box-shadow:0 20px 50px var(--rl-shadow);border-radius:20px;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:380px;width:100%;animation:rl-land .45s cubic-bezier(.2,1.3,.4,1)}
#rl-champ-name{font-family:var(--font-heading);font-size:26px;color:var(--rl-gold-ink);overflow-wrap:anywhere}#rl-champ-me{color:var(--rl-ink2);margin:0}#rl-champ-me .up{color:var(--rl-ok)}#rl-champ-me .down{color:var(--rl-bad)}
#rl-champ-guest{color:var(--rl-ink2);font-size:14px;margin:0}#rl-champ-guest a{color:var(--rl-me-ink)}
#rl-confetti{position:fixed;inset:0;pointer-events:none;z-index:13}
#rl-toast{position:fixed;left:50%;top:calc(118px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);background:#F8FAFC;color:#0F172A;font:900 14px/1 var(--font-body);padding:11px 16px;border-radius:10px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:14;width:max-content;max-width:90vw;box-sizing:border-box;text-align:center;line-height:1.2}
#rl-toast.on{opacity:1;transform:translate(-50%,0)}  /* 118px: over the R16→Final track, no longer on top of the round badge and the settings button (2026-10-28) */
@media (prefers-reduced-motion:reduce){#royale-layer *{animation:none!important;transition:none!important}}
.rl-sub{margin:0;color:var(--rl-ink2)}
/* settings menu (top bar) */
.rl-optw{position:relative}
.rl-optmenu{position:absolute;right:0;top:calc(100% + 8px);width:250px;background:var(--rl-card);border:1px solid var(--rl-line);border-radius:16px;padding:8px;box-shadow:0 18px 44px var(--rl-shadow);display:grid;gap:2px;z-index:20}
.rl-optmenu>b{font:900 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--rl-ink3);padding:8px 10px 6px}
.rl-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:none;color:var(--rl-ink);font:800 14px/1.25 var(--font-body);text-align:left;padding:10px;border-radius:10px;cursor:pointer;min-height:44px}
.rl-sw:hover,.rl-sw:focus-visible{background:var(--rl-surf3);outline:none}
.rl-sw small{display:block;font-weight:700;font-size:11.5px;color:var(--rl-ink3)}
.rl-sw i{flex:none;width:36px;height:22px;border-radius:999px;background:var(--rl-hole);position:relative;transition:background .15s}
.rl-sw i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.rl-sw[aria-checked=true] i{background:#22C55E}.rl-sw[aria-checked=true] i::after{transform:translateX(14px)}
.rl-x:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
/* colorblind: the map chips and the rival's mini tiles get the same marks as the board */
:root[data-cb=on] #rl-riv-tiles i.correct,:root[data-cb=on] .rl-nd .chip i.correct{box-shadow:inset 0 -2px 0 rgba(255,255,255,.95)}
:root[data-cb=on] #rl-riv-tiles i.present,:root[data-cb=on] .rl-nd .chip i.present{background-image:radial-gradient(circle at 72% 28%,#0C4A6E 0 18%,transparent 22%)}
.rl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* match result card: floats over the board until the map comes back */
.rl-banner{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:11;width:min(92vw,400px);display:grid;gap:4px;text-align:center;padding:14px 16px;border-radius:18px;background:var(--rl-card);border:2px solid var(--rl-line);box-shadow:0 18px 50px var(--rl-shadow);animation:rl-up .35s cubic-bezier(.2,1.3,.4,1)}
.rl-banner b{font:400 24px/1.1 var(--font-heading)}.rl-banner span{color:var(--rl-ink2);font-size:14px}.rl-banner i{font-style:normal;font-weight:900;color:var(--rl-ink);letter-spacing:.06em}
.rl-banner.win{border-color:var(--correct)}.rl-banner.win b{color:var(--rl-ok)}.rl-banner.lose b{color:var(--rl-bad)}
@keyframes rl-up{from{opacity:0;transform:translate(-50%,16px)}}
.rl-their{margin-top:6px;display:grid;gap:5px;justify-items:center}.rl-their small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--rl-ink3)}
.rl-mini{display:grid;gap:3px}.rl-mini div{display:flex;gap:3px}
.rl-mini i{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font:900 12px/1 var(--font-body)!important;letter-spacing:0!important;text-transform:uppercase;color:#fff!important;background:var(--rl-empty)}
.rl-mini i.correct{background:var(--correct)}.rl-mini i.present{background:var(--present)}.rl-mini i.absent{background:var(--absent)}
:root[data-cb=on] .rl-mini i.present{color:#0C4A6E!important}
/* light theme: darker gold/teal so text keeps 4.5:1 on the pale background */
[data-theme=light] .ry-hero h1{background:linear-gradient(90deg,#B45309,#C2410C 45%,#0E7490);-webkit-background-clip:text;background-clip:text}
[data-theme=light] .ry-kicker{color:#0E7490}
[data-theme=light] .ry-meta{color:var(--text-secondary)}
[data-theme=light] .ry-hero::before{background:radial-gradient(ellipse at 50% 30%,rgba(245,158,11,.14),transparent 60%)}

/* match header: the same mode pill + round buttons as the other game modes */
.rl-mhead{display:grid;justify-items:center;gap:8px;margin:2px 0 6px}
.rl-badge{margin:0;display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;font:900 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#60A5FA,#2563EB);box-shadow:0 3px 10px rgba(37,99,235,.3)}
.rl-ctrls{display:flex;gap:8px;align-items:center}
.rl-cbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--rl-surf);border:1px solid var(--rl-line);color:var(--rl-ink2);cursor:pointer;font:900 17px/1 var(--font-body);transition:border-color .15s,color .15s,transform .15s}
.rl-cbtn:hover{border-color:var(--rl-me);color:var(--rl-me)}.rl-cbtn:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.rl-cbtn svg{width:20px;height:20px}.rl-cbtn .mute-line{display:none}.rl-cbtn.is-muted .mute-line{display:block}.rl-cbtn.is-muted .snd-wave{display:none}
.rl-ctrls .rl-optmenu{left:50%;right:auto;transform:translateX(-50%)}
#royale-layer.in-match #rl-optw-top{display:none}
#rl-you-count.target{color:var(--rl-warn);font-weight:900;font-size:13px}
/* rules: in the lobby and behind the ? button */
.rl-howto{text-align:left;margin:14px auto 0;max-width:520px;background:var(--rl-surf);border:1px solid var(--rl-line);border-radius:18px;padding:14px 16px}
.rl-howto>b{display:block;font:400 18px/1.2 var(--font-heading);margin-bottom:8px}
.rl-howto ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rl-howto li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--rl-ink2)}
.rl-howto li i{font-style:normal;flex:none;width:22px;text-align:center}.rl-howto strong{color:var(--rl-ink)}
.rl-howto small{display:block;margin-top:10px;color:var(--rl-ink3);font-size:12.5px}
#rl-rules .card{text-align:left;align-items:stretch;max-width:440px}#rl-rules-body>b{display:block;font:400 20px/1.2 var(--font-heading);margin-bottom:10px}
#rl-rules-body ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}#rl-rules-body li{display:flex;gap:10px;font-size:14px;line-height:1.4;color:var(--rl-ink2)}#rl-rules-body li i{font-style:normal;width:22px;flex:none;text-align:center}#rl-rules-body strong{color:var(--rl-ink)}#rl-rules-body small{display:block;margin-top:10px;color:var(--rl-ink3)}
#rl-rules .rl-btn{align-self:center;margin-top:6px}
/* hero bracket: draws in once, then a 10 s loop of one Royale (no flashing; static for reduced motion) */
.ry-anim .ry-b{stroke-dasharray:1;stroke-dashoffset:1;animation:ry-draw .9s cubic-bezier(.4,0,.2,1) forwards}
.ry-anim .ry-b.c2{animation-delay:.35s}.ry-anim .ry-b.c3{animation-delay:.7s}
@keyframes ry-draw{to{stroke-dashoffset:0}}
.ry-anim .ry-s{transform-box:fill-box;transform-origin:center;animation:ry-pop .45s cubic-bezier(.2,1.4,.4,1) calc(var(--d) * 35ms) backwards}
@keyframes ry-pop{from{transform:scale(0)}}
.ry-anim .ry-a{stroke-dasharray:1;stroke-dashoffset:1;animation:10s ease-in-out 1.4s infinite}
.ry-anim .ry-a.me{stroke:#60A5FA;filter:drop-shadow(0 0 3px rgba(96,165,250,.55))}
.ry-anim .ry-a.r1{animation-name:ry-r1}.ry-anim .ry-a.r2{animation-name:ry-r2}.ry-anim .ry-a.r3{animation-name:ry-r3}.ry-anim .ry-a.r4{animation-name:ry-r4}
@keyframes ry-r1{0%,6%{stroke-dashoffset:1;opacity:1}14%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ry-r2{0%,22%{stroke-dashoffset:1;opacity:1}30%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ry-r3{0%,38%{stroke-dashoffset:1;opacity:1}45%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ry-r4{0%,52%{stroke-dashoffset:1;opacity:1}57%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.ry-anim .ry-s.o1,.ry-anim .ry-s.o2,.ry-anim .ry-s.o3,.ry-anim .ry-s.o4{animation:ry-pop .45s cubic-bezier(.2,1.4,.4,1) calc(var(--d) * 35ms) backwards,10s ease-in-out 1.4s infinite}
.ry-anim .ry-s.o1{animation-name:ry-pop,ry-o1}.ry-anim .ry-s.o2{animation-name:ry-pop,ry-o2}.ry-anim .ry-s.o3{animation-name:ry-pop,ry-o3}.ry-anim .ry-s.o4{animation-name:ry-pop,ry-o4}
@keyframes ry-o1{0%,14%{opacity:1}18%,90%{opacity:.3}97%,100%{opacity:1}}
@keyframes ry-o2{0%,30%{opacity:1}34%,90%{opacity:.3}97%,100%{opacity:1}}
@keyframes ry-o3{0%,45%{opacity:1}49%,90%{opacity:.3}97%,100%{opacity:1}}
@keyframes ry-o4{0%,57%{opacity:1}61%,90%{opacity:.3}97%,100%{opacity:1}}
.ry-anim .ry-cup{transform-box:fill-box;transform-origin:center;animation:ry-pop .6s cubic-bezier(.2,1.4,.4,1) 1s backwards,ry-champ 10s ease-in-out 1.4s infinite}
@keyframes ry-champ{0%,56%{transform:scale(1);filter:none}62%{transform:scale(1.14);filter:drop-shadow(0 0 14px rgba(251,191,36,.9))}70%,86%{transform:scale(1.06);filter:drop-shadow(0 0 10px rgba(251,191,36,.7))}95%,100%{transform:scale(1);filter:none}}
.ry-anim .ry-halo{transform-box:fill-box;transform-origin:center;animation:ry-halo 10s ease-in-out 1.4s infinite}
@keyframes ry-halo{0%,56%{opacity:.7;transform:scale(.9)}66%,86%{opacity:1;transform:scale(1.08)}96%,100%{opacity:.7;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.ry-anim *{animation:none!important}.ry-anim .ry-b{stroke-dashoffset:0}.ry-anim .ry-a{stroke-dashoffset:1}.ry-anim .ry-a.me{stroke-dashoffset:0}}
/* ── match arena (2026-10-21): each round has its own colour, a spotlight behind the board, a round track and a versus bar ── */
#royale-layer{--st:#3B82F6;--st2:#22D3EE}
#royale-layer[data-stage="1"]{--st:#8B5CF6;--st2:#EC4899}
#royale-layer[data-stage="2"]{--st:#F97316;--st2:#FBBF24}
#royale-layer[data-stage="3"]{--st:#F59E0B;--st2:#FDE68A}
#royale-layer.in-match{background:
  radial-gradient(52% 38% at 50% 46%, color-mix(in srgb, var(--st) 26%, transparent), transparent 72%),
  conic-gradient(from 160deg at 50% -8%, transparent 0deg, color-mix(in srgb, var(--st2) 10%, transparent) 14deg, transparent 26deg, transparent 334deg, color-mix(in srgb, var(--st2) 10%, transparent) 346deg, transparent 360deg),
  radial-gradient(circle at 50% -10%, var(--rl-glow), var(--rl-bg) 55%);background-color:var(--rl-bg);transition:background .6s}
[data-theme=light] #royale-layer.in-match{background:
  radial-gradient(52% 38% at 50% 46%, color-mix(in srgb, var(--st) 14%, transparent), transparent 72%),
  radial-gradient(circle at 50% -10%, var(--rl-glow), var(--rl-bg) 55%);background-color:var(--rl-bg)}
#royale-layer .rl-badge{background:linear-gradient(135deg,var(--st),color-mix(in srgb,var(--st) 70%,#000));box-shadow:0 3px 14px color-mix(in srgb,var(--st) 45%,transparent)}
#royale-layer[data-stage="3"] .rl-badge{color:#2a1800;background:linear-gradient(135deg,#FDE68A,#F59E0B)}
/* round track */
.rl-track{list-style:none;margin:0 auto 8px;padding:0;display:flex;align-items:center;justify-content:center;gap:0;max-width:340px}
.rl-track li{position:relative;flex:1;text-align:center;font:900 10.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--rl-ink3);padding-top:14px}
.rl-track li::before{content:'';position:absolute;top:0;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--rl-surf);border:2px solid var(--rl-line2);z-index:1}
.rl-track li+li::after{content:'';position:absolute;top:5px;right:50%;width:100%;height:2px;background:var(--rl-line2)}
.rl-track li.done{color:var(--rl-ink2)}.rl-track li.done::before{background:var(--st);border-color:var(--st)}.rl-track li.done::after,.rl-track li.on::after{background:var(--st)}
.rl-track li.on{color:var(--rl-ink)}.rl-track li.on::before{width:14px;height:14px;margin-left:-7px;top:-2px;background:var(--st2);border-color:var(--st);box-shadow:0 0 0 4px color-mix(in srgb,var(--st) 25%,transparent)}
.rl-track li:last-child::before{content:'🏆';border:0;background:none;width:auto;height:auto;font-size:12px;top:-3px;margin-left:-7px}
.rl-track li.on:last-child::before{box-shadow:none;filter:drop-shadow(0 0 6px rgba(251,191,36,.9))}
/* versus bar */
.rl-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:8px 10px;border-color:color-mix(in srgb,var(--st) 35%,var(--rl-line));background:linear-gradient(90deg,color-mix(in srgb,var(--rl-me) 10%,var(--rl-surf)),var(--rl-surf) 40%,var(--rl-surf) 60%,color-mix(in srgb,var(--st) 12%,var(--rl-surf)))}
.rl-side{display:flex;align-items:center;gap:8px;min-width:0}.rl-side.opp{justify-content:flex-end;text-align:right}
.rl-side .who{display:flex;flex-direction:column;min-width:0;gap:2px}.rl-side .who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-side .who>span{font-size:11.5px;color:var(--rl-ink3);white-space:nowrap}
.rl-side .rl-av{width:38px;height:38px;border:2px solid var(--rl-me)}.rl-side.opp .rl-av{border-color:var(--st)}
.rl-side.opp #rl-riv-tiles{justify-content:flex-end}#rl-riv-tiles i{width:13px;height:13px;border-radius:3px}
.rl-pips{display:flex;gap:3px}.rl-pips i{width:13px;height:5px;border-radius:3px;background:var(--rl-empty)}.rl-pips i.used{background:var(--rl-me)}.rl-pips i.win{background:var(--correct)}
.rl-vsb{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:400 15px/1 var(--font-heading);color:#fff;background:linear-gradient(135deg,var(--st),var(--st2));box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 25%,transparent),0 6px 16px color-mix(in srgb,var(--st) 40%,transparent);transform:rotate(-8deg)}
#royale-layer[data-stage="3"] .rl-vsb{color:#2a1800}
#rl-you-count:empty{display:none}
@media (max-width:370px){.rl-side .rl-av{width:32px;height:32px}.rl-vsb{width:32px;height:32px;font-size:13px}.rl-side .who b{font-size:13px}#rl-riv-tiles i{width:11px;height:11px}.rl-pips i{width:10px}}
@media (orientation:landscape) and (max-height:520px){.rl-track{display:none}.rl-vs{padding:5px 8px}.rl-side .rl-av,.rl-vsb{width:30px;height:30px}}
/* the looks on the match card (2026-10-31): each player's banner behind their half, their frame on the avatar, their title under the name.
   The title takes the 'Guess N of 6' line and the count shrinks to '2/6' beside the bars, so the card keeps its height on every screen. */
.rl-vs{isolation:isolate;z-index:4}   /* its own layer for the banners, kept above the board: chat bubbles hang below the card over the board */
.rl-bns{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.rl-bns>i{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}.rl-bns>i.me{left:0}.rl-bns>i.opp{right:0}.rl-bns>i:empty{display:none}
.rl-bns>i::after{content:'';position:absolute;inset:0;z-index:1}
.rl-bns>i.me::after{background:linear-gradient(90deg,rgba(4,8,16,.2),rgba(4,8,16,.62))}.rl-bns>i.opp::after{background:linear-gradient(270deg,rgba(4,8,16,.2),rgba(4,8,16,.62))}
.rl-side.has-bn .who>b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}.rl-side.has-bn .who>span,.rl-side.has-bn #rl-riv-count,.rl-side.has-bn .rl-ct{color:#E2E8F0;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.rl-side.has-bn .rl-pips i:not(.used):not(.win),.rl-side.has-bn #rl-riv-tiles i:not([class]),.rl-side.has-bn #rl-riv-tiles i[class='']{background:rgba(255,255,255,.3)}
.rl-side .rl-av.fr{position:relative;overflow:visible;border:0;background:none;width:32px;height:32px;margin:0 4px}
.rl-side .rl-av.fr>img:not(.lookframe){border-radius:50%}.rl-side .rl-av.fr>img.lookframe{width:163%;height:163%;border-radius:0;object-fit:contain}   /* .rl-av img would squeeze it to the avatar */
.rl-prog{display:flex;align-items:center;gap:5px}.rl-side.opp .rl-prog{justify-content:flex-end}
.rl-ct{display:none;font:800 11px/1 var(--font-body);font-style:normal;color:var(--rl-ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl-side.has-tt .rl-ct{display:inline}.rl-side.has-tt #rl-me-count,.rl-side.has-tt #rl-riv-count{display:none}
.rl-side.has-tt .who{gap:1px}.rl-side.has-tt .who>b{line-height:1.15}
.rl-side .who>.rl-ttl{margin:1px 0 0;min-height:0;font-size:8px;max-width:100%}.rl-side.opp .who>.rl-ttl{justify-content:flex-end}
.rl-side .who>.rl-ttl b{font-size:1em}   /* the name's size rule (.who b) must not reach the title's own <b> */
.rl-side .who>.rl-ttl.two .tt{white-space:normal;letter-spacing:0;gap:.25em}.rl-side .who>.rl-ttl.two .tt b{white-space:normal;line-height:1.08;padding:0;text-overflow:clip}.rl-side .who>.rl-ttl.two .tt.plate{padding-top:.3em;padding-bottom:.3em}   /* fitTtl: two lines when one line at 6 px would still be cut */
.rl-side .who>.rl-ttl .tt{letter-spacing:.04em}.rl-side .who>.rl-ttl .tt-ashes{margin-top:.9em}.rl-side .who>.rl-ttl .tt.plate{padding-top:.36em;padding-bottom:.36em}
@media (max-width:640px){.rl-side .who>.rl-ttl{font-size:7.5px}.rl-side .who>.rl-ttl .tt{letter-spacing:.02em}.rl-side .who>.rl-ttl .tt.plate{padding-left:.45em}.rl-side .who>.rl-ttl .tt.plate:not(.tt-bee,.tt-volt,.tt-bookworm,.tt-hard,.tt-whisper,.tt-unbothered){padding-right:.6em}}   /* these titles keep their own room on the right: their stripes, notch or rivets stand there (the Spelling Bee stripes sat on its last letter) */
@media (max-width:400px){.rl-vsb{width:30px;height:30px;font-size:13px}.rl-vs{gap:5px}.rl-side{gap:6px}.rl-side .rl-av.fr{margin:0 3px}.rl-side .who>.rl-ttl{font-size:7px}
  .rl-side.has-tt .rl-pips{gap:2px}.rl-side.has-tt .rl-pips i{width:9px}.rl-side.has-tt #rl-riv-tiles{gap:2px}.rl-side.has-tt #rl-riv-tiles i{width:11px;height:11px}}
@media (max-width:370px){.rl-vs{padding-left:8px;padding-right:8px}.rl-side .rl-av.fr{width:30px;height:30px}.rl-side.has-tt .rl-pips i{width:8px}}
@media (min-width:641px){.rl-side .rl-av.fr{width:36px;height:36px}}
@media (orientation:landscape) and (max-height:520px){.rl-side .rl-av.fr{width:28px;height:28px}}
/* one header row: round pill on the left, round buttons on the right (saves a row for the board) */
#rl-match .rl-mhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px}
#rl-match .rl-ctrls{gap:6px}
#rl-match .rl-ctrls .rl-optmenu{left:auto;right:0;transform:none}
@media (max-width:420px){.rl-bw{display:none}#rl-match .rl-badge{padding:6px 11px;font-size:11px}#rl-match .rl-cbtn{width:36px;height:36px;border-radius:11px}#rl-match .rl-cbtn svg{width:18px;height:18px}}
@media (max-height:700px){.rl-track{display:none}}
@media (max-width:400px){.rl-wrap{padding-left:8px;padding-right:8px}#rl-match .key{min-width:0}}
/* quick chat: its own button in the top bar during a match, and a panel that floats over the screen (the board never moves) */
.rl-chatbtn{background:linear-gradient(180deg,#60A5FA,#2563EB);border-color:transparent;color:#fff;font-size:18px}
#royale-layer:not(.in-match) .rl-chatbtn{display:none}
#rl-chat-sheet{position:fixed;z-index:16;top:calc(env(safe-area-inset-top,0px) + 62px);right:12px;width:min(340px,calc(100vw - 24px));margin:0;padding:10px;border-radius:18px;background:var(--rl-card);border:1px solid var(--rl-line);box-shadow:0 18px 44px var(--rl-shadow);grid-template-columns:repeat(4,minmax(0,1fr));animation:rl-drop2 .18s ease-out}
#rl-chat-sheet:not([hidden]){display:grid}
@keyframes rl-drop2{from{opacity:0;transform:translateY(-6px)}}
@media (orientation:landscape) and (max-height:520px){#rl-chat-sheet{top:calc(env(safe-area-inset-top,0px) + 50px)}}
#rl-bubbles-me{position:absolute;left:8px;top:100%;margin-top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;z-index:3;pointer-events:none}
.rl-bub.mine{align-self:auto}
/* chat back in the round-button row; the panel hangs under it and floats over the board */
.rl-chatw{position:relative}
#royale-layer .rl-chatbtn{background:linear-gradient(180deg,#60A5FA,#2563EB);border-color:transparent;color:#fff;font-size:17px}
#rl-chat-sheet{position:absolute;top:calc(100% + 8px);right:0;left:auto}
@media (orientation:landscape) and (max-height:520px){#rl-chat-sheet{top:calc(100% + 6px)}}
.rl-chatform{grid-column:1/-1;display:flex;gap:6px;margin-top:4px}
.rl-chatform input{flex:1;min-width:0;border:1px solid var(--rl-line);background:var(--rl-surf);color:var(--rl-ink);border-radius:10px;padding:10px 12px;font:700 14px/1.2 var(--font-body)}
.rl-chatform input:focus{outline:2px solid var(--rl-me);outline-offset:1px}
.rl-chatform .rl-btn{padding:10px 14px;font-size:14px;box-shadow:0 3px 0 #1E40AF}
.rl-chatlogin{grid-column:1/-1;text-align:center;font-size:12.5px;font-weight:800;color:var(--rl-me-ink);padding:6px 0 2px}
/* one chat panel (2026-10-31, the same shape as Grand Slam and Rooms): phones = a sheet over the keyboard and the hint row only, so the board
   and the clock stay in view (royale.js sizes it from the hint row and lifts it over the phone's own keyboard); wider = a panel down the right side */
.rl-chat-h{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 0 2px}.rl-chat-h b{font:400 18px/1 var(--font-heading);color:var(--rl-ink)}
.rl-chat-h .rl-x{width:34px;height:34px;font-size:15px}
.rl-chat-feed{display:none}
.rl-chat-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@keyframes rl-rise{from{opacity:0;transform:translateY(24px)}}
@media (max-width:1179px){   /* phones, iPads, small laptops: a sheet over the keyboard, as wide as the game (a side panel would need to move the game) */
  #rl-chat-sheet{position:fixed;z-index:40;left:var(--sl,0px);right:0;top:auto;bottom:var(--lift,0px);width:auto;max-width:560px;margin-inline:auto;max-height:var(--sh,62dvh);overflow-y:auto;overscroll-behavior:contain;align-content:start;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:6px;border-radius:20px 20px 0 0;border-width:1px 0 0;box-shadow:0 -14px 40px var(--rl-shadow);animation:rl-rise .2s ease-out}
  #rl-chat-sheet .rl-chat-row{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}#rl-chat-sheet .rl-chat-row::-webkit-scrollbar{display:none}
  #rl-chat-sheet .rl-chat-row .rl-qc{flex:none;min-height:36px;padding:8px 12px}#rl-chat-sheet .rl-chat-row.emos .rl-qc{width:38px;height:38px;min-height:0;padding:2px}#rl-chat-sheet .rl-chat-row.emos svg{width:32px;height:32px}
  #rl-chat-sheet .rl-chat-h .rl-x{width:30px;height:30px}
  #rl-chat-sheet .rl-chatform{margin-top:0}#rl-chat-sheet .rl-chatform input,#rl-chat-sheet .rl-chatform .rl-btn{padding-top:9px;padding-bottom:9px}
}
@media (min-width:1180px){   /* side panel in the room right of the game; the game never moves */
  #rl-chat-sheet{position:fixed;z-index:40;top:var(--pt,calc(env(safe-area-inset-top,0px) + 64px));right:16px;bottom:16px;left:auto;width:min(360px,calc((100vw - 560px) / 2 - 32px));grid-template-rows:auto minmax(0,1fr);align-content:stretch;padding:12px}
  .rl-chat-feed{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:6px 2px;overflow-y:auto;min-height:0;border-top:1px solid var(--rl-line)}
  .rl-chat-feed li{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start}.rl-chat-feed .rl-av{width:26px;height:26px}
  .rl-chat-feed b{display:block;font-size:12px;color:var(--rl-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rl-chat-feed li.me b{color:var(--rl-me-ink)}
  .rl-chat-feed .tx{margin:2px 0 0;font-size:14px;line-height:1.35;color:var(--rl-ink);overflow-wrap:anywhere}.rl-chat-feed .tx svg{width:42px;height:42px}
  .rl-chat-feed .rl-chat-empty{display:block;margin:auto 0;text-align:center;font-size:13px;color:var(--rl-ink3)}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:1180px){#rl-chat-sheet{top:var(--pt,calc(env(safe-area-inset-top,0px) + 50px));bottom:8px}}
.rl-titles{display:block;margin-top:6px;font-weight:900;color:var(--rl-gold-ink)}
/* player popup (shared with duels) above the full-screen game; no "Challenge" here, it would leave the bracket */
.player-popup-backdrop{z-index:9600!important}#royale-layer ~ .player-popup-backdrop #pp-challenge-btn,.player-popup-backdrop #pp-challenge-btn{display:none!important}
#royale-layer [data-pp]{cursor:pointer}#royale-layer [data-pp]:focus-visible{outline:3px solid #FBBF24;outline-offset:3px;border-radius:12px}
#royale-layer .rl-side[data-pp]:hover .rl-av{transform:scale(1.06)}#royale-layer .rl-side .rl-av{transition:transform .15s}
/* ── result screen after each of your matches (2026-10-21) ── */
#rl-result{max-width:560px;margin:0 auto}
.rr{display:grid;justify-items:center;gap:10px;text-align:center;padding:18px 14px 20px;border-radius:24px;background:var(--rl-card);border:1px solid var(--rl-line);box-shadow:0 18px 50px var(--rl-shadow);animation:rl-land .45s cubic-bezier(.2,1.3,.4,1)}
.rr.win{border-color:color-mix(in srgb,var(--correct) 55%,var(--rl-line))}.rr.lose{border-color:color-mix(in srgb,var(--rl-bad) 40%,var(--rl-line))}
.rr.champ{border:2px solid #F59E0B;background:radial-gradient(120% 60% at 50% 0%,rgba(251,191,36,.22),transparent 60%),var(--rl-card)}
.rr-pill{font:900 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:6px 12px;border-radius:999px;background:linear-gradient(135deg,var(--st),color-mix(in srgb,var(--st) 70%,#000))}
.rr.champ .rr-pill{color:#2a1800;background:linear-gradient(135deg,#FDE68A,#F59E0B)}
.rr-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:var(--rl-surf);border:2px solid var(--rl-line)}
.rr.win .rr-icon{border-color:var(--correct);box-shadow:0 0 24px color-mix(in srgb,var(--correct) 35%,transparent)}
.rr-icon--av{padding:0;overflow:hidden}.rr-icon--av .rl-av{width:100%;height:100%}.rr-icon--av img,.rr-champ img{cursor:pointer}
.rr-champ{position:relative}.rr-champ .rl-av.xl{width:96px;height:96px;box-shadow:0 0 0 4px #FBBF24,0 0 34px rgba(251,191,36,.55)}
.rr-champ::after{content:'🏆';position:absolute;right:-10px;bottom:-6px;font-size:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.rr-title{margin:0;font:400 30px/1.1 var(--font-heading);overflow-wrap:anywhere}.rr.win .rr-title{color:var(--rl-ok)}.rr.lose .rr-title{color:var(--rl-bad)}.rr.champ .rr-title{color:var(--rl-gold-ink)}
.rr-sub{margin:0;color:var(--rl-ink2);font-weight:800}
.rr-path{list-style:none;margin:2px 0;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.rr-path li{font:900 11px/1 var(--font-body);letter-spacing:.04em;padding:6px 9px;border-radius:999px;background:var(--rl-surf);border:1px solid var(--rl-line);color:var(--rl-ink3)}
.rr-path li.ok{color:var(--rl-ok);border-color:color-mix(in srgb,var(--correct) 50%,var(--rl-line))}.rr-path li.out{color:var(--rl-bad);border-color:color-mix(in srgb,var(--rl-bad) 50%,var(--rl-line))}
.rr-word{font-size:15px;color:var(--rl-ink2)}.rr-word b{font:400 22px/1 var(--font-heading);letter-spacing:.08em;color:var(--rl-ink);margin-left:4px}
.rr-def{width:100%;max-width:420px;text-align:left;padding:10px 14px;border-radius:14px;background:var(--rl-surf);border:1px solid var(--rl-line)}
.rr-def p{margin:4px 0 0;color:var(--rl-ink);font-size:14px}.rr-def em{display:block;margin-top:6px;color:var(--rl-ink3);font-size:13px;border-left:3px solid var(--rl-me);padding-left:8px}
.rr-pos{font:800 11px/1 var(--font-body);padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--rl-me) 18%,transparent);color:var(--rl-me-ink)}
.rr-boards{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;width:100%;max-width:440px}
.rr-b{display:grid;justify-items:center;gap:6px;padding:10px 6px;border-radius:16px;background:var(--rl-surf);border:1px solid var(--rl-line);min-width:0}
.rr-b.win{border-color:var(--correct);box-shadow:0 0 0 3px color-mix(in srgb,var(--correct) 18%,transparent)}
.rr-b small{font-size:11.5px;font-weight:800;color:var(--rl-ink2)}
.rr-who{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.rr-who b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-av .rl-av{width:26px;height:26px}
.rr-grid i{width:20px;height:20px;font-size:11px!important}
.rr-vs{font:400 14px/1 var(--font-heading);color:var(--rl-ink3)}
.rr-rew{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.rr-chip{font:900 13px/1 var(--font-body);padding:7px 11px;border-radius:999px;background:var(--rl-surf);border:1px solid var(--rl-line);color:var(--rl-ink)}
.rr-chip.xp{color:var(--rl-me-ink)}.rr-chip.up{color:var(--rl-ok)}.rr-chip.down{color:var(--rl-bad)}
.rr-guest{margin:0;font-size:13.5px;color:var(--rl-ink2)}.rr-guest a{color:var(--rl-me-ink);font-weight:800}
.rr-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px}.rr-act .rl-btn{justify-content:center;text-align:center}
.rr-act.sm .rl-btn{padding:11px 10px;font-size:14px}
.rr-next{width:100%;max-width:420px;display:grid;gap:8px;justify-items:center;padding:12px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--st) 55%,var(--rl-line));background:color-mix(in srgb,var(--st) 8%,var(--rl-surf))}
.rr-next p{margin:0;font-size:13.5px;color:var(--rl-ink2)}.rr-next-k{font:900 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--rl-ink3)}
.rr-next-v{display:flex;align-items:center;gap:8px;font-size:17px}.rr-next-v .rl-av{width:34px;height:34px}.rr-next em{font-style:normal;font-weight:900;color:var(--rl-gold-ink);font-variant-numeric:tabular-nums}
.rr-next .rl-btn{min-width:180px;justify-content:center}
@media (max-width:370px){.rr-grid i{width:17px;height:17px}.rr-title{font-size:26px}}
/* watching: the out panel shrinks to a slim bar */
.rl-panel .short{display:none}.rl-panel.compact{padding:8px 10px}.rl-panel.compact .full{display:none}.rl-panel.compact .short{display:inline;font-weight:800}
.rl-panel.compact #rl-watch,.rl-panel.compact a.rl-btn{display:none}.rl-panel.compact .rl-btn{padding:10px 14px;font-size:14px}
/* compact head-to-head (full boards behind "Show boards") and the offer slot under the result */
.rr-h2h{width:100%;max-width:420px;display:grid;gap:6px}
.rr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'av name sq' 'av st sq';align-items:center;column-gap:10px;padding:8px 12px;border-radius:14px;background:var(--rl-surf);border:1px solid var(--rl-line);text-align:left}
.rr-row .rr-av{grid-area:av}.rr-row b{grid-area:name;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rr-row em{grid-area:st;font-style:normal;font-size:12px;font-weight:800;color:var(--rl-ink3)}
.rr-row.win{border-color:var(--correct)}.rr-row.win em{color:var(--rl-ok)}
.rr-row .rr-av .rl-av{width:32px;height:32px}
.rr-best{grid-area:sq;display:flex;gap:3px}.rr-best i{width:16px;height:16px;border-radius:4px;background:var(--rl-empty)}.rr-best i.correct{background:var(--correct)}.rr-best i.present{background:var(--present)}.rr-best i.absent{background:var(--absent)}
.rr-more summary{cursor:pointer;font-size:12.5px;font-weight:800;color:var(--rl-me-ink);list-style:none;padding:4px}.rr-more summary::-webkit-details-marker{display:none}
.rr-more[open] summary{margin-bottom:6px}.rr-more .rr-b b{font-size:12.5px}
.rr-promo{width:100%;max-width:420px}
.rr-reg{display:grid;gap:8px;padding:14px;border-radius:16px;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--rl-me) 14%,var(--rl-surf)),var(--rl-surf));border:1px solid color-mix(in srgb,var(--rl-me) 40%,var(--rl-line))}
.rr-reg>b{font:400 19px/1.15 var(--font-heading)}.rr-reg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:13px;color:var(--rl-ink2);font-weight:700}
.rr-reg-b{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}.rr-reg-b .rl-btn{justify-content:center;padding:11px 10px;font-size:14px}
.rr-quests{display:grid;gap:8px;padding:12px;border-radius:16px;background:var(--rl-surf);border:1px solid var(--rl-line);text-align:left}
.rr-q{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}.rr-q-i{font-size:20px}
.rr-q-t b{display:block;font-size:13.5px}.rr-q-t small{font-size:11.5px;color:var(--rl-ink3);font-weight:800}
.rr-q-bar{display:block;height:6px;border-radius:9px;background:var(--rl-empty);margin:4px 0 3px;overflow:hidden}.rr-q-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--rl-me),var(--correct))}
.rr-q.done .rr-q-bar i{background:var(--correct)}.rr-claim{padding:9px 12px;font-size:13px}
@media (max-width:370px){.rr-reg ul{grid-template-columns:1fr}.rr-best i{width:13px;height:13px}}
.rr-how{margin:-2px 0 0;font-size:14px;font-weight:800;color:var(--rl-ink2)}
#rr-promo{display:grid;gap:10px}#rr-q:empty,#rr-slam:empty{display:none}
/* Result card fit steps (CardFit, 2026-10-29): Royale and Grand Slam cards stay on one screen from 360×560 up */
.rr.f1 .rr-def,.rr.f1 .gs-ns-clock{display:none}.rr.f1{gap:8px}
.rr.f2 .rr-icon{width:48px;height:48px;font-size:26px}.rr.f2 .rr-champ .rl-av.xl{width:64px;height:64px}.rr.f2 .rr-champ::after{font-size:22px;right:-8px}.rr.f2 .rr-title{font-size:25px}
.rr.f3 .rr-how{font-size:12.5px;margin:0}.rr.f3{padding-top:12px;padding-bottom:12px}.rr.f3 .rr-grid i{width:15px;height:15px}
.rr.f4 .rr-icon{display:none}.rr.f4 .rr-champ .rl-av.xl{width:48px;height:48px}.rr.f4 .rr-champ::after{display:none}.rr.f4 .rr-path li{padding:4px 7px}
.rr.f5 .rr-act.sm.gs-keep,.rr.f5 .rr-how{display:none}.rr.f5 .rr-boards{display:none}
.rr.f6 .rr-sub{display:none}.rr.f6 .gs-nextslam{padding:9px 12px;gap:6px}.rr.f6 .gs-ns-n{font-size:16px}.rr.f6 .rr-title{font-size:22px}
.rr.f7 .rr-champ{display:none}.rr.f7 .rr-rew .rr-chip{padding:5px 9px;font-size:12px}
/* ── Every screen size (2026-11-03). Nothing moves on the sizes where it fitted ── */
/* the hint row stays one row on the smallest phones (responsive.css stacks .powerups at 320, which pushed the keyboard off the screen) */
#rl-match .powerups{flex-direction:row}
@media (max-width:340px){#rl-match .powerup-btn{padding:6px 7px;font-size:11px}}
/* the word ENTER fits its key */
@media (max-width:400px){#rl-match .key--wide{flex:1.6 1 0;max-width:none;font-size:10.5px}}
/* a small phone on its side: the keys have their own narrow column */
@media (orientation:landscape) and (max-height:520px){#rl-match .key{min-width:0}#rl-match .key--wide{min-width:0;max-width:none;flex:1.5 1 0;font-size:10.5px}}
/* the settings menu hangs from the whole button row on phones, so it stays on the screen */
@media (max-width:420px){#rl-match .rl-optw{position:static}#rl-match .rl-mhead{position:relative}}
/* a card taller than a small phone scrolls instead of being cut (margin:auto keeps it centred and its top reachable) */
.rl-modal{overflow-y:auto;overscroll-behavior:contain}.rl-modal>.card{margin:auto}
/* the champion card on a phone on its side: wide and low, the avatar and its trophy beside the words, the three buttons in one row, so all of them are on the screen with no scrolling. A tall screen keeps the stacked card */
@media (orientation:landscape) and (max-height:580px){#rl-champ{padding:8px}
  #rl-champ .card{max-width:560px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'who kick' 'who name' 'who me' 'who guest' 'btn btn';column-gap:16px;row-gap:6px;align-items:center;padding:12px 16px;text-align:left}
  #rl-champ .ry-kicker{grid-area:kick}#rl-champ-who{grid-area:who}#rl-champ-who .rl-av.xl{width:72px;height:72px}
  #rl-champ .card>div:nth-child(2){grid-area:who;align-self:end;justify-self:end;position:relative;z-index:1;font-size:24px!important;line-height:1;margin:0 -6px -2px 0}
  #rl-champ-name{grid-area:name;font-size:22px;line-height:1.15}#rl-champ-me{grid-area:me;font-size:14px}#rl-champ-me .rl-titles{margin-top:2px}#rl-champ-guest{grid-area:guest;font-size:13px}
  #rl-champ .card>div:last-child{grid-area:btn}#rl-champ .rl-btn{padding:11px 14px;font-size:14px}}
/* the same card on the shortest phone standing up: a little less air, so Share ends on the screen and the page does not scroll */
@media (orientation:portrait) and (max-height:600px){#rl-champ{padding:8px}#rl-champ .card{padding:14px;gap:6px}}
/* the top bar stays one line at 320 */
@media (max-width:340px){.rl-top{gap:6px}.rl-top b{font-size:17px;white-space:nowrap}.rl-tools{gap:6px}#rl-gems{white-space:nowrap;padding:7px 9px}.rl-x{flex:none}}
/* the match fits exactly, so it does not drag up and down under a thumb */
#royale-layer.in-match .rl-wrap{padding-bottom:6px}
/* school Chromebook: the tiles get the room (the keys were far taller than a window this short needs) */
@media (max-height:700px) and (min-width:800px){#rl-match{--key-height:34px}#royale-layer.in-match .rl-top{padding-top:6px;padding-bottom:6px}#rl-match .rl-mhead{margin:0 0 4px}}
/* phones: the chat sheet always covers the hint row and the keys, whatever its height (no slivers above it) */
@media (max-width:1179px){#rl-chat-sheet{min-height:min(var(--sh,0px),100dvh)}}
/* room for a finger, same look */
.rl-chat-h .rl-x,.gs-chat-h .rl-x{position:relative}.rl-chat-h .rl-x::after,.gs-chat-h .rl-x::after{content:'';position:absolute;inset:-7px}
.rl-chatlogin,.rr-guest a,#rl-champ-guest a{position:relative}.rl-chatlogin::after,.rr-guest a::after,#rl-champ-guest a::after{content:'';position:absolute;inset:-10px -4px}
.rr-claim,.rl-panel .rl-btn{min-height:38px}
/* ── Second pass (2026-11-03). Each rule changes only what collided, on the sizes where it did ── */
/* the title's card: the bars give way before the count reaches the middle of the card */
.rl-prog{min-width:0}.rl-pips{flex:0 1 auto;min-width:0}.rl-pips i{flex:0 1 auto;min-width:2px}.rl-ct{flex:none}
/* ENTER inside its key at 320 to 345: it takes the width the backspace does not need, the letters stay as they are */
@media (max-width:345px){#rl-match .key--wide[data-key="ENTER"]{flex:2.2 1 0}#rl-match .key--wide[data-key="⌫"]{flex:1 1 0}}
/* chat bubbles beside the board (royale.js placeBubbles); short of room, on the speaker's half of the card */
#rl-bubbles,#rl-bubbles-me{max-width:calc(100% - 16px)}
.on-card>.rl-bub{overflow-wrap:anywhere}.rl-bub.emo{max-width:100%}.rl-bub.emo svg,.rl-bub.emo .emo{max-width:100%}
.tight>.rl-bub:not(.emo){font-size:12px;padding:6px 8px}
#rl-bubbles.on-card,#rl-bubbles-me.on-card{top:50%;margin-top:0;transform:translateY(-50%)}
/* a long message stays on the speaker's half: the other player's name and count stay in view (the words are all in the chat sheet) */
#rl-bubbles.on-card,#rl-bubbles-me.on-card{max-width:calc(50% - 26px)}
.on-card>.rl-bub:not(.emo){font-size:11.5px;line-height:1.15;padding:0 8px;border:solid transparent;border-width:5px 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
/* phones on their side: ENTER takes the width the backspace does not need, so the word stays inside its key; the hint row loses a little padding, not its prices */
@media (orientation:landscape) and (max-height:520px) and (max-width:760px){#rl-match .key--wide[data-key="ENTER"]{flex:1.85 1 0}#rl-match .key--wide[data-key="⌫"]{flex:1.15 1 0}}
@media (orientation:landscape) and (max-height:520px) and (max-width:660px){#rl-match .powerup-btn{padding-left:6px;padding-right:6px}}
@media (orientation:landscape) and (min-height:431px) and (max-height:520px) and (max-width:630px){#rl-match .key--wide[data-key="ENTER"]{flex:2.3 1 0}#rl-match .key--wide[data-key="⌫"]{flex:1 1 0}#rl-match .powerups{gap:4px}#rl-match .powerup-btn{padding-left:4px;padding-right:4px;font-size:11.5px}}
@media (orientation:landscape) and (min-height:431px) and (max-height:520px) and (max-width:590px){#rl-match{grid-template-columns:auto minmax(0,1fr);column-gap:10px}}
@media (orientation:landscape) and (min-height:431px) and (max-height:520px) and (max-width:500px){#rl-match .key--wide[data-key="ENTER"]{font-size:8px;letter-spacing:-.02em}#rl-match .powerup-btn{padding-left:3px;padding-right:3px;font-size:10.5px}}
/* phones on their side (568x320 to 915x412): the board takes the left side from the top, the rest stacks beside it, so nothing runs off the screen, the prices show and the tiles keep their size. Not a short laptop window: those stay as they are */
@media (orientation:landscape) and (max-height:430px) and (max-width:960px){
  #rl-match{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:'board top' 'board riv' 'board chat' 'board line' 'board pw' 'board info' 'board keys';column-gap:12px}
  #royale-layer.in-match .rl-wrap{padding-top:4px;padding-bottom:0}
  #royale-layer.in-match .rl-top{padding-top:3px;padding-bottom:3px}
  #game-grid{align-self:start}
  #rl-you-count{grid-area:line}
  #rl-match .rl-mhead{margin:0 0 2px}#rl-match .rl-cbtn{width:32px;height:32px;border-radius:10px}#rl-match .rl-cbtn svg{width:17px;height:17px}#rl-match .rl-badge{padding:5px 10px;font-size:10.5px}.rl-bw{display:none}
  .rl-rival{margin:2px 0 4px;padding:3px 8px}.rl-vs{gap:5px}.rl-side{gap:6px}.rl-vsb{width:26px;height:26px;font-size:12px}.rl-side .who>.rl-ttl{font-size:7px}.rl-side .who b{font-size:13px}
  #rl-match .powerup-btn{padding-top:4px;padding-bottom:4px}#keyboard{margin-top:4px}
  #rl-match .key--wide[data-key="ENTER"]{flex:1.85 1 0}#rl-match .key--wide[data-key="⌫"]{flex:1.15 1 0}
}