:root {
    --bg-dark: #e9f7ff;
    --bg-mid: #8be9ff;
    --bg-light: #ff8fb3;

    --panel-bg: rgba(255, 255, 255, 0.82);
    --panel-bg-strong: rgba(255, 255, 255, 0.94);
    --panel-border: rgba(37, 52, 94, 0.14);

    --primary: #ff4f8b;
    --primary-shadow: #cf2861;
    --accent: #1769e0;
    --accent-2: #00b8d9;
    --text-main: #203052;
    --text-soft: rgba(32, 48, 82, 0.72);
    --correct: #00c875;
    --danger: #ff4f61;

    --option-a: #ff6b6b;
    --option-b: #2f80ed;
    --option-c: #4ecdc4;
    --option-d: #7c83fd;
    --bg-grid-line: rgba(32,48,82,0.05);
    --bg-noise-a: rgba(255,79,139,0.28);
    --bg-noise-b: rgba(0,194,255,0.22);
    --category-accent: #1769e0;
    --category-accent-soft: rgba(23,105,224,0.18);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    color: var(--text-main);
    font-family: 'Cairo', 'Tajawal', 'Nunito', Arial, sans-serif;
    direction: rtl;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 46%, var(--bg-light) 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

body {
    position: relative;
}

body.category-theme-science {
    --bg-dark: #e8fbff;
    --bg-mid: #8be6f5;
    --bg-light: #b8f4d4;
    --bg-grid-line: rgba(5, 94, 117, 0.07);
    --bg-noise-a: rgba(34, 211, 238, 0.20);
    --bg-noise-b: rgba(34, 197, 94, 0.16);
    --category-accent: #0891b2;
}

body.category-theme-technology {
    --bg-dark: #eef4ff;
    --bg-mid: #93c5fd;
    --bg-light: #c4b5fd;
    --bg-grid-line: rgba(30, 64, 175, 0.07);
    --bg-noise-a: rgba(59, 130, 246, 0.19);
    --bg-noise-b: rgba(99, 102, 241, 0.16);
    --category-accent: #2563eb;
}

body.category-theme-history {
    --bg-dark: #fff7ed;
    --bg-mid: #fdba74;
    --bg-light: #fecaca;
    --bg-grid-line: rgba(146, 64, 14, 0.07);
    --bg-noise-a: rgba(217, 119, 6, 0.18);
    --bg-noise-b: rgba(185, 28, 28, 0.12);
    --category-accent: #b45309;
}

body.category-theme-sports {
    --bg-dark: #f0fdf4;
    --bg-mid: #86efac;
    --bg-light: #bae6fd;
    --bg-grid-line: rgba(21, 128, 61, 0.07);
    --bg-noise-a: rgba(34, 197, 94, 0.18);
    --bg-noise-b: rgba(14, 165, 233, 0.14);
    --category-accent: #16a34a;
}

body.category-theme-food {
    --bg-dark: #fff7ed;
    --bg-mid: #fdba74;
    --bg-light: #fde68a;
    --bg-grid-line: rgba(154, 52, 18, 0.07);
    --bg-noise-a: rgba(249, 115, 22, 0.18);
    --bg-noise-b: rgba(234, 179, 8, 0.13);
    --category-accent: #ea580c;
}

body.category-theme-animals {
    --bg-dark: #f0fdf4;
    --bg-mid: #a7f3d0;
    --bg-light: #fef3c7;
    --bg-grid-line: rgba(22, 101, 52, 0.07);
    --bg-noise-a: rgba(16, 185, 129, 0.17);
    --bg-noise-b: rgba(245, 158, 11, 0.13);
    --category-accent: #059669;
}

body.category-theme-travel {
    --bg-dark: #f0f9ff;
    --bg-mid: #7dd3fc;
    --bg-light: #fde68a;
    --bg-grid-line: rgba(3, 105, 161, 0.07);
    --bg-noise-a: rgba(14, 165, 233, 0.17);
    --bg-noise-b: rgba(234, 179, 8, 0.13);
    --category-accent: #0284c7;
}

body.category-theme-arts,
body.category-theme-poetry {
    --bg-dark: #fff1f2;
    --bg-mid: #f9a8d4;
    --bg-light: #c4b5fd;
    --bg-grid-line: rgba(157, 23, 77, 0.07);
    --bg-noise-a: rgba(236, 72, 153, 0.18);
    --bg-noise-b: rgba(124, 58, 237, 0.13);
    --category-accent: #db2777;
}

body.category-theme-business,
body.category-theme-diplomacy,
body.category-theme-issues,
body.category-theme-society {
    --bg-dark: #f8fafc;
    --bg-mid: #cbd5e1;
    --bg-light: #bfdbfe;
    --bg-grid-line: rgba(51, 65, 85, 0.07);
    --bg-noise-a: rgba(71, 85, 105, 0.14);
    --bg-noise-b: rgba(37, 99, 235, 0.12);
    --category-accent: #475569;
}

body.category-theme-health {
    --bg-dark: #f0fdfa;
    --bg-mid: #99f6e4;
    --bg-light: #fecdd3;
    --bg-grid-line: rgba(15, 118, 110, 0.07);
    --bg-noise-a: rgba(20, 184, 166, 0.16);
    --bg-noise-b: rgba(244, 63, 94, 0.12);
    --category-accent: #0f766e;
}

body.category-theme-myths,
body.category-theme-weird,
body.category-theme-disasters,
body.category-theme-language {
    --bg-dark: #f5f3ff;
    --bg-mid: #c4b5fd;
    --bg-light: #fda4af;
    --bg-grid-line: rgba(91, 33, 182, 0.07);
    --bg-noise-a: rgba(139, 92, 246, 0.16);
    --bg-noise-b: rgba(244, 63, 94, 0.12);
    --category-accent: #7c3aed;
}

[dir="rtl"] .room-code-container,
[dir="rtl"] .status-box,
[dir="rtl"] .player-chip-copy,
[dir="rtl"] .score-meta,
[dir="rtl"] .final-stat-card,
[dir="rtl"] .progress-player-copy,
[dir="rtl"] .reveal-picked-label,
[dir="rtl"] .reveal-meta,
[dir="rtl"] .score-pop-text,
[dir="rtl"] .score-fake-answer {
    text-align: right;
}

.bg-grid,
.bg-noise,
.bg-orb,
.category-motif {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg-grid {
    background-image:
        linear-gradient(var(--bg-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, black 0%, transparent 92%);
    opacity: 0.65;
}

.bg-noise {
    opacity: 0.22;
    background-image:
        linear-gradient(45deg, transparent 0 46%, var(--bg-noise-a) 46% 54%, transparent 54% 100%),
        linear-gradient(-45deg, transparent 0 46%, var(--bg-noise-b) 46% 54%, transparent 54% 100%);
    background-size: 120px 120px, 160px 160px;
}

.category-motif {
    opacity: 0;
    mix-blend-mode: multiply;
    transition:
        opacity 0.45s ease,
        background 0.45s ease,
        filter 0.45s ease;
}

body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-science .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-technology .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-history .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-sports .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-food .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-animals .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-travel .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-arts .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-poetry .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-business .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-diplomacy .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-issues .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-society .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-health .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-myths .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-weird .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-disasters .category-motif,
body:not(.phase-lobby):not(.phase-intro):not(.phase-start_countdown).category-theme-language .category-motif {
    opacity: 0.34;
}

body.category-theme-science .category-motif {
    background:
        radial-gradient(circle at 18% 24%, rgba(8,145,178,0.22) 0 5px, transparent 6px),
        radial-gradient(circle at 26% 34%, rgba(8,145,178,0.18) 0 4px, transparent 5px),
        linear-gradient(28deg, transparent 0 47%, rgba(8,145,178,0.14) 48% 50%, transparent 51% 100%),
        linear-gradient(152deg, transparent 0 47%, rgba(34,197,94,0.12) 48% 50%, transparent 51% 100%);
    background-size: 180px 180px, 180px 180px, 180px 180px, 220px 220px;
}

body.category-theme-technology .category-motif {
    background:
        linear-gradient(90deg, transparent 0 42%, rgba(37,99,235,0.16) 42% 45%, transparent 45% 100%),
        linear-gradient(0deg, transparent 0 48%, rgba(99,102,241,0.13) 48% 51%, transparent 51% 100%),
        radial-gradient(circle at 42px 42px, rgba(37,99,235,0.22) 0 4px, transparent 5px);
    background-size: 132px 132px, 132px 132px, 132px 132px;
}

body.category-theme-history .category-motif {
    background:
        repeating-linear-gradient(8deg, transparent 0 38px, rgba(146,64,14,0.13) 39px 41px, transparent 42px 86px),
        repeating-linear-gradient(90deg, transparent 0 138px, rgba(146,64,14,0.16) 139px 142px, transparent 143px 280px);
    background-size: 360px 260px, 280px 280px;
    filter: sepia(0.12);
}

body.category-theme-sports .category-motif {
    background:
        radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(22,163,74,0.16) 35% 36%, transparent 37% 100%),
        repeating-linear-gradient(90deg, transparent 0 92px, rgba(22,163,74,0.14) 93px 96px, transparent 97px 190px);
    background-size: 240px 150px, 190px 190px;
}

body.category-theme-food .category-motif {
    background:
        radial-gradient(circle at 36px 36px, rgba(234,88,12,0.16) 0 14px, transparent 15px),
        radial-gradient(circle at 96px 92px, transparent 0 18px, rgba(234,179,8,0.15) 19px 21px, transparent 22px);
    background-size: 150px 150px, 150px 150px;
}

body.category-theme-animals .category-motif {
    background:
        radial-gradient(circle at 32px 42px, rgba(5,150,105,0.16) 0 9px, transparent 10px),
        radial-gradient(circle at 52px 25px, rgba(5,150,105,0.12) 0 4px, transparent 5px),
        radial-gradient(circle at 74px 42px, rgba(5,150,105,0.12) 0 4px, transparent 5px),
        radial-gradient(circle at 54px 60px, rgba(5,150,105,0.12) 0 4px, transparent 5px);
    background-size: 160px 140px;
}

body.category-theme-travel .category-motif {
    background:
        repeating-radial-gradient(circle at 30% 40%, transparent 0 34px, rgba(2,132,199,0.12) 35px 37px, transparent 38px 70px),
        linear-gradient(45deg, transparent 0 48%, rgba(2,132,199,0.15) 49% 50%, transparent 51% 100%);
    background-size: 300px 220px, 190px 190px;
}

body.category-theme-arts .category-motif,
body.category-theme-poetry .category-motif {
    background:
        radial-gradient(ellipse at 18% 100%, rgba(219,39,119,0.18) 0 9%, transparent 10% 100%),
        radial-gradient(ellipse at 82% 100%, rgba(124,58,237,0.14) 0 9%, transparent 10% 100%),
        linear-gradient(72deg, transparent 0 47%, rgba(219,39,119,0.13) 48% 50%, transparent 51% 100%);
    background-size: 280px 220px, 280px 220px, 160px 160px;
}

body.category-theme-business .category-motif,
body.category-theme-diplomacy .category-motif,
body.category-theme-issues .category-motif,
body.category-theme-society .category-motif {
    background:
        repeating-linear-gradient(0deg, transparent 0 40px, rgba(71,85,105,0.12) 41px 43px, transparent 44px 98px),
        repeating-linear-gradient(90deg, transparent 0 130px, rgba(37,99,235,0.10) 131px 134px, transparent 135px 260px);
    background-size: 260px 220px, 260px 220px;
}

body.category-theme-health .category-motif {
    background:
        linear-gradient(90deg, transparent 0 45%, rgba(15,118,110,0.14) 46% 54%, transparent 55% 100%),
        linear-gradient(0deg, transparent 0 45%, rgba(15,118,110,0.14) 46% 54%, transparent 55% 100%),
        radial-gradient(circle at 50% 50%, rgba(244,63,94,0.10) 0 12px, transparent 13px);
    background-size: 180px 180px, 180px 180px, 180px 180px;
}

body.category-theme-myths .category-motif,
body.category-theme-weird .category-motif,
body.category-theme-disasters .category-motif,
body.category-theme-language .category-motif {
    background:
        radial-gradient(circle at 44px 44px, rgba(124,58,237,0.14) 0 4px, transparent 5px),
        radial-gradient(circle at 92px 82px, rgba(244,63,94,0.12) 0 3px, transparent 4px),
        repeating-linear-gradient(135deg, transparent 0 58px, rgba(124,58,237,0.10) 59px 61px, transparent 62px 124px);
    background-size: 170px 170px, 170px 170px, 220px 220px;
}

.ambient-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-particles span {
    position: absolute;
    width: clamp(7px, 0.8vw, 13px);
    height: clamp(7px, 0.8vw, 13px);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 236, 166, 0.95) 0%, rgba(245, 166, 35, 0.58) 48%, rgba(245, 166, 35, 0) 72%);
    filter: drop-shadow(0 0 12px rgba(245, 166, 35, 0.42));
    opacity: 0.46;
    animation: ambientDustFloat 14s linear infinite;
}

.ambient-particles span:nth-child(1) { left: 8%; top: 82%; animation-delay: -1s; animation-duration: 16s; }
.ambient-particles span:nth-child(2) { left: 18%; top: 64%; animation-delay: -7s; animation-duration: 19s; }
.ambient-particles span:nth-child(3) { left: 29%; top: 88%; animation-delay: -4s; animation-duration: 15s; }
.ambient-particles span:nth-child(4) { left: 39%; top: 70%; animation-delay: -10s; animation-duration: 22s; }
.ambient-particles span:nth-child(5) { left: 50%; top: 92%; animation-delay: -3s; animation-duration: 18s; }
.ambient-particles span:nth-child(6) { left: 61%; top: 76%; animation-delay: -12s; animation-duration: 20s; }
.ambient-particles span:nth-child(7) { left: 73%; top: 86%; animation-delay: -6s; animation-duration: 17s; }
.ambient-particles span:nth-child(8) { left: 84%; top: 68%; animation-delay: -14s; animation-duration: 21s; }
.ambient-particles span:nth-child(9) { left: 92%; top: 90%; animation-delay: -8s; animation-duration: 16s; }
.ambient-particles span:nth-child(10) { left: 12%; top: 36%; animation-delay: -11s; animation-duration: 23s; }
.ambient-particles span:nth-child(11) { left: 68%; top: 34%; animation-delay: -5s; animation-duration: 19s; }
.ambient-particles span:nth-child(12) { left: 88%; top: 42%; animation-delay: -16s; animation-duration: 24s; }

