@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

@font-face {
    font-family: "AA Galaxy";
    src: url('/fonts/AAGalaxy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Arcade / game-show palette (dark base + neon primaries) ===== */
:root {
    --c-bg: #0D1B4A;
    --c-purple-deep: #1A0A2E;
    --c-teal-deep: #0A2A2A;
    --c-yellow: #FFB800;
    --c-coral: #FF1A1A;
    --c-cyan: #00E5FF;
    --c-purple: #A855F7;
    --c-lime: #00E676;
    --c-orange: #FF6B00;
    /* Vivid “night sky” base + radial glows (shared site-wide) */
    --bg-vivid-linear: linear-gradient(
        135deg,
        #2D0B5A 0%,
        #1A0A3E 20%,
        #0D1B4A 45%,
        #0A3A4A 70%,
        #1A2A0A 100%
    );
    --bg-vivid-glows:
        radial-gradient(ellipse 80% 70% at 20% 50%, rgba(168, 85, 247, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 80% 20%, rgba(255, 45, 107, 0.2) 0%, transparent 45%),
        radial-gradient(ellipse 65% 55% at 60% 80%, rgba(0, 229, 255, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse 55% 50% at 10% 90%, rgba(0, 230, 118, 0.12) 0%, transparent 35%);
    --bg-vivid-stack: var(--bg-vivid-glows), var(--bg-vivid-linear);
    /* Frosted strips: navbar + footer (same opacity / blur as each other) */
    --nav-glass-bg: rgba(255, 255, 255, 0.04);
    --nav-glass-blur: 20px;
    --nav-glass-border: rgba(255, 255, 255, 0.08);
    --nav-glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    /* Aliases for components that expect a single linear gradient */
    --gradient-page: var(--bg-vivid-linear);
    --gradient-page-vertical: linear-gradient(
        180deg,
        #2D0B5A 0%,
        #1A0A3E 22%,
        #0D1B4A 48%,
        #0A3A4A 72%,
        #152818 100%
    );
    /* Home hero: translucent color washes over the same sky (body shows through) */
    --gradient-hero:
        radial-gradient(ellipse 88% 72% at 50% 12%, rgba(168, 85, 247, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 58% 48% at 92% 32%, rgba(255, 45, 107, 0.14) 0%, transparent 48%),
        radial-gradient(ellipse 52% 42% at 6% 58%, rgba(0, 229, 255, 0.14) 0%, transparent 46%),
        radial-gradient(ellipse 50% 45% at 78% 88%, rgba(0, 230, 118, 0.1) 0%, transparent 42%);
    --glass-panel-bg: rgba(255, 255, 255, 0.04);
    --glass-panel-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-blur: blur(8px);
    --radius-playful: 20px;
    --font-sans: "AA Galaxy", "Cairo", system-ui, sans-serif;
    --team-red: #FF1A1A;
    --team-green: #00E676;
}

@keyframes btn-primary-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(255, 184, 0, 0.55),
            0 0 32px rgba(255, 107, 0, 0.35),
            0 6px 22px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow:
            0 0 28px rgba(255, 184, 0, 0.95),
            0 0 48px rgba(255, 107, 0, 0.65),
            0 8px 28px rgba(255, 107, 0, 0.45);
    }
}

@keyframes btn-secondary-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(0, 229, 255, 0.45),
            0 0 28px rgba(168, 85, 247, 0.35),
            0 6px 20px rgba(0, 0, 0, 0.45);
    }
    50% {
        box-shadow:
            0 0 26px rgba(0, 229, 255, 0.75),
            0 0 42px rgba(168, 85, 247, 0.55),
            0 8px 26px rgba(168, 85, 247, 0.4);
    }
}

body {
    font-family: var(--font-sans);
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    color: #eee;
    min-height: 100vh;
}

/* ===== Unified form fields (all pages): inputs, textareas, selects ===== */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]),
textarea,
select {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"])::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
select:focus {
    border-color: #FFB800;
    box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.2);
    outline: none;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]):disabled,
textarea:disabled,
select:disabled,
input.account-input--disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.65);
}

select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.07);
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: 2.25rem;
}

select option {
    background: #1A0A3E;
    color: #ffffff;
}

/* Keep autofill from washing out unified field style (Chrome/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
input:autofill,
textarea:autofill,
select:autofill {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset !important;
    transition: background-color 99999s ease-out 0s;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset, 0 0 0 3px rgba(255, 184, 0, 0.2) !important;
    box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset, 0 0 0 3px rgba(255, 184, 0, 0.2) !important;
    border-color: #FFB800 !important;
}

/* Extra coverage for login/register forms in Safari/iOS */
.lobby-form input:-webkit-autofill,
.lobby-form input:-webkit-autofill:hover,
.lobby-form input:-webkit-autofill:focus,
.lobby-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.lobby-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset, 0 0 0 3px rgba(255, 184, 0, 0.2) !important;
    box-shadow: 0 0 0 1000px rgba(35, 38, 58, 0.95) inset, 0 0 0 3px rgba(255, 184, 0, 0.2) !important;
    border-color: #FFB800 !important;
}

/* Back button (lobby / create-game / join…): fixed top-right, purple glass pill, white border — matches إنشاء غرفة */
.back-btn {
    position: fixed;
    top: 6rem;
    right: 6rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem;
    background: rgba(168, 85, 247, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 24px rgba(168, 85, 247, 0.2);
}
.back-btn:hover {
    transform: scale(1.05);
    background: rgba(168, 85, 247, 0.4);
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25), 0 0 32px rgba(168, 85, 247, 0.35);
}

button.back-btn {
    font: inherit;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* ===== Waiting room: remove slot button ===== */
.player-slot.joined {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.player-slot-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-slot-remove {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 26, 26, 0.18);
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
.player-slot-remove:hover {
    background: rgba(255, 26, 26, 0.28);
    border-color: rgba(255, 255, 255, 0.42);
}

/* ===== Judge admin menu (kick players) ===== */
.judge-admin-toggle {
    position: fixed;
    top: 6rem;
    left: 6rem;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.05rem;
    background: rgba(0, 229, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 24px rgba(0, 229, 255, 0.14);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.judge-admin-toggle:hover {
    transform: scale(1.05);
    background: rgba(0, 229, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25), 0 0 32px rgba(0, 229, 255, 0.25);
}

.judge-admin-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 6.6rem);
    left: 6rem;
    width: min(360px, calc(100vw - 2.5rem));
    max-height: min(62vh, 520px);
    z-index: 121;
}
.judge-admin-panel-inner {
    padding: 12px 12px;
    background: rgba(15, 18, 34, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 60px rgba(0,0,0,0.52);
    overflow: auto;
}
.judge-admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.judge-admin-close {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.judge-admin-close:hover {
    background: rgba(255, 255, 255, 0.1);
}
.judge-admin-title {
    font-weight: 900;
    margin-bottom: 10px;
}
.judge-admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.judge-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.judge-admin-name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.judge-admin-kick {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 26, 26, 0.18);
    color: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    flex: 0 0 auto;
}
.judge-admin-kick:hover {
    background: rgba(255, 26, 26, 0.28);
    border-color: rgba(255, 255, 255, 0.42);
}
.judge-admin-empty {
    opacity: 0.8;
    padding: 8px 4px;
}

@media (max-width: 768px) {
    .judge-admin-toggle {
        top: calc(env(safe-area-inset-top) + 4.5rem);
        left: 1rem;
        right: auto;
        padding: 0.5rem 0.9rem;
        min-height: 44px;
    }
    .judge-admin-panel {
        top: calc(env(safe-area-inset-top) + 7.4rem);
        left: 1rem;
    }
}

@media (max-width: 768px) {
    .back-btn {
        top: calc(env(safe-area-inset-top) + 4.5rem);
        right: 1rem;
        left: auto;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        min-height: 44px;
        align-items: center;
    }
}

/* ====== HOME ====== */

.home-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: global body --bg-vivid-stack */
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .home-body {
        scroll-behavior: auto;
    }
}

.home-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 3rem;
}

/* Hero section: full width, Seen Jeem style, buttons at the end */
.home-hero {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: calc(100vh - 4rem);
    min-height: calc(100svh - 4rem);
    padding: calc(5rem + 2rem) 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--gradient-hero);
    overflow: visible;
}

.home-hero-waves {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 85% 55% at 50% 0%, rgba(255, 26, 26, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse 70% 45% at 85% 75%, rgba(168, 85, 247, 0.16) 0%, transparent 48%),
        radial-gradient(ellipse 65% 40% at 15% 60%, rgba(0, 229, 255, 0.14) 0%, transparent 46%),
        radial-gradient(ellipse 55% 35% at 80% 20%, rgba(0, 230, 118, 0.1) 0%, transparent 42%),
        radial-gradient(ellipse 50% 30% at 25% 80%, rgba(255, 184, 0, 0.12) 0%, transparent 40%);
    pointer-events: none;
}

.home-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.home-hero-hexes {
    z-index: 0;
}

.home-hero-logo {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    pointer-events: none;
}

.home-hero-tagline {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.home-hero-spacer {
    flex: 1;
    min-height: 2rem;
}


/* Buttons at bottom, overlapping curve - bottom disappears into curve (Seen Jeem style) */
.home-hero-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4; /* above curve; hero CTAs stay clickable via .home-game-info pointer-events */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem 2.5rem;
    width: 100%;
    box-sizing: border-box;
    transform: translateY(-30px);
    background: transparent;
}

.home-hero-buttons .home-buttons {
    background: transparent;
}

.home-admin-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 30;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.home-admin-link--mobile {
    display: none;
}

.home-admin-link:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.home-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 0.75rem;
    animation: home-logo-float 3.5s ease-in-out infinite;
}

@keyframes home-logo-float {
    0% {
        transform: translateY(0) skewX(-8deg);
    }
    50% {
        transform: translateY(-10px) skewX(-8deg);
    }
    100% {
        transform: translateY(0) skewX(-8deg);
    }
}

.home-title {
    font-size: 3.2rem;
    font-weight: 800;
    background: linear-gradient(120deg, #FFB800 0%, #FF1A1A 45%, #00E5FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    animation: titleGlow 3s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 14px rgba(255, 184, 0, 0.45)) drop-shadow(0 0 22px rgba(255, 26, 26, 0.35));
}

@keyframes titleGlow {
    from { filter: drop-shadow(0 0 14px rgba(255, 184, 0, 0.45)) drop-shadow(0 0 22px rgba(255, 26, 26, 0.35)) brightness(1); }
    to { filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.5)) drop-shadow(0 0 28px rgba(168, 85, 247, 0.4)) brightness(1.2); }
}

.home-tagline {
    font-size: 1.05rem;
    color: #f7f0ff;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.home-hex-icon {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.25rem;
}

.home-hex-sample {
    width: 60px;
    height: 68px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
}

.hex-sample-red {
    background: #FF1A1A;
}

.hex-sample-star {
    background: #FF6B00;
    width: 72px;
    height: 82px;
    font-size: 2rem;
}

.hex-sample-green {
    background: #00E676;
}

.home-play-btn {
    display: inline-block;
    padding: 1rem 4rem;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-playful);
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #0D1B2A;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.home-play-btn:hover {
    transform: scale(1.05);
}

.home-play-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #E6A600 0%, #D45A00 100%);
    color: #fff;
    animation: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.home-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* Seen Jeem style: buttons next to each other */
.home-buttons--seen-jeem {
    flex-direction: row;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.home-action-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.25rem 1.75rem 2.5rem;
    padding-top: 3.5rem;
    min-width: 160px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
    border-radius: var(--radius-playful);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.home-action-card:hover {
    transform: scale(1.05);
}

.home-action-card:active {
    transform: scale(0.98);
}

.home-action-card-icon {
    position: absolute;
    top: -1.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    z-index: 1;
    /* Badge overlaps both button and background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.home-action-card .home-action-card-icon {
    background: #FFB800;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    font-size: 1.65rem;
}

.home-action-card--join .home-action-card-icon {
    background: linear-gradient(135deg, #00E5FF, #A855F7);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.home-action-card-text {
    text-align: center;
    line-height: 1.35;
    color: #fff;
}

/* Apply existing button colors to action cards */
.home-action-card--primary {
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #fff;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.home-action-card--primary:hover {
    box-shadow:
        0 0 32px rgba(255, 184, 0, 0.65),
        0 0 48px rgba(255, 107, 0, 0.35),
        0 12px 36px rgba(0, 0, 0, 0.45);
}

.home-action-card--tournament {
    background: linear-gradient(135deg, #A855F7 0%, #6B2D9A 100%);
    color: #fff;
    animation: btn-secondary-glow-pulse 2.6s ease-in-out infinite;
}

.home-action-card--tournament:hover {
    box-shadow:
        0 0 28px rgba(168, 85, 247, 0.55),
        0 0 44px rgba(107, 45, 154, 0.4),
        0 12px 36px rgba(0, 0, 0, 0.45);
}

.home-action-card--tournament .home-action-card-icon {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    font-size: 1.35rem;
    line-height: 1;
}

.home-action-card--join {
    background: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
    color: #fff;
    animation: btn-secondary-glow-pulse 2.6s ease-in-out infinite;
}

.home-action-card--join:hover {
    box-shadow:
        0 0 32px rgba(0, 229, 255, 0.55),
        0 0 48px rgba(168, 85, 247, 0.4),
        0 12px 36px rgba(0, 0, 0, 0.45);
}

.home-login-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.home-login-note a {
    color: #00E5FF;
    text-decoration: none;
    font-weight: 600;
}

.home-login-note a:hover {
    color: #66F0FF;
}

.home-join-btn {
    display: inline-block;
    padding: 0.8rem 4rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: var(--radius-playful);
    border: none;
    background: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
    color: #0D1B2A;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background 0.2s;
    animation: btn-secondary-glow-pulse 2.6s ease-in-out infinite;
}

.home-join-btn:hover {
    transform: scale(1.05);
}

.home-join-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #00B8CC 0%, #7C3AED 100%);
    color: #fff;
    animation: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.home-quick-btn {
    display: none; /* board test button hidden */
    padding: 0.75rem 3.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 999px;
    border: none;
    background: #ff7043;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.home-quick-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 26px rgba(255, 112, 67, 0.55);
    background: #ff5722;
}

.home-quick-result-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 184, 0, 0.95);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 184, 0, 0.5);
    padding: 0.35rem 0.5rem;
    transition: color 0.2s, border-color 0.2s;
}
.home-quick-result-link:hover {
    color: #FFB800;
    border-color: #FFB800;
}

/* Game info section: full width, info first, big card with category cards (Seen Jeem style) */
.home-game-info {
    position: relative;
    z-index: 2;
    width: 92%;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.home-game-info-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    text-align: center;
    background: linear-gradient(100deg, #FFB800 0%, #FF1A1A 55%, #FFB800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.4)) drop-shadow(0 0 18px rgba(255, 26, 26, 0.3));
}

.home-game-info-summary {
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    margin-bottom: 1.75rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Card wrapper with overlapping label */
.home-game-info-card-wrapper {
    position: relative;
    margin-top: 1.75rem;
}

/* FAQ / in-page link: land below fixed header */
#home-categories {
    scroll-margin-top: 6.5rem;
}

.home-game-info-card-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Big card container */
.home-game-info-card {
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    border-radius: var(--radius-playful);
    padding: 3.25rem;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Grid of small category cards - 6 per row */
.home-category-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2.25rem;
}

.home-category-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-playful);
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

.home-category-card:hover {
    transform: scale(1.03) translateY(-2px);
}

.home-category-card-illustration {
    position: relative;
    flex-shrink: 0;
    min-height: 165px;
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 230, 118, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.home-category-card-illustration:has(.home-category-card-img) {
    padding: 0;
    display: block;
    height: 165px;
    min-height: 165px;
}

.home-category-card-icon {
    font-size: 4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.home-category-card-icon--fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-category-card-icon--hidden {
    display: none !important;
}

.home-category-card-img {
    display: block;
    width: 100%;
    height: 165px;
    object-fit: cover;
    object-position: center;
}

.home-category-card-label {
    flex: 1 0 auto;
    width: 100%;
    padding: 8px 12px;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: #0D1B2A;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 800;
    line-height: 1.3;
    white-space: normal;
    box-sizing: border-box;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Category cards: unique neon gradients (12 variants, repeats after 12) */
.home-category-cards-grid .home-category-card:nth-child(12n + 1) {
    background: linear-gradient(180deg, rgba(255, 184, 0, 0.22) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(255, 184, 0, 0.45);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 1) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(255, 184, 0, 0.4) 0%, rgba(255, 107, 0, 0.12) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 1) .home-category-card-label {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 1):hover {
    box-shadow: 0 0 36px rgba(255, 184, 0, 0.55), 0 12px 40px rgba(255, 107, 0, 0.25);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 2) {
    background: linear-gradient(180deg, rgba(255, 26, 26, 0.2) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(255, 26, 26, 0.45);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 2) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(255, 26, 26, 0.38) 0%, rgba(168, 85, 247, 0.15) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 2) .home-category-card-label {
    background: linear-gradient(135deg, #FF1A1A, #A855F7);
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 26, 26, 0.5);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 2):hover {
    box-shadow: 0 0 36px rgba(255, 26, 26, 0.55), 0 12px 40px rgba(168, 85, 247, 0.3);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 3) {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.18) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(0, 229, 255, 0.4);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 3) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.35) 0%, rgba(0, 230, 118, 0.12) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 3) .home-category-card-label {
    background: linear-gradient(135deg, #00E5FF, #00E676);
    color: #0D1B2A;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 3):hover {
    box-shadow: 0 0 36px rgba(0, 229, 255, 0.5), 0 12px 40px rgba(0, 230, 118, 0.25);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 4) {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.2) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(168, 85, 247, 0.45);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 4) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.38) 0%, rgba(255, 184, 0, 0.1) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 4) .home-category-card-label {
    background: linear-gradient(135deg, #A855F7, #FFB800);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 4):hover {
    box-shadow: 0 0 36px rgba(168, 85, 247, 0.55), 0 12px 40px rgba(255, 184, 0, 0.2);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 5) {
    background: linear-gradient(180deg, rgba(0, 230, 118, 0.16) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(0, 230, 118, 0.4);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 5) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(0, 230, 118, 0.3) 0%, rgba(255, 26, 26, 0.12) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 5) .home-category-card-label {
    background: linear-gradient(135deg, #00E676, #FF1A1A);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 5):hover {
    box-shadow: 0 0 36px rgba(0, 230, 118, 0.45), 0 12px 40px rgba(255, 26, 26, 0.2);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 6) {
    background: linear-gradient(180deg, rgba(255, 184, 0, 0.14) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(0, 229, 255, 0.35);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 6) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(255, 184, 0, 0.28) 0%, rgba(0, 229, 255, 0.2) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 6) .home-category-card-label {
    background: linear-gradient(135deg, #FFB800, #00E5FF);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 6):hover {
    box-shadow: 0 0 36px rgba(255, 184, 0, 0.45), 0 12px 40px rgba(0, 229, 255, 0.3);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 7) {
    background: linear-gradient(180deg, rgba(255, 26, 26, 0.14) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(0, 229, 255, 0.38);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 7) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(255, 26, 26, 0.32) 0%, rgba(0, 229, 255, 0.15) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 7) .home-category-card-label {
    background: linear-gradient(135deg, #FF1A1A, #00E5FF);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 7):hover {
    box-shadow: 0 0 36px rgba(255, 26, 26, 0.45), 0 12px 40px rgba(0, 229, 255, 0.28);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 8) {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.14) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(0, 230, 118, 0.35);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 8) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.32) 0%, rgba(0, 230, 118, 0.14) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 8) .home-category-card-label {
    background: linear-gradient(135deg, #A855F7, #00E676);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 8):hover {
    box-shadow: 0 0 36px rgba(168, 85, 247, 0.5), 0 12px 40px rgba(0, 230, 118, 0.25);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 9) {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.14) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(168, 85, 247, 0.4);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 9) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.3) 0%, rgba(168, 85, 247, 0.2) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 9) .home-category-card-label {
    background: linear-gradient(135deg, #00E5FF, #A855F7);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 9):hover {
    box-shadow: 0 0 36px rgba(0, 229, 255, 0.5), 0 12px 40px rgba(168, 85, 247, 0.3);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 10) {
    background: linear-gradient(180deg, rgba(0, 230, 118, 0.12) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(255, 184, 0, 0.38);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 10) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(0, 230, 118, 0.26) 0%, rgba(255, 184, 0, 0.15) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 10) .home-category-card-label {
    background: linear-gradient(135deg, #00E676, #FFB800);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 10):hover {
    box-shadow: 0 0 36px rgba(0, 230, 118, 0.4), 0 12px 40px rgba(255, 184, 0, 0.25);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 11) {
    background: linear-gradient(180deg, rgba(255, 26, 26, 0.12) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(0, 230, 118, 0.38);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 11) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(255, 26, 26, 0.28) 0%, rgba(0, 230, 118, 0.14) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 11) .home-category-card-label {
    background: linear-gradient(135deg, #FF1A1A, #00E676);
    color: #0D1B2A;
}
.home-category-cards-grid .home-category-card:nth-child(12n + 11):hover {
    box-shadow: 0 0 36px rgba(255, 26, 26, 0.45), 0 12px 40px rgba(0, 230, 118, 0.22);
}

.home-category-cards-grid .home-category-card:nth-child(12n + 12) {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.12) 0%, rgba(13, 27, 42, 0.92) 55%);
    border-color: rgba(255, 26, 26, 0.38);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 12) .home-category-card-illustration {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.26) 0%, rgba(255, 26, 26, 0.16) 100%);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 12) .home-category-card-label {
    background: linear-gradient(135deg, #A855F7, #FF1A1A);
    color: #fff;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}
.home-category-cards-grid .home-category-card:nth-child(12n + 12):hover {
    box-shadow: 0 0 36px rgba(168, 85, 247, 0.45), 0 12px 40px rgba(255, 26, 26, 0.28);
}

/* كيف تلعب؟ section - full width, same style as game info */
.home-how-to-play {
    position: relative;
    z-index: 2;
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: -1px;
    padding-top: calc(2.5rem + 1px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.home-how-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
    background: linear-gradient(100deg, #00E5FF 0%, #A855F7 50%, #00E5FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.35));
}

.home-how-card {
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    border-radius: var(--radius-playful);
    padding: 3rem;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    max-width: 720px;
    margin: 0 auto;
    text-align: right;
}
.home-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}
.home-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}
.home-step:last-child {
    margin-bottom: 0;
}
.home-step-num {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(255, 184, 0, 0.25);
    border: 1px solid rgba(255, 184, 0, 0.5);
    color: #FFB800;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الأسئلة الشائعة — home */
.faq-section {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 60px auto 0;
    padding: 60px 20px 3rem;
    border-top: 1px solid rgba(255, 184, 0, 0.15);
}

.faq-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 4vw, 1.75rem);
    margin-bottom: 40px;
    padding-top: 16px;
}

.faq-title-decor {
    flex-shrink: 0;
    width: 44px;
    height: 51px;
    position: relative;
    pointer-events: none;
}

.faq-title-decor .faq-title-hex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.faq-title-hex--gold {
    background: rgba(255, 184, 0, 0.58);
    filter: blur(0) drop-shadow(0 0 18px rgba(255, 184, 0, 0.75)) drop-shadow(0 0 36px rgba(255, 184, 0, 0.35));
    animation-delay: -2s;
}

.faq-title-hex--violet {
    background: rgba(168, 85, 247, 0.52);
    filter: blur(0) drop-shadow(0 0 18px rgba(168, 85, 247, 0.72)) drop-shadow(0 0 36px rgba(168, 85, 247, 0.32));
    animation-delay: -5.5s;
}

.faq-title-inner {
    text-align: center;
    flex: 0 1 auto;
    min-width: 0;
}

.faq-title {
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 8px;
    line-height: 1.2;
}

.faq-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}

.faq-item:hover {
    border-color: rgba(255, 184, 0, 0.3);
}

.faq-item.open {
    border-color: rgba(255, 184, 0, 0.5);
    background: rgba(255, 184, 0, 0.04);
}

.faq-question {
    padding: 18px 20px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    -webkit-user-select: none;
    user-select: none;
    text-align: right;
    font-family: inherit;
    background: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-question-text {
    flex: 1;
    text-align: right;
    line-height: 1.45;
}

.faq-question:hover {
    color: #FFB800;
}

.faq-item.open .faq-question {
    color: #FFB800;
}

.faq-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 184, 0, 0.1);
    border: 1.5px solid rgba(255, 184, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #FFB800;
    transition: transform 0.3s, background 0.3s;
    box-sizing: border-box;
}

.faq-arrow svg {
    width: 14px;
    height: 14px;
    display: block;
    margin: auto;
}

