/* Панель voicebutton — оформление по Material Design 3 (Google), СВЕТЛАЯ тема, синий базовый цвет.
 *
 * Правила, которых держимся:
 *  - цвета берём ТОЛЬКО из ролей ниже (surface / primary / container…), а не подбираем на глаз:
 *    роль сама решает, что на чём читается («on-…» всегда контрастен своей подложке»);
 *  - размеры текста — из шкалы Material (Title / Body / Label), а не произвольные;
 *  - скругления — из шкалы форм (4 / 8 / 12 / 16 / 28 / полное);
 *  - у наводимого и нажатого — «слой состояния» (полупрозрачная плёнка), как в Material.
 *
 * ИСКЛЮЧЕНИЕ: карточки табло (секция .d-*) намеренно оставлены в виде Discord — игроки
 * пользуются ботом и сайтом вперемешку, и второй интерфейс им осваивать не нужно.
 */
:root {
  color-scheme: light;

  /* ---- Цветовые роли (Material 3, LIGHT, синий базовый) ----
     Тот же набор ролей, что и раньше, только светлая схема Material. Правило то же:
     у каждой роли есть парная «on-», которая на ней гарантированно читается. */
  --primary: #0b57d0;
  --on-primary: #ffffff;
  --primary-container: #d3e3fd;
  --on-primary-container: #041e49;

  --secondary: #565f71;
  --on-secondary: #ffffff;
  --secondary-container: #dae2f9;
  --on-secondary-container: #131c2b;

  --tertiary: #705575;
  --tertiary-container: #fad8fd;
  --on-tertiary-container: #28132e;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;

  /* «Успех» Material не описывает, а нам нужен для «в игре» — заводим свою роль по тем же правилам */
  --success: #146c2e;
  --success-container: #c4eed0;
  --on-success-container: #002107;

  --surface: #f9f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3fa;
  --surface-container: #eeedf4;
  --surface-container-high: #e8e8ef;
  --surface-container-highest: #e2e2e9;
  --on-surface: #1a1b20;
  --on-surface-variant: #44474e;
  --outline: #74777f;
  --outline-variant: #c4c6d0;

  /* Фирменный красный RedParty. В ролях Material такого нет (--error занят смыслом
     «ошибка»), поэтому заводим отдельную роль. Оттенки — из палитры Google (Red 700/300). */
  --brand: #c5221f;

  /* Табло намеренно выглядит как Discord — держим его цвета отдельными токенами,
     чтобы на переключении темы бралась СВОЯ тема Discord, а не осветлённая тёмная. */
  --d-card-bg: #dfe3e8;
  --d-sub-bg: #cdd2d9;
  --d-ink: #060607;
  --d-ink-2: #5c5e66;
  --d-ink-3: #4e5058;
  --d-dot-on: #1a8043;
  --d-ring-on: #23a55a;

  /* ---- Форма ---- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* ---- Высота (тени) ---- */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px 1px rgba(0, 0, 0, .06);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 6px 2px rgba(0, 0, 0, .07);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .12);

  /* ---- Движение ---- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: .2s;
}

/* ---- Тёмная тема: второй ПОЛНЫЙ набор ролей, а не инверсия светлой ----
   Включается кнопкой в шапке (выбор помнится в браузере). Значения — те же, что были у
   панели до перехода на светлую: они уже отработаны на проде. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --primary: #a8c7fa;
  --on-primary: #062e6f;
  --primary-container: #0842a0;
  --on-primary-container: #d3e3fd;

  --secondary: #bec6dc;
  --on-secondary: #283041;
  --secondary-container: #3e4759;
  --on-secondary-container: #dae2f9;

  --tertiary: #ddbce0;
  --tertiary-container: #573e5c;
  --on-tertiary-container: #fad8fd;

  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  --success: #7ddc95;
  --success-container: #005322;
  --on-success-container: #99f8b0;

  --surface: #111318;
  --surface-container-lowest: #0c0e13;
  --surface-container-low: #191c20;
  --surface-container: #1d2024;
  --surface-container-high: #282a2f;
  --surface-container-highest: #33353a;
  --on-surface: #e2e2e9;
  --on-surface-variant: #c4c6d0;
  --outline: #8e9099;
  --outline-variant: #44474e;

  --brand: #f28b82;

  --d-card-bg: #232428;
  --d-sub-bg: #2b2d31;
  --d-ink: #f2f3f5;
  --d-ink-2: #949ba4;
  --d-ink-3: #b5bac1;
  --d-dot-on: #43a25a;
  --d-ring-on: #43a25a;

  --elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3);
}

/* Слой состояния и подсветка своей строки берут цвет чернил — он свой в каждой теме. */
:root[data-theme="dark"] .chip:hover { background: rgba(226, 226, 233, .08); }
:root[data-theme="dark"] .sc-players tr.sc-merow { background: rgba(168, 199, 250, .10); }

* { box-sizing: border-box; }

body {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--surface);
  color: var(--on-surface);
  margin: 0;
  padding: 0 0 48px;
  font-size: 14px;      /* body-medium */
  line-height: 20px;
  letter-spacing: .0178571429em;
}

/* ============================ Верхняя панель и вкладки ============================ */
header {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-container);
  box-shadow: var(--elev-2);
}
.head-top { display: flex; align-items: center; gap: 12px; padding: 12px 24px 8px; }

.head-top .me {
  margin-left: auto; color: var(--on-surface-variant);
  font-size: 14px; line-height: 20px;
}
.head-top .owner-badge {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--shape-sm); padding: 4px 10px;
  font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .05em;
}

/* Вкладки Material: подчёркивание 3px со скруглённым верхом, метка label-large */
.tabs { display: flex; gap: 0; padding: 0 12px; overflow-x: auto; }
.tabs button {
  position: relative; background: none; border: 0; cursor: pointer;
  color: var(--on-surface-variant);
  padding: 14px 16px; white-space: nowrap;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: .0071428571em;
  transition: color var(--dur) var(--ease);
}
.tabs button::before {           /* слой состояния */
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tabs button:hover::before { opacity: .08; }
.tabs button:active::before { opacity: .1; }
.tabs button.on { color: var(--primary); }
.tabs button.on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px;
  background: var(--primary); border-radius: 3px 3px 0 0;
}

main { max-width: 1040px; margin: 0 auto; padding: 24px 24px 0; }

