/*
 * Spyfall PWA: stylesheet
 * ------------------------------------------------------------------
 * Design tokens live in :root (default theme) and body[data-theme="..."]
 * overrides. Eight themes: default, noir, classic, emerald, crimson,
 * sunset, cyber, ocean. Persian (RTL) is the default; the direction follows <html dir> (set by
 * setLang), so layout uses logical properties and never assumes a side (see tests/unit/css-direction.test.mjs).
 */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --bg-body: #090d16;
    --bg-gradient: radial-gradient(circle at 50% 10%, #1e1b4b 0%, #090d16 65%, #020408 100%);
    --surface-card: rgba(18, 24, 38, 0.92);
    --surface-input: rgba(10, 15, 26, 0.95);
    --border-glow: rgba(255, 255, 255, 0.12);
    --text-primary: #f8fafc;
    --text-secondary: #a0aec0;
    --brand-primary: #06b6d4;
    --brand-secondary: #a855f7;
    --brand-emerald: #10b981;
    --brand-rose: #f43f5e;
    --brand-amber: #f59e0b;
}

body[data-theme="noir"] {
    --bg-body: #120e0a;
    --bg-gradient: radial-gradient(circle at 50% 10%, #291d12 0%, #120e0a 70%, #050403 100%);
    --surface-card: rgba(32, 24, 18, 0.94);
    --surface-input: rgba(18, 14, 10, 0.98);
    --border-glow: rgba(245, 158, 11, 0.25);
    --text-primary: #fef3c7;
    --text-secondary: #fbbf24;
    --brand-primary: #f59e0b;
    --brand-secondary: #d97706;
}

/* "سینمای کلاسیک" — vintage black & white / old film theme. Pure
   grayscale on purpose (no color tint at all, unlike the warm-amber
   "noir" theme above): charcoal blacks, muted vintage grays, a
   silver accent for primary actions, and a clean off-white for
   text so everything stays comfortably readable. */
body[data-theme="classic"] {
    --bg-body: #0d0d0d;
    --bg-gradient: radial-gradient(circle at 50% 10%, #2e2e2e 0%, #0d0d0d 70%, #030303 100%);
    --surface-card: rgba(26, 26, 26, 0.94);
    --surface-input: rgba(14, 14, 14, 0.98);
    --border-glow: rgba(220, 220, 220, 0.22);
    --text-primary: #f4f4f2;
    --text-secondary: #b3b3ad;
    --brand-primary: #d4d4cf;
    --brand-secondary: #6e6e68;
}

body[data-theme="emerald"] {
    --bg-body: #061412;
    --bg-gradient: radial-gradient(circle at 50% 10%, #064e3b 0%, #061412 70%, #020807 100%);
    --surface-card: rgba(6, 30, 26, 0.94);
    --surface-input: rgba(3, 18, 15, 0.98);
    --border-glow: rgba(16, 185, 129, 0.3);
    --text-primary: #ecfdf5;
    --text-secondary: #a7f3d0;
    --brand-primary: #10b981;
    --brand-secondary: #059669;
}

body[data-theme="crimson"] {
    --bg-body: #14080a;
    --bg-gradient: radial-gradient(circle at 50% 10%, #4c0519 0%, #14080a 70%, #050203 100%);
    --surface-card: rgba(30, 10, 15, 0.94);
    --surface-input: rgba(18, 5, 8, 0.98);
    --border-glow: rgba(244, 63, 94, 0.3);
    --text-primary: #fff1f2;
    --text-secondary: #fecdd3;
    --brand-primary: #f43f5e;
    --brand-secondary: #be123c;
}

body[data-theme="sunset"] {
    --bg-body: #1a0f0a;
    --bg-gradient: radial-gradient(circle at 50% 10%, #7c2d12 0%, #1a0f0a 65%, #0a0503 100%);
    --surface-card: rgba(35, 20, 14, 0.94);
    --surface-input: rgba(20, 11, 8, 0.98);
    --border-glow: rgba(251, 146, 60, 0.3);
    --text-primary: #fff7ed;
    --text-secondary: #fdba9f;
    --brand-primary: #fb923c;
    --brand-secondary: #ec4899;
}

body[data-theme="cyber"] {
    --bg-body: #05010f;
    --bg-gradient: radial-gradient(circle at 50% 10%, #2a0a4a 0%, #05010f 65%, #020007 100%);
    --surface-card: rgba(16, 6, 30, 0.94);
    --surface-input: rgba(9, 3, 18, 0.98);
    --border-glow: rgba(217, 70, 239, 0.32);
    --text-primary: #fdf4ff;
    --text-secondary: #e9b8fb;
    --brand-primary: #e11d9c;
    --brand-secondary: #00e5ff;
}

body[data-theme="ocean"] {
    --bg-body: #04121a;
    --bg-gradient: radial-gradient(circle at 50% 10%, #0c3a4f 0%, #04121a 65%, #010a0f 100%);
    --surface-card: rgba(8, 30, 40, 0.94);
    --surface-input: rgba(4, 18, 24, 0.98);
    --border-glow: rgba(34, 211, 238, 0.28);
    --text-primary: #ecfeff;
    --text-secondary: #a5f3fc;
    --brand-primary: #22d3ee;
    --brand-secondary: #3b82f6;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    touch-action: pan-y;
}

/* Direction sign for the few offsets that must follow the reading direction (the toggle knob, the
   pass-the-phone icon, the ambient glow drift): +1 in LTR, -1 in RTL. Everything else uses logical
   properties (text-align: start, inset-inline-*, margin-inline-*) and needs no sign. */
:root { --dir: 1; }
:root[dir="rtl"] { --dir: -1; }

body {
    font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
    background: var(--bg-gradient);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    transition: background 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    overflow-x: hidden;
    touch-action: pan-y;
}

button, input, select, textarea {
    font: inherit;
}

:where(button, input, select, textarea, .player-card, .card-menu, .chip-item):focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
}

.player-card, .btn, .card-menu {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}

input, textarea, select, .secret-word, .copyable, .modal-card p {
    user-select: auto;
    -webkit-user-select: auto;
}

.btn, .player-card, .card-menu, .info-btn, .chip-item {
    touch-action: manipulation;
}

.app-container {
    width: 100%;
    max-width: 500px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid var(--border-glow);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
    position: relative;
    z-index: 1;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .app-container {
        background: var(--surface-card);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }
}

.header-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 14px;
}

h1, h2, h3 { text-align: center; margin-bottom: 12px; font-weight: 800; }

h1 {
    color: var(--brand-primary);
    font-size: 1.95rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

p { color: var(--text-secondary); text-align: center; font-size: 0.88rem; margin-bottom: 16px; line-height: 1.6; font-weight: 500; }

.hidden { display: none !important; }

/* First paint in a language other than Persian. js/preinit.js puts i18n-pending on <html> before the first paint
   and initI18n() takes it off once the texts are translated, so the page is never shown in Persian first (the
   page background still shows: it belongs to the canvas, not to the hidden body). The animation is the safety
   net and needs no JS: if the class is still there after one second (a script that failed to load or to run),
   the page appears anyway, so a JS failure can never leave a blank page. */
html.i18n-pending body { visibility: hidden; animation: i18nPendingReveal 0s linear 1s forwards; }
@keyframes i18nPendingReveal { to { visibility: visible; } }

/* Screen transitions — replayed only when the phase actually
   changes (see renderUI's screen-anim toggle), never on an
   in-place re-render of the same screen. */
@keyframes screenFadeSlideIn {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.screen-view.screen-anim { animation: screenFadeSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1); }

.btn {
    width: 100%; padding: 13px 18px; border: none; border-radius: 16px; font-size: 0.95rem;
    font-weight: 700; color: #ffffff; cursor: pointer; transition: all 0.2s ease; margin-top: 10px;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: linear-gradient(135deg, #0284c7, #7c3aed); color: #ffffff; }
.btn-emerald { background: linear-gradient(135deg, #059669, #047857); color: #ffffff; }
.btn-rose { background: linear-gradient(135deg, #e11d48, #9f1239); color: #ffffff; }
.btn-amber { background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a; }

.btn-ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glow); color: var(--text-secondary); box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.btn-sm { padding: 6px 12px; min-height: 40px; font-size: 0.78rem; border-radius: 10px; width: auto; margin: 0; }

.card-menu {
    display: block;
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-glow);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: start;
    color: inherit;
}
.card-menu:hover, .card-menu:focus-visible {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    background: rgba(15, 23, 42, 0.85);
}
.card-menu-title {
    display: block;
    text-align: start;
    margin-bottom: 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.card-menu-desc {
    display: block;
    text-align: start;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.input-group { margin-bottom: 12px; border: none; padding: 0; }
.input-group label, .label-text { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.input-control {
    width: 100%; padding: 11px 14px; background: var(--surface-input); border: 1px solid var(--border-glow);
    border-radius: 14px; color: white; font-size: max(16px, 0.95rem); transition: all 0.2s;
}
.input-control:focus { border-color: var(--brand-primary); }

.chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
    align-items: stretch;
}
/* Three short chips (the difficulty levels) stay in one row even on a narrow phone, where .chips-grid is one column. */
.chips-grid.chips-grid-3 { grid-template-columns: repeat(3, 1fr); }
.chip-item {
    background: var(--surface-input);
    border: 1px solid var(--border-glow);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 54px;
}
.chip-item:hover {
    border-color: var(--brand-primary);
    background: rgba(15, 23, 42, 0.8);
}
.chip-item.is-checked {
    border-color: var(--brand-primary);
    background: rgba(6, 182, 212, 0.12);
}
.chip-item input[type="checkbox"] {
    accent-color: var(--brand-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.hint-note { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.6; text-align: start; }
.hint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
.hint-chip {
    position: relative;
    background: var(--surface-input);
    border: 1px solid var(--border-glow);
    border-radius: 14px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    min-height: 76px;
}
.hint-chip input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.hint-chip-icon { font-size: 1.35rem; line-height: 1; }
.hint-chip-text { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.hint-chip:hover { border-color: var(--brand-primary); }
.hint-chip.is-checked {
    border-color: var(--brand-primary);
    background: rgba(6, 182, 212, 0.12);
}
.hint-chip.is-checked .hint-chip-text { color: var(--text-primary); }
.hint-chip-hard {
    border-style: dashed;
    border-color: rgba(244, 63, 94, 0.4);
}
.hint-chip-hard.is-checked {
    border-style: solid;
    border-color: var(--brand-rose);
    background: rgba(244, 63, 94, 0.14);
}
.hint-chip-tag {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    background: rgba(244, 63, 94, 0.9);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-2 > * { min-width: 0; }

@media (max-width: 380px) {
    .grid-2 { grid-template-columns: 1fr; }
    .chips-grid { grid-template-columns: 1fr; }
}

.toggle-item { background: rgba(15, 23, 42, 0.5); border: 1px solid var(--border-glow); padding: 10px 14px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.toggle-label-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.info-btn {
    background: none; border: none; color: var(--brand-primary);
    font-size: 0.95rem; cursor: pointer; padding: 4px; line-height: 1; border-radius: 50%;
    min-width: 40px; min-height: 40px; display: inline-grid; place-items: center;
}
.info-btn:hover { color: white; background: rgba(255,255,255,0.1); }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #334155; transition: 0.3s; border-radius: 24px; }
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; top: 3px;
    inset-inline-start: 3px;
    background-color: white; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%;
}
input:checked + .slider { background-color: var(--brand-primary); }
input:checked + .slider:before { transform: translateX(calc(20px * var(--dir))); }

.player-card {
    background: rgba(15, 23, 42, 0.65); border: 1px solid var(--border-glow);
    padding: 15px 12px; border-radius: 16px; text-align: center; cursor: pointer;
    font-weight: 600; color: var(--text-primary); transition: all 0.2s;
    width: 100%; font-size: max(16px, 0.95rem);
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}
.player-card:hover, .player-card:focus-visible { border-color: var(--brand-primary); transform: translateY(-2px); }
.player-card.disabled, .player-card:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(1); transform: none; }

.timer-card { background: var(--surface-input); border: 1px solid var(--border-glow); border-radius: 24px; padding: 18px; margin: 14px 0; text-align: center; }
.timer-display { font-size: 3.8rem; font-weight: 900; letter-spacing: 2px; color: var(--brand-primary); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.timer-warning { color: var(--brand-amber); animation: pulse 1s infinite; }
.timer-danger { color: var(--brand-rose); animation: pulse 0.5s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(2, 4, 10, 0.88);
    display: flex; overflow-y: auto; padding: 16px; z-index: 1000;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .modal-overlay {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}
@keyframes modalOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalCardPopIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-overlay:not(.hidden) { animation: modalOverlayFadeIn 0.18s ease both; }
.modal-overlay:not(.hidden) .modal-card { animation: modalCardPopIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.modal-card {
    margin: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    background: var(--surface-card); border: 1px solid var(--border-glow);
    border-radius: 24px; padding: 22px; width: 100%; max-width: 400px;
    text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
    overflow-y: auto;
}

.role-badge { display: inline-block; padding: 6px 18px; border-radius: 30px; font-size: 0.85rem; margin-bottom: 12px; font-weight: bold; }
.role-citizen { background: rgba(16, 185, 129, 0.15); color: var(--brand-emerald); border: 1px solid rgba(16, 185, 129, 0.3); }
.role-spy { background: rgba(244, 63, 94, 0.15); color: var(--brand-rose); border: 1px solid rgba(244, 63, 94, 0.3); }
.role-detective { background: rgba(6, 182, 212, 0.15); color: var(--brand-primary); border: 1px solid rgba(6, 182, 212, 0.3); }
.role-spectator { background: rgba(168, 85, 247, 0.15); color: var(--brand-secondary); border: 1px solid rgba(168, 85, 247, 0.3); }

.secret-box { background: var(--surface-input); padding: 14px; border-radius: 16px; margin: 14px 0; border: 1px dashed rgba(255, 255, 255, 0.15); }
.secret-word { font-size: 1.45rem; font-weight: 800; color: var(--brand-amber); margin-top: 4px; }
.quest-box { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glow); border-radius: 14px; padding: 10px 12px; margin-top: 10px; font-size: 0.82rem; color: var(--brand-primary); text-align: start; }

.score-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.9rem; }
.score-table th { color: var(--text-secondary); font-size: 0.78rem; padding: 8px; border-bottom: 1px solid var(--border-glow); }
.score-table td { padding: 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); text-align: center; }
.score-table th[scope="row"] { text-align: start; font-weight: 600; color: var(--text-primary); }
.score-table .rank-cell { font-size: 1rem; white-space: nowrap; }
.tie-note { display: block; font-size: 0.68rem; color: var(--text-secondary); font-weight: 500; opacity: 0.8; }

/* Podium — top 3 ranks. Each item is a content "card" (grows freely
   with its text, e.g. a wrapped tied-name) on top of a fixed-height
   "riser" bar per rank, so the 1st > 2nd > 3rd staircase always
   stays proportional regardless of how much text is in a card. */
.podium-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 22px;
}
.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 152px;
}
/* Single wrapper that owns the border/background/radius for the
   WHOLE column (card content + riser spacer together), so the two
   pieces read as one seamless pillar instead of a card sitting on
   top of a separately-colored block. overflow:hidden lets the
   rounded corners clip a background that is painted once, across
   the pillar's full rendered height. */
.podium-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 20px 20px 10px 10px;
    border: 1px solid var(--border-glow);
    overflow: hidden;
}
.podium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 16px 8px 12px;
    text-align: center;
    gap: 8px;
}
.podium-icon { font-size: 1.9rem; line-height: 1; }
.podium-name {
    font-weight: 800;
    font-size: 0.86rem;
    color: var(--text-primary);
    line-height: 1.35;
    width: 100%;
    overflow-wrap: break-word;
}
.podium-score { font-weight: 700; font-size: 0.78rem; }
.podium-tie-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
/* Plain fixed-height spacer now — no border/background of its own,
   it just pushes the pillar down to the per-rank step height. */
.podium-riser {
    width: 100%;
    flex-shrink: 0;
}
/* The podium reads silver, gold, bronze from the physical left to the physical right in both
   directions. Flex order runs from the inline start, so the default (LTR) order is 2nd, 1st, 3rd and
   the RTL override reverses the two outer columns (the lowest order sits on the physical right). */
.podium-item[data-rank="1"] { order: 2; }
.podium-item[data-rank="1"] .podium-pillar {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.24) 0%, rgba(245, 158, 11, 0.3) 100%);
    border-color: rgba(245, 158, 11, 0.55);
}
.podium-item[data-rank="1"] .podium-score { color: #f59e0b; }
.podium-item[data-rank="1"] .podium-riser { height: 66px; }
.podium-item[data-rank="2"] { order: 1; }
:root[dir="rtl"] .podium-item[data-rank="2"] { order: 3; }
.podium-item[data-rank="2"] .podium-pillar {
    background: linear-gradient(180deg, rgba(203, 213, 225, 0.18) 0%, rgba(203, 213, 225, 0.22) 100%);
    border-color: rgba(203, 213, 225, 0.4);
}
.podium-item[data-rank="2"] .podium-score { color: #cbd5e1; }
.podium-item[data-rank="2"] .podium-riser { height: 44px; }
.podium-item[data-rank="3"] { order: 3; }
:root[dir="rtl"] .podium-item[data-rank="3"] { order: 1; }
.podium-item[data-rank="3"] .podium-pillar {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.22) 0%, rgba(217, 119, 6, 0.28) 100%);
    border-color: rgba(217, 119, 6, 0.45);
}
.podium-item[data-rank="3"] .podium-score { color: #d97706; }
.podium-item[data-rank="3"] .podium-riser { height: 22px; }
@media (max-width: 380px) {
    .podium-card { padding: 12px 4px 10px; gap: 5px; }
    .podium-icon { font-size: 1.5rem; }
    .podium-name { font-size: 0.76rem; }
    .podium-item[data-rank="1"] .podium-riser { height: 54px; }
    .podium-item[data-rank="2"] .podium-riser { height: 36px; }
    .podium-item[data-rank="3"] .podium-riser { height: 18px; }
}

/* Targeted field validation feedback */
.field-hint { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.8; margin-top: 4px; }
@keyframes fieldErrorPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5); }
    50% { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); }
}
.field-error-pulse {
    border-color: var(--brand-rose) !important;
    animation: fieldErrorPulse 0.6s ease-in-out 2;
}

.accolade-card { background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glow); border-radius: 16px; padding: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; text-align: start; }
.accolade-icon { font-size: 1.8rem; }

.panic-btn-floating {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    inset-inline-start: max(16px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, 0.85); border: 1px solid var(--border-glow);
    color: var(--brand-amber); border-radius: 30px; padding: 8px 14px;
    font-size: 0.75rem; font-weight: bold; display: flex; align-items: center; gap: 6px;
    cursor: pointer; z-index: 2000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Custom native-like PWA install banner. Sits opposite the panic
   button (inline-end vs inline-start) so the two floating controls
   never collide, and stays hidden until `beforeinstallprompt` fires. */
.install-btn-floating {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    inset-inline-end: max(16px, env(safe-area-inset-right));
    background: rgba(15, 23, 42, 0.9); border: 1px solid var(--border-glow);
    color: var(--brand-primary); border-radius: 30px; padding: 8px 14px;
    font-size: 0.75rem; font-weight: bold; display: flex; align-items: center; gap: 6px;
    cursor: pointer; z-index: 2000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.install-btn-floating:active { transform: scale(0.97); }

/* In RTL the inline edges swap sides, so each button must read the inset of the side it is now on:
   the cover-mode button (inline-start) sits on the physical right, the install button (inline-end) on the
   physical left. The two rules above read the LTR sides; without these overrides a notch on the right
   (landscape) would cover the Persian cover-mode button while a left inset pushed it away for nothing.
   With no inset every value is still max(16px, 0) = 16px, so the Persian layout is unchanged. */
:root[dir="rtl"] .panic-btn-floating { inset-inline-start: max(16px, env(safe-area-inset-right)); }
:root[dir="rtl"] .install-btn-floating { inset-inline-end: max(16px, env(safe-area-inset-left)); }

#panic-shield {
    position: fixed; inset: 0; background: #000000; z-index: 99999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: #334155; cursor: pointer; touch-action: manipulation; border: none; width: 100%; height: 100%;
}

/* Pass-and-play hand-off gate — sits between every turn (reveal,
   vote, wager) so a stray tap on the wrong name can never expose
   someone else's card. Deliberately below .modal-overlay's z-index
   so an in-progress hold-to-reveal is still capped by the role
   card opening on top of it. */
#handoff-gate {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(2, 4, 10, 0.97);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #handoff-gate { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
#handoff-gate:not(.hidden) { animation: modalOverlayFadeIn 0.2s ease both; }
.handoff-card { text-align: center; max-width: 320px; width: 100%; margin: auto; }
.handoff-icon { font-size: 2.8rem; margin-bottom: 6px; animation: handoffPass 1.6s ease-in-out infinite; }
@keyframes handoffPass { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(6px * var(--dir) * -1)); } }
.handoff-caption { margin-bottom: 2px; font-size: 0.8rem; }
#handoff-name { color: var(--brand-primary); font-size: 1.6rem; }
.handoff-subtitle { font-size: 0.85rem; margin: 6px 0 22px; }
.handoff-action { min-height: 60px; font-size: 1.02rem; touch-action: manipulation; }
#handoff-gate[data-hold-mode="1"] .handoff-action {
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.handoff-action.holding { transform: scale(0.97); filter: brightness(1.15); }

#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: 90%; max-width: 400px; }
.toast { background: rgba(15, 23, 42, 0.95); border: 1px solid var(--border-glow); padding: 10px 16px; border-radius: 14px; color: var(--text-primary); font-size: 0.85rem; font-weight: 600; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.6); backdrop-filter: blur(12px); animation: fadeInDown 0.3s ease; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

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

.flex-row-gap-8 { display: flex; gap: 8px; }
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.text-start { text-align: start; }
.w-auto { width: auto; }
.m-0 { margin: 0; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.my-6 { margin-top: 6px; margin-bottom: 6px; }
.my-14 { margin-top: 14px; margin-bottom: 14px; }
.p-4-8 { padding: 4px 8px; }
.p-4-10 { padding: 4px 10px; }
.p-6-10 { padding: 6px 10px; }
.color-amber { color: var(--brand-amber); }
.color-rose { color: var(--brand-rose); }
.color-primary { color: var(--brand-primary); }
.color-emerald { color: var(--brand-emerald); }
.color-secondary { color: var(--text-secondary); }
.color-violet { color: #a855f7; }
.border-amber { border-color: var(--brand-amber); }
.border-rose { border-color: var(--brand-rose); }
.border-primary { border-color: var(--brand-primary); }
.fs-title-icon { font-size: 3rem; opacity: 0.3; }
.fs-subtitle-panic { font-size: 0.8rem; opacity: 0.4; margin-top: 8px; }
.scroll-y-160 { max-height: 160px; overflow-y: auto; }
.scroll-y-modal { max-height: 85vh; overflow-y: auto; }

/* Player details modal card: fixed-height flex column. Title/subtitle
   stay pinned at top, the stat list is the ONLY scrolling region
   (always starts at its own top), and the Close button sits outside
   that scroller, pinned at the bottom of the card — never something
   you have to scroll past or that gets dragged out of view. */
.details-modal-card {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}
.details-modal-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Player details modal — one card per player, grouped stat rows */
.detail-player-card {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border-glow);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}
.detail-player-card h4 {
    font-size: 0.98rem;
    margin: 0 0 6px;
    color: var(--text-primary);
}
.detail-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 12px 0 4px;
    opacity: 0.85;
}
.detail-section-title:first-of-type { margin-top: 2px; }
.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}
.detail-row span:last-child { font-weight: 700; color: var(--text-primary); flex-shrink: 0; }

/* Ambient background lighting - subtle, theme-aware glow */
body::before, body::after {
    content: "";
    position: fixed;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
body::before {
    top: -22%;
    inset-inline-start: -18%;
    background: var(--brand-primary);
    animation: ambientDrift1 17s ease-in-out infinite alternate;
}
body::after {
    bottom: -26%;
    inset-inline-end: -16%;
    background: var(--brand-secondary);
    animation: ambientDrift2 21s ease-in-out infinite alternate;
}
@keyframes ambientDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(calc(6% * var(--dir) * -1), 8%) scale(1.18); }
}
@keyframes ambientDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(calc(8% * var(--dir)), -6%) scale(1.12); }
}

