/* ============================================================
   ТЕМА ОФОРМЛЕНИЯ "ЗВЁЗДНОЕ НЕБО" — покупается в магазине (js/shop-ui.js),
   включается/выключается через POST /api/site-theme. Применяется как
   класс .theme-starry на <html> (см. js/theme-starry.js) — грузится ПОСЛЕ
   всех остальных стилей на каждой странице сайта, поэтому здесь можно
   просто переопределять те же самые фоновые градиенты через тот же
   уровень специфичности + !important (страницы дублируют один и тот же
   светлый градиент в нескольких CSS-файлах и инлайновых <style>, единого
   общего источника для фона пока нет — этот файл переопределяет их все
   разом, не трогая сами оригиналы).
============================================================ */

html.theme-starry body {
  background: linear-gradient(160deg, #0a0e2a 0%, #151238 35%, #1e1550 70%, #0d0a24 100%) !important;
}

/* Экраны-контейнеры (menu-screen и т.п.) обычно САМИ рисуют непрозрачный
   фон поверх всего (position:fixed;inset:0), из-за чего канвас со звёздами
   (z-index:0, см. ниже) оказался бы под ними и никогда не был виден.
   Делаем их прозрачными в этой теме — тёмный градиент и звёзды видны
   сквозь них с уровня body/canvas. */
html.theme-starry .menu-screen,
html.theme-starry .spider-screen,
html.theme-starry .monopoly-screen,
html.theme-starry .mafia-screen,
html.theme-starry .modal-screen,
html.theme-starry .standalone-intro {
  background: transparent !important;
}

/* Лендинговые страницы игр (games/ИМЯ-ИГРЫ/index.html — "Монополия онлайн...",
   "Мафия онлайн..." и т.д., отдельные от самого игрового экрана) держат
   свою карточку-описание в .standalone-intro-card — та же "стеклянная"
   логика, что и у .menu-card/.game-card ниже (объединено с той же
   группой селекторов намеренно). Заголовки h1/h2 внутри неё объединены с
   группой .hero-title ниже (не отдельным правилом) — по необъяснённой
   причине браузер иногда молча "теряет" отдельно стоящее правило с этим
   конкретным селектором при парсинге (воспроизведено и подтверждено:
   rule count в разобранной таблице стилей на 1 меньше, чем количество
   правил в самом файле) — объединение с уже работающей группой надёжно
   обходит эту особенность. */
html.theme-starry .standalone-home-link,
html.theme-starry .standalone-footnote {
  color: #a89cd8 !important;
}

/* Ночные оттенки карточек/панелей — те же полупрозрачные "стеклянные"
   блоки, что и в светлой теме, просто на тёмной подложке с холодным
   лунным акцентом вместо тёплого сиреневого. */
html.theme-starry .menu-card,
html.theme-starry .game-card,
html.theme-starry .rating-panel,
html.theme-starry .auth-modal-card,
html.theme-starry .profile-modal-card,
html.theme-starry .standalone-intro-card {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.18) !important;
  box-shadow: 0 10px 40px rgba(5, 5, 20, 0.4) !important;
  color: #e4e2f8;
}

html.theme-starry .header-balance {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.25) !important;
}