/* Переключатель языка «RU | EN» — две сросшиеся кнопки; выбранный язык залит. */
.lang-switch {
  display: inline-flex; flex: none; border: 1px solid var(--outline-variant);
  border-radius: var(--shape-full); overflow: hidden; height: 32px;
}
.lang-switch button {
  border: 0; background: transparent; color: var(--on-surface-variant); cursor: pointer;
  font: 500 12px/1 inherit; letter-spacing: .06em; padding: 0 10px; min-width: 38px;
}
.lang-switch button + button { border-left: 1px solid var(--outline-variant); }
.lang-switch button.on { background: var(--primary); color: var(--on-primary); }
.lang-switch button:not(.on):hover { background: var(--surface-container-high); }
.center .lang-switch { margin-top: 20px; }
/* Узкий телефон: в шапке не помещались имя, режим игрока, язык, тема и «Выйти» разом —
   страница становилась шире экрана. Имя прячем (своё имя человек и так знает), переключатель
   и отступы — компактнее. */
@media (max-width: 480px) {
  .head-top { gap: 6px; }
  .head-top .me { display: none; }
  .lang-switch button { min-width: 30px; padding: 0 7px; }
  .head-top .brand { margin-right: auto; }
}

/* Кнопка режима игрока: на компьютере — просто текст, значок глаза только у «смотреть как
   игрок». На телефоне от кнопки остаётся значок (см. @media ниже), а в режиме игрока он
   подсвечен — отдельной плашки о режиме нет, и по кнопке должно быть видно, что он включён. */
.head-top .btn-ghost.on .vm-ico { display: none; }

/* ================================== Карточки ==================================== */
.card {
  background: var(--surface-container-low);
  border-radius: var(--shape-md);
  padding: 20px 24px; margin-bottom: 16px;
}
/* Прозрачная обёртка: нужна там, где внутри свои карточки (табло, пересменка) */
.card.card-plain { background: none; padding: 0; }
.card h2 {
  margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
  font-size: 16px; line-height: 24px; font-weight: 500;  /* title-medium */
  letter-spacing: .0093em; color: var(--on-surface);
}
.card h2 .count {
  color: var(--on-surface-variant); font-weight: 400;
  font-size: 12px; line-height: 16px;
}

/* Строка-элемент списка */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--shape-sm);
  background: var(--surface-container); margin-bottom: 6px; flex-wrap: wrap;
}
.row .who { font-weight: 500; }
.row .meta { color: var(--on-surface-variant); font-size: 13px; }
.row .grow { flex: 1; }
.row .meta, .row code { word-break: break-word; overflow-wrap: anywhere; min-width: 0; }
.row-tags { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.row-tags:empty { display: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.green { background: var(--success); }
.blue { background: var(--primary); }
.grey { background: var(--outline); }

/* =================================== Кнопки ===================================== */
/* Общее для всех кнопок Material: высота 40, полное скругление, метка label-large,
   слой состояния при наведении и нажатии. */
.btn-primary, .btn-ghost, button.act {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border: 0; border-radius: var(--shape-full);
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: .0071428571em; cursor: pointer; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease);
}
.btn-primary::before, .btn-ghost::before, button.act::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0; transition: opacity var(--dur) var(--ease);
}
.btn-primary:hover::before, .btn-ghost:hover::before, button.act:hover::before { opacity: .08; }
.btn-primary:active::before, .btn-ghost:active::before, button.act:active::before { opacity: .1; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, button.act:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px;
}

/* Заполненная — главное действие */
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { box-shadow: var(--elev-1); }

/* Тональная — второстепенное действие */
.btn-ghost { background: var(--secondary-container); color: var(--on-secondary-container); }

/* Текстовая, опасное действие (снять, отозвать, удалить) */
button.act {
  height: 32px; padding: 0 12px; background: none; color: var(--error);
  font-size: 13px;
}
button.act.neutral { color: var(--primary); }
.btn-ghost.small { height: 32px; padding: 0 16px; font-size: 13px; }

/* ================================== Мелочи ====================================== */
.muted { color: var(--on-surface-variant); font-size: 12px; line-height: 16px; }
.empty { color: var(--on-surface-variant); font-style: italic; padding: 8px 4px; }
.center { text-align: center; padding: 72px 24px; }
.center h1 { font-size: 24px; line-height: 32px; font-weight: 400; }
code {
  background: var(--surface-container-high); color: var(--on-surface-variant);
  padding: 2px 6px; border-radius: var(--shape-xs);
  font-size: 12px; font-family: "Roboto Mono", ui-monospace, monospace;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 10px 8px; border-top: 1px solid var(--outline-variant); }
/* Чип-метка (роли, признаки) */
.pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  background: var(--surface-container-high); color: var(--on-surface-variant);
  border-radius: var(--shape-sm); font-size: 11px; line-height: 16px; font-weight: 500;
}

/* =================================== Поля ======================================= */
input[type="text"], input[type="email"], input[type="number"], select {
  width: 100%; background: var(--surface-container-high); color: var(--on-surface);
  border: 1px solid var(--outline); border-radius: var(--shape-xs);
  padding: 14px 16px; font-family: inherit; font-size: 16px; line-height: 24px;
  transition: border-color var(--dur) var(--ease);
}
input:hover, select:hover { border-color: var(--on-surface); }
input:focus, select:focus { outline: none; border-color: var(--primary); border-width: 2px; padding: 13px 15px; }
label.field { display: block; margin-bottom: 16px; }
label.field span {
  display: block; margin-bottom: 6px;
  font-size: 12px; line-height: 16px; color: var(--on-surface-variant);
}

.perm-group { margin-bottom: 16px; }
.perm-group > .perm-title, .perm-title {
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--on-surface); margin-bottom: 8px;
}
.perm-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface-container); border-radius: var(--shape-sm);
  margin-bottom: 4px; font-size: 14px; cursor: pointer;
}
.perm-item:hover { background: var(--surface-container-high); }
.perm-item input { accent-color: var(--primary); width: auto; padding: 0; }
.perm-item .k { color: var(--on-surface-variant); font-size: 11px; margin-left: auto; }

.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.presets button {
  background: none; color: var(--on-surface); cursor: pointer; text-align: left;
  border: 1px solid var(--outline); border-radius: var(--shape-md);
  padding: 12px 16px; font-family: inherit; font-size: 13px;
  transition: background var(--dur) var(--ease);
}
.presets button:hover { background: var(--surface-container-high); }
.presets button b { display: block; font-size: 14px; font-weight: 500; color: var(--on-surface); }
.presets button i { font-style: normal; color: var(--on-surface-variant); font-size: 12px; }