.faq-arrow .faq-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    background: rgba(255, 184, 0, 0.2);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, padding 0.35s ease;
    padding: 0 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    line-height: 1.8;
    text-align: right;
}

.faq-item.open .faq-answer {
    max-height: 640px;
    padding: 0 20px 18px;
}

.faq-answer strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
}

.faq-answer .faq-answer-text {
    margin: 0 0 14px;
}

.faq-to-categories-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 10px 20px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    border: 2px solid rgba(255, 184, 0, 0.45);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.2), rgba(255, 107, 0, 0.12));
    color: #FFB800;
    box-shadow: 0 0 18px rgba(255, 184, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}

.faq-to-categories-btn:hover {
    color: #fff;
    border-color: #FFB800;
    box-shadow: 0 0 24px rgba(255, 184, 0, 0.35);
    transform: translateY(-1px);
}

.faq-to-categories-btn:focus-visible {
    outline: 2px solid #FFB800;
    outline-offset: 3px;
}

/* Below FAQ: Seen Jeem–style split (copy RTL + device mockups), Taqato3 theme */
.home-ready-play {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.75rem 1.25rem 3.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.home-ready-play-shell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.25rem);
    padding: clamp(1.85rem, 3.5vw, 3rem) clamp(1.35rem, 3vw, 2.75rem);
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* RTL row: first child = copy on the right, second = visuals on the left */
.home-ready-play-copy {
    flex: 1 1 44%;
    min-width: min(100%, 260px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.home-ready-play-title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.75rem, 4.5vw, 2.45rem);
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.35);
}

.home-ready-play-sub {
    margin: 0;
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    max-width: 20em;
}

.home-ready-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.65rem;
    padding: 1rem 2.65rem;
    font-size: 1.08rem;
    font-weight: 800;
    font-family: inherit;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.home-ready-play-btn:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 28px rgba(255, 184, 0, 0.55),
        0 0 40px rgba(255, 107, 0, 0.3),
        0 12px 36px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.home-ready-play-btn:active {
    transform: scale(0.98);
}

.home-ready-play-btn:focus-visible {
    outline: 2px solid #FFB800;
    outline-offset: 4px;
}

.home-ready-play-visual {
    flex: 1 1 52%;
    min-width: min(100%, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-ready-play-mockups {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: clamp(205px, 29vw, 268px);
    margin: 0 auto;
}

/* iPad-style chassis (landscape): ~4:3 display, aluminum bezel, front camera */
.home-ready-play-ipad {
    position: absolute;
    left: 2%;
    bottom: 8%;
    width: 86%;
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
    padding: clamp(6px, 1.65vw, 11px);
    border-radius: clamp(16px, 4.2vw, 24px);
    background: linear-gradient(
        155deg,
        #636366 0%,
        #48484a 12%,
        #3a3a3c 28%,
        #1d1d1f 62%,
        #2c2c2e 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -2px 8px rgba(0, 0, 0, 0.5),
        0 11px 0 #0e0e10,
        0 28px 56px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    transform: rotate(-3deg);
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.home-ready-play-ipad::before {
    content: "";
    position: absolute;
    top: clamp(5px, 1.35vw, 9px);
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a4a4a, #080808);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.5);
    z-index: 4;
    pointer-events: none;
}

/* iPhone-style chassis (landscape): ~19.5:9, Dynamic Island + home indicator */
.home-ready-play-iphone {
    position: absolute;
    right: 0;
    bottom: 12%;
    width: 54%;
    aspect-ratio: 19.5 / 9;
    box-sizing: border-box;
    padding: clamp(3px, 0.9vw, 5px) clamp(3px, 0.9vw, 5px) clamp(3px, 0.9vw, 5px) clamp(4px, 1.1vw, 6px);
    border-radius: clamp(14px, 3.4vw, 22px);
    background: linear-gradient(
        168deg,
        #636366 0%,
        #48484a 15%,
        #2c2c2e 45%,
        #1c1c1e 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 5px rgba(0, 0, 0, 0.45),
        0 7px 0 #0a0a0c,
        0 20px 44px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(0, 0, 0, 0.42);
    transform: rotate(4deg);
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.home-ready-play-ipad .home-ready-play-screen,
.home-ready-play-iphone .home-ready-play-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: clamp(7px, 2vw, 13px);
    overflow: hidden;
}

.home-ready-play-screen--photo {
    background: #000;
    border: 1px solid rgba(0, 0, 0, 0.65);
}

.home-ready-play-dynamic-island {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: clamp(20px, 22%, 34px);
    border-radius: 3px;
    background: #010101;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 6px rgba(0, 0, 0, 0.6);
    z-index: 3;
    pointer-events: none;
}

.home-ready-play-home-indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: min(32%, 52px);
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.42);
    z-index: 3;
    pointer-events: none;
}

.home-ready-play-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 36%;
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Phone crop: emphasize judge card / center of wide screenshot */
.home-ready-play-shot--phone {
    object-position: 42% 48%;
}

@media (max-width: 768px) {
    .faq-section {
        width: 100%;
        max-width: none;
        margin: 48px auto 0;
        padding: 48px 16px 2.5rem;
    }

    .faq-title-wrapper {
        margin-bottom: 32px;
        padding-top: 12px;
    }

    .faq-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .faq-subtitle {
        font-size: 14px;
        margin-bottom: 28px;
    }

    .faq-title-decor {
        width: 36px;
        height: 42px;
    }

    .faq-question {
        font-size: 15px;
        padding: 14px 16px;
        gap: 14px;
    }

    .faq-answer {
        font-size: 14px;
        line-height: 1.75;
        padding: 0 16px;
    }

    .faq-item.open .faq-answer {
        padding: 0 16px 14px;
    }

    .faq-arrow {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .home-ready-play {
        max-width: none;
        padding: 2rem 16px 2.75rem;
    }

    .home-ready-play-shell {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
        padding: 1.65rem 1.2rem 2rem;
    }

    .home-ready-play-visual {
        order: -1;
        min-width: 0;
    }

    .home-ready-play-mockups {
        max-width: 360px;
        height: 210px;
    }

    .home-ready-play-copy {
        align-items: center;
        text-align: center;
    }

    .home-ready-play-sub {
        max-width: none;
    }
}

/* Floating decorative hexes */
.home-hex-grid,
.page-hex-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Limit repaint region; isolate stacking (avoids blend/smear with page bg on mobile) */
    contain: paint;
    isolation: isolate;
}

/* Shared layout: header + hex background for non-host pages */
.page-with-hexes {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

/* Same top-to-bottom flow as home; stretch cross-axis so footer + main strip are full viewport width (align-items:center shrinks flex items in a column) */
.page-with-hexes.lobby-body,
.page-with-hexes.account-body {
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-content-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
}

/* Exclude .back-btn: fixed positioning must not be overridden (otherwise it centers in the flex wrapper). */
.page-content-wrapper > *:not(.page-hex-grid):not(.back-btn) {
    position: relative;
    z-index: 1;
}

.home-hex {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 1;
    animation: floatHex 12s ease-in-out infinite alternate;
    will-change: auto;
    /* screen blend caused light/pink bleed and cyan motion trails on mobile */
    mix-blend-mode: normal;
}

/* Floating neon hex lights — strong palette (#FF1A1A, #A855F7, #00E5FF, #FFB800, #00E676), opacity ~0.55–0.62, no wash-out blur */
.hh-1 {
    width: 158px; height: 182px;
    background: rgba(255, 26, 26, 0.58);
    filter: blur(0) drop-shadow(0 0 40px rgba(255, 26, 26, 0.85)) drop-shadow(0 0 72px rgba(255, 26, 26, 0.45));
    top: 6%; left: 3%; animation-delay: 0s;
}
.hh-2 {
    width: 118px; height: 136px;
    background: rgba(168, 85, 247, 0.56);
    filter: blur(0) drop-shadow(0 0 38px rgba(168, 85, 247, 0.85)) drop-shadow(0 0 70px rgba(168, 85, 247, 0.42));
    top: 12%; right: 6%; animation-delay: -2s;
}
.hh-3 {
    width: 198px; height: 228px;
    background: rgba(0, 229, 255, 0.55);
    filter: blur(0) drop-shadow(0 0 42px rgba(0, 229, 255, 0.82)) drop-shadow(0 0 78px rgba(0, 229, 255, 0.4));
    bottom: 16%; left: 5%; animation-delay: -4s;
}
.hh-4 {
    width: 104px; height: 120px;
    background: rgba(255, 184, 0, 0.57);
    filter: blur(0) drop-shadow(0 0 36px rgba(255, 184, 0, 0.82)) drop-shadow(0 0 68px rgba(255, 184, 0, 0.42));
    bottom: 8%; right: 10%; animation-delay: -1s;
}
.hh-5 {
    width: 132px; height: 152px;
    background: rgba(0, 230, 118, 0.54);
    filter: blur(0) drop-shadow(0 0 40px rgba(0, 230, 118, 0.8)) drop-shadow(0 0 74px rgba(0, 230, 118, 0.38));
    top: 48%; left: 10%; animation-delay: -3s;
}
.hh-6 {
    width: 92px; height: 106px;
    background: rgba(255, 26, 26, 0.52);
    filter: blur(0) drop-shadow(0 0 34px rgba(255, 26, 26, 0.8)) drop-shadow(0 0 62px rgba(255, 26, 26, 0.4));
    top: 26%; right: 20%; animation-delay: -5s;
}
.hh-7 {
    width: 146px; height: 168px;
    background: rgba(168, 85, 247, 0.55);
    filter: blur(0) drop-shadow(0 0 40px rgba(168, 85, 247, 0.82)) drop-shadow(0 0 72px rgba(168, 85, 247, 0.4));
    bottom: 30%; right: 2%; animation-delay: -6s;
}
.hh-8 {
    width: 80px; height: 92px;
    background: rgba(0, 229, 255, 0.56);
    filter: blur(0) drop-shadow(0 0 32px rgba(0, 229, 255, 0.8)) drop-shadow(0 0 58px rgba(0, 229, 255, 0.38));
    top: 3%; left: 38%; animation-delay: -7s;
}

@keyframes floatHex {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(10px) rotate(-3deg); }
}

/* Home: TV mode (?tv=1) - Seen Jeem layout: logo, tagline, buttons with clear spacing. Category cards 70/30 */
html.tv-mode .home-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
html.tv-mode .home-hero-tagline {
    margin-bottom: 3rem;
}
html.tv-mode .home-hero .home-tagline {
    margin-bottom: 0;
}
html.tv-mode .home-hero-buttons {
    position: static;
    flex-shrink: 0;
    margin-top: 2rem;
    transform: none;
}

/* TV: 70% illustration, 30% label - identical layout for all cards */
html.tv-mode .home-category-card {
    min-height: 0;
}
html.tv-mode .home-category-card-illustration {
    flex: 0 0 70% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
html.tv-mode .home-category-card-illustration:has(.home-category-card-img) {
    flex: 0 0 70% !important;
}
html.tv-mode .home-category-card-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    display: block !important;
}
html.tv-mode .home-category-card-label {
    flex: 1 0 auto !important;
}

/* Home: TV / large screens (1200px+) - category cards */
@media (min-width: 1200px) {
    .home-category-cards-grid {
        grid-auto-rows: 236px;
    }
    .home-category-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .home-category-card-illustration {
        flex: 0 0 165px;
        min-height: 165px;
    }
    .home-category-card-illustration:has(.home-category-card-img) {
        flex: 0 0 165px;
        height: 165px;
    }
    .home-category-card-img {
        height: 165px;
    }
}

/* Home: desktop - slightly smaller hero */
@media (min-width: 769px) and (max-width: 1919px) {
    .home-hero {
        min-height: calc(96vh - 4rem);
        min-height: calc(96svh - 4rem);
    }
}

/* Home: TV only (1920px+) - larger hero padding */
@media (min-width: 1920px) {
    .home-hero {
        min-height: calc(120vh - 4rem);
        min-height: calc(120svh - 4rem);
        padding: calc(5rem + 4rem) 2rem 7rem;
    }
    .home-hero-buttons {
        padding: 0 2rem 5rem;
    }
}

/* Home: tablet - 4 cards per row */
@media (max-width: 1024px) {
    .home-game-info-card {
        padding: 2.75rem;
    }
    .home-category-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
    .home-category-card-illustration {
        min-height: 155px;
    }
    .home-category-card-icon {
        font-size: 3.5rem;
    }
}

/* Home: mobile spacing */
@media (max-width: 768px) {
    .home-body {
        align-items: center;
        padding: 0;
        box-sizing: border-box;
    }
    .home-container {
        padding: 0 1rem 2rem;
    }
    .home-hero {
        min-height: calc(88vh - 3.5rem);
        min-height: calc(88svh - 3.5rem);
        padding: calc(env(safe-area-inset-top) + 4rem) 1.25rem 1.75rem;
    }
    .home-logo {
        width: 80%;
        max-width: 170px;
        margin: 0 auto 0.75rem;
        display: block;
    }
    .home-game-info,
    .home-how-to-play {
        padding: 1.5rem 1.25rem;
    }
    .home-game-info-card {
        padding: 1.65rem;
    }
    .home-game-info-card-wrapper {
        margin-top: 1.25rem;
    }
    .home-game-info-card-label {
        font-size: 1rem;
        padding: 0.4rem 1.2rem;
    }
    .home-how-card {
        padding: 2rem;
    }
    .home-category-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .home-category-card-illustration {
        min-height: 120px;
    }
    .home-category-card-illustration:has(.home-category-card-img) {
        height: 120px;
        min-height: 120px;
    }
    .home-category-card-img {
        height: 120px;
    }
    .home-category-card-icon {
        font-size: 3rem;
    }
    .home-buttons--seen-jeem {
        gap: 1rem;
    }
    .home-action-card {
        min-width: 120px;
        padding: 2.5rem 1rem 2rem;
        padding-top: 3rem;
        font-size: 0.9rem;
    }
    .home-action-card-icon {
        width: 2.25rem;
        height: 2.25rem;
        top: -1rem;
        font-size: 1.1rem;
    }
    .home-action-card--primary .home-action-card-icon {
        font-size: 1.5rem;
    }

    .home-action-card--tournament .home-action-card-icon {
        font-size: 1.2rem;
    }
    .home-hero-buttons {
        padding: 0 1rem 1.75rem;
    }
    .home-hero .home-hero-spacer {
        min-height: 1rem;
    }
    .home-buttons--seen-jeem {
        justify-content: center;
        gap: 0.75rem;
    }
    .home-admin-link--desktop {
        display: none;
    }
    .home-admin-link--mobile {
        display: flex;
        position: absolute;
        top: 0.9rem;
        left: 0.9rem;
        z-index: 3;
    }
}

/* ====== LOBBY ====== */

.lobby-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    background-attachment: fixed;
}

.lobby-container {
    text-align: center;
    width: 100%;
    max-width: 900px;
    padding: 2rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ====== ACCOUNT (Profile, Reset Password, Contact) ====== */
.account-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    background-attachment: fixed;
}

.account-container {
    width: 100%;
    max-width: 720px;
    padding: 2rem;
    box-sizing: border-box;
}

.account-card {
    background: var(--glass-panel-bg);
    border-radius: var(--radius-playful);
    padding: 2rem 2.5rem;
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: right;
}

.account-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
    background: linear-gradient(95deg, #00E5FF 0%, #A855F7 50%, #FF1A1A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.35)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.25));
}

.account-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.account-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s, color 0.2s;
}

.account-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.account-tab--active {
    background: rgba(0, 229, 255, 0.25);
    color: #00E5FF;
}

.account-tab--active:hover {
    background: rgba(0, 229, 255, 0.35);
    color: #00E5FF;
}

.account-content {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.account-content--single {
    display: block;
}

.account-sidebar {
    flex-shrink: 0;
    text-align: center;
    padding: 1rem;
    min-width: 180px;
}

.account-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(0, 229, 255, 0.2);
    border: 2px solid rgba(0, 229, 255, 0.4);
    border-radius: 50%;
    color: #00E5FF;
}

.account-sidebar-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f7f0ff;
    margin: 0 0 0.25rem;
}

.account-sidebar-email {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.account-excluded-hint {
    font-size: 0.85rem;
    color: rgba(0, 230, 118, 0.9);
    margin: 0.75rem 0 1rem;
}

.account-clear-excluded-form {
    margin: 0.5rem 0 1rem;
}

.account-clear-excluded-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.account-clear-excluded-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}

.account-success-msg {
    font-size: 0.9rem;
    color: rgba(0, 230, 118, 0.95);
    background: rgba(0, 230, 118, 0.15);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.excluded-intro {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.excluded-questions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Grouped by match (expandable) */
.excluded-games-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.excluded-game-details {
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    border-radius: var(--radius-playful);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    overflow: hidden;
}

.excluded-game-details[open] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.excluded-game-summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: #f7f0ff;
    transition: background 0.15s;
}

.excluded-game-summary::-webkit-details-marker {
    display: none;
}

.excluded-game-summary::after {
    content: "▼";
    font-size: 0.65rem;
    margin-inline-start: auto;
    color: rgba(255, 184, 0, 0.85);
    transition: transform 0.2s;
}

.excluded-game-details[open] .excluded-game-summary::after {
    transform: rotate(-180deg);
}

.excluded-game-summary:hover {
    background: rgba(255, 255, 255, 0.06);
}

.excluded-game-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #ffb800;
}

.excluded-game-meta {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.excluded-game-count {
    color: rgba(0, 230, 118, 0.85);
}

.excluded-game-room {
    width: 100%;
    flex-basis: 100%;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, monospace;
}

.excluded-game-room--legacy {
    font-family: inherit;
    font-style: italic;
}

.excluded-game-questions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.excluded-question-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--glass-panel-bg);
    border-radius: var(--radius-playful);
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.excluded-question-letter {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 184, 0, 0.2);
    border: 1px solid rgba(255, 184, 0, 0.4);
    border-radius: 8px;
    color: #FFB800;
    font-weight: 700;
}

.excluded-question-body {
    flex: 1;
}

.excluded-question-text {
    margin: 0 0 0.5rem;
    color: #f7f0ff;
}

.excluded-question-answer {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(0, 230, 118, 0.9);
}

.excluded-empty {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

.excluded-clear-form {
    margin-top: 1rem;
}

/* Confirmation dialog (logout, clear excluded) – app colors */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: rgba(18, 6, 45, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.2s ease;
    font-family: var(--font-sans);
}

.confirm-dialog {
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-playful);
    padding: 1.5rem 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 184, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    font-family: var(--font-sans);
}

.confirm-dialog * {
    font-family: inherit;
}

.confirm-dialog-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 184, 0, 0.2);
    border: 2px solid rgba(255, 184, 0, 0.5);
    border-radius: 50%;
    color: #FFB800;
    font-size: 1.5rem;
}

.confirm-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f7f0ff;
}

.confirm-dialog-message {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    width: 100%;
    justify-content: flex-end;
}

.confirm-dialog-cancel {
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(168, 85, 247, 0.1));
    border: 2px solid rgba(0, 229, 255, 0.45);
    color: #00E5FF;
    border-radius: var(--radius-playful);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.confirm-dialog-cancel:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
    border-color: transparent;
    color: #0D1B2A;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
}

.confirm-dialog-confirm {
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    border: none;
    color: #0D1B2A;
    border-radius: var(--radius-playful);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.confirm-dialog-confirm:hover {
    transform: scale(1.05);
}

.confirm-dialog-confirm:active {
    transform: scale(0.97);
    animation: none;
}

.account-logout-form {
    margin: 0;
}

.account-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-sans);
    background: transparent;
    border: 2px solid #FF1A1A;
    border-radius: var(--radius-playful);
    color: #FF1A1A;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s, box-shadow 0.2s;
}

.account-logout-btn:hover {
    transform: scale(1.05);
    background: #FF1A1A;
    color: #fff;
    box-shadow: 0 0 24px rgba(255, 26, 26, 0.45);
}

.account-form-section {
    flex: 1;
    min-width: 0;
}

.account-form-section--full {
    max-width: 420px;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.account-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.account-field input:not([type="checkbox"]):not([type="radio"]),
.account-field textarea,
.account-field select {
    width: 100%;
}

/* .account-input / .account-textarea use global unified field styles */
.account-textarea {
    resize: vertical;
    min-height: 120px;
}

.account-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.account-submit-btn {
    align-self: flex-start;
    padding: 0.85rem 2.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-playful);
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #0D1B2A;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.account-submit-btn:hover {
    transform: scale(1.05);
}

.account-submit-btn:active {
    transform: scale(0.97);
    animation: none;
    background: linear-gradient(135deg, #E6A600 0%, #D45A00 100%);
    color: #fff;
}

.account-success {
    padding: 0.75rem 1rem;
    background: rgba(0, 230, 118, 0.2);
    border: 1px solid rgba(0, 230, 118, 0.5);
    border-radius: 12px;
    color: #6EFF9A;
    font-weight: 600;
    margin-bottom: 1rem;
}

.account-error {
    padding: 0.75rem 1rem;
    background: rgba(255, 26, 26, 0.2);
    border: 1px solid rgba(255, 26, 26, 0.5);
    border-radius: 12px;
    color: #ff6b6b;
    font-weight: 600;
    margin-bottom: 1rem;
}

.account-error-text {
    font-size: 0.85rem;
    color: #ff6b6b;
    margin: 0.25rem 0 0;
}

.contact-card .account-form-section--full {
    max-width: 100%;
}

.contact-form {
    max-width: 480px;
}

@media (max-width: 768px) {
    .account-content {
        flex-direction: column;
    }
    .account-sidebar {
        min-width: auto;
    }
    .account-card {
        padding: 1.5rem;
    }
}

/* Profile page – mobile layout (like reference design) */
@media (max-width: 768px) {
    .account-profile-page .account-container {
        padding: 1rem;
        padding-top: 5rem;
    }
    .account-profile-page .account-card {
        background: var(--glass-panel-bg);
        border: var(--glass-panel-border);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-playful);
        padding: 1.5rem 1.25rem;
        text-align: center;
    }
    .account-profile-page .account-title {
        font-size: 1.35rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    .account-profile-page .account-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        justify-content: center;
    }
    .account-profile-page .account-tab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }
    .account-profile-page .account-tab--active {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }
    .account-profile-page .account-tab:not(.account-tab--active) {
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.6);
    }
    .account-profile-page .account-content {
        align-items: center;
    }
    .account-profile-page .account-sidebar {
        padding: 0 0 1.25rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        align-self: center;
    }
    .account-profile-page .account-avatar-wrap {
        position: relative;
        display: inline-block;
        margin-bottom: 0.75rem;
    }
    .account-profile-page .account-avatar {
        width: 120px;
        height: 120px;
        font-size: 3.5rem;
        background: rgba(26, 10, 46, 0.9);
        border: 2px solid rgba(0, 229, 255, 0.3);
    }
    .account-profile-page .account-sidebar-name {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }
    .account-profile-page .account-sidebar-email {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    .account-profile-page .account-logout-form {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .account-profile-page .account-logout-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        border-radius: 12px;
    }
    .account-profile-page .account-logout-btn::before {
        content: '← ';
        font-weight: 700;
    }
    .account-profile-page .account-form-section {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .account-profile-page .account-form {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        align-items: center;
    }
    .account-profile-page .account-field {
        width: 100%;
        align-items: center;
        text-align: center !important;
    }
    .account-profile-page .account-field label,
    .account-profile-page .account-hint,
    .account-profile-page .account-error-text {
        text-align: center !important;
    }
    .account-profile-page .account-input,
    .account-profile-page .account-textarea {
        text-align: center !important;
    }
    .account-profile-page .account-submit-btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    .account-profile-page .account-clear-excluded-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .lobby-body {
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
    .lobby-container {
        padding-top: 3.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .page-short-stack .lobby-container {
        padding-top: 0.5rem;
    }
    .page-short-stack.account-body .account-container {
        padding-top: 0.35rem;
        padding-bottom: 0.85rem;
    }
    .team-card {
        min-width: 0;
    }
}

.game-title {
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF1A1A, #0A2A2A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

.game-subtitle {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 2rem;
}

.teams-row {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.team-card {
    flex: 1 1 0%;
    min-width: 280px;
    max-width: 100%;
    background: var(--glass-panel-bg);
    border-radius: var(--radius-playful);
    padding: 1.5rem;
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.red-card {
    border-color: #FF1A1A;
}
.red-card h2 {
    color: #FF1A1A;
}

.green-card {
    border-color: #00E676;
}
.green-card h2 {
    color: #00E676;
}

.team-card h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.vs-divider {
    font-size: 2rem;
    font-weight: 800;
    color: #555;
}

.field-group {
    margin-bottom: 0.75rem;
    text-align: right;
}

.field-group label {
    display: block;
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 0.25rem;
}

.field-group input {
    width: 100%;
}

.field-error {
    background: rgba(255, 26, 26, 0.2);
    border: 1px solid #FF1A1A;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    color: #ff6b6b;
}

.field-error-text {
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.field-success {
    background: rgba(0, 230, 118, 0.2);
    border: 1px solid #00E676;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    color: #00E676;
}

.field-disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #999;
    cursor: not-allowed;
}

.field-hint {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
}

.auth-switch {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-switch a {
    color: #00E5FF;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: none;
}

.remember-me-row {
    margin-top: -0.2rem;
    margin-bottom: 0.9rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.remember-me-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.remember-me-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 6px;
    accent-color: #FFB800;
    cursor: pointer;
}

.login-required-box {
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-playful);
    padding: 2rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Login required popup – impressive modal */
.overlay-login-required {
    background: rgba(18, 6, 45, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: loginRequiredOverlayIn 0.35s ease-out;
}

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

.login-required-popup {
    position: relative;
    background: var(--glass-panel-bg);
    border-radius: var(--radius-playful);
    padding: 2.5rem 3rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.45),
        0 0 60px -10px rgba(255, 184, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: loginRequiredPopupIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes loginRequiredPopupIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.login-required-popup-glow {
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.15), rgba(0, 230, 118, 0.08));
    filter: blur(20px);
    opacity: 0.8;
    z-index: -1;
    pointer-events: none;
}

.login-required-popup-icon {
    font-size: 3rem;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 184, 0, 0.25), rgba(255, 107, 0, 0.15));
    border: 2px solid rgba(255, 184, 0, 0.5);
    border-radius: 50%;
    color: #FFB800;
    text-shadow: 0 0 20px rgba(255, 184, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.2);
}

.login-required-popup-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
}

.login-required-popup-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.75rem;
    line-height: 1.5;
}

.login-required-popup-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.login-required-btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--radius-playful);
    text-decoration: none;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s;
    min-width: 200px;
}

.login-required-btn-primary {
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #0D1B2A;
    border: none;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.login-required-btn-primary:hover {
    transform: scale(1.05);
}

.login-required-btn-primary:active {
    transform: scale(0.97);
    animation: none;
}

.login-required-btn-secondary {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(168, 85, 247, 0.12));
    color: #00E5FF;
    border: 2px solid rgba(168, 85, 247, 0.45);
    animation: btn-secondary-glow-pulse 2.6s ease-in-out infinite;
}

.login-required-btn-secondary:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
    color: #0D1B2A;
    border-color: transparent;
}