html.theme-starry .header-logo {
  background: linear-gradient(135deg, #c8b8ff, #8a9bff) !important;
  -webkit-background-clip: text !important;
}

html.theme-starry .hero-title,
html.theme-starry .profile-header-name,
html.theme-starry .game-name,
html.theme-starry .standalone-intro-card h1,
html.theme-starry .standalone-intro-card h2 {
  color: #e8e6ff !important;
}

html.theme-starry .hero-sub,
html.theme-starry .game-desc,
html.theme-starry .game-players {
  color: #a8a4d8;
}

/* ============================================================
   ПОЛНЫЙ ПРОХОД ПО ТЕКСТУ И ОСТАВШИМСЯ СВЕТЛЫМ БЛОКАМ
   ------------------------------------------------------------
   Правило темы: тёмный фон -> весь текст интерфейса белый/светлый,
   светлый фон -> весь текст тёмный (как было). До этого раздела
   переопределялись только несколько заметных мест — здесь собраны ВСЕ
   оставшиеся классы сайта с жёстко заданным тёмно-фиолетовым (#3a2a4a и
   похожие) или приглушённо-серым (#9080b0 и похожие) текстом, из-за
   которых на тёмном фоне буквы становились еле видны или сливались
   совсем (ровно баг с никами в рейтинге и цифрами баланса на скриншотах).
   Карт самих игр (.spider-card, доска монополии и т.п.) это НЕ касается —
   у них всегда свой белый фон независимо от темы сайта, трогать не нужно.
============================================================ */

/* -- Заголовочный текст (был тёмно-фиолетовым #3a2a4a) -> светлый -- */
html.theme-starry .menu-title,
html.theme-starry .auth-form-title,
html.theme-starry .auth-account-name,
html.theme-starry .header-avatar-menu-name,
html.theme-starry .header-balance .balance-amount,
html.theme-starry .header-avatar-menu-profile,
html.theme-starry .rating-title,
html.theme-starry .rname,
html.theme-starry .spider-title,
html.theme-starry .promo-mycode-history-code,
html.theme-starry .shop-item-name,
html.theme-starry #mafiaRoomCodeDisplay,
html.theme-starry .mafia-count-value,
html.theme-starry .mafia-lobby-player-row,
html.theme-starry .mafia-lobby-room-host {
  color: #eceaff !important;
}

/* -- Приглушённый серо-сиреневый текст (подписи, метки, второстепенные
      строки) -> светлее, чтобы не терялся на тёмном фоне -- */
html.theme-starry .menu-sub,
html.theme-starry .auth-switch-link,
html.theme-starry .auth-why-note,
html.theme-starry .auth-tiny-note,
html.theme-starry .auth-modal-close,
html.theme-starry .auth-account-balance,
html.theme-starry .nick-row label,
html.theme-starry .games-label,
html.theme-starry .site-version-footer,
html.theme-starry .footer-telegram-link,
html.theme-starry .back-link,
html.theme-starry .hero-welcome,
html.theme-starry .profile-loading,
html.theme-starry .profile-tab,
html.theme-starry .profile-empty-note,
html.theme-starry .profile-history-date,
html.theme-starry .rating-empty,
html.theme-starry .rmeta,
html.theme-starry .rrank,
html.theme-starry .rating-my-rank,
html.theme-starry .spider-topbar-stats,
html.theme-starry .promo-hint,
html.theme-starry .promo-mycode-desc,
html.theme-starry .promo-empty,
html.theme-starry .shop-empty-text,
html.theme-starry .shop-item-cat,
html.theme-starry .shop-item-desc,
html.theme-starry .standalone-intro-card p,
html.theme-starry .mafia-switch-label,
html.theme-starry .mafia-role-chip-label,
html.theme-starry .lobby-list-title,
html.theme-starry .lobby-list-empty,
html.theme-starry .mafia-lobby-room-meta {
  color: #b8b4e0 !important;
}
html.theme-starry .mafia-role-chip:has(input:checked) .mafia-role-chip-label {
  color: #d8b8ff !important;
}
html.theme-starry .rating-my-rank b {
  color: #c8b8ff !important;
}

/* -- Поля ввода (логин/пароль/ник/промокод) — были белыми с тёмным
      текстом, теперь та же лунная "стеклянная" подложка -- */
html.theme-starry .auth-input,
html.theme-starry .nick-input,
html.theme-starry .promo-input {
  background: rgba(20, 18, 46, 0.5) !important;
  border-color: rgba(150, 160, 255, 0.3) !important;
  color: #eceaff !important;
}

/* -- Оставшиеся непрозрачные светлые "коробки" — карточка аккаунта,
      строки рейтинга, выпадающее меню аватарки, карточки магазина,
      кнопка "Назад" в играх, верхняя панель Пасьянса, неактивные вкладки
      рейтинга -- все переводим на тот же лунный полупрозрачный стиль -- */
html.theme-starry .auth-account-card,
html.theme-starry .rrow,
html.theme-starry .header-avatar-menu,
html.theme-starry .shop-item-card,
html.theme-starry .mono-back,
html.theme-starry .spider-topbar,
html.theme-starry .spider-undo-btn,
html.theme-starry .net-auth-required-box,
html.theme-starry .net-btn,
html.theme-starry .lang-toggle-btn,
html.theme-starry .mafia-settings-section,
html.theme-starry .mafia-role-chip,
html.theme-starry .mafia-lobby-room-card,
html.theme-starry .mafia-lobby-player-row,
html.theme-starry .mafia-count-btn,
html.theme-starry .room-row,
html.theme-starry .net-player-row,
html.theme-starry #netRoomCodeDisplay,
html.theme-starry .room-code-display,
html.theme-starry .net-shuffle-btn,
html.theme-starry .panel,
html.theme-starry .inp,
html.theme-starry .btn-ghost,
html.theme-starry .mafia-add-bot-btn {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.22) !important;
  color: #eceaff !important;
}
html.theme-starry .panel-title,
html.theme-starry .room-name {
  color: #eceaff !important;
}
html.theme-starry .or-divider {
  color: #b8b4e0 !important;
}
html.theme-starry .or-divider::before,
html.theme-starry .or-divider::after {
  background: rgba(150, 160, 255, 0.22) !important;
}
html.theme-starry .net-auth-required-text,
html.theme-starry .net-lobby-hint,
html.theme-starry .net-player-order-label,
html.theme-starry .room-meta,
html.theme-starry .room-players,
html.theme-starry .online-label {
  color: #b8b4e0 !important;
}
html.theme-starry .net-player-name {
  color: #eceaff !important;
}
html.theme-starry .game-pill,
html.theme-starry .header-back-link {
  background: rgba(144, 96, 200, 0.18) !important;
  border-color: rgba(150, 160, 255, 0.3) !important;
  color: #d0b8ff !important;
}
html.theme-starry .room-icon {
  background: rgba(150, 160, 255, 0.12) !important;
}
html.theme-starry .room-join {
  background: rgba(144, 96, 200, 0.25) !important;
  color: #d0b8ff !important;
}
html.theme-starry .online-count {
  color: #eceaff !important;
}

