/* ═══════════════════════════════════════════════════════════════
   BLUFF THEME — "صيدهم" Premium Visual Overhaul
   Scope: body.bluff-page ONLY  (loads after game-themes.css)
   Palette: Royal Purple + Gold + Emerald + Crimson
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page {
    --bluff-bg-1: #0a0620;
    --bluff-bg-2: #1a0b3d;
    --bluff-bg-3: #2b0a4a;
    --bluff-bg-4: #050318;

    --bluff-purple: #8b5cf6;
    --bluff-purple-deep: #6d28d9;
    --bluff-purple-dark: #4c1d95;
    --bluff-indigo: #4338ca;

    --bluff-gold: #fbbf24;
    --bluff-gold-warm: #f59e0b;
    --bluff-gold-glow: rgba(251, 191, 36, 0.55);

    --bluff-emerald: #10b981;
    --bluff-emerald-deep: #059669;

    --bluff-crimson: #ef4444;
    --bluff-crimson-deep: #b91c1c;

    --bluff-glass: rgba(255, 255, 255, 0.06);
    --bluff-glass-border: rgba(255, 255, 255, 0.12);
    --bluff-glass-strong: rgba(255, 255, 255, 0.10);

    --bluff-text: #f5f3ff;
    --bluff-muted: rgba(245, 243, 255, 0.68);
    --bluff-dim: rgba(245, 243, 255, 0.42);

    --bluff-shadow-soft: 0 12px 32px rgba(76, 29, 149, 0.28);
    --bluff-shadow-lift: 0 24px 60px rgba(10, 6, 32, 0.55);
    --bluff-shadow-glow: 0 0 40px rgba(139, 92, 246, 0.35);

    --bluff-ease: cubic-bezier(0.22, 0.94, 0.28, 1);
    --bluff-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    color: var(--bluff-text);

    background:
        radial-gradient(ellipse at 15% 12%, rgba(139, 92, 246, 0.28), transparent 42%),
        radial-gradient(ellipse at 85% 18%, rgba(251, 191, 36, 0.15), transparent 40%),
        radial-gradient(ellipse at 50% 92%, rgba(67, 56, 202, 0.30), transparent 46%),
        radial-gradient(ellipse at 8% 88%, rgba(16, 185, 129, 0.10), transparent 38%),
        linear-gradient(135deg, var(--bluff-bg-1) 0%, var(--bluff-bg-2) 42%, var(--bluff-bg-4) 100%);
    background-attachment: fixed;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

/* ── Animated Aurora / Floating Orbs (decorative, non-interactive) ── */
body.bluff-page::before,
body.bluff-page::after {
    content: "";
    position: fixed;
    inset: -20% -10%;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
}

body.bluff-page::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.35), transparent 25%),
        radial-gradient(circle at 78% 66%, rgba(251, 191, 36, 0.20), transparent 22%),
        radial-gradient(circle at 55% 20%, rgba(67, 56, 202, 0.28), transparent 24%);
    filter: blur(60px);
    opacity: 0.75;
    animation: bluffAuroraDrift 22s ease-in-out infinite alternate;
}

body.bluff-page::after {
    background:
        radial-gradient(circle at 70% 15%, rgba(139, 92, 246, 0.22), transparent 18%),
        radial-gradient(circle at 25% 78%, rgba(251, 191, 36, 0.18), transparent 20%),
        radial-gradient(circle at 82% 88%, rgba(16, 185, 129, 0.16), transparent 22%);
    filter: blur(80px);
    opacity: 0.6;
    animation: bluffAuroraDrift2 28s ease-in-out infinite alternate;
}

@keyframes bluffAuroraDrift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.75; }
    50%  { transform: translate(4%, -3%) scale(1.08); opacity: 0.88; }
    100% { transform: translate(-3%, 5%) scale(0.96); opacity: 0.68; }
}

@keyframes bluffAuroraDrift2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50%  { transform: translate(-5%, 4%) scale(1.10); opacity: 0.72; }
    100% { transform: translate(4%, -4%) scale(0.94); opacity: 0.50; }
}

@media (prefers-reduced-motion: reduce) {
    body.bluff-page::before,
    body.bluff-page::after {
        animation: none;
    }
}

body.bluff-page main.app-shell,
body.bluff-page .view {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   BRAND / TITLE PANEL — dramatic entrance
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .brand-panel.game-title-panel {
    position: relative;
    border-radius: 22px;
    border: 2px solid rgba(251, 191, 36, 0.42);
    padding: clamp(20px, 5vw, 34px) clamp(16px, 4vw, 28px);
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.20), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(251, 191, 36, 0.30), transparent 45%),
        linear-gradient(135deg, var(--bluff-purple-dark) 0%, var(--bluff-purple-deep) 45%, var(--bluff-indigo) 100%);
    box-shadow:
        0 0 0 6px rgba(251, 191, 36, 0.10),
        0 30px 70px rgba(10, 6, 32, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    overflow: hidden;
    animation: bluffPanelIn 0.7s var(--bluff-ease) both;
}

body.bluff-page .brand-panel.game-title-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--bluff-gold), var(--bluff-purple), var(--bluff-gold-warm), var(--bluff-purple), var(--bluff-gold));
    background-size: 200% 100%;
    border-radius: 22px 22px 0 0;
    animation: bluffGoldStrip 6s linear infinite;
}

@keyframes bluffGoldStrip {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

body.bluff-page .brand-panel.game-title-panel h1 {
    margin: 0;
    color: #fff;
    font-family: 'Cairo', Arial, sans-serif;
    font-size: clamp(2.6rem, 9vw, 6.5rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.45),
        0 6px 22px rgba(251, 191, 36, 0.42),
        0 0 60px rgba(139, 92, 246, 0.55);
    animation: bluffTitleGlow 3.6s ease-in-out infinite alternate;
}

@keyframes bluffTitleGlow {
    from { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 6px 22px rgba(251, 191, 36, 0.32), 0 0 40px rgba(139, 92, 246, 0.42); }
    to   { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 8px 30px rgba(251, 191, 36, 0.58), 0 0 80px rgba(139, 92, 246, 0.70); }
}

body.bluff-page .brand-panel.game-title-panel .game-seo-subtitle {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
    font-size: clamp(0.9rem, 3.4vw, 1.1rem);
    margin-top: 8px;
    line-height: 1.5;
    max-width: 46ch;
}

body.bluff-page .back-link,
body.bluff-page .game-back-link {
    border-radius: 12px;
    padding: 8px 16px;
    color: #fff;
    background: rgba(10, 6, 32, 0.42);
    border: 1.5px solid rgba(251, 191, 36, 0.40);
    font-weight: 900;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.24s var(--bluff-ease);
}

body.bluff-page .back-link:hover,
body.bluff-page .game-back-link:hover {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.78);
    color: var(--bluff-gold);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   JOIN PANEL — glassmorphism
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .join-panel {
    border-radius: 18px;
    border: 1.5px solid var(--bluff-glass-border);
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(67, 56, 202, 0.06)),
        var(--bluff-glass);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow:
        0 20px 50px rgba(10, 6, 32, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    padding: clamp(14px, 3vw, 22px);
    animation: bluffPanelIn 0.7s var(--bluff-ease) 0.08s both;
}

/* ── Compact Join View: fit viewport, no scroll ── */
body.bluff-page .join-view {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    min-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom)));
    align-content: start;
}

body.bluff-page .join-view .brand-panel.game-title-panel {
    padding: clamp(14px, 3.5vw, 22px) clamp(14px, 3.5vw, 22px);
}

body.bluff-page .join-view .brand-panel.game-title-panel h1 {
    font-size: clamp(2rem, 8vw, 4.2rem);
    line-height: 1;
    margin: 0;
}

body.bluff-page .join-view .brand-panel.game-title-panel .game-seo-subtitle {
    font-size: clamp(0.82rem, 3vw, 0.98rem);
    margin-top: 6px;
    line-height: 1.4;
}