.login-required-btn-secondary:active {
    transform: scale(0.97);
    animation: none;
}

.login-required-msg-main {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-required-msg-sub {
    color: #aaa;
    margin-bottom: 1.5rem;
}

.login-required-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.auth-card {
    background: var(--glass-panel-bg);
    border-radius: var(--radius-playful);
    padding: 2rem;
    max-width: 400px;
    margin: 0 auto 1.5rem;
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Profile card */
.profile-card {
    position: relative;
}

.profile-user-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: rgba(0, 229, 255, 0.15);
    border-radius: 50%;
    border: 2px solid rgba(0, 229, 255, 0.4);
}

.profile-username {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f7f0ff;
    margin-bottom: 1.5rem;
}

.profile-logout-form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-logout-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ccc;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.profile-logout-btn:hover {
    background: rgba(255, 26, 26, 0.3);
    border-color: rgba(255, 26, 26, 0.5);
    color: #ff6b6b;
}

.profile-logout-btn:active {
    background: #8B1538;
    border-color: #8B1538;
    color: #fff;
}

/* ===== App navbar: frosted glass over vibrant bg (home / lobby / auth pages) ===== */
header.home-header,
nav.navbar {
    background: var(--nav-glass-bg);
    -webkit-backdrop-filter: blur(var(--nav-glass-blur));
    backdrop-filter: blur(var(--nav-glass-blur));
    border-bottom: 1px solid var(--nav-glass-border);
    box-shadow: var(--nav-glass-shadow);
}

.home-header .nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 16px;
    transition: color 0.2s;
    text-decoration: none;
}

.home-header .nav-link:hover {
    color: #ffb800;
}

/* العب — gradient pill only on home; muted elsewhere */
.home-header .play-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-header .play-btn:hover {
    color: #ffb800 !important;
    transform: none;
}

.home-header .play-btn.home-header-nav-link--active,
.home-header .play-btn.home-header-mobile-link--active {
    background: linear-gradient(135deg, #ffb800, #ff6b00);
    color: #fff !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4);
}

.home-header .play-btn.home-header-nav-link--active:hover,
.home-header .play-btn.home-header-mobile-link--active:hover {
    box-shadow: 0 0 35px rgba(255, 184, 0, 0.6);
    transform: translateY(-1px);
    color: #fff !important;
}

/* تواصل معي — plain link; same gradient pill as العب when /contact is active */
.home-header .home-header-nav-link.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.home-header .home-header-nav-link.nav-link.home-header-nav-link--active,
.home-header .home-header-mobile-link.nav-link.home-header-mobile-link--active {
    background: linear-gradient(135deg, #ffb800, #ff6b00);
    color: #fff !important;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4);
}

.home-header .home-header-nav-link.nav-link.home-header-nav-link--active:hover,
.home-header .home-header-mobile-link.nav-link.home-header-mobile-link--active:hover {
    box-shadow: 0 0 35px rgba(255, 184, 0, 0.6);
    transform: translateY(-1px);
    color: #fff !important;
}

/* الألعاب المتبقية */
.home-header .home-header-games-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(255, 184, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    color: #ffb800;
    border-radius: 50px;
    padding: 4px 14px;
    padding-inline-end: 2rem;
    font-size: 13px;
    font-weight: 700;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.home-header .home-header-games-badge--available {
    background: rgba(255, 184, 0, 0.12);
    border-color: rgba(0, 230, 118, 0.35);
    color: #c8ffd4;
}

.home-header .home-header-games-badge--none {
    background: rgba(255, 60, 60, 0.12);
    border-color: rgba(255, 80, 80, 0.35);
    color: #ffb8b8;
}

.home-header .home-header-games-badge-plus,
.home-header .games-badge .plus-icon {
    background: #ffb800;
    color: #000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.home-header .home-header-games-badge--available .home-header-games-badge-plus {
    background: #ffb800;
    color: #000;
}

.home-header .home-header-games-badge--none .home-header-games-badge-plus {
    background: rgba(255, 255, 255, 0.85);
    color: #1a0a0a;
}

.home-header .home-header-games-badge-btn:hover .home-header-games-badge-plus {
    transform: translateY(-50%) scale(1.06);
}

.home-header .user-name {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
}

/* User avatar (guest emoji or initial in ring) */
.home-header .home-header-user-icon-btn .home-header-user-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 184, 0, 0.5);
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    box-sizing: border-box;
}

.home-header .home-header-user-icon-btn .home-header-user-icon--initial {
    font-weight: 700;
    font-size: 0.95rem;
}

.home-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
}

.home-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-header-logo-link {
    display: flex;
    align-items: center;
}

.home-header-logo {
    height: 52px;
    width: auto;
}

.home-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.home-header-user-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    color: #f7f0ff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.home-header-user-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.home-header-games-badge-wrap {
    position: relative;
    display: inline-flex;
}

.home-header-games-badge-btn {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.home-header .home-header-games-badge-plus {
    position: absolute;
    top: 50%;
    inset-inline-end: 4px;
    transform: translateY(-50%);
    margin: 0;
}

.home-header-games-badge-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    margin-top: 0.25rem;
    min-width: 180px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    z-index: 30;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.home-header-games-badge-wrap--open .home-header-games-badge-dropdown {
    display: block;
}

.home-header-games-badge-dropdown-item {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.home-header-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-header-auth-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.home-header-auth a.nav-link {
    margin-left: 0.35rem;
    margin-right: 0.35rem;
}

.home-header-auth a.nav-link:first-of-type {
    margin-left: 0;
}

.home-header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-header-user a {
    color: #f7f0ff;
    text-decoration: none;
    font-weight: 600;
}

.home-header-user a:hover {
    text-decoration: underline;
}

.home-header-user form {
    display: inline;
}

.home-header-user button {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.9rem;
}

.home-header-user button:hover {
    color: #fff;
}

/* User icon + dropdown (guests only); when logged in, badge sits next to user icon */
.home-header-user-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Desktop: guests see auth text (not icon), badge on left; logged-in: user icon left, logo right */
@media (min-width: 769px) {
    .home-header-user-menu-wrap--guest {
        display: none;
    }
    .home-header-brand {
        order: 0;
    }
    .home-header-right {
        order: 1;
    }
    .home-header-user-menu-wrap {
        order: 2;
    }
}
.home-header-user-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 40px;
    height: 40px;
    padding: 0 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-sans);
}
.home-header-username {
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
}
.home-header-username--guest {
    opacity: 0.75;
}
.home-header-user-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.home-header-user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    margin-top: 0.25rem;
    min-width: 160px;
    max-width: min(180px, calc(100vw - 2rem));
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    z-index: 30;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.home-header-user-menu--open .home-header-user-dropdown {
    display: flex;
    flex-direction: column;
}
.home-header-user-dropdown-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-sans);
}
.home-header-user-dropdown-link.nav-link {
    font-weight: 500;
    font-size: 15px;
}
.home-header-user-dropdown-link:hover {
    background: rgba(255, 184, 0, 0.1);
    color: #ffb800;
}
.home-header-user-dropdown-form {
    display: block;
    margin: 0;
    padding: 0;
}
.home-header-user-dropdown-logout {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    text-align: inherit;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-sans);
}
.home-header-user-dropdown-logout:hover {
    background: rgba(255, 80, 80, 0.12);
    color: #ffb8b8;
}

/* Hamburger: hidden on desktop */
.home-header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    gap: 5px;
}
.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.home-header--menu-open .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.home-header--menu-open .hamburger-line:nth-child(2) {
    opacity: 0;
}
.home-header--menu-open .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu: hidden by default */
.home-header-mobile-menu {
    display: none;
}

/* Home header – mobile only */
@media (max-width: 768px) {
    .home-header {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .home-header-brand {
        gap: 0.4rem;
        flex-shrink: 0;
    }
    /* Must match specificity of .home-header .home-header-nav-link.nav-link { display: inline-flex } */
    .home-header-brand .home-header-nav-link.nav-link,
    .home-header-brand .home-header-nav-link.play-btn {
        display: none;
    }
    .home-header-logo {
        height: 36px;
    }
    .home-header-right {
        display: none;
    }
    .home-header-user-menu-wrap .home-header-games-badge-wrap {
        display: none;
    }
    .home-header-user-menu-wrap {
        margin-inline-start: auto;
        min-width: 0;
        flex-shrink: 1;
    }
    .home-header-user-icon-btn {
        min-width: 0;
        flex-shrink: 1;
    }
    .home-header-username {
        max-width: 70px;
    }
    .home-header-hamburger {
        display: flex;
        margin-right: 0;
        margin-left: 0;
    }
    .home-header-mobile-menu {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
        order: 99;
        padding: 0.75rem 0;
        gap: 0.65rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        margin-top: 0.5rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }
    .home-header--menu-open .home-header-mobile-menu {
        display: flex;
    }
    .home-header-mobile-games-badge {
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
    }
    .home-header-mobile-link {
        padding: 0.5rem 0.75rem;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 0.95rem;
        transition: color 0.15s, background 0.15s, transform 0.15s;
    }
    /* Gradient pills: same width, capsule shape (mobile .home-header-mobile-link had no border-radius → looked rectangular) */
    .home-header .home-header-mobile-menu .play-btn.home-header-mobile-link--active,
    .home-header .home-header-mobile-menu .home-header-mobile-link.nav-link.home-header-mobile-link--active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: min(280px, 88vw);
        border-radius: 50px;
        padding: 10px 24px;
        font-size: 15px;
        font-weight: 700;
        box-sizing: border-box;
    }
    /* Inactive العب in drawer: plain text like تواصل معي (not a wide bar) */
    .home-header .home-header-mobile-menu .play-btn:not(.home-header-mobile-link--active) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
        box-shadow: none !important;
        border: none;
        min-width: 0;
        width: auto;
        padding: 0.5rem 0.75rem;
        border-radius: 0;
    }
    .home-header-mobile-badge {
        margin: 0.25rem 0.75rem;
        display: inline-block;
        width: fit-content;
        align-self: center;
    }
    .home-header-mobile-user {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
    }
    .home-header-mobile-logout {
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        font: inherit;
        color: inherit;
    }
    .home-header-mobile-logout-form {
        display: inline;
    }
    .home-header .home-header-games-badge {
        padding: 3px 10px;
        padding-inline-end: 1.65rem;
        font-size: 12px;
        white-space: nowrap;
    }
    .home-header .home-header-games-badge-plus {
        width: 16px;
        height: 16px;
        font-size: 11px;
        top: 50%;
        inset-inline-end: 3px;
        transform: translateY(-50%);
    }
    .home-header-auth {
        gap: 0.25rem;
    }
    .home-header-auth a {
        font-size: 0.8rem;
        margin-left: 0.25rem;
    }
    .home-header-auth-sep {
        font-size: 0.75rem;
    }
    .home-header-user-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
    .home-header-user-link span:last-child {
        display: inline-block;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

.start-btn {
    margin-top: 2rem;
    padding: 0.9rem 3rem;
    font-size: 1.3rem;
    font-weight: 800;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-playful);
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #0D1B2A;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.start-btn:hover {
    transform: scale(1.05);
}

.start-btn:active {
    transform: scale(0.97);
    animation: none;
    background: linear-gradient(135deg, #E6A600 0%, #D45A00 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.quick-test-row {
    margin-top: 1rem;
    text-align: center;
}

.quick-test-btn {
    display: inline-block;
    padding: 0.85rem 2.2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, border-color 0.15s;
}

.quick-test-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.quick-test-note {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
}

/* ====== BOARD ====== */

.board-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    min-height: 100vh;
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    background-attachment: fixed;
}

/* Decorative hex grid sits behind board UI */
.board-body.page-with-hexes > .team-bar,
.board-body.page-with-hexes > .hex-board-wrapper,
.board-body.page-with-hexes > .interaction-area {
    position: relative;
    z-index: 1;
}

/* Host fullscreen layout – game arena style background */
.host-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    background-attachment: fixed;
}

/* Host page header – one row: red pill | round + score | green pill */
.host-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 100%);
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}
.host-header-side {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: visible;
}
.host-header-red {
    justify-content: flex-start;
}
.host-header-green {
    justify-content: flex-end;
}
.host-score-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    align-self: center;
}
.host-score-num span {
    display: block;
    line-height: 1;
    transform: translateY(3px);
}
.host-score-red {
    color: var(--team-red);
}
.host-score-green {
    color: var(--team-green);
}
.host-sounds-bar {
    display: flex;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    background: transparent;
}
.overlay-box .host-sounds-bar {
    margin-bottom: 0.75rem;
}
.host-sounds-btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.host-sounds-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}
.host-sounds-btn.sounds-enabled {
    background: rgba(46, 204, 113, 0.35);
    border-color: rgba(46, 204, 113, 0.7);
}
.host-header-rounds {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0 0.5rem;
}
.host-round-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}
.host-round-score {
    font-size: 1.1rem;
    font-weight: 800;
    color: #FFB800;
}
.host-header-turn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0 1rem;
}
.host-header-turn-label {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}
.host-header-turn-colon {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0.25rem;
}
.host-header-turn #currentTeamName {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}
.host-header .team-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    border: none;
    overflow: hidden;
    min-width: 4rem;
    width: auto;
    max-width: min(42vw, 420px);
    box-sizing: border-box;
}
.host-header .team-pill .team-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
.host-header .team-pill.active-team {
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .host-header {
        padding: 0.75rem 1rem;
    }
    .host-header .team-pill {
        padding: 0.35rem 0.75rem;
        font-size: 0.9rem;
        max-width: min(40vw, 280px);
    }
    .host-header-turn #currentTeamName {
        font-size: 1.1rem;
    }
}
.host-header .red-pill {
    background: var(--team-red);
    color: #fff;
    box-shadow: none;
}
.host-header .red-pill.active-team {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.host-header .green-pill {
    background: var(--team-green);
    color: #fff;
    box-shadow: none;
}
.host-header .green-pill.active-team {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Host: How to play + sound (top corner) */
.host-top-actions {
    position: absolute;
    top: 5.3rem;
    right: 1.5rem;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}

.host-sound-btn {
    width: 40px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.host-sound-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.85);
}

.host-sound-btn:focus-visible {
    outline: 2px solid rgba(255, 184, 0, 0.7);
    outline-offset: 2px;
}

.host-sound-btn--on {
    color: #FFB800;
    border-color: rgba(255, 184, 0, 0.55);
    background: rgba(255, 184, 0, 0.12);
    box-shadow: 0 0 16px rgba(255, 184, 0, 0.15);
}

.host-sound-btn--on:hover {
    color: #ffc933;
    border-color: rgba(255, 184, 0, 0.75);
    background: rgba(255, 184, 0, 0.2);
}

.host-sound-svg {
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}

.host-sound-state {
    pointer-events: none;
}

.host-sound-svg g[hidden] {
    display: none !important;
}

.host-how-to-btn {
    padding: 0.58rem 1.12rem;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
    background: rgba(255, 184, 0, 0.2);
    border: 1px solid rgba(255, 184, 0, 0.5);
    color: #FFB800;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-shadow:
        0.03em 0.03em 0 #1a1f3c,
        0.07em 0.07em 0 #12162e,
        -0.015em -0.015em 0 rgba(255, 255, 255, 0.38);
}

/* Host settings: primary CTA button (same app style) */
.host-primary-btn {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb800, #ff6b00);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 1.02rem;
    font-weight: 900;
    padding: 0.9rem 1.4rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.22s ease, opacity 0.2s ease;
    box-shadow: 0 10px 28px rgba(255, 107, 0, 0.35);
    min-height: 48px;
    width: 100%;
}
.host-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(255, 107, 0, 0.46), 0 0 40px rgba(255, 184, 0, 0.35);
}
.host-primary-btn:active {
    transform: scale(0.98);
}

/* Host settings: color circles instead of dropdowns */
.host-color-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
}
.host-color-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.host-color-choice:hover {
    border-color: rgba(255, 184, 0, 0.32);
    background: rgba(255, 255, 255, 0.05);
}
.host-color-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.host-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--swatch);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 0 18px color-mix(in srgb, var(--swatch) 42%, transparent);
    flex: 0 0 auto;
}
.host-color-name {
    font-weight: 900;
    opacity: 0.95;
}
.host-color-choice:has(input:checked) {
    border-color: rgba(255, 184, 0, 0.55);
    background: rgba(255, 184, 0, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.14);
}

.host-how-to-btn:hover {
    background: rgba(255, 184, 0, 0.35);
    border-color: rgba(255, 184, 0, 0.7);
}

.host-how-to-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s;
}

.host-how-to-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 90vw);
    max-width: 100%;
    height: 100%;
    z-index: 201;
    background: var(--glass-panel-bg);
    border-left: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.06);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.host-how-to-panel--open {
    transform: translateX(0);
}

.host-how-to-panel-inner {
    padding: 1.5rem 1.25rem;
}

.host-how-to-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.host-how-to-panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFB800;
    margin: 0;
}

/* Host settings panel layout */
.host-settings-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.host-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.host-settings-label {
    font-weight: 900;
}
.host-settings-color {
    width: 56px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
}
.host-settings-select {
    min-width: 160px;
    max-width: 220px;
    height: 42px;
    border-radius: 12px;
    font-weight: 800;
}
.host-settings-actions {
    justify-content: center;
}

.host-how-to-panel-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.host-how-to-panel-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.host-how-to-panel-content {
    text-align: right;
}

.host-how-to-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.host-how-to-tips li {
    padding: 0.6rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.host-how-to-tips li:last-child {
    border-bottom: none;
}

.host-how-to-tips strong {
    color: #FFB800;
}

.hex-board-fullscreen .hex-cell,
.hex-board-fullscreen .hex-edge {
    width: 95px;
    height: 108px;
}

/* Unclaimed letter cells: cream background (high specificity for host/board) */
.hex-board-fullscreen .hex-cell,
.hex-board .hex-cell,
.hex-board-wrapper .hex-cell {
    background-color: #e8e0d5 !important;
    background: #e8e0d5 !important;
}
.hex-board-fullscreen .hex-cell.hex-red,
.hex-board .hex-cell.hex-red {
    background: var(--team-red) !important;
    box-shadow: 0 0 12px rgba(255, 26, 26, 0.7);
}
.hex-board-fullscreen .hex-cell.hex-green,
.hex-board .hex-cell.hex-green {
    background: var(--team-green) !important;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.hex-board-fullscreen .hex-cell {
    padding: 34px;
}

/* Round-start board build: cells assemble before letter shuffle */
.hex-board-wrapper.hex-board-fullscreen.hex-board-building .hex-board .hex-cell.hex-cell-build {
    animation: hostHexBoardBuildIn 560ms cubic-bezier(0.2, 0.84, 0.22, 1.18) both;
    animation-delay: var(--build-delay, 0ms);
    transform-origin: center center;
    will-change: transform, opacity;
}

@keyframes hostHexBoardBuildIn {
    0% {
        opacity: 0;
        transform: scale(0.15);
    }
    62% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.hex-board-fullscreen .hex-letter {
    font-size: 1.5rem;
}

.hex-board-fullscreen .main-row {
    margin-top: -26px;
}

.hex-board-fullscreen .main-row:first-child {
    margin-top: 0;
}

.hex-board-fullscreen .hex-board .main-row:nth-child(2),
.hex-board-fullscreen .hex-board .main-row:nth-child(4) {
    transform: translateX(47.5px);
}

.hex-board-fullscreen .edge-row-top {
    margin-bottom: -26px;
}

.hex-board-fullscreen .edge-row-bottom {
    margin-top: -26px;
}

/* Laptop (short viewport): prevent board overlapping header – do not affect mobile (≤768px) or tall screens (MacBook) */
@media (min-width: 769px) and (max-height: 900px) {
    .host-body {
        padding-top: 5rem;
        justify-content: flex-start;
        overflow-y: auto;
    }
    .hex-board-wrapper.hex-board-fullscreen {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    .hex-board-fullscreen .hex-cell,
    .hex-board-fullscreen .hex-edge {
        width: 68px;
        height: 78px;
    }
    .hex-board-fullscreen .hex-cell {
        padding: 24px;
    }
    .hex-board-fullscreen .hex-letter {
        font-size: 1.25rem;
    }
    .hex-board-fullscreen .main-row {
        margin-top: -19px;
    }
    .hex-board-fullscreen .main-row:first-child {
        margin-top: 0;
    }
    .hex-board-fullscreen .hex-board .main-row:nth-child(2),
    .hex-board-fullscreen .hex-board .main-row:nth-child(4) {
        transform: translateX(34px);
    }
    .hex-board-fullscreen .edge-row-top {
        margin-bottom: -19px;
    }
    .hex-board-fullscreen .edge-row-bottom {
        margin-top: -19px;
    }
}

/* Host board: fit on mobile with padding and smaller hexes */
@media (max-width: 768px) {
    .host-body {
        padding: 1rem;
        padding-top: 5rem;
        min-height: 100vh;
        overflow-x: auto;
        overflow-y: auto;
    }
    .hex-board-fullscreen .hex-cell,
    .hex-board-fullscreen .hex-edge {
        width: 52px;
        height: 59px;
    }
    .hex-board-fullscreen .hex-cell {
        padding: 18px;
    }
    .hex-board-fullscreen .hex-letter {
        font-size: 1rem;
    }
    .hex-board-fullscreen .main-row {
        margin-top: -14px;
    }
    .hex-board-fullscreen .hex-board .main-row:nth-child(2),
    .hex-board-fullscreen .hex-board .main-row:nth-child(4) {
        transform: translateX(26px);
    }
    .hex-board-fullscreen .edge-row-top {
        margin-bottom: -14px;
    }
    .hex-board-fullscreen .edge-row-bottom {
        margin-top: -14px;
    }
    .hex-board-wrapper.hex-board-fullscreen {
        margin: 0.5rem auto;
    }
}

/* Overlays (appear on top of the board) */
.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background: rgba(10, 10, 30, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s ease;
}

#feedbackOverlay {
    z-index: 10090;
    background: rgba(10, 10, 30, 0.92);
}

/* Letter reveal animation (before question) */

/* Hex board locked during round banner + until shuffle completes (TV host only) */
.hex-board-wrapper.hex-board-fullscreen.hex-board-input-locked .hex-board .hex-cell,
.hex-board-wrapper.hex-board-fullscreen.hex-board-input-locked .hex-board .hex-edge {
    pointer-events: none !important;
    cursor: default !important;
}

/* Round banner: lives inside .hex-board-wrapper, covers viewport */
.round-announcement-on-board.round-announcement-overlay {
    z-index: 10050;
}

/* Full-screen round start (host board) — dim + blur so board stays visible behind */
.round-announcement-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 5vw;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: roundAnnouncementOverlayFade 0.9s ease forwards;
    pointer-events: none;
}

.round-announcement-overlay.hidden {
    display: none !important;
    animation: none;
}

.round-announcement-overlay.round-announcement-overlay--exiting {
    animation: none;
    opacity: 0;
    transition: opacity 0.75s ease;
}

.round-announcement-overlay .round-announcement-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.15rem, 1.2vw, 0.5rem);
    text-align: center;
    font-family: var(--font-sans);
    line-height: 1.05;
}