/* Player names are user text in either script, so a Latin name inside the Persian UI (or a Persian name
   inside the English UI) must not take the page direction and scramble its punctuation or its
   neighbours. `plaintext` isolates the element and picks its direction from its own first strong
   letter. Use it only where the element holds nothing but the name (a field, a button, a centred title,
   an inline <strong>): with no strong letter at all (a name that is only a number, a cell that holds just
   a <bdi>) Chrome resolves it as LTR, which would flip the alignment of a table cell or heading. Block
   text that must keep following the page direction (table cells, headings) wraps the name in <bdi>. */
.name-input, .player-card, #handoff-name, #modal-player-name, strong, option { unicode-bidi: plaintext; }

/* Welcome screen play button */
.play-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 22px 0 24px;
}
.play-button {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05), 0 18px 40px -12px rgba(0, 0, 0, 0.75), 0 0 36px -4px var(--brand-primary);
    transition: transform 0.2s ease;
    animation: playPulse 3.2s ease-in-out infinite;
    flex-shrink: 0;
}
.play-button::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid var(--border-glow);
    opacity: 0.6;
}
.play-button:active { transform: scale(0.94); }
.play-button-icon {
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
    /* The play symbol points right in both directions, like every media control, so these two stay physical. */
    border-left: 30px solid #ffffff;
    margin-left: 6px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
@keyframes playPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05), 0 18px 40px -12px rgba(0, 0, 0, 0.75), 0 0 36px -4px var(--brand-primary); }
    50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.03), 0 18px 50px -10px rgba(0, 0, 0, 0.8), 0 0 54px 2px var(--brand-primary); }
}
.play-button-label { font-weight: 800; font-size: 1.02rem; color: var(--text-primary); }
.play-button-caption { font-size: 0.78rem; color: var(--text-secondary); text-align: center; max-width: 260px; }
/* Language switch (welcome screen only). The wrapper in index.html is dir="ltr", so the two buttons keep the
   same visual order ("فارسی  English") in both UI languages and a person can find his own language without
   reading the current one. The selected state is drawn from aria-pressed, so what is shown and what a screen
   reader announces can never disagree. */