body.bluff-page .join-view .join-panel {
    align-self: center;
    width: 100%;
}

body.bluff-page .join-view .home-actions {
    gap: 12px;
}

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

body.bluff-page .home-actions {
    display: grid;
    gap: 14px;
}

body.bluff-page .home-action {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 64px;
    border-radius: 14px;
    padding: 12px 20px;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    font-weight: 900;
    letter-spacing: 0.01em;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.24s var(--bluff-ease-back), box-shadow 0.24s var(--bluff-ease), filter 0.24s ease;
    will-change: transform;
}

body.bluff-page .home-action::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s var(--bluff-ease);
    pointer-events: none;
}

body.bluff-page .home-action:hover::before {
    transform: translateX(120%);
}

body.bluff-page .home-action.create {
    color: #fff;
    border: 1.5px solid rgba(251, 191, 36, 0.45);
    background:
        radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.22), transparent 45%),
        linear-gradient(135deg, var(--bluff-purple-dark), var(--bluff-purple-deep) 52%, var(--bluff-purple));
    box-shadow:
        0 10px 24px rgba(76, 29, 149, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.bluff-page .home-action.join {
    color: #1a0b3d;
    border: 1.5px solid rgba(180, 83, 9, 0.55);
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.32), transparent 45%),
        linear-gradient(135deg, var(--bluff-gold-warm), var(--bluff-gold) 52%, #fde68a);
    box-shadow:
        0 10px 24px rgba(251, 191, 36, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.bluff-page .home-action:hover {
    transform: translateY(-2px);
    filter: saturate(1.1) brightness(1.04);
}

body.bluff-page .home-action.create:hover {
    box-shadow:
        0 16px 34px rgba(76, 29, 149, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 24px rgba(139, 92, 246, 0.38);
}

body.bluff-page .home-action.join:hover {
    box-shadow:
        0 16px 34px rgba(251, 191, 36, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 24px rgba(251, 191, 36, 0.42);
}

body.bluff-page .home-action:active {
    transform: translateY(1px);
    transition-duration: 0.08s;
}

/* ── Join Form ── */
body.bluff-page .join-form {
    display: grid;
    gap: 12px;
    animation: bluffPanelIn 0.4s var(--bluff-ease) both;
}

/* Hide the redundant back button above "اسمك" — user already has the top "الرجوع" link */
body.bluff-page .join-form #backToHomeButton,
body.bluff-page .join-form > .back-button {
    display: none !important;
}

body.bluff-page .join-form label,
body.bluff-page .join-panel label {
    color: var(--bluff-text);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

body.bluff-page .join-form input,
body.bluff-page .join-panel input {
    min-height: 52px;
    padding: 0 16px;
    background: rgba(10, 6, 32, 0.42);
    border: 1.5px solid rgba(139, 92, 246, 0.32);
    border-radius: 12px;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    transition: all 0.24s var(--bluff-ease);
}

body.bluff-page .join-form input::placeholder {
    color: var(--bluff-dim);
    font-weight: 700;
}

body.bluff-page .join-form input:focus,
body.bluff-page .join-panel input:focus {
    outline: none;
    border-color: var(--bluff-gold);
    background: rgba(10, 6, 32, 0.62);
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22), 0 6px 18px rgba(251, 191, 36, 0.18);
}

body.bluff-page .back-button {
    justify-self: start;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--bluff-muted);
    background: rgba(10, 6, 32, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 900;
    font-size: 0.88rem;
    transition: all 0.2s var(--bluff-ease);
}

body.bluff-page .back-button:hover {
    color: #fff;
    background: rgba(139, 92, 246, 0.20);
    border-color: rgba(139, 92, 246, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   PRIMARY ACTION BUTTONS — premium 3D
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .primary-action {
    position: relative;
    min-height: 56px;
    border: 0;
    border-radius: 14px;
    padding: 12px 24px;
    color: #1a0b3d;
    font-family: 'Cairo', sans-serif;
    font-weight: 1000;
    font-size: clamp(1rem, 3.8vw, 1.2rem);
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--bluff-gold-warm), var(--bluff-gold) 55%, #fde68a);
    box-shadow:
        0 6px 0 #b45309,
        0 14px 30px rgba(251, 191, 36, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.22s var(--bluff-ease-back), box-shadow 0.22s var(--bluff-ease), filter 0.22s ease;
    will-change: transform;
}

body.bluff-page .primary-action::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.55s var(--bluff-ease);
    pointer-events: none;
}

body.bluff-page .primary-action:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: saturate(1.1) brightness(1.05);
    box-shadow:
        0 9px 0 #b45309,
        0 20px 40px rgba(251, 191, 36, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 0 28px rgba(251, 191, 36, 0.38);
}

body.bluff-page .primary-action:hover:not(:disabled)::before {
    transform: translateX(120%);
}

body.bluff-page .primary-action:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow:
        0 2px 0 #b45309,
        0 6px 12px rgba(251, 191, 36, 0.32);
    transition-duration: 0.08s;
}

body.bluff-page .primary-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* ═══════════════════════════════════════════════════════════════
   GAME HEADER
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .game-header {
    border-radius: 16px;
    border: 1.5px solid rgba(139, 92, 246, 0.32);
    background:
        linear-gradient(135deg, rgba(76, 29, 149, 0.48), rgba(10, 6, 32, 0.62));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 12px 32px rgba(10, 6, 32, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 10px 14px;
}

body.bluff-page .game-header h1 {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(139, 92, 246, 0.55);
}

body.bluff-page .game-header .lead {
    color: var(--bluff-muted);
}

body.bluff-page .home-button {
    border: 1.5px solid rgba(251, 191, 36, 0.55);
    border-radius: 12px;
    padding: 8px 14px;
    color: var(--bluff-gold);
    background: rgba(10, 6, 32, 0.42);
    font-weight: 900;
    transition: all 0.24s var(--bluff-ease);
}

body.bluff-page .home-button:hover {
    background: rgba(251, 191, 36, 0.16);
    color: #fff;
    border-color: rgba(251, 191, 36, 0.88);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.28);
}

body.bluff-page .round-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(10, 6, 32, 0.55);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

body.bluff-page .round-meter div {
    height: 100%;
    background: linear-gradient(90deg, var(--bluff-purple), var(--bluff-gold), var(--bluff-purple));
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.55), 0 0 6px rgba(251, 191, 36, 0.42);
    transition: width 0.4s var(--bluff-ease);
    animation: bluffMeterShine 3s linear infinite;
}

@keyframes bluffMeterShine {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAY PANEL — main game container
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .play-panel {
    border-radius: 22px;
    border: 1.5px solid rgba(139, 92, 246, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 255, 0.98));
    box-shadow:
        0 30px 60px rgba(10, 6, 32, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    padding: clamp(16px, 4vw, 24px);
    /* Use opacity-only fade — a transform-based animation creates a containing block
       that traps the full-screen ::before urgent flash inside the panel. */
    animation: bluffFadeIn 0.5s var(--bluff-ease) both;
}

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

/* ═══════════════════════════════════════════════════════════════
   ROOM CODE DISPLAY
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .turn-label {
    color: var(--bluff-purple-deep);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 10px;
}

/* Remove the dashed box around the room code — keep icons + number in a clean row */
body.bluff-page .room-code-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    max-width: 100%;
    margin: 6px auto 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

body.bluff-page .room-code-actions .big-code,
body.bluff-page .big-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bluff-purple-dark);
    font-family: 'Cairo', 'Consolas', monospace;
    font-size: clamp(2.2rem, 8vw, 3.6rem);
    font-weight: 1000;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 6px rgba(139, 92, 246, 0.28);
    animation: none;
}

/* Restore original icon-button dimensions so the ::before / ::after icons stay aligned */
body.bluff-page .room-icon-button {
    position: relative;
    display: grid;
    place-items: start center;
    flex: 0 0 auto;
    width: 58px;
    min-height: 54px;
    padding: 0;
    border: 1.5px solid rgba(139, 92, 246, 0.32);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(67, 56, 202, 0.06));
    color: var(--bluff-purple-deep);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.22s var(--bluff-ease), color 0.22s var(--bluff-ease),
                border-color 0.22s var(--bluff-ease), transform 0.22s var(--bluff-ease-back),
                box-shadow 0.22s var(--bluff-ease);
}

body.bluff-page .room-icon-button:hover {
    background: linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo));
    border-color: var(--bluff-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(139, 92, 246, 0.42), 0 0 20px rgba(251, 191, 36, 0.28);
}