/* "الجولة" on top — slides in from the right */
.round-announcement-overlay .round-announcement-line--label {
    font-size: clamp(2.4rem, 11vw, 5.25rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #ff5a4a;
    text-shadow:
        0.045em 0.045em 0 #1a1f3c,
        0.09em 0.09em 0 #12162e,
        -0.02em -0.02em 0 rgba(255, 255, 255, 0.38);
    opacity: 0;
    animation: roundAnnouncementSlideFromRight 1.15s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

/* Ordinal below — slides in from the left */
.round-announcement-overlay .round-announcement-line--ordinal {
    font-size: clamp(2.2rem, 10vw, 4.85rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #ffe41a;
    text-shadow:
        0.045em 0.045em 0 #1a1f3c,
        0.09em 0.09em 0 #12162e,
        -0.02em -0.02em 0 rgba(255, 255, 255, 0.42);
    opacity: 0;
    animation: roundAnnouncementSlideFromLeft 1.15s cubic-bezier(0.2, 0.85, 0.25, 1) 0.12s forwards;
}

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

@keyframes roundAnnouncementSlideFromRight {
    from { transform: translateX(max(55vw, 520px)); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes roundAnnouncementSlideFromLeft {
    from { transform: translateX(min(-55vw, -520px)); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Board win celebrations (host TV, inside .hex-board-wrapper) --- */
.board-celebration-on-board.board-celebration-overlay {
    z-index: 10060;
}

.board-celebration-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.board-celebration-overlay.hidden {
    display: none !important;
}

.board-celebration-overlay.board-celebration--exiting {
    opacity: 0;
}

.board-celebration-overlay.board-celebration--round {
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.board-celebration-overlay.board-celebration--match {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.board-celebration-overlay.board-celebration--team-red {
    --team-win: #FF1A1A;
    --team-glow: rgba(255, 26, 26, 0.85);
}

.board-celebration-overlay.board-celebration--team-green {
    --team-win: #00E676;
    --team-glow: rgba(0, 230, 118, 0.85);
}

.board-celebration-particles,
.board-celebration-fireworks,
.board-celebration-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.board-celebration-particles {
    z-index: 0;
}

.board-celebration-fireworks,
.board-celebration-rain {
    z-index: 1;
}

.board-celebration-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    max-width: 96vw;
}

/* Burst pieces (round win) */
.board-celebration-burst-piece {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 11px;
    margin: -5px 0 0 -4px;
    border-radius: 2px;
    opacity: 0;
    animation-name: boardCelebrationBurstFly;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
}

@keyframes boardCelebrationBurstFly {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
        opacity: 0;
    }
}

/* Fireworks (match win) */
.board-celebration-fw {
    position: absolute;
    bottom: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation-name: boardCelebrationFireworkRise;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
    box-shadow: 0 0 10px currentColor;
}

@keyframes boardCelebrationFireworkRise {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--fx), var(--fy)) scale(0.35);
        opacity: 0;
    }
}

/* Confetti rain (match win) */
.board-celebration-confetti {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.95;
    animation-name: boardCelebrationConfettiFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
}

@keyframes boardCelebrationConfettiFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    100% {
        transform: translateY(110vh) translateX(20px) rotate(720deg);
    }
}

/* Round: emoji spin + scale first */
.board-celebration--round .board-celebration-emoji {
    display: block;
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 1;
    margin-bottom: 0.35rem;
    animation: boardCelebrationRoundEmoji 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@keyframes boardCelebrationRoundEmoji {
    0% {
        transform: scale(0) rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.board-celebration--round .board-celebration-title {
    font-size: clamp(1.35rem, 5.5vw, 2.75rem);
    font-weight: 900;
    color: var(--team-win);
    margin: 0;
    line-height: 1.35;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    animation: boardCelebrationRoundTitle 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s forwards;
}

@keyframes boardCelebrationRoundTitle {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.board-celebration--round .board-celebration-score {
    font-size: clamp(1.05rem, 4vw, 1.85rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin: 0.85rem 0 0;
    opacity: 0;
    animation: boardCelebrationScoreFade 0.55s ease 1.15s forwards;
}

.board-celebration--round .board-celebration-score.is-empty {
    display: none;
}

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

/* Match: scale bounce title + glow pulse x3 */
.board-celebration--match .board-celebration-emoji {
    display: block;
    font-size: clamp(3.25rem, 15vw, 5.5rem);
    line-height: 1;
    margin-bottom: 0.5rem;
    animation: boardCelebrationTrophyFloat 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px var(--team-glow));
}

@keyframes boardCelebrationTrophyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.board-celebration--match .board-celebration-title {
    font-size: clamp(1.45rem, 6vw, 3rem);
    font-weight: 900;
    color: var(--team-win);
    margin: 0;
    line-height: 1.3;
    opacity: 0;
    animation-name: boardCelebrationMatchTitlePop, boardCelebrationMatchGlowPulse;
    animation-duration: 1s, 1.8s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-delay: 0s, 0.05s;
    animation-iteration-count: 1, 3;
    animation-fill-mode: forwards, forwards;
}

@keyframes boardCelebrationMatchTitlePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    55% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes boardCelebrationMatchGlowPulse {
    0%, 100% {
        text-shadow:
            0 0 12px var(--team-glow),
            0 0 28px rgba(255, 255, 255, 0.15);
    }
    50% {
        text-shadow:
            0 0 28px var(--team-glow),
            0 0 56px var(--team-glow),
            0 0 90px rgba(255, 255, 255, 0.2);
    }
}

.board-celebration--match .board-celebration-score {
    display: none;
}

/* ===== Host: letter reveal — hex collision (board theme) ===== */
.overlay.overlay-reveal.overlay-hexa-shuffle {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: none;
}

.reveal-hexa-header {
    flex-shrink: 0;
    width: 100%;
    max-width: 28rem;
    padding: 0.15rem 0.5rem 0;
    text-align: center;
    z-index: 30;
}

.reveal-hexa-title {
    margin: 0;
    font-size: clamp(1.05rem, 3.2vw, 1.45rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.05em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.reveal-hexa-footer {
    flex-shrink: 0;
    width: 100%;
    max-width: 28rem;
    padding: 0.25rem 0.5rem 0.15rem;
    text-align: center;
    z-index: 30;
    background: transparent;
}

.reveal-hexa-footer .spin-btn {
    pointer-events: auto;
}

.spin-btn.reveal-hexa-btn {
    padding: 14px 60px;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.12em;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 184, 0, 0.5);
    background: rgba(255, 184, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffb800;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, opacity 0.25s ease,
        border-color 0.3s ease;
}

.spin-btn.reveal-hexa-btn:hover:not(:disabled) {
    background: rgba(255, 184, 0, 0.25);
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.4);
    border-color: rgba(255, 184, 0, 0.65);
}

.spin-btn.reveal-hexa-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.reveal-hexa-btn--busy {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.overlay-hexa-shuffle.hexa-reveal-animating .reveal-hexa-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.hexa-shuffle-scene {
    --hexa-x: 68px;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: min(100vw - 2rem, 400px);
    min-height: 172px;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: auto;
}

.hexa-left,
.hexa-right {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130px;
    height: 150px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    z-index: 4;
    will-change: transform, opacity;
}

.hexa-left {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--team-red) 92%, #ffffff 8%),
        color-mix(in srgb, var(--team-red) 85%, #000000 15%));
    box-shadow: 0 0 30px color-mix(in srgb, var(--team-red) 60%, transparent);
}

.hexa-right {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--team-green) 92%, #ffffff 8%),
        color-mix(in srgb, var(--team-green) 85%, #000000 15%));
    box-shadow: 0 0 30px color-mix(in srgb, var(--team-green) 60%, transparent);
}

/* Idle: side by side — gap ~68px each side of center (~136px between centers) clears 130px-wide hexes */
.hexa-left {
    transform: translate(calc(-50% - var(--hexa-x)), -50%);
}

.hexa-right {
    transform: translate(calc(-50% + var(--hexa-x)), -50%);
}

.hexa-scene--run .hexa-left {
    animation: hexaSlideFromLeft 0.82s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hexa-scene--run .hexa-right {
    animation: hexaSlideFromRight 0.82s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* True center collision: pull back, rush in, tiny rebound */
@keyframes hexaSlideFromLeft {
    0% {
        transform: translate(calc(-50% - var(--hexa-x)), -50%);
    }
    22% {
        transform: translate(calc(-50% - var(--hexa-x) - 36px), -50%) rotate(-8deg) scale(0.98);
    }
    84% {
        transform: translate(-50%, -50%) rotate(2deg) scale(1.02);
    }
    92% {
        transform: translate(calc(-50% - 10px), -50%) rotate(-1deg) scale(0.99);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

@keyframes hexaSlideFromRight {
    0% {
        transform: translate(calc(-50% + var(--hexa-x)), -50%);
    }
    22% {
        transform: translate(calc(-50% + var(--hexa-x) + 36px), -50%) rotate(8deg) scale(0.98);
    }
    84% {
        transform: translate(-50%, -50%) rotate(-2deg) scale(1.02);
    }
    92% {
        transform: translate(calc(-50% + 10px), -50%) rotate(1deg) scale(0.99);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

.hexa-piece--broken.hexa-left {
    animation: hexaShatterLeft 0.35s ease-out forwards !important;
}

.hexa-piece--broken.hexa-right {
    animation: hexaShatterRight 0.35s ease-out forwards !important;
}

@keyframes hexaShatterLeft {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    to {
        transform: translate(calc(-50% - 68px), calc(-50% - 16px)) scale(1.35) rotate(-16deg);
        opacity: 0;
        filter: blur(11px);
    }
}

@keyframes hexaShatterRight {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    to {
        transform: translate(calc(-50% + 68px), calc(-50% - 16px)) scale(1.35) rotate(16deg);
        opacity: 0;
        filter: blur(11px);
    }
}

.collision-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

.burst-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    border-radius: 50%;
    border: 4px solid rgba(255, 184, 0, 0.95);
    opacity: 0;
    box-shadow: 0 0 24px rgba(255, 184, 0, 0.55);
}

.hexa-scene--impact .burst-ring--a {
    animation: hexaRingExpand 0.65s ease-out forwards;
}

.hexa-scene--impact .burst-ring--b {
    animation: hexaRingExpand 0.65s ease-out 0.08s forwards;
}

.hexa-scene--impact .burst-ring--c {
    animation: hexaRingExpand 0.65s ease-out 0.16s forwards;
}

@keyframes hexaRingExpand {
    0% {
        width: 20px;
        height: 20px;
        margin-left: -10px;
        margin-top: -10px;
        opacity: 0.95;
    }
    100% {
        width: 300px;
        height: 300px;
        margin-left: -150px;
        margin-top: -150px;
        opacity: 0;
    }
}

.hexa-shuffle-scene.hexa-scene--shake {
    animation: hexaScreenShake 0.32s ease-out;
}

@keyframes hexaScreenShake {
    0%,
    100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-5px, 3px);
    }
    40% {
        transform: translate(5px, -3px);
    }
    60% {
        transform: translate(-4px, 2px);
    }
    80% {
        transform: translate(4px, -2px);
    }
}

.hexa-particles {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 6;
    pointer-events: none;
}

.hexa-particle {
    position: absolute;
    left: 0;
    top: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: hexaParticleBurst 0.5s ease-out forwards;
    opacity: 1;
}

@keyframes hexaParticleBurst {
    from {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: translate(calc(-50% + var(--hexa-px, 0px)), calc(-50% + var(--hexa-py, 0px))) scale(0.15)
            rotate(260deg);
        opacity: 0;
    }
}

.hexa-result {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 185px;
    margin-left: -80px;
    margin-top: -92px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, #ffb800, #ff6b00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 72px;
    font-weight: 900;
    color: #fff;
    opacity: 0;
    box-shadow: 0 0 60px rgba(255, 184, 0, 0.9);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    z-index: 10;
    pointer-events: none;
    transform: scale(0) rotate(-30deg);
}

.hexa-scene--show-result .hexa-result {
    animation: hexaReveal 0.46s cubic-bezier(0.22, 0.85, 0.3, 1.2) forwards;
}

@keyframes hexaReveal {
    0% {
        transform: scale(0) rotate(-30deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.hexa-result-label {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    margin-top: 118px;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 3px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    z-index: 11;
    pointer-events: none;
}

.hexa-scene--show-result .hexa-result-label {
    animation: hexaLabelFadeUp 0.38s ease 0.18s forwards;
}

@keyframes hexaLabelFadeUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.hexa-shuffle-scene.hexa-scene--exiting {
    animation: hexaSceneFadeOut 0.36s ease forwards;
}

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

@media (prefers-reduced-motion: reduce) {
    .hexa-scene--run .hexa-left,
    .hexa-scene--run .hexa-right {
        animation-duration: 0.35s;
    }
    .hexa-shuffle-scene.hexa-scene--shake {
        animation: none;
    }
    .hexa-piece--broken.hexa-left,
    .hexa-piece--broken.hexa-right {
        animation-duration: 0.2s !important;
    }
    .hexa-particle {
        animation-duration: 0.35s;
    }
    .hexa-scene--show-result .hexa-result {
        animation-duration: 0.35s;
    }
}

@media (max-width: 520px) {
    .hexa-shuffle-scene {
        --hexa-x: 52px;
        min-height: 130px;
        height: 130px;
        max-width: min(100vw - 1.5rem, 360px);
    }
    .hexa-left,
    .hexa-right {
        width: 96px;
        height: 112px;
        font-size: 34px;
    }
    .hexa-result {
        width: 120px;
        height: 138px;
        margin-left: -60px;
        margin-top: -69px;
        font-size: 52px;
    }
    .hexa-result-label {
        margin-top: 86px;
        font-size: 16px;
        letter-spacing: 2px;
    }
    @keyframes hexaRingExpand {
        100% {
            width: 220px;
            height: 220px;
            margin-left: -110px;
            margin-top: -110px;
        }
    }
    .spin-btn.reveal-hexa-btn {
        padding: 12px 44px;
        font-size: 1rem;
        letter-spacing: 0.1em;
    }
}

.overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 3rem;
    max-width: 700px;
    width: 90%;
}

/* Host question popup: game-show style modal card */
.host-question-overlay {
    background: rgba(6, 10, 26, 0.84);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.host-question-card {
    width: min(92vw, 980px);
    min-height: min(74vh, 620px);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 15% 8%, rgba(168, 85, 247, 0.2), transparent 45%),
        radial-gradient(circle at 88% 16%, rgba(0, 229, 255, 0.16), transparent 40%),
        linear-gradient(165deg, rgba(16, 22, 58, 0.96) 0%, rgba(10, 14, 36, 0.96) 100%);
    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.6),
        0 0 34px rgba(255, 184, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
    animation: hostQuestionCardIn 0.34s cubic-bezier(0.2, 0.84, 0.25, 1);
    position: relative;
}

.host-question-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}
.host-question-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 184, 0, 0.35);
}
.host-question-toggle:active {
    transform: scale(0.98);
}
.host-question-toggle:focus-visible {
    outline: 2px solid rgba(255, 184, 0, 0.7);
    outline-offset: 2px;
}

.host-question-toggle {
    display: none;
}

/* Show toggle whenever question overlay is visible (minimized or full) */
.host-question-overlay:not(.hidden) .host-question-toggle {
    display: inline-flex;
    pointer-events: auto;
}

/* Slightly larger toggle button in minimized card */
.host-question-overlay.host-question-overlay--minimized .host-question-toggle {
    width: 44px;
    height: 44px;
    font-size: 24px;
}

/* TV host: keep question card smaller so board stays visible (only when ?tv=1 adds html.tv-mode) */
html.tv-mode .host-question-card {
    width: min(70vw, 720px);
    min-height: min(54vh, 440px);
    padding: clamp(0.95rem, 1.5vw, 1.35rem);
    gap: clamp(0.7rem, 1.2vw, 1rem);
}
html.tv-mode .host-question-letter {
    width: 86px;
    height: 86px;
    font-size: 2.75rem;
}
html.tv-mode .host-question-text {
    font-size: clamp(1.7rem, 3.2vw, 2.55rem);
}

/* TV: when question is minimized, reserve space so it never overlaps the board */
html.tv-mode body.host-body.host-question-minimized-active .hex-board-wrapper.hex-board-fullscreen {
    padding-left: 360px;
    box-sizing: border-box;
}

@keyframes hostQuestionCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.host-question-second-badge {
    margin-bottom: 0.15rem;
    font-size: clamp(1.02rem, 2.1vw, 1.28rem);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.3), rgba(255, 107, 0, 0.32));
    border: 1px solid rgba(255, 184, 0, 0.48);
}

.host-question-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.host-question-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.46rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 184, 0, 0.55);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.28), rgba(255, 107, 0, 0.32));
    color: #fff7dc;
    font-size: clamp(1rem, 2.1vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.03em;
}

@keyframes host-question-letter-attention {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 22px rgba(0, 229, 255, 0.28);
        border-color: rgba(0, 229, 255, 0.52);
    }
    45% {
        transform: scale(1.09);
        box-shadow:
            0 0 36px rgba(0, 229, 255, 0.55),
            0 0 56px rgba(120, 210, 255, 0.22);
        border-color: rgba(160, 245, 255, 0.92);
    }
}

@keyframes host-question-letter-attention-reduced {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.82;
    }
}

.host-question-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(82px, 10vw, 108px);
    height: clamp(82px, 10vw, 108px);
    border-radius: 50%;
    border: 2px solid rgba(0, 229, 255, 0.5);
    background: radial-gradient(circle at 30% 25%, rgba(0, 229, 255, 0.35), rgba(17, 35, 74, 0.72));
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 4.8vw, 3.4rem);
    font-weight: 900;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.25);
    transform-origin: center center;
    animation: host-question-letter-attention 2.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .host-question-letter {
        animation: host-question-letter-attention-reduced 2.8s ease-in-out infinite;
    }
}

.host-question-text {
    margin: 0;
    max-width: min(88vw, 840px);
    color: #f3f6ff;
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.42);
}

.host-question-note {
    display: none;
    margin: 0.35rem 0 0;
    max-width: min(88vw, 840px);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.host-question-undo-pick-btn {
    margin-top: 1rem;
    padding: 0.58rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, 0.48);
    background: rgba(0, 229, 255, 0.14);
    color: #c9f7ff;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.12);
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.host-question-undo-pick-btn:hover {
    transform: translateY(-1px);
    background: rgba(0, 229, 255, 0.22);
    border-color: rgba(120, 240, 255, 0.75);
    color: #f0feff;
}

.host-question-undo-pick-btn:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.75);
    outline-offset: 2px;
}

.host-question-overlay.host-question-overlay--minimized .host-question-undo-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    padding: 0.42rem 0.75rem;
}

.host-question-overlay.host-question-overlay--minimized .host-question-note {
    font-size: 1.05rem;
    opacity: 0.9;
    max-width: 100%;
    display: block;
}

/* Host: after 10s, minimize question overlay to left */
.host-question-overlay.host-question-overlay--minimized {
    background: transparent;
    pointer-events: none; /* TV: purely informational */
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
}
.host-question-overlay.host-question-overlay--minimized .host-question-card {
    pointer-events: none;
    position: fixed;
    top: calc(env(safe-area-inset-top) + 110px);
    left: 18px;
    width: min(300px, 30vw);
    min-height: 430px;
    padding: 16px 18px;
    border-radius: 18px;
    gap: 10px;
    opacity: 0.98;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    animation: none;
    transition:
        transform 360ms cubic-bezier(0.2, 0.9, 0.25, 1),
        width 360ms cubic-bezier(0.2, 0.9, 0.25, 1),
        min-height 360ms cubic-bezier(0.2, 0.9, 0.25, 1),
        opacity 220ms ease,
        box-shadow 320ms ease;
    transform: translateX(0) translateY(0) scale(1);
}

/* Minimized: خلاف / إظهار النقاط above تراجع عن اختيار الخلية */
.host-question-overlay.host-question-overlay--minimized .host-question-second-badge {
    order: 1;
}
.host-question-overlay.host-question-overlay--minimized .host-question-head {
    order: 2;
}
.host-question-overlay.host-question-overlay--minimized .host-question-text {
    order: 3;
}
.host-question-overlay.host-question-overlay--minimized .host-question-note {
    order: 4;
}
.host-question-overlay.host-question-overlay--minimized .host-question-dispute-toggle {
    order: 5;
}
.host-question-overlay.host-question-overlay--minimized .host-question-min-award {
    order: 6;
}
.host-question-overlay.host-question-overlay--minimized .overlay-read-timer-row {
    order: 7;
}
.host-question-overlay.host-question-overlay--minimized .host-question-undo-pick-btn {
    order: 8;
}

.host-question-overlay.host-question-overlay--minimized .host-question-letter {
    width: 68px;
    height: 68px;
    font-size: 2.25rem;
}
.host-question-overlay.host-question-overlay--minimized .host-question-text {
    font-size: 1.55rem;
    line-height: 1.4;
    max-width: 100%;
}
.host-question-overlay.host-question-overlay--minimized .host-question-second-badge {
    font-size: 1.05rem;
    margin-bottom: 0;
}
.host-question-overlay.host-question-overlay--minimized .overlay-read-timer-row {
    transform: scale(1.02);
    transform-origin: left top;
}

/* Smooth minimize/restore animation: define transitions on the base card too */
.host-question-card {
    transition:
        transform 360ms cubic-bezier(0.2, 0.9, 0.25, 1),
        width 360ms cubic-bezier(0.2, 0.9, 0.25, 1),
        min-height 360ms cubic-bezier(0.2, 0.9, 0.25, 1),
        opacity 220ms ease,
        box-shadow 320ms ease;
}

/* Award buttons inside minimized question */
.host-question-min-award {
    display: none;
    width: 100%;
    margin-top: 6px;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.host-question-dispute-toggle {
    display: none;
    border: 1px solid rgba(255, 184, 0, 0.45);
    background: rgba(255, 184, 0, 0.14);
    color: #ffcb57;
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.host-question-dispute-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 184, 0, 0.2);
    border-color: rgba(255, 184, 0, 0.62);
}

.host-question-overlay.host-question-overlay--minimized .host-question-dispute-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.host-question-overlay.host-question-overlay--minimized.host-question-overlay--show-award .host-question-min-award {
    display: flex;
    pointer-events: auto; /* allow clicking buttons even though overlay is informational */
}