.lang-switch-wrap { margin-top: 14px; }
.lang-switch { display: flex; gap: 8px; max-width: 280px; margin-inline: auto; }
.lang-btn { flex: 1; min-height: 44px; font-size: 0.9rem; }
.lang-btn[aria-pressed="true"],
.lang-btn[aria-pressed="true"]:hover {
    background: linear-gradient(135deg, #0284c7, #7c3aed);
    border-color: transparent;
    background-origin: border-box;
    color: #ffffff;
    cursor: default;
}
.credit-line { font-size: 0.66rem; color: var(--text-secondary); opacity: 0.45; text-align: center; margin-top: 16px; letter-spacing: 0.2px; }
/* Build line under the credit (welcome screen only): "v2.1.0 · 8f33eec" or "dev", written by ui/buildInfo.js. It is a
   .credit-line (same size, colour and opacity), only closer to the credit above it. It carries the .hidden class in
   index.html, so by default it is not drawn, takes no room and is not read by screen readers (display:none); a long
   press on the welcome title (#welcome-title) takes the class off for a few seconds (ui/buildInfoReveal.js). It is
   empty until JS writes it, and an empty one takes no room either. The bottom margin keeps it clear of the floating
   cover-mode and install buttons when it is showing and a short screen is scrolled to the end: the buttons are fixed
   16px above the bottom edge and 36px high (they reach 52px up), and below the last line the card's padding and
   border (17px) and the body padding (16px) leave 33px, so with the 16px that every <p> already has the line would
   sit 3px under them. 24px puts it 5px above them. */
.build-info { margin-top: 4px; margin-bottom: 24px; }
.build-info:empty { display: none; }
/* The welcome title is also the hidden handle that reveals the build line, so a long press on it must not start a text
   selection or open the browser's callout menu (the body already refuses selection, this makes it explicit and
   independent of the body rule). Only the title: nothing else changes how it reacts to touch. */
#welcome-title {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* Round number under the result title ("Round 3", or the Persian wording), written by ui/results.js. Colour and size come
   from the .color-secondary and .u-fs-082 classes on the element; this rule only pulls the line up, so it sits 6px under
   the title instead of the 12px that the heading's bottom margin would leave, and keeps the 16px below it that every <p>
   has. An empty line (a damaged save has no usable round number) takes no room. */
.result-round { margin-top: -6px; line-height: 1.4; }
.result-round:empty { display: none; }
.credit-link { color: inherit; text-decoration: none; opacity: 0.85; }
.credit-link:hover, .credit-link:focus-visible { opacity: 1; text-decoration: underline; }
.credit-link-coffee {
    font-size: 1.15rem; line-height: 1; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7em; height: 1.7em; margin-inline-start: 4px;
    border-radius: 50%; background: var(--surface-input);
}

/* Elimination reveal */
.elim-card { animation: elimPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes elimPopIn {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.elim-icon {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 6px;
    animation: elimIconBounce 0.6s ease;
}
@keyframes elimIconBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Vote-tie wheel */
.wheel-stage {
    display: flex;
    justify-content: center;
    margin: 8px auto 4px;
    max-width: 260px;
}
.wheel-svg { width: 100%; height: auto; display: block; overflow: visible; }
.wheel-label {
    fill: #f8fafc;
    font-weight: 800;
    font-size: 15px;
    font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
    paint-order: stroke;
    stroke: rgba(2, 4, 10, 0.55);
    stroke-width: 3px;
    stroke-linejoin: round;
}
#wheel-needle {
    transform-origin: 150px 150px;
    transform: rotate(0deg);
}
.wheel-needle-shape {
    fill: var(--brand-rose, #f43f5e);
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.wheel-hub {
    fill: #0f172a;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 3;
}
.tie-wheel-result-text { font-size: 1rem; font-weight: 800; min-height: 1.4em; color: var(--brand-amber); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 420px) { .app-container { padding: 16px; border-radius: 20px; } .timer-display { font-size: 3rem; } }


/* ==========================================================================
   Utilities
   These replace former inline `style=""` attributes. Typographic utilities use
   !important to keep the precedence inline styles had; display utilities do not,
   so the `.hidden` class (display:none !important) still wins when JS hides them.
   ========================================================================== */
.u-items-center { align-items: center !important; }
.u-bold { font-weight: bold !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-fs-075 { font-size: 0.75rem !important; }
.u-fs-078 { font-size: 0.78rem !important; }
.u-fs-080 { font-size: 0.8rem !important; }
.u-fs-082 { font-size: 0.82rem !important; }
.u-fs-086 { font-size: 0.86rem !important; }
.u-fs-110 { font-size: 1.1rem !important; }
.u-text-090 { font-size: 0.9rem !important; line-height: 1.7 !important; }
.u-text-095 { font-size: 0.95rem !important; line-height: 1.7 !important; }
.u-compact { padding: 2px 8px !important; font-size: 0.75rem !important; }
.u-pull-up { margin-top: -4px !important; }
.u-legend-full { float: none !important; width: 100% !important; }
.u-stack-10 { flex-direction: column !important; gap: 10px !important; }
.u-pointer { cursor: pointer !important; }
.u-p-6 { padding: 6px !important; }
.u-inline-block { display: inline-block; }
.u-row-between { display: flex; justify-content: space-between !important; align-items: center !important; width: 100% !important; }
.noscript-message { padding: 24px; text-align: center; }