body.bluff-page .room-icon-button:active {
    transform: translateY(0);
}

/* Hide the redundant instruction line (e.g. "اختر الفئات والوقت ثم ابدأ اللعبة") */
body.bluff-page #waitingNote {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOST CONTROLS
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .host-controls {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(251, 191, 36, 0.04));
    border: 1.5px dashed rgba(139, 92, 246, 0.28);
}

body.bluff-page .host-controls label {
    color: var(--bluff-purple-deep);
    font-weight: 900;
    font-size: 0.9rem;
}

body.bluff-page .host-controls select {
    min-height: 46px;
    padding: 0 14px;
    border: 1.5px solid rgba(139, 92, 246, 0.32);
    border-radius: 10px;
    background: #fff;
    color: var(--bluff-purple-dark);
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s var(--bluff-ease);
}

body.bluff-page .host-controls select:focus {
    outline: none;
    border-color: var(--bluff-gold);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   LOBBY CATEGORIES
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .lobby-category-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 10px;
}

body.bluff-page .lobby-category-title h3 {
    margin: 0;
    color: var(--bluff-purple-deep);
    font-family: 'Cairo', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

body.bluff-page #selectedCategoriesCount {
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(76, 29, 149, 0.32);
}

body.bluff-page .bluff-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

body.bluff-page .bluff-category-card {
    display: grid;
    grid-template-rows: 44px minmax(0, 1fr);
    place-items: center;
    gap: 6px;
    min-height: 104px;
    padding: 10px 8px;
    border: 2px solid rgba(139, 92, 246, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f5f2ff);
    box-shadow:
        0 5px 0 rgba(139, 92, 246, 0.18),
        0 8px 18px rgba(76, 29, 149, 0.10);
    cursor: pointer;
    transition: all 0.22s var(--bluff-ease-back);
    position: relative;
    overflow: hidden;
}

body.bluff-page .bluff-category-card:hover:not(:disabled):not(.selected) {
    transform: translateY(-3px);
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow:
        0 8px 0 rgba(139, 92, 246, 0.24),
        0 14px 26px rgba(76, 29, 149, 0.20);
}

body.bluff-page .bluff-category-card.selected {
    border-color: var(--bluff-gold);
    background:
        radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.55), transparent 55%),
        linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo));
    color: #fff;
    box-shadow:
        0 6px 0 var(--bluff-purple-dark),
        0 14px 26px rgba(76, 29, 149, 0.55),
        0 0 24px rgba(251, 191, 36, 0.42);
    /* No keyframe animation — the grid re-renders on every click, which would
       replay a `both`-filled animation on every already-selected card (visible shake).
       Transitions above handle the state change smoothly. */
}

body.bluff-page .bluff-category-card.selected img {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

body.bluff-page .bluff-category-card strong {
    font-weight: 900;
    color: inherit;
}

body.bluff-page .bluff-category-card.selected strong {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
}

/* ═══════════════════════════════════════════════════════════════
   AVATAR / WAITING PLAYERS
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .lobby-avatar-panel {
    margin: 14px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1.5px dashed rgba(139, 92, 246, 0.28);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(251, 191, 36, 0.04));
}

body.bluff-page .lobby-avatar-panel > strong {
    color: var(--bluff-purple-deep);
    font-weight: 900;
    font-size: 0.95rem;
}

body.bluff-page .waiting-players.bara-player-grid .waiting-player {
    border-radius: 12px;
    border: 1.5px solid rgba(139, 92, 246, 0.22);
    background: linear-gradient(135deg, #ffffff, #f8f5ff);
    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.10);
    transition: all 0.24s var(--bluff-ease);
    animation: bluffPlayerIn 0.4s var(--bluff-ease) both;
}

@keyframes bluffPlayerIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

body.bluff-page .waiting-players.bara-player-grid .waiting-player:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 8px 20px rgba(76, 29, 149, 0.18);
}

body.bluff-page .waiting-players.bara-player-grid .waiting-player strong {
    color: var(--bluff-purple-dark);
    font-weight: 900;
}

body.bluff-page .waiting-players.bara-player-grid .player-avatar {
    border: 2px solid var(--bluff-purple);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.32), 0 4px 12px rgba(76, 29, 149, 0.28);
}

body.bluff-page .waiting-players.bara-player-grid .kick-player-button {
    background: linear-gradient(135deg, var(--bluff-crimson), var(--bluff-crimson-deep));
    color: #fff;
    font-weight: 900;
    border: 0;
    box-shadow: 0 4px 8px rgba(185, 28, 28, 0.42);
    transition: all 0.2s var(--bluff-ease-back);
}

body.bluff-page .waiting-players.bara-player-grid .kick-player-button:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(185, 28, 28, 0.62);
}

body.bluff-page .hint,
body.bluff-page #waitingNote {
    color: var(--bluff-muted);
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 10px;
    border-radius: 10px;
    background: rgba(10, 6, 32, 0.32);
    border: 1px dashed rgba(139, 92, 246, 0.32);
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY SELECT (during game) — the chooser
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .category-select-status {
    border-radius: 14px;
    border: 2px solid rgba(251, 191, 36, 0.45);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo) 55%, var(--bluff-purple));
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.42), 0 0 0 4px rgba(251, 191, 36, 0.10);
    padding: 12px 14px;
}

body.bluff-page .category-select-status .chooser-card {
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-weight: 900;
    font-size: 1.05rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.bluff-page .category-select-status .chooser-card strong {
    color: var(--bluff-gold);
    text-shadow: 0 2px 8px rgba(251, 191, 36, 0.55);
}

body.bluff-page #categoryPanel .category-button {
    min-height: 62px;
    border: 2px solid rgba(139, 92, 246, 0.28);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f4f0ff);
    color: var(--bluff-purple-dark);
    font-weight: 900;
    box-shadow: 0 6px 0 rgba(139, 92, 246, 0.22), 0 10px 20px rgba(76, 29, 149, 0.12);
    transition: all 0.22s var(--bluff-ease-back);
}

body.bluff-page #categoryPanel .category-button:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--bluff-gold);
    background: linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo));
    color: #fff;
    box-shadow: 0 9px 0 var(--bluff-purple-dark), 0 16px 30px rgba(76, 29, 149, 0.48), 0 0 22px rgba(251, 191, 36, 0.40);
}

/* ═══════════════════════════════════════════════════════════════
   TIMER BADGE — glowing pulse
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .timer-badge,
body.bluff-page .category-select-status #categoryTimerBadge {
    min-width: 56px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 2px solid rgba(251, 191, 36, 0.55);
    background: linear-gradient(135deg, var(--bluff-gold-warm), var(--bluff-gold));
    color: #1a0b3d;
    font-family: 'Cairo', 'Consolas', monospace;
    font-weight: 1000;
    font-size: 1.15rem;
    box-shadow:
        0 6px 0 #b45309,
        0 10px 20px rgba(251, 191, 36, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 20px rgba(251, 191, 36, 0.32);
    animation: bluffTimerBreathe 2.4s ease-in-out infinite alternate;
}

@keyframes bluffTimerBreathe {
    from { box-shadow: 0 6px 0 #b45309, 0 10px 20px rgba(251, 191, 36, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 12px rgba(251, 191, 36, 0.28); }
    to   { box-shadow: 0 6px 0 #b45309, 0 12px 26px rgba(251, 191, 36, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 32px rgba(251, 191, 36, 0.55); }
}

body.bluff-page .timer-badge.danger,
body.bluff-page .timer-badge.urgent-pulse,
body.bluff-page .category-select-status #categoryTimerBadge.danger,
body.bluff-page .category-select-status #categoryTimerBadge.urgent-pulse {
    background: linear-gradient(135deg, var(--bluff-crimson), var(--bluff-crimson-deep));
    border-color: rgba(220, 38, 38, 0.72);
    color: #fff;
    box-shadow:
        0 6px 0 #7f1d1d,
        0 12px 24px rgba(185, 28, 28, 0.45),
        0 0 30px rgba(220, 38, 38, 0.55);
}

/* Full-viewport urgent side flash — force truly viewport-fixed edges */
body.bluff-page #playPanel.urgent-screen::before {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(220, 38, 38, 0.42) 0%,
            rgba(220, 38, 38, 0.18) 4%,
            rgba(220, 38, 38, 0) 12%,
            rgba(220, 38, 38, 0) 88%,
            rgba(220, 38, 38, 0.18) 96%,
            rgba(220, 38, 38, 0.42) 100%) !important;
    box-shadow:
        inset 14px 0 0 rgba(220, 38, 38, 0.92),
        inset -14px 0 0 rgba(220, 38, 38, 0.92),
        inset 0 0 60px rgba(220, 38, 38, 0.32) !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION BLOCK
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .round-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(251, 191, 36, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.22);
}

