/** * Unified theme for viewer / streamer / guide (aligned with ratings.html). * Requires: + page-bg-img / page-bg-overlay (see ratings.html). */ body.unified-page { background: #050505 !important; color: #c9c9c9; } body.unified-page .glow-bg { display: none !important; } /* ── Glass / panels ───────────────────────────────────────── */ body.unified-page .glass { background: rgba(24, 24, 27, 0.86) !important; border: 1px solid #27272a !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } body.unified-page .game-card { background: rgba(24, 24, 27, 0.8) !important; border: 1px solid #27272a !important; border-radius: 14px; transition: border-color 0.2s; } body.unified-page .game-card:hover { border-color: rgba(198, 40, 40, 0.35) !important; } /* ── Typography ───────────────────────────────────────────── */ body.unified-page h1.text-2xl, body.unified-page h1.text-3xl, body.unified-page .text-3xl.font-black, body.unified-page h2.text-xl.font-black, body.unified-page h2.text-lg.font-black, body.unified-page h2.text-base.font-black { color: #ececec !important; } body.unified-page .text-white { color: #ececec !important; } /* ── Language switcher (match ratings accent) ───────────── */ body.unified-page .lang-btn--active { background: rgba(198, 40, 40, 0.35) !important; color: #ffcdd2 !important; } /* ── Streamer toggles / toast / spinner ─────────────────── */ body.unified-page .toggle-track.on { background: rgba(198, 40, 40, 0.55) !important; border-color: rgba(239, 154, 154, 0.45) !important; } body.unified-page .toast { background: rgba(24, 24, 27, 0.99) !important; border: 1px solid rgba(198, 40, 40, 0.35) !important; color: #c9c9c9 !important; } body.unified-page .spinner { border: 3px solid rgba(255, 255, 255, 0.08) !important; border-top-color: #c62828 !important; } /* ── Viewer: economy & meta ───────────────────────────────── */ body.unified-page .eco-mini-card { background: rgba(39, 39, 42, 0.7) !important; border: 1px solid #27272a !important; } body.unified-page .eco-mini-card:hover { background: rgba(39, 39, 42, 0.78) !important; } body.unified-page .eco-mini-card[style*="cursor:pointer"]:hover { border-color: rgba(198, 40, 40, 0.35) !important; } body.unified-page #best-game-card.clickable:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(198, 40, 40, 0.28) !important; } body.unified-page #meta-card:hover { border-color: rgba(198, 40, 40, 0.25) !important; } body.unified-page .arena-acc-live-btn { background: #c62828 !important; } body.unified-page .arena-acc-live-btn:hover { background: #8e1616 !important; } /* ── Modals (viewer) ────────────────────────────────────── */ body.unified-page .modal-box { background: rgba(24, 24, 27, 0.99) !important; border: 1px solid #27272a !important; } body.unified-page .modal-select:focus { border-color: rgba(198, 40, 40, 0.45) !important; } body.unified-page .modal-select option { background: #18181b !important; } body.unified-page .modal-btn-primary { background: linear-gradient(135deg, #c62828, #8e1616) !important; } body.unified-page #modal-allplayers .modal-box { background: rgba(24, 24, 27, 0.99) !important; border: 1px solid #27272a !important; } body.unified-page .ap-search-wrap { background: rgba(26, 26, 26, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; } body.unified-page .ap-search-wrap:focus-within { border-color: rgba(198, 40, 40, 0.45) !important; box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.15); } body.unified-page .ap-search-input { color: #e2e8f0 !important; } body.unified-page .ap-search-input::placeholder { color: #555 !important; } body.unified-page .ap-player-row:hover { background: rgba(198, 40, 40, 0.08) !important; border-color: rgba(198, 40, 40, 0.22) !important; } body.unified-page .ap-avatar { background: linear-gradient(135deg, rgba(198, 40, 40, 0.22), rgba(198, 40, 40, 0.08)) !important; border-color: rgba(198, 40, 40, 0.28) !important; color: #ef9a9a !important; } /* Search-row style inputs (H2H / friends) */ body.unified-page .uf-ctrl-input { width: 100%; box-sizing: border-box; background: rgba(26, 26, 26, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 14px; color: #e2e8f0; font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } body.unified-page .uf-ctrl-input.flex-1 { width: auto; } body.unified-page .uf-ctrl-input::placeholder { color: #555; } body.unified-page .uf-ctrl-input:focus { border-color: rgba(198, 40, 40, 0.45); box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.15); } /* Accent pill button (аналог чипа / вторичного действия в шапке рейтинга) */ body.unified-page .uf-pill-btn { flex-shrink: 0; background: rgba(198, 40, 40, 0.12); border: 1px solid rgba(198, 40, 40, 0.35); border-radius: 12px; padding: 8px 14px; color: #ef9a9a; font-size: 0.8rem; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } body.unified-page .uf-pill-btn:hover { background: rgba(198, 40, 40, 0.22); border-color: rgba(198, 40, 40, 0.5); } body.unified-page #vach-share-btn.uf-share-btn { display: none; margin-top: 14px; width: 100%; padding: 9px 14px; border-radius: 12px; background: rgba(198, 40, 40, 0.12); border: 1px solid rgba(198, 40, 40, 0.35); color: #ef9a9a; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; } body.unified-page #vach-share-btn.uf-share-btn:hover { background: rgba(198, 40, 40, 0.22); border-color: rgba(198, 40, 40, 0.5); } /* Achievement popup */ body.unified-page .vach-modal { background: linear-gradient(160deg, rgba(24, 24, 27, 0.96), rgba(14, 14, 16, 0.98)) !important; border: 1px solid #27272a !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 32px rgba(198, 40, 40, 0.12) !important; } body.unified-page .vach-icon { filter: drop-shadow(0 0 14px rgba(198, 40, 40, 0.45)) !important; } body.unified-page .vach-type { color: #ef9a9a !important; } /* Share modal */ body.unified-page .share-box { background: #18181b !important; border: 1px solid #27272a !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(198, 40, 40, 0.08) !important; } body.unified-page .share-header-title, body.unified-page .share-opt-label { color: #ececec !important; } body.unified-page .share-opt.png { border-color: rgba(198, 40, 40, 0.22) !important; } body.unified-page .share-opt.png:hover { background: rgba(198, 40, 40, 0.08) !important; border-color: rgba(198, 40, 40, 0.35) !important; } /* Game detail sheet */ body.unified-page #gd-modal { background: #18181b !important; border-color: #27272a !important; } /* Analytics accents */ body.unified-page .analytics-nom-name { color: #e8e8e8 !important; } body.unified-page .analytics-personal-row strong { color: #ef9a9a !important; } /* Scrollbar */ body.unified-page ::-webkit-scrollbar-thumb { background: rgba(198, 40, 40, 0.35) !important; } /* ── Guide page (guide.css overrides) ─────────────────────── */ body.unified-page .nav-link:hover { background: rgba(198, 40, 40, 0.1) !important; color: #ef9a9a !important; border-color: rgba(198, 40, 40, 0.22) !important; } body.unified-page .nav-link.active { background: rgba(198, 40, 40, 0.14) !important; color: #ffcdd2 !important; border-color: rgba(198, 40, 40, 0.3) !important; } body.unified-page .section-emoji { filter: drop-shadow(0 0 18px rgba(198, 40, 40, 0.45)) !important; } body.unified-page .tip-box { background: rgba(198, 40, 40, 0.07) !important; border-color: rgba(198, 40, 40, 0.22) !important; } body.unified-page .tip-box strong { color: #ef9a9a !important; } body.unified-page .formula { color: #ef9a9a !important; border-color: rgba(255, 255, 255, 0.08) !important; } body.unified-page .stat-value { color: #ef9a9a !important; } body.unified-page .badge-purple { color: #ef9a9a !important; border-color: rgba(198, 40, 40, 0.35) !important; background: rgba(198, 40, 40, 0.1) !important; } body.unified-page .footer-link:hover { color: #ef9a9a !important; } /* ── Viewer.css legacy purple accents ───────────────────────── */ body.unified-page .ds-avatar { background: linear-gradient(135deg, rgba(198, 40, 40, 0.28), rgba(198, 40, 40, 0.08)) !important; border-color: rgba(198, 40, 40, 0.28) !important; color: #ef9a9a !important; } body.unified-page .ds-progress-fill { background: linear-gradient(90deg, #c62828, #ef9a9a) !important; } body.unified-page .ds-game-code { color: #c62828 !important; } body.unified-page .gh-sl-row.has-ivs:hover .gh-sl-expand { color: #ef9a9a !important; } body.unified-page .arena-acc-rank { color: #ef9a9a !important; background: rgba(198, 40, 40, 0.12) !important; border-color: rgba(198, 40, 40, 0.28) !important; } body.unified-page details[open] .arena-acc-chevron { color: #ef9a9a !important; } body.unified-page .arena-acc-bar-fill { background: linear-gradient(to right, #c62828, #ef9a9a) !important; } body.unified-page .analytics-personal-title { color: #ef9a9a !important; } /* ── Notifications modal (notifications.css) ──────────────── */ body.unified-page .notif-box { background: rgba(24, 24, 27, 0.99) !important; border: 1px solid #27272a !important; } body.unified-page #bell-badge { box-shadow: 0 0 0 2px #050505 !important; } body.unified-page .notif-item.unread { background: rgba(198, 40, 40, 0.1) !important; border-color: rgba(198, 40, 40, 0.25) !important; } body.unified-page .notif-item.unread:hover { background: rgba(198, 40, 40, 0.16) !important; }