/* Экран выбора сложности в Пасьянсе — своя отдельная светлая "стеклянная"
   коробка карточек выбора, отдельная от всего перечисленного выше. */
html.theme-starry .spider-difficulty-screen h1 {
  color: #eceaff !important;
}
html.theme-starry .spider-difficulty-screen p,
html.theme-starry .spider-diff-btn .diff-sub {
  color: #b8b4e0 !important;
}
html.theme-starry .spider-diff-btn {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.22) !important;
}
html.theme-starry .spider-diff-btn .diff-label {
  color: #eceaff !important;
}
html.theme-starry .spider-win-card {
  background: rgba(30, 26, 60, 0.92) !important;
}
html.theme-starry .spider-win-card h2 {
  color: #eceaff !important;
}
html.theme-starry .spider-win-card p {
  color: #b8b4e0 !important;
}
html.theme-starry .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-starry .rrow.me {
  background: rgba(144, 96, 200, 0.16) !important;
  border-color: rgba(180, 150, 255, 0.4) !important;
}
html.theme-starry .rtab {
  background: rgba(150, 160, 255, 0.14) !important;
  color: #c8c4ec !important;
}
html.theme-starry .rtab:hover {
  background: rgba(150, 160, 255, 0.24) !important;
}
html.theme-starry .rtab.active {
  color: #fff !important;
}
html.theme-starry .spider-topbar-stats b,
html.theme-starry .spider-back-btn {
  color: #eceaff !important;
}
html.theme-starry .promo-section-title {
  color: #d8d4f4 !important;
}
html.theme-starry .promo-mycode {
  background: rgba(150, 160, 255, 0.12) !important;
  border-color: rgba(150, 160, 255, 0.4) !important;
  color: #c8b8ff !important;
}
html.theme-starry .promo-copy-btn,
html.theme-starry .shop-item-btn-owned,
html.theme-starry .promo-redemption-reward {
  background: rgba(150, 160, 255, 0.14) !important;
  color: #c8b8ff !important;
}
html.theme-starry .auth-logout-btn,
html.theme-starry .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;
}
html.theme-starry #themeAnimCanvas {
  display: block;
}
/* Контентные слои сайта и так уже позиционированы поверх (menu-screen
   и т.д. используют z-index:500+), поэтому канвасу достаточно z-index:0 —
   он ложится прямо на фон, под всем остальным. */

/* ============================================================
   КОМПОНЕНТЫ, ПОЯВИВШИЕСЯ ПОЗЖЕ САМОЙ ТЕМЫ
   Магазин, профиль и промокоды переписывались уже после того, как этот
   файл был написан, поэтому их поверхности оставались светлыми на тёмном
   фоне — светлый текст на светлой плашке. Держим их здесь, вместе с
   остальными: css/theme-ruby.css генерируется из этого файла, так что
   добавленное сюда автоматически попадает и во вторую тёмную тему.
============================================================ */
html.theme-starry .shop-card,
html.theme-starry .profile-stat-big,
html.theme-starry .profile-stat-game-row,
html.theme-starry .profile-cosmetic-card,
html.theme-starry .profile-pawn-card,
html.theme-starry .profile-history-row,
html.theme-starry .shop-exchange-box {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.18) !important;
  color: #eceaff !important;
}

html.theme-starry .shop-card-name,
html.theme-starry .shop-section-title,
html.theme-starry .profile-stat-big-num,
html.theme-starry .profile-stat-game-name,
html.theme-starry .profile-cosmetic-name,
html.theme-starry .profile-pawn-label,
html.theme-starry .profile-history-game,
html.theme-starry .profile-locker-section-title,
html.theme-starry .profile-settings-label,
html.theme-starry .profile-header-name,
html.theme-starry .shop-card-price {
  color: #eceaff !important;
}

