/* 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}}

/* rooms.css */
/* WordlyPlay — Wordle Rooms: room cards (Store, settings page), the settings page (/rooms/new), /join, and the room (/r/CODE).
   Light/dark from the site tokens; the room itself is always the dark game stage (like Battle Royale and the Grand Slam). */
.rm-wrap{max-width:560px;margin:0 auto;padding:14px 16px 40px}
.rm-k{font:900 11px/1 var(--font-body,'Nunito');letter-spacing:.09em;text-transform:uppercase;color:var(--text-tertiary,#94A3B8)}
.rm-h1{font:400 26px/1.15 var(--font-heading,'Fredoka One');margin:4px 0 4px;text-wrap:balance;color:var(--text-primary)}
.rm-lede{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.45}
.rm-panel{background:var(--bg-card,rgba(255,255,255,.7));border:1px solid var(--border-color,rgba(148,163,184,.3));border-radius:18px;padding:12px 14px}

/* ---- room cards (Store tab, create page) */
.rm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rm-card{position:relative;border:0;border-radius:18px;padding:14px 12px 12px;color:#fff;text-align:left;font:inherit;cursor:pointer;overflow:hidden;
  box-shadow:0 5px 0 var(--sh),0 10px 22px rgba(15,23,42,.18);transition:transform .15s}
.rm-card:hover{transform:translateY(-2px)}.rm-card:active{transform:translateY(2px);box-shadow:0 2px 0 var(--sh)}
.rm-card:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.rm-card .ic{display:block;font-size:28px;line-height:1;animation:rmBob 3s ease-in-out infinite}
.rm-card b{display:block;font:400 18px/1.1 var(--font-heading,'Fredoka One');margin-top:8px}.rm-card small{display:block;opacity:.92;font-size:12px;font-weight:700;line-height:1.3}
.rm-card .pr{display:inline-flex;align-items:center;gap:4px;margin-top:10px;background:rgba(255,255,255,.22);border-radius:999px;padding:3px 10px;font-weight:900;font-size:13px}
.rm-card .own{position:absolute;top:9px;right:9px;background:#fff;color:#0F172A;border-radius:999px;font:900 11px var(--font-body,'Nunito');padding:2px 8px}
.rm-card .soon{position:absolute;top:9px;right:9px;background:rgba(0,0,0,.3);border-radius:999px;font:900 10.5px var(--font-body);padding:2px 8px}
.rm-card[disabled]{cursor:default;opacity:.65}.rm-card[disabled]:hover{transform:none}
.rm-card::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%);transform:translateX(-60%);animation:rmShine 4.5s ease-in-out infinite;pointer-events:none}
.rm-card.k-single{background:linear-gradient(150deg,#34D399,#10B981);--sh:#047857}.rm-card.k-h2{background:linear-gradient(150deg,#60A5FA,#3B82F6);--sh:#1D4ED8}
.rm-card.k-day{background:linear-gradient(150deg,#FBBF24,#F59E0B);--sh:#B45309}.rm-card.k-week{background:linear-gradient(150deg,#A78BFA,#8B5CF6);--sh:#6D28D9}
.rm-card.k-tourney{background:linear-gradient(150deg,#FB7185,#E11D48);--sh:#9F1239}
.rm-free{display:flex;gap:10px;align-items:center;border-radius:16px;padding:10px 12px;font-size:14px;font-weight:700;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.45);color:var(--text-primary)}
.rm-free i{font-style:normal;font-size:24px}
.rm-btn{display:block;width:100%;border:0;border-radius:16px;padding:14px;font:400 19px/1 var(--font-heading,'Fredoka One');color:#fff;cursor:pointer;text-align:center;text-decoration:none;
  background:linear-gradient(180deg,#60A5FA,#3B82F6);box-shadow:0 5px 0 #1D4ED8;transition:transform .1s}
.rm-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1D4ED8}.rm-btn[disabled]{opacity:.55;cursor:default}
.rm-btn small{display:block;font:800 12px var(--font-body,'Nunito');opacity:.9;margin-top:4px}
.rm-btn.green{background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 5px 0 #15803D}.rm-btn.gold{background:linear-gradient(180deg,#FCD34D,#F59E0B);color:#3b2300;box-shadow:0 5px 0 #B45309}
.rm-btn.ghost{background:transparent;color:var(--text-primary);border:2px solid var(--border-color,rgba(148,163,184,.4));box-shadow:none;font-size:16px;padding:11px}
.rm-btn:focus-visible,.rm-chip:focus-visible,.rm-mode:focus-visible,.rm-preset:focus-visible,.rm-step button:focus-visible,.rm-sw:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.rm-sheet{position:fixed;inset:0;z-index:3000;display:grid;place-items:end center;background:rgba(15,23,42,.55)}
.rm-sheet[hidden]{display:none}
.rm-sheet .in{width:min(520px,100%);background:var(--bg-secondary,#EFF6FF);color:var(--text-primary);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;animation:rmUp .25s ease-out}
.rm-sheet h3{margin:0;font:400 21px var(--font-heading,'Fredoka One')}

/* ---- the settings page: three short steps that fit one phone screen */
.rm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 12px}
.rm-steps button{border:0;background:none;padding:0;cursor:pointer;color:var(--text-tertiary);font:800 12px var(--font-body,'Nunito');text-align:left}
.rm-steps button i{display:block;height:5px;border-radius:3px;background:rgba(148,163,184,.3);margin-bottom:6px}
.rm-steps button.on{color:var(--text-primary)}.rm-steps button.on i,.rm-steps button.done i{background:linear-gradient(90deg,#3B82F6,#60A5FA)}
.rm-pane{display:grid;gap:12px;animation:rmIn .25s ease-out}.rm-pane[hidden]{display:none}
.rm-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rm-preset{border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);border-radius:14px;padding:9px 10px;font:800 13.5px var(--font-body,'Nunito');cursor:pointer;text-align:left;display:flex;gap:8px;align-items:center}
.rm-preset i{font-style:normal;font-size:20px}.rm-preset.on{border-color:#3B82F6;background:rgba(59,130,246,.12)}
.rm-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rm-mode{position:relative;border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);border-radius:16px;padding:10px 8px;text-align:center;cursor:pointer;font:inherit;transition:transform .12s}
.rm-mode i{display:block;font-style:normal;font-size:24px}.rm-mode b{display:block;font:400 16px var(--font-heading,'Fredoka One');margin-top:2px}.rm-mode small{display:block;color:var(--text-secondary);font-size:11.5px;line-height:1.25;font-weight:700}
.rm-mode.on{border-color:#3B82F6;background:rgba(59,130,246,.12);transform:translateY(-2px)}.rm-mode[disabled]{opacity:.5;cursor:default}
.rm-mode .soon{position:absolute;top:6px;right:6px;font:900 10px var(--font-body);background:rgba(148,163,184,.25);border-radius:999px;padding:1px 6px}
.rm-set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(148,163,184,.3)}.rm-set:last-child{border-bottom:0}
.rm-set>div:first-child>span{font-weight:800}.rm-set small{display:block;color:var(--text-secondary);font-size:12px;font-weight:700}
.rm-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rm-chip{border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);border-radius:999px;padding:5px 12px;font:800 13px var(--font-body,'Nunito');cursor:pointer}
.rm-chip.on{background:#2563EB;border-color:#2563EB;color:#fff}
.rm-step{display:flex;align-items:center;gap:6px}.rm-step button{width:32px;height:32px;border-radius:10px;border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);font:900 17px var(--font-body);cursor:pointer}
.rm-step b{min-width:58px;text-align:center;font-variant-numeric:tabular-nums}
.rm-sw{width:46px;height:26px;border-radius:13px;background:#CBD5E1;border:0;position:relative;cursor:pointer;transition:background .2s;flex:none}
.rm-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}.rm-sw[aria-checked="true"]{background:#22C55E}.rm-sw[aria-checked="true"]::after{left:23px}
.rm-words{display:grid;gap:6px}.rm-word{display:grid;grid-template-columns:110px 1fr 32px;gap:6px}
.rm-in{width:100%;min-width:0;border:2px solid rgba(148,163,184,.35);border-radius:12px;padding:9px 10px;background:var(--bg-input,#fff);color:var(--text-primary);font:800 15px var(--font-body,'Nunito')}
.rm-in:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.rm-word .w{text-transform:uppercase;letter-spacing:.06em}.rm-x{border:0;background:none;color:var(--text-tertiary);font-size:18px;cursor:pointer}
.rm-note{font-size:12.5px;color:var(--text-secondary);font-weight:700}.rm-err{color:#EF4444;font-weight:800;font-size:13px;min-height:1em}
.rm-sum{display:flex;gap:8px;align-items:center;background:linear-gradient(135deg,#1E3A8A,#3B82F6);color:#fff;border-radius:16px;padding:10px 12px;font-size:13.5px;font-weight:800}.rm-sum i{font-style:normal;font-size:22px}
.rm-use{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800}.rm-use button{border:0;background:none;color:#3B82F6;font:900 13px var(--font-body);cursor:pointer}
.rm-nav{display:grid;grid-template-columns:auto 1fr;gap:8px}

/* ---- /join */
.rm-code{display:flex;gap:6px;justify-content:center}
.rm-code input{width:46px;height:56px;border-radius:12px;border:2px solid rgba(148,163,184,.4);background:var(--bg-input,#fff);color:var(--text-primary);text-align:center;font:400 28px var(--font-heading,'Fredoka One');text-transform:uppercase;padding:0}
.rm-code input:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
@media (max-width:360px){.rm-code input{width:40px;height:50px;font-size:24px}}
.rm-name{display:flex;gap:8px}.rm-dice{border:2px solid rgba(148,163,184,.4);background:var(--bg-card);border-radius:14px;width:54px;font-size:24px;cursor:pointer;flex:none}.rm-dice.roll{animation:rmRoll .5s ease}
.rm-myrooms{display:grid;gap:8px}.rm-myroom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:var(--bg-card);border:1px solid rgba(148,163,184,.3);color:var(--text-primary);text-decoration:none;font-weight:800}
.rm-myroom small{display:block;color:var(--text-secondary);font-weight:700;font-size:12px}.rm-myroom code{font:400 18px var(--font-heading);letter-spacing:.12em;color:#22C55E}

/* ---- the room (/r/CODE): always the dark game stage */
body.rm-room{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(120% 70% at 50% 0%,#1E3A8A 0%,#0F172A 62%) fixed;color:#F8FAFC;font-family:var(--font-body,'Nunito'),sans-serif}
.rm-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px);padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(15,23,42,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(51,65,85,.6)}
.rm-top .logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#60A5FA,#3B82F6);color:#fff;font:400 16px var(--font-heading);box-shadow:0 3px 0 #1D4ED8;text-decoration:none;flex:none}
.rm-top .t{flex:1;min-width:0}.rm-top .t b{display:block;font:400 17px/1.1 var(--font-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm-top .t small{color:#94A3B8;font-weight:800;font-size:12px}
.rm-left{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,.15);color:#86EFAC;border:1px solid rgba(34,197,94,.35);border-radius:999px;padding:3px 10px;font-weight:900;font-size:12.5px;white-space:nowrap}
.rm-left.low{background:rgba(245,158,11,.15);color:#FCD34D;border-color:rgba(245,158,11,.4)}
.rm-iconbtn{width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font-size:16px;cursor:pointer;flex:none;display:grid;place-items:center;text-decoration:none}
.rm-main{max-width:560px;margin:0 auto;padding:14px 14px 28px;display:grid;gap:12px}
.rm-scr[hidden]{display:none}.rm-scr{display:grid;gap:12px;animation:rmIn .3s ease-out}
.rm-stagepanel{background:rgba(30,41,59,.72);border:1px solid #334155;border-radius:18px;padding:12px}
.rm-room .rm-k{color:#93C5FD}
.rm-codebox{text-align:center;display:grid;gap:8px;min-height:150px;align-content:start}
.rm-tiles{display:flex;justify-content:center;gap:6px;perspective:600px;min-height:56px}
.rm-tile{width:46px;height:54px;border-radius:11px;display:grid;place-items:center;font:400 29px var(--font-heading);color:#fff;background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 4px 0 #15803D;transform:rotateX(90deg);opacity:0}
.rm-tile.in{animation:rmFlip .55s cubic-bezier(.3,1.4,.5,1) forwards}
.rm-share{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rm-share button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:6px 12px;font:800 13px var(--font-body);cursor:pointer}
.rm-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px 6px;min-height:84px}
.rm-pl{display:flex;flex-direction:column;align-items:center;gap:3px;animation:rmJoin .6s cubic-bezier(.3,1.6,.5,1) both;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:default}
.rm-pl.kick{cursor:pointer}
.rm-av{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#334155,#1E293B);border:3px solid #475569;position:relative;overflow:visible}
.rm-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rm-av.host{border-color:#FBBF24}.rm-av.host::after{content:"👑";position:absolute;top:-13px;font-size:15px}.rm-av.me{border-color:#60A5FA}.rm-av.off{opacity:.45}
.rm-pl small{font-size:12px;font-weight:800;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#E2E8F0}
.rm-pl.wave .rm-av{animation:rmWave .9s ease-in-out 2}
.rm-count{font:400 16px var(--font-heading);color:#E2E8F0}.rm-count b{color:#4ADE80}
.rm-hostbar{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.rm-hostbar .rm-iconbtn{width:52px;height:auto;border-radius:16px}
.rm-pulse{animation:rmPulse 1.6s ease-in-out infinite}
.rm-wait{text-align:center;color:#CBD5E1;font-weight:800}.rm-dots::after{content:"";animation:rmDots 1.4s steps(4) infinite}
.rm-open{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 45%,#2563EB,#0F172A 70%);color:#fff}
.rm-open .door{font-size:76px;animation:rmPop .7s cubic-bezier(.3,1.6,.5,1) both}.rm-open h2{font:400 28px var(--font-heading);margin:8px 0 0;animation:rmRise .6s .25s both}.rm-open p{margin:4px 0 0;color:#BFDBFE;font-weight:800;animation:rmRise .6s .4s both}
.rm-open.out{animation:rmFade .45s ease forwards}.rm-open[hidden]{display:none}
.rm-conf{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}.rm-conf i{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;animation:rmFall 1.9s ease-in forwards}
.rm-cd{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:rgba(15,23,42,.97)}.rm-cd[hidden]{display:none}.rm-cd b{font:400 120px/1 var(--font-heading);color:#FCD34D;animation:rmZoom .9s ease-out both}
.rm-cd small{display:block;text-align:center;font:800 15px var(--font-body);color:#BFDBFE;margin-top:8px}
/* play */
.rm-playhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rm-wordno{font:400 17px var(--font-heading)}.rm-wordno small{display:block;font:800 12px var(--font-body);color:#94A3B8}
.rm-timer{font:400 26px var(--font-heading);font-variant-numeric:tabular-nums;color:#FCD34D;min-width:70px;text-align:right}.rm-timer.low{color:#F87171;animation:rmPulseT 1s ease-in-out infinite}
.rm-clue{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#FDE68A;border-radius:12px;padding:7px 10px;font-weight:800;font-size:14px;text-align:center}
.rm-room .grid{margin:0 auto}
.rm-mini{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rm-mini span{flex:none;display:inline-flex;align-items:center;gap:5px;background:rgba(30,41,59,.8);border:1px solid #334155;border-radius:999px;padding:3px 9px 3px 4px;font-size:12px;font-weight:800}
.rm-mini span img{width:20px;height:20px;border-radius:50%}.rm-mini span.me{border-color:#60A5FA}.rm-mini em{font-style:normal;color:#86EFAC}
.rm-room .keyboard{margin-top:4px}
/* between words / live board */
.rm-reveal{text-align:center}.rm-reveal .rm-tiles .rm-tile{width:42px;height:50px;font-size:26px}
.rm-board{display:grid;gap:6px}
.rm-brow{display:grid;grid-template-columns:22px 32px 1fr auto;align-items:center;gap:8px;background:rgba(30,41,59,.72);border:1px solid #334155;border-radius:12px;padding:6px 10px;font-weight:800}
.rm-brow.me{border-color:#60A5FA}.rm-brow .r{color:#94A3B8;text-align:center}.rm-brow img{width:30px;height:30px;border-radius:50%}
.rm-brow .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm-brow .dots{display:flex;gap:3px;margin-top:2px}
.rm-brow .dots i{width:12px;height:12px;border-radius:3px;background:#334155}.rm-brow .dots i.s{background:#22C55E}.rm-brow .dots i.f{background:#64748B}.rm-brow .dots i.p{background:#F59E0B;animation:rmBlink 1.2s ease-in-out infinite}
.rm-brow .pts{font:400 18px var(--font-heading);color:#FCD34D;font-variant-numeric:tabular-nums}
/* results */
.rm-podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;height:230px}.rm-podium:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr;max-width:66%;margin-inline:auto}
.rm-pod{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}.rm-pod .rm-av{animation:rmPop .6s cubic-bezier(.3,1.6,.5,1) both}
.rm-pod .bar{width:100%;border-radius:14px 14px 0 0;display:grid;place-items:start center;padding-top:8px;font:400 26px var(--font-heading);color:#fff;transform-origin:bottom;animation:rmGrow .8s cubic-bezier(.3,1.2,.5,1) both}
.rm-pod.p1 .bar{height:120px;background:linear-gradient(180deg,#FCD34D,#F59E0B)}.rm-pod.p2 .bar{height:86px;background:linear-gradient(180deg,#CBD5E1,#94A3B8)}.rm-pod.p3 .bar{height:62px;background:linear-gradient(180deg,#FDBA74,#EA580C)}
.rm-pod small{font-weight:900;font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm-pod em{font-style:normal;color:#93C5FD;font-size:12px;font-weight:800}
.rm-win{font:400 26px var(--font-heading);color:#FCD34D;text-align:center;margin:0}
.rm-next{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rm-next a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff;background:rgba(30,41,59,.8);border:1px solid #334155;border-radius:14px;padding:10px 12px;font-weight:900}
.rm-next a small{color:#94A3B8;font-weight:700;font-size:12px}.rm-next a.big{grid-column:1/-1;background:linear-gradient(135deg,#15803D,#22C55E);border-color:#22C55E}.rm-next a.big small{color:#DCFCE7}
.rm-toast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translate(-50%,-10px);opacity:0;z-index:70;background:#0F172A;border:1px solid #334155;color:#fff;padding:9px 14px;border-radius:12px;font-weight:800;transition:.2s;max-width:calc(100vw - 32px);text-align:center;pointer-events:none}
.rm-toast.on{opacity:1;transform:translate(-50%,0)}
body:has(#s-wait:not([hidden])) .rm-toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}   /* the wait screen: below the player list, clear of "Word 1 of 2" and "Done! Waiting" */
@media (orientation:landscape) and (max-height:480px){body:has(#s-wait:not([hidden])) .rm-toast{bottom:calc(8px + env(safe-area-inset-bottom,0px))}}   /* short landscape: the same, the list ends lower there */
.rm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@keyframes rmBob{50%{transform:translateY(-4px) rotate(-6deg)}}@keyframes rmShine{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@keyframes rmUp{from{transform:translateY(40px);opacity:0}}@keyframes rmIn{from{transform:translateY(8px);opacity:0}}@keyframes rmRoll{50%{transform:rotate(200deg) scale(1.2)}}
@keyframes rmFlip{to{transform:none;opacity:1}}@keyframes rmJoin{from{transform:translateY(18px) scale(.4);opacity:0}}@keyframes rmWave{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes rmPulse{50%{transform:scale(1.03);box-shadow:0 5px 0 #15803D,0 0 0 8px rgba(34,197,94,.2)}}@keyframes rmPop{from{transform:scale(.2);opacity:0}}@keyframes rmRise{from{transform:translateY(12px);opacity:0}}
@keyframes rmFade{to{opacity:0;visibility:hidden}}@keyframes rmFall{to{transform:translateY(105vh) rotate(540deg)}}@keyframes rmZoom{from{transform:scale(2.2);opacity:0}}@keyframes rmGrow{from{transform:scaleY(0)}}
@keyframes rmDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@keyframes rmBlink{50%{opacity:.45}}@keyframes rmPulseT{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.rm-card .ic,.rm-card::after,.rm-pl,.rm-pl.wave .rm-av,.rm-pulse,.rm-open .door,.rm-open h2,.rm-open p,.rm-pod .bar,.rm-pod .rm-av,.rm-scr,.rm-pane,.rm-brow .dots i.p,.rm-timer.low{animation:none!important}.rm-tile{transform:none;opacity:1}}
/* hidden always wins inside the rooms pages (several blocks here set display:grid/flex) */
.rm-room [hidden],.rm-wrap [hidden],.rm-sheet [hidden]{display:none!important}
/* the board and keyboard always fit the phone: keys share the row, tiles follow --tile-size from room.js */
.rm-room #s-play{justify-items:center}.rm-room #s-play>*{width:100%;min-width:0}
.rm-room .keyboard{padding:0;max-width:520px}.rm-room .keyboard__row{gap:5px}
.rm-room .key{flex:1 1 0;min-width:0;padding:0;height:var(--key-height,52px);font-size:clamp(13px,3.6vw,18px)}.rm-room .key--wide{flex:1.5 1 0;font-size:clamp(10px,2.8vw,14px)}
.rm-room .grid{width:auto!important}
@media (max-height:700px){.rm-room{--key-height:44px}}

/* QR code + "or go to …/join" under the room code */
.rm-qr{width:112px;height:112px;margin:2px auto 0;background:#fff;border-radius:12px;padding:6px}.rm-qr svg{width:100%;height:100%;display:block}
.rm-joinat{margin:0;color:#94A3B8;font-size:12.5px;font-weight:700}.rm-joinat b{color:#E2E8F0}
/* a teacher's class room on a big screen (projector): code + QR on the left, the students on the right; bigger everything */
@media (min-width:900px){
  body.rm-proj .rm-main{max-width:1180px}
  body.rm-proj #s-lobby{grid-template-columns:380px 1fr;align-items:start;column-gap:28px}
  body.rm-proj #s-lobby .rm-codebox{grid-row:span 3}
  body.rm-proj .rm-tile{width:52px;height:62px;font-size:34px}
  body.rm-proj .rm-qr{width:220px;height:220px}
  body.rm-proj .rm-joinat{font-size:16px}
  body.rm-proj .rm-players{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  body.rm-proj #s-wait .rm-board{grid-template-columns:repeat(2,1fr)}
}

/* room chat: a button with an unread badge, a panel (bottom sheet on phones, side panel on wide screens), reactions float up */
.rm-chatbtn{position:relative}
.rm-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:#EF4444;color:#fff;font:900 12px/20px var(--font-body);padding:0 5px}
.rm-chat{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:62vh;display:flex;flex-direction:column;gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));
  background:#0F172A;border-top:1px solid #334155;border-radius:20px 20px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.45);animation:rmUp .25s ease-out;color:#F8FAFC}
@media (min-width:1180px){.rm-chat{left:auto;right:16px;top:calc(env(safe-area-inset-top,0px) + 64px);bottom:16px;width:min(360px,calc((100vw - 560px) / 2 - 32px));max-height:none;border:1px solid #334155;border-radius:20px}}   /* Chromebook (2026-10-31): a panel down the right side, like Royale and Grand Slam */
.rm-chat-h{display:flex;align-items:center;justify-content:space-between}.rm-chat-h b{font:400 18px var(--font-heading)}
.rm-chat-feed{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:90px;display:flex;flex-direction:column;gap:6px}
.rm-chat-feed li{display:flex;gap:7px;align-items:flex-start;font-size:14px;animation:rmIn .25s ease-out}.rm-chat-feed img{width:24px;height:24px;border-radius:50%;flex:none}
.rm-chat-feed .msg{background:#1E293B;border:1px solid #334155;border-radius:4px 14px 14px 14px;padding:5px 10px;max-width:85%;overflow-wrap:anywhere}.rm-chat-feed .msg b{display:block;font-size:11.5px;color:#93C5FD}
.rm-chat-feed li.me{flex-direction:row-reverse}.rm-chat-feed li.me .msg{background:#1D4ED8;border-color:#3B82F6;border-radius:14px 4px 14px 14px}
.rm-chat-feed li.react .msg{background:none;border:0;font-size:22px;padding:0 4px}
.rm-chat-reacts{display:flex;gap:4px;flex-wrap:wrap}.rm-chat-reacts button{border:1px solid #334155;background:#1E293B;border-radius:12px;font-size:20px;padding:4px 8px;cursor:pointer}
.rm-chat-quick{display:flex;flex-wrap:wrap;gap:6px}.rm-chat-quick button{flex:none;border:1px solid #334155;background:#1E293B;color:#E2E8F0;border-radius:999px;padding:6px 11px;font:800 13px var(--font-body);cursor:pointer}
.rm-chat-form{display:flex;gap:6px}.rm-chat-form .rm-in{background:#1E293B;border-color:#334155;color:#fff}
.rm-chat-note{margin:0;font-size:12px;color:#94A3B8}.rm-chat-note a{color:#86EFAC}
.rm-bursts{position:fixed;inset:0;pointer-events:none;z-index:46;overflow:hidden}.rm-bursts span{position:absolute;bottom:80px;font-size:34px;animation:rmFloat 2.6s ease-out forwards}
@keyframes rmFloat{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-40px) scale(1.1)}100%{transform:translateY(-55vh) scale(1);opacity:0}}
.rm-bubble{position:fixed;right:12px;top:calc(62px + env(safe-area-inset-top,0px));z-index:44;display:flex;gap:6px;align-items:center;background:#1E293B;border:1px solid #334155;border-radius:999px;padding:4px 12px 4px 4px;color:#fff;font-size:13px;font-weight:800;max-width:calc(100vw - 32px);animation:rmIn .25s ease-out;pointer-events:none}
.rm-bubble{max-width:calc(100vw - 100px)}.rm-bubble img{width:22px;height:22px;border-radius:50%}.rm-bubble span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.rm-bursts span{animation:none;display:none}}

/* small phones: the room header stays one line (the code shows in the subtitle only) */
@media (max-width:420px){.rm-top{gap:8px;padding-left:10px;padding-right:10px}.rm-top .t b{font-size:15px}.rm-top .t small .rm-sub-word{display:none}.rm-left{font-size:11.5px;padding:3px 8px}}

/* the room code fits a 320 px phone (6 tiles) */
.rm-tile{width:min(46px,calc((100vw - 64px) / 6));height:auto;aspect-ratio:46/54}
@media (max-width:360px){.rm-tile{font-size:24px}.rm-top .rm-left{display:none}}
/* settings rows whose chips need the whole width */
.rm-set.stack{flex-direction:column;align-items:flex-start}
.rm-card .ic{display:inline-block}
/* light mode: labels and white-on-colour text stay readable */
:root[data-theme="light"] .rm-k{color:#64748B}
:root[data-theme="light"] .rm-room .rm-k{color:#93C5FD}
:root[data-theme="light"] .rm-room .rm-name .rm-in{background:rgba(30,58,138,.3);color:#F1F5F9}:root[data-theme="light"] .rm-room .rm-dice{background:rgba(30,58,138,.25)}   /* the join block on the screen that stays dark: the dark values of --bg-input, --text-primary and --bg-card (the settings sheets stay light) */
.rm-card b,.rm-card small,.rm-card .pr{text-shadow:0 1px 2px rgba(0,0,0,.25)}
.rm-card.k-day{background:linear-gradient(150deg,#F59E0B,#D97706)}
/* ---- /join: one page for every code */
.jn{display:grid;gap:18px}
.jn-icons{display:flex;justify-content:center;gap:10px;font-size:34px;height:52px;align-items:center}
.jn-icons span{display:inline-block;animation:rmBob 3s ease-in-out infinite}.jn-icons span:nth-child(2){animation-delay:.4s;font-size:42px}.jn-icons span:nth-child(3){animation-delay:.8s;font-size:42px}.jn-icons span:nth-child(4){animation-delay:1.2s}
.jn-tip{margin:-4px 0 0;text-align:center;color:var(--text-secondary);font-size:13px;font-weight:700}
.jn-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;color:#fff;background:linear-gradient(150deg,#34D399,#059669);box-shadow:0 5px 0 #047857;animation:jnIn .35s cubic-bezier(.3,1.4,.5,1)}
.jn-card>i{font-style:normal;font-size:34px;flex:none}.jn-card div{min-width:0;display:grid;gap:2px}.jn-card .rm-k{color:rgba(255,255,255,.85)!important}
.jn-card b{font:400 19px/1.15 var(--font-heading);overflow-wrap:anywhere}.jn-card small{font-weight:700;font-size:12.5px;opacity:.95}
.jn-card.t-tournament{background:linear-gradient(150deg,#F59E0B,#D97706);box-shadow:0 5px 0 #92400E}.jn-card.t-class{background:linear-gradient(150deg,#F472B6,#DB2777);box-shadow:0 5px 0 #9D174D}
.jn-card.t-battle{background:linear-gradient(150deg,#FB7185,#E11D48);box-shadow:0 5px 0 #9F1239}.jn-card.t-invite{background:linear-gradient(150deg,#A78BFA,#7C3AED);box-shadow:0 5px 0 #5B21B6}
.jn-card.shut{filter:grayscale(.85);opacity:.8}
.jn-card.wait{background:var(--bg-card);color:var(--text-secondary);box-shadow:none;border:1px dashed rgba(148,163,184,.5);font-weight:800;justify-content:center}
.jn-card b,.jn-card small{text-shadow:0 1px 2px rgba(0,0,0,.25)}
.jn-spin{width:16px;height:16px;border-radius:50%;border:3px solid rgba(148,163,184,.4);border-top-color:#3B82F6;animation:jnSpin .8s linear infinite}
.jn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.jn-kind{display:grid;gap:2px;padding:12px;border-radius:16px;text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:1px solid rgba(148,163,184,.3);transition:transform .2s}
.jn-kind:hover{transform:translateY(-2px)}.jn-kind i{font-style:normal;font-size:24px}.jn-kind b{font:400 16px var(--font-heading)}.jn-kind span{color:var(--text-secondary);font-size:12.5px;font-weight:700;line-height:1.35}
.jn-make{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jn-make .rm-btn{font-size:15px}
@media (max-width:360px){.jn-make{grid-template-columns:1fr}}
@keyframes jnIn{from{transform:translateY(10px) scale(.97);opacity:0}}@keyframes jnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.jn-icons span,.jn-card{animation:none}}
/* deeper card colours so white text reads well in both themes */
.rm-card.k-single{background:linear-gradient(150deg,#10B981,#047857)}.rm-card.k-h2{background:linear-gradient(150deg,#3B82F6,#1D4ED8)}
.rm-card.k-week{background:linear-gradient(150deg,#8B5CF6,#6D28D9)}.rm-card.k-tourney{background:linear-gradient(150deg,#F43F5E,#BE123C)}
.rm-card.k-day{background:linear-gradient(150deg,#D97706,#B45309)}
.rm-card .pr{background:rgba(15,23,42,.28)}

/* ---- team play (groups / class vs class); every team carries its colour in --tc */
.rm-tp{background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.25);border-radius:20px;padding:14px;display:grid;gap:12px}
.tp-h b{display:block;font:400 19px var(--font-heading);color:#fff}.tp-h small{color:#94A3B8;font-weight:700;font-size:12.5px}
.tp-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tp-opt{display:grid;gap:2px;justify-items:center;text-align:center;padding:12px 6px;border-radius:16px;border:2px solid #334155;background:rgba(255,255,255,.04);color:#E2E8F0;cursor:pointer;font:inherit;transition:transform .15s,border-color .2s,background .2s}
.tp-opt i{font-style:normal;font-size:28px;line-height:1.1}.tp-opt b{font:400 14.5px/1.15 var(--font-heading)}.tp-opt span{font-size:11px;font-weight:700;color:#94A3B8;line-height:1.25}
.tp-opt:hover:not(:disabled){transform:translateY(-2px)}.tp-opt.on{border-color:#3B82F6;background:linear-gradient(160deg,rgba(59,130,246,.3),rgba(59,130,246,.08));box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.tp-opt.on i{animation:rmBob 2.4s ease-in-out infinite}.tp-opt:disabled{opacity:.4;cursor:not-allowed}
.tp-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.tp-chips{display:flex;flex-wrap:wrap;gap:6px}
.tp-chips button{border:2px solid #475569;background:transparent;color:#E2E8F0;border-radius:999px;padding:7px 13px;font:800 13px var(--font-body);cursor:pointer}.tp-chips button.on{background:#3B82F6;border-color:#3B82F6;color:#fff}
.tp-note{color:#93C5FD;font-size:12.5px;font-weight:800}.tp-lock{display:flex;gap:8px;align-items:center;color:#CBD5E1;font-weight:700;font-size:13px;cursor:pointer}
.tp-tools{display:flex;gap:8px;flex-wrap:wrap}.tp-tools button{border:1px solid #475569;background:rgba(255,255,255,.06);color:#E2E8F0;border-radius:12px;padding:8px 12px;font:800 13px var(--font-body);cursor:pointer}
.tp-names{display:grid;gap:8px}.tp-names label{display:flex;gap:8px;align-items:center;border-left:5px solid var(--tc);padding-left:8px}.tp-names i{font-style:normal;font-size:20px}
.tp-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-side{display:grid;justify-items:center;gap:4px;padding:16px 8px;border-radius:18px;border:3px solid var(--tc);background:color-mix(in srgb,var(--tc) 18%,transparent);color:#fff;cursor:pointer;font:inherit;transition:transform .15s}
.tp-side i{font-style:normal;font-size:38px}.tp-side b{font:400 19px var(--font-heading)}.tp-side span{font-size:12px;font-weight:800;opacity:.9}
.tp-side:hover{transform:translateY(-3px)}.tp-side.on{background:var(--tc);box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 0 4px color-mix(in srgb,var(--tc) 35%,transparent)}
.tp-you{display:flex;gap:12px;align-items:center;justify-content:center;padding:6px;color:#fff}.tp-you i{font-style:normal;font-size:40px;animation:rmBob 3s ease-in-out infinite}
.tp-you small{display:block;color:#94A3B8;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.tp-you b{font:400 24px var(--font-heading);color:var(--tc,#fff)}
.tp-move{display:grid;gap:8px;margin:8px 0}
/* lobby: team columns */
.rm-players.teamed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.tm-col{border-radius:16px;background:color-mix(in srgb,var(--tc) 14%,rgba(15,23,42,.6));border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);padding:8px;display:grid;gap:6px;align-content:start;min-width:0}
.tm-h{display:flex;align-items:center;gap:6px;color:#fff;min-width:0}.tm-h i{font-style:normal;font-size:20px}.tm-h b{font:400 15px var(--font-heading);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-h span{flex:none;background:var(--tc);border-radius:999px;padding:1px 8px;font-weight:900;font-size:12px}
.tm-list{display:flex;flex-wrap:wrap;gap:4px}.tm-empty{color:#94A3B8;font-weight:700}
.tm-pl{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#F1F5F9;padding:3px 9px 3px 3px;font:800 12px var(--font-body);cursor:pointer;animation:jnIn .3s ease-out}
.tm-pl img{width:22px;height:22px;border-radius:50%;background:#334155;flex:none}.tm-pl.me{background:#fff;color:#0F172A}.tm-pl.off{opacity:.55}
/* while playing: team scores */
.rm-tbar{border-radius:14px;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.2);padding:8px 10px;display:grid;gap:5px}
.rm-tbar small{color:#94A3B8;font-weight:700;font-size:11.5px;text-align:center}
.tg-names{display:flex;justify-content:space-between;gap:8px;font-weight:900;font-size:13px}.tg-names span{color:var(--tc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tg-names b{color:#fff}
.tg-rope{position:relative;display:flex;height:12px;border-radius:6px;overflow:hidden;background:#1E293B}.tg-rope i{display:block;height:100%;transition:width .8s cubic-bezier(.3,1.3,.5,1)}
.tg-rope em{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 8px #fff;transition:left .8s cubic-bezier(.3,1.3,.5,1)}
.tl-row{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(40px,30%) 34px;gap:6px;align-items:center;font-size:12.5px;font-weight:800;color:#E2E8F0}
.tl-row .r{color:#94A3B8}.tl-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-row .b{height:8px;border-radius:4px;background:#1E293B;overflow:hidden}.tl-row .b i{display:block;height:100%;background:var(--tc);border-radius:4px;transition:width .8s ease}
.tl-row b{text-align:right;font-variant-numeric:tabular-nums}.tl-row.me{background:color-mix(in srgb,var(--tc) 22%,transparent);border-radius:8px;padding:2px 4px;margin:0 -4px}
.rm-tbar.big{padding:14px}.rm-tbar.big .tg-names{font-size:17px}.rm-tbar.big .tg-rope{height:22px;border-radius:11px}.rm-tbar.big .tl-row{font-size:15px;grid-template-columns:24px minmax(0,1fr) 40% 44px}.rm-tbar.big .tl-row .b{height:14px}
/* results: team podium + stars */
.rm-tres{display:grid;gap:12px}
.tr-pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;height:220px}
.tr-step{height:var(--h);display:grid;grid-template-rows:auto auto auto 1fr;justify-items:center;text-align:center;color:#fff;min-width:0;animation:trUp .7s cubic-bezier(.3,1.4,.5,1) both}
.tr-step i{font-style:normal;font-size:30px}.tr-step b{font:400 15px/1.1 var(--font-heading);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tr-step small{font-size:11px;font-weight:800;color:#CBD5E1}
.tr-step .bar{width:100%;margin-top:6px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--tc),color-mix(in srgb,var(--tc) 60%,#000));display:grid;place-items:start center;padding-top:6px;font:400 26px var(--font-heading);min-height:36px}
.tr-stars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.tr-star{display:flex;gap:8px;align-items:center;border-radius:14px;padding:8px;background:color-mix(in srgb,var(--tc) 18%,rgba(15,23,42,.6));border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);min-width:0}
.tr-star img{width:34px;height:34px;border-radius:50%;background:#334155;flex:none}.tr-star div{min-width:0}.tr-star b{display:block;color:#fff;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tr-star small{color:#CBD5E1;font-weight:700;font-size:11.5px}
@keyframes trUp{from{transform:translateY(40px);opacity:0}}
@media (max-width:360px){.tp-opt span{display:none}.tp-opt b{font-size:13px}}
@media (prefers-reduced-motion:reduce){.tr-step,.tm-pl,.tp-opt.on i,.tp-you i{animation:none}}
/* projector (teacher): bigger team bars */
@media (min-width:900px){body.rm-proj .rm-tbar.big .tg-names{font-size:24px}body.rm-proj .rm-tbar.big .tg-rope{height:34px;border-radius:17px}body.rm-proj .rm-tbar.big .tl-row{font-size:20px}body.rm-proj .rm-tbar.big .tl-row .b{height:20px}body.rm-proj #s-lobby .rm-tp{grid-column:2}}
.tr-score{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font:400 20px var(--font-heading)}.tr-score span{color:var(--tc)}.tr-score b{color:#fff;font-size:26px}.tr-score em{font-style:normal;color:#94A3B8}
.tr-why{display:block;text-align:center;color:#94A3B8;font-weight:700;font-size:12px;margin-top:-6px}
#rm-sheet .rm-tp{background:#0F172A;border:0}
@media (min-width:900px){body.rm-proj .rm-players.teamed{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}body.rm-proj .tm-pl{font-size:14px}body.rm-proj .tm-pl img{width:28px;height:28px}}
/* power-ups in rooms */
.rm-pw{display:flex;justify-content:center;gap:6px;margin:2px 0}
.rm-pw button{border:1px solid #475569;background:rgba(255,255,255,.07);color:#E2E8F0;border-radius:999px;padding:6px 11px;font:800 12.5px var(--font-body);cursor:pointer}
.rm-pw button b{color:#FCD34D;margin-left:2px}.rm-pw button:disabled{opacity:.5}
.rm-pwinfo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#E2E8F0}
.rm-pwinfo i{width:1px;height:14px;background:#475569}.rm-pwinfo b{color:#FCD34D;letter-spacing:.1em}
.rm-pwinfo span{display:inline-grid;place-items:center;width:18px;height:20px;border-radius:4px;background:#1E293B;margin:0 1px;font-size:11px}.rm-pwinfo span.on{background:#16A34A;color:#fff}
#keyboard .key[data-state="hinted"]{box-shadow:inset 0 0 0 3px #F59E0B}
/* setup page: your cards, quick-start subtitles, the tournament header */
.rm-mycards{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px;font-size:12.5px;font-weight:800;color:var(--text-secondary)}
.rm-mycards b{border-radius:999px;padding:3px 9px;color:#fff;background:#475569}.rm-mycards b.k-single{background:#059669}.rm-mycards b.k-h2{background:#2563EB}.rm-mycards b.k-day{background:#B45309}.rm-mycards b.k-week{background:#6D28D9}.rm-mycards b.k-tourney{background:#BE123C}.rm-mycards b.k-class{background:#BE185D}
.rm-mycards em{font-style:normal}.rm-mycards a{margin-left:auto;color:#3B82F6;font-weight:900;text-decoration:none}
.rm-preset span{display:grid;gap:1px;line-height:1.15}.rm-preset small{font-weight:700;font-size:11.5px;color:var(--text-secondary)}
.rm-tourhead{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:12px 14px;background:linear-gradient(150deg,rgba(245,158,11,.18),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.4)}
.rm-tourhead i{font-style:normal;font-size:30px}.rm-tourhead b{display:block;font:400 17px var(--font-heading);color:var(--text-primary)}.rm-tourhead span{color:var(--text-secondary);font-size:13.5px;line-height:1.45}
#rm-tcard button{border:0;border-radius:999px;padding:7px 14px;background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#3B2300;font:900 13px var(--font-body);cursor:pointer}
a.rm-mode{color:var(--text-primary)}
.rm-hostbar{grid-template-columns:1fr auto auto auto!important}
/* the word card (meaning of a revealed word) */
.rm-defbox{display:grid;justify-items:center;margin-top:8px}
.rm-def{max-width:520px;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.3);border-left:4px solid #22C55E;border-radius:12px;padding:10px 12px;color:#E2E8F0;animation:jnIn .35s ease-out}
.rm-def b{font:400 18px var(--font-heading);letter-spacing:.06em;color:#fff;margin-right:8px}.rm-def i{font-style:italic;color:#93C5FD;font-size:13px;font-weight:700}
.rm-def p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:#E2E8F0}.rm-def small{display:block;margin-top:4px;color:#94A3B8;font-style:italic;font-size:13px}
.rm-wordsres{display:grid;gap:8px}.rm-wordsres .rm-def{max-width:none}
.rm-upsell{margin:2px 0 0;text-align:center;color:#CBD5E1;font-size:13.5px;font-weight:700}.rm-upsell a{color:#FCD34D}
.tp-sides.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tp-sides.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.tp-opts{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* student class game + teacher portal */
.cg-head{display:flex;gap:12px;align-items:center}.cg-head>span{font-size:44px;animation:rmBob 3s ease-in-out infinite}
.cg-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.tpo-room{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:18px;padding:14px;display:grid;gap:10px}
.tpo-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.tpo-top b{display:block;font:400 19px var(--font-heading);color:var(--text-primary)}.tpo-top small{color:var(--text-secondary);font-weight:700;font-size:13px}
.tpo-top code{font:400 24px var(--font-heading);letter-spacing:.12em;color:#22C55E}
.tpo-act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tpo-act .rm-btn{font-size:14.5px;padding:10px 6px}
@media (max-width:420px){.tpo-act{grid-template-columns:1fr}}
.tpo-rep summary{cursor:pointer;font-weight:900;color:#3B82F6}
.tpo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-top:10px}
.tpo-w{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;margin:5px 0;font-size:13.5px}.tpo-w b{letter-spacing:.06em;color:var(--text-primary)}
.tpo-w .bar{height:8px;border-radius:4px;background:rgba(148,163,184,.25);overflow:hidden}.tpo-w .bar i{display:block;height:100%}.tpo-w small{color:var(--text-secondary);font-weight:800}
.tpo-s{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(148,163,184,.3);font-size:13.5px;color:var(--text-primary)}.tpo-s small{color:var(--text-secondary);font-weight:800}
.tpo-w small{white-space:nowrap}

/* late joiner: watching a game that already started */
.rm-latenote{display:grid;gap:2px;text-align:left;border-radius:14px;padding:10px 12px;margin-bottom:10px;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.55);color:var(--text-primary);font-size:14px}.rm-latenote b{font-weight:900}.rm-latenote span{color:var(--text-secondary);font-weight:700;font-size:13px}

/* form placeholders read as hints, not filled-in values */
.rm-in::placeholder,.ta-in::placeholder,input.rm-in::placeholder,textarea::placeholder{color:var(--text-tertiary);font-weight:500;opacity:.75}

/* ── Every screen size (2026-11-03). Nothing moves on the sizes where it fitted ── */
/* the page never gets wider than the phone: a long team name used to set the column's width, and cut everything at the right edge */
.rm-main,.rm-scr{grid-template-columns:minmax(0,1fr)}
.rm-tbar{grid-template-columns:minmax(0,1fr)}.tg-names span{min-width:0}
@media (max-width:420px){.rm-tbar.big .tg-names{font-size:14px}}
/* lobby: Start stays in view at the bottom of the screen while the players and team panel scroll (a flex column: sticky cannot leave a grid row).
   It sits where it always did once you reach it. */
.rm-room #s-lobby{display:flex;flex-direction:column}.rm-room #s-lobby>*{min-width:0}
#rm-hostbar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:6}
#rm-hostbar .rm-iconbtn{background:#1E293B}
#rm-hostbar::before{content:'';position:absolute;inset:-8px -8px calc(-8px - env(safe-area-inset-bottom,0px));z-index:-1;border-radius:22px;background:rgba(15,23,42,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}   /* the list scrolling behind the bar does not show between the buttons; same glass as the top bar, on every paid stage too */
@media (max-width:340px){.rm-hostbar{gap:6px}.rm-hostbar .rm-iconbtn{width:44px}#rm-start{font-size:15.5px;line-height:1.1;padding:12px 4px}}
/* a teacher's projector: same two columns (code left, class right) built so Start can stay in view there too */
@media (min-width:900px){body.rm-proj #s-lobby{display:flow-root}body.rm-proj #s-lobby>.rm-codebox{float:left;width:380px}body.rm-proj #s-lobby>:not(.rm-codebox){margin-left:408px}body.rm-proj #s-lobby>:not(.rm-codebox)+*{margin-top:12px}
  /* the live board: as many columns as fit, slimmer rows for a full class, so the whole class shows without scrolling */
  body.rm-proj:has(#s-wait:not([hidden])) .rm-main{max-width:min(96vw,1760px)}
  body.rm-proj #s-wait .rm-board{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px 10px}body.rm-proj #s-wait .rm-board:not(:has(>.rm-brow:nth-child(6))){max-width:760px;width:100%;margin-inline:auto}body.rm-proj #s-wait .rm-board>:not(.rm-brow){grid-column:1/-1}
  body.rm-proj #s-wait .rm-board:has(>.rm-brow:nth-child(16)) .rm-brow{padding:2px 8px;gap:6px}body.rm-proj #s-wait .rm-board:has(>.rm-brow:nth-child(16)) .rm-brow img{width:24px;height:24px}body.rm-proj #s-wait .rm-board:has(>.rm-brow:nth-child(16)) .rm-brow .dots i{width:9px;height:9px}}
/* neighbouring long names stay in their own column */
.rm-pl{min-width:0}.rm-pl small{max-width:100%}
/* chat: guests can always reach the last phrases and the sign-up link */
.rm-chat{overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1179px) and (max-height:700px){.rm-chat{gap:6px;padding-top:8px}.rm-chat-feed{min-height:44px}.rm-chat-quick{flex:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px}.rm-chat-quick::-webkit-scrollbar{display:none}}
/* a teacher's chat panel: the class makes room for it instead of being hidden behind it */
@media (min-width:1180px) and (max-width:2520px){body.rm-proj:has(#rm-chat:not([hidden])) .rm-main{max-width:none;margin:0 calc(min(360px,(100vw - 560px) / 2 - 32px) + 24px) 0 0}}
/* full room on a small screen: room.js adds these while a word is on when the tiles would get too small (see fit) */
body.in-play .rm-main{padding-bottom:8px}   /* the word fits exactly, so the page does not drag under a thumb */
body.in-play.rm-tight .rm-main{padding:6px 14px 8px;gap:6px}body.in-play.rm-tight #s-play{gap:4px}
body.in-play.rm-tight .rm-clue{padding:3px 8px;font-size:12.5px;line-height:1.25}
body.in-play.rm-tight .rm-tbar{padding:4px 8px;gap:3px}body.in-play.rm-tight .rm-tbar small{display:none}body.in-play.rm-tight .tg-rope{height:8px}
body.in-play.rm-tight .rm-top{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}
body.in-play.rm-tight2 #rm-mini,body.in-play.rm-tight2 .rm-wordno small{display:none}body.in-play.rm-tight2 .rm-pw{margin:0}body.in-play.rm-tight2 .rm-playhead .rm-timer{font-size:20px}
/* 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){.rm-room{--key-height:36px}}
/* a phone on its side: the board beside the keyboard, no scrolling between guesses */
@media (orientation:landscape) and (max-height:480px){
  .rm-room{--key-height:clamp(30px,11dvh,44px)}
  body.in-play .rm-top{padding-top:calc(4px + env(safe-area-inset-top,0px));padding-bottom:4px}
  body.in-play .rm-main{max-width:940px;padding:2px 14px 6px;gap:0}
  .rm-room #s-play{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:'head head' 'board clue' 'board tbar' 'board info' 'board pw' 'board keys';column-gap:16px;row-gap:4px;align-items:start}
  .rm-room #s-play>.rm-playhead{grid-area:head}.rm-room #s-play>.rm-clue{grid-area:clue}.rm-room #s-play>.rm-tbar{grid-area:tbar}.rm-room #s-play>.rm-pwinfo{grid-area:info}.rm-room #s-play>.rm-pw{grid-area:pw}
  .rm-room #s-play>.grid{grid-area:board;align-self:start}.rm-room #s-play>.keyboard{grid-area:keys;align-self:center;max-width:none;margin:0}
  .rm-room #rm-mini{display:none}.rm-timer{font-size:20px}
}
/* a full class's results: the buttons right under the podium */
#s-results>:empty{display:none}   /* a closed room has no winner, podium or lists: its buttons come up under the heading */
#s-results.rm-many>#rm-res-k,#s-results.rm-many>#rm-win{order:-3}#s-results.rm-many>#rm-tres,#s-results.rm-many>#rm-podium{order:-2}#s-results.rm-many>#rm-res-actions{order:-1}
/* two players or two teams: the podium is centred (the empty third place is still in the page) */
.rm-podium:has(>.p2):not(:has(>.p3)){grid-template-columns:1fr 1fr;max-width:66%;margin-inline:auto}.rm-podium:has(>.p2):not(:has(>.p3))>div:empty{display:none}
.tr-pod:has(>.tr-step:nth-child(2)):has(>div:empty:nth-child(3)){grid-template-columns:1fr 1fr;max-width:66%;margin-inline:auto;width:100%}.tr-pod:has(>.tr-step:nth-child(2))>div:empty:nth-child(3){display:none}
/* the hint row stays one line per button */
.rm-pw button{white-space:nowrap}
@media (max-width:340px){.rm-pw{gap:4px}.rm-pw button{padding:5px 7px;font-size:11.5px}}
/* the three step bars line up even when one label wraps */
.rm-steps{align-items:start}
/* room for a finger, same look */
.rm-steps button,.tm-pl,.rm-mycards a,.rm-chat-note a{position:relative}
.rm-steps button::after{content:'';position:absolute;inset:-5px 0}.tm-pl::after{content:'';position:absolute;inset:-4px 0}.rm-mycards a::after,.rm-chat-note a::after{content:'';position:absolute;inset:-10px -4px}
.rm-sw::before{content:'';position:absolute;inset:-6px -2px}
/* the room's name gets the header on a phone while a word is on (the time left shows in the lobby) */
@media (max-width:420px){body.in-play .rm-top .rm-left,body:has(#s-wait:not([hidden])) .rm-top .rm-left{display:none}}
/* a bracket row on the smallest phones: the dot says live, the names keep the room */
@media (max-width:360px){.rm-livew{display:none}}


/* rooms-landing.css */
/* WordlyPlay — the Wordle Rooms search pages (/wordle-rooms, /wordle-for-classroom, /host-a-wordle-tournament).
   A game page, not a text page: an animated phone that plays the whole room story, steps synced to it, colourful tiles,
   counters and cards. Text is kept (it is what ranks) but split into small blocks. Works in light and dark (site tokens). */
.rl{--g:#22C55E;--y:#F59E0B;--b:#3B82F6;--p:#8B5CF6;--r:#E11D48;overflow-x:clip}
.rl-in{max-width:1080px;margin:0 auto;padding:0 16px}
.rl-sec{padding:44px 0 6px}
.rl-sec>.rl-in>h2,.rl-h2{font:400 clamp(25px,3.6vw,36px)/1.12 var(--font-heading,'Fredoka One');margin:0 0 8px;color:var(--text-primary);text-wrap:balance}
.rl-lead{color:var(--text-secondary);font-size:16.5px;line-height:1.55;max-width:62ch;margin:0 0 18px}
.rl a{color:#3B82F6;font-weight:800}
.rl-k{display:inline-flex;align-items:center;gap:6px;font:900 12px/1 var(--font-body,'Nunito');letter-spacing:.09em;text-transform:uppercase;color:#22C55E;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);border-radius:999px;padding:6px 11px}

/* ---- hero */
.rl-hero{position:relative;padding:28px 0 10px}
.rl-hero::before{content:"";position:absolute;inset:-60px -20% auto;height:520px;background:radial-gradient(closest-side,rgba(59,130,246,.22),transparent 70%),radial-gradient(closest-side at 80% 30%,rgba(34,197,94,.16),transparent 70%);pointer-events:none;z-index:-1}
.rl-hero .rl-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:34px;align-items:center}
@media (max-width:860px){.rl-hero .rl-in{grid-template-columns:1fr;gap:22px}}
.rl-hero h1{font:400 clamp(32px,5.4vw,54px)/1.04 var(--font-heading,'Fredoka One');margin:14px 0 12px;color:var(--text-primary);text-wrap:balance}
.rl-hero h1 span{background:linear-gradient(90deg,#22C55E,#3B82F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.rl-answer{font-size:17px;line-height:1.55;color:var(--text-secondary);margin:0 0 18px;max-width:58ch}
.rl-ctas{display:flex;gap:10px;flex-wrap:wrap}.rl-ctas .rm-btn{width:auto;padding:14px 20px}
.rl-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;color:var(--text-secondary);font-weight:800;font-size:13.5px}.rl-trust span::before{content:"✓ ";color:#22C55E}

/* ---- the animated phone */
.rl-stage{display:grid;justify-items:center;gap:12px}
.rl-phone{position:relative;width:min(300px,82vw);aspect-ratio:9/17.5;border-radius:38px;padding:10px;background:#0B1020;box-shadow:0 0 0 2px #2A3654,0 30px 60px rgba(2,6,23,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
.rl-phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:80px;height:18px;border-radius:12px;background:#0B1020;z-index:3}
.rl-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#1E3A8A 0%,#0F172A 62%);color:#F8FAFC;font-family:var(--font-body,'Nunito'),sans-serif}
.rl-bar{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 16px 8px;font:800 11px var(--font-body);color:#CBD5E1;z-index:2}
.rl-bar b{font:400 14px var(--font-heading);color:#fff}
.rl-scene{position:absolute;inset:56px 12px 14px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s,transform .45s;pointer-events:none}
.rl-scene.on{opacity:1;transform:none}
.rl-scene h4{margin:0;font:400 19px/1.1 var(--font-heading);text-align:center}
.rl-scene .k{font:900 9.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#93C5FD;text-align:center}
.rl-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.rl-chips i{font-style:normal;font:800 11px var(--font-body);padding:5px 9px;border-radius:999px;background:#1E293B;border:1px solid #334155;transition:.3s}
.rl-scene.on .rl-chips i.pick{animation:rlPick .5s .7s both}
.rl-tiles2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rl-tiles2 div{border-radius:12px;padding:8px;text-align:center;font:400 13px var(--font-heading);border:2px solid #334155;background:#1E293B}
.rl-tiles2 div em{display:block;font-style:normal;font-size:18px}
.rl-scene.on .rl-tiles2 div.pick{animation:rlPickBox .5s 1.1s both}
.rl-cta{margin-top:auto;border-radius:14px;padding:11px;text-align:center;font:400 15px var(--font-heading);background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 4px 0 #15803D}
.rl-scene.on .rl-cta{animation:rlPress .5s 2s both}
.rl-door{font-size:54px;text-align:center;margin-top:6px}.rl-scene.on .rl-door{animation:rmPop .6s cubic-bezier(.3,1.6,.5,1) both}
.rl-code{display:flex;justify-content:center;gap:4px;perspective:400px}
.rl-code span{width:30px;height:36px;border-radius:8px;display:grid;place-items:center;font:400 20px var(--font-heading);background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 3px 0 #15803D;transform:rotateX(90deg);opacity:0}
.rl-scene.on .rl-code span{animation:rmFlip .5s cubic-bezier(.3,1.4,.5,1) forwards}
.rl-qr{width:78px;height:78px;margin:2px auto 0;border-radius:9px;background:#fff;padding:5px;display:grid;grid-template-columns:repeat(9,1fr);gap:1px}.rl-qr b{background:#0F172A;border-radius:1px}.rl-qr b.w{background:transparent}
.rl-scene.on .rl-qr{animation:rmPop .5s 1.2s both}
.rl-people{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;justify-items:center}
.rl-people div{display:flex;flex-direction:column;align-items:center;gap:2px;font:800 10px var(--font-body);color:#E2E8F0;opacity:0}
.rl-people img{width:44px;height:44px;border-radius:50%;background:#334155;border:3px solid #475569}
.rl-people .host img{border-color:#FBBF24}
.rl-scene.on .rl-people div{animation:rmJoin .55s cubic-bezier(.3,1.6,.5,1) forwards}
.rl-count{text-align:center;font:400 14px var(--font-heading)}.rl-count b{color:#4ADE80}
.rl-board{display:grid;gap:4px;justify-content:center}.rl-row{display:flex;gap:4px}
.rl-row i{width:27px;height:27px;border-radius:6px;border:2px solid #334155;display:grid;place-items:center;font:400 14px var(--font-heading);font-style:normal;color:#fff}
.rl-scene.on .rl-row i.c{animation:rlTile .5s both}
.rl-row i.g{--to:#22C55E}.rl-row i.y{--to:#F59E0B}.rl-row i.x{--to:#64748B}
.rl-mini{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.rl-mini span{display:inline-flex;align-items:center;gap:4px;background:#1E293B;border:1px solid #334155;border-radius:999px;padding:2px 8px 2px 3px;font:800 10px var(--font-body)}
.rl-mini img{width:16px;height:16px;border-radius:50%}.rl-mini em{font-style:normal;color:#86EFAC}
.rl-timer{text-align:right;font:400 16px var(--font-heading);color:#FCD34D}
.rl-pod{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:5px;height:150px;margin-top:auto}
.rl-pod div{display:flex;flex-direction:column;align-items:center;gap:2px;font:800 10px var(--font-body)}
.rl-pod img{width:34px;height:34px;border-radius:50%;border:2px solid #FBBF24;background:#1E293B}
.rl-pod b{width:100%;border-radius:10px 10px 0 0;display:grid;place-items:start center;padding-top:4px;font:400 18px var(--font-heading);color:#fff;transform-origin:bottom}
.rl-pod .p1 b{height:78px;background:linear-gradient(180deg,#FCD34D,#F59E0B)}.rl-pod .p2 b{height:56px;background:linear-gradient(180deg,#CBD5E1,#94A3B8)}.rl-pod .p3 b{height:40px;background:linear-gradient(180deg,#FDBA74,#EA580C)}
.rl-scene.on .rl-pod b{animation:rmGrow .8s cubic-bezier(.3,1.2,.5,1) both}.rl-scene.on .rl-pod img{animation:rmPop .5s .6s both}
.rl-win{text-align:center;font:400 18px var(--font-heading);color:#FCD34D}
.rl-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.rl-confetti i{position:absolute;top:-10px;width:6px;height:9px;border-radius:2px;opacity:0}
.rl-scene.on .rl-confetti i{animation:rlFall 2.2s ease-in forwards}
.rl-bracket{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:center;font:800 9.5px var(--font-body)}
.rl-bracket div{display:grid;gap:5px}.rl-bracket span{background:#1E293B;border:1px solid #334155;border-radius:7px;padding:4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-scene.on .rl-bracket span.w{animation:rlWinRow .5s both}
.rl-caption{min-height:44px;text-align:center;font-weight:800;color:var(--text-secondary);max-width:320px}
.rl-caption b{display:block;color:var(--text-primary);font:400 18px var(--font-heading)}

/* ---- steps synced with the phone */
.rl-steps{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.rl-step{position:relative;text-align:left;cursor:pointer;border:2px solid rgba(148,163,184,.3);background:var(--bg-card);color:var(--text-primary);border-radius:16px;padding:12px;font:inherit;overflow:hidden;width:100%;height:100%}
.rl-step:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.rl-step .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(148,163,184,.2);font:400 16px var(--font-heading);margin-bottom:6px}
.rl-step b{display:block;font:400 17px/1.15 var(--font-heading);margin-bottom:3px}.rl-step span{display:block;color:var(--text-secondary);font-size:13.5px;line-height:1.4}
.rl-step::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,#22C55E,#3B82F6)}
.rl-step.on{border-color:#3B82F6;background:linear-gradient(160deg,rgba(59,130,246,.16),var(--bg-card))}.rl-step.on .n{background:linear-gradient(180deg,#4ADE80,#22C55E);color:#fff}
.rl-step.on::after{animation:rlProg var(--dur,3.6s) linear forwards}

/* ---- blocks */
.rl-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.rl-mode{position:relative;border-radius:20px;padding:16px;color:#fff;box-shadow:0 6px 0 var(--sh);overflow:hidden;transition:transform .2s}
.rl-mode:hover{transform:translateY(-4px) rotate(-.5deg)}
.rl-mode i{font-style:normal;font-size:32px;display:inline-block;animation:rmBob 3.2s ease-in-out infinite}
.rl-mode h3{font:400 22px var(--font-heading);margin:6px 0 4px}.rl-mode p{margin:0;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.93)}.rl-mode a{color:#fff;text-decoration:underline}
.rl-mode::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.1)}
.rl-feat{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:20px;padding:16px;display:grid;gap:8px;align-content:start}
.rl-feat h3{margin:0;font:400 19px var(--font-heading);color:var(--text-primary)}.rl-feat p{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.5}
.rl-vis{min-height:52px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rl-vis .t{width:30px;height:34px;border-radius:7px;display:grid;place-items:center;font:400 18px var(--font-heading);color:#fff;background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 3px 0 #15803D}
.rl-vis .t.y{background:linear-gradient(180deg,#FCD34D,#F59E0B);box-shadow:0 3px 0 #B45309}.rl-vis .t.x{background:linear-gradient(180deg,#94A3B8,#64748B);box-shadow:0 3px 0 #334155}
.rl-vis .chip{border-radius:999px;padding:5px 10px;font:800 13px var(--font-body);background:rgba(59,130,246,.14);color:var(--text-primary);border:1px solid rgba(59,130,246,.35)}.rl-vis .chip.on{background:#3B82F6;color:#fff}
.rl-vis .sw{width:44px;height:24px;border-radius:12px;background:#22C55E;position:relative}.rl-vis .sw::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.rl-vis .clock{width:44px;height:44px;border-radius:50%;background:conic-gradient(#F59E0B var(--a,70%),rgba(148,163,184,.25) 0);display:grid;place-items:center}
.rl-vis .clock::after{content:"2:00";width:34px;height:34px;border-radius:50%;background:var(--bg-card);display:grid;place-items:center;font:400 11px var(--font-heading);color:var(--text-primary)}
.rl-reveal .rl-vis .clock{animation:rlClock 6s linear infinite}
.rl-idea{display:flex;gap:12px;align-items:flex-start;background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:18px;padding:14px}
.rl-idea>i{font-style:normal;font-size:28px;width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(245,158,11,.15)}
.rl-idea h3{margin:0 0 2px;font:400 17px var(--font-heading);color:var(--text-primary)}.rl-idea p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.45}
.rl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.rl-stat{border-radius:20px;padding:16px;text-align:center;background:linear-gradient(160deg,rgba(59,130,246,.18),var(--bg-card));border:1px solid rgba(59,130,246,.3)}
.rl-stat b{display:block;font:400 clamp(30px,5vw,42px)/1 var(--font-heading);color:var(--text-primary);font-variant-numeric:tabular-nums}.rl-stat span{display:block;margin-top:6px;color:var(--text-secondary);font-weight:800;font-size:13.5px}
.rl-callout{border-radius:20px;padding:18px;background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(59,130,246,.12));border:1px solid rgba(34,197,94,.35)}
.rl-callout p{color:var(--text-secondary);font-size:15.5px;line-height:1.55;max-width:70ch;margin:0 0 8px}.rl-callout p:last-child{margin:0}
.rl-tw{overflow-x:auto;border-radius:16px;border:1px solid rgba(148,163,184,.3);background:var(--bg-card)}
.rl-tw table{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}.rl-tw th,.rl-tw td{text-align:left;padding:11px 12px;border-bottom:1px solid rgba(148,163,184,.18);color:var(--text-primary);vertical-align:top}
.rl-tw th{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary)}.rl-tw tr:last-child td{border-bottom:0}.rl-tw td.y{color:#22C55E;font-weight:900}.rl-tw td.n{color:var(--text-tertiary)}
.rl-tw td:first-child{font-weight:800}
.rl-faq{display:grid;gap:8px}.rl-faq details{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:16px;padding:0 16px;transition:border-color .2s}
.rl-faq details[open]{border-color:#3B82F6}.rl-faq summary{cursor:pointer;font-weight:900;color:var(--text-primary);font-size:16px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.rl-faq summary::-webkit-details-marker{display:none}.rl-faq summary::after{content:"+";font:400 22px/1 var(--font-heading);color:#3B82F6;transition:transform .2s}.rl-faq details[open] summary::after{transform:rotate(45deg)}
.rl-faq details p{margin:0 0 14px;color:var(--text-secondary);line-height:1.55}
.rl-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.rl-links a{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:16px;padding:14px;color:var(--text-primary);font-weight:900;transition:transform .15s,border-color .15s}
.rl-links a:hover{transform:translateY(-2px);border-color:#3B82F6}.rl-links a small{color:var(--text-secondary);font-weight:700;font-size:13px}
.rl-end{margin:40px 0 0;border-radius:24px;padding:26px 18px;text-align:center;background:linear-gradient(135deg,#1E3A8A,#0F172A);color:#fff;display:grid;gap:12px;justify-items:center}
.rl-end h2{margin:0;font:400 clamp(24px,3.6vw,32px)/1.15 var(--font-heading);color:#fff}.rl-end p{margin:0;color:#BFDBFE;font-weight:700}
.rl-updated{color:var(--text-tertiary);font-size:13px;margin:22px 0 40px}
.rl-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}.rl-reveal.in{opacity:1;transform:none}
.rl-grid>.rl-reveal:nth-child(2){transition-delay:.08s}.rl-grid>.rl-reveal:nth-child(3){transition-delay:.16s}.rl-grid>.rl-reveal:nth-child(4){transition-delay:.24s}.rl-grid>.rl-reveal:nth-child(5){transition-delay:.32s}.rl-grid>.rl-reveal:nth-child(6){transition-delay:.4s}
@keyframes rlPick{50%{transform:scale(1.15)}to{background:#3B82F6;border-color:#3B82F6;color:#fff}}
@keyframes rlPickBox{to{border-color:#3B82F6;background:rgba(59,130,246,.25);transform:translateY(-2px)}}
@keyframes rlPress{40%{transform:translateY(3px);box-shadow:0 1px 0 #15803D}100%{transform:none}}
@keyframes rlTile{0%{transform:rotateX(90deg)}100%{transform:none;background:var(--to);border-color:var(--to)}}
@keyframes rlFall{0%{opacity:1}100%{transform:translateY(560px) rotate(500deg);opacity:1}}
@keyframes rlWinRow{to{background:#15803D;border-color:#22C55E}}
@keyframes rlProg{to{width:100%}}
@keyframes rlClock{from{--a:100%}to{--a:0%}}
@media (prefers-reduced-motion:reduce){.rl-reveal{opacity:1;transform:none;transition:none}.rl-scene,.rl-scene *{animation:none!important;transition:none!important}.rl-code span,.rl-people div{opacity:1;transform:none}.rl-mode i{animation:none}.rl-step::after{animation:none!important}}
/* buttons and cards keep their own colours inside the page's link style */
.rl a.rm-btn,.rl a.rm-card{color:#fff;text-decoration:none}.rl a.rm-btn.gold{color:#3b2300}.rl a.rm-btn.ghost{color:var(--text-primary)}
.rl-grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.rl-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}

@media (max-width:640px){
  .rl-tw{overflow:visible;border:0;background:none}
  .rl-tw table.rl-stack,.rl-tw table.rl-stack tbody,.rl-tw table.rl-stack tr,.rl-tw table.rl-stack td{display:block;min-width:0;width:100%}
  .rl-tw table.rl-stack tr:first-child{display:none}
  .rl-tw table.rl-stack tr{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:16px;padding:6px 12px;margin-bottom:10px}
  .rl-tw table.rl-stack td{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(148,163,184,.15);text-align:right}
  .rl-tw table.rl-stack td:first-child{display:block;text-align:left;font:400 17px var(--font-heading);border-bottom:2px solid rgba(59,130,246,.4);padding-bottom:6px}
  .rl-tw table.rl-stack td[data-label]:not(:first-child)::before{content:attr(data-label);color:var(--text-tertiary);font-weight:800;font-size:12.5px;text-align:left}
  .rl-tw table.rl-stack td:last-child{border-bottom:0}
}

/* ---- hero: a live room card (always a dark game screen) */
.rl-live{justify-self:center;width:min(380px,100%);border-radius:28px;padding:18px;background:radial-gradient(120% 60% at 50% 0%,#1E3A8A,#0F172A 70%);color:#F8FAFC;box-shadow:0 0 0 2px #2A3654,0 30px 60px rgba(2,6,23,.4);display:grid;gap:16px;transform:rotate(1.2deg)}
.rl-live-top{display:flex;align-items:center;gap:8px;font-weight:900;font-size:14px;min-width:0}.rl-live-top>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-live-top .live{flex:none;background:#E11D48;border-radius:7px;padding:4px 8px 4px 20px;font-size:11px;letter-spacing:.1em;position:relative}
.rl-live-top .live::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;animation:rlPulse 1.2s ease-in-out infinite}
.rl-live-top .n{flex:none;margin-left:auto;background:rgba(255,255,255,.12);border-radius:999px;padding:5px 11px;font-variant-numeric:tabular-nums}
.rl-live .lbl{font:900 11px/1 var(--font-body,'Nunito');letter-spacing:.12em;text-transform:uppercase;color:#93C5FD;margin-bottom:8px}
.rl-live-code{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;perspective:400px}
.rl-live-code span{aspect-ratio:1/1.12;border-radius:10px;display:grid;place-items:center;font:400 clamp(20px,6vw,28px)/1 var(--font-heading,'Fredoka One');background:#334155;box-shadow:0 4px 0 #1E293B}
.rl-live.go .rl-live-code span{animation:rlFlip .55s ease-out both}
.rl-live-ppl{display:flex;align-items:center;min-height:46px;padding-left:10px;min-width:0}
.rl-live-ppl i{display:block;margin-left:-10px;flex:none}.rl-live-ppl img{display:block;width:42px;height:42px;border-radius:50%;background:#334155;border:3px solid #13204A}
.rl-live.go .rl-live-ppl i{animation:rlPop .45s cubic-bezier(.3,1.6,.5,1) both}
.rl-live-toast{margin-left:12px;font-weight:900;font-size:13.5px;color:#BBF7D0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-live-lb{position:relative;height:134px}
.rl-live-lb>div{position:absolute;left:0;right:0;top:0;height:40px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:9px;padding:0 10px;transition:top .7s cubic-bezier(.3,1.3,.5,1),background .4s}
.rl-live-lb>div.top{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.5)}
.rl-live-lb img{width:26px;height:26px;border-radius:50%;background:#334155;flex:none}.rl-live-lb b{font-size:14px;width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-live-lb .bar{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}.rl-live-lb .bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#22C55E,#3B82F6);transition:width .8s ease}
.rl-live-lb em{font-style:normal;font:400 16px var(--font-heading);width:34px;text-align:right;font-variant-numeric:tabular-nums}
@keyframes rlFlip{0%{transform:rotateX(90deg)}100%{transform:none;background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 4px 0 #15803D}}
@keyframes rlPop{0%{transform:scale(0)}100%{transform:none}}
@keyframes rlPulse{50%{opacity:.25}}
@media (max-width:860px){.rl-live{transform:none}}

/* ---- how it works: the phone plays each screen, the steps sit beside it */
.rl-how{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;padding:26px;border-radius:30px;background:radial-gradient(90% 80% at 0% 50%,rgba(59,130,246,.16),transparent 70%),var(--bg-card);border:1px solid rgba(148,163,184,.25)}
.rl-how .rl-caption{display:none}
.rl-how .rl-steps li{position:relative}
.rl-how .rl-steps li:not(:last-child)::before{content:"";position:absolute;left:27px;top:44px;bottom:-14px;border-left:2px dashed rgba(148,163,184,.35)}
.rl-step{display:flex;gap:12px;align-items:flex-start;background:transparent;border-color:transparent;transition:background .3s,border-color .3s}
.rl-step .n{flex:none;margin:0;position:relative;z-index:1;background:var(--bg-secondary,#1E293B);border:2px solid rgba(148,163,184,.35)}
.rl-step .tx{min-width:0}.rl-step .l{display:none!important}.rl-step.on .s{display:none!important}.rl-step.on .l{display:block!important;color:var(--text-primary)}
.rl-step:hover{border-color:rgba(59,130,246,.35)}
@media (max-width:860px){
  .rl-how{grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;padding:16px 10px}
  .rl-how .rl-steps{order:-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%}
  .rl-how .rl-steps li::before{display:none}
  .rl-how .rl-step{flex-direction:column;align-items:center;text-align:center;padding:8px 3px 10px;gap:5px;border-color:rgba(148,163,184,.25)}
  .rl-how .rl-step b{font-size:12.5px;margin:0}.rl-how .rl-step .s,.rl-how .rl-step.on .l{display:none!important}
  .rl-how .rl-caption{display:block;min-height:96px;font-weight:700}
  .rl-how .rl-phone{width:min(270px,74vw)}
}
@media (max-width:420px){.rl-how .rl-step b{display:none}}
@media (prefers-reduced-motion:reduce){.rl-live,.rl-live *{animation:none!important;transition:none!important}.rl-live-code span{background:linear-gradient(180deg,#4ADE80,#22C55E)}}
@media (min-width:861px){.rl-how .rl-step{padding:14px 16px}.rl-how .rl-step b{font-size:21px}.rl-how .rl-step .s,.rl-how .rl-step .l{font-size:15.5px;line-height:1.5}.rl-how .rl-step .n{width:32px;height:32px}}

/* the play screen: bigger tiles and a small live feed under the board */
.rl-row i{width:36px;height:36px;font-size:19px;border-radius:7px}.rl-board,.rl-row{gap:5px}
.rl-feed{display:grid;gap:6px;margin-top:6px}.rl-feed span{justify-self:center;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);border-radius:999px;padding:5px 11px;font:800 11.5px var(--font-body);opacity:0}
.rl-scene.on .rl-feed span{animation:rlPop .45s cubic-bezier(.3,1.6,.5,1) both,rlShow .1s both}
@keyframes rlShow{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rl-feed span{opacity:1}}
/* light mode: the dark closing banner keeps light buttons; greens/greys dark enough on white */
.rl-end .rm-btn.ghost,.rl a.rm-btn.ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.45)}
.rl-mode h3,.rl-mode p{text-shadow:0 1px 2px rgba(0,0,0,.22)}
:root[data-theme="light"] .rl-k{color:#15803D;background:rgba(34,197,94,.14)}
:root[data-theme="light"] .rl-tw td.y{color:#15803D}
:root[data-theme="light"] .rl-tw td.n,:root[data-theme="light"] .rl-tw th,:root[data-theme="light"] .rl-updated{color:#64748B}

/* ---- tournament hero: a live bracket (always a dark game screen) */
.rl-bk{justify-self:center;width:min(440px,100%);border-radius:28px;padding:18px;background:radial-gradient(120% 70% at 50% 0%,#78350F,#0F172A 72%);color:#F8FAFC;box-shadow:0 0 0 2px #4A3520,0 30px 60px rgba(2,6,23,.4);display:grid;gap:14px}
.rl-bk-top{display:flex;align-items:center;gap:8px;font-weight:900;font-size:14px;min-width:0}.rl-bk-top>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-bk-top .live{flex:none;background:#E11D48;border-radius:7px;padding:4px 8px;font-size:11px;letter-spacing:.1em}
.rl-bk-top .n{flex:none;margin-left:auto;background:rgba(251,191,36,.2);color:#FDE68A;border-radius:999px;padding:5px 11px}
.rl-bk-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr .9fr;gap:8px;align-items:center;min-height:230px}
.rl-bk-grid .c{display:grid;gap:10px;align-content:space-around;height:100%}
.rl-bk-grid .m{display:grid;gap:2px;opacity:.25;transform:translateX(-6px)}
.rl-bk.go .rl-bk-grid .m{animation:rlBkIn .45s ease-out var(--d) both}
.rl-bk-grid .m span{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 7px;font:800 12px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .3s}
.rl-bk.go .rl-bk-grid .m span.w{animation:rlBkWin .4s ease-out calc(var(--d) + .5s) both}
.rl-bk-grid .champ{display:grid;justify-items:center;gap:2px;font-size:30px;opacity:0;transform:scale(.6)}
.rl-bk.go .rl-bk-grid .champ{animation:rlPop .5s cubic-bezier(.3,1.6,.5,1) var(--d) both}
.rl-bk-grid .champ b{font:400 16px var(--font-heading);color:#FDE68A}.rl-bk-grid .champ small{font:900 10px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#FCD34D}
.rl-bk-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:800;color:#FDE68A}
@keyframes rlBkIn{to{opacity:1;transform:none}}
@keyframes rlBkWin{to{background:linear-gradient(180deg,#4ADE80,#16A34A);border-color:#22C55E;color:#fff}}
@media (max-width:860px){.rl-bk{transform:none}}
@media (max-width:400px){.rl-bk-grid{grid-template-columns:1.1fr 1fr 1fr .8fr;gap:5px}.rl-bk-grid .m span{font-size:11px;padding:4px 5px}}
@media (prefers-reduced-motion:reduce){.rl-bk *{animation:none!important}.rl-bk-grid .m{opacity:1;transform:none}.rl-bk-grid .champ{opacity:1;transform:none}}

/* ---- run of show: a vertical timeline with clock times */
.rl-tl{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.rl-tl li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;position:relative;padding:0 0 22px}
.rl-tl li::before{content:"";position:absolute;left:101px;top:12px;bottom:-4px;border-left:3px solid rgba(245,158,11,.35)}
.rl-tl li:last-child::before{display:none}
.rl-tl .t{justify-self:end;font:400 16px/1.2 var(--font-heading);color:#D97706;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:5px 8px;text-align:center;font-variant-numeric:tabular-nums}
.rl-tl li>div{position:relative;background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:16px;padding:12px 14px 12px 22px}
.rl-tl li>div::before{content:"";position:absolute;left:-12px;top:9px;width:14px;height:14px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.25)}
.rl-tl b{display:block;font:400 18px var(--font-heading);color:var(--text-primary);margin-bottom:2px}.rl-tl p{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.5}
@media (max-width:520px){.rl-tl li{grid-template-columns:minmax(0,1fr);gap:6px;padding-left:24px}.rl-tl li::before{left:7px;top:16px}.rl-tl li::after{content:"";position:absolute;left:1px;top:8px;width:15px;height:15px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.25)}.rl-tl .t{justify-self:start}.rl-tl li>div{padding-left:14px}.rl-tl li>div::before{display:none}}

/* ---- tournament formats */
.rl-fmts{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.rl-fmt{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-top:5px solid var(--c);border-radius:18px;padding:14px 16px;display:grid;gap:10px;align-content:start}
.rl-fmt .hd{display:flex;align-items:center;gap:10px}.rl-fmt .hd i{font-style:normal;font-size:26px}.rl-fmt h3{margin:0;font:400 19px var(--font-heading);color:var(--text-primary)}
.rl-fmt dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.rl-fmt dl div{background:rgba(148,163,184,.1);border-radius:10px;padding:6px 8px;min-width:0}
.rl-fmt dt{font:900 10px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}.rl-fmt dd{margin:0;font-weight:800;font-size:13px;color:var(--text-primary)}
.rl-fmt p{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.5}

/* ---- copyable rules */
.rl-rules{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:20px;padding:6px 18px 16px;display:grid;gap:10px}
.rl-rules ol{margin:0;padding:0;list-style:none;counter-reset:r}.rl-rules li{counter-increment:r;position:relative;padding:12px 0 12px 44px;border-bottom:1px dashed rgba(148,163,184,.3);color:var(--text-secondary);line-height:1.5;font-size:15px}
.rl-rules li:last-child{border-bottom:0}.rl-rules li b{color:var(--text-primary)}
.rl-rules li::before{content:counter(r);position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#3B2300;font:400 16px var(--font-heading)}
.rl-rules .rl-copy{justify-self:start;width:auto;padding:10px 16px}

/* ---- rooms: "which room fits your group?" */
.rl-pick{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:22px;padding:16px;display:grid;gap:14px}
.rl-pick .q{display:grid;gap:8px}.rl-pick .opts{display:flex;flex-wrap:wrap;gap:8px}
.rl-pick .opts button{border:2px solid rgba(148,163,184,.35);background:transparent;color:var(--text-primary);border-radius:999px;padding:9px 15px;font:800 14px var(--font-body);cursor:pointer;transition:transform .15s,background .2s}
.rl-pick .opts button:hover{transform:translateY(-2px)}.rl-pick .opts button.on{background:#2563EB;border-color:#2563EB;color:#fff}
.rl-pick .ans{display:flex;gap:14px;align-items:flex-start;border-radius:18px;padding:14px;background:linear-gradient(150deg,rgba(34,197,94,.14),rgba(59,130,246,.12));border:1px solid rgba(34,197,94,.35)}
.rl-pick .ans.pop{animation:jnIn2 .35s cubic-bezier(.3,1.4,.5,1)}.rl-pick .ans>i{font-style:normal;font-size:40px;line-height:1}
.rl-pick .ans div{display:grid;gap:4px;min-width:0}.rl-pick .ans b{font:400 22px var(--font-heading);color:var(--text-primary)}.rl-pick .ans p{margin:0;color:var(--text-secondary);font-size:14.5px}
.rl-pick .ans .rm-btn{justify-self:start;width:auto;padding:11px 18px;font-size:16px;margin-top:4px}
@keyframes jnIn2{from{transform:translateY(8px) scale(.98);opacity:0}}
:root[data-theme="light"] .rl-tl .t{color:#B45309}
.rl-tl .t{align-self:start}
.rl .rl-end a.rm-btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
@keyframes rlBkWin{to{background:linear-gradient(180deg,#22C55E,#15803D);border-color:#16A34A;color:#fff}}
:root[data-theme="light"] .rl-fmt dt{color:#64748B}
/* ---- tournament: ways to use it, each with the settings to pick */
.rl-use{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:18px;padding:14px 16px;display:grid;gap:6px;align-content:start}
.rl-use>i{font-style:normal;font-size:30px;line-height:1}.rl-use h3{margin:2px 0 0;font:400 18px var(--font-heading);color:var(--text-primary)}
.rl-use p{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.5}
.rl-use .set{justify-self:start;margin-top:4px;border-radius:999px;padding:5px 10px;font:800 12px var(--font-body);color:#B45309;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4)}
:root:not([data-theme="light"]) .rl-use .set{color:#FCD34D}

/* ---- classroom hero: a projector screen over a row of student Chromebooks (school devices, not phones) */
.rl-cls{justify-self:center;width:min(480px,100%);display:grid;gap:14px}
.rl-cls .proj{position:relative;border-radius:14px;padding:14px;background:radial-gradient(120% 80% at 50% 0%,#1E3A8A,#0F172A 70%);color:#F8FAFC;box-shadow:0 0 0 6px #E2E8F0,0 0 0 8px #94A3B8,0 24px 50px rgba(2,6,23,.35);display:grid;gap:10px;overflow:hidden}
.rl-cls .proj::before{content:"";position:absolute;left:50%;top:-14px;width:120px;height:8px;margin-left:-60px;border-radius:4px;background:#94A3B8}
.pj-top{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px}.pj-top .live{background:#E11D48;border-radius:6px;padding:3px 7px;font-size:10px;letter-spacing:.1em}.pj-top .n{margin-left:auto;background:rgba(255,255,255,.12);border-radius:999px;padding:3px 9px}
.pj-code{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.pj-code .k{font:900 10px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#93C5FD}
.pj-code .tiles{display:flex;gap:5px}.pj-code .tiles i{font-style:normal;width:34px;height:38px;border-radius:8px;display:grid;place-items:center;font:400 22px var(--font-heading);background:#334155;transform:rotateX(90deg)}
.rl-cls.go .pj-code .tiles i{animation:rlFlip .5s ease-out var(--t) both}
.pj-tug .nm{display:flex;justify-content:space-between;font-weight:900;font-size:13px;margin-bottom:5px}.pj-tug .nm span:first-child{color:#FB7185}.pj-tug .nm span:last-child{color:#60A5FA}.pj-tug b{color:#fff;font-variant-numeric:tabular-nums}
.pj-tug .rope{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#1E293B}.pj-tug .rope i{display:block;height:100%;width:50%;transition:width .9s cubic-bezier(.3,1.3,.5,1)}.pj-tug .ra{background:#F43F5E}.pj-tug .rb{background:#3B82F6}
.pj-win{position:absolute;inset:auto 10px 10px;border-radius:12px;padding:10px;text-align:center;font:400 18px var(--font-heading);background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#3B2300;transform:translateY(130%);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.rl-cls.won .pj-win{transform:none}
.rl-cls .desks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 4px}
.lap{opacity:.35;transform:translateY(8px);transition:opacity .4s,transform .4s}.rl-cls.go .lap{animation:rlLapOn .45s ease-out var(--d) both}
.lap .scr{border-radius:6px 6px 0 0;border:3px solid #334155;border-bottom:0;background:#0F172A;padding:4px;display:grid;gap:3px;aspect-ratio:16/11}
.lap .who{display:flex;align-items:center;gap:3px;font:800 7.5px var(--font-body);color:#CBD5E1;white-space:nowrap;overflow:hidden}.lap .who img{width:11px;height:11px;border-radius:50%;flex:none}
.lap .mb{display:grid;gap:2px;justify-content:center}.lap .mr{display:flex;gap:2px}.lap .mr i{width:9px;height:9px;border-radius:2px;border:1px solid #334155}
.rl-cls.go .lap .mr i.g{animation:rlCell .3s ease-out var(--t) both;--to:#22C55E}.rl-cls.go .lap .mr i.y{animation:rlCell .3s ease-out var(--t) both;--to:#F59E0B}.rl-cls.go .lap .mr i.x{animation:rlCell .3s ease-out var(--t) both;--to:#475569}
.lap .base{height:7px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#94A3B8,#64748B);margin:0 -5px}
@keyframes rlLapOn{to{opacity:1;transform:none}}@keyframes rlCell{to{background:var(--to);border-color:var(--to)}}
@media (prefers-reduced-motion:reduce){.rl-cls *{animation:none!important;transition:none!important}.lap{opacity:1;transform:none}.pj-code .tiles i{transform:none;background:#22C55E}}

/* ---- timeline extras: icon + short line, the long text folds open */
.rl-tl li>div{display:grid;gap:2px}.rl-tl .ic{font-style:normal;font-size:24px;line-height:1}
.rl-tl .sh{color:var(--text-primary);font-weight:700;font-size:15px}
.rl-tl details summary{cursor:pointer;color:#3B82F6;font-weight:800;font-size:13px;list-style:none;display:inline-flex;gap:4px;align-items:center}.rl-tl details summary::after{content:"＋"}.rl-tl details[open] summary::after{content:"－"}
.rl-tl details summary{position:relative}.rl-tl details summary::before{content:'';position:absolute;inset:-9px -6px}   /* room for a finger, same look */
.rl-tl details summary::-webkit-details-marker{display:none}.rl-tl details p{margin-top:4px}
/* chalkboard lesson plan (classroom page) */
.rl-tl.chalk{background:linear-gradient(160deg,#1F3B2D,#173026);border-radius:24px;padding:22px 18px 4px;border:10px solid #8B5E3C;box-shadow:inset 0 0 40px rgba(0,0,0,.35),0 14px 30px rgba(2,6,23,.25)}
.rl-tl.chalk li>div{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.35)}.rl-tl.chalk b{color:#F8FAFC;font-family:'Fredoka One',var(--font-heading)}.rl-tl.chalk .sh{color:#E2E8F0}.rl-tl.chalk p{color:#CBD5E1}
.rl-tl.chalk .t{color:#FDE68A;background:rgba(253,230,138,.12);border-color:rgba(253,230,138,.45)}.rl-tl.chalk li::before{border-left-color:rgba(253,230,138,.35)}.rl-tl.chalk li>div::before{background:#FDE68A;box-shadow:0 0 0 4px rgba(253,230,138,.2)}
.rl-tl.chalk details summary{color:#FDE68A}
@media (max-width:520px){.rl-tl.chalk{border-width:6px;padding:16px 10px 2px}.rl-tl.chalk li::after{background:#FDE68A}}

/* ---- "ways to use it" tabs */
.rl-ut{display:grid;gap:12px}
.rl-ut-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.rl-ut-tabs button{flex:none;display:grid;justify-items:center;gap:4px;width:96px;padding:10px 6px;border-radius:16px;border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font:800 12px/1.2 var(--font-body);text-align:center;transition:transform .15s,border-color .2s}
.rl-ut-tabs button i{font-style:normal;font-size:28px}.rl-ut-tabs button:hover{transform:translateY(-2px)}
.rl-ut-tabs button[aria-selected="true"]{border-color:#F59E0B;background:linear-gradient(160deg,rgba(245,158,11,.22),var(--bg-card));box-shadow:0 4px 0 #D97706}
.rl-ut-p{display:flex;gap:18px;align-items:center;border-radius:22px;padding:20px;background:radial-gradient(90% 120% at 0% 50%,rgba(245,158,11,.18),transparent 60%),var(--bg-card);border:1px solid rgba(245,158,11,.35)}
.rl-ut-p[data-off]{display:none}.rl-ut-p.pop{animation:jnIn2 .35s cubic-bezier(.3,1.4,.5,1)}
.rl-ut-p .big{font-size:64px;line-height:1;flex:none;animation:rmBob 3s ease-in-out infinite}.rl-ut-p h3{margin:0 0 4px;font:400 22px var(--font-heading);color:var(--text-primary)}.rl-ut-p p{margin:0 0 10px;color:var(--text-secondary);line-height:1.55}
.rl-ut-p .set{display:flex;flex-wrap:wrap;gap:6px}.rl-ut-p .set span{border-radius:999px;padding:5px 11px;font:800 12.5px var(--font-body);color:#B45309;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4)}
:root:not([data-theme="light"]) .rl-ut-p .set span{color:#FCD34D}
@media (max-width:520px){.rl-ut-p{flex-direction:column;align-items:flex-start;padding:16px}.rl-ut-p .big{font-size:48px}}

/* ---- rules as cards */
.rl-rules ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}
.rl-rules li{border:1px solid rgba(148,163,184,.3)!important;border-radius:16px;padding:14px 14px 14px 56px;background:rgba(148,163,184,.06)}
.rl-rules li::before{left:12px;top:14px}.rl-rules li .ic{font-style:normal;position:absolute;right:12px;top:10px;font-size:22px;opacity:.85}
.rl-rules li b{display:block;font:400 17px var(--font-heading);margin-bottom:2px;padding-right:28px}
.rl-rules{padding:16px}

/* ---- bracket sizes as pictures */
.rl-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px}
.rl-size{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:18px;padding:12px;display:grid;gap:8px;align-content:start}
.rl-size .hd b{font:400 26px var(--font-heading);color:var(--text-primary)}.rl-size .hd span{color:var(--text-secondary);font-weight:800;font-size:12px;margin-left:4px}
.rl-size .dots{display:flex;flex-wrap:wrap;gap:3px;min-height:46px;align-content:flex-start}
.rl-size .dots i{width:9px;height:9px;border-radius:50%;background:#F59E0B;opacity:0;transform:scale(.3)}
.rl-reveal.in .rl-size .dots i,.rl-sizes.in .dots i{animation:rlPop .3s ease-out calc(var(--i) * 12ms) both;opacity:1}
.rl-size .ft{display:grid;gap:1px;font-size:12.5px;font-weight:800;color:var(--text-secondary)}.rl-size .ft span:first-child{color:var(--text-primary);font-size:14px}

/* ---- team play pictures (classroom page) */
.rl-tp3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.rl-tp{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:20px;padding:16px;display:grid;gap:8px;align-content:start}
.rl-tp h3{margin:0;font:400 19px var(--font-heading);color:var(--text-primary)}.rl-tp p{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.5}
.rl-tp .vis{height:96px;border-radius:14px;background:#0F172A;position:relative;overflow:hidden;display:grid;place-items:center;padding:10px}
.v-solo{gap:4px;place-items:stretch!important}.v-solo i{display:block;height:6px;border-radius:3px;background:#1E293B}.v-solo b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#22C55E,#3B82F6);transform-origin:left;animation:tpGrow 3s ease-in-out infinite;animation-delay:calc(var(--i) * .1s)}
.v-groups{display:block!important}.v-groups i{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#94A3B8;left:var(--x0);top:50%;animation:tpGroup 4.5s ease-in-out infinite}
.v-groups i:nth-child(3n+1){--c:#F43F5E}.v-groups i:nth-child(3n+2){--c:#3B82F6}.v-groups i:nth-child(3n){--c:#22C55E}
@keyframes tpGroup{0%,15%{left:var(--x0);top:50%;background:#94A3B8}45%,85%{left:var(--x1);top:var(--y1);background:var(--c)}100%{left:var(--x0);top:50%;background:#94A3B8}}
@keyframes tpTug{0%,100%{background-position:40% 0}50%{background-position:60% 0}}@keyframes tpMark{0%,100%{left:58%}50%{left:42%}}
@media (prefers-reduced-motion:reduce){.rl-tp .vis *{animation:none!important}}
/* classroom hero: bigger screen, the winner banner gets its own space under the rope */
.rl-cls{width:min(520px,100%)}.rl-cls .proj{padding:16px 16px 70px;gap:14px;min-height:230px}
.pj-code .tiles i{width:40px;height:46px;font-size:26px}.pj-tug .rope{height:18px;border-radius:9px}.pj-tug .nm{font-size:15px}
.pj-win{inset:auto 14px 14px}
.lap .mr i{width:11px;height:11px}.lap .who{font-size:8.5px}
@media (max-width:420px){.pj-code .tiles i{width:32px;height:36px;font-size:20px}.lap .mr i{width:8px;height:8px}.lap .who{font-size:7px}.rl-cls .desks{gap:6px}}
.v-sides{place-items:center stretch!important}.v-sides .rope{width:100%}.v-sides span{white-space:nowrap}
.rl-sizes{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:640px){.rl-sizes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pj-win{visibility:hidden}.rl-cls.won .pj-win{visibility:visible}@media (min-width:700px){.rl-ut-tabs{flex-wrap:wrap;overflow:visible}}
.v-sides{grid-template-columns:auto 1fr auto;gap:8px;color:#fff;font-weight:900;font-size:13px}
.v-sides .rope{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,#F43F5E 50%,#3B82F6 50%);background-size:200% 100%;animation:tpTug 3s ease-in-out infinite}
.v-sides em{position:absolute;top:-4px;bottom:-4px;left:50%;width:4px;margin-left:-2px;background:#fff;border-radius:2px;animation:tpMark 3s ease-in-out infinite}
@keyframes tpGrow{0%{transform:scaleX(.15)}60%,100%{transform:scaleX(1)}}
:root[data-theme="light"] .rl-tl.chalk .t{color:#FDE68A}

/* tournament page buttons: what the visitor has, and the one-line rule */
.rl-ctanote{flex-basis:100%;color:var(--text-secondary);font-weight:700;font-size:13px}
.rl-have{align-self:center;font-weight:900;font-size:14px;color:#15803D;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);border-radius:999px;padding:8px 14px}
:root:not([data-theme="light"]) .rl-have{color:#86EFAC}
.rl-end .rl-ctanote{color:#BFDBFE}.rl-end .rl-have{color:#BBF7D0}

/* classroom page: three doors (student game · teacher · join) */
.rl-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.rl .rl-door{display:grid;gap:3px;align-content:start;text-decoration:none;border-radius:18px;padding:14px;color:#fff;box-shadow:0 5px 0 var(--sh);transition:transform .15s}
.rl .rl-door:hover{transform:translateY(-3px)}.rl-door i{font-style:normal;font-size:30px;line-height:1}.rl-door b{font:400 18px/1.15 var(--font-heading)}.rl-door span{font-size:13px;font-weight:700;opacity:.92;line-height:1.35}
.rl-door.d-s{background:linear-gradient(150deg,#8B5CF6,#6D28D9);--sh:#4C1D95}.rl-door.d-t{background:linear-gradient(150deg,#EC4899,#BE185D);--sh:#831843}.rl-door.d-j{background:linear-gradient(150deg,#10B981,#047857);--sh:#064E3B}
.rl-door b,.rl-door span{text-shadow:0 1px 2px rgba(0,0,0,.25)}
@media (max-width:640px){.rl-doors{grid-template-columns:1fr}.rl-door{grid-template-columns:auto 1fr;column-gap:12px}.rl-door i{grid-row:span 2;align-self:center}}

/* classroom: three ways to play (cards with what you get + a button) */
.rl-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.rl-path{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-top:6px solid var(--pc);border-radius:20px;padding:16px;display:grid;gap:10px;align-content:start}
.rl-path .hd{display:flex;gap:10px;align-items:center}.rl-path .hd i{font-style:normal;font-size:34px}.rl-path h3{margin:0;font:400 20px var(--font-heading);color:var(--text-primary)}.rl-path .hd span{color:var(--text-secondary);font-weight:800;font-size:12.5px}
.rl-path ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}.rl-path li{position:relative;padding-left:22px;color:var(--text-secondary);font-size:14.5px;line-height:1.45}.rl-path li::before{content:"✓";position:absolute;left:0;color:var(--pc);font-weight:900}
.rl .rl-path .rm-btn{background:var(--pc);box-shadow:0 4px 0 rgba(0,0,0,.25);color:#fff;font-size:16px;padding:12px;align-self:end}
/* classroom: every word comes with its meaning */
.rl-wc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:22px;padding:18px}
.rl-wc .txt p{color:var(--text-secondary);line-height:1.55;margin:0 0 8px}.rl-wc .txt ul{margin:0;padding-left:18px;color:var(--text-secondary);list-style:disc}
.rl-wc-demo{border-radius:18px;padding:16px;background:radial-gradient(120% 80% at 50% 0%,#1E3A8A,#0F172A 70%);display:grid;gap:12px;justify-items:center}
.rl-wc-demo .tiles{display:flex;gap:5px}.rl-wc-demo .tiles i{font-style:normal;width:38px;height:42px;border-radius:8px;display:grid;place-items:center;font:400 22px var(--font-heading);color:#fff;background:#334155}
.rl-reveal.in .rl-wc-demo .tiles i{animation:rlFlip .5s ease-out var(--d) both}
.rl-wc-demo .card{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(148,163,184,.3);border-left:4px solid #22C55E;border-radius:12px;padding:10px 12px;color:#E2E8F0;opacity:0;transform:translateY(8px)}
.rl-reveal.in .rl-wc-demo .card{animation:rlBkIn .5s ease-out .9s both}
.rl-wc-demo .card b{font:400 18px var(--font-heading);letter-spacing:.06em;color:#fff;margin-right:8px}.rl-wc-demo .card em{color:#93C5FD;font-size:13px;font-weight:700}
.rl-wc-demo .card p{margin:4px 0 0;font-size:14.5px;color:#E2E8F0}.rl-wc-demo .card small{display:block;margin-top:4px;color:#94A3B8;font-style:italic;font-size:13px}
@media (max-width:720px){.rl-wc{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rl-wc-demo .card{opacity:1;transform:none}.rl-wc-demo .tiles i{background:#22C55E}}
/* team picture: colour teams */
.v-colors{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px;place-items:stretch!important}
.v-colors span{border-radius:10px;display:grid;place-items:center;color:#fff;font:900 12px var(--font-body);position:relative;overflow:hidden}
.v-colors span b{font-size:18px;animation:tpCount 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tpCount{0%,20%{transform:scale(1)}30%{transform:scale(1.35)}40%,100%{transform:scale(1)}}
.rl-hero .rl-doors{grid-template-columns:1fr}.rl-hero .rl-door{grid-template-columns:auto 1fr;column-gap:14px;padding:12px 16px}.rl-hero .rl-door i{grid-row:span 2;align-self:center;font-size:32px}
.rl-hero .rl-door{text-align:left;justify-items:start}

/* comparison tables: the first cell of each row is a row header (th scope=row), styled like the old first cell */
.rl-tw th[scope=row],:root[data-theme="light"] .rl-tw th[scope=row]{font-size:14.5px;letter-spacing:0;text-transform:none;font-weight:800;color:var(--text-primary)}
.rl-tw tr:last-child th[scope=row]{border-bottom:0}
@media (max-width:640px){
  .rl-tw table.rl-stack th[scope=row]{display:block;width:100%;text-align:left;font:400 17px var(--font-heading);border-bottom:2px solid rgba(59,130,246,.4);padding:7px 0 6px}
}