/* Тема платформы в стиле Мозлаб: светлая и тёмная.
   Подключается ПОСЛЕДНЕЙ в <head> каждой страницы (после её собственных стилей): значения переменных
   --bg, --surface, --text, --gold… подменяются фирменными, поэтому перекрашивается вся платформа сразу.
   Тема выбирается в shared/theme.js (атрибут data-theme на <html>), у каждого человека своя, хранится в браузере. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root,
:root[data-theme="light"]{
  color-scheme: light;
  --font-display: 'Montserrat', Arial, ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Montserrat', Arial, ui-sans-serif, system-ui, sans-serif;

  /* поверхности и текст */
  --bg: #f1f4f5;
  --surface: #ffffff;
  --surface-2: #f6f9fd;
  --surface-3: #e8ebf3;
  --line: #dfe5ee;
  --line-strong: #c9d3e0;
  --text: #000000;
  --text-muted: #5b6270;

  /* главное действие и активное состояние: чёрный (в тёмной теме — белый) */
  --gold: #000000;
  --gold-soft: rgba(0,0,0,0.07);
  --on-gold: #ffffff;
  --accent: #000000;
  --accent-soft: rgba(0,0,0,0.07);
  --on-accent: #ffffff;

  /* состояния и категории графиков */
  --bad: #dc4b4b;          --bad-soft: rgba(220,75,75,0.12);
  --good: #2f9468;         --good-soft: rgba(47,148,104,0.12);
  --orange: #bf8400;       /* жёлтый: срок сдачи */
  --blue: #2f6fdc;         /* синий: план застройки, информация */
  --purple: #6a46d8;       /* фиолетовый: безопасность */
  --live: #ff0100;         /* брендовый красный: запись, акценты */
  --tape: #ffcc00;         /* «принято» — жёлтая строительная лента */
  --tape-text: #a87400;
  --built-line: #000000;   /* «построено» — линия цвета текста */

  /* сообщения */
  --info-bg: rgba(47,111,220,0.10);   --info-text: #1f55b0;   --info-border: rgba(47,111,220,0.45);
  --warn-bg: rgba(191,132,0,0.12);    --warn-text: #7a5400;    --warn-border: rgba(191,132,0,0.5);
  --error-bg: rgba(220,75,75,0.10);   --error-text: #b02a2a;  --error-border: rgba(220,75,75,0.55);
  --ok-bg: rgba(47,148,104,0.12);     --ok-text: #1d7451;
  --overlay: rgba(0,16,40,0.5);
  --border-hover: #8a93a3;

  /* цвет шапки по роли: оператор — чёрная, соведущий — синяя */
  --role-operator-bg: #000000;  --role-operator-fg: #ffffff;
  --role-cohost-bg: #2f6fdc;    --role-cohost-fg: #ffffff;

  /* логотипы (файлы в /assets): обычный, на шапке оператора, на шапке соведущего */
  --logo-neutral: url('/assets/logo-color.png');
  --logo-operator: url('/assets/logo-dark.png');
  --logo-cohost: url('/assets/logo-mono-white.png');
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #040404;
  --surface: #101114;
  --surface-2: #16181d;
  --surface-3: #23262d;
  --line: #303030;
  --line-strong: #454b57;
  --text: #ffffff;
  --text-muted: #9aa6b8;

  --gold: #ffffff;
  --gold-soft: rgba(255,255,255,0.10);
  --on-gold: #000000;
  --accent: #ffffff;
  --accent-soft: rgba(255,255,255,0.10);
  --on-accent: #000000;

  --bad: #f26b6b;          --bad-soft: rgba(242,107,107,0.16);
  --good: #4cc38a;         --good-soft: rgba(76,195,138,0.16);
  --orange: #ffd23f;
  --blue: #7db3ff;
  --purple: #b39dff;
  --live: #ff3a3a;
  --tape: #ffd23f;
  --tape-text: #ffd23f;
  --built-line: #ffffff;

  --info-bg: rgba(125,179,255,0.14);  --info-text: #a9ccff;   --info-border: rgba(125,179,255,0.5);
  --warn-bg: rgba(255,210,63,0.12);   --warn-text: #ffd23f;   --warn-border: rgba(255,210,63,0.5);
  --error-bg: rgba(242,107,107,0.14); --error-text: #ff9b9b;  --error-border: rgba(242,107,107,0.6);
  --ok-bg: rgba(76,195,138,0.16);     --ok-text: #4cc38a;
  --overlay: rgba(0,0,0,0.7);
  --border-hover: #6b7586;

  --role-operator-bg: #ffffff;  --role-operator-fg: #000000;
  --role-cohost-bg: #7db3ff;    --role-cohost-fg: #000000;

  --logo-neutral: url('/assets/logo-dark.png');
  --logo-operator: url('/assets/logo-color.png');
  --logo-cohost: url('/assets/logo-mono-black.png');
}