.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.err { color: var(--error); font-size: 13px; margin: 12px 0 0; }

/* ============================== Диалоги (формы табло) ============================ */
#sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet-box {
  position: relative; background: var(--surface-container-high);
  border-radius: var(--shape-xl); padding: 24px;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: var(--elev-3);
}
.sheet-box h2 {
  margin: 0 0 16px; font-size: 24px; line-height: 32px; font-weight: 400;  /* headline-small */
  color: var(--on-surface);
}
.sheet-box .muted { margin: -8px 0 16px; }

/* =============================== Журнал действий ================================ */
.log-line {
  display: flex; gap: 12px; align-items: center; padding: 12px 16px;
  background: var(--surface-container); border-radius: var(--shape-sm);
  margin-bottom: 4px; font-size: 14px; flex-wrap: wrap;
}
.log-line .ts { color: var(--on-surface-variant); font-size: 12px; min-width: 116px; }
.log-line .act { color: var(--primary); font-size: 12px; font-weight: 500; }

/* ================================= Статистика =================================== */
.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
/* Фильтр-чипы Material: высота 32, скругление 8, обводка; выбранный — тональный */
.chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px;
  background: none; color: var(--on-surface-variant);
  border: 1px solid var(--outline); border-radius: var(--shape-sm);
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { background: rgba(26, 27, 32, .08); color: var(--on-surface); }
.chip.on {
  background: var(--secondary-container); color: var(--on-secondary-container);
  border-color: transparent;
}
.chip.slot-chip i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  background: var(--chip-color, #3987e5); opacity: .4;
}
.chip.slot-chip.on i { opacity: 1; }
.chip.ghost { border-style: dashed; }

.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.tile {
  background: var(--surface-container-low); border-radius: var(--shape-md);
  padding: 16px 20px; flex: 1; min-width: 156px;
  display: flex; flex-direction: column; gap: 4px;
}
.tile .t-label { font-size: 12px; line-height: 16px; color: var(--on-surface-variant); }
/* Крупное число — пропорциональные цифры: tabular-nums на таком размере смотрится рыхло */
.tile .t-value { font-size: 32px; line-height: 40px; font-weight: 400; color: var(--on-surface); }
.tile .t-hint { font-size: 11px; line-height: 16px; color: var(--on-surface-variant); }