/* Mobile: minimized question card goes under the board (bottom) — compact strip */
@media (max-width: 520px) {
    .host-question-overlay.host-question-overlay--minimized {
        align-items: flex-end;
        justify-content: center;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-card {
        top: auto;
        left: 50%;
        bottom: calc(env(safe-area-inset-bottom) + 8px);
        transform: translateX(-50%) translateY(0) scale(1);
        width: min(96vw, 520px);
        min-height: auto;
        padding: 8px 10px 10px;
        gap: 5px;
        border-radius: 16px;
        justify-content: flex-start;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-toggle {
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 10px;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-head {
        gap: 0.45rem;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-letter {
        width: 46px;
        height: 46px;
        font-size: 1.45rem;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-text {
        font-size: 1.02rem;
        line-height: 1.28;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-note {
        font-size: 0.78rem;
        margin-top: 0.15rem;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-undo-pick-btn {
        margin-top: 0.35rem;
        font-size: 0.72rem;
        padding: 0.32rem 0.65rem;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-dispute-toggle {
        padding: 5px 10px;
        font-size: 0.78rem;
        margin-top: 2px;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-second-badge {
        font-size: 0.82rem;
        padding: 0.25rem 0.55rem;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-min-award {
        margin-top: 6px;
        gap: 6px;
    }
    .host-question-overlay.host-question-overlay--minimized .host-question-min-award-btn {
        padding: 8px 12px;
        font-size: 0.82rem;
    }
}
.host-question-min-award-btn {
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    border-radius: 999px;
    padding: 12px 16px;
    font-family: inherit;
    font-weight: 900;
    font-size: 1.02rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.host-question-min-award-btn:active {
    transform: scale(0.98);
}
.host-question-min-award-btn--team0 {
    --award-color: var(--team-red);
}
.host-question-min-award-btn--team1 {
    --award-color: var(--team-green);
}
.host-question-min-award-btn--team0,
.host-question-min-award-btn--team1 {
    background: color-mix(in srgb, var(--award-color) 22%, transparent);
    border-color: color-mix(in srgb, var(--award-color) 55%, #fff 12%);
    box-shadow:
        0 10px 26px color-mix(in srgb, var(--award-color) 32%, transparent),
        0 0 26px color-mix(in srgb, var(--award-color) 34%, transparent),
        0 0 52px color-mix(in srgb, var(--award-color) 18%, transparent);
    animation: hostMinAwardGlow 1.6s ease-in-out infinite;
}
.host-question-min-award-btn--team0:hover,
.host-question-min-award-btn--team1:hover {
    background: color-mix(in srgb, var(--award-color) 30%, transparent);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow:
        0 12px 30px color-mix(in srgb, var(--award-color) 38%, transparent),
        0 0 34px color-mix(in srgb, var(--award-color) 42%, transparent),
        0 0 70px color-mix(in srgb, var(--award-color) 24%, transparent);
}

@keyframes hostMinAwardGlow {
    0%, 100% {
        box-shadow:
            0 10px 26px color-mix(in srgb, var(--award-color) 32%, transparent),
            0 0 26px color-mix(in srgb, var(--award-color) 34%, transparent),
            0 0 52px color-mix(in srgb, var(--award-color) 18%, transparent);
    }
    50% {
        box-shadow:
            0 12px 30px color-mix(in srgb, var(--award-color) 42%, transparent),
            0 0 38px color-mix(in srgb, var(--award-color) 46%, transparent),
            0 0 86px color-mix(in srgb, var(--award-color) 26%, transparent);
    }
}

/* Host answer overlay: timer + award buttons */
.host-answer-timer {
    max-width: 400px;
    margin: 0.75rem auto;
}
.host-award-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.host-question-answer-actions {
    margin-top: 0.2rem;
}

.host-reveal-answer-btn {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb800, #ff6b00);
    color: #ffffff;
    font-family: inherit;
    font-size: clamp(1.05rem, 2.3vw, 1.25rem);
    font-weight: 800;
    padding: 0.74rem 1.5rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.22s ease, opacity 0.2s ease;
    box-shadow: 0 8px 24px rgba(255, 107, 0, 0.35);
}

.host-reveal-answer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(255, 107, 0, 0.46);
}

.host-reveal-answer-btn:active {
    transform: scale(0.98);
}

.host-reveal-answer-btn[disabled] {
    opacity: 0.68;
    cursor: default;
}

.host-question-answer {
    margin: 0.2rem 0 0;
    color: #9dff7e;
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 3.8vw, 2.7rem);
    font-weight: 900;
    line-height: 1.35;
    text-shadow: 0 0 18px rgba(157, 255, 126, 0.25);
    animation: hostAnswerRevealIn 0.24s ease;
}

@keyframes hostAnswerRevealIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.host-question-read-timer {
    margin-top: 0.25rem;
    width: min(88%, 480px);
}

.host-question-timer-display {
    max-width: 100%;
    margin: 0 auto;
}

.overlay-small {
    padding: 1.5rem 2rem;
}

.overlay-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 3rem;
    font-weight: 800;
    color: #FFB800;
    background: rgba(255, 184, 0, 0.15);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.overlay-question {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.8;
    color: #eee;
}

.overlay-second-question {
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFB800;
    margin: 0 0 0.75rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 184, 0, 0.2);
    border-radius: 8px;
    display: inline-block;
    animation: overlay-second-pulse 1.2s ease-in-out 3;
}

@keyframes overlay-second-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

.overlay-read-timer-row {
    margin-top: 1.25rem;
    width: 100%;
}

.overlay-read-timer-btn {
    padding: 0.6rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    background: rgba(255, 184, 0, 0.25);
    color: #FFB800;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.overlay-read-timer-btn:hover {
    background: rgba(255, 184, 0, 0.4);
    transform: scale(1.02);
}

.overlay-read-timer-display {
    display: inline-block;
    min-width: 3rem;
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFB800;
}

.overlay-status {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFB800;
}

.overlay-buzzed {
    font-size: 2.5rem;
    font-weight: 800;
    color: #eee;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em;
}
.overlay-buzzed .buzzed-player-highlight {
    background: rgba(255, 184, 0, 0.25);
    border: 3px solid #FFB800;
    border-radius: 14px;
    padding: 0.35em 0.6em;
    color: #FFB800;
    animation: overlayBuzzedPulse 1s ease-in-out infinite alternate;
}
@keyframes overlayBuzzedPulse {
    from { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.4); }
    to   { box-shadow: 0 0 20px 6px rgba(255, 184, 0, 0.3); }
}
.overlay-buzzed span:not(.buzzed-player-highlight) {
    color: #FFB800;
}

.overlay-feedback {
    font-size: 2.5rem;
    font-weight: 800;
}

.team-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin-bottom: 1rem;
}

.team-indicator {
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    opacity: 0.5;
    transition: all 0.3s;
}

.red-indicator {
    background: rgba(255, 26, 26, 0.2);
    border: 2px solid #FF1A1A;
    color: #FF1A1A;
}

.green-indicator {
    background: rgba(0, 230, 118, 0.2);
    border: 2px solid #00E676;
    color: #00E676;
}

.team-indicator.active-team {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

.turn-label {
    font-size: 1rem;
    color: #888;
    display: flex;
    gap: 0.4rem;
}

/* ====== HEX GRID ====== */

.hex-board-wrapper {
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hex-board {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hex-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: nowrap;
}

.main-row {
    margin-top: -20px;
}

.main-row:first-child {
    margin-top: 0;
}

/* Honeycomb stagger: 2nd and 4th rows shifted by half hex so they interlock */
.hex-board .main-row:nth-child(2),
.hex-board .main-row:nth-child(4) {
    transform: translateX(36px);
}

/* (removed empty row size rulesets) */

/* Shared hex shape (pointy-top) — no motion on interact */
.hex-cell,
.hex-edge {
    width: 72px;
    height: 82px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    flex-shrink: 0;
    transform: none;
    animation: none;
    transition: none;
}

/* Letter cells and edge hexes: small gap so borders are visible between all neighbors */
.hex-cell {
    margin: 2px;
}

.hex-edge {
    margin: 2px;
}

/* Remove gap between an edge hex and its immediate neighbor */
.hex-edge + .hex-cell { margin-left: 0; }
.hex-cell + .hex-edge { margin-right: 0; }

/* Black outline only on unclaimed cells (no ::before – cream fill must show) */
.hex-cell.hex-unclaimed {
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px #000);
    transform: none;
    animation: none;
    transition: none;
}

/* Edge hexagons — same fill + glow as claimed interior cells */
.hex-edge-red {
    background: var(--team-red);
    box-shadow: 0 0 12px rgba(255, 26, 26, 0.7);
    transform: none;
    animation: none;
    transition: none;
}

.hex-edge-green {
    background: var(--team-green);
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
    transform: none;
    animation: none;
    transition: none;
}

/* Pulse edges when team is one hex away from winning */
.hex-board-fullscreen .hex-edge-red.hex-edge-highlight,
.hex-edge-red.hex-edge-highlight {
    animation: hexEdgeHighlightRed 0.12s ease-in-out infinite alternate;
}
.hex-board-fullscreen .hex-edge-green.hex-edge-highlight,
.hex-edge-green.hex-edge-highlight {
    animation: hexEdgeHighlightGreen 0.12s ease-in-out infinite alternate;
}
@keyframes hexEdgeHighlightRed {
    from { filter: brightness(1); }
    to   { filter: brightness(0.15); }
}
@keyframes hexEdgeHighlightGreen {
    from { filter: brightness(1); }
    to   { filter: brightness(0.15); }
}

/* Highlight the path when team is one hex away — fast brightness pulse */
.hex-board-fullscreen .hex-cell.hex-path-highlight-red,
.hex-cell.hex-path-highlight-red {
    animation: hexPathGlowRed 0.12s ease-in-out infinite alternate;
}
.hex-board-fullscreen .hex-cell.hex-path-highlight-green,
.hex-cell.hex-path-highlight-green {
    animation: hexPathGlowGreen 0.12s ease-in-out infinite alternate;
}
/* When BOTH teams one hex away: alternate red/green phases */
.path-both-active.path-show-red .hex-cell.hex-path-highlight-green,
.path-both-active.path-show-red .hex-edge-green.hex-edge-highlight {
    filter: none;
    animation: none;
}
.path-both-active.path-show-green .hex-cell.hex-path-highlight-red,
.path-both-active.path-show-green .hex-edge-red.hex-edge-highlight {
    filter: none;
    animation: none;
}
.path-both-active.path-show-red .hex-cell.hex-path-highlight-red,
.path-both-active.path-show-red .hex-edge-red.hex-edge-highlight {
    animation: hexPathGlowRed 0.12s ease-in-out infinite alternate;
}
.path-both-active.path-show-green .hex-cell.hex-path-highlight-green,
.path-both-active.path-show-green .hex-edge-green.hex-edge-highlight {
    animation: hexPathGlowGreen 0.12s ease-in-out infinite alternate;
}
@keyframes hexPathGlowRed {
    from { filter: brightness(1); }
    to   { filter: brightness(0.15); }
}
@keyframes hexPathGlowGreen {
    from { filter: brightness(1); }
    to   { filter: brightness(0.15); }
}

/* Edge rows (top/bottom green hexes) */
.edge-row {
    margin: 0;
    flex-wrap: nowrap;
}

.edge-row-top {
    margin-bottom: -20px;
    position: relative;
    z-index: 0;
}

.edge-row-bottom {
    margin-top: -20px;
    position: relative;
    z-index: 0;
}

/* Main hex cells - cream by default (unclaimed); red/green override when claimed */
.hex-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: none;
    animation: none;
    transition: none;
    position: relative;
    z-index: 1;
    background: #e8e0d5 !important; /* cream: unclaimed letter cells */
    padding: 22px; /* extra space between letter and hex edge */
    box-sizing: border-box;
}

.hex-cell.hex-unclaimed:hover {
    background: #f0eae0 !important;
    z-index: 2;
    transform: none;
    animation: none;
    transition: none;
    box-shadow: none;
}

.hex-cell.hex-unclaimed .hex-letter,
.hex-cell:not(.hex-red):not(.hex-green) .hex-letter {
    color: #2c2c2c;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

/* Claimed cells: no letter, no gap – connect to edge hexes */
.hex-red .hex-letter,
.hex-green .hex-letter {
    visibility: hidden;
    font-size: 0;
}
/* Claimed cells still use the same gap as letters; color alone indicates connection */
.hex-red {
    background: #FF1A1A !important;
    box-shadow: 0 0 12px rgba(255, 26, 26, 0.7);
    cursor: default;
    transform: none;
    animation: none;
    transition: none;
}

.hex-green {
    background: #00E676 !important;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
    cursor: default;
    transform: none;
    animation: none;
    transition: none;
}

.hex-letter {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ====== INTERACTION AREA ====== */

.interaction-area {
    width: 100%;
    max-width: 700px;
    margin-top: 1rem;
}

.panel {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden {
    display: none !important;
}

/* Question */
.question-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: #aaa;
    margin-bottom: 0.75rem;
}

.question-letter {
    font-size: 2rem;
    font-weight: 800;
    color: #FFB800;
    background: rgba(255, 184, 0, 0.15);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-text {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.8;
}

/* Buzzer */
.buzzer-prompt {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #FFB800;
    font-weight: 700;
}

.buzzer-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.buzzer-btn {
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: inherit;
    border: 3px solid;
    border-radius: var(--radius-playful);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, box-shadow 0.2s;
    min-width: 120px;
    color: white;
}

.buzzer-red {
    background: rgba(255, 26, 26, 0.2);
    border-color: #FF1A1A;
}
.buzzer-red:hover:not(:disabled) {
    background: #FF1A1A;
    transform: scale(1.05);
}

.buzzer-green {
    background: rgba(0, 230, 118, 0.2);
    border-color: #00E676;
}
.buzzer-green:hover:not(:disabled) {
    background: #00E676;
    transform: scale(1.05);
}

.buzzer-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Answer */
.answer-header {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.buzzed-name {
    color: #FFB800;
}

.timer-display {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 36px;
    background: #2d2d5e;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #FF1A1A, #FF6B00);
    border-radius: 18px;
    transition: width 1s linear;
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 800;
}

.answer-form {
    display: flex;
    gap: 0.5rem;
}

.answer-form input {
    flex: 1;
    width: auto;
    min-width: 0;
    text-align: center;
    font-size: 1.1rem;
}

.answer-form button {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-playful);
    border: none;
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #0D1B2A;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.answer-form button:hover {
    transform: scale(1.05);
}

.answer-form button:active {
    transform: scale(0.97);
    animation: none;
}

/* Steal */
.steal-message {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FF1A1A;
    margin-bottom: 1rem;
}

/* Feedback */
.feedback-text {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.5rem;
}

.feedback-correct {
    color: #00E676;
}

.feedback-wrong {
    color: #FF1A1A;
}

.feedback-neutral {
    color: #FFB800;
}

/* ====== RESULT ====== */

.result-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    background-attachment: fixed;
    text-align: center;
    padding: 2rem 1rem;
    position: relative;
    overflow-x: hidden;
}

.result-container {
    width: 100%;
    max-width: 720px;
}

.result-showcase.result-container {
    max-width: 680px;
}

/* Full-screen confetti (first ~5s) */
.result-confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    overflow: hidden;
}

.result-confetti-layer--fade {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.result-confetti-piece {
    position: absolute;
    top: -16px;
    border-radius: 2px;
    animation-name: resultConfettiFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes resultConfettiFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    100% {
        transform: translateY(110vh) translateX(24px) rotate(640deg);
    }
}

.admin-reports-container {
    max-width: 1100px;
}

.admin-reports-table {
    text-align: right;
}

.admin-reports-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 1rem;
}

.admin-report-status {
    color: #00E676;
    font-weight: 600;
}

.admin-report-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-report-input {
    font-size: 0.8rem;
}

.admin-report-save-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.admin-report-edit-link {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 184, 0, 0.12);
    border: 1px solid rgba(255, 184, 0, 0.5);
    color: rgba(255, 184, 0, 0.95);
    transition: background 0.15s, transform 0.15s;
}

.admin-report-edit-link:hover {
    background: rgba(255, 184, 0, 0.2);
    transform: translateY(-1px);
}

.admin-report-remove-btn {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid rgba(255, 26, 26, 0.55);
    color: rgba(255, 255, 255, 0.94);
    background: rgba(255, 26, 26, 0.16);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.admin-report-remove-btn:hover {
    background: rgba(255, 26, 26, 0.24);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(255, 26, 26, 0.12);
}

.admin-report-remove-btn:active {
    transform: translateY(0);
}

.admin-edit-question-form {
    margin-top: 0.75rem;
}

.admin-edit-save-btn {
    margin-top: 0.5rem;
}

.admin-edit-back {
    margin-bottom: 0.5rem;
}

.admin-edit-no-question {
    color: #FF1A1A;
}

.admin-edit-error {
    color: #FF1A1A;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}

.admin-login-error {
    color: #FF1A1A;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    font-weight: 500;
}

.admin-login-form {
    margin-top: 0.5rem;
}

.admin-login-btn {
    margin-top: 1rem;
    width: 100%;
}

.admin-login-container {
    max-width: 420px;
}

.result-game-label {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.35rem;
}

/* Trophy intro */
.result-trophy-wrap {
    margin: 0.25rem auto 0.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-trophy-emoji {
    font-size: 3.75rem;
    line-height: 1;
    display: block;
    animation: resultTrophyBounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
    filter: drop-shadow(0 0 20px rgba(255, 184, 0, 0.55));
}

@keyframes resultTrophyBounce {
    0% {
        transform: scale(0) rotate(-25deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.15) rotate(6deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.result-page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    margin-bottom: 0.65rem;
}

.result-page-title--show {
    text-shadow: 0 0 28px rgba(168, 85, 247, 0.35);
}

.result-rounds-summary {
    font-size: 1.45rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.35rem;
}

.result-rounds-summary .result-rounds-label {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0.35em;
}

/* Winner / loser stack */
.result-cards--showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 2rem;
}

.winner-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    border-radius: 24px;
    box-shadow: 0 0 60px rgba(255, 184, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.35);
    transform: scale(1.05);
    padding: 32px 28px;
    text-align: center;
    overflow: hidden;
    animation: winnerCardEnter 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both, winnerCardGlow 2.4s ease-in-out 0.9s infinite alternate;
}

@keyframes winnerCardEnter {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }
}

@keyframes winnerCardGlow {
    from {
        box-shadow: 0 0 60px rgba(255, 184, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.35);
    }
    to {
        box-shadow: 0 0 80px rgba(255, 184, 0, 0.75), 0 0 40px rgba(255, 107, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.35);
    }
}

.winner-card-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.winner-sparkle-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 18px rgba(255, 255, 255, 0.8);
    animation: winnerSparkleTwinkle 2s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes winnerSparkleTwinkle {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.6);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.winner-card .result-card-label,
.winner-card .result-card-team-winner,
.winner-card .result-card-players {
    position: relative;
    z-index: 1;
    color: #1a0a0a;
}

.winner-card .result-card-label {
    color: rgba(26, 10, 10, 0.75);
    font-weight: 800;
}

.winner-card .result-card-team-winner {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 900;
    margin: 0.35rem 0 0.5rem;
}

.winner-card .result-card-players {
    font-weight: 600;
    color: rgba(26, 10, 10, 0.88);
}

.loser-card {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(135deg, #3a0a0a, rgba(255, 26, 26, 0.14));
    border: 2px solid #FF1A1A;
    border-radius: 24px;
    opacity: 0.85;
    padding: 1.25rem 1.5rem;
    text-align: center;
    animation: loserCardEnter 0.55s ease-out 0.35s both;
}

.loser-card--green-side {
    background: linear-gradient(135deg, #0a2a14, rgba(0, 230, 118, 0.12));
    border-color: #00E676;
}

.loser-card--green-side .result-card-team.team-green {
    color: #69F0AE;
}

@keyframes loserCardEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 0.85;
        transform: translateY(0) scale(1);
    }
}

.loser-card .result-card-label {
    color: rgba(255, 255, 255, 0.7);
}

.loser-card .result-card-players {
    color: rgba(255, 255, 255, 0.82);
}

/* Podium: 2nd | 1st | 3rd (LTR) */
.result-podium-section--show {
    margin-bottom: 1.75rem;
}

.result-podium-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: 1rem;
}

.result-podium-visual {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.65rem, 3vw, 1.25rem);
    margin: 0 auto 0.5rem;
    max-width: 420px;
}

.podium-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    animation: podiumColRise 0.65s ease-out both;
}

.podium-column:nth-child(1) { animation-delay: 0.2s; }
.podium-column:nth-child(2) { animation-delay: 0.05s; }
.podium-column:nth-child(3) { animation-delay: 0.35s; }

@keyframes podiumColRise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.podium-column--first {
    flex: 1.15;
}

.podium-player-block {
    text-align: center;
    margin-bottom: 0.35rem;
    width: 100%;
}

.podium-player-block--first .podium-name {
    font-size: 1.05rem;
}

.podium-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 900;
    font-size: 0.95rem;
    color: #0d1520;
    margin-bottom: 0.35rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.podium-rank-badge--gold {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
}

.podium-rank-badge--silver {
    background: linear-gradient(180deg, #e8ecf2, #9aa5b5);
    color: #1a1f28;
}

.podium-rank-badge--bronze {
    background: linear-gradient(180deg, #e8a462, #8B4513);
    color: #fff;
}

.podium-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.podium-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

.podium-score {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}

.podium-block {
    width: 100%;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}

.podium-first {
    background: linear-gradient(180deg, #FFB800, #FF6B00);
    height: 120px;
}

.podium-second {
    background: linear-gradient(180deg, #C0C0C0, #808080);
    height: 80px;
}

.podium-third {
    background: linear-gradient(180deg, #CD7F32, #8B4513);
    height: 60px;
}

/* Legacy helpers (admin / old markup) */
.result-card {
    position: relative;
    border-radius: 20px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    overflow: hidden;
}

.result-card-winner {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.result-card-winner-yellow {
    background: linear-gradient(135deg, rgba(255, 213, 74, 0.85), rgba(255, 184, 0, 0.8));
    border: 2px solid rgba(255, 184, 0, 0.95);
}

.result-card-team-winner {
    color: #0D1B2A;
}

.result-card-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
    position: relative;
    z-index: 1;
}

.result-card-team {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.result-card-team.team-red { color: #FF1A1A; }
.result-card-team.team-green { color: #00E676; }
.result-card-team.team-blue { color: #5dade2; }
.result-card-team-loser { opacity: 0.9; }

.result-card-players {
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.result-stats-section {
    margin-bottom: 2rem;
}

.result-stats-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.85rem;
}

/* Admin & simple tables */
.result-stats-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.75rem;
    overflow-x: auto;
}

.result-stats-card--glass {
    background: rgba(8, 12, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 0.5rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.result-stats-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
}

.result-stats-table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse;
    text-align: center;
}

.result-stats-table th,
.result-stats-table td {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.result-stats-table th {
    font-size: 0.72rem;
    color: rgba(255, 184, 0, 0.95);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.03);
}

.result-stats-table td {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
}

.result-stats-table tbody tr:last-child td {
    border-bottom: none;
}

.result-row-red .result-cell-name { color: #FF6B6B; font-weight: 700; }
.result-row-green .result-cell-name { color: #69F0AE; font-weight: 700; }
.result-row-blue .result-cell-name { color: #5dade2; font-weight: 600; }
.result-cell-correct {
    color: #00E676 !important;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(0, 230, 118, 0.35);
}
.result-cell-wrong {
    color: #FF1A1A !important;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(255, 26, 26, 0.3);
}

.result-cell-rank {
    font-weight: 900;
    color: rgba(255, 184, 0, 0.98);
}

.result-row-top td {
    background: rgba(255, 184, 0, 0.07);
}
.result-row-top:hover td {
    background: rgba(255, 184, 0, 0.12);
}

.result-restart-form {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}


.restart-btn {
    padding: 1rem 2.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: #0D1B2A;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-shadow: 0 4px 20px rgba(255, 184, 0, 0.35);
}

.restart-btn--showcase {
    padding: 1.1rem 3rem;
    font-size: clamp(1.1rem, 3.5vw, 1.25rem);
    font-weight: 900;
    border-radius: 18px;
    border: 2px solid rgba(255, 140, 0, 0.75);
    animation: restartBtnPulse 2.2s ease-in-out infinite;
}

@keyframes restartBtnPulse {
    0%, 100% {
        box-shadow:
            0 0 24px rgba(255, 184, 0, 0.45),
            0 0 48px rgba(255, 107, 0, 0.25),
            0 8px 28px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow:
            0 0 36px rgba(255, 184, 0, 0.75),
            0 0 72px rgba(255, 107, 0, 0.4),
            0 10px 32px rgba(0, 0, 0, 0.4);
    }
}

.restart-btn:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.06);
}

.restart-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #e6a600, #e55a00);
    color: #0D1B2A;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 520px) {
    .winner-card {
        transform: scale(1);
        padding: 26px 20px;
    }
    @keyframes winnerCardEnter {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(16px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    .result-card-team {
        font-size: 1.35rem;
    }
    .result-podium-visual {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .podium-column {
        flex: 1 1 30%;
    }
    .podium-column--first {
        order: -1;
        flex: 1 1 100%;
        margin-bottom: 0.5rem;
    }
    .podium-first { height: 100px; }
    .podium-second { height: 72px; }
    .podium-third { height: 56px; }
}

/* ====== HOST JUDGE BUTTONS ====== */

.host-answer-hint {
    color: #FFB800;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.75rem 0;
    background: rgba(255, 184, 0, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-block;
}

.judge-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.judge-btn {
    padding: 0.8rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    color: white;
}

.judge-correct {
    background: linear-gradient(135deg, #00E676, #00a085);
}

.judge-correct:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 230, 118, 0.4);
}

.judge-wrong {
    background: linear-gradient(135deg, #FF1A1A, #C9184A);
}

.judge-wrong:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 26, 26, 0.4);
}

/* ====== REPORT MODAL (Judge) ====== */

.report-btn {
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.report-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.report-btn-compact {
    width: 100%;
    max-width: 340px;
    font-size: 0.98rem;
    padding: 0.8rem 1rem;
}

.report-box {
    max-width: 680px;
    width: min(94vw, 680px);
    margin: 0 auto;
    background: rgba(26, 10, 46, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 1.5rem 1.5rem;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    align-items: stretch;
    text-align: right;
}

/* Keep player/judge report modal centered regardless of parent layout wrappers */
#reportOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
    box-sizing: border-box;
}

#reportOverlay.hidden {
    display: none !important;
}

#reportOverlay .report-box {
    margin-inline: auto;
}
.report-box .report-field,
.report-box .report-preview,
.report-box .report-actions {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.report-box .report-actions {
    justify-content: center;
}

.report-title {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
    color: rgba(255, 255, 255, 0.96);
}

.report-preview {
    text-align: right;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 0.75rem;
    margin-bottom: 0.85rem;
}
.report-preview-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.25rem;
    font-weight: 700;
}
.report-preview-text {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    word-break: break-word;
}

.report-field {
    text-align: right;
    margin-bottom: 0.8rem;
}
.report-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: rgba(255, 184, 0, 0.92);
    margin-bottom: 0.35rem;
}
.report-select,
.report-input,
.report-textarea {
    width: 100%;
    font-size: 1.05rem;
}
.report-select,
.report-input {
    min-height: 48px;
}
.report-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}

.report-actions {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 0.35rem;
}
.report-action {
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: none;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.report-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.report-action-primary {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: #0D1B2A;
    box-shadow: 0 10px 26px rgba(255, 184, 0, 0.18);
}
.report-action-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(255, 184, 0, 0.26);
}
.report-action-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
}
.report-action-secondary:hover {
    transform: translateY(-2px);
}

.report-status {
    margin-top: 0.6rem;
    text-align: center;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    min-height: 1.2em;
}

.player-footer-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

/* Judge answer box (host phone) */
.judge-answer-box,
.judge-question-box {
    background: rgba(255, 184, 0, 0.08);
    border: 2px solid rgba(255, 184, 0, 0.3);
    border-radius: 14px;
    padding: 1.25rem;
    margin: 1.5rem auto;
    max-width: 320px;
}

.judge-question-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    line-height: 1.5;
    word-break: break-word;
}

.judge-answer-label {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.judge-waiting-hint {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.75rem;
}
.player-waiting-hint {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
}

.judge-answer-text {
    color: #FFB800;
    font-size: 1.8rem;
    font-weight: 800;
}

.judge-who-buzzed {
    font-size: 1.75rem;
    font-weight: 800;
    color: #eee;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25em;
}
.judge-who-buzzed .buzzed-player-highlight {
    background: rgba(255, 184, 0, 0.25);
    border: 2px solid #FFB800;
    border-radius: 10px;
    padding: 0.25em 0.5em;
    color: #FFB800;
    animation: judgeBuzzedPulse 1s ease-in-out infinite alternate;
}
@keyframes judgeBuzzedPulse {
    from { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.35); }
    to   { box-shadow: 0 0 14px 4px rgba(255, 184, 0, 0.25); }
}
.judge-who-buzzed span:not(.buzzed-player-highlight) {
    color: #FFB800;
}

/* Speaking icon on player phone */
.speaking-icon {
    font-size: 5rem;
    margin: 1rem 0;
    animation: speakPulse 1.5s infinite alternate;
}

@keyframes speakPulse {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.1); opacity: 1; }
}

/* ====== RESPONSIVE ====== */

@media (max-width: 600px) {
    .hex-cell,
    .hex-edge {
        width: 50px;
        height: 58px;
    }
    .main-row {
        margin-top: -14px;
    }
    .edge-row-top {
        margin-bottom: -14px;
    }
    .edge-row-bottom {
        margin-top: -14px;
    }
    .hex-letter {
        font-size: 1.1rem;
    }
    .game-title {
        font-size: 2.5rem;
    }
    .teams-row {
        flex-direction: column;
    }
    .vs-divider {
        font-size: 1.5rem;
    }
    .buzzer-btn {
        min-width: 90px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* ====== JOIN PAGE ====== */

.join-container {
    text-align: center;
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    margin: 0 auto;
}

.join-form {
    margin-top: 1.5rem;
}

.join-error {
    background: rgba(255, 26, 26, 0.2);
    border: 1px solid #FF1A1A;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    color: #FF1A1A;
    font-weight: 600;
}

.join-reconnect-hint {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

.team-select {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.team-option {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    display: flex;
}

.team-option input[type="radio"] {
    display: none;
}

.team-option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    transition: all 0.2s;
    box-sizing: border-box;
}

/* Lobby: flexible team sizes (e.g. 2v3) */
.team-size-section { margin-top: 1.5rem; }
.team-size-title {
    display: block;
    margin-bottom: 0.75rem;
    text-align: center;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}
.team-size-flex { text-align: center; }
.team-size-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.team-size-input-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.team-size-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
}
.team-size-label.red-label { color: #ff6b6b; text-shadow: 0 0 20px rgba(255, 26, 26, 0.35); }
.team-size-label.green-label { color: #69f0ae; text-shadow: 0 0 20px rgba(0, 230, 118, 0.3); }

/* Custom stepper (replaces number input spinners) */
.team-size-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-size-stepper--red {
    border-color: rgba(255, 26, 26, 0.35);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 24px rgba(255, 26, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-size-stepper--green {
    border-color: rgba(0, 230, 118, 0.35);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 24px rgba(0, 230, 118, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-size-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 184, 0, 0.45);
    background: rgba(255, 184, 0, 0.12);
    color: #ffb800;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
    /* Use a UI font for symbols so +/- stay optically centered */
    font-family: "Cairo", system-ui, sans-serif;
}

.team-size-btn--minus {
    font-size: 1.45rem;
    padding-bottom: 2px;
}

.team-size-btn--plus {
    font-size: 1.35rem;
    padding-bottom: 1px;
}

.team-size-btn:hover:not(:disabled) {
    background: rgba(255, 184, 0, 0.22);
    border-color: rgba(255, 184, 0, 0.75);
    color: #ffe08a;
    box-shadow: 0 0 18px rgba(255, 184, 0, 0.35);
}

.team-size-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.team-size-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.team-size-display {
    min-width: 2.5rem;
    padding: 0 14px;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.team-size-stepper--red .team-size-display {
    color: rgba(255, 235, 235, 0.98);
}

.team-size-stepper--green .team-size-display {
    color: rgba(235, 255, 245, 0.98);
}

.team-size-vs {
    font-weight: 800;
    font-size: 1.05rem;
    color: rgba(255, 184, 0, 0.85);
    padding-bottom: 10px;
    letter-spacing: 0.02em;
}

@media (max-width: 520px) {
    .team-size-row {
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
    }
    .team-size-vs {
        padding-bottom: 0;
    }
    .team-size-btn {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }
    .team-size-display {
        font-size: 1.35rem;
        padding: 0 12px;
    }
}

.mode-option .mode-option-label {
    background: rgba(255, 184, 0, 0.06);
    border: 2px solid rgba(255, 184, 0, 0.35);
    color: #FFB800;
    border-radius: 999px;
    padding-inline: 1.75rem;
}

.mode-option input:checked + .mode-option-label {
    background: #FFB800;
    color: #0D1B2A;
    box-shadow: 0 0 16px rgba(255, 184, 0, 0.45);
}

.red-option .team-option-label {
    background: rgba(255, 26, 26, 0.15);
    border: 2px solid #FF1A1A;
    color: #FF1A1A;
}

.red-option input:checked + .team-option-label {
    background: #FF1A1A;
    color: white;
}

.green-option .team-option-label {
    background: rgba(0, 230, 118, 0.15);
    border: 2px solid #00E676;
    color: #00E676;
}

.green-option input:checked + .team-option-label {
    background: #00E676;
    color: white;
}

.random-team-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: #00E5FF;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(168, 85, 247, 0.08));
    border: 2px solid rgba(0, 229, 255, 0.35);
    border-radius: var(--radius-playful);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.random-team-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
    border-color: transparent;
    color: #0D1B2A;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.35);
}
.random-team-btn.random-selected {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

/* ====== ROOM PAGES: إنشاء غرفة + انضم (shared card layout) ====== */
/* Team size steppers (.team-size-stepper, .team-size-btn, .team-size-display) intentionally unchanged */

.room-page {
    min-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    direction: rtl;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.room-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 40px;
    width: 100%;
    max-width: 680px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.room-page-logo {
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin: 0 0 6px;
    line-height: 1.15;
}

.room-page-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0 0 32px;
}

.room-page .lobby-form,
.room-page .join-form {
    margin-top: 0;
    text-align: right;
}

.room-page .field-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    text-align: right;
    font-weight: 500;
}

.room-page .field-group {
    margin-bottom: 1.1rem;
}

.room-page .field-group input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.room-page .field-group input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.room-page .field-group input[type="text"]:focus {
    outline: none;
    border-color: rgba(255, 184, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.12);
}

.join-room-code-input {
    text-align: center;
    font-size: 1.75rem !important;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: 800;
}

/* Lobby: teams row + VS + team cards */
.lobby-room-page .teams-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.lobby-room-page .vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.25);
    padding: 0 8px;
    flex: 0 0 auto;
    align-self: center;
    min-width: 72px;
}

.lobby-room-page .vs-divider::before,
.lobby-room-page .vs-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    min-width: 12px;
}

.lobby-room-page .team-card.red,
.lobby-room-page .team-card.green {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 100%;
    border-radius: 20px;
    padding: 24px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.lobby-room-page .team-card.red {
    background: rgba(255, 26, 26, 0.05);
    border: 1.5px solid rgba(255, 26, 26, 0.2);
}

.lobby-room-page .team-card.green {
    background: rgba(0, 230, 118, 0.05);
    border: 1.5px solid rgba(0, 230, 118, 0.2);
}

.lobby-room-page .team-card-title {
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 16px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-room-page .team-card.red .team-card-title {
    color: #FF1A1A;
}

.lobby-room-page .team-card.green .team-card-title {
    color: #00E676;
}

/* Players count block (stepper markup unchanged) */
.players-count-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.players-count-title {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 16px;
    font-weight: 600;
}

.players-count-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.lobby-room-page .team-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lobby-room-page .team-counter-label,
.lobby-room-page .team-size-label.team-counter-label {
    font-size: 12px;
    font-weight: 700;
}

.lobby-room-page .team-counter.red .team-size-label.red-label {
    color: #FF1A1A;
    text-shadow: none;
}

.lobby-room-page .team-counter.green .team-size-label.green-label {
    color: #00E676;
    text-shadow: none;
}

.vs-label {
    font-size: 16px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 8px;
}

.lobby-room-page .players-count-row .team-size-vs.vs-label {
    padding-bottom: 0;
    color: rgba(255, 255, 255, 0.2);
}

/* Primary CTA (lobby + join) */
.room-page .primary-action-btn {
    width: 100%;
    margin-top: 8px;
    padding: 16px;
    font-size: 18px;
    font-weight: 900;
    color: #fff !important;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    cursor: pointer;
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.35);
    transition: all 0.2s;
    animation: none;
    font-family: inherit;
}

.room-page .primary-action-btn:hover {
    box-shadow: 0 0 50px rgba(255, 184, 0, 0.55);
    transform: translateY(-2px);
}

.room-page .primary-action-btn:active {
    transform: translateY(0);
}

/* Join: team pill buttons */
.join-room-page .team-btn-group {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.join-room-page .team-btn-group .team-option.team-btn {
    flex: 1 1 120px;
    min-width: 0;
    cursor: pointer;
    display: flex;
    margin: 0;
    position: relative;
}

.join-room-page .team-btn-group .team-option.team-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.join-room-page .team-btn-group .team-option.team-btn .team-option-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
}

.join-room-page .team-btn.red .team-option-label {
    border-color: rgba(255, 26, 26, 0.4);
    color: #FF1A1A;
    background: rgba(255, 255, 255, 0.05);
}

.join-room-page .team-btn.red:hover .team-option-label,
.join-room-page .team-btn.red input:checked + .team-option-label {
    background: rgba(255, 26, 26, 0.12);
    border-color: #FF1A1A;
    box-shadow: 0 0 20px rgba(255, 26, 26, 0.25);
    color: #fff;
}

.join-room-page .team-btn.green .team-option-label {
    border-color: rgba(0, 230, 118, 0.4);
    color: #00E676;
    background: rgba(255, 255, 255, 0.05);
}

.join-room-page .team-btn.green:hover .team-option-label,
.join-room-page .team-btn.green input:checked + .team-option-label {
    background: rgba(0, 230, 118, 0.12);
    border-color: #00E676;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.25);
    color: #fff;
}

.join-room-page .team-btn-group .random-team-btn.team-btn.random {
    flex: 1 1 120px;
    min-height: 44px;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid rgba(168, 85, 247, 0.4);
    background: rgba(255, 255, 255, 0.05);
    color: #A855F7;
    transition: all 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.join-room-page .team-btn-group .random-team-btn.team-btn.random:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: #A855F7;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.25);
    color: #fff;
    transform: none;
}

.join-room-page .team-btn-group .random-team-btn.team-btn.random.random-selected {
    background: rgba(168, 85, 247, 0.2);
    border-color: #A855F7;
    color: #fff;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.join-room-page .helper-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    text-align: right;
    margin-top: 12px;
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
}

@media (max-width: 768px) {
    /* Join page: red + green on one row, random full width below */
    .join-room-page .team-btn-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        justify-content: stretch;
    }
    .join-room-page .team-btn-group .team-option.team-btn {
        flex: none;
    }
    .join-room-page .team-btn-group .team-option.team-btn.red {
        grid-column: 1;
        grid-row: 1;
    }
    .join-room-page .team-btn-group .team-option.team-btn.green {
        grid-column: 2;
        grid-row: 1;
    }
    .join-room-page .team-btn-group .random-team-btn.team-btn.random {
        grid-column: 1 / -1;
        grid-row: 2;
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .room-card {
        padding: 28px 20px;
    }
    .room-page-logo {
        font-size: 34px;
    }
    .lobby-room-page {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 3.5rem;
    }
    .lobby-room-page .teams-row {
        flex-direction: column;
    }
    .lobby-room-page .vs-divider {
        width: 100%;
        min-width: 0;
        padding: 8px 0;
    }
    .lobby-room-page .vs-divider::before,
    .lobby-room-page .vs-divider::after {
        flex: 1;
    }
}

/* ====== WAITING ROOM (غرفة الانتظار) ====== */

@keyframes waiting-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.2); }
    50% { box-shadow: 0 0 0 10px rgba(255, 184, 0, 0); }
}

.waiting-room-page {
    min-height: calc(100vh - 4rem);
    padding: 40px 20px;
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.waiting-room-content {
    width: 100%;
    max-width: 760px;
}

.waiting-room-title {
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin: 0 0 32px;
    line-height: 1.15;
}

.waiting-room-page .room-code-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 184, 0, 0.2);
    border-radius: 24px;
    padding: 28px 40px;
    text-align: center;
    margin-bottom: 16px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.waiting-room-page .room-code-card .room-code-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 12px;
    font-weight: 500;
}

.waiting-room-page .room-code-value {
    font-size: 52px;
    font-weight: 900;
    color: #FFB800;
    letter-spacing: 12px;
    text-shadow: 0 0 30px rgba(255, 184, 0, 0.5);
    margin: 0;
    line-height: 1.1;
}

.waiting-room-page .room-code-card .room-code-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    margin: 10px 0 0;
}

.waiting-room-page .qr-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.waiting-room-page .qr-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 4px;
}

.waiting-room-page .qr-sublabel {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px;
}

.waiting-room-page .qr-code-wrapper {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.2);
    line-height: 0;
}

.waiting-room-page .waiting-judge-link {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
}

.waiting-room-page .waiting-judge-qr {
    display: block;
    border-radius: 8px;
}

.waiting-room-page .teams-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 20px;
}

.waiting-room-page .team-waiting-card {
    border-radius: 20px;
    padding: 20px;
    min-height: 140px;
    box-sizing: border-box;
}

.waiting-room-page .team-waiting-card.green {
    background: rgba(0, 230, 118, 0.05);
    border: 1.5px solid rgba(0, 230, 118, 0.2);
}

.waiting-room-page .team-waiting-card.red {
    background: rgba(255, 26, 26, 0.05);
    border: 1.5px solid rgba(255, 26, 26, 0.2);
}

.waiting-room-page .team-waiting-name {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.2;
}

.waiting-room-page .team-waiting-card.green .team-waiting-name {
    color: #00E676;
}

.waiting-room-page .team-waiting-card.red .team-waiting-name {
    color: #FF1A1A;
}

.waiting-room-page .player-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.waiting-room-page .player-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    margin: 0;
    transition: all 0.3s;
    font-weight: 500;
    box-sizing: border-box;
}

.waiting-room-page .player-slot.joined {
    background: rgba(255, 184, 0, 0.08);
    border-color: rgba(255, 184, 0, 0.25);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.waiting-room-page .player-slot.empty {
    border-style: dashed;
    opacity: 0.85;
}

.waiting-room-page .vs-waiting {
    font-size: 22px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    -webkit-user-select: none;
    user-select: none;
}

.waiting-room-page .players-count {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 20px;
}

.waiting-room-page .players-count span {
    color: #FFB800;
    font-weight: 700;
}

.waiting-room-page .waiting-btn {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    background: rgba(255, 184, 0, 0.1);
    border: 1.5px solid rgba(255, 184, 0, 0.3);
    color: rgba(255, 184, 0, 0.7);
    border-radius: 16px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    animation: waiting-pulse 2s ease-in-out infinite;
    cursor: default;
    font-family: inherit;
    box-sizing: border-box;
}

.waiting-room-page .waiting-btn:disabled {
    opacity: 1;
}

.waiting-room-page .waiting-start-cta {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    border: none;
    color: white;
    border-radius: 16px;
    padding: 16px;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.4);
    transition: all 0.2s;
    font-family: inherit;
    animation: none;
    box-sizing: border-box;
}

.waiting-room-page .waiting-start-cta:hover {
    box-shadow: 0 0 50px rgba(255, 184, 0, 0.6);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .waiting-room-page .teams-section {
        grid-template-columns: 1fr;
    }
    .waiting-room-page .vs-waiting {
        padding: 0;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .waiting-room-page .room-code-value {
        font-size: 36px;
        letter-spacing: 8px;
    }
    .waiting-room-title {
        font-size: 32px;
    }
    .waiting-room-page .room-code-card {
        padding: 22px 20px;
    }
}

@media (max-width: 768px) {
    .waiting-room-page {
        padding-top: 3.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ====== PLAYER PHONE VIEW ====== */

.player-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background-color: var(--c-bg);
    background-image: var(--bg-vivid-stack);
    background-attachment: fixed;
}

/* Team tint on top of the same vivid sky */
.player-red-bg {
    background-image:
        radial-gradient(ellipse 75% 55% at 50% 100%, rgba(255, 26, 26, 0.2) 0%, transparent 58%),
        var(--bg-vivid-stack);
    background-attachment: fixed, fixed;
    background-color: var(--c-bg);
}

.player-green-bg {
    background-image:
        radial-gradient(ellipse 75% 55% at 50% 100%, rgba(0, 230, 118, 0.17) 0%, transparent 58%),
        var(--bg-vivid-stack);
    background-attachment: fixed, fixed;
    background-color: var(--c-bg);
}

.player-container {
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.judge-body {
    background-color: var(--c-bg);
    background-image:
        radial-gradient(ellipse 72% 58% at 50% 0%, rgba(255, 184, 0, 0.14) 0%, transparent 52%),
        var(--bg-vivid-stack);
    background-attachment: fixed, fixed;
}

.judge-host-badge {
    background: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    border: 1px solid #FFB800;
}

.judge-read-timer-row {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.judge-read-timer-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-playful);
    background: linear-gradient(135deg, #FFB800 0%, #FF6B00 100%);
    color: #0D1B2A;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

.judge-read-timer-btn:hover {
    transform: scale(1.05);
}

.judge-read-timer-btn:active {
    transform: scale(0.97);
    animation: none;
}

.judge-switch-question-row {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}

.judge-switch-question-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    border: 2px solid rgba(0, 229, 255, 0.45);
    border-radius: var(--radius-playful);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(168, 85, 247, 0.06));
    color: #00E5FF;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s;
}

.judge-switch-question-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
    color: #0D1B2A;
    border-color: transparent;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.35);
}

.judge-report-row {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}

.report-preview-label-spaced {
    margin-top: 0.5rem;
}

.player-header {
    margin-bottom: 2rem;
}

.player-name-display {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.player-team-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.badge-red {
    background: color-mix(in srgb, var(--team-red) 22%, transparent);
    color: var(--team-red);
    border: 1px solid var(--team-red);
}

.badge-green {
    background: color-mix(in srgb, var(--team-green) 22%, transparent);
    color: var(--team-green);
    border: 1px solid var(--team-green);
}

.player-state {
    animation: fadeIn 0.3s ease;
}

.player-status-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 1.5rem;
}

/* Someone else buzzed — very visible so others don't answer */
.other-buzzed-state {
    text-align: center;
    padding: 1rem 0;
}
.other-buzzed-dont-answer {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FF1A1A;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.other-buzzed-name-wrap {
    background: rgba(255, 184, 0, 0.2);
    border: 3px solid #FFB800;
    border-radius: 20px;
    padding: 1.25rem 2rem;
    margin: 0 auto 0.75rem;
    max-width: 90%;
    animation: otherBuzzedHighlight 1.2s ease-in-out infinite alternate;
}
.other-buzzed-name {
    font-size: 2.2rem;
    font-weight: 800;
    color: #FFB800;
    display: block;
    line-height: 1.3;
}
.other-buzzed-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: #eee;
    display: block;
    margin-top: 0.25rem;
}
.other-buzzed-hint {
    font-size: 1.1rem;
    font-weight: 600;
    color: #aaa;
    margin: 0;
}
@keyframes otherBuzzedHighlight {
    from { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.3); }
    to   { box-shadow: 0 0 24px 8px rgba(255, 184, 0, 0.25); }
}

/* Big buzzer button */
.big-buzzer {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 6px solid;
    font-size: 1rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    animation: buzzerPulse 1s infinite alternate;
}

.buzzer-big-red {
    background: var(--team-red);
    border-color: var(--team-red);
    box-shadow: 0 0 12px rgba(255, 26, 26, 0.7);
}

.buzzer-big-green {
    background: var(--team-green);
    border-color: var(--team-green);
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.big-buzzer:active:not(:disabled) {
    transform: scale(0.92);
}

.big-buzzer:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    animation: none;
}

@keyframes buzzerPulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.buzzer-icon {
    font-size: 4rem;
    pointer-events: none;
}

.player-feedback {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1rem;
}

/* Loading dots */
.loading-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #555;
    animation: dotBounce 1.2s infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Success toast with timer - below header, aligned right */
.success-toast {
    position: fixed;
    top: 5.5rem;
    right: 1.5rem;
    z-index: 9999;
    min-width: 280px;
    max-width: 90vw;
    cursor: pointer;
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-playful);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 24px rgba(0, 229, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: success-toast-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.success-toast--fade {
    animation: success-toast-slide-out 0.3s ease forwards;
}
@keyframes success-toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes success-toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}
.success-toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: #fff;
}
.success-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00E676;
    color: #fff;
    border: 2px solid rgba(0, 230, 118, 0.8);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
}
.success-toast-msg {
    font-weight: 600;
    font-size: 1rem;
}
.success-toast-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.success-toast-progress {
    height: 100%;
    width: 100%;
    background: #00E676;
    transform-origin: right;
}
.success-toast-progress--animating {
    animation: success-toast-shrink 5s linear forwards;
}
@keyframes success-toast-shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 768px) {
    .success-toast {
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-play-btn,
    .home-join-btn,
    .home-ready-play-btn,
    .home-action-card--primary,
    .home-action-card--tournament,
    .home-action-card--join,
    .bracket-play--active,
    .account-submit-btn,
    .confirm-dialog-confirm,
    .login-required-btn-primary,
    .login-required-btn-secondary,
    .answer-form button,
    .judge-read-timer-btn,
    .start-btn,
    .home-header .my-games-header-link .unfinished-dot {
        animation: none;
    }
}

/* Header «العابي»: same as تواصل معي (nav-link + orange pill when active); notification dot */
.home-header .my-games-header-link {
    position: relative;
}
.home-header .my-games-header-link .unfinished-dot {
    position: absolute;
    top: -4px;
    inset-inline-start: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF1A1A;
    border: 2px solid #1a0533;
    animation: dot-pulse 1.5s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 26, 26, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(255, 26, 26, 0); }
}

.my-games-body .page-content-wrapper {
    position: relative;
    z-index: 1;
}

.my-games-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
    direction: rtl;
}

