/* * 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. Direction is RTL (set on ). */ :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; } 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; } /* 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: right; 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: right; margin-bottom: 4px; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); } .card-menu-desc { display: block; text-align: right; 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; } .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: right; } .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(20px); } [dir="rtl"] input:checked + .slider:before { transform: translateX(-20px); } .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: right; } .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: right; 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; } /* Gold stays centered; silver moves to the visual left, bronze to the visual right (order is start→end, and this layout is RTL, so 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: 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: 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: right; } .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); } #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(6px); } } .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-right { text-align: right; } .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); } .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(6%, 8%) scale(1.18); } } @keyframes ambientDrift2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-8%, -6%) scale(1.12); } } /* 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; 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; } .credit-line { font-size: 0.66rem; color: var(--text-secondary); opacity: 0.45; text-align: center; margin-top: 16px; letter-spacing: 0.2px; } .credit-link { color: inherit; text-decoration: none; opacity: 0.85; } .credit-link:hover, .credit-link:focus-visible { opacity: 1; text-decoration: underline; } /* 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-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-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; }