body.bluff-page .eyebrow {
    color: var(--bluff-purple-deep);
    font-weight: 1000;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    margin: 0;
}

body.bluff-page .eyebrow span {
    color: var(--bluff-gold-warm);
    font-size: 1.05em;
}

/* Apply universally to ALL stages (voting, results, podium, …) — not just answer-writing */
body.bluff-page #playPanel .question-category,
body.bluff-page #playPanel.bluff-question-stage .question-category {
    border: 2px solid rgba(251, 191, 36, 0.55);
    border-radius: 14px;
    /* Trimmed vertical padding + gap; increased line-height so Arabic
       ascenders/descenders (ت ث ج ح خ) get breathing room without growing card. */
    padding: 6px 18px 8px;
    gap: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.20), transparent 55%),
        linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo) 55%, var(--bluff-purple));
    box-shadow:
        0 8px 0 rgba(76, 29, 149, 0.32),
        0 18px 32px rgba(76, 29, 149, 0.28),
        0 0 24px rgba(251, 191, 36, 0.22);
    color: #fff;
    font-weight: 1000;
    line-height: 1.4;
    overflow: visible;
}

body.bluff-page #playPanel .question-category span,
body.bluff-page #playPanel.bluff-question-stage .question-category span {
    display: block;
    line-height: 1.35;
    padding: 2px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
    overflow: visible;
}

body.bluff-page #playPanel .question-category-prefix,
body.bluff-page #playPanel.bluff-question-stage .question-category-prefix {
    color: var(--bluff-gold);
    font-weight: 900;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0;
}

body.bluff-page #playPanel .question-block h2,
body.bluff-page #playPanel.bluff-question-stage .question-block h2 {
    width: min(100%, 760px);
    max-width: 100%;
    box-sizing: border-box;
    margin: 8px 0 0;
    color: #1a0b3d;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.15rem, 4.4dvw, 1.85rem);
    font-weight: 1000;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Ensure the round-line and question don't overlap in non-answer stages */
body.bluff-page #playPanel .question-block {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin: 0 0 10px;
    padding: 0;
    text-align: center;
}

body.bluff-page .answer-hint {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(251, 191, 36, 0.08));
    border: 1.5px solid rgba(139, 92, 246, 0.32);
    color: var(--bluff-purple-dark);
    font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════
   BLUFF FORM (write fake answer)
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .bluff-form {
    display: grid;
    gap: 14px;
    margin-top: 20px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(251, 191, 36, 0.03));
    border: 1.5px solid rgba(139, 92, 246, 0.20);
}

body.bluff-page .bluff-form label {
    color: var(--bluff-purple-dark);
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

body.bluff-page .bluff-form input {
    min-height: 58px;
    padding: 0 18px;
    border: 2px solid rgba(139, 92, 246, 0.28);
    border-radius: 12px;
    background: #fff;
    color: #1a0b3d;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    transition: all 0.24s var(--bluff-ease);
}

body.bluff-page .bluff-form input::placeholder {
    color: rgba(76, 29, 149, 0.42);
    font-weight: 700;
}

body.bluff-page .bluff-form input:focus {
    outline: none;
    border-color: var(--bluff-gold);
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22), 0 8px 18px rgba(76, 29, 149, 0.14);
}

body.bluff-page .bluff-inline-error {
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(185, 28, 28, 0.05));
    border: 1.5px solid rgba(220, 38, 38, 0.42);
    color: var(--bluff-crimson-deep);
    font-weight: 900;
    animation: bluffShake 0.42s ease-in-out;
}

@keyframes bluffShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════════════════
   CHOICES PANEL (voting on answers)
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page #choicesPanel {
    margin-top: 14px;
    padding: 14px;
    border: 2px solid rgba(139, 92, 246, 0.22);
    border-radius: 16px;
    background: linear-gradient(180deg, #f4f0ff, #ffffff);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.85),
        0 12px 26px rgba(76, 29, 149, 0.12);
}

body.bluff-page #choicesPanel .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}

body.bluff-page #choicesPanel .bluff-choice-button {
    min-height: 88px;
    padding: 12px 14px;
    border: 2px solid rgba(139, 92, 246, 0.42);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f6f2ff);
    color: var(--bluff-purple-dark);
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    box-shadow:
        0 6px 0 rgba(139, 92, 246, 0.28),
        0 10px 20px rgba(76, 29, 149, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.22s var(--bluff-ease-back);
    position: relative;
    overflow: hidden;
}

body.bluff-page #choicesPanel .bluff-choice-button:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--bluff-gold);
    background: linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo));
    color: #fff;
    box-shadow:
        0 9px 0 var(--bluff-purple-dark),
        0 16px 32px rgba(76, 29, 149, 0.48),
        0 0 24px rgba(251, 191, 36, 0.42);
}

body.bluff-page #choicesPanel .bluff-choice-button:active:not(:disabled) {
    transform: translateY(0);
    transition-duration: 0.08s;
}

body.bluff-page #choicesPanel .bluff-choice-button strong {
    color: inherit;
    font-size: clamp(1rem, 3.8vw, 1.2rem);
    line-height: 1.3;
}

body.bluff-page #choicesPanel .bluff-choice-button.self-choice {
    opacity: 0.92;
    border-color: rgba(251, 191, 36, 0.55);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(245, 158, 11, 0.06));
}

body.bluff-page #choicesPanel .bluff-choice-button.self-choice-muted {
    opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════
   SUBMITTED PANEL
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .submitted-panel {
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(139, 92, 246, 0.06));
    border: 1.5px solid rgba(16, 185, 129, 0.32);
    text-align: center;
    animation: bluffPanelIn 0.5s var(--bluff-ease) both;
}

body.bluff-page .submitted-panel h2 {
    color: var(--bluff-emerald-deep);
    font-family: 'Cairo', sans-serif;
    font-weight: 1000;
    margin: 0 0 8px;
}