.my-games-sections-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.5rem;
}

/* Glass panels — same language as .account-card (frosted, hexes show through) */
.my-games-section {
    position: relative;
    margin: 0;
    border-radius: 22px;
    background: var(--glass-panel-bg);
    border: var(--glass-panel-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* Barely-there warm vs cool tint on top of frosted base (hex grid reads through) */
.my-games-section--tournament {
    background: linear-gradient(
        165deg,
        rgba(255, 200, 150, 0.045) 0%,
        rgba(255, 255, 255, 0.02) 45%,
        rgba(255, 255, 255, 0.032) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.my-games-section--regular {
    background: linear-gradient(
        165deg,
        rgba(160, 210, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 45%,
        rgba(255, 255, 255, 0.032) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.my-games-section-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 22px 22px 0 0;
    pointer-events: none;
    opacity: 0.85;
}

.my-games-section--tournament .my-games-section-accent {
    background: linear-gradient(90deg, rgba(255, 184, 80, 0.7), rgba(255, 214, 140, 0.5), rgba(255, 160, 60, 0.65));
    box-shadow: 0 1px 0 rgba(255, 220, 160, 0.25);
}

.my-games-section--regular .my-games-section-accent {
    background: linear-gradient(90deg, rgba(120, 190, 255, 0.55), rgba(180, 220, 255, 0.45), rgba(90, 160, 255, 0.5));
    box-shadow: 0 1px 0 rgba(160, 210, 255, 0.2);
}

.my-games-section-head {
    padding: 1.35rem 1.5rem 1rem;
    padding-top: calc(1.3rem + 3px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.my-games-section-body {
    padding: 1.25rem 1.5rem 1.6rem;
}

.my-games-section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1rem;
    justify-content: center;
    flex-shrink: 0;
}

.my-games-section-divider-line {
    flex: 1;
    max-width: 180px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.18), transparent);
}

.my-games-section-divider-gem {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(255, 184, 80, 0.85), rgba(100, 170, 255, 0.75));
    box-shadow: 0 0 12px rgba(255, 200, 100, 0.35), 0 0 12px rgba(100, 170, 255, 0.25);
    flex-shrink: 0;
}

.my-games-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.my-games-section-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.my-games-section-sub {
    color: rgba(255, 255, 255, 0.42);
    font-size: 13px;
    margin: 0;
    line-height: 1.45;
}

.my-games-bracket-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 13px;
    font-weight: 700;
    color: #ffb74d;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 183, 77, 0.35);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.my-games-bracket-link:hover {
    color: #ffe082;
    border-bottom-color: rgba(255, 224, 130, 0.55);
}

.my-games-section-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0.85rem 1rem;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.empty-state.empty-state--my-games-below {
    margin-top: 2rem;
    padding-top: 0.5rem;
}

@media (max-width: 640px) {
    .my-games-section-head,
    .my-games-section-body {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .my-games-section-divider-line {
        max-width: 72px;
    }
}

/* Up to 3 resume cards per row on wide screens */
.my-games-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .my-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .my-games-grid {
        grid-template-columns: 1fr;
    }
}

.page-title {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    margin-bottom: 32px;
}

.my-games-expire-note {
    margin-top: -6px;
    opacity: 0.8;
}

.my-games-flash-error {
    background: rgba(255, 26, 26, 0.12);
    border: 1px solid rgba(255, 26, 26, 0.35);
    color: #ffb4b4;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* My games list: floating round pill on top edge (same idea as home «الأقسام») */
.my-games-page .game-card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.game-card-wrapper {
    position: relative;
    margin-top: 1.35rem;
    margin-bottom: 0;
    min-width: 0;
}
.game-card-wrapper .game-card {
    margin-bottom: 0;
    padding-top: 1.75rem;
}

/* Position only; colors match «الأقسام» via .home-game-info-card-label */
.game-round-badge--overlap-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    white-space: nowrap;
}

.game-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: border-color 0.2s;
}
.game-card:hover {
    border-color: rgba(255, 184, 0, 0.35);
}

.game-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.my-games-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.my-games-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.my-games-qr-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    text-align: center;
}

.my-games-judge-qr-link {
    display: block;
    line-height: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.my-games-judge-qr-link:hover {
    border-color: rgba(255, 184, 0, 0.45);
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.2);
}

.my-games-judge-qr {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.game-expiring-badge {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 200, 120, 0.95);
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.35);
    padding: 2px 8px;
    border-radius: 10px;
}