html.theme-starry .shop-card-desc,
html.theme-starry .shop-card-cat,
html.theme-starry .shop-section-note,
html.theme-starry .profile-stat-big-label,
html.theme-starry .profile-stat-game-sub,
html.theme-starry .profile-cosmetic-desc,
html.theme-starry .profile-history-date,
html.theme-starry .profile-settings-hint,
html.theme-starry .profile-cosmetics-note,
html.theme-starry .shop-empty-text,
html.theme-starry .promo-mycode-desc,
html.theme-starry .promo-hint {
  color: #b8b4e0 !important;
}

/* Блок фактов внутри карточки товара и вкладки-разделы */
html.theme-starry .shop-card-facts {
  background: rgba(150, 160, 255, 0.1) !important;
}
html.theme-starry .shop-fact {
  color: #c8c4ec !important;
}
html.theme-starry .shop-fact b {
  color: #eceaff !important;
}
html.theme-starry .shop-tab,
html.theme-starry .profile-tab {
  color: #a8a4d8 !important;
}
html.theme-starry .shop-tab.active,
html.theme-starry .profile-tab.active {
  color: #c8b8ff !important;
}
html.theme-starry .shop-tabs,
html.theme-starry .profile-tabs {
  border-color: rgba(150, 160, 255, 0.18) !important;
}
html.theme-starry .profile-modal-header,
html.theme-starry .rating-my-rank {
  border-color: rgba(150, 160, 255, 0.18) !important;
}

/* Поля ввода внутри магазина/промокодов */
html.theme-starry .shop-exchange-input,
html.theme-starry .promo-input {
  background: rgba(20, 18, 46, 0.5) !important;
  border-color: rgba(150, 160, 255, 0.22) !important;
  color: #eceaff !important;
}

/* Блок "нужна подтверждённая почта" и статус почты в профиле: тёмный
   текст по светлой янтарной подложке на тёмном фоне не читается. */
html.theme-starry .promo-locked-title,
html.theme-starry .profile-email-status.pending {
  color: #f5d060 !important;
}
html.theme-starry .promo-locked-text {
  color: #cfc6e8 !important;
}
html.theme-starry .profile-email-status.ok {
  color: #8fe0a4 !important;
}

/* Поле "получаешь" в обмене валюты. Это не input, а подсвеченная золотом
   плашка; её тёмно-золотой текст (#8a6a20) на тёмном фоне не читается,
   поэтому осветляем текст и приглушаем подложку. */
html.theme-starry .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-starry .shop-preview-pawn {
  background: linear-gradient(160deg, rgba(30, 26, 60, 0.9), rgba(20, 18, 46, 0.95)) !important;
}

/* ============================================================
   ПОЛОСЫ ПРОКРУТКИ
   Системная полоса светлая и на тёмном фоне выглядит белой лентой —
   особенно заметно в магазине и профиле, где прокрутка идёт внутри
   модалки. Красим и саму страницу, и все внутренние области.
   Цвета берутся из палитры темы, поэтому у каждой тёмной темы полоса
   своя (файлы генерируются из этого, см. gen-dark-theme.js).
============================================================ */
html.theme-starry ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.theme-starry ::-webkit-scrollbar-track {
  background: rgba(20, 18, 46, 0.5);
  border-radius: 100px;
}
html.theme-starry ::-webkit-scrollbar-thumb {
  background: rgba(150, 160, 255, 0.22);
  border-radius: 100px;
}
html.theme-starry ::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 160, 255, 0.4);
}
html.theme-starry ::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox — своё свойство, наследуется вниз по дереву от корня. */
html.theme-starry {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 160, 255, 0.22) rgba(20, 18, 46, 0.5);
}

/* ============================================================
   БАРАБАН УДАЧИ
   Страница появилась позже темы, поэтому её заголовок, подводка и
   элементы управления оставались тёмными на тёмном фоне — читать было
   нечем. Сам круг не трогаем: его сектора и подписи заданы своими
   цветами и одинаково читаются в любой теме.
============================================================ */
html.theme-starry .wheel-title {
  color: #eceaff !important;
}
html.theme-starry .wheel-lead,
html.theme-starry .wheel-cost-label {
  color: #b8b4e0 !important;
}
html.theme-starry .wheel-back {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.22) !important;
  color: #c8b8ff !important;
}
html.theme-starry .wheel-bal {
  background: rgba(30, 26, 60, 0.55) !important;
  color: #eceaff !important;
}
/* Только НЕактивные кнопки: у выбранной свой фирменный градиент с белым
   текстом, и перекрашивать её под тему не нужно — иначе светлый текст
   становится приглушённым и выбранная ставка перестаёт выделяться. */