body.bluff-page .submitted-panel .lead {
    color: var(--bluff-purple-deep);
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   ROUND RESULTS (answer breakdown)
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .bluff-option-results {
    padding: 14px;
    border: 2px solid rgba(139, 92, 246, 0.20);
    border-radius: 16px;
    background: linear-gradient(180deg, #f4f0ff, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 12px 24px rgba(76, 29, 149, 0.10);
}

body.bluff-page .bluff-option-card {
    border-radius: 14px;
    padding: 10px 10px 9px;
    transition: transform 0.24s var(--bluff-ease-back);
}

body.bluff-page .bluff-option-card:not(.correct) {
    border: 2px solid rgba(239, 68, 68, 0.42);
    background: linear-gradient(180deg, #fff5f5, #ffe4e6);
    box-shadow:
        0 7px 0 #ef4444,
        0 14px 22px rgba(127, 29, 29, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body.bluff-page .bluff-option-card.correct {
    border: 2px solid rgba(16, 185, 129, 0.72);
    background: linear-gradient(180deg, #ecfdf5, #a7f3d0);
    box-shadow:
        0 7px 0 var(--bluff-emerald-deep),
        0 14px 24px rgba(6, 78, 59, 0.28),
        0 0 24px rgba(16, 185, 129, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    animation: bluffCorrectGlow 2.4s ease-in-out infinite alternate;
}

@keyframes bluffCorrectGlow {
    from { box-shadow: 0 7px 0 var(--bluff-emerald-deep), 0 14px 24px rgba(6, 78, 59, 0.28), 0 0 20px rgba(16, 185, 129, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.78); }
    to   { box-shadow: 0 7px 0 var(--bluff-emerald-deep), 0 16px 30px rgba(6, 78, 59, 0.38), 0 0 40px rgba(16, 185, 129, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
}

body.bluff-page .bluff-option-card:not(.correct) > strong {
    color: #7f1d1d;
}

body.bluff-page .bluff-option-card.correct > strong {
    color: #064e3b;
}

body.bluff-page .bluff-owner {
    color: #52525b;
    font-weight: 900;
}

body.bluff-page .bluff-player-name-chip {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(251, 191, 36, 0.08));
    color: var(--bluff-purple-dark);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.28);
    font-weight: 1000;
}

body.bluff-page .bluff-voter {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 240, 255, 0.95));
    color: var(--bluff-purple-dark);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.20), 0 2px 6px rgba(76, 29, 149, 0.10);
    font-weight: 1000;
}

body.bluff-page .bluff-voter.correct b {
    background: linear-gradient(135deg, var(--bluff-emerald), var(--bluff-emerald-deep));
}

body.bluff-page .bluff-voter.wrong b {
    background: linear-gradient(135deg, var(--bluff-crimson), var(--bluff-crimson-deep));
}

/* ═══════════════════════════════════════════════════════════════
   PODIUM / RANKING
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .ranking-list {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f4f0ff, #ffffff);
    border: 1.5px solid rgba(139, 92, 246, 0.22);
}

/* NOTE: ranking-list entry animation is defined further below in the v8 fixes
   section (slower, staggered settle + score/bar pulse). */

body.bluff-page .ranking-showcase {
    border-radius: 16px;
    border: 2px solid rgba(251, 191, 36, 0.45);
    background:
        radial-gradient(circle at 18% 8%, rgba(251, 191, 36, 0.18), transparent 40%),
        linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(251, 191, 36, 0.04)),
        #fff;
    box-shadow: 0 18px 40px rgba(76, 29, 149, 0.22), 0 0 0 4px rgba(251, 191, 36, 0.08);
}

/* ── Ranking cards: legible dark text on light panel ── */
body.bluff-page .ranking-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    border: 1.5px solid rgba(139, 92, 246, 0.22);
    border-radius: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #ffffff, #faf7ff);
    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.08);
    color: var(--bluff-purple-dark);
}

body.bluff-page .ranking-card .rank-info,
body.bluff-page .ranking-card .rank-info strong,
body.bluff-page .ranking-card .rank-info span {
    color: var(--bluff-purple-dark);
    font-weight: 900;
}

body.bluff-page .ranking-card .rank-info strong {
    color: #1a0b3d;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

body.bluff-page .ranking-card .rank-badge {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo));
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 1000;
    box-shadow: 0 4px 10px rgba(76, 29, 149, 0.32);
}

body.bluff-page .rank-1 .rank-badge {
    background: linear-gradient(135deg, var(--bluff-gold-warm), var(--bluff-gold), #fde68a);
    color: #1a0b3d;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22), 0 6px 14px rgba(251, 191, 36, 0.45);
}

body.bluff-page .rank-2 .rank-badge {
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    color: #1a0b3d;
    box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.32), 0 5px 12px rgba(100, 116, 139, 0.32);
}

body.bluff-page .rank-3 .rank-badge {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #1a0b3d;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.22), 0 5px 12px rgba(180, 83, 9, 0.32);
}

body.bluff-page .ranking-card .rank-bar {
    background: rgba(139, 92, 246, 0.12);
}

body.bluff-page .ranking-card .rank-bar span {
    background: linear-gradient(90deg, var(--bluff-purple), var(--bluff-gold));
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.32);
}

body.bluff-page .ranking-card .rank-score {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(251, 191, 36, 0.08));
    color: var(--bluff-purple-dark);
    border: 1px solid rgba(139, 92, 246, 0.22);
    font-weight: 1000;
}

body.bluff-page .ranking-card .rank-score strong,
body.bluff-page .ranking-card .rank-score span {
    color: var(--bluff-purple-dark);
}

/* ── Section titles on light panel: legible + compact ── */
body.bluff-page .play-panel .section-title,
body.bluff-page #playPanel .section-title {
    margin-bottom: 12px;
    padding: 0;
}

body.bluff-page .play-panel .section-title h2,
body.bluff-page #playPanel .section-title h2 {
    margin: 0;
    color: var(--bluff-purple-dark);
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1rem, 3.6vw, 1.25rem);
    font-weight: 1000;
    letter-spacing: 0.01em;
}

body.bluff-page .play-panel .section-title span,
body.bluff-page #playPanel .section-title span {
    color: var(--bluff-purple-deep);
    font-weight: 900;
}

body.bluff-page .compact-title {
    margin-bottom: 10px;
}

/* ── Force dark text inside light .play-panel (body text default is light on dark bg) ── */
body.bluff-page .play-panel,
body.bluff-page .play-panel p,
body.bluff-page .play-panel span,
body.bluff-page .play-panel strong,
body.bluff-page .play-panel div,
body.bluff-page .play-panel label {
    color: var(--bluff-purple-dark);
}

body.bluff-page .play-panel h1,
body.bluff-page .play-panel h2,
body.bluff-page .play-panel h3,
body.bluff-page .play-panel h4 {
    color: #1a0b3d;
}

/* Preserve intentional white text on colored pills (category, chooser, timer, code) */
body.bluff-page .play-panel .question-category,
body.bluff-page .play-panel .question-category *,
body.bluff-page .play-panel .category-select-status,
body.bluff-page .play-panel .category-select-status *,
body.bluff-page .play-panel .chooser-card,
body.bluff-page .play-panel .chooser-card *,
body.bluff-page .play-panel .big-code {
    color: inherit;
}

body.bluff-page .play-panel .chooser-card strong,
body.bluff-page .play-panel .category-select-status .chooser-card strong {
    color: var(--bluff-gold);
}

body.bluff-page .play-panel .big-code {
    color: var(--bluff-purple-dark);
}

body.bluff-page .play-panel .timer-badge,
body.bluff-page .play-panel .timer-badge * {
    color: #1a0b3d;
}

body.bluff-page .play-panel .timer-badge.danger,
body.bluff-page .play-panel .timer-badge.urgent-pulse {
    color: #fff;
}

/* Round-line eyebrow visible on the light panel */
body.bluff-page .play-panel .round-line .eyebrow,
body.bluff-page .play-panel .round-line .eyebrow span {
    color: var(--bluff-purple-deep);
}

body.bluff-page .play-panel .round-line .eyebrow span {
    color: var(--bluff-gold-warm);
}