/* My games: room code — white for contrast, same size as .game-meta (13px) */
.my-games-room-code-row .my-games-room-code-value {
    color: #fff;
    font-weight: 700;
}

.game-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    align-items: center;
    flex-wrap: wrap;
}

.game-round-badge {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #A855F7;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.game-score {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 900;
}
.score-a { color: #FF1A1A; }
.score-divider { color: rgba(255, 255, 255, 0.3); }
.score-b { color: #00E676; }

.resume-btn {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
}
.resume-btn:hover {
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.5);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 15px;
}
.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

@media (max-width: 600px) {
    .game-card {
        flex-direction: column;
        align-items: stretch;
    }
    .my-games-card-actions {
        flex-direction: column;
        width: 100%;
    }
    .resume-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========== Create game: mode + category selection ========== */
.create-game-body .page-content-wrapper {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 80px);
    padding-bottom: 2rem;
}

.create-game-page {
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    direction: rtl;
    max-width: 900px;
    margin: 0 auto;
}

/* Custom categories: full-width home-style grid + sticky bar */
.create-game-custom-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.75rem 1rem 120px;
    direction: rtl;
    box-sizing: border-box;
}

.create-game-custom-body .custom-page-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.create-game-custom-body .custom-page-header .create-game-page-subtitle {
    margin-bottom: 1.25rem;
}

.create-game-custom-form {
    width: 100%;
}

.create-game-custom-card-outer {
    width: 100%;
    margin-top: 0.5rem;
}

.create-game-custom-error {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 1rem;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255, 120, 120, 0.35);
    color: #ffb4b4;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Visually hidden checkbox inside label */
.create-game-custom-cat-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.create-game-custom-body .home-category-card.create-game-custom-selectable {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    border: 3px solid transparent !important;
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
}

.create-game-custom-body .home-category-card.create-game-custom-selectable:hover {
    transform: scale(1.02) translateY(-2px);
}

.create-game-custom-body .home-category-card.create-game-custom-selectable.unselected:hover {
    transform: scale(0.98);
}

.create-game-custom-body .home-category-card.create-game-custom-selectable:focus-within {
    outline: 2px solid rgba(255, 184, 0, 0.55);
    outline-offset: 3px;
}

.create-game-custom-body .home-category-card.create-game-custom-selectable.selected:hover {
    transform: scale(1.02) translateY(-2px);
}

.create-game-custom-body .home-category-card.create-game-custom-selectable.unselected {
    opacity: 0.5;
    transform: scale(0.97);
}

.create-game-custom-body .home-category-card.create-game-custom-selectable.selected {
    border-color: #FFB800 !important;
    box-shadow: 0 0 25px rgba(255, 184, 0, 0.5);
    opacity: 1;
    transform: scale(1);
}

.create-game-custom-body .home-category-card.create-game-custom-selectable.selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFB800;
    color: white;
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1;
    pointer-events: none;
}

/* Sticky bottom bar */
.create-game-sticky-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
    background: rgba(13, 11, 42, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 184, 0, 0.25);
    border-radius: 20px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 20px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.create-game-sticky-bar .selection-count {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    white-space: nowrap;
}

.create-game-sticky-bar .selection-count span {
    color: #FFB800;
    font-weight: 700;
    font-size: 16px;
}

.create-game-sticky-bar .select-all-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-weight: 600;
}

.create-game-sticky-bar .select-all-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.create-game-sticky-bar .confirm-btn {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.35);
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.create-game-sticky-bar .confirm-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.create-game-sticky-bar .confirm-btn:not(:disabled):hover {
    box-shadow: 0 0 35px rgba(255, 184, 0, 0.55);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .create-game-sticky-bar {
        bottom: max(16px, env(safe-area-inset-bottom));
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
    }
}

.create-game-page-title {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    text-align: center;
}

.create-game-page-subtitle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    margin-bottom: 48px;
    text-align: center;
}

.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    max-width: 640px;
    margin-bottom: 40px;
}

.mode-card {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 40px 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.mode-card:hover {
    transform: translateY(-8px);
}

.mode-card.classic:hover {
    border-color: #FFB800;
    background: rgba(255, 184, 0, 0.06);
    box-shadow: 0 20px 60px rgba(255, 184, 0, 0.2);
}

.mode-card.custom:hover {
    border-color: #A855F7;
    background: rgba(168, 85, 247, 0.06);
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.2);
}

.mode-card:focus-visible {
    outline: 2px solid rgba(255, 184, 0, 0.8);
    outline-offset: 4px;
}

.mode-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.mode-card.classic .mode-icon {
    background: linear-gradient(135deg, #FFB800, #FF6B00);
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.4);
}

.mode-card.custom .mode-icon {
    background: linear-gradient(135deg, #A855F7, #6B21A8);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

.mode-title {
    font-size: 22px;
    font-weight: 900;
    color: white;
    margin: 0;
}

.mode-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    margin: 0;
}

.mode-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 20px;
    margin-top: 4px;
}

.mode-badge.classic {
    background: rgba(255, 184, 0, 0.12);
    color: #FFB800;
    border: 1px solid rgba(255, 184, 0, 0.3);
}

.mode-badge.custom {
    background: rgba(168, 85, 247, 0.12);
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

@media (max-width: 520px) {
    .mode-grid {
        grid-template-columns: 1fr;
    }
    .create-game-page-title {
        font-size: 28px;
    }
}

/* ===== Tournament (knockout bracket) ===== */
@keyframes tournament-trophy-pulse {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 18px rgba(255, 184, 0, 0.55)) drop-shadow(0 0 32px rgba(255, 107, 0, 0.25));
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 26px rgba(255, 214, 100, 0.75)) drop-shadow(0 0 48px rgba(255, 107, 0, 0.4));
    }
}

@keyframes tournament-gold-glow-pulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.08);
    }
}

.tournament-create-body .page-content-wrapper,
.tournament-bracket-body .page-content-wrapper {
    align-items: flex-start;
    padding-top: 5rem;
}

.tournament-create-container {
    width: 100%;
    max-width: 1320px;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.tournament-bracket-wrapper {
    width: 100%;
    max-width: min(98vw, 1720px);
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.tournament-bracket-card {
    width: 100%;
    box-sizing: border-box;
}

/* Glass panels: create / bracket / result */
.tournament-create-body .tournament-create-card.account-card,
.tournament-bracket-body .tournament-bracket-card.account-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(168, 85, 247, 0.06);
}

/* Bracket page: wider card; keep horizontal padding moderate so the tree has room */
.tournament-bracket-body .tournament-bracket-card.account-card {
    padding: 2.5rem clamp(0.85rem, 2.5vw, 2rem) 3rem;
    overflow-x: visible;
}

.tournament-create-card {
    text-align: right;
}

/* «بطولاتي السابقة» — high-contrast CTA (create + bracket) */
.tournament-create-card-top {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 1.35rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-mine-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.55rem;
    font-size: 1rem;
    font-weight: 800;
    font-family: var(--font-sans);
    text-decoration: none;
    color: #1a0a2e;
    border-radius: 999px;
    border: 2px solid rgba(255, 230, 160, 0.9);
    background: linear-gradient(145deg, #ffb800 0%, #ff6b00 100%);
    box-shadow:
        0 0 32px rgba(255, 107, 0, 0.48),
        0 8px 22px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.tournament-mine-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 0 40px rgba(255, 140, 50, 0.55),
        0 10px 28px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.tournament-mine-cta:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.tournament-mine-cta:focus-visible {
    outline: 2px solid rgba(255, 220, 140, 0.95);
    outline-offset: 3px;
}

.tournament-mine-cta-icon {
    font-size: 1.15em;
    line-height: 1;
}

.tournament-mine-cta--compact {
    padding: 0.52rem 1.05rem;
    font-size: 0.88rem;
    gap: 0.35rem;
}

.tournament-bracket-title-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .tournament-bracket-title-row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .tournament-bracket-title-row .tournament-bracket-title {
        margin-bottom: 0;
        text-align: center;
        flex: 1;
        min-width: 0;
    }

    .tournament-bracket-title-row .tournament-mine-cta {
        flex-shrink: 0;
    }
}

@media (max-width: 639px) {
    .tournament-bracket-title-row .tournament-mine-cta {
        align-self: center;
    }
}

.tournament-section {
    margin-bottom: 1.75rem;
}

.tournament-section-title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1rem;
    text-align: right;
}

.tournament-team-count-pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.tournament-pill {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 280px;
    padding: 1.1rem 1.5rem;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.tournament-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

.tournament-pill--active {
    background: linear-gradient(135deg, #ffb800 0%, #ff6b00 100%);
    border-color: rgba(255, 140, 60, 0.85);
    color: #1a0a2e;
    box-shadow:
        0 0 28px rgba(255, 107, 0, 0.45),
        0 6px 20px rgba(0, 0, 0, 0.35);
}

.tournament-pill--active:hover {
    color: #1a0a2e;
}

.tournament-name-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 16px 22px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tournament-name-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.tournament-name-input:focus {
    border-color: rgba(255, 184, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.18), 0 0 24px rgba(255, 107, 0, 0.12);
}

.tournament-name-note {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 184, 0, 0.9);
    text-align: right;
    line-height: 1.5;
}

.tournament-team-grid {
    display: grid;
    gap: 0.75rem;
}

.tournament-team-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tournament-team-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tournament-team-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tournament-team-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.tournament-team-input:focus {
    border-color: rgba(255, 184, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.tournament-form-error {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: rgba(255, 26, 26, 0.15);
    border: 1px solid rgba(255, 26, 26, 0.35);
    color: #ffb4b4;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
}

.tournament-submit-btn {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 2rem auto 0;
    padding: 1.15rem 2rem;
    font-size: 1.1rem;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 28px rgba(255, 107, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);
}

.tournament-submit-btn:hover {
    box-shadow: 0 0 36px rgba(255, 107, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.4);
}

.tournament-bracket-title {
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 1.25rem;
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.tournament-bracket-title-row .tournament-bracket-title {
    margin-bottom: 0;
}

/* Shuffle row — wide dark pill */
.bracket-shuffle-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    text-align: center;
}

.bracket-shuffle-form {
    margin: 0;
    width: 100%;
    max-width: 520px;
}

.bracket-shuffle-btn-wide {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.95rem 1.35rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.bracket-shuffle-btn-wide:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.12);
}

.bracket-shuffle-btn-wide__text {
    flex: 1;
    text-align: center;
}

.bracket-shuffle-btn-wide__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.95;
}

/* Bracket tree stage (LTR) + SVG-style lines layer */
.bracket-stage {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    /* No horizontal scroll: tree scales via container + --bracket-pill-width below. */
    overflow-x: hidden;
    overflow-y: visible;
    margin-bottom: 1.5rem;
    padding: 0.65rem 0.75rem 1rem;
    container-type: inline-size;
    container-name: bracket-stage;
}

.bracket-lines-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-sizing: border-box;
}

.bracket-lines-svg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
}

/* Legacy: bracket lines are SVG paths now; kept harmless if referenced elsewhere. */
.bracket-line {
    position: absolute;
    transform-origin: 0 50%;
    border-radius: 0;
    pointer-events: none;
    background: rgb(148, 163, 184);
}

.bracket-line--active {
    background: #FF6B00;
    box-shadow: none;
}

.bracket-tree {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Keep flush start; extra inline padding was stealing width and contributed to clipping the champion column. */
    padding-inline-start: 0;
    --bracket-col-min-height: 400px;
    /* Fallback when container query units are unavailable */
    --bracket-pill-width: clamp(56px, 14vw, 138px);
}

@supports (width: 1cqi) {
    .bracket-tree {
        /*
         * Fit 16-team bracket (4 columns × ~two pills + play) without horizontal scroll.
         * 100cqi = .bracket-stage width (see container-type there).
         */
        --bracket-pill-width: clamp(48px, calc((100cqi - 19rem) / 8), 138px);
    }
}

/* 4-team bracket only: two short columns — room for larger pills and taller column stretch */
.bracket-tree--teams-4 {
    --bracket-col-min-height: 420px;
    --bracket-pill-width: clamp(96px, 28cqi, 180px);
}

@supports (width: 1cqi) {
    .bracket-tree--teams-4 {
        --bracket-pill-width: clamp(88px, calc((100cqi - 5rem) / 3.5), 180px);
    }
}

.bracket-tree--teams-4 .bracket-pill.bracket-pill--team,
.bracket-tree--teams-4 .bracket-pill.bracket-pill--winner:not(.bracket-pill--champion) {
    padding: 0.42rem 0.55rem;
    font-size: 0.82rem;
}

.bracket-tree--teams-4 .bracket-play {
    width: 42px;
    height: 42px;
    font-size: 0.62rem;
}

.bracket-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    align-items: center;
    box-sizing: border-box;
}

.bracket-tree .bracket-pill,
.bracket-tree .bracket-pill--winner {
    width: var(--bracket-pill-width);
    min-width: var(--bracket-pill-width);
    max-width: var(--bracket-pill-width);
    flex-shrink: 0;
    box-sizing: border-box;
}

.bracket-tree .bracket-pill.bracket-pill--team,
.bracket-tree .bracket-pill.bracket-pill--winner:not(.bracket-pill--champion) {
    padding: 0.32rem 0.45rem;
    font-size: 0.7rem;
}

.bracket-tree .bracket-duel {
    width: var(--bracket-pill-width);
    flex: 0 0 auto;
    align-items: stretch;
    gap: 0.42rem;
}

.bracket-column-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    width: 100%;
    min-height: var(--bracket-col-min-height, 400px);
    gap: 0.25rem;
    box-sizing: border-box;
}

.bracket-cluster {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.bracket-tree .bracket-cluster {
    gap: 0.45rem;
}

.bracket-cluster--final {
    gap: 1rem;
    align-items: center;
}

.bracket-cluster--active .bracket-pill--team,
.bracket-cluster--active .bracket-pill--winner {
    border-color: rgba(255, 107, 0, 0.45);
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.15);
}

.bracket-duel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

/* Later rounds: invisible anchors use the same column width as team pills (SVG lines match). */
.bracket-tree .bracket-duel--line-anchors {
    align-self: center;
    width: var(--bracket-pill-width);
    min-width: var(--bracket-pill-width);
    max-width: var(--bracket-pill-width);
    align-items: stretch;
}

.bracket-line-anchor {
    display: block;
    box-sizing: border-box;
    width: 3px;
    min-width: 3px;
    min-height: 1.35rem;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
    flex-shrink: 0;
    align-self: center;
}

.bracket-tree .bracket-duel--line-anchors .bracket-line-anchor {
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: stretch;
}

.bracket-pill {
    min-width: 180px;
    max-width: none;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.09);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    box-sizing: border-box;
}

.bracket-pill--team {
    background: rgba(255, 255, 255, 0.1);
}

.bracket-pill--placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.bracket-pill--winner {
    min-width: 180px;
    max-width: none;
}

@keyframes bracket-champion-pill-glow {
    0%,
    100% {
        box-shadow:
            0 0 18px rgba(255, 180, 60, 0.42),
            0 0 36px rgba(255, 120, 30, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    50% {
        box-shadow:
            0 0 28px rgba(255, 220, 140, 0.55),
            0 0 48px rgba(255, 140, 50, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }
}

/* Final champion name when the tournament is finished */
.bracket-pill--champion {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(255, 224, 140, 0.35) 0%,
        rgba(255, 150, 50, 0.28) 42%,
        rgba(120, 60, 180, 0.2) 100%
    );
    border: 2px solid rgba(255, 220, 130, 0.9);
    color: #fff;
    font-weight: 900;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    padding-inline: 1.1rem;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 200, 100, 0.55);
    animation: bracket-champion-pill-glow 2.8s ease-in-out infinite;
}

.bracket-pill--champion::before {
    content: '👑';
    position: absolute;
    top: -0.55rem;
    right: -0.2rem;
    font-size: 0.82rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.85));
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .bracket-pill--champion {
        animation: none;
        box-shadow: 0 0 22px rgba(255, 180, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
}

.bracket-play {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-inline-start: 1.85rem;
    margin-inline-end: 1.5rem;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.65);
    background: rgba(100, 116, 139, 0.35);
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: default;
    transition:
        border-color 0.2s,
        background 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        transform 0.18s ease,
        filter 0.18s ease;
}

.bracket-play--active {
    border-color: rgba(255, 107, 0, 0.95);
    background: linear-gradient(145deg, #ffb800 0%, #ff6b00 100%);
    color: #1a0a2e;
    box-shadow: 0 0 18px rgba(255, 107, 0, 0.55);
    animation: btn-primary-glow-pulse 2.4s ease-in-out infinite;
}

/* Clickable play (submit): pointer + clear hover / press feedback */
.bracket-play--active:not([disabled]) {
    cursor: pointer;
}

.bracket-play--active:not([disabled]):hover {
    animation: none;
    transform: scale(1.08);
    filter: brightness(1.08);
    border-color: rgba(255, 230, 160, 0.98);
    box-shadow:
        0 0 26px rgba(255, 200, 80, 0.95),
        0 0 48px rgba(255, 107, 0, 0.55),
        0 8px 28px rgba(0, 0, 0, 0.45);
}

.bracket-play--active:not([disabled]):active {
    transform: scale(1.03);
    filter: brightness(0.96);
}

.bracket-play--active:not([disabled]):focus-visible {
    outline: 2px solid rgba(255, 220, 140, 0.95);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .bracket-play--active:not([disabled]):hover,
    .bracket-play--active:not([disabled]):active {
        transform: none;
        filter: none;
    }

    .bracket-play--active:not([disabled]):hover {
        animation: none;
        box-shadow:
            0 0 22px rgba(255, 200, 100, 0.85),
            0 0 40px rgba(255, 107, 0, 0.45),
            0 6px 22px rgba(0, 0, 0, 0.45);
    }
}

.bracket-tree .bracket-play {
    width: 36px;
    height: 36px;
    font-size: 0.58rem;
    margin-inline-start: 0.4rem;
    margin-inline-end: 0.35rem;
}

.bracket-tree .bracket-cluster--final {
    gap: 0.55rem;
}

/* Return from champion screen: ?celebrate=1 + completed tournament */
@keyframes bracket-celebration-glow-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.03);
    }
}

@keyframes bracket-celebration-fall {
    0% {
        transform: translateY(-12vh) rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotate(540deg);
        opacity: 0.35;
    }
}

@keyframes bracket-champion-pop {
    0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 rgba(255, 107, 0, 0);
    }
    45% {
        transform: scale(1.06);
        box-shadow: 0 0 28px rgba(255, 107, 0, 0.55);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 16px rgba(255, 107, 0, 0.25);
    }
}

/* Full-screen return celebration (?celebrate=1): longer winner-pill burst */
@keyframes bracket-champion-celebrate {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 rgba(255, 107, 0, 0);
        filter: brightness(1);
    }
    14% {
        transform: scale(1.11);
        box-shadow: 0 0 38px rgba(255, 107, 0, 0.65);
        filter: brightness(1.08);
    }
    30% {
        transform: scale(1.02);
        box-shadow: 0 0 22px rgba(255, 107, 0, 0.38);
    }
    46% {
        transform: scale(1.12);
        box-shadow: 0 0 42px rgba(255, 107, 0, 0.58);
    }
    62% {
        transform: scale(1.04);
        box-shadow: 0 0 26px rgba(255, 107, 0, 0.42);
    }
    78% {
        transform: scale(1.09);
        box-shadow: 0 0 36px rgba(255, 107, 0, 0.52);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 18px rgba(255, 107, 0, 0.32);
        filter: brightness(1);
    }
}

.bracket-celebration-layer {
    position: fixed;
    inset: 0;
    z-index: 28;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.bracket-celebration-layer--on {
    opacity: 1;
    visibility: visible;
}

.bracket-celebration-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 60% at 50% 42%, rgba(255, 200, 90, 0.28) 0%, rgba(255, 107, 0, 0.08) 45%, transparent 70%);
    animation: bracket-celebration-glow-pulse 2.2s ease-in-out infinite;
}

.bracket-celebration-sparkles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bracket-celebration-sparkles span {
    position: absolute;
    top: -5%;
    width: 7px;
    height: 11px;
    border-radius: 2px;
    opacity: 0;
    animation: bracket-celebration-fall 2.75s linear infinite;
}