html.theme-starry .wheel-bet-btn:not(.active) {
  background: rgba(30, 26, 60, 0.55) !important;
  border-color: rgba(150, 160, 255, 0.22) !important;
  color: #c8c4ec !important;
}
html.theme-starry .wheel-bet-btn:not(.active):hover {
  background: rgba(30, 26, 60, 0.8) !important;
}
html.theme-starry .wheel-result.lose {
  color: #b8b4e0 !important;
}
html.theme-starry .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 — золото. Меняются только базовые оттенки, чтобы
   круг сидел на ночном фоне, а не светился как в светлой теме. */
html.theme-starry {
  --wheel-nothing: #2f2b52;
  --wheel-half:    #4a4382;
  --wheel-back:    #6a5fc0;
  --wheel-x2:      #3f7f9a;
  --wheel-x5:      #c9a83c;
  --wheel-cosmetic:#8e3a72;
  --wheel-text:    #f2f0ff;
  --wheel-rim:     #4a4480;
}
html.theme-starry { --wheel-hub: #3a3468; }

/* ============================================================
   ПАЛИТРА ИГРОВОГО ЭКРАНА МАФИИ ПОД ЭТУ ТЕМУ
   ------------------------------------------------------------
   Задаётся на ПЕРЕСЕЧЕНИИ темы и фазы: у мафии день и ночь — игровой
   сигнал, и внутри любой темы день обязан оставаться заметно светлее
   ночи. Поэтому здесь два набора, а не один общий «тёмный».
   Значения по умолчанию (светлая тема сайта) живут в
   games/mafia/mafia.css, здесь только перекрытие.
============================================================ */
html.theme-starry .mafia-screen{
  --mf-bg:linear-gradient(135deg,#2b2554 0%,#241f4a 45%,#1b1738 100%);
  --mf-panel:rgba(58,52,105,0.5);
  --mf-panel-2:rgba(52,46,96,0.7);
  --mf-border:rgba(150,160,255,0.22);
  --mf-divider:rgba(150,160,255,0.18);
  --mf-text:#eceaff;
  --mf-text-dim:#c3bce0;
  --mf-text-faint:#9a92c4;
  --mf-accent:#a992e8;
  --mf-accent-soft:rgba(150,120,220,0.18);
  --mf-accent-text:#cbb6f0;
  --mf-accent-ring:rgba(150,120,220,0.4);
  --mf-timer:#d7c8ff;
  --mf-timer-glow:0 0 12px rgba(150,120,220,0.45);
  --mf-card-shadow:0 10px 28px rgba(10,6,30,0.5);
  /* Мобильный чат — один цвет на тему, в ночном блоке не повторяется. */
  --mf-mobile-panel:rgba(24,21,52,0.96);
  --mf-mobile-text:#eceaff;
  --mf-mobile-faint:#9a92c4;
  --mf-good:#7ad48c;
  --mf-bad:#f0889c;
  --mf-menu-bg:#241f4a;
  --mf-vote:#f0a0b8;
  --mf-blob-1:rgba(120,90,220,0.35);
  --mf-blob-2:rgba(70,90,200,0.3);
}
html.theme-starry .mafia-screen.night{
  --mf-bg:linear-gradient(135deg,#151230 0%,#100e26 50%,#0a0818 100%);
  --mf-panel:rgba(22,20,48,0.6);
  --mf-panel-2:rgba(26,23,54,0.75);
  --mf-border:rgba(150,160,255,0.13);
  --mf-divider:rgba(150,160,255,0.1);
  --mf-text:#e6e3fb;
  --mf-text-dim:#a49dc6;
  --mf-text-faint:#7d76a4;
  --mf-accent:#b9a3e6;
  --mf-accent-soft:rgba(150,120,220,0.12);
  --mf-accent-text:#b9a3e6;
  --mf-accent-ring:rgba(150,120,220,0.28);
  --mf-timer:#c9b6ff;
  --mf-timer-glow:0 0 14px rgba(150,120,220,0.55);
  --mf-card-shadow:0 10px 28px rgba(0,0,0,0.6);
  --mf-good:#7ad48c;
  --mf-bad:#f0889c;
  --mf-menu-bg:#171338;
  --mf-vote:#f0a0b8;
  --mf-blob-1:rgba(90,60,190,0.3);
  --mf-blob-2:rgba(40,60,170,0.26);
}