/* ── Bluff option results legibility ── */
body.bluff-page .bluff-option-card > strong,
body.bluff-page .bluff-option-card:not(.correct) > strong {
    color: #7f1d1d;
}

body.bluff-page .bluff-option-card.correct > strong {
    color: #064e3b;
}

body.bluff-page .bluff-owner,
body.bluff-page .bluff-owner-label,
body.bluff-page .bluff-no-votes {
    color: #52525b;
}

/* ── Compactness: reduce scroll on tall play stages ── */
body.bluff-page .play-panel {
    padding: clamp(12px, 3vw, 20px);
}

body.bluff-page #playPanel {
    display: grid;
    gap: 10px;
}

body.bluff-page #playPanel .bluff-form {
    margin-top: 10px;
    padding: 14px;
    gap: 10px;
}

body.bluff-page #playPanel .bluff-form input {
    min-height: 52px;
}

body.bluff-page #playPanel #choicesPanel {
    margin-top: 8px;
    padding: 10px;
}

body.bluff-page #playPanel #choicesPanel .option-grid {
    gap: 8px;
}

body.bluff-page #playPanel #choicesPanel .bluff-choice-button {
    min-height: 74px;
    padding: 10px 12px;
}

body.bluff-page #playPanel .bluff-option-results {
    padding: 10px;
    gap: 8px;
}

body.bluff-page #playPanel .bluff-option-card {
    min-height: 90px;
    padding: 8px;
}

body.bluff-page #playPanel .ranking-list {
    padding: 10px;
    gap: 8px;
}

body.bluff-page #playPanel .submitted-panel {
    padding: 14px;
}

body.bluff-page .round-line {
    padding: 6px 12px;
}

body.bluff-page #playPanel .question-block h2 {
    margin: 6px 0 0;
}

/* Trim mode-specific header padding so tall stages fit better */
body.bluff-page .bluffing-mode .game-header,
body.bluff-page .choosing-mode .game-header,
body.bluff-page .podium-mode .game-header,
body.bluff-page .round-results-mode .game-header {
    padding: 6px 10px;
}

/* ═══════════════════════════════════════════════════════════════
   FINISHED PANEL — winner celebration
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page #finishedPanel {
    padding: 22px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 20% 15%, rgba(251, 191, 36, 0.18), transparent 42%),
        radial-gradient(circle at 82% 88%, rgba(139, 92, 246, 0.14), transparent 42%),
        linear-gradient(135deg, #ffffff, #faf7ff);
    border: 2px solid rgba(251, 191, 36, 0.42);
    box-shadow: 0 30px 60px rgba(76, 29, 149, 0.32), 0 0 0 4px rgba(251, 191, 36, 0.10);
    text-align: center;
}

body.bluff-page #finishedPanel .eyebrow {
    color: var(--bluff-gold-warm);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.bluff-page #winnerTitle {
    color: var(--bluff-purple-dark);
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    font-weight: 1000;
    margin: 10px 0 16px;
    text-shadow: 0 3px 12px rgba(251, 191, 36, 0.32);
    animation: bluffWinnerPop 0.8s var(--bluff-ease-back) both;
}

@keyframes bluffWinnerPop {
    0%   { opacity: 0; transform: scale(0.7) rotate(-3deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

body.bluff-page .final-celebration {
    margin: 14px 0 20px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(139, 92, 246, 0.08));
    border: 1.5px dashed rgba(251, 191, 36, 0.42);
    color: var(--bluff-purple-dark);
    font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY TRANSITION (dramatic overlay)
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .category-transition-panel {
    background:
        radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.25), transparent 45%),
        radial-gradient(circle at 50% 85%, rgba(251, 191, 36, 0.18), transparent 45%),
        rgba(10, 6, 32, 0.94);
    backdrop-filter: blur(10px);
}

body.bluff-page .category-transition-card {
    border: 2px solid rgba(251, 191, 36, 0.55);
    border-radius: 18px;
    padding: 18px 22px;
    background:
        radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(135deg, var(--bluff-purple-deep), var(--bluff-indigo) 55%, var(--bluff-purple));
    box-shadow: 0 18px 40px rgba(76, 29, 149, 0.55), 0 0 60px rgba(251, 191, 36, 0.28);
}

body.bluff-page .category-transition-card span {
    color: var(--bluff-gold);
    font-weight: 900;
}

body.bluff-page .category-transition-card strong {
    color: #fff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}

body.bluff-page .category-transition-panel h2 {
    color: #fff;
    text-shadow: 0 4px 18px rgba(139, 92, 246, 0.55);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .toast {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--bluff-purple-dark), var(--bluff-indigo));
    color: #fff;
    border: 1.5px solid rgba(251, 191, 36, 0.55);
    box-shadow: 0 12px 30px rgba(76, 29, 149, 0.55), 0 0 20px rgba(251, 191, 36, 0.28);
    font-weight: 900;
    padding: 12px 18px;
}

/* ═══════════════════════════════════════════════════════════════
   FINE-TUNING FIXES (v7): icon label position, timer badge shadow,
   round-line checkmark hidden, category grid bottom shadow, urgent flash
   ═══════════════════════════════════════════════════════════════ */

/* ── Room icon buttons: move the label BELOW the button entirely, so it can
   never collide with the ::before/::after icon glyphs inside. ── */
body.bluff-page .room-icon-button {
    position: relative;
    display: block;
    width: 58px;
    min-height: 54px;
    padding: 0;
    overflow: visible;
}

body.bluff-page .room-icon-button .room-icon-label {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: var(--bluff-purple-deep);
    white-space: nowrap;
    background: transparent;
}

/* Hover state: label follows the button color for consistency */
body.bluff-page .room-icon-button:hover .room-icon-label {
    color: var(--bluff-purple-dark);
}

/* Perfectly center the ::before/::after icons using transform. Small offsets
   produce the stacked "copy" and rotated "link" glyph shapes. */
body.bluff-page .copy-code-icon::before,
body.bluff-page .copy-code-icon::after {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
}

body.bluff-page .copy-code-icon::before {
    transform: translate(calc(-50% - 3px), calc(-50% - 2px));
}

body.bluff-page .copy-code-icon::after {
    transform: translate(calc(-50% + 3px), calc(-50% + 2px));
}

body.bluff-page .copy-link-icon::before,
body.bluff-page .copy-link-icon::after {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
}

body.bluff-page .copy-link-icon::before {
    transform: translate(calc(-50% - 4px), calc(-50% - 3px)) rotate(-35deg);
}

body.bluff-page .copy-link-icon::after {
    transform: translate(calc(-50% + 4px), calc(-50% + 3px)) rotate(-35deg);
}

/* Give the room-code row bottom breathing room so labels don't crash into
   the next section below. */
body.bluff-page .room-code-actions {
    margin-bottom: 26px;
    align-items: flex-start;
}

/* ── Hide the "✓" that JS writes into the timer-badge during results/podium stages ── */
body.bluff-page .round-results-mode #timerBadge,
body.bluff-page .podium-mode #timerBadge {
    display: none;
}

/* Compact round-line when the badge is hidden (no need for extra vertical room) */
body.bluff-page .round-results-mode .round-line,
body.bluff-page .podium-mode .round-line {
    padding: 6px 14px;
    justify-content: center;
    text-align: center;
}

body.bluff-page .round-results-mode .round-line .eyebrow,
body.bluff-page .podium-mode .round-line .eyebrow {
    text-align: center;
    width: 100%;
}

/* ── Timer badge shadow trimmed so it stays visually inside the round-line pill ── */
body.bluff-page .timer-badge,
body.bluff-page .category-select-status #categoryTimerBadge {
    min-height: 38px;
    padding: 6px 12px;
    box-shadow:
        0 3px 10px rgba(251, 191, 36, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 12px rgba(251, 191, 36, 0.22);
    animation: none;
}