.bracket-celebration-sparkles span:nth-child(odd) {
    background: linear-gradient(180deg, #ffe066 0%, #ff6b00 100%);
    box-shadow: 0 0 8px rgba(255, 140, 40, 0.6);
}

.bracket-celebration-sparkles span:nth-child(even) {
    background: linear-gradient(180deg, #c4b5fd 0%, #7c3aed 100%);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.45);
}

.bracket-celebration-sparkles span:nth-child(1) {
    left: 6%;
    animation-delay: 0s;
}
.bracket-celebration-sparkles span:nth-child(2) {
    left: 14%;
    animation-delay: 0.35s;
}
.bracket-celebration-sparkles span:nth-child(3) {
    left: 22%;
    animation-delay: 0.12s;
}
.bracket-celebration-sparkles span:nth-child(4) {
    left: 31%;
    animation-delay: 0.5s;
}
.bracket-celebration-sparkles span:nth-child(5) {
    left: 39%;
    animation-delay: 0.22s;
}
.bracket-celebration-sparkles span:nth-child(6) {
    left: 48%;
    animation-delay: 0.6s;
}
.bracket-celebration-sparkles span:nth-child(7) {
    left: 56%;
    animation-delay: 0.08s;
}
.bracket-celebration-sparkles span:nth-child(8) {
    left: 64%;
    animation-delay: 0.42s;
}
.bracket-celebration-sparkles span:nth-child(9) {
    left: 72%;
    animation-delay: 0.28s;
}
.bracket-celebration-sparkles span:nth-child(10) {
    left: 80%;
    animation-delay: 0.55s;
}
.bracket-celebration-sparkles span:nth-child(11) {
    left: 11%;
    animation-delay: 0.18s;
}
.bracket-celebration-sparkles span:nth-child(12) {
    left: 52%;
    animation-delay: 0.65s;
}
.bracket-celebration-sparkles span:nth-child(13) {
    left: 88%;
    animation-delay: 0.4s;
}
.bracket-celebration-sparkles span:nth-child(14) {
    left: 18%;
    animation-delay: 0.72s;
}
.bracket-celebration-sparkles span:nth-child(15) {
    left: 37%;
    animation-delay: 0.48s;
}
.bracket-celebration-sparkles span:nth-child(16) {
    left: 69%;
    animation-delay: 0.33s;
}
.bracket-celebration-sparkles span:nth-child(17) {
    left: 93%;
    animation-delay: 0.58s;
}
.bracket-celebration-sparkles span:nth-child(18) {
    left: 44%;
    animation-delay: 0.25s;
}

.bracket-celebration-champion-center {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(4vw, 2rem);
    pointer-events: none;
    box-sizing: border-box;
}

.bracket-celebration-champion-inner {
    text-align: center;
    max-width: min(92vw, 640px);
    opacity: 0;
    transform: scale(0.88) translateY(14px);
    transition:
        opacity 0.7s ease 0.08s,
        transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s;
}

body.bracket-page--celebrate .bracket-celebration-layer--on .bracket-celebration-champion-inner {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.bracket-celebration-champion-kicker {
    margin: 0 0 0.55rem;
    font-family: var(--font-sans);
    font-size: clamp(1.02rem, 2.6vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 230, 175, 0.95);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.bracket-celebration-champion-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.85rem, 5.2vw, 3rem);
    font-weight: 900;
    line-height: 1.18;
    color: #fff;
    text-shadow:
        0 4px 28px rgba(0, 0, 0, 0.55),
        0 0 48px rgba(255, 160, 50, 0.42);
}

body.bracket-page--celebrate .bracket-cluster--final .bracket-pill--winner {
    animation: bracket-champion-celebrate 3.2s cubic-bezier(0.37, 0, 0.25, 1) 0.12s both;
}

@media (prefers-reduced-motion: reduce) {
    .bracket-celebration-glow,
    .bracket-celebration-sparkles span,
    body.bracket-page--celebrate .bracket-cluster--final .bracket-pill--winner {
        animation: none !important;
    }

    .bracket-celebration-layer--on {
        opacity: 0.55;
    }

    body.bracket-page--celebrate .bracket-celebration-layer--on .bracket-celebration-champion-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.bracket-start-block {
    text-align: center;
    margin-bottom: 1rem;
}

.bracket-start-btn {
    min-width: 240px;
    padding: 1.1rem 2.5rem;
    font-size: 1.08rem;
    border-radius: 999px;
    box-shadow: 0 0 28px rgba(255, 107, 0, 0.42), 0 8px 28px rgba(0, 0, 0, 0.35);
}

.bracket-start-btn:hover {
    box-shadow: 0 0 36px rgba(255, 107, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.4);
}

.tournament-bracket-completed-actions {
    margin-top: 1.25rem;
    padding-top: 0.5rem;
    text-align: center;
}

.tournament-bracket-body .tournament-bracket-back {
    display: inline-block;
    text-decoration: none;
    padding: 0.55rem 1.35rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tournament-bracket-body .tournament-bracket-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.22);
}

.tournament-bracket-back {
    display: inline-block;
    text-decoration: none;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.tournament-bracket-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.tournament-create-form .visually-hidden,
.tournament-bracket-body .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .tournament-team-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bracket-pill {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }

    .bracket-play {
        width: 38px;
        height: 38px;
        font-size: 0.58rem;
    }
}

/* Tournament: mine list, result page, bracket toolbar */
.tournament-bracket-toolbar {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 0.75rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
    text-align: right;
}

.tournament-bracket-mine-link {
    display: inline-block;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(255, 184, 0, 0.95);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 107, 0, 0.45);
    padding-bottom: 2px;
}

.tournament-bracket-mine-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.bracket-play-form {
    display: contents;
}

.bracket-play[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tournament-mine-body .page-content-wrapper {
    align-items: flex-start;
    padding-top: 5rem;
}

.tournament-result-body .page-content-wrapper {
    align-items: center;
    padding-top: 5rem;
}

.tournament-mine-wrapper,
.tournament-result-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.tournament-result-body .tournament-result-card--champion.account-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 120, 0.35);
    box-shadow:
        0 0 40px rgba(255, 184, 0, 0.12),
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    padding: 2.25rem 2rem 2rem;
}

.tournament-mine-title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    text-align: right;
}

.tournament-mine-intro {
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.65);
    text-align: right;
    line-height: 1.6;
}

.tournament-mine-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.tournament-mine-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tournament-mine-item:last-child {
    border-bottom: none;
}

.tournament-mine-item-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
}

.tournament-mine-item-link:hover .tournament-mine-item-name {
    color: rgba(255, 184, 0, 0.98);
}

.tournament-mine-item-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    transition: color 0.2s;
}

.tournament-mine-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.tournament-mine-badge {
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
}

.tournament-mine-badge--draft {
    border-color: rgba(148, 163, 184, 0.35);
}

.tournament-mine-badge--live {
    border-color: rgba(255, 107, 0, 0.55);
    color: rgba(255, 184, 0, 0.95);
}

.tournament-mine-badge--done {
    border-color: rgba(34, 197, 94, 0.45);
    color: rgba(134, 239, 172, 0.95);
}

.tournament-result-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.25rem;
}

.tournament-result-nav-btn {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 200px;
    text-align: center;
    text-decoration: none;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tournament-result-nav-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.24);
}

.tournament-result-nav-btn--solo {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 320px;
    padding: 0.75rem 1.75rem;
}

.tournament-result-kicker {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.tournament-result-trophy-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0 0.5rem;
    min-height: 5.5rem;
}

.tournament-result-trophy-glow {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 80, 0.45) 0%, rgba(255, 107, 0, 0.12) 45%, transparent 70%);
    animation: tournament-gold-glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

.tournament-result-trophy {
    position: relative;
    z-index: 1;
    font-size: 4rem;
    line-height: 1;
    text-align: center;
    animation: tournament-trophy-pulse 2.8s ease-in-out infinite;
}

.tournament-result-body .tournament-result-heading {
    margin: 0.35rem 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(95deg, #ffd060 0%, #ff9f1a 45%, #ffb800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(255, 140, 40, 0.35));
}

.tournament-result-champion {
    margin: 0 0 1.75rem;
    font-size: clamp(1.85rem, 5vw, 2.65rem);
    font-weight: 900;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 0 32px rgba(255, 107, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Tournament: login required before create */
.tournament-login-required-title {
    margin: 0 0 0.75rem;
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    text-align: right;
}

.tournament-login-required-text {
    margin: 0 0 1.25rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    text-align: right;
    font-size: 0.98rem;
}

.tournament-login-required-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    max-width: 420px;
    margin: 0 auto;
}

.tournament-login-required-primary {
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

/* Custom categories: lobby-style team sizes when from tournament */
.create-game-custom-team-sizes {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.result-tournament-next {
    margin-top: 1.25rem;
    text-align: center;
}

.result-tournament-bracket-btn {
    display: inline-block;
    text-decoration: none;
}

/* Payment success/cancel: full-viewport card only (no appFooter in templates; hide chrome if cached/old HTML) */
.payment-flow-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
}

.payment-flow-body .ps-page,
.payment-flow-body .pc-page {
    flex: 1;
    min-height: 0;
}

.payment-flow-body .site-footer-wrap,
.payment-flow-body .site-footer,
.payment-flow-body aside.cookie-consent-banner,
.payment-flow-body .scroll-to-top-btn {
    display: none !important;
}

/* Cookie consent (fixed strip; RTL) */
.cookie-consent-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10080;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
    background: linear-gradient(
        180deg,
        rgba(13, 27, 74, 0.94) 0%,
        rgba(26, 10, 62, 0.97) 100%
    );
    border-top: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow:
        0 -8px 36px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(168, 85, 247, 0.12);
    font-family: var(--font-sans);
    box-sizing: border-box;
}

.cookie-consent-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    direction: rtl;
}

.cookie-consent-banner-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.cookie-consent-banner-desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 52rem;
}

.cookie-consent-banner-desc a {
    color: #7dd3fc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    flex-shrink: 0;
}

.cookie-consent-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.15rem;
    border-radius: 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}

.cookie-consent-banner-btn--primary {
    color: #1a0a2e;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35);
}

.cookie-consent-banner-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(251, 191, 36, 0.45);
}

.cookie-consent-banner-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cookie-consent-banner-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cookie-consent-banner-btn--reject {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(248, 113, 113, 0.45);
}

.cookie-consent-banner-btn--reject:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.65);
}

@media (max-width: 640px) {
    .cookie-consent-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-banner-actions {
        justify-content: stretch;
    }

    .cookie-consent-banner-btn {
        flex: 1;
        min-height: 44px;
    }
}

/* Scroll to top (fixed; z-index under cookie banner) — physical left, not centered */
.scroll-to-top-btn {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 10070;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.92);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s,
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
}

.scroll-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-to-top-btn:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: rgba(0, 229, 255, 0.4);
    color: #fff;
}

.scroll-to-top-btn:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.65);
    outline-offset: 3px;
}

.scroll-to-top-btn-icon {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    overflow: visible;
}

.scroll-to-top-btn--above-cookie {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
    .scroll-to-top-btn--above-cookie {
        bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Wrap keeps footer + cookie slack in one flex item so margin-top:auto pins the whole block to the viewport bottom (no stray gap below). */
.site-footer-wrap {
    width: 100%;
    max-width: none;
    align-self: stretch;
    margin-top: auto;
    box-sizing: border-box;
    /* Safe-area only under the glass block — do not use padding-bottom on .site-footer (it paints empty frosted space below the copyright). */
    padding-bottom: max(0.2rem, env(safe-area-inset-bottom, 0px));
}

/* Flag only: bottom inset is set inline from measured #cookieConsentBanner height (script runs after this node exists). */
.site-footer-wrap--cookie-pad {
    padding-bottom: 0;
}

/* ===== Site footer (RTL) — AA Galaxy; frosted glass like header (body shows through) ===== */
.site-footer {
    font-family: var(--font-sans);
    background: var(--nav-glass-bg);
    -webkit-backdrop-filter: blur(var(--nav-glass-blur));
    backdrop-filter: blur(var(--nav-glass-blur));
    color: rgba(255, 255, 255, 0.88);
    margin-top: 0;
    border-top: 1px solid var(--nav-glass-border);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
    /* Full bleed: parents like .home-body use align-items:center and would shrink-wrap the footer */
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    align-self: stretch;
}

.site-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.85rem 1.25rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0.95rem 1rem 0.75rem;
    box-sizing: border-box;
}

.site-footer-col--social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    justify-self: start;
    width: fit-content;
}

.site-footer-col--links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    justify-content: center;
    justify-self: center;
    text-align: center;
}

.site-footer-col--brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    justify-self: end;
    text-align: right;
}

.site-footer-social-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
    text-align: center;
}

.site-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background 0.2s, transform 0.15s, color 0.2s;
}

.site-footer-social-link:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.06);
    color: #fff;
}

.site-footer-tiktok-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.site-footer-link {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    transition: color 0.2s;
}

.site-footer-link:hover {
    color: #fbbf24;
}

.site-footer-logo-link {
    display: inline-block;
    line-height: 0;
}

.site-footer-logo {
    height: clamp(52px, 11vw, 88px);
    width: auto;
    max-width: min(300px, 88vw);
    object-fit: contain;
}

.site-footer-tagline {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.52);
    max-width: min(300px, 90vw);
}

.site-footer-bar {
    border-top: 1px solid var(--nav-glass-border);
    padding: 0.7rem 1rem 0.85rem;
    background: transparent;
}

/* Bar: trust → pay → copyright in DOM (mobile column = that order). Desktop: copyright order:-1 → far right in RTL row. */
.site-footer-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.95rem 1.5rem;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Desktop: bar-bottom is display:contents so .site-footer-copy stays a direct flex item of .site-footer-bar-inner */
.site-footer-bar-bottom {
    display: contents;
}

.site-footer-bar-legal-nav {
    display: none !important;
}

.site-footer-copy {
    margin: 0;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: inherit;
    line-height: 1.35;
    flex: 0 0 auto;
    text-align: right;
    order: -1;
}

/* Trust column: business.sa block + e-store verification link underneath (centered) */
.site-footer-trust-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 0.45rem;
    max-width: min(100%, 26rem);
    margin-inline: auto;
    text-align: center;
}

.site-footer-trust-inquiry {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.28);
    text-underline-offset: 0.18em;
    text-align: center;
    align-self: center;
    max-width: 100%;
    transform: translateX(-1.9rem);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.site-footer-trust-inquiry:hover {
    color: rgba(255, 255, 255, 0.82);
    text-decoration-color: rgba(251, 191, 36, 0.5);
}

.site-footer-trust-inquiry:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
    border-radius: 0.2rem;
}

.site-footer-trust {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    max-width: 100%;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.2s, opacity 0.2s;
    text-align: center;
}

.site-footer-trust:hover {
    color: rgba(255, 255, 255, 0.88);
}

.site-footer-trust-seal {
    flex-shrink: 0;
}

.site-footer-trust-seal-svg {
    display: block;
    width: 3.15rem;
    height: 3.15rem;
}

.site-footer-trust-seal-svg circle {
    stroke: rgba(255, 255, 255, 0.38);
}

.site-footer-trust-seal-svg path {
    stroke: #34d399;
    opacity: 1;
}

.site-footer-trust:hover .site-footer-trust-seal-svg path {
    stroke: #4ade80;
}

.site-footer-trust-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
    text-align: center;
}

.site-footer-trust-line {
    display: block;
    font-size: 0.84rem;
    line-height: 1.4;
    color: inherit;
}

.site-footer-trust-line--title {
    font-weight: 700;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.site-footer-trust:hover .site-footer-trust-line--title {
    color: rgba(255, 255, 255, 0.94);
}

.site-footer-trust-line--meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.52);
    font-variant-numeric: tabular-nums;
}

.site-footer-trust-line--ministry {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.48);
}

/* Moyasar + payment methods */
.site-footer-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    text-align: right;
}

.site-footer-pay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
}

.site-footer-pay-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.2s;
}

.site-footer-pay-brand:hover {
    color: rgba(255, 255, 255, 0.98);
}

.site-footer-moyasar-wordmark {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
}

.site-footer-pay-tagline {
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.35;
}

.site-footer-pay-icons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 0.8rem;
}

/* Uniform white containers for Apple Pay, Visa, and mada */
.site-footer-pay-chip {
    box-sizing: border-box;
    width: 4.15rem;
    height: 1.68rem;
    padding: 0 0.26rem;
    border-radius: 0.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(29, 29, 31, 0.32);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    line-height: 1;
}

/* Apple Pay */
.site-footer-pay-apple {
    gap: 0.2rem;
    color: #000;
    font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.site-footer-pay-apple-mark {
    width: 0.84rem;
    height: 0.84rem;
    flex-shrink: 0;
}

.site-footer-pay-apple-word {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-top: 0.04em;
}

/* Visa: blue wordmark inside same chip */
.site-footer-pay-visa {
    font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.07em;
    color: #1434cb;
}

/* mada: bars + wordmark inside same chip */
.site-footer-pay-mada {
    gap: 0.16rem;
    justify-content: center;
}

.site-footer-pay-mada-bars {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 0.58rem;
    flex-shrink: 0;
}

.site-footer-pay-mada-bar {
    height: 3px;
    border-radius: 1px;
    width: 100%;
}

.site-footer-pay-mada-bar--blue {
    background: #4a90d9;
}

.site-footer-pay-mada-bar--green {
    background: #7ed321;
}

.site-footer-pay-mada-words {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    line-height: 1.1;
}

/* Larger than other chip copy so مدى / mada stay readable */
.site-footer-pay-mada-ar {
    font-size: 0.58rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: 0.02em;
    line-height: 1;
}

.site-footer-pay-mada-en {
    font-size: 0.62rem;
    font-weight: 600;
    color: #3a3a3c;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    line-height: 1;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 720px) {
    /* Full-width column: beats body.align-items:center from .result-body / .board-body / .lobby-body etc. */
    body.page-with-hexes,
    .home-body,
    .payment-flow-body,
    .host-body {
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Auth/lobby/account: match home body painting so frosted footer reads the same (fixed + backdrop-filter is flaky on iOS) */
    .lobby-body,
    .account-body {
        background-attachment: scroll;
    }

    /* Same horizontal containment as .home-body (avoids rare full-bleed glitches next to frosted footer) */
    .lobby-body.page-with-hexes,
    .account-body.page-with-hexes {
        overflow-x: hidden;
    }

    /* Short auth/join: form at top of main area; .site-footer-wrap supplies margin-top:auto like home */
    .page-with-hexes.page-short-stack .page-content-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        justify-content: flex-start;
        align-items: center;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    /* Compact mobile footer: single column stacks brand + links + social — keep gaps/padding tight */
    :root {
        --sf-m-inner-gap: 0.65rem;
        --sf-m-inner-pt: 0.55rem;
        --sf-m-inner-px: 0.85rem;
        --sf-m-inner-pb: 0.2rem;
        --sf-m-links-gap: 0.35rem;
        --sf-m-bar-pt: 0.45rem;
        --sf-m-bar-pb: 0.4rem;
        --sf-m-bar-px: 0.85rem;
        --sf-m-logo-h: 58px;
        --sf-m-social-btn: 2.35rem;
        --sf-m-social-icon: 1.2rem;
        --sf-m-link-fs: 0.78rem;
        --sf-m-label-fs: 0.62rem;
        --sf-m-tagline-fs: 0.68rem;
        --sf-m-copy-fs: 0.65rem;
    }

    .site-footer {
        position: relative;
        z-index: 2;
        width: 100%;
        min-width: 100%;
        max-width: none;
        align-self: stretch;
        margin-inline: 0;
        box-sizing: border-box;
        /* Padding here extended the frosted panel as empty band below the bar — use .site-footer-wrap padding-bottom instead. */
        padding-bottom: 0;
    }

    .site-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        gap: var(--sf-m-inner-gap);
        padding: var(--sf-m-inner-pt) var(--sf-m-inner-px) var(--sf-m-inner-pb);
    }

    .site-footer-col--brand {
        align-items: center;
        text-align: center;
        justify-self: center;
        order: -1;
    }

    .site-footer-col--links {
        flex-direction: column;
        gap: var(--sf-m-links-gap);
        justify-self: center;
        order: 0;
    }

    .site-footer-col--social {
        align-items: center;
        justify-self: center;
        order: 1;
    }

    .site-footer-social-label {
        font-size: var(--sf-m-label-fs);
    }

    .site-footer-link {
        font-size: var(--sf-m-link-fs);
    }

    .site-footer-logo {
        height: var(--sf-m-logo-h);
        width: auto;
        max-width: min(300px, 92vw);
    }

    .site-footer-tagline {
        font-size: var(--sf-m-tagline-fs);
    }

    .site-footer-social-link {
        width: var(--sf-m-social-btn);
        height: var(--sf-m-social-btn);
    }

    .site-footer-tiktok-icon {
        width: var(--sf-m-social-icon);
        height: var(--sf-m-social-icon);
    }

    .site-footer-bar {
        padding: var(--sf-m-bar-pt) var(--sf-m-bar-px) var(--sf-m-bar-pb);
    }

    .site-footer-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem 0.75rem;
    }

    /* Legal links live beside copyright in one row; hide duplicate nav in upper footer grid */
    .site-footer-inner .site-footer-legal-nav--main {
        display: none !important;
    }

    .site-footer-bar-bottom {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 0.4rem;
        column-gap: 7rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 0.4rem;
        margin-top: 0.15rem;
    }

    .site-footer-bar-legal-nav {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.3rem 0.55rem;
    }

    /* Match muted © line (not the bold upper-footer link style) */
    .site-footer-bar-bottom .site-footer-bar-legal-nav .site-footer-link {
        font-size: var(--sf-m-copy-fs);
        font-weight: 400;
        color: rgba(255, 255, 255, 0.45);
        text-decoration: none;
    }

    .site-footer-bar-bottom .site-footer-bar-legal-nav .site-footer-link:hover,
    .site-footer-bar-bottom .site-footer-bar-legal-nav .site-footer-link:focus-visible {
        color: rgba(255, 255, 255, 0.65);
    }

    /* Copyright first in row; nudge toward physical right in RTL (margin on inline-end) */
    .site-footer-bar-bottom .site-footer-copy {
        order: 0;
        align-self: center;
        text-align: center;
        width: auto;
        max-width: 100%;
        font-size: var(--sf-m-copy-fs);
        font-weight: 400;
        line-height: 1.45;
        padding-inline: 0;
        margin: 0;
        margin-inline-end: 0.45rem;
        padding-top: 0;
        border-top: none;
        color: rgba(255, 255, 255, 0.45);
    }

    .site-footer-trust-wrap {
        max-width: 100%;
        align-items: center;
        align-self: center;
        text-align: center;
    }

    .site-footer-trust {
        max-width: 100%;
        flex-direction: column;
        text-align: center;
        align-self: center;
    }

    .site-footer-trust-copy {
        align-items: center;
    }

    .site-footer-trust-inquiry {
        transform: none;
        display: block;
        width: 100%;
        text-align: center;
        align-self: center;
        margin-inline: 0;
        color: #fff;
        text-decoration-color: rgba(255, 255, 255, 0.5);
    }

    .site-footer-trust-inquiry:hover {
        color: #fff;
        text-decoration-color: rgba(251, 191, 36, 0.75);
    }

    .site-footer-pay {
        align-items: center;
        text-align: center;
        align-self: center;
    }

    .site-footer-pay::before {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        margin: 0 auto 0.55rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.38);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }

    .site-footer-pay-row {
        justify-content: center;
    }

    .site-footer-pay-icons {
        justify-content: center;
    }

    /*
     * Site chrome on narrow viewports: only the marketing home page keeps footer + cookie strip.
     * Other templates still include fragments :: appFooter for desktop parity (same markup as home);
     * player / judge / host omit the fragment entirely.
     */
    body:not(.home-body) .site-footer-wrap,
    body:not(.home-body) footer.site-footer,
    body:not(.home-body) aside.cookie-consent-banner {
        display: none !important;
    }

    .scroll-to-top-btn {
        display: none !important;
    }
}

/* Legal document pages */
.legal-doc-page {
    background: #1a0a2e !important;
    background-image: none !important;
    font-family: "Tajawal", "Cairo", system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.legal-doc-page .legal-doc-main {
    flex: 1;
    padding: 1.25rem 1rem 2.5rem;
}

.legal-doc-inner {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
}

.legal-doc-inner h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: #fff;
}

.legal-doc-updated {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 1.75rem;
}

.legal-doc-inner h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: #fbbf24;
}

.legal-doc-inner p,
.legal-doc-inner li {
    line-height: 1.75;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}

.legal-doc-inner ul {
    margin: 0.5rem 0 1rem;
    padding-inline-start: 1.25rem;
}

.legal-doc-inner a {
    color: #7dd3fc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-doc-inner a:hover {
    color: #bae6fd;
}

.legal-doc-pdf {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24 !important;
    font-weight: 600;
    text-decoration: none !important;
}

.legal-doc-pdf:hover {
    background: rgba(251, 191, 36, 0.25);
}