.bg-orb {
    display: none;
}

.question-animate {
    animation: questionRevealIn 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.question-animate.question-poem .poem-line {
    opacity: 0;
    animation: poemLineReveal 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.question-animate.question-poem .poem-line:nth-child(2) {
    animation-delay: 0.12s;
}

.question-animate.question-poem .poem-line:nth-child(3) {
    animation-delay: 0.22s;
}

@keyframes ambientDustFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(0.72);
        opacity: 0;
    }

    16% {
        opacity: 0.48;
    }

    78% {
        opacity: 0.36;
    }

    100% {
        transform: translate3d(32px, -118vh, 0) scale(1.18);
        opacity: 0;
    }
}

.orb-1 {
    width: 380px;
    height: 380px;
    left: -80px;
    top: 60px;
    background: radial-gradient(circle, rgba(255, 77, 141, 0.42) 0%, rgba(255, 77, 141, 0) 72%);
    animation: floatOrb1 12s ease-in-out infinite;
}

.orb-2 {
    width: 420px;
    height: 420px;
    right: -100px;
    top: 140px;
    background: radial-gradient(circle, rgba(84, 242, 209, 0.3) 0%, rgba(84, 242, 209, 0) 70%);
    animation: floatOrb2 16s ease-in-out infinite;
}

.orb-3 {
    width: 460px;
    height: 460px;
    left: 35%;
    bottom: -180px;
    background: radial-gradient(circle, rgba(124, 131, 253, 0.28) 0%, rgba(124, 131, 253, 0) 72%);
    animation: floatOrb3 14s ease-in-out infinite;
}

.screen {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(16px, 2.4vh, 32px) clamp(20px, 2.8vw, 36px) clamp(12px, 2vh, 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

.view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: viewIn 0.38s ease;
    overflow: visible;
}

.display-fit-layer {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    transform-origin: top center;
}

.view-fit-scaled .display-fit-layer {
    will-change: transform;
}

/* artwork lobby */

body.phase-lobby {
    background: #030510;
}

body.phase-lobby .bg-grid,
body.phase-lobby .bg-noise {
    display: none;
}

body.phase-lobby .screen {
    padding: 0;
    display: grid;
    place-items: center;
    background: #030510;
}

body.phase-lobby .footer {
    display: none;
}

body.phase-lobby #lobbyView {
    position: relative;
    flex: 0 0 auto;
    width: min(100vw, calc(100vh * 1672 / 941));
    height: min(100vh, calc(100vw * 941 / 1672));
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #030510;
}

body.phase-lobby #lobbyView::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("assets/Main lobby/main-lobby-bg.png") center / 100% 100% no-repeat;
}

body.phase-lobby #lobbyView .topbar,
body.phase-lobby #lobbyView .main-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.phase-lobby #lobbyView .room-code-container {
    position: absolute;
    left: 35.5%;
    top: 42%;
    width: 29.1%;
    height: 13.6%;
    display: grid;
    place-items: center;
}

body.phase-lobby #lobbyView .room-code-container .label,
body.phase-lobby #lobbyView .status-box,
body.phase-lobby #lobbyView .hero,
body.phase-lobby #lobbyView .main-grid .panel:not(.hero) > .label,
body.phase-lobby #lobbyView .panel::before {
    display: none;
}

body.phase-lobby #lobbyView .room-code {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.6%;
    align-items: center;
    justify-items: center;
    direction: ltr;
    color: #fff7e8;
    font-family: 'Cairo', 'Nunito', 'Tajawal', Arial, sans-serif;
    font-size: clamp(30px, 4.7vw, 82px);
    font-weight: 1000;
    line-height: 0.94;
    letter-spacing: 0;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.56),
        0 0 16px rgba(255, 214, 116, 0.5),
        0 0 28px rgba(42, 255, 244, 0.28);
    animation: lobbyCodeGlow 2.6s ease-in-out infinite;
}

body.phase-lobby .lobby-room-code-digit {
    width: 100%;
    min-width: 0;
    text-align: center;
}

body.phase-lobby .lobby-player-title {
    display: none;
}

body.phase-lobby .lobby-ambient-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

body.phase-lobby .lobby-blink-eye {
    position: absolute;
    width: 0.9%;
    aspect-ratio: 50 / 91;
    opacity: 1;
    background: var(--lobby-eye-open) center / 100% 100% no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
    transform:
        translate3d(var(--eye-look-x, 0%), var(--eye-look-y, 0%), 0)
        rotate(var(--eye-tilt, 0deg));
    transform-origin: 50% 54%;
    transition:
        transform 620ms cubic-bezier(0.2, 0.86, 0.22, 1),
        filter 160ms ease;
    will-change: transform;
}

body.phase-lobby .lobby-blink-eye::after {
    content: "";
    position: absolute;
    left: -61%;
    top: 30%;
    width: 222%;
    aspect-ratio: 111 / 44;
    background: var(--lobby-eye-closed) center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 36ms linear;
}

body.phase-lobby .lobby-blink-eye.active {
    background-image: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
    transition-duration: 46ms;
}

body.phase-lobby .lobby-blink-eye.active::after {
    opacity: 1;
}

body.phase-lobby .lobby-blink-eye-left {
    left: 13.22%;
    top: 45.8%;
    --eye-tilt: -1deg;
    --lobby-eye-open: url("assets/Main lobby/left-eye-open.png");
    --lobby-eye-closed: url("assets/Main lobby/left-eye-closed.png");
}

body.phase-lobby .lobby-blink-eye-right {
    left: 16.68%;
    top: 46.97%;
    --eye-tilt: 1deg;
    --lobby-eye-open: url("assets/Main lobby/right-eye-open.png");
    --lobby-eye-closed: url("assets/Main lobby/right-eye-closed.png");
}

body.phase-lobby #lobbyView .main-grid .panel:not(.hero) {
    position: absolute;
    left: 25.85%;
    top: 66.55%;
    width: 57.45%;
    height: 25.0%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.phase-lobby #lobbyView .player-list {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    column-gap: 1.28%;
    row-gap: 5.05%;
    direction: rtl;
    align-items: stretch;
}

body.phase-lobby #lobbyView .player-list li {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: lobbyPlayerIn 0.36s ease both;
}

body.phase-lobby #lobbyView .player-list .lobby-slot-empty {
    opacity: 100;
}

body.phase-lobby #lobbyView .player-avatar {
    position: absolute;
    top: 50%; /* Changed back to 50% for perfect vertical centering */
    left: 15%; /* Tweak this percentage left or right to match the background circle */
    transform: translate(-50%, -50%); 
    
    /* --- THE FIX --- */
    height: 70%; /* Sizes the box to fit inside the card's height */
    width: auto; 
    aspect-ratio: 1 / 1; 
    /* --------------- */

    display: grid;
    place-items: center; 
    
    /* Temporary debug border so you can visually align the box */
    border: 0px solid red; 
    border-radius: 100%; 
    
    color: #fff6df;
    background: transparent;
    box-shadow: none;
    font-size: clamp(26px, 4.75vw, 60px);
    line-height: 1;
    text-shadow:
        0 2px 0 rgba(24, 12, 36, 0.32),
        0 0 10px color-mix(in srgb, var(--player-color, #7c83fd) 48%, transparent);
}

body.phase-lobby #lobbyView .player-chip-status {
    display: none;
}

body.phase-lobby #lobbyView .player-chip-copy {
    position: absolute;
    left: 34%;
    right: 16%;
    top: 50%;
    width: auto;
    min-width: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    text-align: center;
    direction: rtl;
}

body.phase-lobby #lobbyView .player-chip-name {
    display: block;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    color: #311b44;
    background: transparent;
    font-size: clamp(22px, 2.35vw, 38px);
    font-weight: 1000;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 1px 0 rgba(255, 246, 221, 0.82),
        0 2px 4px rgba(84, 48, 26, 0.16);
    box-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.phase-lobby #lobbyView .player-chip.host .player-chip-status {
    color: #ffd462;
}

body.phase-lobby #lobbyView .player-chip.disconnected {
    opacity: 0.58;
}

body.phase-lobby #lobbyView .lobby-overflow {
    position: absolute;
    top: 50%;
    left: 2%;
    right: auto;
    transform: translateY(-50%);
    min-width: 2.2em;
    height: 2.2em;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #130915;
    background: #ffd462;
    font-size: clamp(11px, 1.1vw, 16px);
    font-weight: 1000;
    box-shadow: 0 0 18px rgba(255, 212, 98, 0.42);
}

body.phase-lobby .display-control-stack {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(100vw, calc(100vh * 1672 / 941));
    height: min(100vh, calc(100vw * 941 / 1672));
    transform: translate(-50%, -50%);
    z-index: 90;
    display: block;
    pointer-events: none;
}

body.phase-lobby .options-btn,
body.phase-lobby .fullscreen-btn {
    position: absolute;
    width: 7.2%;
    height: 14.8%;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: auto;
    cursor: pointer;
    outline: 0;
}

body.phase-lobby .options-btn:hover,
body.phase-lobby .options-btn.active {
    transform: none;
    background: transparent;
    box-shadow: none;
}

body.phase-lobby .fullscreen-btn:hover,
body.phase-lobby .fullscreen-btn.active {
    transform: none;
    background: transparent;
    box-shadow: none;
}

body.phase-lobby .options-btn:focus-visible,
body.phase-lobby .fullscreen-btn:focus-visible {
    outline: 0;
}

body.phase-lobby .options-btn {
    left: 1.65%;
    top: 3.15%;
}

body.phase-lobby .fullscreen-btn {
    left: 91.25%;
    top: 3.15%;
}

body.phase-lobby .options-panel {
    top: 8.2%;
    bottom: auto;
    left: 1.5%;
    width: min(430px, 34vw);
    max-height: min(620px, calc(100vh - 80px));
    overflow-y: auto;
    pointer-events: auto;
}

@keyframes lobbyCodeGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(42, 255, 244, 0.22));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(42, 255, 244, 0.42));
    }
}

@keyframes lobbyPlayerIn {
    from {
        opacity: 0;
        transform: translateY(8%) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* topbar */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding: 22px 28px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.76) 100%);
    border: 2px solid var(--panel-border);
    box-shadow:
        0 18px 0 rgba(32,48,82,0.08),
        0 20px 40px rgba(32,48,82,0.16),
        inset 0 1px 0 rgba(255,255,255,0.72);
    backdrop-filter: blur(12px);
}

.label {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    opacity: 0.65;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.room-code {
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 1000;
    letter-spacing: 10px;
    line-height: 1;
    color: var(--primary);
    text-shadow:
        0 4px 0 rgba(255,255,255,0.90),
        0 9px 16px rgba(32,48,82,0.16);
    animation: neonPulse 2.8s ease-in-out infinite;
}

.status-box {
    text-align: right;
    padding: 14px 18px;
    border-radius: 20px;
    background: rgba(23, 105, 224, 0.12);
    border: 2px solid rgba(32,48,82,0.10);
    min-width: 170px;
}

.status {
    font-size: 28px;
    font-weight: 900;
    color: #00a96a;
}

.controls {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.controls button {
    padding: 16px 28px;
    font-size: 20px;
    font-weight: 900;
    font-family: inherit;
    color: #fff;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    background: linear-gradient(180deg, #ff5fa3 0%, var(--primary) 100%);
    box-shadow:
        0 8px 0 var(--primary-shadow),
        0 14px 26px rgba(255, 79, 139, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.controls button:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.04);
}

.controls button:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 var(--primary-shadow);
}

.controls .secondary-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.10) 100%);
    box-shadow:
        0 8px 0 rgba(0,0,0,0.22),
        0 10px 22px rgba(0,0,0,0.18);
}

/* panels */

.main-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
}

.panel {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.68) 100%);
    border: 2px solid var(--panel-border);
    border-radius: 28px;
    padding: 34px;
    backdrop-filter: blur(14px);
    box-shadow:
        0 18px 0 rgba(32,48,82,0.08),
        0 24px 54px rgba(32,48,82,0.14),
        inset 0 1px 0 rgba(255,255,255,0.75);
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    transform: translateX(-120%);
    animation: shimmer 8s linear infinite;
    pointer-events: none;
}

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(23, 105, 224, 0.13);
    border: 2px solid rgba(32, 48, 82, 0.10);
    color: #164b9d;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 1000;
    line-height: 1.05;
    color: #203052;
    text-shadow: 0 5px 0 rgba(255,255,255,0.85);
}

.hero p {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: var(--text-soft);
    max-width: 800px;
}

.hero-spark-row {
    margin-top: 28px;
    display: flex;
    gap: 14px;
}

.hero-spark-row span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--accent-2);
    box-shadow: 0 8px 18px rgba(0, 194, 255, 0.28);
    animation: bounceGlow 1.4s infinite ease-in-out;
}

.hero-spark-row span:nth-child(2) {
    animation-delay: 0.15s;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(23, 105, 224, 0.34);
}

.hero-spark-row span:nth-child(3) {
    animation-delay: 0.3s;
    background: var(--primary);
    box-shadow: 0 0 18px rgba(255, 77, 141, 0.45);
}

.pulsing-text {
    animation: pulse 2s infinite ease-in-out;
}

/* players */

.player-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
}

.player-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 100%);
    border: 2px solid var(--panel-border);
    box-shadow: 0 10px 18px rgba(32,48,82,0.12);
    animation: chipIn 0.35s ease;
}

/* game screen */

.game-topbar {
    flex: 0 0 auto;
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(14px, 2.8vh, 28px);
    padding: 0;
    gap: 18px;
}

.question-counter {
    font-size: 28px;
    font-weight: 900;
    padding: 14px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 100%);
    border: 2px solid var(--panel-border);
    box-shadow: 0 10px 0 rgba(32,48,82,0.08), 0 12px 22px rgba(32,48,82,0.12);
}

.big-timer {
    position: relative;
    z-index: 2;
    width: clamp(58px, 5.3vw, 76px);
    height: clamp(58px, 5.3vw, 76px);
    min-width: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: clamp(23px, 2.3vw, 32px);
    font-weight: 1000;
    color: #ffffff;
    background:
        linear-gradient(180deg, #1884ff 0%, #0b55c4 100%);
    border: 3px solid rgba(4, 38, 95, 0.24);
    padding: 0;
    border-radius: 18px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.28),
        0 8px 0 rgba(3,42,114,0.30),
        0 16px 26px rgba(32,48,82,0.15);
    animation: timerPulse 1.2s infinite ease-in-out;
}