.chart-card .chart-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.chart-body { overflow-x: auto; }
.chart { width: 100%; height: auto; display: block; min-width: 460px; }
:root[data-theme="dark"] .chart .ax { fill: #8e9099; }
:root[data-theme="dark"] .chart .lbl { fill: #c4c6d0; }
:root[data-theme="dark"] .chart .val { fill: #e2e2e9; }
.chart .ax { fill: #74777f; font-size: 10px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart .lbl { fill: #44474e; font-size: 11px; font-family: inherit; }
.chart .val { fill: #1a1b20; font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.legend .lg { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-surface-variant); }
.legend .lg i { width: 12px; height: 12px; border-radius: var(--shape-xs); display: inline-block; }
.chart-table { margin-top: 16px; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th {
  text-align: left; color: var(--on-surface-variant); font-weight: 500; padding: 8px;
  border-bottom: 1px solid var(--outline-variant); white-space: nowrap;
}
.tbl td { padding: 8px; border-top: 1px solid var(--outline-variant); white-space: nowrap; }
#viz-tip {
  position: fixed; z-index: 50; pointer-events: none; display: none;
  background: var(--surface-container-highest); color: var(--on-surface);
  border-radius: var(--shape-xs); padding: 8px 12px; font-size: 12px; max-width: 340px;
  box-shadow: var(--elev-2);
}

/* ====================== Табло и пересменка — ВИД DISCORD ========================
   Оставлено намеренно: игроки пользуются ботом и сайтом вперемешку, и второй
   интерфейс им осваивать не нужно. Размеры сняты со скриншота бота, цвета — из
   СВЕТЛОЙ темы Discord: у него она есть, поэтому узнаваемость не теряется. */
.d-card {
  background: var(--d-card-bg); border-radius: var(--shape-sm); margin-bottom: 12px;
  border-left: 4px solid var(--d-accent, #3498db); padding: 14px 16px;
}
.d-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.d-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--d-ink); }
.d-mood { font-size: 19px; line-height: 1; }
.d-mood img { width: 20px; height: 20px; vertical-align: -4px; }
.d-count { font-size: 20px; font-weight: 700; color: var(--d-ink); }
.d-empty { color: var(--d-ink-2); font-style: italic; font-size: 15px; line-height: 1.25; }
.d-row {
  display: flex; align-items: center; gap: 5px;
  padding: 0 6px; margin-left: -6px;
  font-size: 15px; line-height: 1.25;
  border-radius: var(--shape-xs);
}
.d-row .d-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.d-row .d-dot.on { background: var(--d-dot-on); }
.d-row .d-dot.pause { background: #5865f2; }
.d-row .d-dot.afk { background: #80848e; }
.d-row .d-nick { font-weight: 700; color: var(--d-ink); }
.d-row .d-sep { color: var(--d-ink-2); }
.d-row .d-meta { color: var(--d-ink-3); font-style: italic; }
.d-row .d-tables {
  color: var(--d-ink-3); font-size: 13px; background: var(--d-sub-bg);
  border-radius: var(--shape-xs); padding: 0 5px; font-style: normal;
}
.d-row .d-act { padding-left: 10px; }
.d-row .d-act button.act { height: 24px; padding: 0 10px; font-size: 11px; }
/* Свой ник — цветом. В Discord так нельзя (табло там одно на всех), здесь страница у каждого своя. */
.d-row.is-me .d-nick { color: var(--me-color, #43a25a); }
/* Оттенки подобраны под СВЕТЛУЮ подложку: под тёмной они же выцветали бы, поэтому ниже
   идёт второй набор для тёмной темы. Ключи одни и те же — выбор игрока не сбрасывается. */
body[data-me-color="green"]  { --me-color: #1a7f37; }
body[data-me-color="blue"]   { --me-color: #0969da; }
body[data-me-color="violet"] { --me-color: #8250df; }
body[data-me-color="pink"]   { --me-color: #bf3989; }
body[data-me-color="orange"] { --me-color: #bc4c00; }
body[data-me-color="yellow"] { --me-color: #9a6700; }
body[data-me-color="red"]    { --me-color: #cf222e; }
body[data-me-color="teal"]   { --me-color: #0f766e; }
body[data-me-color="plain"]  { --me-color: #1f2328; }

:root[data-theme="dark"] body[data-me-color="green"]  { --me-color: #43a25a; }
:root[data-theme="dark"] body[data-me-color="blue"]   { --me-color: #58a6ff; }
:root[data-theme="dark"] body[data-me-color="violet"] { --me-color: #a78bfa; }
:root[data-theme="dark"] body[data-me-color="pink"]   { --me-color: #f078a8; }
:root[data-theme="dark"] body[data-me-color="orange"] { --me-color: #f0883e; }
:root[data-theme="dark"] body[data-me-color="yellow"] { --me-color: #e3b341; }
:root[data-theme="dark"] body[data-me-color="red"]    { --me-color: #ff7b72; }
:root[data-theme="dark"] body[data-me-color="teal"]   { --me-color: #39c5bb; }
:root[data-theme="dark"] body[data-me-color="plain"]  { --me-color: #f2f3f5; }
.d-sub-line { font-size: 13px; color: var(--d-ink-2); line-height: 1.25; padding-left: 21px; }
.d-signal {
  margin-top: 8px; padding: 8px 12px; background: var(--d-sub-bg); border-radius: var(--shape-sm);
  font-size: 14px; color: var(--d-ink-3);
}
.d-btns { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.d-btn {
  border: 0; border-radius: var(--shape-sm); cursor: pointer; color: #fff;
  height: 34px; min-width: 70px; padding: 0 16px;
  font-family: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .12s, transform .06s;
}
.d-btn svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.d-btn:hover { filter: brightness(1.14); }
.d-btn:active { transform: translateY(1px); }
.d-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.d-btn:disabled { opacity: .5; cursor: default; }
.d-btn.play { background: #248046; }
.d-btn.play.on { background: #1a6334; box-shadow: inset 0 0 0 2px var(--d-ring-on); }
.d-btn.pause { background: #5865f2; }
.d-btn.stop { background: #a12d2f; }
.d-btn.gear { background: #4e5058; }

/* ======================== ПЕРЕСМЕНКА 50+: столы + чат ========================
   Слева столы с кнопками (цвета — как у пульта в Discord), справа чат канала выбранного
   стола. На узком экране — друг под другом. */
body[data-tab="sub"] main { max-width: 1400px; }
/* Общий нижний отступ сайта (48px) здесь лишний: у чата свой отступ от низа экрана, а с ним
   страница прокручивалась на 40px, даже когда всё помещалось. */
body[data-tab="sub"] { padding-bottom: 8px; }
.sub-layout { display: grid; grid-template-columns: minmax(320px, 470px) minmax(0, 1fr); gap: 16px; align-items: start; }
/* Колонкам разрешаем быть уже своего содержимого. Иначе полоса расписания у стола (420px)
   распирала колонку, а с ней всю страницу: на телефоне она выходила шире экрана, браузер
   её уменьшал, и нажатия попадали мимо. Сама полоса прокручивается внутри карточки. */
.sub-layout > * { min-width: 0; }
.d-btn .lbl { margin-left: 7px; font-size: 14px; font-weight: 600; }
.d-btn.ready { background: #5865f2; font-size: 14px; font-weight: 600; }
.d-btn.help { background: #4e5058; font-size: 14px; font-weight: 600; }
/* Свой сигнал / сам за столом — обводка: видно, что кнопка «включена» и повтор её снимет. */
.d-btn.ready.on, .d-btn.help.on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.sub-card { cursor: default; }
.sub-card.sel { box-shadow: 0 0 0 2px var(--primary); }
.sub-chat-btn {
  margin-left: auto; border: 1px solid var(--outline-variant); background: transparent; color: var(--d-ink-3);
  border-radius: 999px; height: 28px; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.sub-chat-btn.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }

.sub-chat {
  background: var(--d-card-bg); border-radius: var(--shape-sm);
  display: flex; flex-direction: column;
  /* Высота — чтобы окно заканчивалось с отступом от низа экрана, а не упиралось в край:
     сверху его подпирают шапка с вкладками (108px) и заголовок раздела (до 172px), снизу
     оставляем 24px. При прокрутке окно останавливается ПОД шапкой (top 120px), а не
     заезжает за неё. Раньше было 100vh − 170px и top 12px: низ уходил за край экрана на
     пару пикселей, у страницы появлялась лишняя прокрутка, а при ней чат нырял под шапку. */
  position: sticky; top: 120px; height: calc(100vh - 200px); min-height: 380px;
}
.sub-chat > .empty { margin: auto; padding: 24px; text-align: center; }
.sub-chat-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--d-sub-bg);
}
.sub-chat-title { font-weight: 700; font-size: 16px; color: var(--d-ink); }
.sub-chat-note { font-size: 12px; color: var(--d-ink-2); }
.sub-chat-open { margin-left: auto; font-size: 13px; color: var(--primary); text-decoration: none; font-weight: 500; }
.sub-chat-open:hover { text-decoration: underline; }
.sub-chat-list { flex: 1; overflow-y: auto; padding: 4px 0 14px; overscroll-behavior: contain; }
.sub-chat-list > .empty { padding: 24px; text-align: center; }

.c-day {
  display: flex; align-items: center; gap: 8px; margin: 16px 16px 4px;
  font-size: 11px; font-weight: 600; color: var(--d-ink-2);
}
.c-day::before, .c-day::after { content: ""; flex: 1; height: 1px; background: var(--d-sub-bg); }
.c-msg { display: flex; gap: 12px; padding: 2px 16px; margin-top: 10px; }
.c-msg.c-cont { margin-top: 0; }
.c-msg:hover { background: rgba(0, 0, 0, .04); }
:root[data-theme="dark"] .c-msg:hover { background: rgba(255, 255, 255, .03); }
/* Сообщение с упоминанием тебя — жёлтая подложка, как в Discord. */
.c-msg.c-me { background: rgba(240, 178, 50, .12); box-shadow: inset 2px 0 0 #f0b232; }
.c-ava { width: 36px; height: 36px; border-radius: 50%; flex: none; margin-top: 2px; background: var(--d-sub-bg); }
.c-body { flex: 1; min-width: 0; }
.c-cont .c-body { padding-left: 48px; }
.c-meta { display: flex; align-items: baseline; gap: 7px; }
.c-name { font-weight: 600; font-size: 14px; color: var(--d-ink); }
.c-bot { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; border-radius: 3px; padding: 0 4px; }
.c-when { font-size: 11px; color: var(--d-ink-2); }
.c-text { font-size: 14px; line-height: 1.4; color: var(--d-ink); overflow-wrap: anywhere; }
.c-text a, .c-embed a { color: #00a8fc; }
.c-text code { background: var(--d-sub-bg); border-radius: 3px; padding: 0 3px; font-size: 12.5px; }
.c-pre { background: var(--d-sub-bg); border-radius: 4px; padding: 6px 8px; margin: 4px 0; white-space: pre-wrap; font-size: 12.5px; }
.c-quote { display: inline-block; border-left: 3px solid var(--d-ink-2); padding-left: 8px; }
.c-edited { font-size: 10px; color: var(--d-ink-2); }
.c-reply {
  font-size: 12px; color: var(--d-ink-2); margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-mention { background: rgba(88, 101, 242, .15); color: #4752c4; border-radius: 3px; padding: 0 2px; font-weight: 500; }
:root[data-theme="dark"] .c-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; }
.c-emoji { width: 22px; height: 22px; vertical-align: -6px; }
.c-imglink { display: inline-block; margin-top: 4px; max-width: 100%; }
.c-img { display: block; max-width: 100%; height: auto; border-radius: 6px; background: var(--d-sub-bg); cursor: zoom-in; }

/* Просмотр картинки поверх страницы — как в Discord. Выше всего остального (шапка — 5,
   формы табло — 60). Страница под ним не прокручивается. */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.lb-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .86); cursor: zoom-out; }
/* Размер ставит lbFit — «на весь экран», с растяжением маленьких картинок. */
.lb-img {
  position: relative; display: block; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  cursor: zoom-in; background: #111;
}
/* Приближение: картинка вдвое крупнее, двигается прокруткой. Кнопки при этом стоят на месте
   (position: fixed), иначе уезжали бы вместе с картинкой. */
.lb.zoom {
  display: flex; justify-content: flex-start; align-items: flex-start;
  overflow: auto; background: rgba(0, 0, 0, .92); cursor: zoom-out;
}
.lb.zoom .lb-back { display: none; }
/* margin: auto — по центру, пока картинка меньше экрана, и без «недоступного» края, когда
   больше (центрирование через align/justify отрезало бы левый и верхний край прокрутки). */
.lb.zoom .lb-img { flex: none; margin: auto; cursor: zoom-out; border-radius: 0; box-shadow: none; }
.lb-btn {
  position: fixed; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font: 400 30px/1 system-ui, sans-serif;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lb-btn:hover { background: rgba(255, 255, 255, .26); }
.lb-x { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: fixed; z-index: 1; top: 26px; left: 50%; transform: translateX(-50%);
  color: #ddd; font-size: 13px;
}
.lb-orig {
  position: fixed; z-index: 1; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #e6e6e6; font-size: 13px; text-decoration: none;
  background: rgba(0, 0, 0, .45); padding: 6px 14px; border-radius: 999px;
}
.lb-orig:hover { color: #fff; }
.c-file {
  display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 6px;
  background: var(--d-sub-bg); color: var(--d-ink-3); font-size: 13px; text-decoration: none;
}
.c-embed { margin-top: 4px; padding: 6px 10px; border-left: 4px solid var(--d-sub-bg); font-size: 13px; color: var(--d-ink-3); }
.c-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.c-react {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 8px;
  background: var(--d-sub-bg); color: var(--d-ink-3); font-size: 13px;
}
.c-react img { width: 16px; height: 16px; }
.c-spoiler { background: var(--d-ink-2); color: transparent; border-radius: 3px; cursor: pointer; }
.c-spoiler.shown { background: var(--d-sub-bg); color: inherit; cursor: text; }

/* Кусочек расписания у стола. Цвета — как у сетки расписания (копия гугл-таблицы): она и
   в тёмной теме остаётся светлой, это «лист таблицы», а не часть интерфейса. */
.st { margin-top: 12px; }
.st-wrap { overflow-x: auto; }
.st-canvas { position: relative; }
.st-grid {
  border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%;
  font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: #fff;
  border-top: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0;
}
.st-grid th, .st-grid td {
  height: 19px; padding: 0 2px; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: clip; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; color: #222;
}
.st-grid thead th { height: 17px; font-size: 10px; font-weight: 700; color: #333; background: #fff; }
.st-grid .st-lbl { font-weight: 700; color: #333; background: #f3f3f3; font-size: 10px; }
.st-grid .st-hole { background: #fff; }
.st-grid .st-x { background: #dedede; color: #999; }
.st-grid .past { background: #d9d9d9 !important; color: #666 !important; }
.st-grid .st-t.me { box-shadow: inset 0 0 0 2px #1f2328, inset 0 0 0 3px #fff; }
.st-grid td.split { padding: 0; }
.st-grid td > i { font-style: normal; }
.st-now { position: absolute; top: 18px; bottom: 0; width: 3px; background: #ff0012; pointer-events: none; }
.st-line { font-size: 13px; color: var(--d-ink); margin-top: 6px; line-height: 1.35; }
.st-dim { color: var(--d-ink-2); }
.st-row {
  display: inline-block; min-width: 46px; font-size: 11px; font-weight: 700; color: var(--d-ink-2);
}
.st-ok, .st-warn { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; }
.st-ok { background: rgba(35, 165, 90, .16); color: #1a7f37; }
.st-warn { background: rgba(240, 178, 50, .2); color: #9a6700; }
:root[data-theme="dark"] .st-ok { color: #57d98a; }
:root[data-theme="dark"] .st-warn { color: #f0c24a; }
.st-bar {
  display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--d-sub-bg);
  vertical-align: middle; margin: 0 4px; overflow: hidden;
}
.st-bar i { display: block; height: 100%; background: #ff0012; }

@media (max-width: 900px) {
  .sub-layout { grid-template-columns: 1fr; }
  .sub-chat { position: static; height: 70vh; }
}

/* ================================= ГЛАВНАЯ =====================================
   Вход в разделы вместо того, чтобы сразу вываливать на человека табло. Логотип —
   единственное место, где используется фирменный красный крупно; всё остальное живёт
   в синих ролях Material, иначе красного станет слишком много и он перестанет значить. */
.home { padding: 8px 0 0; }
.wordmark {
  margin: clamp(16px, 5vw, 48px) 0 0;
  text-align: center;
  color: var(--brand);
  font-size: clamp(40px, 9vw, 86px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 12px;
  margin: clamp(28px, 6vw, 52px) 0 8px;
}
/* Карточка Material: контурная, со слоем состояния и подъёмом при наведении. */
.home-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 20px 18px 18px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-lg);
  cursor: pointer; text-align: left; color: var(--on-surface);
  font-family: inherit;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.home-tile::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0; transition: opacity var(--dur) var(--ease);
}
.home-tile:hover { box-shadow: var(--elev-2); border-color: var(--outline); }
.home-tile:hover::before { opacity: .08; }
.home-tile:active::before { opacity: .1; }
.home-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.home-tile .ti {
  width: 44px; height: 44px; border-radius: var(--shape-full);
  background: var(--primary-container); color: var(--on-primary-container);
  display: grid; place-items: center; flex: none;
}
.home-tile .ti svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.home-tile .tt { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.home-tile .tn {
  margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--on-surface-variant);
  line-height: 18px;
}
.home-tile .tn b { color: var(--on-surface); font-weight: 500; }

/* На ГЛАВНОЙ шапка почти пустая: вкладки дублируют плитки, а маленький логотип — большой
   посреди страницы. Внутри разделов и то, и другое нужно: вкладки как навигация, логотип
   как дорога обратно. */
body[data-tab="home"] .tabs { display: none; }
body[data-tab="home"] .head-top { padding-bottom: 12px; }
body[data-tab="home"] .head-top .brand { display: none; }

/* Логотип в шапке — он же кнопка «на главную». */
.head-top .brand {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--brand); line-height: 1;
}
.head-top .brand:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: var(--shape-xs); }

/* Переключатель темы — иконка, без подписи: место в шапке дорогое. */
.theme-btn {
  width: 36px; height: 36px; flex: none; padding: 0;
  display: inline-grid; place-items: center;
  background: none; border: 1px solid var(--outline-variant); border-radius: var(--shape-full);
  color: var(--on-surface-variant); cursor: pointer;
}
.theme-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }
.theme-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ============================== МОБИЛЬНАЯ ВЕРСИЯ ================================
   Страница целиком НЕ прокручивается вбок; широкое (графики, таблицы) едет внутри
   своей карточки. Цели нажатия — не меньше 40px, как требует Material. */
@media (max-width: 640px) {
  main { padding: 16px 12px 0; }
  .head-top { padding: 10px 12px 6px; gap: 8px; }
  .head-top .brand { font-size: 17px; }
  .wordmark { font-size: clamp(34px, 12vw, 52px); }
  .head-top .me {
    font-size: 12px; max-width: 38%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* У админа в шапке на телефоне не помещались значок «главный админ» и кнопка режима:
     текст кнопки ломался на две строки и наезжал сам на себя. Оставляем от кнопки значок
     глаза (в режиме игрока «вернуться» есть ещё и на плашке под шапкой), значок прячем. */
  .head-top .owner-badge { display: none; }
  .head-top .btn-ghost, .head-top .theme-btn { white-space: nowrap; flex: none; }
  .head-top .vm-txt { display: none; }
  .head-top .btn-ghost.on .vm-ico { display: inline; }
  .head-top .btn-ghost.on { background: var(--primary); color: var(--on-primary); }
  .tabs { padding: 0 4px; -webkit-overflow-scrolling: touch; }
  .tabs button { padding: 14px 12px; font-size: 13px; }

  .card { padding: 16px; margin-bottom: 12px; }
  .row { padding: 10px 12px; gap: 8px; }
  .row .grow { flex-basis: 100%; height: 0; }
  .btn-primary, .btn-ghost { padding: 0 20px; }

  .tiles { gap: 8px; }
  .tile { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 14px 16px; }
  .tile .t-value { font-size: 26px; line-height: 32px; }

  /* Графики: держим читаемый масштаб подписей и прокручиваем карточку вбок,
     а не сжимаем текст до нечитаемых четырёх пикселей. */
  .chart { min-width: 660px; }
  .chart-body { -webkit-overflow-scrolling: touch; }
  .chart-card .chart-head { flex-wrap: wrap; }

  .d-card { padding: 12px; }
  .d-title, .d-count, .d-mood { font-size: 18px; }
  .d-row { flex-wrap: nowrap; font-size: 14px; }
  .d-row .d-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-empty { font-size: 14px; }
  .d-btns { gap: 6px; }
  .d-btn { flex: 1; min-width: 0; height: 40px; padding: 0 6px; }

  .log-line { gap: 8px; padding: 10px 12px; }
  .log-line .ts { min-width: 0; }
  .presets { flex-direction: column; }
  .presets button { width: 100%; }

  /* Диалог выезжает снизу — привычнее и ближе к пальцу */
  #sheet { align-items: flex-end; }
  .sheet-box {
    width: 100%; border-radius: var(--shape-xl) var(--shape-xl) 0 0;
    padding: 20px 16px 24px; max-height: 88vh;
  }
  .sheet-box .form-actions {
    position: sticky; bottom: 0; background: var(--surface-container-high); padding-top: 12px;
  }
  .sheet-box .form-actions button { flex: 1; }
}

@media (max-width: 380px) {
  .tile { flex-basis: 100%; }
  .head-top .me { display: none; }
}

/* --- Расписание 50/100 -------------------------------------------------------------------
 * Сетка намеренно плотная: сутки — это 48 получасовок, и весь смысл экрана в том, чтобы
 * видеть месяц целиком, не листая. Читаемость держим не размером шрифта, а цветом метки
 * (он свой у каждого игрока, взят из таблицы) и границами часа.
 * «Мёртвые» часы 13:00–18:00 подсвечиваем только там, где пусто: поверх цветной метки
 * любая подсветка спорила бы с самим цветом.                                                */
.sc-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.sc-months { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Расписания (Nitro / Regular) — отдельная группа слева от месяцев: это выбор другой
   таблицы, а не другого периода, и склеивать их в один ряд чипов было бы враньём. */
.sc-sheets { display: inline-flex; gap: 4px; padding-right: 10px; margin-right: 4px;
  border-right: 1px solid var(--outline-variant); }
.sc-sheets .chip.on { background: var(--primary-container); color: var(--on-primary-container); }
/* Часы покеррума — как оранжевый блок в шапке гугл-таблицы: там на них смотрят первым
   делом, чтобы понять, где ты в сетке. Цвета взяты оттуда же. */
.sc-clock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--shape-md);
  background: #f6b26b;
  color: #4a2c00;
  flex: 0 0 auto;
}
.sc-clock i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 13px;
  max-width: 4ch;
}
.sc-clock b {
  font-size: 26px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;  /* иначе строка дёргается при смене минуты */
}

.sc-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-badge {
  background: var(--surface-container);
  border-radius: var(--shape-md);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sc-badge b { font-size: 18px; font-weight: 500; color: var(--primary); }
.sc-badge i { font-style: normal; font-size: 11px; color: var(--on-surface-variant); }
.sc-badge u { text-decoration: none; font-size: 11px; color: var(--outline); }
.sc-tools { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* «Смотрю как» — только для настоящих админов (решает сервер, флаг canViewAs). */
.sc-as {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--on-surface-variant);
}
.sc-as select {
  height: 32px;
  max-width: 200px;
  padding: 0 8px;
  font: inherit;
  color: var(--on-surface);
  background: var(--surface-container-high);
  border: 1px solid var(--outline);
  border-radius: var(--shape-full);
}
.sc-as select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Переключатель из сросшихся «таблеток»: «Месяц | День» в расписании, «Доступы | История». */
.seg { display: inline-flex; gap: 0; }
.seg .chip { border-radius: 0; margin: 0; }
.seg .chip:first-child { border-radius: var(--shape-full) 0 0 var(--shape-full); }
.seg .chip:last-child { border-radius: 0 var(--shape-full) var(--shape-full) 0; margin-left: -1px; }
.acc-views { margin: 0 0 14px; }
.acc-views .chip b { font-weight: 600; margin-left: 4px; }
/* Полоса личных настроек показа. Меняет вид только у того, кто её трогает, поэтому
   стоит скромно — под подписью, а не в шапке рядом с покрытием. */
.sc-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--on-surface-variant);
}
.sc-prefs label { display: inline-flex; align-items: center; gap: 6px; }
.sc-prefs select {
  height: 30px;
  max-width: 230px;
  padding: 0 8px;
  font: inherit;
  color: var(--on-surface);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-sm);
}
.sc-prefs select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sc-prefs .chip { height: 28px; padding: 0 12px; }

.sc-note {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 10px;
}
.sc-scroll { overflow: auto; max-height: 76vh; border-radius: var(--shape-xs); background: #fff; }
/* Сутки — 48 получасовок; в общие 1040px месяц не влезает, а горизонтальная прокрутка
   на широком мониторе бессмысленна. Расширяем колонку только на этой вкладке. */
body[data-tab="schedule"] main { max-width: 1400px; }

/* --- Вид «Месяц» --- */
/* Обёртка вокруг таблицы шириной по содержимому: без неё горизонтальная прокрутка
   считалась бы по ширине контейнера, а не сетки. */
.sc-canvas { position: relative; width: max-content; }
/* ПОРЯДОК ОТРИСОВКИ в сетке задан слоями и именно в таком порядке:
     3 — метка игрока (буквы),
     2 — красная линия текущего времени,
     1 и ниже — заливка клетки, её рамки и всё остальное.
   Иначе никак: рамка клетки рисуется поверх её фона, поэтому линию-фон она перекрывала,
   а линию-накладку не перекрывала уже она сама — зато накладка закрывала буквы.
   Липкие шапка и колонка дней идут выше всех: они не должны пропускать под собой ничего. */
.sc-grid td > i {
  position: relative;
  z-index: 3;
  font-style: normal;
  /* Оптический сдвиг вниз на пиксель. Геометрически метка стоит ровно (считано по метрикам
     Arial, расхождение 0.115px), но у заглавных букв нет выносных элементов вниз, а строка
     всё равно резервирует под них место — из-за этого текст ЧИТАЕТСЯ приподнятым.
     Правим восприятие, а не расчёт, поэтому и сдвигаем сам текст, а не меняем отступы:
     отступ влез бы в расчёт высоты клетки и сдвинул заодно рамки. */
  top: 1px;
}
.sc-nowline {
  position: absolute;
  z-index: 2;
  width: 3px;
  background: #ff0012;
  pointer-events: none;
}

/* Сетка повторяет гугл-таблицу вплоть до мелочей: шрифт Arial обычного начертания (в
   Таблицах он стоит по умолчанию, и наш Roboto полужирным читался совсем иначе), белое
   полотно, светло-серая рамка у каждой клетки, две строки времени в шапке. Люди годами
   смотрят в таблицу — чем меньше отличий, тем меньше поводов переучиваться. */
.sc-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  background: #fff;
  border-top: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
}
.sc-grid th, .sc-grid td { padding: 0; margin: 0; }
.sc-grid thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 19px;
  font-size: 10px;
  font-weight: 700;
  background: #fff;
  color: #333;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
/* Мёртвые часы подсвечены прямо в шапке, как в таблице: там колонки 13:00–17:00 залиты
   розовым. Так их видно до того, как начнёшь искать глазами по сетке. */
/* Мёртвые часы залиты в шапке — в таблице это тот же лососевый цвет. */
.sc-grid thead th.dead { background: #ea9999; color: #3d2020; }
.sc-grid thead th.msk { font-weight: 400; font-style: italic; color: #666; height: 17px; }
/* Строка своего пояса есть не всегда (только если пояс выбран). Смещать основную строку на её
   высоту надо ТОЛЬКО когда она есть — иначе шапка висит в 17px от края и закрывает первый день. */
.sc-grid thead th { top: 0; }
.sc-grid thead tr.sc-msk + tr th { top: 17px; }
.sc-corner.msk { font-weight: 400; font-style: italic; }
.sc-corner { left: 0; z-index: 7 !important; }
.sc-day, .sc-rk {
  position: sticky;
  z-index: 5;
  background: #fff;
  font-weight: 700;
  text-align: center;
  color: #333;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
.sc-day { left: 0; width: 54px; min-width: 54px; white-space: nowrap; }
.sc-day.today { background: #fce8b2; }   /* как подсветка текущего дня в таблице */
.sc-rk { left: 54px; width: 26px; min-width: 26px; }
.sc-grid tbody td {
  width: 22px;
  min-width: 22px;
  white-space: nowrap;      /* ник в объединённом блоке не должен переноситься */
  overflow: hidden;
  height: 19px;
  text-align: center;
  font-weight: 400;          /* в Таблицах текст не полужирный */
  letter-spacing: 0;
  line-height: 1;            /* иначе высота строки тянется от общей по странице (20px) */
  color: #000;
  /* Отступов НЕТ намеренно. Считал: при vertical-align: middle строка центруется по
     внутренней области клетки, и центр заглавных букв расходится с центром залитой части
     всего на 0.115px. Любой отступ в целый пиксель делает ХУЖЕ — проверено, сдвигает на
     0.385px в другую сторону. */
  /* Рамка у каждой клетки — главное, что делает сетку похожей на таблицу. Берём border,
     а не box-shadow: тем же свойством рисуются кольцо своих часов и текущий получас,
     и они бы затирали друг друга (уже наступали на эти грабли). */
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
/* В таблице все линии одинаковые — отдельной «границы часа» там нет. */
.sc-grid tr.sc-last td, .sc-grid tr.sc-last th { border-bottom: 1px solid #9a9a9a; }

/* Слот не нужен («X» в таблице) — серая клетка с бледной буквой, как в самой таблице. */
.sc-x { background: #dedede; color: #9a9a9a; }
/* Дыра: покрыть надо, а никого нет. Это главное, что ищут глазами. */
.sc-hole { background: #fff; }
/* Свои часы. Цвет метки у каждого свой (от жёлтого до тёмно-синего), поэтому одноцветная
   рамка на одних метках терялась. Двойное кольцо «светлое снаружи + тёмное внутри» читается
   на любой заливке: на тёмной метке видно белое, на светлой — тёмное.
   ВЕС СЕЛЕКТОРА ВАЖЕН: тем же box-shadow рисуются и другие вещи, причём более весомыми
   селекторами — без `tbody td` кольцо пропадало на каждой второй получасовке, и подсветка
   выглядела дырявой. */
.sc-grid tbody td.sc-t.me,
.sc-daytbl tbody td.sc-t.me {
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px rgba(0, 0, 0, .85);
  position: relative;
  z-index: 1;   /* ниже линии времени: её ничто не перекрывает, кроме букв */
}
/* Прошедшие часы гаснут — как в исходной таблице: глаз сразу идёт к тому, что ещё впереди.
   Гасим только ЯЧЕЙКИ и подпись строки: если повесить прозрачность ещё и на <tr>, она
   перемножится с ячейкой и получится нечитаемо. Вес селектора ниже, чем у «выделить мои»,
   поэтому в том режиме чужие часы гаснут сильнее, а не спорят за одно и то же свойство. */
/* Прошедшее в таблице просто залито серым (там под это заведён именованный диапазон
   «Диапазон закрашивания серым»), а не приглушено — цвет игрока в прошлом ничего не решает. */
.sc-grid tbody td.past { background: #d9d9d9 !important; color: #707070 !important; }
/* Свои прошедшие часы — темнее чужих прошедших и с тем же кольцом, что у будущих своих.
   Цвет не возвращаем: отыгранное остаётся серым, как в таблице, но своё видно сразу —
   особенно в режиме «выделить мои», где всё чужое гаснет. */
.sc-grid tbody td.sc-t.past.me { background: #b9bcc2 !important; color: #2b2d31 !important; }
.sc-grid tbody td.sc-x.past { background: #d3d3d3 !important; color: #a8a8a8 !important; }
.sc-grid .sc-day.past { color: #999; }
/* Блок, который режет линия «сейчас»: заливка и буквы двухцветные (см. scSplitStyle).
   Буквы красим «текстом-через-фон»: подпись растянута на всю клетку, чтобы граница цвета
   у букв совпала с границей заливки. */
.sc-grid td > i.split, .st-grid td > i.split {
  display: block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sc-daytbl tbody td.past { opacity: .55; }
.sc-daytbl tr.past .sc-time { opacity: .5; }

/* «Выделить мои»: чужие часы гаснут, свои остаются в полном цвете. Для вопроса «где я»
   это нагляднее любой рамки, но по умолчанию выключено — обычно смотрят покрытие целиком. */
.only-me .sc-t:not(.me), .only-me .sc-hole, .only-me .sc-x { opacity: .22; }
/* Класс `nowcol` остаётся — он служит якорем и для красной линии времени, и для наведения
   прокрутки при входе. А вот рисовать его больше нечем: раньше тут была синяя обводка
   текущего получаса, но она и дублировала линию, и перекрывала её (inset-тень ложится
   поверх фона, которым линия и нарисована). */

/* --- Вид «День» (телефон) --- */
.sc-daynav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sc-daynav b { font-size: 16px; font-weight: 500; min-width: 150px; }
.sc-daytbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.sc-daytbl th, .sc-daytbl td { padding: 0; }
.sc-daytbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 26px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.sc-daytbl .sc-time {
  width: 56px;
  text-align: right;
  padding-right: 10px;
  font-weight: 400;
  color: var(--on-surface-variant);
}
.sc-daytbl .sc-time.dead { color: var(--tertiary); }
.sc-daytbl tbody td { height: 24px; text-align: center; font-weight: 700; }
.sc-daytbl tr.hourtop th, .sc-daytbl tr.hourtop td { border-top: 1px solid var(--outline-variant); }
.sc-daytbl tr.nowrow .sc-time { color: var(--primary); font-weight: 700; }
.sc-daytbl tr.nowrow td { box-shadow: inset 0 -1px 0 var(--primary), inset 0 1px 0 var(--primary); }

/* --- Легенда и таблица игроков --- */
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--on-surface-variant);
}
.sc-leg { display: inline-flex; align-items: center; gap: 5px; }
.sc-leg em, .sc-leg-tag {
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: var(--shape-xs);
  background: var(--surface-container-highest);
  color: var(--on-surface);
}
.sc-players th.num, .sc-players td.num { text-align: right; }
.sc-players .dim { color: var(--on-surface-variant); }
.sc-players .sc-prio { color: var(--on-surface-variant); width: 32px; }
.sc-players tr.sc-merow { background: rgba(11, 87, 208, .08); }

@media (max-width: 720px) {
  .sc-badge b { font-size: 16px; }
  .sc-scroll { max-height: 66vh; }
  .sc-daynav b { min-width: 0; flex: 1; text-align: center; }
}