/* ---------- логотип: <span class="brand-logo"> (+ on-operator / on-cohost на цветной шапке) ---------- */
.brand-logo{
  display:inline-block; flex:none; height:24px; aspect-ratio: 1735 / 270;
  background: var(--logo-neutral) center / contain no-repeat;
}
.brand-logo.on-operator{ background-image: var(--logo-operator); }
.brand-logo.on-cohost{ background-image: var(--logo-cohost); }
.brand-logo.sm{ height:18px; }

/* ---------- переключатель темы: кнопка солнце / луна ---------- */
.theme-toggle{
  width:38px; height:38px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer;
  padding:0; transition: background .12s, opacity .12s;
}
.theme-toggle:hover{ background: var(--gold-soft); }
.theme-toggle:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.theme-toggle svg{ width:20px; height:20px; }
.theme-toggle .ico-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .ico-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .ico-moon{ display:block; }

/* выбор темы окна проектора в панели оператора */
.theme-picker{ display:inline-flex; padding:3px; border-radius:999px; background: var(--surface-3); gap:2px; }
.theme-picker button{
  border:0; background:transparent; color: var(--text); cursor:pointer; padding:7px 12px; border-radius:999px;
  font-family: var(--font-body); font-size:12px; font-weight:700;
}
.theme-picker button[aria-pressed="true"]{ background: var(--gold); color: var(--on-gold); }
.theme-picker-label{ font-size:11px; letter-spacing:0.08em; font-weight:700; color: var(--text-muted); text-transform:uppercase; }

/* кнопка темы в углу окна проектора: появляется при движении мыши и скрывается через 3 секунды */
.theme-toggle-corner{
  position:fixed; left:16px; bottom:16px; z-index:9999; opacity:0; pointer-events:none; transition: opacity .2s;
  color: var(--text-muted); background: var(--surface);
}
.theme-toggle-corner.show{ opacity:1; pointer-events:auto; }

/* ---------- общие элементы, у которых цвет текста был зашит ---------- */
.btn-gold{ color: var(--on-gold); }

/* ---------- шапка оператора в играх: цвет роли (чёрная; в тёмной теме — белая) ---------- */
:root,
:root[data-theme="light"]{ --role-danger: #ff6b6b; }
:root[data-theme="dark"]{ --role-danger: #c4161c; }

.platform-strip{
  background: var(--role-operator-bg); color: var(--role-operator-fg); border-bottom-color: transparent;
  align-items: center;
}
.platform-strip .platform-back,
.platform-strip .platform-operator-name{ color: inherit; opacity: .85; }
.platform-strip .platform-back:hover{ color: inherit; opacity: 1; }
/* название игры в шапке оператора и соведущего */
.platform-strip .platform-game{ color: inherit; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.platform-strip .platform-session-badge{ background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }
.platform-strip .platform-sync-badge{ background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.platform-strip .platform-sync-badge.pending{ outline: 1.5px dashed currentColor; outline-offset: -1.5px; }
.platform-strip .platform-sync-badge.error{ background: var(--role-danger); color: var(--role-operator-bg); }
.platform-strip .platform-signout-btn{ color: inherit; border-color: color-mix(in srgb, currentColor 55%, transparent); }
.platform-strip .platform-signout-btn:hover{ color: inherit; border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
.platform-strip .platform-finish-btn{ color: var(--role-danger); border-color: var(--role-danger); font-weight: 700; }
.platform-strip .platform-finish-btn:hover{ color: var(--role-danger); border-color: var(--role-danger); background: color-mix(in srgb, var(--role-danger) 16%, transparent); }

/* выбор темы проектора под кнопками проектора */
.pp-theme-row{ margin-top: 10px; }

/* «Включить интригу» — брендовый красный (в состоянии «идёт» остаётся своё оформление) */
.tabs-intrigue-btn:not(.is-live){ background: var(--live); border-color: var(--live); color: #fff; }

/* ---------- медали призёров: золото, серебро, бронза (внутри медали всегда цифра места) ---------- */
:root,
:root[data-theme="light"]{
  --medal-1-fill: #ffcc00; --medal-1-edge: #8a6400;
  --medal-2-fill: #c5ccd8; --medal-2-edge: #6b7585;
  --medal-3-fill: #cd7f32; --medal-3-edge: #7a4412;
}
:root[data-theme="dark"]{
  --medal-1-fill: #ffd23f; --medal-1-edge: #b88a00;
  --medal-2-fill: #dfe5ee; --medal-2-edge: #8e99aa;
  --medal-3-fill: #e8995a; --medal-3-edge: #9a5a22;
}