.big-timer.warn {
    color: #ffffff;
    background: linear-gradient(180deg, #7c3aed 0%, #4f46e5 100%);
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.10),
        0 16px 26px rgba(0,0,0,0.20),
        0 0 30px rgba(124, 58, 237, 0.30);
}

.big-timer.danger {
    color: #fff;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.22) 0%, rgba(255,93,115,0.22) 30%, rgba(0,0,0,0.16) 100%);
    border-color: rgba(255, 93, 115, 0.48);
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.25),
        0 16px 26px rgba(0,0,0,0.20),
        0 0 34px rgba(255, 93, 115, 0.34);
    animation: timerDanger 0.7s infinite ease-in-out;
}

.big-timer.timer-smash-active {
    animation: timerSmashCut 0.72s cubic-bezier(0.18, 0.94, 0.2, 1.14) both;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.34),
        0 13px 0 rgba(3,42,114,0.34),
        0 22px 42px rgba(23,105,224,0.28),
        0 0 34px rgba(255,255,255,0.38);
}

.game-center {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.game-question {
    flex: 0 1 auto;
    font-family: 'Noto Kufi Arabic', 'Cairo', 'Amiri', serif;
    font-size: clamp(30px, 4.2vw, 62px);
    font-weight: 1000;
    line-height: 1.08;
    margin: 0 0 clamp(12px, 2.6vh, 26px);
    text-align: center;
    color: #203052;
    text-shadow: 0 5px 0 rgba(255,255,255,0.80);
    animation: questionIn 0.42s ease;
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
}

.game-question.question-long {
    font-size: clamp(24px, 3.3vw, 48px);
    line-height: 1.06;
    max-height: none;
}

.game-question.question-xl {
    font-size: clamp(20px, 2.7vw, 38px);
    line-height: 1.04;
    max-height: none;
}

.game-question.question-poem {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 16px);
    font-size: clamp(28px, 3.5vw, 54px);
    line-height: 1.35;
    white-space: normal;
}

.game-question.question-poem .poem-line {
    display: block;
}

.game-options {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(min-content, 1fr);
    gap: clamp(12px, 1.8vw, 22px);
    align-content: start;
    overflow: visible;
}

.countdown-shell {
    grid-column: 1 / -1;
    min-height: clamp(220px, 34vh, 380px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 22px);
    text-align: center;
}

.countdown-kicker {
    font-size: clamp(24px, 2.6vw, 42px);
    font-weight: 1000;
    color: #5c3470;
}

.countdown-subtitle {
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 900;
    color: #203052;
}

.game-options .reveal-card,
.game-options .reveal-board-shell,
.game-options .intro-shell,
.game-options .category-select-shell {
    grid-column: 1 / -1;
}

.game-option {
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: clamp(16px, 2vw, 26px) clamp(18px, 2.2vw, 28px);
    border-radius: 26px;
    font-size: clamp(23px, 2.55vw, 34px);
    font-weight: 900;
    direction: rtl;
    text-align: right;
    color: #fff;
    border: 4px solid rgba(255,255,255,0.64);
    box-shadow:
        0 10px 0 rgba(32,48,82,0.14),
        0 18px 30px rgba(32,48,82,0.15),
        inset 0 1px 0 rgba(255,255,255,0.32);
    animation: optionIn 0.34s ease both;
}