body.bluff-page .timer-badge.danger,
body.bluff-page .timer-badge.urgent-pulse,
body.bluff-page .category-select-status #categoryTimerBadge.danger,
body.bluff-page .category-select-status #categoryTimerBadge.urgent-pulse {
    box-shadow:
        0 3px 10px rgba(185, 28, 28, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 14px rgba(220, 38, 38, 0.42);
}

/* Round-line pill height fits the smaller badge */
body.bluff-page .round-line {
    padding: 6px 14px;
    min-height: 46px;
    align-items: center;
}

/* ── Category grid: give the last row's drop-shadow breathing room ── */
body.bluff-page #lobbyCategoriesPanel {
    padding-bottom: 12px;
}

body.bluff-page .bluff-category-grid {
    padding-bottom: 10px;
}

/* ── Urgent state: side flashes removed; a compact red outline hugs the
   input / choices box. Inset shadows are used so nothing bleeds past the
   element edges (outer blurred shadows get clipped by body's overflow-x
   on mobile — that was the "gets shaved from left/right" issue). ── */
body.bluff-page #playPanel.urgent-screen::before {
    display: none !important;
}

body.bluff-page main.app-shell:has(#playPanel.urgent-screen)::after {
    display: none !important;
}

/* Answer input under urgent countdown */
body.bluff-page #playPanel.urgent-screen .bluff-form {
    border-color: rgba(220, 38, 38, 0.35);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.02));
    transform: translateY(-2px);
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

body.bluff-page #playPanel.urgent-screen .bluff-form input {
    border-color: rgba(220, 38, 38, 0.85);
    /* Inset ring + subtle downward drop only (no wide horizontal blur that would clip) */
    box-shadow:
        inset 0 0 0 2px rgba(220, 38, 38, 0.85),
        inset 0 0 18px rgba(220, 38, 38, 0.28),
        0 4px 10px rgba(185, 28, 28, 0.22);
    animation: bluffUrgentInsetGlow 0.7s ease-in-out infinite alternate;
}

