/* ============================================================ ТЕМА ОФОРМЛЕНИЯ "ЧЁРНОЕ ЗОЛОТО" — тёмная тема сайта. Покупается в магазине, включается через POST /api/site-theme. Применяется как класс .theme-gold на (см. js/theme-starry.js). ФАЙЛ СГЕНЕРИРОВАН из css/theme-starry.css скриптом gen-dark-theme.js. Правки набора селекторов вносить в звёздную тему и перегенерировать, иначе темы разъедутся: новый компонент появится в одной и останется светлым пятном в остальных. Отличие от звёздной, помимо палитры: нейтрально-чёрный фон и насыщенное золото на кнопках и обводках, анимации нет. ============================================================ */ html.theme-gold body { background: linear-gradient(160deg, #0d0b09 0%, #17130f 35%, #221c15 70%, #080706 100%) !important; } /* Экраны-контейнеры (menu-screen и т.п.) обычно САМИ рисуют непрозрачный фон поверх всего (position:fixed;inset:0), из-за чего канвас со звёздами (z-index:0, см. ниже) оказался бы под ними и никогда не был виден. Делаем их прозрачными в этой теме — тёмный градиент и звёзды видны сквозь них с уровня body/canvas. */ html.theme-gold .menu-screen, html.theme-gold .spider-screen, html.theme-gold .monopoly-screen, html.theme-gold .mafia-screen, html.theme-gold .modal-screen, html.theme-gold .standalone-intro { background: transparent !important; } /* Лендинговые страницы игр (games/ИМЯ-ИГРЫ/index.html — "Монополия онлайн...", "Мафия онлайн..." и т.д., отдельные от самого игрового экрана) держат свою карточку-описание в .standalone-intro-card — та же "стеклянная" логика, что и у .menu-card/.game-card ниже (объединено с той же группой селекторов намеренно). Заголовки h1/h2 внутри неё объединены с группой .hero-title ниже (не отдельным правилом) — по необъяснённой причине браузер иногда молча "теряет" отдельно стоящее правило с этим конкретным селектором при парсинге (воспроизведено и подтверждено: rule count в разобранной таблице стилей на 1 меньше, чем количество правил в самом файле) — объединение с уже работающей группой надёжно обходит эту особенность. */ html.theme-gold .standalone-home-link, html.theme-gold .standalone-footnote { color: #8d7f6d !important; } /* Ночные оттенки карточек/панелей — те же полупрозрачные "стеклянные" блоки, что и в светлой теме, просто на тёмной подложке с холодным лунным акцентом вместо тёплого сиреневого. */ html.theme-gold .menu-card, html.theme-gold .game-card, html.theme-gold .rating-panel, html.theme-gold .auth-modal-card, html.theme-gold .profile-modal-card, html.theme-gold .standalone-intro-card { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.18) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; color: #e8dccd; } html.theme-gold .header-balance { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.25) !important; } html.theme-gold .header-logo { background: linear-gradient(135deg, #ffe0b4, #f5d020) !important; -webkit-background-clip: text !important; } html.theme-gold .hero-title, html.theme-gold .profile-header-name, html.theme-gold .game-name, html.theme-gold .standalone-intro-card h1, html.theme-gold .standalone-intro-card h2 { color: #f2e6d8 !important; } html.theme-gold .hero-sub, html.theme-gold .game-desc, html.theme-gold .game-players { color: #998a76; } /* ============================================================ ПОЛНЫЙ ПРОХОД ПО ТЕКСТУ И ОСТАВШИМСЯ СВЕТЛЫМ БЛОКАМ ------------------------------------------------------------ Правило темы: тёмный фон -> весь текст интерфейса белый/светлый, светлый фон -> весь текст тёмный (как было). До этого раздела переопределялись только несколько заметных мест — здесь собраны ВСЕ оставшиеся классы сайта с жёстко заданным тёмно-фиолетовым (#3a2a4a и похожие) или приглушённо-серым (#9080b0 и похожие) текстом, из-за которых на тёмном фоне буквы становились еле видны или сливались совсем (ровно баг с никами в рейтинге и цифрами баланса на скриншотах). Карт самих игр (.spider-card, доска монополии и т.п.) это НЕ касается — у них всегда свой белый фон независимо от темы сайта, трогать не нужно. ============================================================ */ /* -- Заголовочный текст (был тёмно-фиолетовым #3a2a4a) -> светлый -- */ html.theme-gold .menu-title, html.theme-gold .auth-form-title, html.theme-gold .auth-account-name, html.theme-gold .header-avatar-menu-name, html.theme-gold .header-balance .balance-amount, html.theme-gold .header-avatar-menu-profile, html.theme-gold .rating-title, html.theme-gold .rname, html.theme-gold .spider-title, html.theme-gold .promo-mycode-history-code, html.theme-gold .shop-item-name, html.theme-gold #mafiaRoomCodeDisplay, html.theme-gold .mafia-count-value, html.theme-gold .mafia-lobby-player-row, html.theme-gold .mafia-lobby-room-host { color: #f6ece0 !important; } /* -- Приглушённый серо-сиреневый текст (подписи, метки, второстепенные строки) -> светлее, чтобы не терялся на тёмном фоне -- */ html.theme-gold .menu-sub, html.theme-gold .auth-switch-link, html.theme-gold .auth-why-note, html.theme-gold .auth-tiny-note, html.theme-gold .auth-modal-close, html.theme-gold .auth-account-balance, html.theme-gold .nick-row label, html.theme-gold .games-label, html.theme-gold .site-version-footer, html.theme-gold .footer-telegram-link, html.theme-gold .back-link, html.theme-gold .hero-welcome, html.theme-gold .profile-loading, html.theme-gold .profile-tab, html.theme-gold .profile-empty-note, html.theme-gold .profile-history-date, html.theme-gold .rating-empty, html.theme-gold .rmeta, html.theme-gold .rrank, html.theme-gold .rating-my-rank, html.theme-gold .spider-topbar-stats, html.theme-gold .promo-hint, html.theme-gold .promo-mycode-desc, html.theme-gold .promo-empty, html.theme-gold .shop-empty-text, html.theme-gold .shop-item-cat, html.theme-gold .shop-item-desc, html.theme-gold .standalone-intro-card p, html.theme-gold .mafia-switch-label, html.theme-gold .mafia-role-chip-label, html.theme-gold .lobby-list-title, html.theme-gold .lobby-list-empty, html.theme-gold .mafia-lobby-room-meta { color: #ad9d88 !important; } html.theme-gold .mafia-role-chip:has(input:checked) .mafia-role-chip-label { color: #ffd8a0 !important; } html.theme-gold .rating-my-rank b { color: #ffe0b4 !important; } /* -- Поля ввода (логин/пароль/ник/промокод) — были белыми с тёмным текстом, теперь та же лунная "стеклянная" подложка -- */ html.theme-gold .auth-input, html.theme-gold .nick-input, html.theme-gold .promo-input { background: rgba(24, 20, 16, 0.5) !important; border-color: rgba(245, 208, 32, 0.3) !important; color: #f6ece0 !important; } /* -- Оставшиеся непрозрачные светлые "коробки" — карточка аккаунта, строки рейтинга, выпадающее меню аватарки, карточки магазина, кнопка "Назад" в играх, верхняя панель Пасьянса, неактивные вкладки рейтинга -- все переводим на тот же лунный полупрозрачный стиль -- */ html.theme-gold .auth-account-card, html.theme-gold .rrow, html.theme-gold .header-avatar-menu, html.theme-gold .shop-item-card, html.theme-gold .mono-back, html.theme-gold .spider-topbar, html.theme-gold .spider-undo-btn, html.theme-gold .net-auth-required-box, html.theme-gold .net-btn, html.theme-gold .lang-toggle-btn, html.theme-gold .mafia-settings-section, html.theme-gold .mafia-role-chip, html.theme-gold .mafia-lobby-room-card, html.theme-gold .mafia-lobby-player-row, html.theme-gold .mafia-count-btn, html.theme-gold .room-row, html.theme-gold .net-player-row, html.theme-gold #netRoomCodeDisplay, html.theme-gold .room-code-display, html.theme-gold .net-shuffle-btn, html.theme-gold .panel, html.theme-gold .inp, html.theme-gold .btn-ghost, html.theme-gold .mafia-add-bot-btn { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.22) !important; color: #f6ece0 !important; } html.theme-gold .panel-title, html.theme-gold .room-name { color: #f6ece0 !important; } html.theme-gold .or-divider { color: #ad9d88 !important; } html.theme-gold .or-divider::before, html.theme-gold .or-divider::after { background: rgba(245, 208, 32, 0.22) !important; } html.theme-gold .net-auth-required-text, html.theme-gold .net-lobby-hint, html.theme-gold .net-player-order-label, html.theme-gold .room-meta, html.theme-gold .room-players, html.theme-gold .online-label { color: #ad9d88 !important; } html.theme-gold .net-player-name { color: #f6ece0 !important; } html.theme-gold .game-pill, html.theme-gold .header-back-link { background: rgba(224, 160, 32, 0.18) !important; border-color: rgba(245, 208, 32, 0.3) !important; color: #ffd8a0 !important; } html.theme-gold .room-icon { background: rgba(245, 208, 32, 0.12) !important; } html.theme-gold .room-join { background: rgba(224, 160, 32, 0.25) !important; color: #ffd8a0 !important; } html.theme-gold .online-count { color: #f6ece0 !important; } /* Экран выбора сложности в Пасьянсе — своя отдельная светлая "стеклянная" коробка карточек выбора, отдельная от всего перечисленного выше. */ html.theme-gold .spider-difficulty-screen h1 { color: #f6ece0 !important; } html.theme-gold .spider-difficulty-screen p, html.theme-gold .spider-diff-btn .diff-sub { color: #ad9d88 !important; } html.theme-gold .spider-diff-btn { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.22) !important; } html.theme-gold .spider-diff-btn .diff-label { color: #f6ece0 !important; } html.theme-gold .spider-win-card { background: rgba(34, 28, 22, 0.92) !important; } html.theme-gold .spider-win-card h2 { color: #f6ece0 !important; } html.theme-gold .spider-win-card p { color: #ad9d88 !important; } html.theme-gold .rrow.top1 { background: linear-gradient(135deg, rgba(245, 200, 66, 0.16), rgba(245, 200, 66, 0.05)) !important; border-color: rgba(224, 160, 32, 0.3) !important; } html.theme-gold .rrow.me { background: rgba(224, 160, 32, 0.16) !important; border-color: rgba(255, 216, 160, 0.4) !important; } html.theme-gold .rtab { background: rgba(245, 208, 32, 0.14) !important; color: #c6b6a2 !important; } html.theme-gold .rtab:hover { background: rgba(245, 208, 32, 0.24) !important; } html.theme-gold .rtab.active { color: #fff !important; } html.theme-gold .spider-topbar-stats b, html.theme-gold .spider-back-btn { color: #f6ece0 !important; } html.theme-gold .promo-section-title { color: #dbcdbb !important; } html.theme-gold .promo-mycode { background: rgba(245, 208, 32, 0.12) !important; border-color: rgba(245, 208, 32, 0.4) !important; color: #ffe0b4 !important; } html.theme-gold .promo-copy-btn, html.theme-gold .shop-item-btn-owned, html.theme-gold .promo-redemption-reward { background: rgba(245, 208, 32, 0.14) !important; color: #ffe0b4 !important; } html.theme-gold .auth-logout-btn, html.theme-gold .spider-restart-btn { background: rgba(224, 96, 96, 0.14) !important; border-color: rgba(224, 96, 96, 0.4) !important; } /* Полотно фоновой анимации темы — рисуется в js/theme-starry.js, растянуто на весь экран позади контента (z-index ниже любого интерфейсного элемента), клики сквозь него не блокируются. Канвас ОДИН на все темы: у звёздной на нём падают звёзды, у "Крови системы" — ASCII-дождь. Тема без анимации просто его не показывает. */ /* z-index:-1, а НЕ 0. Элемент с отрицательным z-index рисуется поверх фона родителя, но под всем содержимым в потоке — именно это нам и нужно. При z-index:0 канвас оказывался выше любого непозиционированного контента: на экране выбора сложности в пасьянсе (.spider-difficulty-screen без position/z-index) символы дождя шли прямо по заголовку и тексту. Полагаться на то, что «у всех экранов и так z-index 500+», нельзя — у пасьянса его нет. */ #themeAnimCanvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; } /* Контентные слои сайта и так уже позиционированы поверх (menu-screen и т.д. используют z-index:500+), поэтому канвасу достаточно z-index:0 — он ложится прямо на фон, под всем остальным. */ /* ============================================================ КОМПОНЕНТЫ, ПОЯВИВШИЕСЯ ПОЗЖЕ САМОЙ ТЕМЫ Магазин, профиль и промокоды переписывались уже после того, как этот файл был написан, поэтому их поверхности оставались светлыми на тёмном фоне — светлый текст на светлой плашке. Держим их здесь, вместе с остальными: css/theme-ruby.css генерируется из этого файла, так что добавленное сюда автоматически попадает и во вторую тёмную тему. ============================================================ */ html.theme-gold .shop-card, html.theme-gold .profile-stat-big, html.theme-gold .profile-stat-game-row, html.theme-gold .profile-cosmetic-card, html.theme-gold .profile-pawn-card, html.theme-gold .profile-history-row, html.theme-gold .shop-exchange-box { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.18) !important; color: #f6ece0 !important; } html.theme-gold .shop-card-name, html.theme-gold .shop-section-title, html.theme-gold .profile-stat-big-num, html.theme-gold .profile-stat-game-name, html.theme-gold .profile-cosmetic-name, html.theme-gold .profile-pawn-label, html.theme-gold .profile-history-game, html.theme-gold .profile-locker-section-title, html.theme-gold .profile-settings-label, html.theme-gold .profile-header-name, html.theme-gold .shop-card-price { color: #f6ece0 !important; } html.theme-gold .shop-card-desc, html.theme-gold .shop-card-cat, html.theme-gold .shop-section-note, html.theme-gold .profile-stat-big-label, html.theme-gold .profile-stat-game-sub, html.theme-gold .profile-cosmetic-desc, html.theme-gold .profile-history-date, html.theme-gold .profile-settings-hint, html.theme-gold .profile-cosmetics-note, html.theme-gold .shop-empty-text, html.theme-gold .promo-mycode-desc, html.theme-gold .promo-hint { color: #ad9d88 !important; } /* Блок фактов внутри карточки товара и вкладки-разделы */ html.theme-gold .shop-card-facts { background: rgba(245, 208, 32, 0.1) !important; } html.theme-gold .shop-fact { color: #c6b6a2 !important; } html.theme-gold .shop-fact b { color: #f6ece0 !important; } html.theme-gold .shop-tab, html.theme-gold .profile-tab { color: #998a76 !important; } html.theme-gold .shop-tab.active, html.theme-gold .profile-tab.active { color: #ffe0b4 !important; } html.theme-gold .shop-tabs, html.theme-gold .profile-tabs { border-color: rgba(245, 208, 32, 0.18) !important; } html.theme-gold .profile-modal-header, html.theme-gold .rating-my-rank { border-color: rgba(245, 208, 32, 0.18) !important; } /* Поля ввода внутри магазина/промокодов */ html.theme-gold .shop-exchange-input, html.theme-gold .promo-input { background: rgba(24, 20, 16, 0.5) !important; border-color: rgba(245, 208, 32, 0.22) !important; color: #f6ece0 !important; } /* Блок "нужна подтверждённая почта" и статус почты в профиле: тёмный текст по светлой янтарной подложке на тёмном фоне не читается. */ html.theme-gold .promo-locked-title, html.theme-gold .profile-email-status.pending { color: #f5d060 !important; } html.theme-gold .promo-locked-text { color: #cfc6e8 !important; } html.theme-gold .profile-email-status.ok { color: #8fe0a4 !important; } /* Поле "получаешь" в обмене валюты. Это не input, а подсвеченная золотом плашка; её тёмно-золотой текст (#8a6a20) на тёмном фоне не читается, поэтому осветляем текст и приглушаем подложку. */ html.theme-gold .shop-exchange-output { background: rgba(245, 208, 66, 0.10) !important; border-color: rgba(245, 208, 66, 0.26) !important; color: #f5d060 !important; } /* Подложка превью фишек в магазине — в светлой теме лавандовая, на тёмном фоне выглядела бы светлым пятном. Золотую подложку пакетов звёзд (.shop-preview-star) намеренно не трогаем — золото смысловое. */ html.theme-gold .shop-preview-pawn { background: linear-gradient(160deg, rgba(34, 28, 22, 0.9), rgba(24, 20, 16, 0.95)) !important; } /* ============================================================ ПОЛОСЫ ПРОКРУТКИ Системная полоса светлая и на тёмном фоне выглядит белой лентой — особенно заметно в магазине и профиле, где прокрутка идёт внутри модалки. Красим и саму страницу, и все внутренние области. Цвета берутся из палитры темы, поэтому у каждой тёмной темы полоса своя (файлы генерируются из этого, см. gen-dark-theme.js). ============================================================ */ html.theme-gold ::-webkit-scrollbar { width: 10px; height: 10px; } html.theme-gold ::-webkit-scrollbar-track { background: rgba(24, 20, 16, 0.5); border-radius: 100px; } html.theme-gold ::-webkit-scrollbar-thumb { background: rgba(245, 208, 32, 0.22); border-radius: 100px; } html.theme-gold ::-webkit-scrollbar-thumb:hover { background: rgba(245, 208, 32, 0.4); } html.theme-gold ::-webkit-scrollbar-corner { background: transparent; } /* Firefox — своё свойство, наследуется вниз по дереву от корня. */ html.theme-gold { scrollbar-width: thin; scrollbar-color: rgba(245, 208, 32, 0.22) rgba(24, 20, 16, 0.5); } /* ============================================================ БАРАБАН УДАЧИ Страница появилась позже темы, поэтому её заголовок, подводка и элементы управления оставались тёмными на тёмном фоне — читать было нечем. Сам круг не трогаем: его сектора и подписи заданы своими цветами и одинаково читаются в любой теме. ============================================================ */ html.theme-gold .wheel-title { color: #f6ece0 !important; } html.theme-gold .wheel-lead, html.theme-gold .wheel-cost-label { color: #ad9d88 !important; } html.theme-gold .wheel-back { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.22) !important; color: #ffe0b4 !important; } html.theme-gold .wheel-bal { background: rgba(34, 28, 22, 0.55) !important; color: #f6ece0 !important; } /* Только НЕактивные кнопки: у выбранной свой фирменный градиент с белым текстом, и перекрашивать её под тему не нужно — иначе светлый текст становится приглушённым и выбранная ставка перестаёт выделяться. */ html.theme-gold .wheel-bet-btn:not(.active) { background: rgba(34, 28, 22, 0.55) !important; border-color: rgba(245, 208, 32, 0.22) !important; color: #c6b6a2 !important; } html.theme-gold .wheel-bet-btn:not(.active):hover { background: rgba(34, 28, 22, 0.8) !important; } html.theme-gold .wheel-result.lose { color: #ad9d88 !important; } html.theme-gold .wheel-demo-note { background: rgba(245, 200, 66, 0.1) !important; border-color: rgba(245, 200, 66, 0.3) !important; color: #f0d68f !important; } /* Палитра барабана удачи под эту тему (см. --wheel-* в games/roulette/wheel.css). Смысловое деление сохраняем: «пусто» — самый тусклый, ×5 — золото. Меняются только базовые оттенки, чтобы круг сидел на ночном фоне, а не светился как в светлой теме. */ /* ============================================================ ПАЛИТРА ИГРОВОГО ЭКРАНА МАФИИ ПОД ЭТУ ТЕМУ ------------------------------------------------------------ Задаётся на ПЕРЕСЕЧЕНИИ темы и фазы: у мафии день и ночь — игровой сигнал, и внутри любой темы день обязан оставаться заметно светлее ночи. Поэтому здесь два набора, а не один общий «тёмный». Значения по умолчанию (светлая тема сайта) живут в games/mafia/mafia.css, здесь только перекрытие. ============================================================ */ /* ============================================================ ПОДСВЕТКА БЛОКОВ Внешнее свечение + тонкая внутренняя грань, чтобы панели выглядели подсвеченными изнутри, а не просто перекрашенными. ============================================================ */ html.theme-gold .menu-card, html.theme-gold .game-card, html.theme-gold .rating-panel, html.theme-gold .auth-modal-card, html.theme-gold .profile-modal-card, html.theme-gold .standalone-intro-card, html.theme-gold .shop-card, html.theme-gold .panel { box-shadow: 0 0 0 1px rgba(245, 208, 32, 0.12), 0 4px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 235, 190, 0.06) !important; } html.theme-gold .game-card:hover, html.theme-gold .shop-card:hover { box-shadow: 0 0 0 1px rgba(245, 208, 32, 0.3), 0 10px 38px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 235, 190, 0.1) !important; } html.theme-gold .shop-tab.active, html.theme-gold .profile-tab.active, html.theme-gold .rtab.active { background: linear-gradient(135deg, rgba(224, 160, 32, 0.32), rgba(224, 160, 32, 0.14)) !important; box-shadow: inset 0 0 0 1px rgba(245, 208, 32, 0.3), 0 0 14px rgba(0, 0, 0, 0.45) !important; color: #ffd8a0 !important; } html.theme-gold .hero-title span { background: linear-gradient(135deg, #ffe6b8, #e0a020) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ ФИРМЕННЫЙ ГРАДИЕНТ В светлой теме кнопки, аватары и логотип используют фиолетовый градиент бренда — на тёмном цветном фоне он выбивался бы сиреневым пятном. Список селекторов = все места в css/menu.css с этим градиентом. ============================================================ */ html.theme-gold .nick-login-btn, html.theme-gold .auth-submit-btn, html.theme-gold .game-icon, html.theme-gold .header-login-btn, html.theme-gold .header-avatar, html.theme-gold .profile-header-avatar, html.theme-gold .game-card .beta-badge, html.theme-gold .game-card .game-btn, html.theme-gold .profile-settings-save-btn, html.theme-gold .promo-redeem-btn, html.theme-gold .rava, html.theme-gold .wheel-spin-btn, html.theme-gold .wheel-bet-btn.active, html.theme-gold .wheel-auth-btn, html.theme-gold .shop-btn { background: linear-gradient(135deg, rgba(245, 208, 32, 0.22), rgba(224, 160, 32, 0.14)) !important; color: #ffd8a0 !important; border: 1px solid rgba(245, 208, 32, 0.4) !important; box-shadow: none !important; } html.theme-gold .header-logo { background: linear-gradient(135deg, #ffe6b8, #e0a020) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html.theme-gold .shop-btn-owned, html.theme-gold .rating-retry-btn, html.theme-gold .promo-copy-btn { background: rgba(224, 160, 32, 0.18) !important; border-color: rgba(245, 208, 32, 0.3) !important; color: #ffd8a0 !important; box-shadow: none !important; } /* Золотую валюту НЕ трогаем: монеты и звёзды должны остаться узнаваемо золотыми в любой теме — это смысловой цвет, а не оформление. */ /* ============================================================ ПАЛИТРА БАРАБАНА УДАЧИ Сектора красятся из этих переменных (см. --wheel-* в games/roulette/wheel.css). Смысловое деление одинаково во всех темах: «пусто» самый тусклый, ×5 — золото. Меняется только базовый оттенок, чтобы круг сидел на фоне темы, а не выглядел чужим. ============================================================ */ html.theme-gold { --wheel-nothing: #2b2416; --wheel-half: #4a3c1e; --wheel-back: #6e5722; --wheel-x2: #4a5a24; --wheel-x5: #d4a017; --wheel-cosmetic:#7a5a1e; --wheel-text: #fff6e2; --wheel-rim: #5c4a1c; --wheel-hub: #4a3c18; } /* ============================================================ ПАЛИТРА ИГРОВОГО ЭКРАНА МАФИИ Два набора на тему: день и ночь. Внутри темы день СВЕТЛЕЕ ночи — смена фаз это игровой сигнал, по нему считывают фазу быстрее, чем по надписи, и уравнивать их нельзя. ============================================================ */ html.theme-gold .mafia-screen{ --mf-bg:linear-gradient(135deg,#3a3018 0%,#2e2612 45%,#1f1a0c 100%); --mf-panel:rgba(86,70,30,0.42); --mf-panel-2:rgba(76,62,26,0.64); --mf-border:rgba(230,190,90,0.22); --mf-divider:rgba(230,190,90,0.18); --mf-text:#fff6e2; --mf-text-dim:#ddc79a; --mf-text-faint:#b09a70; --mf-accent:#e8c464; --mf-accent-soft:rgba(212,160,23,0.18); --mf-accent-text:#f0d68f; --mf-accent-ring:rgba(212,160,23,0.40); --mf-timer:#ffdf9a; --mf-timer-glow:0 0 12px rgba(212,160,23,0.45); --mf-card-shadow:0 10px 28px rgba(20,14,4,0.5); --mf-mobile-panel:rgba(38,31,12,0.96); --mf-mobile-text:#fff6e2; --mf-mobile-faint:#b09a70; --mf-good:#7ad48c; --mf-bad:#f0889c; --mf-menu-bg:#2e2612; --mf-vote:#ffb0c0; --mf-blob-1:rgba(190,150,40,0.28); --mf-blob-2:rgba(140,110,30,0.24); } html.theme-gold .mafia-screen.night{ --mf-bg:linear-gradient(135deg,#1c1708 0%,#141005 50%,#0b0903 100%); --mf-panel:rgba(38,31,12,0.60); --mf-panel-2:rgba(44,36,14,0.75); --mf-border:rgba(230,190,90,0.13); --mf-divider:rgba(230,190,90,0.10); --mf-text:#f5e9cf; --mf-text-dim:#c0ab80; --mf-text-faint:#8f7d58; --mf-accent:#d4b256; --mf-accent-soft:rgba(212,160,23,0.12); --mf-accent-text:#d4b256; --mf-accent-ring:rgba(212,160,23,0.26); --mf-timer:#e8c87e; --mf-timer-glow:0 0 14px rgba(212,160,23,0.55); --mf-card-shadow:0 10px 28px rgba(0,0,0,0.65); --mf-good:#7ad48c; --mf-bad:#f0889c; --mf-menu-bg:#141005; --mf-vote:#ffb0c0; --mf-blob-1:rgba(150,115,25,0.24); --mf-blob-2:rgba(100,78,18,0.20); }