.category-select-shell {
    min-height: min(58vh, 620px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(22px, 3vh, 38px);
    align-items: center;
}

.category-selected-shell {
    min-height: min(62vh, 680px);
    grid-template-rows: 1fr;
    place-items: center;
}

.category-picker-card {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 28px;
    border-radius: 28px;
    color: #203052;
    background: rgba(255,255,255,0.86);
    border: 3px solid color-mix(in srgb, var(--player-color, #7c83fd) 52%, rgba(255,255,255,0.36));
    box-shadow:
        0 12px 0 rgba(32,48,82,0.10),
        0 22px 36px color-mix(in srgb, var(--player-color, #7c83fd) 22%, transparent);
}

.category-picker-avatar {
    width: 72px;
    height: 72px;
    font-size: 42px;
}

.category-picker-label {
    font-size: 22px;
    font-weight: 900;
    color: #64708c;
}

.category-picker-name {
    font-size: clamp(34px, 4.2vw, 62px);
    font-weight: 1000;
    line-height: 1;
}

.round-category-line {
    margin-top: 8px;
    color: var(--category-accent);
}

.category-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
    align-content: center;
}

.category-choice {
    min-height: 110px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 24px;
    color: #ffffff;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 1000;
    text-align: center;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    border: 4px solid rgba(255,255,255,0.62);
    box-shadow:
        0 10px 0 rgba(32,48,82,0.16),
        0 18px 30px rgba(32,48,82,0.16);
}

.category-choice:nth-child(2n) {
    background: linear-gradient(135deg, #ff5b7f 0%, #ff8b4b 100%);
}

.category-choice:nth-child(3n) {
    background: linear-gradient(135deg, #00d6b4 0%, #1769e0 100%);
}

.category-choice.selected {
    transform: scale(1.04);
    background: linear-gradient(135deg, #32e27a 0%, #1769e0 100%);
    border-color: rgba(255,255,255,0.92);
    box-shadow:
        0 12px 0 rgba(32,48,82,0.14),
        0 0 34px color-mix(in srgb, var(--player-color, #7c83fd) 42%, transparent);
}

.category-selected-hero {
    width: min(980px, 92vw);
    min-height: clamp(260px, 42vh, 430px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: clamp(16px, 2.4vh, 28px);
    padding: clamp(28px, 5vh, 58px) clamp(24px, 5vw, 64px);
    border-radius: 34px;
    color: #ffffff;
    text-align: center;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.34) 0 11%, transparent 31%),
        linear-gradient(135deg, #32e27a 0%, var(--category-accent) 54%, #7c83fd 100%);
    border: 5px solid rgba(255,255,255,0.72);
    box-shadow:
        0 18px 0 rgba(32,48,82,0.16),
        0 34px 80px rgba(23,105,224,0.28),
        0 0 56px color-mix(in srgb, var(--player-color, #7c83fd) 38%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.45);
}

.category-selected-kicker {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 1000;
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.26);
}

.category-selected-name {
    font-size: clamp(58px, 8.4vw, 128px);
    font-weight: 1000;
    line-height: 0.95;
    text-shadow:
        0 6px 0 rgba(0,0,0,0.12),
        0 18px 34px rgba(0,0,0,0.20);
    overflow-wrap: anywhere;
}

.category-selected-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 999px;
    color: #203052;
    background: rgba(255,255,255,0.86);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(0,0,0,0.14);
}

.category-selected-avatar {
    width: clamp(42px, 4.8vw, 64px);
    height: clamp(42px, 4.8vw, 64px);
    font-size: clamp(26px, 3.4vw, 42px);
}

.game-option::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
    transform: translateX(-120%);
    animation: shimmer 4.8s linear infinite;
    pointer-events: none;
}

.game-option:nth-child(1) {
    background: linear-gradient(135deg, #ff5b7f 0%, #ff8b4b 100%);
}
.game-option:nth-child(2) {
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
}
.game-option:nth-child(3) {
    background: linear-gradient(135deg, #00d6b4 0%, #00a8ff 100%);
}
.game-option:nth-child(4) {
    background: linear-gradient(135deg, #8d7dff 0%, #ff70c8 100%);
}

.option-badge {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.30);
    border: 2px solid rgba(255,255,255,0.44);
    font-size: 30px;
    font-weight: 1000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

.option-coincidence-badge {
    position: absolute;
    top: 9px;
    left: 11px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #3f2600;
    background: linear-gradient(135deg, #fff4a8 0%, #f7bd31 100%);
    border: 2px solid rgba(255,255,255,0.64);
    box-shadow: 0 7px 16px rgba(95, 62, 0, 0.18);
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 1000;
    line-height: 1;
}

.option-coincidence-badge strong {
    font-size: 0.92em;
}

.game-option.coincidence-option {
    box-shadow:
        0 10px 0 rgba(32,48,82,0.14),
        0 18px 30px rgba(32,48,82,0.15),
        0 0 0 4px rgba(247, 189, 49, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

.option-text {
    flex: 1;
    line-height: 1.12;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.game-option.correct {
    background: linear-gradient(135deg, rgba(50,226,122,0.95) 0%, rgba(24,180,96,0.95) 100%) !important;
    border-color: rgba(255,255,255,0.30);
    color: #08130d;
    transform: scale(1.02);
    box-shadow:
        0 0 0 3px rgba(50,226,122,0.18),
        0 0 36px rgba(50,226,122,0.35),
        0 22px 34px rgba(0,0,0,0.24);
}

.game-option.correct .option-badge {
    color: #08130d;
    background: rgba(255,255,255,0.42);
}

/* reveal cards */

.reveal-card {
    position: relative;
    width: 100%;
    max-width: min(970px, 94vw);
    max-height: none;
    margin: 0 auto;
    padding: clamp(20px, 2.7vh, 34px) clamp(26px, 3.3vw, 44px);
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.88) 0 12%, transparent 34%),
        linear-gradient(135deg, rgba(255, 239, 190, 0.94) 0%, rgba(255, 250, 231, 0.82) 46%, rgba(219, 159, 63, 0.62) 100%);
    border: 3px solid rgba(163, 112, 30, 0.42);
    backdrop-filter: blur(14px);
    box-shadow:
        0 8px 0 rgba(122, 75, 12, 0.14),
        0 16px 34px rgba(122, 75, 12, 0.18),
        inset 0 0 0 2px rgba(255, 255, 255, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    text-align: center;
    animation: revealPop 0.45s ease-out;
    overflow: visible;
    transform-style: preserve-3d;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease;
}

.reveal-card::before,
.reveal-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.reveal-card::before {
    inset: -11px clamp(18px, 3.2vw, 42px) auto;
    height: 18px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #9a6218 0%, #f6c75f 20%, #fff2a8 50%, #d28b20 80%, #7b480d 100%);
    box-shadow:
        0 8px 18px rgba(91, 52, 9, 0.22),
        inset 0 2px 0 rgba(255,255,255,0.52);
}

.reveal-card::after {
    inset: 10px;
    border-radius: 14px;
    border: 1px solid rgba(122, 75, 12, 0.18);
    background:
        linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,0.35) 45%, transparent 56% 100%);
    opacity: 0.55;
}

.reveal-card.correct {
    border-color: rgba(0, 176, 104, 0.84);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 244, 153, 0.88) 0 13%, transparent 37%),
        linear-gradient(135deg, rgba(0, 154, 102, 0.92) 0%, rgba(45, 211, 126, 0.64) 48%, rgba(255, 221, 99, 0.78) 100%);
    box-shadow:
        0 0 0 3px rgba(255, 213, 74, 0.18),
        0 18px 44px rgba(0, 154, 102, 0.28),
        0 0 40px rgba(255, 213, 74, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    animation:
        revealCorrectPop 0.52s cubic-bezier(0.2, 0.9, 0.2, 1),
        revealCorrectGlow 1.1s ease-out;
}

.reveal-card.correct .reveal-answer {
    color: #fffbe6;
    text-shadow:
        0 3px 0 rgba(3, 85, 48, 0.58),
        0 0 24px rgba(255, 221, 99, 0.46);
    animation: truthAnswerBurst 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal-card.correct .reveal-meta {
    color: #2d6046;
}

.reveal-card.correct .reveal-player {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

.reveal-step {
    display: inline-block;
    margin-bottom: 18px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 2px solid var(--panel-border);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.reveal-answer {
    font-family: 'Amiri', 'Cairo', serif;
    font-size: clamp(29px, 3.65vw, 53px);
    font-weight: 1000;
    line-height: 1.1;
    margin-bottom: clamp(8px, 1.5vh, 16px);
    color: #203052;
    text-shadow: 0 4px 0 rgba(255,255,255,0.80);
    overflow-wrap: anywhere;
}

.reveal-meta {
    font-size: 20px;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 20px;
}

.reveal-picked-label {
    font-size: 20px;
    font-weight: 800;
    opacity: 0.82;
    margin-bottom: 14px;
}

.reveal-picked-by {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
}

.reveal-player {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 2px solid rgba(255,255,255,0.18);
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(0,0,0,0.14);
}

.reveal-board-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: clamp(12px, 1.8vh, 20px);
    align-content: start;
    justify-items: center;
}

.reveal-answer-board {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(9px, 1.2vw, 16px);
}

.reveal-board-option {
    min-height: clamp(58px, 8vh, 96px);
    padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.5vw, 20px);
    border-width: 3px;
    border-radius: 18px;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.1;
    animation: revealBoardOptionSettle 0.28s ease both;
    animation-delay: var(--reveal-option-delay, 0ms);
    pointer-events: none;
}

.reveal-board-option.is-muted {
    opacity: 0.5;
    filter: saturate(0.72) brightness(0.95);
}

.reveal-board-option.is-active {
    opacity: 1;
    z-index: 1;
    box-shadow:
        0 0 0 4px rgba(255,255,255,0.48),
        0 12px 28px rgba(32,48,82,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.game-option.wrong,
.reveal-board-option.wrong {
    color: #ffffff;
    background: linear-gradient(180deg, #ff5c6c 0%, #d6326e 100%);
    border-color: rgba(255,255,255,0.72);
}

.reveal-focus-stack {
    width: min(990px, 95vw);
    display: grid;
    justify-items: center;
    gap: 0;
    margin-top: clamp(-4px, -0.4vh, 0px);
    perspective: 900px;
}

.reveal-focus-card {
    width: 100%;
}

.reveal-card-topline {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(6px, 1vh, 10px);
}

.reveal-focus-card .reveal-step {
    margin: 0;
    padding: 6px 12px;
    font-size: clamp(12px, 1.2vw, 15px);
}

.reveal-focus-card .reveal-result-pill {
    margin: 0;
    padding: 6px 14px;
    font-size: clamp(13px, 1.35vw, 17px);
}

.reveal-author-badge {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(620px, 86vw);
    min-height: 40px;
    margin-bottom: -10px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #203052;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid color-mix(in srgb, var(--player-color, #f6c75f) 48%, rgba(32,48,82,0.12));
    box-shadow:
        0 10px 22px rgba(32,48,82,0.16),
        0 0 22px color-mix(in srgb, var(--player-color, #f6c75f) 24%, transparent);
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 1000;
}

.reveal-author-avatar,
.reveal-player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border-width: 2px;
    font-size: 18px;
    box-shadow:
        0 4px 0 rgba(32,48,82,0.10),
        0 7px 14px rgba(32,48,82,0.14);
}

.reveal-author-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    border: 2px solid rgba(255,255,255,0.74);
    font-size: 19px;
    font-weight: 1000;
}

.split-author-badge {
    padding-inline-start: 8px;
    background:
        linear-gradient(135deg, rgba(255, 246, 188, 0.96) 0%, rgba(255, 255, 255, 0.92) 70%);
    border-color: rgba(247, 189, 49, 0.58);
    box-shadow:
        0 10px 22px rgba(95, 62, 0, 0.16),
        0 0 26px rgba(247, 189, 49, 0.26);
}

.reveal-author-icon.split-icon {
    color: #3f2600;
    background: linear-gradient(135deg, #fff4a8 0%, #f7bd31 100%);
}

.reveal-author-split-avatars {
    display: inline-flex;
    align-items: center;
    direction: ltr;
    margin-inline-end: 2px;
}

.reveal-author-split-avatars .reveal-author-avatar {
    margin-left: -8px;
    box-shadow:
        0 4px 0 rgba(32,48,82,0.10),
        0 7px 14px rgba(32,48,82,0.14),
        0 0 14px color-mix(in srgb, var(--player-color, #f6c75f) 30%, transparent);
}

.reveal-author-split-avatars .reveal-author-avatar:first-child {
    margin-left: 0;
}

.reveal-voter-stack {
    position: relative;
    z-index: 4;
    min-height: 54px;
    margin-top: -19px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.reveal-voter-stack:empty {
    display: none;
}

.reveal-voter-stack .reveal-player {
    min-width: 0;
    min-height: 0;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: rotate(var(--voter-tilt, 0deg));
    animation-delay: var(--voter-delay, 0s);
}

.reveal-voter-stack .reveal-player-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 30px;
    border-width: 3px;
    box-shadow:
        0 6px 0 rgba(32,48,82,0.12),
        0 12px 24px rgba(32,48,82,0.20),
        0 0 22px color-mix(in srgb, var(--player-color, #7c83fd) 42%, transparent);
}

.reveal-voter-stack.stage-in .reveal-player {
    animation: revealVoterDrop 0.5s cubic-bezier(0.22, 1.25, 0.36, 1) both;
}

/* scoreboard */

.score-entry {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: clamp(14px, 1.8vh, 22px) clamp(18px, 2vw, 26px);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.70) 100%);
    border: 3px solid var(--panel-border);
    box-shadow:
        0 9px 0 rgba(32,48,82,0.09),
        0 18px 30px rgba(32,48,82,0.14),
        inset 0 1px 0 rgba(255,255,255,0.70);
    animation: optionIn 0.34s ease both;
}

.score-entry.gold {
    background: linear-gradient(135deg, rgba(211,239,255,0.96) 0%, rgba(255,255,255,0.76) 100%);
    border-color: rgba(23,105,224,0.30);
}

.score-entry.silver {
    background: linear-gradient(135deg, rgba(226,235,255,0.94) 0%, rgba(255,255,255,0.72) 100%);
}

.score-entry.bronze {
    background: linear-gradient(135deg, rgba(239,226,255,0.92) 0%, rgba(255,255,255,0.70) 100%);
}

.score-rank {
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 22px;
    font-size: 28px;
    font-weight: 1000;
    background: rgba(255,255,255,0.54);
    border: 2px solid rgba(32,48,82,0.10);
}

.score-meta {
    flex: 1;
    min-width: 0;
}

.score-name {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 1000;
    line-height: 1.05;
    margin-bottom: 6px;
    word-break: break-word;
}

.score-points {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-soft);
}

.score-fake-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    margin-top: 8px;
    color: #34425f;
    font-size: clamp(14px, 1.45vw, 19px);
    font-weight: 900;
    line-height: 1.25;
}

.score-fake-label {
    color: rgba(32, 48, 82, 0.62);
    font-weight: 1000;
    white-space: nowrap;
}

.score-fake-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.final-score-intro {
    grid-column: 1 / -1;
    min-height: clamp(220px, 34vh, 380px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.final-score-intro-title {
    font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
    font-size: clamp(46px, 5.4vw, 92px);
    font-weight: 1000;
    color: #f8f1c9;
    text-shadow:
        0 8px 0 rgba(55, 26, 84, 0.65),
        0 0 34px rgba(255, 211, 91, 0.7);
}

.final-results {
    grid-column: 1 / -1;
    display: grid;
    gap: clamp(12px, 1.8vh, 22px);
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.final-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 18px;
}

.podium-player {
    min-height: clamp(150px, 24vh, 230px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(14px, 2vh, 24px) 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--player-color, #7c83fd) 38%, transparent) 0%, transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.07) 100%);
    border: 3px solid color-mix(in srgb, var(--player-color, #7c83fd) 50%, rgba(255,255,255,0.18));
    box-shadow:
        0 18px 34px rgba(0,0,0,0.22),
        0 0 30px color-mix(in srgb, var(--player-color, #7c83fd) 22%, transparent);
    animation: podiumRise 0.56s ease both;
}

.podium-1 {
    min-height: clamp(190px, 32vh, 300px);
    transform-origin: bottom center;
    animation-delay: 0.1s;
}

.podium-2 {
    min-height: clamp(165px, 27vh, 250px);
    animation-delay: 0.22s;
}

.podium-3 {
    min-height: clamp(150px, 24vh, 220px);
    animation-delay: 0.34s;
}

.podium-place {
    font-size: 20px;
    font-weight: 1000;
    color: var(--accent);
}

.podium-avatar {
    width: clamp(62px, 7vw, 90px);
    height: clamp(62px, 7vw, 90px);
    border-radius: 28px;
    font-size: clamp(36px, 4.6vw, 52px);
}

.podium-name {
    max-width: 100%;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 1000;
    line-height: 1;
    text-align: center;
    word-break: break-word;
}

.podium-score {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-soft);
}

.final-awards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.final-award,
.final-stat-card,
.pause-card {
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.70) 100%);
    border: 2px solid var(--panel-border);
    box-shadow: 0 8px 0 rgba(32,48,82,0.08), 0 14px 24px rgba(32,48,82,0.12);
}

.final-award {
    padding: clamp(12px, 1.7vh, 18px);
}

.final-award-title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
}

.final-award-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.final-award-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 28px;
}

.final-award-name {
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.05;
    word-break: break-word;
}

.final-award-value {
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text-soft);
}

.final-award-detail {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-soft);
}

.final-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.final-stat-card {
    padding: 16px;
}

.final-stat-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.final-rank {
    font-size: 18px;
    font-weight: 1000;
    color: var(--accent);
}

.final-stat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 24px;
}

.final-stat-name {
    font-size: 20px;
    font-weight: 1000;
    line-height: 1.05;
    word-break: break-word;
}

.final-stat-score {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-soft);
}

.final-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-soft);
}

.final-stat-row strong {
    color: var(--text-main);
}

.pause-card {
    grid-column: 1 / -1;
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(22px, 3vh, 34px);
    text-align: center;
}

.pause-title {
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 1000;
    color: var(--accent);
}

.pause-body {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-soft);
}

@keyframes podiumRise {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* footer */

.footer {
    display: none;
    flex: 0 0 auto;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    font-weight: 800;
    opacity: 0.55;
    margin-top: auto;
    padding-top: clamp(8px, 1.4vh, 18px);
}

/* intro screen */

.intro-shell {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    max-width: 1250px;
    max-height: none;
    margin: 0 auto;
    padding: clamp(24px, 4vh, 56px) clamp(24px, 3.8vw, 48px) clamp(20px, 3.2vh, 44px);
    border-radius: 36px;
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 100%);
    border: 3px solid var(--panel-border);
    box-shadow:
        0 12px 0 rgba(32,48,82,0.08),
        0 28px 80px rgba(32,48,82,0.14),
        inset 0 1px 0 rgba(255,255,255,0.76);
    backdrop-filter: blur(16px);
    text-align: center;
}

.intro-glow {
    position: absolute;
    left: 50%;
    top: 115px;
    width: 520px;
    height: 520px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,194,255,0.24) 0%, rgba(255,143,179,0.12) 34%, rgba(124,131,253,0) 68%);
    filter: blur(10px);
    pointer-events: none;
}

.intro-spotlight {
    position: absolute;
    top: -120px;
    width: 300px;
    height: 620px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.16) 0%,
        rgba(255,255,255,0.07) 18%,
        rgba(255,255,255,0.02) 45%,
        rgba(255,255,255,0) 100%
    );
    clip-path: polygon(42% 0%, 58% 0%, 100% 100%, 0% 100%);
    opacity: 0.42;
    filter: blur(4px);
    pointer-events: none;
    animation: introSpotlightSweep 4.8s ease-in-out infinite alternate;
}

.intro-spotlight-left {
    left: 30px;
    transform: rotate(-13deg);
}

.intro-spotlight-right {
    right: 30px;
    transform: rotate(13deg);
    animation-delay: 0.6s;
}

.intro-header {
    position: relative;
    z-index: 2;
}

.intro-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(8px, 1.5vh, 14px);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(23, 105, 224, 0.14);
    border: 2px solid rgba(32,48,82,0.10);
    color: #164b9d;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 1000;
    letter-spacing: 1px;
    animation: introFadeUp 0.7s ease-out forwards;
}

.intro-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 560px;
    min-height: clamp(120px, 18vh, 180px);
    margin-bottom: 14px;
}

.intro-logo-ring {
    position: absolute;
    width: clamp(180px, 20vw, 280px);
    height: clamp(180px, 20vw, 280px);
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.14);
    box-shadow:
        0 0 0 10px rgba(255,255,255,0.02),
        0 0 80px rgba(255,215,0,0.08);
    animation: introRingSpin 12s linear infinite;
}

.intro-logo-ring-2 {
    width: clamp(140px, 16vw, 220px);
    height: clamp(140px, 16vw, 220px);
    border-style: dashed;
    border-color: rgba(255,255,255,0.10);
    animation-direction: reverse;
    animation-duration: 9s;
}

.intro-logo {
    position: relative;
    z-index: 2;
    font-size: clamp(46px, 6vw, 78px);
    font-weight: 1000;
    letter-spacing: 3px;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow:
        0 4px 12px rgba(0,0,0,0.45),
        0 0 30px rgba(255,215,0,0.20);
    animation: introLogoPop 0.7s ease-out;
}

.intro-subtitle {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 10px;
    opacity: 0;
    animation: introFadeUp 0.7s ease-out forwards;
    animation-delay: 0.2s;
}

.intro-tagline {
    max-width: 940px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1.45;
    color: var(--text-main);
    opacity: 0;
    animation: introFadeUp 0.7s ease-out forwards;
    animation-delay: 0.35s;
}

.intro-shell .intro-logo {
    font-size: clamp(52px, 7vw, 88px);
}

.intro-shell .intro-subtitle {
    font-size: clamp(22px, 3vw, 34px);
}

.intro-shell .intro-tagline {
    font-size: clamp(18px, 2vw, 24px);
}

.intro-shell .intro-player-grid {
    margin-top: 8px;
}

.game-show-intro .intro-logo {
    color: #fff8d8;
    text-shadow:
        0 5px 0 rgba(255,79,139,0.82),
        0 12px 24px rgba(0,0,0,0.42),
        0 0 42px rgba(0,194,255,0.34);
    animation: introTitleWipe 1.05s cubic-bezier(0.2, 0.9, 0.2, 1) 0.32s both;
}

.game-show-intro .intro-player-card {
    background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--player-color, #7c83fd) 34%, transparent) 0%, transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%);
}

.game-show-intro {
    max-width: 1480px;
    padding-top: clamp(22px, 3vh, 38px);
    color: #fff7dd;
    background:
        radial-gradient(circle at 50% 18%, rgba(0,194,255,0.24) 0%, rgba(0,194,255,0.07) 26%, transparent 48%),
        radial-gradient(circle at 12% 30%, rgba(255,79,139,0.22) 0%, transparent 34%),
        radial-gradient(circle at 88% 30%, rgba(0,194,255,0.24) 0%, transparent 34%),
        linear-gradient(135deg, rgba(21,24,53,0.96) 0%, rgba(77,28,89,0.92) 48%, rgba(11,35,70,0.96) 100%);
    border-color: rgba(255,255,255,0.22);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        0 20px 0 rgba(32,48,82,0.16),
        0 34px 90px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.22);
}

.intro-stage-floor,
.intro-scanline,
.intro-marquee {
    position: absolute;
    pointer-events: none;
}

.intro-stage-floor {
    left: -8%;
    right: -8%;
    bottom: -24%;
    height: 46%;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 72px 42px;
    transform: perspective(520px) rotateX(62deg);
    opacity: 0.34;
    animation: introFloorMove 4.8s linear infinite;
}

.intro-scanline {
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.10) 49%, transparent 52%);
    transform: translateY(-100%);
    opacity: 0.55;
    animation: introScanline 4.2s linear infinite;
}

.intro-marquee {
    left: -18%;
    width: 136%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: 'Cairo', 'Nunito', 'Tajawal', Arial, sans-serif;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: 5px;
    color: #ffffff;
    background: linear-gradient(90deg, #0b55c4 0%, #1769e0 50%, #00a8ff 100%);
    box-shadow: 0 8px 22px rgba(0,0,0,0.20);
    opacity: 0;
    animation:
        introMarqueeIn 0.7s ease 0.12s both,
        introMarqueeSlide 5.5s linear 0.82s infinite;
}

.intro-marquee-top {
    top: 20px;
    transform: rotate(-2deg);
}

.intro-marquee-bottom {
    bottom: 24px;
    transform: rotate(2deg);
    animation-direction: normal, reverse;
}

.intro-live-row {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(8px, 1.4vh, 14px);
}

.game-show-intro .intro-kicker {
    margin-bottom: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    border-color: rgba(255,255,255,0.44);
    box-shadow: 0 0 28px rgba(23,105,224,0.22);
}

.intro-on-air {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: clamp(13px, 1.4vw, 17px);
    font-weight: 1000;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, #ff4f61 0%, #cf2861 100%);
    box-shadow: 0 0 28px rgba(255,79,97,0.30);
    animation: introOnAirPulse 1.2s ease-in-out infinite;
}

.game-show-logo-wrap {
    min-height: clamp(96px, 15vh, 150px);
    margin-bottom: clamp(6px, 1.2vh, 12px);
}

.intro-logo-shadow {
    position: absolute;
    z-index: 1;
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 1000;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,0.18);
    transform: translate(10px, 8px);
    opacity: 0;
    animation: introLogoShadow 1s ease 0.16s both;
}

.game-show-intro .intro-subtitle {
    color: #8be9ff;
    text-shadow: 0 8px 18px rgba(0,0,0,0.24);
    animation-delay: 0.92s;
}

.game-show-intro .intro-cast-line {
    color: rgba(255,255,255,0.82);
    animation-delay: 1.08s;
}

.game-show-intro .intro-light-sweep {
    width: min(520px, 72%);
    background: linear-gradient(90deg, transparent 0%, #00c2ff 18%, #fff 50%, #7c83fd 82%, transparent 100%);
    animation:
        introFadeUp 0.7s ease-out 1.12s forwards,
        introLightSweep 1.8s ease-in-out 1.8s infinite;
}

.game-show-intro .intro-contestants-title {
    color: #fff7dd;
    text-shadow: 0 8px 18px rgba(0,0,0,0.28);
    animation-delay: 1.18s;
}

.intro-runway-grid {
    max-width: 1120px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-contestant-card {
    isolation: isolate;
    min-height: clamp(82px, 10.5vh, 128px);
    opacity: 0;
    overflow: hidden;
    transform: translateY(0);
    animation-duration: 0.72s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    animation-delay: var(--intro-delay);
}

.intro-contestant-card.from-left {
    animation-name: introContestantFromLeft;
}

.intro-contestant-card.from-right {
    animation-name: introContestantFromRight;
}

.intro-card-beam {
    position: absolute;
    inset: -35% auto -35% -20%;
    z-index: -1;
    width: 48%;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--player-color, #7c83fd) 58%, transparent) 48%, transparent 100%);
    filter: blur(10px);
    opacity: 0;
    transform: skewX(-18deg) translateX(-120%);
    animation: introCardBeam 1.1s ease calc(var(--intro-delay) + 0.18s) both;
}

.intro-contestant-number {
    flex: 0 0 auto;
    width: clamp(42px, 4.4vw, 58px);
    height: clamp(42px, 4.4vw, 58px);
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    font-family: 'Cairo', 'Nunito', 'Tajawal', Arial, sans-serif;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 1000;
    background: linear-gradient(135deg, color-mix(in srgb, var(--player-color, #7c83fd) 75%, #1769e0) 0%, #00a8ff 100%);
    box-shadow: 0 0 28px color-mix(in srgb, var(--player-color, #7c83fd) 34%, transparent);
}

.intro-contestant-card .intro-avatar {
    animation: introAvatarPop 0.58s cubic-bezier(0.2, 1.2, 0.2, 1) calc(var(--intro-delay) + 0.2s) both;
}

.intro-name-mask {
    overflow: hidden;
}

.intro-contestant-card .intro-player-number {
    color: #8be9ff;
    opacity: 0;
    animation: introNameReveal 0.45s ease calc(var(--intro-delay) + 0.24s) both;
}

.intro-contestant-card .intro-player-name {
    color: #ffffff;
    opacity: 0;
    text-shadow: 0 6px 14px rgba(0,0,0,0.26);
    animation: introNameReveal 0.58s cubic-bezier(0.2, 0.9, 0.2, 1) calc(var(--intro-delay) + 0.32s) both;
}

.intro-card-edge {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid color-mix(in srgb, var(--player-color, #7c83fd) 48%, transparent);
    opacity: 0;
    animation: introCardEdge 1.2s ease calc(var(--intro-delay) + 0.12s) both;
}

.intro-next-cue {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(12px, 2vh, 22px);
    color: #8be9ff;
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 1000;
    opacity: 0;
    animation: introFadeUp 0.7s ease 3.2s forwards;
}

.intro-next-cue span {
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 18px rgba(0,194,255,0.34);
}

.intro-divider {
    width: 180px;
    height: 6px;
    margin: clamp(12px, 2vh, 26px) auto clamp(12px, 2vh, 24px);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, #ffffff 50%, var(--accent) 80%, transparent 100%);
    box-shadow: 0 0 24px rgba(255,255,255,0.16);
    opacity: 0;
    animation: introFadeUp 0.7s ease-out forwards;
    animation-delay: 0.45s;
}

.intro-contestants-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: clamp(12px, 2vh, 24px);
    opacity: 0;
    animation: introFadeUp 0.7s ease-out forwards;
    animation-delay: 0.55s;
}

.intro-player-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 18px);
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.intro-player-card {
    position: relative;
    padding: clamp(14px, 2vh, 24px) clamp(16px, 2vw, 24px);
    border-radius: 24px;
    text-align: left;
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
    border: 2px solid var(--panel-border);
    box-shadow:
        0 16px 28px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    animation: introCardIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.intro-player-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-130%);
    animation: introShine 2.8s ease-in-out infinite;
    animation-delay: inherit;
}

.intro-player-number {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    opacity: 0.9;
}

.intro-player-name {
    font-size: clamp(22px, 2.7vw, 34px);
    font-weight: 1000;
    line-height: 1.15;
    color: var(--text-main);
    text-shadow: 0 3px 8px rgba(0,0,0,0.25);
    word-break: break-word;
}

/* animations */

@keyframes pulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

@keyframes bounceGlow {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.12); }
}

@keyframes shimmer {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes optionIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes questionIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealPop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes timerDanger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes timerSmashCut {
    0% {
        opacity: 0;
        transform: translateY(-120px) scale(1.42) rotate(-2.4deg);
    }

    38% {
        opacity: 1;
        transform: translateY(13px) scale(0.92) rotate(1.2deg);
    }

    64% {
        transform: translateY(-5px) scale(1.04) rotate(-0.45deg);
    }

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

@keyframes viewIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes neonPulse {
    0%, 100% {
        text-shadow:
            0 0 18px rgba(255, 213, 79, 0.35),
            0 4px 14px rgba(0,0,0,0.28);
    }
    50% {
        text-shadow:
            0 0 28px rgba(255, 213, 79, 0.48),
            0 4px 14px rgba(0,0,0,0.28);
    }
}

@keyframes chipIn {
    0% {
        opacity: 0;
        transform: scale(0.94) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, 26px); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-36px, 34px); }
}

@keyframes floatOrb3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -24px); }
}

/* intro animations */

@keyframes introLogoPop {
    0% {
        opacity: 0;
        transform: scale(0.86) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes introFadeUp {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes introCardIn {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes introShine {
    0% { transform: translateX(-130%); }
    35% { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

@keyframes introRingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes introSpotlightSweep {
    0% {
        opacity: 0.28;
        filter: blur(4px);
    }
    100% {
        opacity: 0.48;
        filter: blur(2px);
    }
}

@keyframes introTitleWipe {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(12px) scale(0.96);
    }
    56% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(-3px) scale(1.035);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0) scale(1);
    }
}

@keyframes introLogoShadow {
    0% {
        opacity: 0;
        transform: translate(26px, 14px) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: translate(10px, 8px) scale(1);
    }
}

@keyframes introMarqueeIn {
    0% {
        opacity: 0;
        clip-path: inset(0 50% 0 50%);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes introMarqueeSlide {
    0% { background-position: 0 0; }
    100% { background-position: 220px 0; }
}

@keyframes introFloorMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 72px 42px, 72px 42px; }
}

@keyframes introScanline {
    0% { transform: translateY(-100%); }
    55%, 100% { transform: translateY(100%); }
}

@keyframes introOnAirPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.045);
        filter: brightness(1.18);
    }
}

@keyframes introLightSweep {
    0%, 100% {
        filter: brightness(1);
        transform: scaleX(1);
    }
    50% {
        filter: brightness(1.6);
        transform: scaleX(1.12);
    }
}

@keyframes introContestantFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-90px) rotate(-2deg) scale(0.94);
        clip-path: inset(0 100% 0 0);
    }
    64% {
        opacity: 1;
        transform: translateX(8px) rotate(0.5deg) scale(1.02);
        clip-path: inset(0 0 0 0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes introContestantFromRight {
    0% {
        opacity: 0;
        transform: translateX(90px) rotate(2deg) scale(0.94);
        clip-path: inset(0 0 0 100%);
    }
    64% {
        opacity: 1;
        transform: translateX(-8px) rotate(-0.5deg) scale(1.02);
        clip-path: inset(0 0 0 0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes introCardBeam {
    0% {
        opacity: 0;
        transform: skewX(-18deg) translateX(-120%);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: skewX(-18deg) translateX(280%);
    }
}

@keyframes introAvatarPop {
    0% {
        opacity: 0;
        transform: scale(0.55) rotate(-8deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.12) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes introNameReveal {
    0% {
        opacity: 0;
        transform: translateY(115%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes introCardEdge {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 color-mix(in srgb, var(--player-color, #7c83fd) 0%, transparent);
    }
    45% {
        opacity: 1;
        box-shadow: 0 0 38px color-mix(in srgb, var(--player-color, #7c83fd) 34%, transparent);
    }
    100% {
        opacity: 0.72;
        box-shadow: 0 0 18px color-mix(in srgb, var(--player-color, #7c83fd) 20%, transparent);
    }
}

/* viewport fit safety */

.topbar {
    margin-bottom: clamp(12px, 2vh, 22px);
    padding: clamp(14px, 2.2vh, 22px) clamp(18px, 2.2vw, 28px);
    border-radius: clamp(20px, 2.2vw, 28px);
}

.room-code {
    font-size: clamp(44px, 6.8vw, 86px);
}

.controls {
    margin-bottom: clamp(12px, 2vh, 20px);
}

.panel {
    padding: clamp(20px, 3vh, 34px);
    overflow: visible;
}

.hero-badge {
    margin-bottom: clamp(10px, 1.6vh, 18px);
}

.hero h1 {
    font-size: clamp(36px, 5.2vw, 64px);
}

.hero p {
    font-size: clamp(20px, 2.5vw, 30px);
}

.game-topbar {
    margin-bottom: clamp(10px, 2vh, 22px);
}

.question-counter {
    padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.8vw, 22px);
    font-size: clamp(20px, 2.4vw, 28px);
}

.big-timer {
    width: clamp(58px, 5.3vw, 76px);
    height: clamp(58px, 5.3vw, 76px);
    min-width: 0;
    padding: 0;
    font-size: clamp(23px, 2.3vw, 32px);
}

.game-question {
    font-size: clamp(26px, 3.6vw, 56px);
    margin-bottom: clamp(8px, 1.8vh, 20px);
}

.game-option {
    overflow: visible;
    padding: clamp(12px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px);
    border-radius: clamp(18px, 2vw, 26px);
    font-size: clamp(20px, 2.25vw, 32px);
}

.option-badge {
    width: clamp(46px, 4.6vw, 58px);
    height: clamp(46px, 4.6vw, 58px);
    border-radius: clamp(14px, 1.6vw, 20px);
    font-size: clamp(23px, 2.4vw, 30px);
}

.intro-shell,
.phase-progress-panel {
    padding: clamp(16px, 2.6vh, 32px) clamp(18px, 2.6vw, 36px);
}

.reveal-answer {
    font-size: clamp(29px, 3.65vw, 53px);
}

.reveal-meta {
    font-size: clamp(19px, 2.2vw, 26px);
    margin-bottom: clamp(10px, 1.5vh, 18px);
}

.reveal-picked-by {
    min-height: 0;
}

.reveal-player {
    min-height: clamp(38px, 4.6vh, 50px);
    padding: clamp(7px, 1vh, 10px) clamp(12px, 1.6vw, 18px);
    font-size: clamp(16px, 1.8vw, 20px);
}

.podium-player,
.podium-1,
.podium-2,
.podium-3 {
    min-height: clamp(128px, 20vh, 230px);
    padding: clamp(10px, 1.6vh, 20px) clamp(10px, 1.5vw, 18px);
}

.podium-avatar {
    width: clamp(54px, 6vw, 82px);
    height: clamp(54px, 6vw, 82px);
    font-size: clamp(32px, 4vw, 48px);
}

.podium-name {
    font-size: clamp(21px, 2.5vw, 34px);
}

.podium-score,
.podium-place {
    font-size: clamp(16px, 1.8vw, 20px);
}

.final-award {
    padding: clamp(10px, 1.4vh, 16px);
}

.final-award-avatar {
    width: clamp(38px, 4.4vw, 50px);
    height: clamp(38px, 4.4vw, 50px);
    font-size: clamp(22px, 2.6vw, 28px);
}

.final-award-name {
    font-size: clamp(18px, 2vw, 24px);
}

.final-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: clamp(8px, 1.1vw, 14px);
}

.final-stat-card {
    padding: clamp(10px, 1.4vh, 16px);
}

.final-stat-head {
    margin-bottom: clamp(6px, 1vh, 12px);
}

.final-stat-name {
    font-size: clamp(16px, 1.8vw, 20px);
}

.final-stat-row {
    padding-top: clamp(5px, 0.8vh, 8px);
    font-size: clamp(12px, 1.35vw, 15px);
}

.intro-logo-wrap {
    min-height: clamp(86px, 13vh, 150px);
    margin-bottom: clamp(6px, 1vh, 14px);
}

.intro-shell .intro-logo,
.intro-logo-shadow {
    font-size: clamp(38px, 5.4vw, 72px);
}

.intro-shell .intro-subtitle {
    font-size: clamp(18px, 2.4vw, 30px);
}

.intro-shell .intro-tagline {
    font-size: clamp(15px, 1.7vw, 21px);
}

.intro-divider {
    margin: clamp(8px, 1.3vh, 18px) auto;
}

.intro-contestants-title {
    margin-bottom: clamp(8px, 1.4vh, 18px);
}

.intro-player-card {
    padding: clamp(10px, 1.4vh, 18px) clamp(12px, 1.6vw, 20px);
}

.intro-contestant-card {
    min-height: clamp(66px, 8.4vh, 112px);
    overflow: visible;
}

.intro-name-mask,
.reveal-staged-card {
    overflow: visible;
}

.intro-avatar {
    width: clamp(50px, 5.4vw, 74px);
    height: clamp(50px, 5.4vw, 74px);
    font-size: clamp(30px, 3.4vw, 42px);
}

.intro-player-name {
    font-size: clamp(18px, 2.2vw, 30px);
}

.intro-next-cue {
    margin-top: clamp(8px, 1.4vh, 16px);
    font-size: clamp(15px, 1.7vw, 22px);
}

.footer {
    padding-top: clamp(4px, 0.8vh, 10px);
    font-size: clamp(11px, 1.1vw, 14px);
}

/* responsive */

@media (max-width: 1100px) {
    .main-grid,
    .game-options,
    .intro-player-grid,
    .final-podium,
    .final-awards {
        grid-template-columns: 1fr;
    }

    .intro-logo-wrap {
        min-width: 100%;
    }

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

    .game-topbar {
        flex-direction: row;
        align-items: center;
        padding: 0;
    }

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

    .game-option {
        min-height: 140px;
    }

    .podium-player,
    .podium-1,
    .podium-2,
    .podium-3 {
        min-height: 190px;
    }
}

@media (max-width: 700px) {
    .screen {
        padding: 20px 16px 16px;
    }

    .panel,
    .intro-shell,
    .reveal-card {
        padding: 24px 18px;
    }

    .room-code {
        letter-spacing: 6px;
    }

    .game-option {
        font-size: 26px;
        padding: 20px;
    }

    .option-badge {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .score-name,
    .intro-player-name {
        font-size: 28px;
    }

    .game-question {
        font-size: 34px;
    }

    .big-timer {
        width: 58px;
        height: 58px;
        min-width: 0;
        font-size: 23px;
    }

    .final-stat-head {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .final-stat-score {
        grid-column: 1 / -1;
    }





}

@media (max-height: 720px) and (orientation: landscape) {
    .screen {
        padding: 18px 24px 14px;
    }

    .topbar {
        margin-bottom: 16px;
        padding: 14px 18px;
    }

    .game-topbar {
        margin-bottom: 16px;
        padding: 0;
    }

    @media (max-width: 1100px) {
        .game-topbar {
            padding: 0;
        }
    }

    .game-question {
        margin-bottom: 18px;
        font-size: clamp(30px, 4vw, 46px);
    }

    .game-option {
        min-height: 112px;
        padding: 18px 20px;
        font-size: 26px;
    }

    .final-podium {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .podium-player,
    .podium-1,
    .podium-2,
    .podium-3 {
        min-height: 170px;
        padding: 18px 12px;
    }

    .podium-avatar {
        width: 68px;
        height: 68px;
        font-size: 40px;
    }

    .final-awards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-height: 760px) {
    .screen {
        padding: clamp(10px, 1.8vh, 18px) clamp(14px, 2vw, 24px) clamp(8px, 1.5vh, 14px);
    }

    .game-option {
        min-height: 0;
    }

    .podium-player,
    .podium-1,
    .podium-2,
    .podium-3 {
        min-height: clamp(110px, 18vh, 170px);
    }

    .intro-shell,
    .reveal-card,
    .phase-progress-panel {
        padding: clamp(14px, 2vh, 24px) clamp(16px, 2.2vw, 28px);
    }

    .intro-player-grid,
    .phase-progress-grid,
    .final-stat-grid {
        gap: clamp(6px, 1vw, 12px);
    }
}

.reveal-card.wrong {
    border-color: rgba(185, 69, 75, 0.62);
    background:
        linear-gradient(135deg, rgba(255, 239, 190, 0.92) 0%, rgba(255, 250, 231, 0.76) 52%, rgba(204, 113, 67, 0.54) 100%),
        repeating-linear-gradient(42deg, transparent 0 24px, rgba(155, 43, 55, 0.10) 25px 27px);
    box-shadow:
        0 0 0 3px rgba(255, 92, 108, 0.10),
        0 16px 40px rgba(122, 75, 12, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation:
        revealWrongPop 0.48s cubic-bezier(0.2, 0.9, 0.2, 1),
        revealWrongGlow 1s ease-out;
}

.reveal-card.wrong .reveal-answer {
    color: #203052;
    text-shadow:
        0 3px 0 rgba(255,255,255,0.82),
        0 8px 18px rgba(32,48,82,0.16);
    animation: bluffAnswerCrack 0.72s ease both;
}

.reveal-card.wrong .reveal-meta {
    color: #7a2634;
}

.reveal-card.wrong .reveal-player {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
}

@keyframes revealCorrectPop {
    0% {
        transform: scale(0.94) translateY(8px);
    }
    45% {
        transform: scale(1.035) translateY(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes revealCorrectGlow {
    0% {
        box-shadow:
            0 0 0 0 rgba(46, 213, 115, 0.0),
            0 18px 36px rgba(46, 213, 115, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(46, 213, 115, 0.14),
            0 28px 70px rgba(46, 213, 115, 0.26),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    100% {
        box-shadow:
            0 0 0 3px rgba(46, 213, 115, 0.12),
            0 24px 60px rgba(46, 213, 115, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@keyframes revealWrongPop {
    0% {
        transform: scale(0.94) translateY(8px);
    }
    22% {
        transform: scale(1.02) translateX(-6px);
    }
    42% {
        transform: scale(1.01) translateX(6px);
    }
    62% {
        transform: scale(1.005) translateX(-3px);
    }
    82% {
        transform: scale(1.002) translateX(3px);
    }
    100% {
        transform: scale(1) translateX(0);
    }
}

@keyframes revealWrongGlow {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 92, 108, 0.0),
            0 18px 36px rgba(255, 92, 108, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(255, 92, 108, 0.12),
            0 28px 70px rgba(255, 92, 108, 0.26),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    100% {
        box-shadow:
            0 0 0 3px rgba(255, 92, 108, 0.10),
            0 24px 60px rgba(255, 92, 108, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@keyframes truthAnswerBurst {
    0% {
        transform: scale(0.9) rotateY(-16deg);
        opacity: 0.72;
        filter: brightness(1);
    }

    58% {
        transform: scale(1.08) rotateY(5deg);
        opacity: 1;
        filter: brightness(1.26);
    }

    100% {
        transform: scale(1) rotateY(0);
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes bluffAnswerCrack {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
        filter: saturate(1);
    }

    28% {
        transform: translateX(-7px) rotate(-0.7deg);
    }

    52% {
        transform: translateX(8px) rotate(0.8deg);
        filter: saturate(0.78);
    }

    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 0.78;
        filter: saturate(0.68);
    }
}

@keyframes revealStageFlip {
    0% {
        opacity: 0;
        transform: translateY(18px) rotateY(-24deg) scale(0.96);
    }

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

@keyframes revealBoardOptionSettle {
    0% {
        opacity: 0.7;
        transform: translateY(8px) scale(0.985);
    }

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

@keyframes revealVoterDrop {
    0% {
        opacity: 0;
        transform: translate3d(0, -78px, 0) rotate(calc(var(--voter-tilt, 0deg) * -2)) scale(0.58);
    }

    68% {
        opacity: 1;
        transform: translate3d(0, 8px, 0) rotate(var(--voter-tilt, 0deg)) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(var(--voter-tilt, 0deg)) scale(1);
    }
}

.reveal-staged-card {
    position: relative;
    overflow: visible;
}

.hidden-stage {
    opacity: 0;
    transform: translateY(14px) rotateY(-12deg) scale(0.98);
    pointer-events: none;
}

.stage-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.32s ease,
        transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
    animation: revealStageFlip 0.42s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.reveal-result-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: clamp(4px, 1vh, 8px) auto clamp(10px, 2vh, 22px);
    padding: clamp(8px, 1.4vh, 12px) clamp(16px, 2vw, 22px);
    border-radius: 999px;
    font-size: clamp(16px, 1.7vw, 22px);
    font-weight: 1000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.14);
    border: 2px solid rgba(255,255,255,0.20);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

.reveal-card.correct .reveal-result-pill {
    color: #07180d;
    background: linear-gradient(135deg, #32e27a 0%, #b8ffd3 100%);
    border-color: rgba(255,255,255,0.38);
    box-shadow:
        0 0 0 4px rgba(50,226,122,0.14),
        0 18px 34px rgba(50,226,122,0.22);
}

.reveal-card.wrong .reveal-result-pill {
    color: #ffffff;
    background: linear-gradient(135deg, #ff5c6c 0%, #d6326e 100%);
    border-color: rgba(255,255,255,0.28);
    box-shadow:
        0 0 0 4px rgba(255,92,108,0.12),
        0 18px 34px rgba(255,92,108,0.22);
}

.reveal-info-section {
    margin-top: clamp(8px, 1.6vh, 18px);
}

.reveal-player.muted {
    opacity: 0.55;
}

.reveal-score-section {
    display: grid;
    gap: clamp(8px, 1.2vh, 12px);
    margin-top: clamp(10px, 2vh, 24px);
    justify-content: center;
}

.score-pop {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
    min-width: min(620px, 90vw);
    padding: clamp(10px, 1.5vh, 16px) clamp(14px, 1.8vw, 20px);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
    border: 2px solid rgba(255,255,255,0.18);
    box-shadow:
        0 14px 28px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.10);
    animation: scorePopIn 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.score-pop:nth-child(2) {
    animation-delay: 0.08s;
}

.score-pop:nth-child(3) {
    animation-delay: 0.16s;
}

.score-pop:nth-child(4) {
    animation-delay: 0.24s;
}

.score-pop-points {
    flex: 0 0 auto;
    min-width: clamp(72px, 8vw, 96px);
    padding: clamp(7px, 1.2vh, 10px) clamp(10px, 1.5vw, 14px);
    border-radius: 18px;
    text-align: center;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 1000;
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    box-shadow:
        0 0 24px rgba(23,105,224,0.24),
        inset 0 1px 0 rgba(255,255,255,0.28);
}

.split-score-pop {
    border-color: rgba(247, 189, 49, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 232, 132, 0.22) 0%, rgba(255,255,255,0.08) 100%);
}

.split-score-pop .score-pop-points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #3f2600;
    background: linear-gradient(135deg, #fff4a8 0%, #f7bd31 100%);
    box-shadow:
        0 0 24px rgba(247, 189, 49, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.44);
}

.score-split-icon {
    font-size: 0.82em;
    line-height: 1;
}

.score-pop-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.score-pop-text strong {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 1000;
    color: #ffffff;
    line-height: 1.1;
}

.score-pop-text span {
    margin-top: 3px;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 800;
    color: var(--text-soft);
}

.score-pop-empty {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 900;
    color: rgba(248,246,255,0.58);
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.10);
}

@keyframes scorePopIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }
    55% {
        opacity: 1;
        transform: translateY(-3px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* player avatars and colors */

.player-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 30px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(135deg, var(--player-color, #7c83fd) 0%, rgba(255,255,255,0.16) 120%);
    border: 3px solid rgba(255,255,255,0.74);
    box-shadow:
        0 7px 0 rgba(32,48,82,0.10),
        0 10px 22px rgba(32,48,82,0.16),
        0 0 22px color-mix(in srgb, var(--player-color, #7c83fd) 42%, transparent);
}

.player-chip {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 76px !important;
    padding: 12px 16px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.72) 100%) !important;
    border: 2px solid color-mix(in srgb, var(--player-color, #7c83fd) 52%, rgba(255,255,255,0.18)) !important;
    box-shadow:
        0 8px 0 rgba(32,48,82,0.08),
        0 12px 22px rgba(32,48,82,0.12),
        0 0 22px color-mix(in srgb, var(--player-color, #7c83fd) 18%, transparent) !important;
}

.player-chip.disconnected {
    opacity: 0.55;
    filter: grayscale(0.35);
}

.player-chip.empty {
    opacity: 0.8;
}

.player-chip-copy {
    min-width: 0;
}

.player-chip-name {
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.05;
    color: var(--text-main);
    word-break: break-word;
}

.player-chip-status {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-soft);
}

.player-chip.host .player-chip-status {
    color: var(--accent);
}

/* intro avatar cards */

.player-visual-card {
    display: flex;
    align-items: center;
    gap: 18px;
}

.intro-avatar {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    font-size: 42px;
}

.intro-player-copy {
    min-width: 0;
}

/* scoreboard avatar */

.score-avatar {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    font-size: 38px;
}

/* phase progress panel */

.progress-panel-wrapper {
    grid-column: 1 / -1;
}

.phase-progress-panel {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 1100px;
    max-height: none;
    margin: 0 auto;
    padding: clamp(18px, 2.6vh, 30px);
    border-radius: 32px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0) 32%),
        linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 100%);
    border: 3px solid var(--panel-border);
    box-shadow:
        0 22px 48px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.10);
    animation: progressPanelIn 0.35s ease both;
    overflow: visible;
}

.phase-progress-panel.compact {
    max-width: 1500px;
    margin-top: clamp(8px, 1.3vh, 12px);
    padding: clamp(12px, 1.8vh, 22px);
}

.phase-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: clamp(10px, 1.6vh, 20px);
}

.phase-progress-title {
    font-size: clamp(24px, 2.8vw, 42px);
    font-weight: 1000;
    line-height: 1.05;
    text-shadow: 0 5px 12px rgba(0,0,0,0.22);
}

.phase-progress-subtitle {
    margin-top: 6px;
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 800;
    color: var(--text-soft);
}

.phase-progress-count {
    flex: 0 0 auto;
    min-width: 130px;
    padding: clamp(8px, 1.3vh, 14px) clamp(12px, 1.5vw, 18px);
    border-radius: 22px;
    text-align: center;
    font-size: clamp(24px, 2.7vw, 34px);
    font-weight: 1000;
    color: var(--accent);
    background: rgba(0,0,0,0.18);
    border: 2px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.phase-progress-bar {
    position: relative;
    width: 100%;
    height: 18px;
    margin-bottom: clamp(12px, 1.8vh, 24px);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,0.20);
    border: 2px solid rgba(255,255,255,0.10);
}

.phase-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
    box-shadow: 0 0 24px rgba(84,242,209,0.28);
    transition: width 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.phase-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(8px, 1.2vw, 16px);
}

.progress-player {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: clamp(9px, 1.3vh, 14px) clamp(10px, 1.3vw, 16px);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 100%);
    border: 2px solid rgba(255,255,255,0.13);
    box-shadow: 0 12px 22px rgba(0,0,0,0.16);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.progress-player.done {
    border-color: color-mix(in srgb, var(--player-color, #7c83fd) 70%, rgba(255,255,255,0.16));
    box-shadow:
        0 16px 28px rgba(0,0,0,0.18),
        0 0 28px color-mix(in srgb, var(--player-color, #7c83fd) 26%, transparent);
    animation: progressDonePulse 0.45s ease both;
}

.progress-player.waiting {
    opacity: 0.72;
}

.progress-player.offline {
    opacity: 0.38;
    filter: grayscale(0.45);
}

.progress-avatar {
    width: clamp(42px, 4.8vw, 56px);
    height: clamp(42px, 4.8vw, 56px);
    border-radius: 18px;
    font-size: clamp(24px, 2.8vw, 32px);
}

.progress-player-copy {
    flex: 1;
    min-width: 0;
}

.progress-player-name {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 1000;
    line-height: 1.05;
    word-break: break-word;
}

.progress-player-status {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 900;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.progress-player.done .progress-player-status {
    color: var(--accent);
}

.progress-check {
    width: clamp(34px, 3.8vw, 46px);
    height: clamp(34px, 3.8vw, 46px);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 1000;
    color: var(--text-main);
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.12);
}

.progress-player.done .progress-check {
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    border-color: rgba(255,255,255,0.30);
}

body.phase-vote .game-options {
    align-content: stretch;
    perspective: 1200px;
}

body.phase-vote .game-option {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

body.phase-vote .game-option.vote-card-transitioning {
    pointer-events: none;
    box-shadow:
        0 18px 0 rgba(32,48,82,0.18),
        0 34px 62px rgba(32,48,82,0.26),
        inset 0 1px 0 rgba(255,255,255,0.38);
}

body.phase-vote .game-option.vote-card-flip-drop {
    filter: drop-shadow(0 16px 18px rgba(32,48,82,0.22));
}

body.phase-vote .game-option.vote-card-fan-spread,
body.phase-vote .game-option.vote-card-stack-shuffle {
    transform-origin: 50% 80%;
}

body.phase-vote .phase-progress-panel.compact {
    max-height: none;
}

body.phase-vote .phase-progress-panel.compact .phase-progress-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.phase-vote .phase-progress-panel.compact .phase-progress-header {
    margin-bottom: 8px;
}

body.phase-vote .phase-progress-panel.compact .phase-progress-subtitle,
body.phase-vote .phase-progress-panel.compact .progress-player-status {
    display: none;
}

body.phase-vote .phase-progress-panel.compact .phase-progress-bar {
    margin-bottom: 10px;
}

body.phase-vote .phase-progress-panel.compact .progress-player {
    padding: 7px 10px;
}

body.phase-fake_answer .phase-progress-panel {
    max-height: none;
}

body.phase-reveal .game-question {
    max-height: none;
    font-size: clamp(26px, 3.2vw, 48px);
}

body.phase-reveal .game-options {
    align-items: center;
}

body.phase-scoreboard .game-question,
body.phase-final .game-question {
    max-height: none;
}

@keyframes progressPanelIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

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

@keyframes progressDonePulse {
    0% {
        transform: scale(0.98);
    }

    45% {
        transform: scale(1.025);
    }

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

@media (max-width: 1100px) {
    .phase-progress-grid {
        grid-template-columns: 1fr;
    }

    .phase-progress-header {
        flex-direction: column;
        align-items: stretch;
    }

    .phase-progress-count {
        width: 100%;
    }
}

.game-option.long-answer-md {
    font-size: clamp(21px, 2.25vw, 30px);
}

.game-option.long-answer-lg {
    font-size: clamp(19px, 2vw, 26px);
    min-height: 0;
}

.game-option.long-answer-xl {
    font-size: clamp(17px, 1.75vw, 23px);
    min-height: 0;
}

.game-option.long-answer-xl .option-text,
.game-option.long-answer-lg .option-text {
    line-height: 1.18;
}

@media (max-width: 1100px) {
    .game-option.long-answer-md {
        font-size: 28px;
    }

    .game-option.long-answer-lg {
        font-size: 24px;
    }

    .game-option.long-answer-xl {
        font-size: 21px;
    }
}

/* non-blocking phase motion */

.phase-motion-sweep {
    position: fixed;
    left: -18vw;
    right: -18vw;
    top: clamp(12px, 2vh, 24px);
    height: clamp(5px, 0.8vh, 10px);
    z-index: 74;
    pointer-events: none;
    border-radius: 999px;
    opacity: 0;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.62));
}

.category-portal-overlay {
    position: fixed;
    inset: 0;
    z-index: 76;
    pointer-events: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.36) 0 8%, color-mix(in srgb, var(--portal-color, #7c83fd) 70%, #00a8ff) 22%, rgba(23,105,224,0.86) 58%, rgba(15,24,59,0.92) 100%);
    opacity: 0;
}

.category-portal-overlay::before,
.category-portal-overlay::after {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        conic-gradient(from 0deg, transparent 0 10deg, rgba(255,255,255,0.32) 12deg 18deg, transparent 20deg 44deg),
        radial-gradient(circle, transparent 0 38%, rgba(255,255,255,0.20) 40%, transparent 43%);
    opacity: 0.52;
    animation: categoryPortalSpin 1.2s linear infinite;
}

.category-portal-overlay::after {
    animation-direction: reverse;
    opacity: 0.32;
    transform: scale(1.18);
}

.category-portal-ring {
    position: absolute;
    width: min(68vw, 820px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: clamp(8px, 1.2vw, 18px) solid rgba(255,255,255,0.64);
    box-shadow:
        0 0 34px color-mix(in srgb, var(--portal-color, #7c83fd) 62%, transparent),
        inset 0 0 38px rgba(255,255,255,0.24);
}

.category-portal-ring.ring-b {
    width: min(46vw, 560px);
    border-style: dashed;
    opacity: 0.78;
}

.category-portal-title {
    position: relative;
    z-index: 1;
    max-width: min(980px, 84vw);
    padding: clamp(18px, 3vh, 34px) clamp(24px, 5vw, 70px);
    border-radius: 34px;
    text-align: center;
    font-size: clamp(48px, 7vw, 112px);
    font-weight: 1000;
    line-height: 0.96;
    text-shadow:
        0 6px 0 rgba(0,0,0,0.16),
        0 20px 38px rgba(0,0,0,0.28);
    background: rgba(255,255,255,0.14);
    border: 3px solid rgba(255,255,255,0.26);
    backdrop-filter: blur(8px);
}

.category-portal-overlay.active {
    animation: categoryPortalFallback 0.92s ease both;
}

.category-portal-fallback {
    animation: categoryPortalHeroFallback 0.62s ease both;
}

/* screen flash and shake */

.screen-flash {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0;
}

.screen-flash.active {
    animation: screenFlashNeutral 0.5s ease both;
}

.screen-flash.correct.active {
    animation: screenFlashCorrect 0.52s ease both;
}

.screen-flash.wrong.active {
    animation: screenFlashWrong 0.42s ease both;
}

.screen-flash.final.active {
    animation: screenFlashFinal 0.7s ease both;
}

body.screen-shake-soft .screen {
    animation: screenShakeSoft 0.38s ease both;
}

body.screen-shake-hard .screen {
    animation: screenShakeHard 0.46s ease both;
}

body.gsap-enhanced .view,
body.gsap-enhanced .game-option,
body.gsap-enhanced .category-choice,
body.gsap-enhanced .category-picker-card,
body.gsap-enhanced .countdown-shell,
body.gsap-enhanced .intro-shell,
body.gsap-enhanced .intro-logo-wrap,
body.gsap-enhanced .intro-divider,
body.gsap-enhanced .intro-player-card,
body.gsap-enhanced .intro-next-cue,
body.gsap-enhanced .reveal-card,
body.gsap-enhanced .reveal-card.correct,
body.gsap-enhanced .reveal-card.wrong,
body.gsap-enhanced .hidden-stage,
body.gsap-enhanced .stage-in,
body.gsap-enhanced .score-pop,
body.gsap-enhanced .score-delta,
body.gsap-enhanced .leaderboard-entry,
body.gsap-enhanced .leaderboard-entry.rank-up,
body.gsap-enhanced .leaderboard-entry.rank-down,
body.gsap-enhanced .leaderboard-entry.combo-hero {
    animation: none !important;
}

/* phase visual moods */

body.phase-fake_answer .bg-orb.orb-1 {
    animation-duration: 8s;
    opacity: 0.72;
}

body.phase-vote .bg-orb.orb-2 {
    animation-duration: 8s;
    opacity: 0.76;
}

body.phase-reveal .bg-grid {
    opacity: 0.5;
    animation: gridPulse 1.2s ease-in-out infinite;
}

body.phase-reveal .ambient-particles span,
body.phase-scoreboard .ambient-particles span,
body.phase-final .ambient-particles span {
    opacity: 0.62;
    animation-duration: 10s;
}

body.phase-final .bg-orb {
    opacity: 0.85;
}

/* stronger entrances */

.view {
    animation: viewCinematicIn 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.game-topbar {
    animation: topbarDropIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.game-question {
    animation: questionCinematicIn 0.56s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.game-option {
    animation: optionBounceIn 0.46s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.score-entry {
    animation: scoreEntryPop 0.46s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.reveal-card {
    animation: revealCardCinematicIn 0.54s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* add a little movement to active cards */

.game-option:hover {
    transform: translateY(-2px) scale(1.01);
}

.reveal-card.correct {
    animation:
        revealCorrectPop 0.52s cubic-bezier(0.2, 0.9, 0.2, 1),
        revealCorrectGlow 1.1s ease-out,
        correctMicroBounce 0.7s ease;
}

.reveal-card.wrong {
    animation:
        revealWrongPop 0.48s cubic-bezier(0.2, 0.9, 0.2, 1),
        revealWrongGlow 1s ease-out,
        wrongWobble 0.46s ease;
}

/* keyframes */

@keyframes phaseOverlayIn {
    0% {
        opacity: 0;
        transform: scale(1.06);
    }

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

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

    100% {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes phaseCardIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.88) rotate(-1deg);
    }

    55% {
        opacity: 1;
        transform: translateY(-4px) scale(1.025) rotate(0.4deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes phaseSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes phaseShine {
    0% {
        transform: translateX(-140%);
    }

    55% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes categoryPortalSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes categoryPortalFallback {
    0% {
        opacity: 0;
        clip-path: circle(4% at 50% 50%);
    }

    42% {
        opacity: 1;
        clip-path: circle(145% at 50% 50%);
    }

    72% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        clip-path: circle(145% at 50% 50%);
    }
}

@keyframes categoryPortalHeroFallback {
    0% {
        transform: scale(0.74) rotateX(-10deg);
        filter: brightness(1.24) saturate(1.22);
    }

    100% {
        transform: scale(1) rotateX(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes screenFlashNeutral {
    0% {
        opacity: 0;
        background: rgba(255,255,255,0);
    }

    24% {
        opacity: 1;
        background: rgba(255,255,255,0.16);
    }

    100% {
        opacity: 0;
        background: rgba(255,255,255,0);
    }
}

@keyframes screenFlashCorrect {
    0% {
        opacity: 0;
        background: rgba(50,226,122,0);
    }

    22% {
        opacity: 1;
        background: rgba(50,226,122,0.20);
    }

    100% {
        opacity: 0;
        background: rgba(50,226,122,0);
    }
}

@keyframes screenFlashWrong {
    0% {
        opacity: 0;
        background: rgba(255,93,115,0);
    }

    26% {
        opacity: 1;
        background: rgba(255,93,115,0.18);
    }

    100% {
        opacity: 0;
        background: rgba(255,93,115,0);
    }
}

@keyframes screenFlashFinal {
    0% {
        opacity: 0;
        background: rgba(23,105,224,0);
    }

    25% {
        opacity: 1;
        background: rgba(23,105,224,0.20);
    }

    60% {
        opacity: 1;
        background: rgba(255,77,141,0.12);
    }

    100% {
        opacity: 0;
        background: rgba(23,105,224,0);
    }
}

@keyframes screenShakeSoft {
    0%, 100% {
        transform: translateX(0);
    }

    18% {
        transform: translateX(-8px) rotate(-0.25deg);
    }

    38% {
        transform: translateX(7px) rotate(0.22deg);
    }

    58% {
        transform: translateX(-4px) rotate(-0.12deg);
    }

    78% {
        transform: translateX(3px) rotate(0.08deg);
    }
}

@keyframes screenShakeHard {
    0%, 100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-16px) rotate(-0.45deg);
    }

    35% {
        transform: translateX(14px) rotate(0.42deg);
    }

    55% {
        transform: translateX(-9px) rotate(-0.22deg);
    }

    75% {
        transform: translateX(6px) rotate(0.14deg);
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.36;
        transform: scale(1);
    }

    50% {
        opacity: 0.56;
        transform: scale(1.015);
    }
}

@keyframes viewCinematicIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes topbarDropIn {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.98);
    }

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

@keyframes questionCinematicIn {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
        filter: blur(5px);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.015);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes questionRevealIn {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.94);
        filter: blur(10px);
        text-shadow: 0 0 0 rgba(255,255,255,0);
    }

    48% {
        opacity: 1;
        transform: translateY(-6px) scale(1.025);
        filter: blur(0);
        text-shadow:
            0 5px 0 rgba(255,255,255,0.82),
            0 0 26px rgba(0,194,255,0.28);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        text-shadow: 0 5px 0 rgba(255,255,255,0.80);
    }
}

@keyframes poemLineReveal {
    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes optionBounceIn {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(0.92) rotate(-0.6deg);
        filter: blur(5px);
    }

    58% {
        opacity: 1;
        transform: translateY(-4px) scale(1.025) rotate(0.2deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes scoreEntryPop {
    0% {
        opacity: 0;
        transform: translateX(-24px) scale(0.94);
    }

    60% {
        opacity: 1;
        transform: translateX(4px) scale(1.02);
    }

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

@keyframes revealCardCinematicIn {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.92);
        filter: blur(6px);
    }

    58% {
        opacity: 1;
        transform: translateY(-5px) scale(1.02);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes correctMicroBounce {
    0% {
        transform: scale(1);
    }

    36% {
        transform: scale(1.035);
    }

    68% {
        transform: scale(0.992);
    }

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

@keyframes wrongWobble {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }

    20% {
        transform: translateX(-10px) rotate(-0.8deg);
    }

    40% {
        transform: translateX(8px) rotate(0.65deg);
    }

    60% {
        transform: translateX(-5px) rotate(-0.35deg);
    }

    80% {
        transform: translateX(3px) rotate(0.2deg);
    }
}

/* TV readability upgrades */

.display-control-stack {
    position: fixed;
    top: auto;
    left: clamp(12px, 1.6vw, 22px);
    bottom: clamp(12px, 1.8vh, 24px);
    z-index: 90;
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 0.8vw, 12px);
}

.fullscreen-btn,
.options-btn {
    width: clamp(46px, 4.4vw, 62px);
    height: clamp(46px, 4.4vw, 62px);
    display: grid;
    place-items: center;
    border: 3px solid rgba(32, 48, 82, 0.14);
    border-radius: 18px;
    color: #203052;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(32, 48, 82, 0.18);
    font: inherit;
    font-size: clamp(24px, 2.7vw, 34px);
    font-weight: 1000;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: transform 0.16s ease, background 0.16s ease;
}

.fullscreen-btn:hover,
.options-btn:hover {
    transform: translateY(-2px) scale(1.04);
    background: rgba(255, 255, 255, 0.96);
}

.fullscreen-btn.active,
.options-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
}

.options-panel {
    position: absolute;
    top: auto;
    left: 0;
    bottom: calc(clamp(46px, 4.4vw, 62px) + 12px);
    width: min(430px, calc(100vw - 28px));
    padding: 18px;
    border-radius: 22px;
    color: #203052;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid rgba(32, 48, 82, 0.14);
    box-shadow: 0 18px 36px rgba(32, 48, 82, 0.20);
    backdrop-filter: blur(14px);
}

.options-panel-title {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 1000;
    line-height: 1;
    text-align: right;
}

.options-section {
    padding: 14px 0;
    border-top: 2px solid rgba(32, 48, 82, 0.08);
}

.options-section:first-of-type {
    border-top: 0;
    padding-top: 4px;
}

.options-section-title {
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 1000;
    line-height: 1;
    text-align: right;
}

.timer-control {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.timer-control:first-of-type {
    margin-top: 0;
}

.timer-control-label {
    font-size: 15px;
    font-weight: 900;
    text-align: right;
}

.timer-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.timer-choice {
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border: 2px solid rgba(32, 48, 82, 0.12);
    border-radius: 14px;
    color: #203052;
    background: rgba(255, 255, 255, 0.66);
    box-shadow:
        0 5px 0 rgba(32, 48, 82, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    font: inherit;
    font-size: 16px;
    font-weight: 1000;
    cursor: pointer;
    transition:
        transform 0.14s ease,
        background 0.14s ease,
        border-color 0.14s ease,
        box-shadow 0.14s ease;
}

.timer-choice:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.90);
}

.timer-choice.active {
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow:
        0 5px 0 rgba(23, 105, 224, 0.28),
        0 10px 18px rgba(23, 105, 224, 0.18);
}

.volume-row {
    display: grid;
    gap: 10px;
    padding: 12px 0;
    border-top: 2px solid rgba(32, 48, 82, 0.08);
}

.volume-row:first-of-type {
    border-top: 0;
}

.volume-copy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    direction: ltr;
}

.volume-name,
.volume-value {
    font-size: 16px;
    font-weight: 900;
}

.volume-value {
    min-width: 46px;
    text-align: right;
    color: var(--primary);
}

.volume-row input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
    direction: ltr;
    cursor: pointer;
}

.game-question {
    font-size: clamp(38px, 5vw, 78px);
    line-height: 1.05;
}

.game-question.question-long {
    font-size: clamp(32px, 4.15vw, 62px);
}

.game-question.question-xl {
    font-size: clamp(27px, 3.45vw, 52px);
}

body.phase-fake_answer_intro .game-question,
body.phase-fake_answer .game-question,
body.phase-vote_intro .game-question {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin-bottom: clamp(14px, 2.2vh, 26px);
    font-size: clamp(46px, 6.2vw, 92px);
}

body.phase-start_countdown .game-question {
    flex: 0 0 auto;
    font-size: clamp(140px, 18vw, 270px);
    line-height: 0.9;
    margin: clamp(10px, 2vh, 22px) 0;
    color: #f8f1c9;
    text-shadow:
        0 8px 0 rgba(55, 26, 84, 0.65),
        0 0 34px rgba(255, 211, 91, 0.7);
}

body.phase-fake_answer_intro .game-question.question-long,
body.phase-fake_answer .game-question.question-long,
body.phase-vote_intro .game-question.question-long {
    font-size: clamp(38px, 4.9vw, 72px);
}

body.phase-fake_answer_intro .game-question.question-xl,
body.phase-fake_answer .game-question.question-xl,
body.phase-vote_intro .game-question.question-xl {
    font-size: clamp(31px, 4vw, 58px);
}

body.phase-fake_answer .game-options {
    flex: 0 0 auto;
    display: block;
}

body.phase-vote .game-option {
    min-height: clamp(128px, 16vh, 210px);
    font-size: clamp(30px, 3.15vw, 46px);
}

body.phase-vote .game-option.long-answer-md {
    font-size: clamp(27px, 2.7vw, 40px);
}

body.phase-vote .game-option.long-answer-lg {
    font-size: clamp(24px, 2.35vw, 34px);
}

body.phase-vote .game-option.long-answer-xl {
    font-size: clamp(21px, 2.05vw, 30px);
}

body.phase-reveal .reveal-answer {
    font-size: clamp(29px, 3.65vw, 53px);
}

.submission-strip {
    grid-column: 1 / -1;
    width: min(980px, 100%);
    margin: 0 auto;
    padding: clamp(8px, 1.1vh, 14px) clamp(10px, 1.4vw, 18px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "count avatars"
        "meter meter";
    align-items: center;
    gap: clamp(8px, 1.1vw, 14px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.34);
    border: 2px solid rgba(32, 48, 82, 0.10);
    box-shadow: 0 12px 24px rgba(32, 48, 82, 0.12);
    backdrop-filter: blur(10px);
    animation: progressPanelIn 0.28s ease both;
}

.submission-strip.compact {
    width: min(1180px, 100%);
    margin-top: clamp(6px, 1vh, 12px);
}

.submission-counter {
    grid-area: count;
    min-width: clamp(78px, 7vw, 110px);
    padding: 8px 12px;
    border-radius: 18px;
    text-align: center;
    font-size: clamp(25px, 2.6vw, 38px);
    font-weight: 1000;
    color: #203052;
    background: rgba(255, 255, 255, 0.72);
    border: 2px solid rgba(32, 48, 82, 0.10);
}

.submission-avatars {
    grid-area: avatars;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
}

.submission-player,
.submission-slot {
    animation: submissionPop 0.3s cubic-bezier(0.2, 0.9, 0.2, 1) both;
    animation-delay: var(--submission-delay, 0s);
}

.submission-avatar {
    width: clamp(56px, 5.4vw, 78px);
    height: clamp(56px, 5.4vw, 78px);
    border-radius: 24px;
    font-size: clamp(32px, 3.4vw, 46px);
}

.submission-slot {
    width: clamp(32px, 3.4vw, 48px);
    height: clamp(32px, 3.4vw, 48px);
    border-radius: 999px;
    background: rgba(32, 48, 82, 0.10);
    border: 2px dashed rgba(32, 48, 82, 0.16);
}

.submission-meter {
    grid-area: meter;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(32, 48, 82, 0.12);
}

.submission-meter-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
    transition: width 0.25s ease;
}

body.phase-scoreboard #scoreboardList {
    display: block;
}

.leaderboard-list {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vh, 18px);
}

.leaderboard-entry {
    min-height: clamp(92px, 11.5vh, 138px);
    padding: clamp(16px, 2vh, 24px) clamp(18px, 2.2vw, 30px);
    border-radius: 26px;
    gap: clamp(14px, 1.8vw, 24px);
}

.leaderboard-entry.rank-up {
    animation: leaderboardRise 0.62s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.leaderboard-entry.rank-down {
    animation: leaderboardSettle 0.56s ease both;
}

.leaderboard-entry.combo-hero {
    border-color: rgba(245, 166, 35, 0.76);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 238, 166, 0.78) 0 12%, transparent 34%),
        linear-gradient(135deg, rgba(255, 248, 222, 0.98) 0%, rgba(255, 220, 122, 0.88) 52%, rgba(255, 255, 255, 0.82) 100%);
    box-shadow:
        0 0 0 4px rgba(245, 166, 35, 0.15),
        0 18px 40px rgba(122, 75, 12, 0.20),
        0 0 46px rgba(245, 166, 35, 0.42),
        inset 0 1px 0 rgba(255,255,255,0.78);
    animation:
        leaderboardHeroJump 0.78s cubic-bezier(0.2, 1.35, 0.32, 1) both,
        heroAuraPulse 1.6s ease-in-out 0.7s infinite;
    overflow: hidden;
}

.leaderboard-entry.combo-hero .score-avatar,
.leaderboard-entry.combo-hero .score-rank {
    box-shadow:
        0 0 0 4px rgba(255,255,255,0.48),
        0 0 28px rgba(245, 166, 35, 0.55);
}

.combo-hero-label {
    padding: 6px 11px;
    border-radius: 999px;
    color: #4c2a00;
    background: linear-gradient(135deg, #fff2a8 0%, #f5a623 100%);
    font-size: clamp(13px, 1.25vw, 17px);
    font-weight: 1000;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(245, 166, 35, 0.24);
}

.split-bonus-entry {
    border-color: rgba(247, 189, 49, 0.56);
    box-shadow:
        0 9px 0 rgba(32,48,82,0.09),
        0 18px 30px rgba(32,48,82,0.14),
        0 0 32px rgba(247, 189, 49, 0.18);
}

.split-bonus-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #3f2600;
    background: linear-gradient(135deg, #fff4a8 0%, #f7bd31 100%);
    font-size: clamp(12px, 1.15vw, 16px);
    font-weight: 1000;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(247, 189, 49, 0.22);
}

.coin-shower {
    position: absolute;
    inset: -24px 0 0;
    pointer-events: none;
    overflow: hidden;
}

.coin-shower span {
    position: absolute;
    top: -18px;
    width: clamp(12px, 1.2vw, 18px);
    height: clamp(12px, 1.2vw, 18px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, #fff7c7 0 14%, #f8c649 28% 58%, #a86b12 76% 100%);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.48);
    animation: coinFall 1.6s linear infinite;
}

.coin-shower span:nth-child(1) { left: 10%; animation-delay: 0s; }
.coin-shower span:nth-child(2) { left: 26%; animation-delay: 0.22s; }
.coin-shower span:nth-child(3) { left: 42%; animation-delay: 0.08s; }
.coin-shower span:nth-child(4) { left: 58%; animation-delay: 0.34s; }
.coin-shower span:nth-child(5) { left: 74%; animation-delay: 0.14s; }
.coin-shower span:nth-child(6) { left: 88%; animation-delay: 0.46s; }

.leaderboard-entry .score-rank {
    width: clamp(70px, 6.8vw, 94px);
    height: clamp(70px, 6.8vw, 94px);
    border-radius: 26px;
    font-size: clamp(28px, 3vw, 42px);
}

.leaderboard-entry .score-avatar {
    width: clamp(70px, 6.8vw, 96px);
    height: clamp(70px, 6.8vw, 96px);
    border-radius: 28px;
    font-size: clamp(40px, 4.2vw, 58px);
}

.leaderboard-entry .score-name {
    font-size: clamp(30px, 3.4vw, 48px);
}

.leaderboard-entry .score-points {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 1000;
    color: #203052;
}

.leaderboard-entry .score-fake-answer {
    max-width: min(620px, 54vw);
    font-size: clamp(15px, 1.55vw, 22px);
}

.score-value {
    color: var(--primary);
    font-size: 1.22em;
    line-height: 1;
}

.score-side {
    min-width: clamp(82px, 9vw, 132px);
    display: grid;
    justify-items: center;
    gap: 6px;
}

.score-delta,
.rank-delta {
    border-radius: 999px;
    font-weight: 1000;
    white-space: nowrap;
}

.score-delta {
    padding: 8px 14px;
    font-size: clamp(22px, 2.4vw, 34px);
    color: #ffffff;
    background: linear-gradient(135deg, #1769e0 0%, #00a8ff 100%);
    box-shadow: 0 10px 20px rgba(23, 105, 224, 0.22);
    animation: scoreDeltaPop 0.45s ease both;
}

.score-delta.split-delta {
    color: #3f2600;
    background: linear-gradient(135deg, #fff4a8 0%, #f7bd31 100%);
    box-shadow: 0 10px 20px rgba(247, 189, 49, 0.24);
}

.rank-delta {
    padding: 6px 10px;
    font-size: clamp(14px, 1.4vw, 19px);
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.58);
}

body.phase-scoreboard .game-question {
    margin-bottom: clamp(10px, 1.6vh, 18px);
    font-size: clamp(34px, 4vw, 58px);
}

@keyframes submissionPop {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.78);
    }

    72% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08);
    }

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

@keyframes scoreDeltaPop {
    0% {
        opacity: 0;
        transform: scale(0.76);
    }

    70% {
        opacity: 1;
        transform: scale(1.12);
    }

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

@keyframes leaderboardRise {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.96);
    }

    65% {
        opacity: 1;
        transform: translateY(-8px) scale(1.025);
    }

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

@keyframes leaderboardSettle {
    0% {
        opacity: 0.72;
        transform: translateY(-20px) scale(0.98);
    }

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

@keyframes leaderboardHeroJump {
    0% {
        opacity: 0;
        transform: translateY(42px) scale(0.94);
    }

    54% {
        opacity: 1;
        transform: translateY(-18px) scale(1.045);
    }

    76% {
        transform: translateY(5px) scale(0.992);
    }

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

@keyframes heroAuraPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(245, 166, 35, 0.14),
            0 18px 40px rgba(122, 75, 12, 0.18),
            0 0 38px rgba(245, 166, 35, 0.34),
            inset 0 1px 0 rgba(255,255,255,0.78);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(245, 166, 35, 0.20),
            0 22px 48px rgba(122, 75, 12, 0.24),
            0 0 64px rgba(245, 166, 35, 0.56),
            inset 0 1px 0 rgba(255,255,255,0.86);
    }
}

@keyframes coinFall {
    0% {
        transform: translate3d(0, -20px, 0) rotateY(0deg);
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    100% {
        transform: translate3d(18px, 180px, 0) rotateY(720deg);
        opacity: 0;
    }
}

/* reduce motion support */

@media (prefers-reduced-motion: reduce) {
    .phase-motion-sweep,
    .screen,
    .view,
    .game-topbar,
    .game-question,
    .game-option,
    .score-entry,
    .submission-strip,
    .submission-player,
    .submission-slot,
    .score-delta,
    .reveal-card,
    .big-timer,
    .category-portal-overlay,
    .category-portal-overlay::before,
    .category-portal-overlay::after,
    .category-portal-ring,
    .bg-grid,
    .bg-orb,
    .ambient-particles span,
    .coin-shower span,
    .combo-hero {
        animation: none !important;
        transition: none !important;
    }
}