/* Choices grid under urgent countdown */
body.bluff-page #playPanel.urgent-screen #choicesPanel {
    border-color: rgba(220, 38, 38, 0.85);
    background: linear-gradient(180deg, rgba(255, 245, 245, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow:
        inset 0 0 0 2px rgba(220, 38, 38, 0.55),
        inset 0 0 24px rgba(220, 38, 38, 0.22),
        0 6px 14px rgba(185, 28, 28, 0.22);
    transform: translateY(-3px);
    animation: bluffUrgentInsetGlow 0.7s ease-in-out infinite alternate;
    transition: transform 0.24s ease;
}

@keyframes bluffUrgentInsetGlow {
    from {
        box-shadow:
            inset 0 0 0 2px rgba(220, 38, 38, 0.55),
            inset 0 0 14px rgba(220, 38, 38, 0.18),
            0 4px 10px rgba(185, 28, 28, 0.14);
    }
    to {
        box-shadow:
            inset 0 0 0 3px rgba(220, 38, 38, 0.95),
            inset 0 0 28px rgba(220, 38, 38, 0.42),
            0 6px 14px rgba(185, 28, 28, 0.32);
    }
}

/* ── Chooser label under "اختيار الفئة": long player names must not overflow the pill.
   Fixed max-width + ellipsis; the font scales down on narrow viewports. ── */
body.bluff-page .category-select-status {
    flex-wrap: nowrap;
    min-width: 0;
}

body.bluff-page .category-select-status .chooser-card {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

body.bluff-page .category-select-status .chooser-card strong {
    /* Keep the base inline-flex so the avatar stays on the SAME line as the name
       (display:block was breaking the layout — avatar wrapped above the text). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.85rem, 3.4vw, 1rem);
    line-height: 1.2;
}

body.bluff-page .category-select-status .chooser-card span {
    flex: 0 0 auto;
}

/* ── Ranking: no animation. Just show the cards as they are.
   Explicit `animation: none` overrides any earlier rule that may have set one. ── */
body.bluff-page #roundRankingList.ranking-list > .ranking-card,
body.bluff-page .ranking-list > .ranking-card,
body.bluff-page .ranking-list > *,
body.bluff-page .ranking-card .rank-bar span,
body.bluff-page .ranking-card .rank-score strong {
    animation: none !important;
    animation-delay: 0s !important;
    opacity: 1;
    transform: none;
}

/* ── Auto-advance progress bar: a solid PURPLE strip inside the button so it
   contrasts against the yellow/gold primary-action. Duration + elapsed are
   set by JS from the server-side deadline so every player's bar is synced. ── */
body.bluff-page .primary-action.auto-advancing {
    position: relative;
    overflow: hidden;
}

body.bluff-page .primary-action.auto-advancing::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6px;
    background: linear-gradient(90deg, #4c1d95, #6d28d9 55%, #8b5cf6);
    box-shadow: 0 -1px 4px rgba(76, 29, 149, 0.35), 0 0 8px rgba(139, 92, 246, 0.45);
    transform-origin: right center;
    transform: scaleX(1);
    animation: bluffAutoAdvanceBar var(--auto-advance-duration, 15s) linear forwards;
    animation-delay: var(--auto-advance-elapsed, 0ms);
    pointer-events: none;
    z-index: 2;
}

@keyframes bluffAutoAdvanceBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Guest variant: solid, clearly visible (still non-clickable). Same purple bar. */
body.bluff-page .primary-action.auto-advance-guest {
    cursor: default;
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14), transparent 50%),
        linear-gradient(135deg, #4c1d95, #6d28d9 52%, #4338ca);
    border: 2px solid rgba(251, 191, 36, 0.55);
    box-shadow:
        0 10px 24px rgba(76, 29, 149, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-weight: 1000;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
}

body.bluff-page .primary-action.auto-advance-guest:hover:not(:disabled),
body.bluff-page .primary-action.auto-advance-guest:hover,
body.bluff-page .primary-action.auto-advance-guest:disabled {
    opacity: 1;
    filter: none;
    transform: none;
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14), transparent 50%),
        linear-gradient(135deg, #4c1d95, #6d28d9 52%, #4338ca);
    box-shadow:
        0 10px 24px rgba(76, 29, 149, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Kill the shine-sweep on guest button */
body.bluff-page .primary-action.auto-advance-guest::before {
    display: none;
}

/* Guest bar: brighter, gold-tinged strip so it stands out on the purple button. */
body.bluff-page .primary-action.auto-advance-guest::after {
    background: linear-gradient(90deg, #fbbf24, #f59e0b 55%, #fde68a);
    box-shadow: 0 -1px 4px rgba(180, 83, 9, 0.35), 0 0 10px rgba(251, 191, 36, 0.55);
}

/* ── Kill the stage-reveal / results-reveal fade-in animations from styles.css.
   These animations start from opacity:0 and re-fire whenever elements are
   re-created via `replaceChildren` (bluff.js does this on every state update),
   which caused the answers/choices panel to blink 1–2 times. ── */
body.bluff-page #playPanel.results-stage-animate #roundResultsPanel,
body.bluff-page #playPanel.results-stage-animate .bluff-option-card,
body.bluff-page #playPanel.results-stage-animate .question-block,
body.bluff-page #playPanel.category-stage-animate .question-category,
body.bluff-page #playPanel.category-stage-animate .question-block h2,
body.bluff-page #playPanel.category-stage-animate .answer-hint,
body.bluff-page #playPanel.category-stage-animate .bluff-form,
body.bluff-page .category-transition-panel.animate .category-transition-card,
body.bluff-page .category-transition-panel.animate h2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   IN-GAME VIEWPORT LOCK  (all bluff stages EXCEPT the lobby)
   • Fixes the "page scrolls even though content fits" bug.
   • Fixes iOS: after typing in an input, the page no longer stays stuck
     scrolled up when the keyboard closes.
   Strategy: lock html/body to the dynamic viewport height and disable
   window-level scrolling; if a stage's content ever exceeds the viewport,
   the inner <main class="app-shell"> becomes the scroll container instead
   of the window. The lobby (WAITING phase — no ...-mode class present) is
   left alone so its long category grid can still scroll normally.
   ════════════════════════════════════════════════════════════════════════ */

html:has(body.bluff-page .room-view.category-select-mode),
html:has(body.bluff-page .room-view.bluffing-mode),
html:has(body.bluff-page .room-view.choosing-mode),
html:has(body.bluff-page .room-view.round-results-mode),
html:has(body.bluff-page .room-view.podium-mode) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

body.bluff-page:has(.room-view.category-select-mode),
body.bluff-page:has(.room-view.bluffing-mode),
body.bluff-page:has(.room-view.choosing-mode),
body.bluff-page:has(.room-view.round-results-mode),
body.bluff-page:has(.room-view.podium-mode) {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    position: relative;
    /* iOS Safari: prevent the "rubber-band" body scroll that leaves the
       page stuck scrolled after the keyboard hides. */
    touch-action: manipulation;
}

body.bluff-page:has(.room-view.category-select-mode) main.app-shell,
body.bluff-page:has(.room-view.bluffing-mode) main.app-shell,
body.bluff-page:has(.room-view.choosing-mode) main.app-shell,
body.bluff-page:has(.room-view.round-results-mode) main.app-shell,
body.bluff-page:has(.room-view.podium-mode) main.app-shell {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

body.bluff-page:has(.room-view.category-select-mode) main.app-shell::-webkit-scrollbar,
body.bluff-page:has(.room-view.bluffing-mode) main.app-shell::-webkit-scrollbar,
body.bluff-page:has(.room-view.choosing-mode) main.app-shell::-webkit-scrollbar,
body.bluff-page:has(.room-view.round-results-mode) main.app-shell::-webkit-scrollbar,
body.bluff-page:has(.room-view.podium-mode) main.app-shell::-webkit-scrollbar {
    display: none;
}

/* When the keyboard opens on iOS, blur+refocus (e.g. going between inputs)
   can leave a residual viewport offset. `interactive-widget=resizes-content`
   should be set on <meta viewport> for the ideal fix; as a CSS-only guard,
   keep the room-view sized to the dynamic viewport so layout collapses back
   cleanly when the keyboard hides. */
body.bluff-page:has(.room-view.bluffing-mode) .room-view,
body.bluff-page:has(.room-view.choosing-mode) .room-view,
body.bluff-page:has(.room-view.round-results-mode) .room-view,
body.bluff-page:has(.room-view.podium-mode) .room-view,
body.bluff-page:has(.room-view.category-select-mode) .room-view {
    min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE / iPhone SAFE-AREA + spacing tweaks
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page main.app-shell {
    padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left));
    padding-block: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
}

@media (max-width: 620px) {
    body.bluff-page .brand-panel.game-title-panel {
        border-radius: 18px;
        padding: 20px 16px;
    }

    body.bluff-page .brand-panel.game-title-panel h1 {
        font-size: clamp(2.2rem, 11vw, 3.6rem);
    }

    body.bluff-page .join-panel,
    body.bluff-page .play-panel {
        border-radius: 18px;
        padding: 16px;
    }

    body.bluff-page .big-code {
        min-width: 180px;
        padding: 12px 20px;
        font-size: clamp(1.7rem, 9vw, 2.4rem);
    }

    body.bluff-page .home-action {
        min-height: 68px;
        font-size: 1.15rem;
    }

    body.bluff-page .primary-action {
        min-height: 54px;
        font-size: 1.05rem;
    }

    body.bluff-page #choicesPanel .option-grid {
        gap: 8px;
    }

    body.bluff-page #choicesPanel .bluff-choice-button {
        min-height: 78px;
        padding: 10px 12px;
    }

    body.bluff-page .bluff-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 380px) {
    body.bluff-page .bluff-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.bluff-page #choicesPanel .option-grid {
        grid-template-columns: 1fr;
    }
}

/* Touch-target minimum on interactive elements */
@media (hover: none) and (pointer: coarse) {
    body.bluff-page button,
    body.bluff-page .home-action,
    body.bluff-page .primary-action,
    body.bluff-page .home-button,
    body.bluff-page .back-button,
    body.bluff-page .room-icon-button,
    body.bluff-page .bluff-category-card,
    body.bluff-page .bluff-choice-button {
        min-height: 44px;
    }
}

/* Notch / dynamic-island friendly */
@supports (padding: max(0px)) {
    body.bluff-page .game-header {
        padding-top: max(10px, env(safe-area-inset-top, 10px));
    }
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    body.bluff-page *,
    body.bluff-page *::before,
    body.bluff-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE QUESTIONS — compact layout applied ONLY when the current
   question ships with an image (column 11 in Excel).
   All rules are scoped to #playPanel.has-image so questions without
   an image render identically to the pre-image layout.
   ═══════════════════════════════════════════════════════════════ */

body.bluff-page .question-image {
    display: none;
}

body.bluff-page #playPanel.has-image .question-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: clamp(140px, 30dvh, 320px);
    margin: 6px auto 4px;
    border-radius: 14px;
    border: 1.5px solid rgba(139, 92, 246, 0.32);
    box-shadow: 0 10px 24px rgba(10, 6, 32, 0.55);
    object-fit: contain;
    background: rgba(10, 6, 32, 0.35);
}

/* When a question image is shown, drop the category badge entirely — the round
   line and home button keep their default positions so the timer keeps ticking
   through updateLocalTimers() (which targets #timerBadge). */
body.bluff-page #playPanel.has-image .question-category {
    display: none;
}

body.bluff-page #playPanel.has-image #questionText {
    margin: 6px 0 4px;
    font-size: clamp(0.95rem, 3.2dvw, 1.35rem);
    line-height: 1.35;
}

body.bluff-page #playPanel.has-image .answer-hint {
    padding: 4px 12px;
    font-size: 0.78rem;
    margin: 2px 0;
}

/* Compact the answer form so the whole screen fits without scroll. */
body.bluff-page #playPanel.has-image .bluff-form {
    padding: 10px 12px;
    margin-top: 8px;
    gap: 8px;
}

body.bluff-page #playPanel.has-image .bluff-form label {
    font-size: 0.85rem;
    margin-bottom: 0;
}

body.bluff-page #playPanel.has-image .bluff-form input {
    min-height: 44px;
    font-size: 0.95rem;
    padding: 0 14px;
}

body.bluff-page #playPanel.has-image #submitBluffButton {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.95rem;
}

/* Compact the choices grid so 5+ options fit above the fold. */
body.bluff-page #playPanel.has-image #choicesPanel {
    margin-top: 8px;
    padding: 10px;
}

body.bluff-page #playPanel.has-image .option-grid {
    gap: 8px;
}

body.bluff-page #playPanel.has-image .bluff-choice-button {
    min-height: 56px;
    padding: 8px 10px;
    font-size: 0.85rem;
    line-height: 1.25;
}

/* Compact the "بانتظار بقية اللاعبين" panel too. */
body.bluff-page #playPanel.has-image .submitted-panel {
    padding: 10px 12px;
    margin-top: 8px;
}

body.bluff-page #playPanel.has-image .submitted-panel h2 {
    font-size: 1rem;
    margin: 0 0 4px;
}

body.bluff-page #playPanel.has-image .submitted-panel .lead {
    font-size: 0.85rem;
    margin: 0 0 6px;
}

body.bluff-page #playPanel.has-image .answer-status-grid {
    gap: 6px;
}

/* Trim the surrounding play-panel padding so the compact layout has room. */
body.bluff-page #playPanel.has-image {
    padding-top: 10px;
    padding-bottom: 10px;
}