/* CS2 2D-реплей — веб-сайт. Mobile-first; карта всегда тёмная (палитру не менять). */

:root {
  /* --- шкала размеров шрифта (rem от корня — масштабируется настройкой "Размер текста") --- */
  --fs-2xs: 0.6875rem;  /* 11px — только плотные подписи на карте/канвасе и мелкие бейджи */
  --fs-xs: 0.75rem;     /* 12px — минимум для обычного текста */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-base: 0.875rem;  /* 14px — базовый текст интерфейса */
  --fs-md: 0.9375rem;   /* 15px — текст отчёта/разбора */
  --fs-lg: 1.0625rem;   /* 17px */
  --fs-xl: 1.25rem;     /* 20px */

  /* --- палитра — из дизайн-системы ds.css («Радар»): тёмная по умолчанию, светлая по
     data-theme="light" (переключает js/theme.js). Здесь только привязка имён приложения
     к токенам --ds-*; сами значения меняются в ds.css. --- */
  --bg-d: var(--ds-bg);
  --panel-d: var(--ds-surface);
  --panel2-d: var(--ds-surface-2);
  --text-d: var(--ds-text);
  --hint-d: var(--ds-text-2);
  --line-d: var(--ds-line-2);

  --bg: var(--bg-d);
  --panel: var(--panel-d);
  --panel2: var(--panel2-d);
  --text: var(--text-d);
  --hint: var(--hint-d);
  --line: var(--line-d);
  /* главная кнопка — «стрелка прибора»: светлая заливка в тёмной теме, тёмная в светлой */
  --accent: var(--ds-face);
  --accent-text: var(--ds-face-ink);
  --accent-soft: rgba(236, 229, 218, 0.12); /* как --ds-face 12 %; без color-mix — старые WebView */
  --link: var(--ds-ct-text);
  --danger: var(--ds-bad);
  --good: var(--ds-good);
  --warn: var(--ds-warn);

  /* яркие цвета сторон — для точек/маркеров на карте и совпадающих с ней элементов интерфейса, не трогать */
  --ct: var(--ds-ct);
  --t: var(--ds-t);
  /* приглушённые версии для текста (имена, заголовки команд) */
  --ct-text: var(--ds-ct-text);
  --t-text: var(--ds-t-text);
  --ct-soft: var(--ds-ct-soft);
  --t-soft: var(--ds-t-soft);

  --map-bg: var(--ds-map-bg);
  --radius: var(--ds-r-l);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: dark;
}

/* --- светлая тема: значения подменяет ds.css (:root[data-theme="light"]) --- */
:root[data-theme="light"] {
  color-scheme: light;
  --accent-soft: rgba(26, 22, 18, 0.12);
}

* { box-sizing: border-box; }

html {
  /* настройка "Размер текста" (A/A+/A++) меняет этот процент — см. js/theme.js */
  font-size: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.4 var(--font-text, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* clip вместо hidden: не делает body контейнером прокрутки, иначе не работает position: sticky (вкладки) */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button:disabled { opacity: 0.5; cursor: default; }
a { color: var(--link); }

.ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; }

.app {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* ---------- общие элементы ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--panel2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
/* Масштабирование страницы разрешено (viewport без user-scalable=no), но двойной тап по кнопкам
   не должен зумить и задерживать клик на 300 мс. */
button, a, input, select, textarea, label, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); }

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
.spinner.small { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.2s linear;
}
.progress-fill.indeterminate {
  width: 35% !important;
  animation: indet 1.3s ease-in-out infinite;
}
@keyframes indet {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 90; /* выше листов (60–80): тост всегда виден */
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(36, 32, 27, 0.96);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  font-weight: 500;
}
.toast.error { background: #b3261e; }

/* Лист подтверждения/ввода (R.web.confirm/prompt/alert, telegram.js) вместо window.confirm/prompt */
.dlg-sheet {
  position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.dlg-box {
  width: 100%; max-width: 480px; display: grid; gap: 14px;
  background: var(--panel); color: var(--text); border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(16px + var(--safe-bottom));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
  .dlg-sheet { align-items: center; }
  .dlg-box { border-radius: 16px; padding-bottom: 16px; }
}
.dlg-text { margin: 0; font-size: var(--fs-md, 1rem); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.dlg-input {
  width: 100%; min-height: 72px; resize: vertical; border-radius: 10px; padding: 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); font: inherit;
}
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dlg-actions .btn { flex: 1; justify-content: center; }
.btn-danger { background: var(--danger); color: var(--accent-text); }

/* Ошибка интерфейса / нет JS */
.noscript-msg { padding: 24px 16px; text-align: center; color: var(--text); }

/* =================== Экран «Матчи» =================== */

.screen-matches { padding: 16px 16px 32px; max-width: 760px; margin: 0 auto; }

.m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.m-title h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.m-sub { margin: 2px 0 0; color: var(--hint); font-size: var(--fs-sm); }

.upload-panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}
.upload-panel.error { border-color: var(--danger); }
.upload-panel.error .progress-fill { background: var(--danger); }
.upload-panel.error .up-meta { color: var(--danger); }
.up-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.up-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.up-meta { margin-top: 8px; color: var(--hint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.m-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 16px;
  text-align: center;
  color: var(--hint);
}
.m-state.error { color: var(--danger); }
.m-poll-error {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-sm);
  color: var(--danger); background: var(--ds-bad-soft); background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid var(--ds-bad); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}
.toast-link { margin-left: 10px; color: inherit; font-weight: 700; text-decoration: underline; }
.m-state.empty b { color: var(--text); font-size: 1rem; }
.m-state .empty-ic { font-size: 2.5rem; }

.matches-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mc {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
}
.mc-link {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 52px 10px 10px;
  color: inherit;
  text-decoration: none;
  min-height: 84px;
}
.mc-link:active { background: var(--panel2); }
.mc-map {
  flex: none;
  width: 72px;
  border-radius: 10px;
  background: linear-gradient(135deg, #352f28, #201c17);
  display: flex;
  align-items: flex-end;
  padding: 6px;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mc-map.map-de_ancient { background: linear-gradient(135deg, #4d6b3a, #243322); }
.mc-map.map-de_mirage { background: linear-gradient(135deg, #9a7a45, #4a3820); }
.mc-map.map-de_inferno { background: linear-gradient(135deg, #9b5a3a, #4a2517); }
.mc-map.map-de_nuke { background: linear-gradient(135deg, #3f6a86, #1c3140); }
.mc-map.map-de_dust2 { background: linear-gradient(135deg, #b39157, #5a4726); }
.mc-map.map-de_anubis { background: linear-gradient(135deg, #b0874a, #3d4f63); }
.mc-map.map-de_vertigo { background: linear-gradient(135deg, #6b7a8c, #2a323c); }
.mc-map.map-de_overpass { background: linear-gradient(135deg, #5a7d6a, #26352d); }
.mc-map.map-de_train { background: linear-gradient(135deg, #6e6a5d, #2e2c26); }
.mc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.mc-teams { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.mc-team {
  flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.2;
  /* одна строка с многоточием — перенос по слову ломал «Команда A» на «Команда» / «A» */
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mc-team-b { text-align: right; }
.mc-score { flex: none; font-size: 1.0625rem; font-variant-numeric: tabular-nums; display: inline-flex; gap: 3px; }
.mc-score i { font-style: normal; color: var(--hint); }
.mc-score-empty { color: var(--hint); }
.mc-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--hint); min-width: 0; }
.mc-demo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* «сегодня, 23:06 · Автор» — одна строка, при нехватке места обрезается автор */
.mc-meta2 span { white-space: nowrap; }
.mc-meta2 span:first-child { flex: none; }
.mc-meta2 span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-status {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-2xs);
}
.st-ready { background: rgba(63, 185, 80, 0.16); color: var(--good); }
.st-wait { background: var(--accent-soft); color: var(--link); }
.st-wait::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.st-error { background: var(--ds-bad-soft); color: var(--danger); }
.mc-del {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hint);
  display: grid;
  place-items: center;
}
.mc-del:active { background: var(--panel2); color: var(--danger); }

/* =================== Экран реплея =================== */

.replay-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 24px 16px;
}
.rs-box {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.rs-title { font-size: var(--fs-lg); font-weight: 700; }
.rs-text { color: var(--hint); white-space: pre-line; font-size: var(--fs-sm); }
.rs-progress { width: 100%; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.replay-status.error .rs-title { color: var(--danger); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding-right: 8px;
  color: var(--hint);
  text-decoration: none;
  font-weight: 500;
}
.in-telegram .back-link { display: none; }

.cs2-menu { position: relative; z-index: 12; }
.cs2-menu > summary {
  list-style: none;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.cs2-menu > summary::-webkit-details-marker { display: none; }
.cs2-menu[open] > summary { border-color: var(--accent); }
.cs2-sheet {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}
.cs2-title { margin-bottom: 9px; font-weight: 700; }
#cs2-actions { display: flex; flex-direction: column; gap: 7px; }
#cs2-actions .btn { width: 100%; text-align: center; text-decoration: none; }
.cs2-expiry, .cs2-mobile-note, .cs2-unavailable { color: var(--hint); font-size: var(--fs-xs); }
.cs2-expiry { margin-top: -4px; text-align: center; }
.cs2-unavailable { padding: 8px; border-radius: 8px; background: var(--panel2); text-align: center; }
.cs2-mobile-note { text-align: center; }
.cs2-block { display: grid; gap: 7px; padding-bottom: 9px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.cs2-sub { color: var(--hint); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.cs2-warn { margin: 0; font-size: var(--fs-xs); color: var(--hint); overflow-wrap: anywhere; }
.cs2-warn .btn { margin-top: 6px; }
.cs2-open-desktop { display: none !important; }
#cs2-actions p { margin: 3px 0 0; color: var(--hint); font-size: var(--fs-xs); line-height: 1.4; }
#cs2-actions code { color: var(--text); overflow-wrap: anywhere; }

.map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.map-canvas:active { cursor: grabbing; }
/* Телефон: страница прокручивается и пальцем по карте (pan-y) — карту двигают двумя пальцами или
   после короткого удержания (input.js attachMap). Во весь экран прокручивать нечего — как раньше. */
@media (max-width: 900px) {
  .map-canvas { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  #replay[data-full] .map-canvas { touch-action: none; }
}
.map-canvas.map-grab { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Тренерский режим (draw.js): свой canvas поверх карты — не трогает render.js.
   pointer-events выключены, пока режим не активен (карту можно крутить как обычно). */
.draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  touch-action: none;
  pointer-events: none;
}
.draw-canvas.active { pointer-events: auto; cursor: crosshair; }
.draw-canvas.tool-eraser.active { cursor: cell; }
.draw-bar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: calc(100% - 16px);
}
.draw-bar[hidden] { display: none; }
.draw-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.draw-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 12, 10, 0.78);
  color: #cec6b9;
}
.draw-tool svg { width: 18px; height: 18px; }
.draw-tool.active { color: var(--ds-map-ink); border-color: var(--ds-map-ink); background: rgba(236, 229, 218, 0.12); }
.draw-tool[disabled] { opacity: 0.4; }
.draw-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 0;
}
.draw-color.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }

.killfeed {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
  max-width: calc(100% - 16px);
}
.kf {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(14, 12, 10, 0.78);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  animation: kfIn 0.18s ease-out;
}
.kf.mine { box-shadow: inset 0 0 0 1.5px #ff4d4d; }
@keyframes kfIn { from { opacity: 0; transform: translateX(8px); } }
.kf-n { overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.kf-n.side-ct { color: var(--ct); }
.kf-n.side-t { color: var(--t); }
.kf-w { display: inline-flex; align-items: center; color: #f1ebe1; font-size: 1rem; line-height: 1; }
.kf-w .wi-txt { font-size: var(--fs-2xs); font-weight: 500; color: #d6cfc3; }
.kf-i { display: inline-flex; color: var(--danger); }
.kf-txt { font-size: var(--fs-2xs); font-weight: 800; }
.kf-action { border-left: 2px solid currentColor; }
.kf-action.side-ct { color: var(--ct); }
.kf-action.side-t { color: var(--t); }
.kf-action .kf-i { color: inherit; }
.kf-action .kf-n { max-width: 210px; color: #f1ebe1; }

.map-tools {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.chip-btn {
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 12, 10, 0.72);
  color: #b8ae9f;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.chip-btn.active { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(40, 46, 58, 0.9); }
/* ---------- «Слои» ---------- */
.ly-title { margin: 12px 0 6px; font-size: var(--fs-xs); color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.ly-custom { margin-top: 4px; font-size: var(--fs-xs); color: var(--hint); }
.ly-hint { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.35; color: var(--hint); }
.ly-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ly-chips.dim { opacity: 0.5; }
.ly-chip {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ly-chip.active { background: var(--panel2); color: var(--text); border-color: var(--accent); }
.tl-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 44px;
  touch-action: none;
  cursor: pointer;
}
.tl-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.tl-zone { position: absolute; top: 0; bottom: 0; }
.tl-freeze { background: repeating-linear-gradient(45deg, rgba(160, 150, 136, 0.25) 0 4px, transparent 4px 8px); }
.tl-bomb { background: rgba(242, 103, 78, 0.35); }
.tl-after { background: rgba(0, 0, 0, 0.25); }
.tl-clip { background: rgba(195, 139, 255, 0.4); box-shadow: inset 0 0 0 1px rgba(195, 139, 255, 0.85); }
.tl-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ds-line-3); }
.tl-marks { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.tl-mark {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #a69c8e;
}
.tl-mark.k-kill.s-ct { background: var(--ct); }
.tl-mark.k-kill.s-t { background: var(--t); }
.tl-mark.k-bomb { background: #ffffff; top: 7px; bottom: 7px; }
.tl-mark.k-utility { background: #8a8073; top: 15px; bottom: 15px; opacity: 0.8; }
.tl-mark.k-pickup { background: #62c96b; top: 13px; bottom: 13px; opacity: 0.9; }
.tl-mark.k-equip { background: #a69c8e; top: 17px; bottom: 17px; opacity: 0.65; }
.tl-mark.k-analysis { background: #c05bff; top: 4px; bottom: auto; height: 8px; width: 8px; margin-left: -4px; border-radius: 50%; }
.tl-mark.hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.tl-head {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}
.tl-track.dragging .tl-head { width: 6px; margin-left: -3px; }
.tl-tip {
  position: absolute;
  bottom: 100%;
  margin-bottom: 4px;
  max-width: min(320px, 100%);
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(24, 21, 18, 0.96);
  color: #f1ebe1;
  font-size: var(--fs-xs);
  line-height: 1.3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 5;
}
.tip-t { color: #a69c8e; font-variant-numeric: tabular-nums; }
.tip-tags { display: block; color: #d69cff; margin-top: 2px; }

.team-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 4px 6px;
  font-weight: 700;
}
.side-ct .team-head .th-name { color: var(--ct-text); }
.side-t .team-head .th-name { color: var(--t-text); }
.th-side { font-size: var(--fs-2xs); color: var(--hint); letter-spacing: 0.06em; }
.cards { display: flex; flex-direction: column; gap: 8px; }

.pcard {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.2s, border-color 0.15s;
}
.pcard.selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pcard.dead { opacity: 0.4; }
.pcard.absent { opacity: 0.25; }
.pc-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-num { flex: none; width: 16px; color: var(--hint); font-weight: 600; font-size: var(--fs-sm); text-align: center; }
.pc-name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-kad { flex: none; display: flex; gap: 9px; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.pc-kad span { display: inline-flex; align-items: center; gap: 3px; }
.pc-kad .pc-a { color: var(--hint); }
.pc-row2 { margin-top: 2px; padding-left: 24px; font-size: var(--fs-sm); }
.pc-round-stats {
  margin: 5px 0 0 24px;
  color: var(--hint);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.pc-round-stats span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-round-stats .pc-state { color: var(--ds-warn); font-weight: 700; }
.pc-money { color: var(--good); font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-weapon { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--hint); overflow: hidden; white-space: nowrap; }
.pc-wi { font-size: var(--fs-md); color: var(--text); opacity: 0.9; }
.pc-wname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.pc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  height: 26px;
  padding: 0 8px 0 0;
  border-radius: 8px;
  background: var(--panel2);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.pc-hp {
  flex: none;
  min-width: 38px;
  height: 100%;
  display: grid;
  place-items: center;
  color: #15120f;
  background: var(--t);
}
.side-ct .pc-hp { background: var(--ct); }
.pcard.low .pc-hp { background: var(--danger); color: var(--accent-text); }
.pc-track { flex: 1; min-width: 24px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pc-fill { display: block; height: 100%; width: 0; background: var(--t); border-radius: 3px; transition: width 0.15s; }
.side-ct .pc-fill { background: var(--ct); }
.pcard.low .pc-fill { background: var(--danger); }
.pc-armor, .pc-helmet, .pc-kit, .pc-c4 { display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
.pc-armor.off, .pc-helmet.off { opacity: 0.25; }
.pc-nades { display: inline-flex; gap: 1px; }
.pc-nades .ic { width: 15px; height: 15px; }
.pc-nades .wi, .pc-c4 .wi { font-size: 1rem; }
:root[data-theme="light"] .pc-nades .ic,
:root[data-theme="light"] .pc-nades .wi { filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.9)); }

/* разбор */
.analysis {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 10px 6px;
}
.an-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px; }
.an-head h2 { margin: 0; font-size: 1rem; }
.an-filter {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  font-size: var(--fs-xs);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-list { list-style: none; margin: 0; padding: 0; }
.an-item + .an-item { border-top: 1px solid var(--line); }
.an-btn {
  display: flex;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  text-align: left;
  align-items: flex-start;
  border-radius: 8px;
}
.an-btn:active { background: var(--panel2); }
.an-time {
  flex: none;
  min-width: 48px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--hint);
  padding-top: 1px;
}
.an-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.an-label { font-weight: 600; overflow-wrap: anywhere; }
.an-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { padding: 1px 7px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; }
.tag-bad { background: var(--ds-bad-soft); color: var(--danger); }
.tag-good { background: rgba(63, 185, 80, 0.15); color: var(--good); }
/* цвет — не единственный сигнал: краткий символьный маркер перед подписью */
.tag-bad::before { content: "▼ "; }
.tag-good::before { content: "▲ "; }
.an-time.bomb { color: var(--danger); }
.an-empty { color: var(--hint); font-size: var(--fs-sm); padding: 6px 4px 10px; }

/* подсказка */
.help-pop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.help-box {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow: auto;
  background: var(--panel);
  border-radius: 18px 18px 0 0;
  padding: 14px 18px calc(18px + var(--safe-bottom));
}
.help-head { display: flex; align-items: center; justify-content: space-between; }
.help-head h3 { margin: 0; font-size: var(--fs-lg); }
.help-close { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.125rem; border-radius: 50%; }
.help-cols h4 { margin: 12px 0 6px; font-size: var(--fs-sm); color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; }
.help-cols ul { margin: 0; padding-left: 18px; }
.help-cols li { margin: 4px 0; }
.help-cols .keys { list-style: none; padding: 0; }
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: var(--panel2);
  font: 600 var(--fs-xs)/1.4 var(--font-mono);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =====================================================================
   Этапы разбора, вкладки «Реплей / Разбор / Отчёт», эпизоды, отчёты.
   Всё ниже — отдельные компоненты с собственными классами, чтобы их
   было легко перекрашивать и переставлять независимо от остального.
   ===================================================================== */

/* ---------- сегментированный переключатель (вкладки, «раунд / матч», «ИИ / базовый») ---------- */
.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.seg > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg > button.active { background: var(--panel2); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.seg-sm > button { min-height: 40px; font-size: var(--fs-sm); }

/* ---------- индикатор этапов ---------- */
.stg-bar { display: inline-flex; gap: 3px; flex: none; }
.stg-seg { width: 16px; height: 5px; border-radius: 3px; background: var(--line); }
.stg-seg.stg-done { background: var(--good); }
.stg-seg.stg-cur { background: var(--accent); animation: blink 1.2s ease-in-out infinite; }
.stg-seg.stg-error { background: var(--danger); }

.stg-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.stg-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 10px; border-radius: 10px; color: var(--hint); }
.stg-item.stg-cur { background: var(--panel); color: var(--text); font-weight: 600; }
.stg-item.stg-done { color: var(--text); }
.stg-item.stg-error { background: var(--ds-bad-soft); color: var(--danger); font-weight: 600; }
.stg-mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700;
  border: 1.5px solid var(--line);
}
.stg-done .stg-mark { background: var(--good); border-color: var(--good); color: var(--accent-text); }
.stg-cur .stg-mark { border-color: var(--accent); color: var(--accent); }
.stg-error .stg-mark { background: var(--danger); border-color: var(--danger); color: var(--accent-text); }
.stg-label { flex: 1; min-width: 0; }
.rs-stages { width: 100%; margin: 4px 0 6px; }

/* карточка матча */
.mc-stages { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--hint); min-width: 0; }
.mc-stage-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-partial { background: rgba(63, 185, 80, 0.16); color: var(--good); }
.mc-ai { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; }
.mc-ai.ai-ready { background: rgba(192, 91, 255, 0.16); color: #c98bff; }
.mc-ai.ai-wait { background: var(--accent-soft); color: var(--link); }
.mc-ai.ai-error { background: var(--ds-bad-soft); color: var(--danger); }
.mc-source {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  background: rgba(255, 90, 0, 0.14);
  color: #ff8a3d;
  cursor: pointer;
}

/* ---------- «Разбор» ---------- */
.pane-breakdown.analysis { margin-top: 0; }
.an-head .seg { flex: 1 1 auto; max-width: 280px; }
.bd-note {
  margin: 2px 2px 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--hint);
  font-size: var(--fs-xs);
}
.bd-progress { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; color: var(--hint); font-size: var(--fs-sm); }
/* миниатюра — в правом верхнем углу эпизода; причина и числа занимают всю ширину под ней */
.an-row { position: relative; }
.an-row .an-thumb { position: absolute; top: 8px; right: 4px; margin: 0; }
.an-item.has-thumb .an-label,
.an-item.has-thumb .an-tags { padding-right: 76px; }
.an-item.has-thumb .an-btn { min-height: 86px; }
.an-rnum { display: block; font-size: var(--fs-xs); color: var(--link); }
.an-reason { color: var(--hint); font-size: var(--fs-sm); line-height: 1.3; overflow-wrap: anywhere; }
.an-stats { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); }
.an-stat { display: flex; gap: 6px; min-width: 0; }
.an-stat i { flex: none; font-style: normal; color: var(--hint); }
.an-stat b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tag-sev { background: rgba(160, 150, 136, 0.16); color: var(--hint); }
.tag-sev.sev-mid { background: rgba(255, 170, 60, 0.16); color: var(--warn); }
.tag-sev.sev-high { background: var(--ds-bad-soft); color: var(--danger); }
.tag-sev.sev-high::before { content: "! "; }
.an-thumb {
  flex: none;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--map-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: zoom-in;
}
.an-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-thumb-err { font-size: var(--fs-xs); color: var(--hint); padding: 4px; text-align: center; }
.cs2-copy {
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-xs);
}
.an-item > .cs2-copy { margin: 0 4px 8px 62px; }
.pl-death-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-snap-btn {
  min-height: 40px;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.pl-snap-btn:active { background: var(--panel2); }
.an-round-head { padding: 12px 2px 4px; border-top: 0 !important; }
.an-round-head + .an-item { border-top: 0; }
.an-round-btn {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}

/* ---------- «Отчёт» ---------- */
.pane-report { padding-bottom: 12px; }
.rep-bundle { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rep-bundle-btn { width: 100%; }
.rep-bundle-hint { color: var(--hint); font-size: var(--fs-xs); text-align: center; }
.rep-switch { margin-bottom: 10px; }
.rep-body {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 120px;
}
.rep-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 8px;
  text-align: center;
}
.rep-state-title { font-weight: 700; font-size: var(--fs-md); }
.rep-state-text { color: var(--hint); font-size: var(--fs-sm); max-width: 420px; }
.rep-state-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.rep-error .rep-state-title { color: var(--danger); }
.rep-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rep-meta { color: var(--hint); font-size: var(--fs-xs); }

/* markdown */
.md { font-size: var(--fs-md); line-height: 1.6; overflow-wrap: anywhere; }
@media (min-width: 640px) { .md { max-width: 68ch; } }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 18px 0 8px; line-height: 1.25; }
.md h1 { font-size: var(--fs-xl); }
.md h2 { font-size: var(--fs-lg); }
.md h3 { font-size: var(--fs-md); }
.md h4, .md h5, .md h6 { font-size: var(--fs-base); color: var(--hint); }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md code { font: var(--fs-sm)/1.4 var(--font-mono); background: var(--panel2); padding: 1px 5px; border-radius: 5px; }
.md-pre { background: var(--panel2); border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.md-pre code { background: none; padding: 0; white-space: pre; }
.md blockquote { margin: 8px 0; padding: 2px 12px; border-left: 3px solid var(--line); color: var(--hint); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md-table-wrap { overflow-x: auto; margin: 8px 0; }
.md table { border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.md th, .md td { padding: 5px 8px; white-space: nowrap; }
.md th { color: var(--hint); font-weight: 600; text-align: left; border-bottom: 1px solid var(--line); }
.md tbody tr:nth-child(even) td { background: var(--panel2); }
.md-ref {
  display: inline;
  padding: 0 5px;
  margin: 0 1px;
  border: 1px solid rgba(94, 162, 255, 0.35);
  border-radius: 6px;
  background: rgba(94, 162, 255, 0.1);
  color: var(--link);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
}
.md-ref:active { background: rgba(94, 162, 255, 0.25); }
.md-ref-round { font-size: var(--fs-xs); vertical-align: 2px; margin-left: 6px; }

/* ---------- полноэкранная картинка ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.lb-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.lightbox.zoomed .lb-stage { cursor: grab; }
.lb-img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.lb-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #ede7dd; }
.lb-caption { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.125rem; }
body.lb-open { overflow: hidden; }

/* Кнопка «Скопировать мастер-промпт» и ручное копирование, если буфер обмена недоступен */
.rep-prompt-btn { width: 100%; margin-top: 10px; justify-content: center; gap: 8px; }
.prompt-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.7); display: flex; align-items: flex-end; justify-content: center; }
.prompt-sheet-box { width: 100%; max-width: 720px; max-height: 85vh; display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); color: var(--text); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.prompt-sheet-title { font-weight: 700; }
.prompt-sheet textarea { flex: 1; min-height: 40vh; width: 100%; resize: none; border-radius: 10px; padding: 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); font: var(--fs-xs)/1.4 var(--font-mono); }

/* ---------- иконки оружия (weapons.js): SVG из набора как маска, цвет — currentColor ---------- */
.wi {
  display: inline-block;
  flex: none;
  height: 1em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.wi-txt { font-size: 0.75em; font-weight: 700; letter-spacing: 0.02em; }
.wi-he { color: #ff5b4a; }
.wi-flash { color: #f4f1d0; }
.wi-smoke { color: #c4bcb0; }
.wi-molotov { color: #ff8a1f; }
.wi-decoy { color: #988e80; }
.wi-c4 { color: #ff6b5b; }

/* ---------- «Игроки» (players.js) ---------- */
.pane-players { padding-bottom: 16px; }
.pl-team {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 6px 6px 4px;
  margin-bottom: 12px;
}
.pl-team-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 30px 6px 8px;
  font-weight: 700;
}
.pl-team.side-ct .th-name { color: var(--ct-text); }
.pl-team.side-t .th-name { color: var(--t-text); }
.pl-team-head .pl-cols { font-size: var(--fs-xs); font-weight: 600; color: var(--hint); letter-spacing: 0.04em; }
.pl-cols { flex: none; display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.pl-cols > span { min-width: 40px; text-align: right; }
.pl-cols > span:first-child { min-width: 78px; }
.pl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 6px 6px 6px 8px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-size: var(--fs-md);
}
.pl-row:active { background: var(--panel2); }
.pl-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-kda { font-weight: 600; }
.pl-chev { flex: none; color: var(--hint); }
.pl-foot { color: var(--hint); font-size: var(--fs-xs); text-align: center; padding: 2px 8px; }

.pl-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 10px;
}
.pl-back {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: flex-start;
  width: auto;
  min-height: 40px;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font-size: var(--fs-base);
  font-weight: 600;
  justify-content: flex-start;
}
.pl-title { flex: 1; min-width: 0; }
.pl-title h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.2; overflow-wrap: anywhere; }
.pl-head.side-ct h2 { color: var(--ct-text); }
.pl-head.side-t h2 { color: var(--t-text); }
.pl-sub { color: var(--hint); font-size: var(--fs-sm); }
.pl-follow { flex: none; }

.pl-sec {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  min-width: 0;
}
.pl-sec h3 { margin: 0 0 8px; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-sec h4 { margin: 12px 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; }
.pl-sec h4.side-ct .pl-side { color: var(--ct-text); }
.pl-sec h4.side-t .pl-side { color: var(--t-text); }
.pl-hint, .pl-empty { color: var(--hint); font-size: var(--fs-xs); margin-top: 6px; line-height: 1.35; }
.pl-note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 170, 60, 0.1);
  color: var(--hint);
  font-size: var(--fs-xs);
}
.pl-approx { color: var(--warn); font-weight: 700; margin-right: 1px; cursor: help; }
.pl-badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 170, 60, 0.16);
  color: var(--warn);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.pl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pl-tile {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--panel2);
}
.pl-tile.wide { grid-column: 1 / -1; }
/* воронка размена: три стадии в ряд и на телефоне */
.pl-tiles.pl-tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-tiles3 .pl-tile { padding: 7px 7px; }
.pl-tile i { font-style: normal; font-size: 0.71875rem; color: var(--hint); }
.pl-tile b { display: flex; align-items: center; gap: 5px; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pl-tile small { font-size: 0.71875rem; color: var(--hint); overflow-wrap: anywhere; }
.pl-tile.bad b { color: var(--danger); }
.pl-tile.bad b::before { content: "▼ "; }
.pl-unit { font-size: var(--fs-2xs); font-weight: 400; color: var(--hint); margin-left: 1px; }
.pl-ti { font-size: 1.125rem; opacity: 0.85; }

/* таблицы: на телефоне горизонтальный скролл только внутри блока, первая колонка закреплена */
.pl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; scrollbar-width: thin; }
.pl-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pl-table th, .pl-table td { padding: 6px 7px; text-align: right; white-space: nowrap; vertical-align: middle; }
/* зебра слабым фоном вместо сетки линий между строками */
.pl-table tbody tr:nth-child(even) > * { background: var(--panel2); }
.pl-table thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--hint); border-bottom: 1px solid var(--line); }
.pl-table tbody th { text-align: left; font-weight: 600; }
.pl-table thead th:first-child { text-align: left; }
.pl-table td small { display: block; font-size: var(--fs-xs); color: var(--hint); }
.pl-table .pl-n { color: var(--hint); }
.pl-timing tbody th small { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--hint); white-space: normal; }
.pl-timing tbody th { white-space: normal; min-width: 120px; }
.pl-wcell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
  text-align: left !important;
}
.pl-table tbody .pl-wcell { display: table-cell; }
.pl-table tbody tr:nth-child(even) .pl-wcell { background: var(--panel2); }
.pl-wi { font-size: 1.125rem; vertical-align: middle; margin-right: 6px; color: var(--text); }
.pl-wname { font-size: var(--fs-xs); font-weight: 600; color: var(--hint); vertical-align: middle; }
.pl-weapons .pl-wcell { min-width: 96px; }
.pl-weapons .pl-wname { display: block; margin-top: 2px; }
.pl-dist .pl-wcell .pl-wname { display: block; margin-top: 2px; }
.pl-dist td { min-width: 56px; }
.pl-good { color: var(--good); font-weight: 600; }
.pl-bad { color: var(--danger); font-weight: 600; }
.pl-good::before { content: "▲ "; }
.pl-bad::before { content: "▼ "; }
.pl-dim { color: var(--hint); }

.pl-bars { display: flex; flex-direction: column; gap: 7px; }
.pl-bar { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.pl-bar-label { flex: none; width: 108px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar-track { flex: 1; min-width: 30px; height: 8px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.pl-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--good); }
.pl-bar-fill.low { background: #e5904d; }
.pl-bar-val { flex: none; width: 92px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pl-bar-val small { font-size: var(--fs-xs); color: var(--hint); }

.pl-ecos { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-eco {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
  padding: 2px 3px;
  border-radius: 6px;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  font-size: var(--fs-2xs);
  line-height: 1.2;
}
.pl-eco b { font-variant-numeric: tabular-nums; }
.pl-eco i { font-style: normal; color: var(--hint); font-size: var(--fs-2xs); }
.pl-eco.won { border-bottom-color: var(--good); }
.pl-eco.lost { border-bottom-color: var(--ds-bad); }
.pl-eco.side-ct b { color: var(--ct-text); }
.pl-eco.side-t b { color: var(--t-text); }

/* Полоска типов закупки команд по раундам (players.json team_economy) */
.pl-tecos { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-teco {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 26px;
  padding: 2px 3px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  cursor: pointer;
  line-height: 1.2;
}
.pl-teco:hover, .pl-teco:active { background: var(--panel2); }
.pl-teco i { font-style: normal; color: var(--hint); font-size: var(--fs-2xs); }
.pl-teco-a, .pl-teco-b { display: block; font-size: var(--fs-2xs); font-weight: 700; }
.buy-pistol { color: var(--hint); }
.buy-eco { color: var(--warn); }
.buy-force { color: #ff8a32; }
.buy-full { color: var(--good); }

.pl-duels { list-style: none; margin: 8px 0 0; padding: 0; }
.pl-duel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
  padding-left: 7px;
}
.pl-duel.res-win { border-left-color: var(--good); }
.pl-duel.res-loss { border-left-color: var(--ds-bad); }
.pl-duel.res-neutral { border-left-color: var(--line); }
.pl-dtime { flex: none; width: 44px; display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; }
.pl-dtime b { color: var(--link); font-size: var(--fs-xs); }
.pl-dbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-dline { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-base); }
.pl-dwi { font-size: var(--fs-lg); color: var(--text); }
.pl-dline .wi-txt { font-size: var(--fs-2xs); color: var(--hint); }
.pl-vs { flex: none; font-size: var(--fs-xs); color: var(--hint); }
.pl-opp { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dmeta { font-size: var(--fs-xs); color: var(--hint); overflow-wrap: anywhere; }
.res-win .pl-res { color: var(--good); font-weight: 600; }
.res-loss .pl-res { color: var(--danger); font-weight: 600; }
.res-win .pl-res::before { content: "✓ "; }
.res-loss .pl-res::before { content: "✗ "; }
.pl-dtags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-open { background: var(--accent-soft); color: var(--link); }
.pl-dtag { font-size: var(--fs-2xs); color: var(--hint); }
.pl-watch {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 56px;
  min-height: 44px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-sm);
}
.pl-watch span { font-size: var(--fs-xs); color: var(--hint); }
.pl-watch:active { filter: brightness(1.2); }
.pl-more { width: 100%; margin-top: 8px; }

.pl-sidef { display: flex; gap: 6px; margin: 8px 0; }
.pl-sidef button.active { background: var(--panel2); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.pl-orivals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pl-orival { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); }
.pl-orival span:first-child { color: var(--hint); flex: 1; }
.pl-orival b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.pl-orival span:last-child { color: var(--hint); flex: none; }

@media (min-width: 520px) {
  .pl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .pl-row:hover, .pl-watch:hover { background: var(--panel2); filter: brightness(1.1); }
  .pl-back:hover { text-decoration: underline; }
  .pl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* «Разбор → Главное» (ai_episodes.json) */
.an-top-head {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}
.an-top-foot { padding: 10px 2px 4px; color: var(--hint); font-size: var(--fs-xs); line-height: 1.35; border-top: 0 !important; }
.an-state { color: var(--hint); font-weight: 600; font-size: var(--fs-xs); margin-left: 4px; }

/* «Игроки → Над чем работать» (players.json improvements, каталог улучшений без ИИ) */
.pl-imps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-imp {
  min-width: 0;
  padding: 9px 10px 10px;
  border-radius: 10px;
  background: var(--panel2);
  border-left: 3px solid var(--line);
}
.pl-imp.sev-high { border-left-color: var(--ds-bad); }
.pl-imp.sev-medium { border-left-color: #e5904d; }
.pl-imp.sev-low { border-left-color: var(--hint); }
.pl-imp-head { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pl-imp-n { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.pl-imp-title { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-base); line-height: 1.25; overflow-wrap: anywhere; }
.pl-imp-sev { flex: none; font-size: var(--fs-2xs); font-weight: 600; color: var(--hint); }
.sev-high .pl-imp-sev { color: var(--danger); }
.sev-medium .pl-imp-sev { color: #e5904d; }
.pl-imp-text { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.pl-imp-metrics { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.pl-imp-metric { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pl-imp-metric small { font-size: var(--fs-xs); color: var(--hint); overflow-wrap: anywhere; }
.pl-imp-eps { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pl-imp-ep {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
}
.pl-imp-ep:active { filter: brightness(1.2); }
.pl-imp-play { flex: none; font-size: var(--fs-xs); color: var(--link); }
.pl-imp-ep b { flex: none; color: var(--link); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pl-imp-note { flex: 1; min-width: 0; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-strengths { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-strength {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(63, 185, 80, 0.1);
  border-left: 3px solid var(--good);
  font-size: var(--fs-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pl-strength b { font-size: var(--fs-base); color: var(--good); }
@media (min-width: 901px) {
  .pl-imp-ep:hover { filter: brightness(1.15); }
}

/* ---------- «Отчёт» → ИИ-разборы (report.js: список задач, конфигуратор, результат) ---------- */
.aij-create { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.aij-create-btn { width: 100%; }
.aij-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aij-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--text);
  text-align: left;
  font-size: var(--fs-base);
}
.aij-card:active { filter: brightness(1.15); }
.aij-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aij-date { color: var(--hint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.aij-card-players { font-weight: 700; overflow-wrap: anywhere; }
.aij-card-sub { color: var(--hint); font-size: var(--fs-xs); line-height: 1.35; overflow-wrap: anywhere; }
.aij-status, .aij-badge {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  background: var(--panel);
  color: var(--hint);
  white-space: nowrap;
}
.aij-status.aij-wait { background: rgba(94, 162, 255, 0.16); color: var(--link); }
.aij-status.aij-ok { background: rgba(63, 185, 80, 0.16); color: var(--good); }
.aij-status.aij-warn { background: rgba(255, 170, 60, 0.16); color: var(--warn); }
.aij-status.aij-err { background: var(--ds-bad-soft); color: var(--danger); }
.aij-progress { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 2px; }
.aij-progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; }

.aij-back {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--link);
  font-size: var(--fs-base);
  font-weight: 600;
}
.aij-h { margin: 0 0 10px; font-size: var(--fs-lg); }
.aij-sec { padding: 10px 0; border-top: 1px solid var(--line); }
.aij-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.aij-sec-head h4 { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; }
.aij-count { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.aij-count.aij-over, .aij-warn { color: var(--danger); }
.aij-warn { font-size: var(--fs-xs); margin-top: 6px; }
.aij-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aij-quick .btn { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aij-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aij-team { min-width: 0; padding: 6px 6px 4px; border-radius: 10px; background: var(--panel2); }
.aij-team-name { padding: 0 4px 4px; font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aij-team.side-ct .aij-team-name { color: var(--ct-text); }
.aij-team.side-t .aij-team-name { color: var(--t-text); }
.aij-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px;
  border-radius: 8px;
  font-size: var(--fs-base);
  cursor: pointer;
}
.aij-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.aij-check > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
.aij-check small { display: block; color: var(--hint); font-size: var(--fs-xs); line-height: 1.3; white-space: normal; }
.aij-scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.aij-scope.aij-off { opacity: 0.55; cursor: not-allowed; }
.aij-recs { margin-bottom: 6px; max-width: 280px; }
.aij-toggle { min-height: 40px; }
.aij-summary { display: flex; flex-direction: column; gap: 4px; }
.aij-sum-row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-base); }
.aij-sum-row span { color: var(--hint); }
.aij-sum-row b { font-variant-numeric: tabular-nums; }
.aij-note {
  margin: 6px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--panel2);
  color: var(--hint);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.aij-note-warn { background: rgba(255, 170, 60, 0.1); }
.aij-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aij-actions .btn { flex: 1 1 140px; }

.aij-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.aij-running { display: flex; gap: 12px; align-items: center; padding: 14px 4px; }
.aij-running .spinner { flex: none; }
.aij-running-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aij-pstatus { list-style: none; margin: 0; padding: 0; }
.aij-pstatus li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px solid var(--line); font-size: var(--fs-base); }
.aij-pstatus li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aij-team-sum { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); font-size: var(--fs-base); line-height: 1.45; }
.aij-team-sum h4 { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; }
.aij-team-sum p { margin: 0 0 6px; }
.aij-team-sum ol, .aij-team-sum ul { margin: 4px 0 6px; padding-left: 20px; }
.aij-chips { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 8px; scrollbar-width: none; }
.aij-chips::-webkit-scrollbar { display: none; }
.aij-chip {
  flex: none;
  max-width: 180px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aij-chip.active { background: var(--panel2); color: var(--text); border-color: var(--accent); }
.aij-chip-err { text-decoration: line-through; }
.aij-player { min-width: 0; }
.aij-summary-text { margin: 4px 0 8px; font-size: var(--fs-base); line-height: 1.45; }
.aij-sub { margin: 12px 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; }
.aij-strengths { margin: 0; padding-left: 18px; font-size: var(--fs-base); line-height: 1.45; }
.aij-strengths li { margin-bottom: 6px; }
.aij-rec {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  font-size: var(--fs-base);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.aij-rec p { margin: 6px 0; }
.aij-rec-head { display: flex; align-items: flex-start; gap: 8px; }
.aij-rec-head h5 { margin: 1px 0 0; font-size: var(--fs-md); line-height: 1.3; }
.aij-prio {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.aij-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.aij-tag { padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--hint); font-size: 0.71875rem; font-weight: 600; }
.aij-tag.aij-conf-high { color: var(--good); }
.aij-tag.aij-conf-low { color: var(--warn); }
.aij-tag-approx { color: var(--warn); }
.aij-evidence { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.aij-ev {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.aij-ev:active { filter: brightness(1.2); }
.aij-actions-list ul { margin: 4px 0 0; padding-left: 18px; }
.aij-ev-pair { display: inline-flex; gap: 4px; }
.aij-plan {
  margin: 4px 0 10px;
  padding: 8px 12px 10px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--panel2);
  font-size: var(--fs-base);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.aij-plan .aij-sub { margin-top: 2px; }
.aij-plan ol { margin: 0; padding-left: 20px; }
.aij-plan li { margin-bottom: 6px; }
.aij-plan-row { font-size: var(--fs-sm); }
.aij-plan-row > span { color: var(--hint); }
.aij-plan code { font-size: var(--fs-xs); }
.aij-target { margin-top: 6px; font-size: var(--fs-sm); }
.aij-target > span { color: var(--hint); }
.aij-basis { margin-top: 6px; color: var(--hint); font-size: var(--fs-xs); }
.aij-rec code, .aij-target code, .aij-basis code { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.aij-caveats { margin-top: 6px; color: var(--hint); font-size: var(--fs-xs); font-style: italic; }
@media (min-width: 901px) {
  .aij-card:hover, .aij-ev:hover, .aij-chip:hover { filter: brightness(1.12); }
  .aij-back:hover { text-decoration: underline; }
}

/* Разбор смертей в профиле игрока. */
.pl-death-causes, .pl-death-list > ul { list-style: none; padding: 0; margin: 0; }
.pl-death-causes > li, .pl-death-card { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pl-death-causes > li > div:first-child, .pl-death-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pl-death-causes small, .pl-death-card small, .pl-death-heading > span { color: var(--hint); font-size: var(--fs-xs); }
.pl-death-examples, .pl-death-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.pl-death-link { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); padding: 8px; min-height: 44px; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.pl-death-link:hover { background: var(--panel); }
.pl-death-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-death-tag { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: var(--fs-xs); }
.pl-death-list summary, .pl-death-card summary { cursor: pointer; padding: 12px 0; }
.pl-death-card > b { display: block; margin-top: 6px; font-size: var(--fs-base); }
.pl-death-card details ul { padding-left: 20px; font-size: var(--fs-xs); line-height: 1.7; }

/* ---------- сайт: шапка, вход, ожидание доступа, «Доступ» ---------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 16px 0;
}
.site-brand { font-weight: 700; color: var(--text); text-decoration: none; margin-right: auto; }
.site-user {
  color: var(--hint);
  font-size: var(--fs-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-header .btn-small { min-height: 32px; text-decoration: none; }
/* реплей — полноэкранная раскладка со своей кнопкой «Матчи» */
body[data-screen="replay"] .site-header { display: none; }

/* Кнопка «Аа» (шапка списка матчей и рядом с «CS2» на экране реплея) — открывает
   один общий поповер «Оформление» (тема + размер текста), см. js/theme.js. */
.theme-btn {
  flex: none;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.theme-pop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.theme-pop-box {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  color: var(--text);
  border-radius: 18px 18px 0 0;
  padding: 14px 18px calc(18px + var(--safe-bottom));
}
.theme-pop-head { display: flex; align-items: center; justify-content: space-between; }
.theme-pop-head h3 { margin: 0; font-size: var(--fs-lg); }
.theme-pop-sub { margin: 14px 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; }
.theme-pop .theme-mode > button,
.theme-pop .theme-scale > button { font-size: var(--fs-sm); }
@media (min-width: 901px) {
  .theme-pop { align-items: center; }
  .theme-pop-box { border-radius: 16px; }
}

.simple-screen { padding: 16px 16px 32px; max-width: 760px; margin: 0 auto; }
.simple-card {
  margin-top: 12vh;
  padding: 24px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.simple-card h1 { margin: 0 0 8px; font-size: var(--fs-xl); }
.simple-card p { margin: 0; color: var(--hint); }

.access-card h1 { margin: 0; font-size: var(--fs-xl); }
.access-card h2 {
  margin: 22px 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
}
.access-title { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.access-title a { text-decoration: none; }
.access-add { display: flex; gap: 8px; }
.access-add input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.acc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
}
.acc-who { min-width: 0; overflow-wrap: anywhere; }
.acc-id { color: var(--hint); font-size: var(--fs-xs); white-space: nowrap; }
.acc-actions { display: flex; gap: 6px; flex: none; }
.acc-fixed { color: var(--hint); font-size: var(--fs-xs); }
.acc-danger { color: var(--danger); }
.acc-empty { margin: 0; color: var(--hint); }
@media (max-width: 420px) {
  .acc-row { flex-direction: column; align-items: stretch; }
  .acc-actions { justify-content: flex-end; }
}

/* ---------- вход (login.html): прибор в центре, направление «Радар» (ds.css) ---------- */
.login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  overflow: hidden;
  isolation: isolate;
}
.login-rings {
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; width: 1100px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 79px, var(--ds-line) 79px 80px);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 62%); mask-image: radial-gradient(circle, #000 15%, transparent 62%);
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 26px 22px 22px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-l);
  text-align: center;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7);
}
.login-scope { position: relative; width: 72px; height: 72px; margin: 0 auto 14px; }
.login-scope .ds-mini-scope { position: absolute; inset: 0; width: 72px; height: 72px; }
.login-scope svg { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); color: var(--ds-text); }
.login-kicker { display: block; margin-bottom: 8px; }
.login-card h1 { margin: 0 0 10px; font: 300 1.625rem/1.15 var(--font-display); letter-spacing: -0.02em; }
.login-card p { margin: 0 0 18px; color: var(--ds-text-2); }
.login-card .login-error { color: var(--danger); margin: 0 0 12px; }
.login-card .login-error:empty { display: none; }
.login-card .login-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--ds-r-m); border: 1px solid var(--ds-line-2); background: var(--ds-surface-2); color: var(--ds-text); text-align: left; }
.login-widget { min-height: 48px; display: flex; justify-content: center; }
.login-card h2 { margin: 4px 0 8px; font: 600 var(--fs-lg)/1.3 var(--font-text); }
.login-card .login-lead { margin: 0 0 18px; color: var(--ds-text-2); line-height: 1.5; font-size: var(--ds-fs-base); }
.login-points { margin: 0 0 18px; padding: 0; list-style: none; text-align: left; font-size: var(--fs-sm); }
.login-points li { position: relative; padding: 3px 0 3px 22px; }
.login-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--good); font-weight: 700; }
.login-points code { font-size: 0.95em; }
.login-steam { min-height: 50px; font-size: var(--ds-fs-base); }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ds-text-3); font: 600 var(--ds-fs-micro)/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--ds-line); }
.login-card .login-hint { margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ds-text-3); }
.login-card .login-about { margin: 16px 0 0; font-size: var(--fs-sm); }
.login-card .login-about a { color: var(--ds-text-2); text-decoration: none; border-bottom: 1px solid var(--ds-line-2); }
.login-card .login-about a:hover { color: var(--ds-text); border-color: var(--ds-line-3); }
.login-back { margin-top: 16px; }
.login-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ds-line); font-size: var(--fs-xs); color: var(--ds-text-3); }
.login-legal a { color: var(--ds-text-3); text-decoration: none; }
.login-legal a:hover { color: var(--ds-text); }
.login-mode { display: none; }
body[data-mode="login"] .login-mode-login,
body[data-mode="link-telegram"] .login-mode-link { display: block; }

/* ---------- статические страницы: политика и условия ---------- */
.legal-page { padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); }
.legal-card { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; line-height: 1.6; }
.legal-card h1 { margin: 18px 0 12px; font: 300 clamp(1.5rem, 1.2rem + 1.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -0.02em; }
.legal-card h2 { margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid var(--ds-line); font: 600 var(--fs-lg)/1.3 var(--font-text); }
.legal-card p, .legal-card li { color: var(--ds-text); font-size: var(--fs-md); }
.legal-card ul { padding-left: 20px; }
.legal-card li { margin: 6px 0; }
.legal-card li::marker { color: var(--ds-text-3); }
.legal-card code { font: 600 0.92em var(--font-text); padding: 1px 6px; border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-s); }
.legal-lead { color: var(--ds-text-2) !important; font-size: var(--ds-fs-md) !important; }
.legal-card a { color: var(--link); }
.legal-nav { margin: 0; }
.legal-nav a, .legal-foot a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-text-2); text-decoration: none;
  font: 600 var(--ds-fs-micro)/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase;
}
.legal-nav a:hover, .legal-foot a:hover { color: var(--ds-text); }
.legal-foot { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--ds-line); }

/* меню аккаунта в шапке */
.acct { position: relative; flex: none; }
.acct-btn {
  display: flex; align-items: center; gap: 6px;
  max-width: 200px; min-height: 40px; padding: 3px 6px 3px 3px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.acct-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { flex: none; color: var(--hint); }
.acct-ava, .acc-ava {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--panel2); color: var(--hint); font-weight: 700; font-size: var(--fs-sm);
}
.acct-ava img, .acc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-ava-lg { width: 40px; height: 40px; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: min(300px, calc(100vw - 24px)); padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct-head > div { min-width: 0; }
.acct-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head small { color: var(--hint); font-size: var(--fs-xs); }
.acct-sec { padding: 10px 8px 4px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hint); }
.acct-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 8px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-sm); text-align: left; text-decoration: none;
}
a.acct-item:hover, button.acct-item:hover { background: var(--panel2); }
.acct-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-ok { color: var(--good); font-weight: 700; flex: none; width: 16px; text-align: center; }
.acct-plus { color: var(--accent); font-weight: 700; flex: none; width: 16px; text-align: center; }
.acct-link { color: var(--link); }
.acct-muted, .acct-limit { color: var(--hint); min-height: 0; line-height: 1.4; }
.acct-limit { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 10px; }
.acct-limit.is-over { color: var(--warn); }
.acct-foot { display: flex; gap: 12px; padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.acct-foot a { color: var(--hint); }
.acct-logout { color: var(--danger); }
@media (max-width: 420px) {
  .acct-name { display: none; }
  .acct-btn { padding-right: 4px; }
}

/* лимит разборов на экране матчей и «вы играли за …» */
.m-limit { margin: -4px 0 10px; color: var(--hint); font-size: var(--fs-sm); }
.m-limit.is-over { color: var(--warn); }
.mc-me {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--ct-soft); color: var(--ct-text); font-size: var(--fs-xs); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* «Доступ»: пользователи */
.acc-filter {
  width: 100%; min-height: 40px; margin: 0 0 10px; padding: 0 12px;
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.acc-user { align-items: flex-start; }
.acc-user.is-blocked { opacity: 0.75; }
.acc-user .acc-who { display: flex; gap: 10px; flex: 1; }
.acc-main { min-width: 0; }
.acc-name { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.acc-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--hint); text-decoration: none; max-width: 100%; overflow-wrap: anywhere;
}
.acc-chip b { color: var(--text); font-weight: 600; }
.acc-meta { font-size: var(--fs-xs); color: var(--hint); }
.acc-badge { padding: 0 7px; border-radius: 999px; background: var(--panel2); color: var(--hint); font-size: var(--fs-2xs); font-weight: 700; }
.acc-badge-bad { background: var(--ds-bad-soft); color: var(--danger); }
.acc-badge-warn { background: rgba(214, 163, 92, 0.16); color: var(--warn); }
.acc-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.acc-limit { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--hint); }
.acc-limit label { display: flex; align-items: center; gap: 6px; }
.acc-limit input {
  width: 112px; min-height: 36px; padding: 0 8px; font: inherit; font-size: var(--fs-sm);
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.acc-add-wrap { margin-top: 18px; }
.acc-add-wrap summary { cursor: pointer; color: var(--hint); font-size: var(--fs-sm); margin-bottom: 8px; }
@media (max-width: 600px) {
  .acc-user { flex-direction: column; align-items: stretch; }
  .acc-controls { align-items: stretch; }
  .acc-limit { justify-content: space-between; }
  .acc-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* ---------- оценки «Вывод верный?» и страница «Точность» ---------- */
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: var(--fs-xs); }
.an-item > .fb-row { margin: 0 4px 10px 62px; }
.fb-q { color: var(--hint); margin-right: 2px; }
.fb-btn {
  min-height: 36px;
  padding: 0 9px;
  font-size: var(--fs-xs);
  color: var(--hint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.fb-btn.active.fb-correct { color: var(--accent-text); background: var(--good); border-color: var(--good); }
.fb-btn.active.fb-wrong { color: var(--accent-text); background: var(--danger); border-color: var(--danger); }
.fb-btn.active.fb-unsure { color: var(--text); background: var(--panel2); border-color: var(--hint); }
.acc-pct.good { color: var(--good); }
.acc-pct.mid { color: var(--warn); }
.acc-pct.bad { color: var(--danger); }
@media (max-width: 420px) { .an-item > .fb-row { margin-left: 8px; } }
.pl-impact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pl-impact small { width: 100%; color: var(--hint); }
.pl-better { display: inline-block; margin-left: 2px; font-size: var(--fs-xs); color: var(--hint); white-space: nowrap; }
.pl-better.good { color: var(--good); }
.pl-better.bad { color: var(--danger); }

/* «Разобрать заново» над «Удалить» в карточке матча */
.mc-del.mc-again { top: calc(50% - 22px); }
.mc-again:active { color: var(--accent); }
.mc-again ~ .mc-del { top: calc(50% + 22px); }

/* «3D глазами» (view3d.js): слой поверх 2D-карты внутри .map-wrap */
.v3d {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--ds-map-bg);
  color: #ede7dd;
  overflow: hidden;
}
.v3d-stage { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.v3d-stage:active { cursor: grabbing; }
.v3d-canvas { display: block; width: 100%; height: 100%; }
/* ослепление POV: белый экран, непрозрачность — из view3d.js (flashOpacity) */
.v3d-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.v3d-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  background:
    linear-gradient(#7dff8a, #7dff8a) center / 2px 100% no-repeat,
    linear-gradient(#7dff8a, #7dff8a) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.v3d-cross[hidden] { display: none; }
.v3d-info {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: calc(100% - 76px);
  padding: 4px 9px;
  border-radius: 10px;
  border-left: 3px solid #988e80;
  background: rgba(14, 12, 10, 0.72);
  font-size: var(--fs-xs);
  line-height: 1.3;
  pointer-events: none;
}
.v3d-info.side-ct { border-left-color: var(--ct); }
.v3d-info.side-t { border-left-color: var(--t); }
.v3d-info.side-ct .v3d-name { color: var(--ct); }
.v3d-info.side-t .v3d-name { color: var(--t); }
.v3d-name, .v3d-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-sub { color: #cec6b9; font-size: var(--fs-2xs); }
.v3d-cap { color: #ffb3b0; font-size: var(--fs-2xs); font-weight: 600; overflow-wrap: anywhere; }
.v3d-cap[hidden] { display: none; }
.v3d-exit { position: absolute; top: 8px; right: 8px; min-width: 44px; color: #fff; font-weight: 700; }
.v3d-bar { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; }
.v3d-bar .chip-btn { min-width: 40px; color: #ede7dd; }
.v3d-dead {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(40, 10, 10, 0.78);
  border: 1px solid rgba(255, 90, 90, 0.5);
  color: #ffb3b0;
  font-size: var(--fs-sm);
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}
.v3d-dead[hidden], .v3d-msg[hidden] { display: none; }
.v3d-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: rgba(20, 17, 14, 0.85);
  font-size: var(--fs-sm);
}

/* =================== Онбординг (onboarding.js, matches.js) =================== */

/* Пустой список матчей и «Где взять демку» */
.m-state.ob-empty { padding: 28px 8px 16px; }
.ob-empty-title { font-size: 1.125rem !important; }
.ob-empty-btn { min-height: 48px; padding: 0 24px; font-size: 1rem; margin-top: 4px; }
.ob-where-card {
  width: 100%;
  max-width: 520px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
}
.ob-where-title { font-weight: 700; margin-bottom: 6px; }
.ob-where-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-where-list li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-base); line-height: 1.4; }
.ob-where-list span { color: var(--hint); }
.ob-where-list code {
  font: var(--fs-xs)/1.4 var(--font-mono);
  background: var(--panel2);
  color: var(--text);
  padding: 0 4px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.ob-where-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--hint); }
.ob-where {
  margin: -4px 0 12px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
}
.ob-where > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  color: var(--link);
  font-size: var(--fs-base);
  font-weight: 600;
  list-style: none;
}
.ob-where > summary::-webkit-details-marker { display: none; }
.ob-where > summary::after { content: "▾"; margin-left: auto; color: var(--hint); }
.ob-where[open] > summary::after { content: "▴"; }
.ob-where-body { padding: 0 14px 12px; }

/* Кнопка перезапуска в окне «?» */
.ob-restart { margin: 4px 0 2px; }

/* Coach marks */
.ob-root { position: fixed; inset: 0; z-index: 70; }
.ob-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  padding: var(--safe-top) 0 var(--safe-bottom);
}
.ob-hole {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  outline: 2px solid var(--accent);
  outline-offset: 0;
  pointer-events: none;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.ob-root.ob-nohole { background: rgba(0, 0, 0, 0.62); }
.ob-root.ob-nohole .ob-hole { display: none; }
.ob-card {
  position: fixed;
  width: min(340px, calc(100vw - 24px));
  padding: 12px 14px 12px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.ob-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ob-count { font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; }
.ob-skip {
  min-height: 40px;
  padding: 0 8px;
  margin-right: -6px;
  border: 0;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-sm);
  border-radius: 8px;
}
.ob-title { display: block; font-size: 1rem; }
.ob-text { margin: 4px 0 10px; font-size: var(--fs-base); line-height: 1.4; color: var(--text); }
.ob-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ob-actions .btn { min-width: 84px; }
@media (prefers-reduced-motion: reduce) { .ob-hole { transition: none; } }

/* =================== «i» у метрик (metricinfo.js) =================== */

.pl-tile.has-mi { position: relative; padding-right: 26px; }
.mi-btn {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--hint);
  font: italic 700 var(--fs-2xs)/1 Georgia, "Times New Roman", serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* область касания ≥ 28px при маленькой иконке */
.mi-btn::before { content: ""; position: absolute; inset: -6px; }
.mi-btn:hover, .mi-btn:focus-visible { color: var(--accent); border-color: var(--accent); }
.pl-tile > .mi-btn { position: absolute; top: 6px; right: 6px; }
.pl-imp-metric.has-mi { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.pl-imp-metric.has-mi small { flex-basis: 100%; }

.mi-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mi-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 75vh;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border-radius: 18px 18px 0 0;
  padding: 6px 18px calc(18px + var(--safe-bottom));
  transition: transform 0.15s ease;
}
.mi-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 2px; }
.mi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mi-head h3 { margin: 0; font-size: var(--fs-lg); }
.mi-value { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.mi-body p { margin: 6px 0; font-size: var(--fs-base); line-height: 1.45; }
.mi-dir { color: var(--hint); }
.mi-pct { color: var(--text); font-weight: 600; }
.mi-approx { color: var(--hint); font-size: var(--fs-sm) !important; }
@media (min-width: 901px) {
  .mi-overlay { align-items: center; }
  .mi-sheet { border-radius: 16px; padding-bottom: 18px; }
}

.mi-tip {
  position: fixed;
  z-index: 66;
  max-width: 300px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: var(--fs-sm);
  line-height: 1.4;
  pointer-events: none;
}
.mi-tip b { display: block; margin-bottom: 2px; font-size: var(--fs-sm); }
.mi-tip p { margin: 4px 0 0; }
.mi-tip .mi-dir { color: var(--hint); }
.m-state.empty .ob-where-list b { font-size: var(--fs-base); }

/* ---------- сводные оценки «Прицел»/«Гранаты» (rating.js) ---------- */
.pl-tiles2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 6px; }
/* <button> не растягивается на ячейку grid сам по себе (в отличие от div) — без явной ширины
   плитка сжимается по содержимому подписи, и «i»/число/подпись съезжают. */
.pl-gauge { width: 100%; text-align: left; border: 1px solid transparent; cursor: pointer; font: inherit; }
.pl-gauge b { font-size: 1.375rem; }
.pl-gauge.good { border-color: rgba(63, 185, 80, 0.4); }
.pl-gauge.good b { color: var(--good); }
.pl-gauge.mid { border-color: rgba(224, 180, 65, 0.4); }
.pl-gauge.mid b { color: var(--t); }
.pl-gauge.bad { border-color: rgba(242, 103, 78, 0.4); }
.pl-gauge.bad b { color: var(--danger); }
.pl-rating-detail { margin: 4px 0 10px; overflow-x: auto; }
.pl-rtable { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.pl-rtable th, .pl-rtable td { padding: 4px 6px; text-align: left; white-space: nowrap; }
.pl-rtable th { color: var(--hint); font-weight: 600; }
.pl-rtable tbody tr:nth-child(odd) { background: var(--panel2); }
.pl-rtable td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- графики по раундам (rounds-chart.js) ---------- */
/* переключатель метрик — сегментированный контрол (.seg .seg-sm), в одну строку без переноса */
.rc-switch { margin-bottom: 8px; }
.rc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-svg { display: block; height: auto; max-width: 100%; }
.rc-lbl { font-size: 7px; fill: var(--hint); }
.rc-axis { font-size: 7px; fill: var(--hint); font-variant-numeric: tabular-nums; }
.rc-val { font-size: 7px; fill: var(--text); font-variant-numeric: tabular-nums; }
.rc-bg.side-ct { fill: var(--ct-soft); }
.rc-bg.side-t { fill: var(--t-soft); }
.rc-bg:not(.side-ct):not(.side-t) { fill: transparent; }
.rc-side-sep { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 2; }
.rc-zero { stroke: var(--line); stroke-width: 1; }
.rc-hit { fill: transparent; }
.rc-col { cursor: pointer; }
.rc-bar { fill: var(--accent); }
.rc-bar.pos { fill: var(--good); }
.rc-bar.neg { fill: var(--danger); }
.rc-bar.zero { fill: var(--hint); opacity: 0.5; }
.rc-bar.team-a { fill: var(--ct); }
.rc-bar.team-b { fill: var(--t); }
.rc-col:hover .rc-bar, .rc-col:active .rc-bar { opacity: 0.8; }
.rc-line { fill: none; stroke-width: 1.5; }
.rc-line.team-a { stroke: var(--ct); }
.rc-line.team-b { stroke: var(--t); }

/* легенда «Ход матча»: цвета команд + масштаб шкалы снаряжения */
.rc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: var(--fs-xs); color: var(--hint); }
.rc-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.rc-legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.rc-legend-item.team-a i { background: var(--ct); }
.rc-legend-item.team-b i { background: var(--t); }
.rc-legend-scale { margin-left: auto; }

/* ---------- «Откуда импакт»: разбивка по ситуациям (players.js situationsHtml) ---------- */
.pl-sit-chart { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pl-sit-row { display: grid; grid-template-columns: 92px 1fr 44px 22px; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.pl-sit-label { color: var(--hint); overflow-wrap: anywhere; }
.pl-sit-bars { display: flex; align-items: center; height: 14px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.pl-sit-neg, .pl-sit-pos { flex: 1 1 50%; height: 100%; display: flex; }
.pl-sit-neg { justify-content: flex-end; }
.pl-sit-fill { height: 100%; }
.pl-sit-fill.pos { background: var(--good); }
.pl-sit-fill.neg { background: var(--danger); }
.pl-sit-net { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pl-sit-net.bad { color: var(--danger); }
.pl-sit-count { text-align: right; color: var(--hint); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Экран матча: «рейки и панели» (макет «Направление 2»).
   Десктоп (≥901px): сверху — «←», счёт, лента раундов, CS2; в центре — карта; слева — рейка
   «Игроки» (точки с HP) и панель карточек поверх карты; справа — рейка быстрых настроек и панель
   с вкладками («Настройки» поверх карты, «Разбор / Отчёт / Профили» — колонкой рядом);
   снизу — плеер и таймлайн. Телефон: рейки уходят вниз — полоса точек под картой, быстрые кнопки
   под плеером, «Настройки» и «Игроки» — нижние листы, вкладки — под закреплённым переключателем.
   ===================================================================== */

/* ---------- общие для всех ширин ---------- */
.pane { display: none; }
.pane.active { display: block; }
.side-head { display: none; }
.set-sheet-head { display: none; }

/* верхняя строка */
.rp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px 0; }
.scoreboard { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
.sb-name {
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hint);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.sb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hint); }
.sb-dot.side-ct { background: var(--ct); }
.sb-dot.side-t { background: var(--t); }
.sb-score { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: center; }
.sb-colon { color: var(--hint); font-weight: 700; }
.rp-top-actions { flex: none; display: flex; align-items: center; gap: 8px; }

/* лента раундов: по центру, при нехватке места — прокрутка (auto-поля центрируют без обрезки) */
.rounds { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rounds-arrow {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  place-items: center;
}
.rounds-track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 11px 4px 4px;
  scroll-snap-type: x proximity;
}
.rounds-track::-webkit-scrollbar { display: none; }
.rounds-track > :first-child { margin-left: auto; }
.rounds-track > :last-child { margin-right: auto; }
.rbtn {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--panel);
  font-weight: 700;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
}
.rbtn.win-ct { border-color: var(--ct); background: var(--ct-soft); }
.rbtn.win-t { border-color: var(--t); background: var(--t-soft); }
.rbtn.current { color: #110f0c; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.rbtn.current.win-ct, .rbtn.current:not(.win-t) { background: var(--ct); border-color: var(--ct); }
.rbtn.current.win-t { background: var(--t); border-color: var(--t); }
.rounds-sep { flex: none; width: 2px; height: 20px; border-radius: 1px; background: var(--hint); opacity: 0.5; }
/* «режим разбора»: ромб над раундом с ошибками (ai_episodes.json, с учётом выбранного игрока) */
.replay[data-review] .rbtn.has-err::before {
  content: "◆";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  color: var(--danger);
  font-size: 9px;
  line-height: 1;
}
.tab-count:not(:empty)::before { content: " · "; }

/* карта */
.map-area { position: relative; min-width: 0; min-height: 0; }
.map-wrap {
  position: relative;
  background: var(--map-bg);
  overflow: hidden;
  color: #ede7dd;
}

/* верхний слот: одно уведомление — первое видимое по порядку в разметке */
.map-note {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: min(560px, calc(100% - 16px));
  pointer-events: none;
}
.map-note.empty { display: none; }
.map-note > * { pointer-events: auto; }
.map-note > :not([hidden]) ~ * { display: none !important; }
.map-note > .an-banner,
.map-note > .approx-banner,
.map-note > .round-banner,
.map-note > .map-msg,
.map-note > .map-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 6px 4px 12px;
  border-radius: 10px;
  background: rgba(14, 12, 10, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  color: #ede7dd;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.an-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-banner.error { border-color: rgba(242, 103, 78, 0.6); }
.an-banner.error .an-banner-text { white-space: normal; }
.an-banner-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #cec6b9;
}
.approx-banner b { color: var(--ds-approx); font-weight: 700; white-space: nowrap; cursor: help; }
.approx-mark { color: var(--warn); font-weight: 700; }
.map-note > .round-banner { padding-right: 12px; white-space: nowrap; pointer-events: none; }
.round-banner span { color: #c2b9ab; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.round-banner.side-ct { border-color: var(--ct); }
.round-banner.side-ct b { color: var(--ct); }
.round-banner.side-t { border-color: var(--t); }
.round-banner.side-t b { color: var(--t); }
.map-msg.error span { color: #ff8a85; }
.map-note > .map-hint {
  min-height: 28px;
  padding-right: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #d6cec2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.map-hint.on { border-color: rgba(120, 220, 160, 0.55); color: #bff0cf; }
.map-hint.warn { border-color: rgba(255, 190, 90, 0.55); color: #ffd79a; }
/* килфид и кнопка уровня уходят ниже уведомления */
.map-note:not(.empty) ~ .killfeed,
.map-note:not(.empty) ~ .map-tools { top: 50px; }
.map-tools { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.chip-btn {
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 12, 10, 0.72);
  color: #b8ae9f;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.chip-btn.active { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(40, 46, 58, 0.9); }

/* подпись эпизода из «Разбора» */
.map-ep {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  max-width: 40%;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(14, 12, 10, 0.7);
  color: #b5ab9c;
  font: var(--fs-2xs)/1.4 var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* нижний слот: выбранный игрок / «Стоп-кадр смерти» */
.map-ctx { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.map-ctx > * { pointer-events: auto; }
.follow-chip,
.snap-chip {
  max-width: 100%;
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.follow-chip { display: flex; align-items: center; gap: 8px; padding: 3px 3px 3px 12px; min-height: 46px; }
.fc-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--hint); }
.fc-dot.side-ct { background: var(--ct); }
.fc-dot.side-t { background: var(--t); }
.fc-text { display: flex; flex-direction: column; min-width: 0; }
.fc-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-name { font-weight: 700; font-size: var(--fs-sm); }
.following .fc-name::before { content: "⌖ "; color: var(--accent); }
.fc-info { font-size: var(--fs-xs); color: var(--hint); }
.fc-3d {
  flex: none;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-weight: 700;
}
.fc-3d.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.fc-close {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hint);
}
.snap-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 44px 6px 12px;
  border-left: 3px solid #b27cf2;
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.snap-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.snap-title { color: var(--hint); font-size: var(--fs-xs); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-caption { font-weight: 500; overflow-wrap: anywhere; }
.snap-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.snap-btn {
  flex: none;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.snap-btn:active { filter: brightness(0.92); }
.snap-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-base);
}
.snap-close:active { background: var(--panel2); }

/* 3D: уведомления кроме загрузки прячем, нижний слот — над кнопками 3D */
.map-wrap.is-3d .killfeed { z-index: 6; top: auto; bottom: 50px; }
.map-wrap.is-3d .map-note > :not(.map-msg) { display: none !important; }
.map-wrap.is-3d .map-note { z-index: 7; }
.map-wrap.is-3d ~ .map-ctx .follow-chip { display: none; }

/* Клавиши выбранного игрока (keys.js) — как HUD CS2: сверху скорость, слева «Шаг» и «Присед»,
   W над A S D, внизу «Прыжок». Поверх карты — левый нижний угол (и в 3D); на телефоне в 2D —
   строкой под картой (.in-ctx). Нажатая клавиша — акцентом, остальные приглушены. */
.kh {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto repeat(3, 26px);
  grid-template-areas:
    "top top top top"
    "walk . w ."
    "duck a s d"
    "fire jump jump jump";
  gap: 3px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(14, 12, 10, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  color: #ede7dd;
  pointer-events: auto;
  user-select: none;
  cursor: default;
}
.kh[hidden] { display: none; }
.kh-pad, .kh-mods { display: contents; }
.kh-top { grid-area: top; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; padding: 0 2px 2px; }
.kh-sl { color: #a69c8e; font-size: var(--fs-2xs); }
.kh-sv { min-width: 3ch; font: 700 var(--fs-sm)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.kh-u { color: #a69c8e; font-size: var(--fs-2xs); }
.kh-approx { margin-left: auto; color: var(--ds-approx); font-weight: 800; cursor: help; }
.kh-approx[hidden] { display: none; }
.kh-bar { position: relative; flex-basis: 100%; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.kh-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #d6cec2; }
.kh.accurate .kh-fill { background: #6fdc8c; }
.kh-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #6fdc8c; }
.kh-k {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #8d8376;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}
.kh-m { padding: 0 6px; font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.kh-k.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.kh-fire.on { background: #d8453a; border-color: #d8453a; }
.kh-w { grid-area: w; }
.kh-a { grid-area: a; }
.kh-s { grid-area: s; }
.kh-d { grid-area: d; }
.kh-walk { grid-area: walk; }
.kh-duck { grid-area: duck; }
.kh-fire { grid-area: fire; }
.kh-jump { grid-area: jump; }
/* «≈ по скорости»: клавиши восстановлены приблизительно — пунктир, прыжок недоступен */
.kh.approx .kh-k.on { background: var(--accent-soft); border-style: dashed; color: var(--text); }
.kh.approx .kh-fire.on { background: rgba(216, 69, 58, 0.35); }
.kh.approx .kh-jump { opacity: 0.35; }
/* на карте подпись эпизода уходит выше виджета; в 3D виджет — над кнопками 3D */
.map-wrap.has-kh .map-ep { bottom: 138px; }
.map-wrap.is-3d .kh { bottom: 56px; left: 8px; }
@media (max-width: 900px) {
  /* телефон, 3D: карта маленькая — виджет компактнее */
  .kh:not(.in-ctx) { transform: scale(0.82); transform-origin: left bottom; }
}

/* телефон, 2D: строка под картой рядом с чипом игрока */
.kh.in-ctx {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--text);
}
.kh.in-ctx .kh-pad {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 24px);
  grid-template-areas: ". w ." "a s d";
  gap: 2px;
}
.kh.in-ctx .kh-mods { display: grid; flex: 1; min-width: 0; grid-template-columns: 1fr 1fr; gap: 2px; }
.kh.in-ctx .kh-m { grid-area: auto; }
.kh.in-ctx .kh-top { order: 3; flex: none; justify-content: flex-end; width: 84px; padding: 0; }
.kh.in-ctx .kh-sl { display: none; }
.kh.in-ctx .kh-approx { order: -1; margin: 0 2px 0 0; }
.kh.in-ctx .kh-k { height: 20px; border-color: var(--line); background: var(--panel2); color: var(--hint); }
.kh.in-ctx .kh-k.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.kh.in-ctx .kh-fire.on { background: #d8453a; border-color: #d8453a; color: #fff; }
.kh.in-ctx.approx .kh-k.on { background: transparent; border-style: dashed; border-color: var(--accent); color: var(--text); }
.kh.in-ctx .kh-sl, .kh.in-ctx .kh-u { color: var(--hint); }
.kh.in-ctx .kh-bar { background: var(--line); }
.kh.in-ctx .kh-fill { background: var(--hint); }
.kh.in-ctx.accurate .kh-fill, .kh.in-ctx .kh-mark { background: #2fa85a; }

/* рейка «Игроки»: точка с номером игрока и полоска HP */
.pl-rail { display: flex; align-items: center; gap: 2px; }
.pl-dots { display: flex; gap: 2px; }
.pl-dots.side-ct { order: 1; }
.pl-sep { order: 2; flex: none; background: var(--line); }
.pl-dots.side-t { order: 3; }
.pl-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition: opacity 0.2s;
}
.pd-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--t);
  color: #15120f;
  font: 700 var(--fs-2xs)/22px var(--font-text);
  font-style: normal;
  text-align: center;
}
.pl-dot.side-ct .pd-dot { background: var(--ct); }
.pd-hp { display: block; width: 26px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pd-fill { display: block; height: 100%; width: 0; background: var(--t); transition: width 0.15s; }
.pl-dot.side-ct .pd-fill { background: var(--ct); }
.pl-dot.low .pd-fill { background: var(--danger); }
.pl-dot.dead { opacity: 0.45; }
.pl-dot.dead .pd-dot { background: var(--panel2); color: var(--hint); box-shadow: inset 0 0 0 1.5px var(--hint); }
.pl-dot.absent { opacity: 0.2; }
.pl-dot.selected .pd-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.pl-dot:active { background: var(--panel2); }

/* панель «Игроки» (карточки) */
.pl-panel { background: var(--panel); color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.pl-panel .teams { display: flex; flex-direction: column; gap: 12px; padding: 8px 10px 4px; }
.team-col.side-ct { order: 0; }
.team-col.side-t { order: 1; }
.team-head { flex-wrap: wrap; gap: 2px 8px; }
.th-live { width: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--hint); font-variant-numeric: tabular-nums; }
.side-ct .th-live { color: var(--ct-text); }
.side-t .th-live { color: var(--t-text); }
.pl-panel-hint { margin: 4px 12px 14px; color: var(--hint); font-size: var(--fs-xs); }
.cards { display: flex; flex-direction: column; gap: 6px; }
.pcard { padding: 8px 9px 9px; }
.pc-name { font-size: var(--fs-base); }
.pc-row2 { padding-left: 0; }
.pc-kad { gap: 6px; font-size: var(--fs-xs); }
.pl-panel .pc-kad .pc-a { display: none; }

/* заголовок панели: вкладки / название и «свернуть» */
.side-head {
  align-items: center;
  gap: 2px;
  min-height: 46px;
  padding: 0 4px 0 6px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 3;
}
.side-title { flex: 1; padding-left: 6px; font-size: var(--fs-base); }
.side-tabs > button[data-tab] {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-tabs > button[data-tab].active { color: var(--text); border-bottom-color: var(--text); }
.side-close {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hint);
  display: grid;
  place-items: center;
}
.side-close:active { background: var(--panel2); }

/* «Настройки реплея» */
.pane-settings { color: var(--text); }
.pane-settings > * + * { margin-top: 12px; }
.set-sheet-head { align-items: center; justify-content: space-between; }
.set-sheet-head b { font-size: var(--fs-lg); }
.ly-presets { width: 100%; }
.ly-custom { margin-top: 5px; font-size: var(--fs-xs); color: var(--hint); }
.ly-reset {
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--link);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.ly-title { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.ly-hint { font-size: var(--fs-xs); line-height: 1.35; color: var(--hint); }
.ly-hint:empty { display: none; }
.pane-settings > .ly-hint { margin-top: 6px; }
.ly-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ly-chips.dim { opacity: 0.5; }
.ly-chip {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ly-chip.active { background: var(--panel2); color: var(--text); border-color: var(--accent); }
.ly-chip.ly-tog.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ly-groups { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.know-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  text-align: left;
}
.know-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.know-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.know-text small { color: var(--hint); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.know-switch { flex: none; position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--line); transition: background 0.15s; }
.know-switch i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.know-card.on .know-switch { background: var(--accent); }
.know-card.on .know-switch i { transform: translateX(18px); background: var(--accent-text); }
.set-line { display: flex; align-items: center; gap: 10px; }
.set-line-wrap { align-items: flex-start; }
.set-line-wrap .set-label { padding-top: 11px; }
.set-label { flex: none; width: 70px; color: var(--hint); font-size: var(--fs-xs); font-weight: 600; }
.speeds {
  display: flex;
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.speeds button {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--hint);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.speeds button.active { background: var(--panel2); color: var(--text); box-shadow: 0 0 0 1px var(--line); }

/* «Разбор → Главное»: карточка эпизода по одному */
.an-list > .ep-top { list-style: none; }
.ep-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ep-kind { flex: 1 1 auto; max-width: 280px; }
.ep-pager { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--hint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ep-pg {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}
.ep-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
}
.ep-head { display: flex; align-items: flex-start; gap: 9px; }
.ep-sev { flex: none; width: 11px; height: 11px; margin-top: 6px; border-radius: 50%; background: var(--hint); }
.ep-sev.sev-mid { background: var(--warn); }
.ep-sev.sev-high { background: var(--danger); }
.ep-sev.sev-good { background: var(--good); }
.ep-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ep-title b { font-size: var(--fs-lg); line-height: 1.25; overflow-wrap: anywhere; }
.ep-title small { color: var(--hint); font-size: var(--fs-sm); }
.ep-head .an-thumb { width: 64px; height: 64px; }
.ep-why { margin: 0; font-size: var(--fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.ep-facts { display: flex; flex-direction: column; }
.ep-fact { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.35; }
.ep-fact b { flex: none; width: 96px; }
.ep-fact span { flex: 1; min-width: 0; color: var(--hint); overflow-wrap: anywhere; }
.ep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ep-actions .btn { min-height: 40px; }
.ep-card .fb-row { margin: 0; }

/* плеер и таймлайн */
.rp-dock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.controls { display: flex; align-items: center; gap: 6px; }
.cbtn {
  flex: 1 1 0;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.cbtn svg { width: 22px; height: 22px; }
.cbtn:active { background: var(--panel2); }
.cbtn-play { flex: 1.4 1 0; background: var(--accent); color: var(--accent-text); border-color: transparent; }
.cbtn-play:active { background: var(--accent); filter: brightness(0.9); }
.cbtn-play .ic-pause { display: none; }
.cbtn-play.playing .ic-play { display: none; }
.cbtn-play.playing .ic-pause { display: inline; }
.cbtn-sm { flex: none; width: 44px; }
.ctl-now { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--hint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctl-round { color: var(--text); font-weight: 700; }
.sb-clock-box { padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); }
.sb-clock { color: var(--text); font-weight: 700; }
.mode-freeze .sb-clock { color: var(--hint); }
.mode-bomb { border-color: rgba(242, 103, 78, 0.6); background: var(--ds-bad-soft); }
.mode-bomb .sb-clock { color: var(--danger); }
.mode-bomb .sb-clock::before { content: "💣 "; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; color: var(--hint); font-size: var(--fs-xs); }
.tl-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lg { display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: #a69c8e; }
.lg-kill { background: linear-gradient(var(--ct) 50%, var(--t) 50%); }
.lg-bomb { background: var(--text); }
.lg-util { background: #8a8073; height: 7px; }
.lg-an { width: 8px; height: 8px; border-radius: 50%; background: #c05bff; }
.lg-bad { width: 8px; height: 11px; background: var(--danger); }
.lg-good { width: 8px; height: 11px; background: var(--good); }
.tl-scope { flex: none; }
.tl-scope > button { flex: none; }
.timeline { flex-basis: 100%; min-width: 0; }
.tl-track[hidden] { display: none; }
/* таймлайн матча: раунды отрезками, метки ошибок/сильных моментов */
.tlm-bar { background: transparent; overflow: visible; }
.tlm-seg { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--line); }
.tlm-seg.win-ct { box-shadow: inset 0 -2px 0 rgba(91, 155, 213, 0.6); }
.tlm-seg.win-t { box-shadow: inset 0 -2px 0 rgba(224, 180, 65, 0.6); }
.tlm-seg.current { background: var(--ds-surface-3); }
.tlm-mark {
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 7px;
  margin-left: -3.5px;
  border-radius: 2px;
  background: var(--danger);
}
.tlm-mark.good { background: var(--good); top: 14px; bottom: 14px; }
.tlm-mark.hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); }
.tip-bad { color: #ff8a85; }
.tip-good { color: #7ee2a0; }

/* быстрые кнопки (рейка справа / полоса на телефоне) */
.set-rail { display: flex; align-items: center; gap: 2px; scrollbar-width: none; }
.set-rail::-webkit-scrollbar { display: none; }
.rail-btn {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  min-height: 48px;
  padding: 4px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hint);
}
.rail-btn.theme-btn { min-width: 0; min-height: 48px; padding: 4px 0; border: 0; background: transparent; color: var(--hint); font-size: inherit; font-weight: 400; }
.rail-ic { display: grid; place-items: center; width: 24px; height: 22px; color: var(--text); }
.rail-ic svg { width: 20px; height: 20px; }
.rail-txt { font-weight: 800; font-size: var(--fs-sm); line-height: 1; white-space: nowrap; }
.rail-lb { font-size: var(--fs-2xs); line-height: 1.1; white-space: nowrap; }
.rail-btn:active { background: var(--panel2); }
.rail-btn.on { background: var(--text); color: var(--bg); }
.rail-btn.on .rail-ic { color: var(--bg); }
.rail-btn.off .rail-ic { opacity: 0.4; }
.rail-badge {
  position: absolute;
  top: 1px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.rail-badge:empty { display: none; }
.rail-mode { background: var(--accent); }
.rail-sep { flex: none; background: var(--line); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.4); }

/* ---------- телефон и узкие окна ---------- */
@media (max-width: 900px) {
  .rp-top { padding: 6px 10px 0; }
  .back-link span { display: none; }
  .scoreboard { flex: 1; }
  .sb-name { max-width: 26vw; font-size: var(--fs-xs); }
  .rounds { order: 3; flex-basis: 100%; }
  .rounds-track { padding-bottom: 6px; }
  .rbtn { width: 40px; height: 40px; font-size: var(--fs-sm); }

  .rp-tabs {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 10px 8px;
    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.5);
    background: var(--panel);
  }
  .rp-tabs > button { padding: 0 4px; }
  .rp-tabs .tab-count:not(:empty)::before { content: none; }
  .rp-tabs .tab-count:not(:empty) {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: var(--accent-text);
    font-size: var(--fs-2xs);
    line-height: 18px;
    vertical-align: 1px;
  }
  .rp-body { display: flex; flex-direction: column; }
  .map-area { order: 1; }
  /* карта квадратная, но так, чтобы плеер, таймлайн и быстрые кнопки помещались на экран */
  .map-wrap {
    width: min(calc(100% - 20px), max(300px, calc(100vh - 430px)));
    width: min(calc(100% - 20px), max(300px, calc(100dvh - 430px)));
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
  }
  .map-ctx { margin: 6px 10px 0; align-items: stretch; }
  .map-ctx:not(:has(> :not([hidden]))) { display: none; }
  .follow-chip { width: 100%; }
  .map-note > .an-banner .an-banner-steps { display: none; }
  .map-ep { max-width: calc(100% - 20px); }

  .pl-rail { order: 2; padding: 2px 10px 0; }
  .pl-rail-open { display: none; }
  .pl-dots { flex: 1; min-width: 0; }
  .pl-dot { flex: 1 1 0; min-width: 0; height: 44px; }
  .pl-sep { width: 1px; height: 28px; margin: 0 3px; }

  .rp-dock { order: 3; padding: 6px 10px 2px; }
  .controls { flex-basis: 100%; }
  .ctl-now { flex: 1; }
  .tl-legend { display: none; }
  .tl-track { height: 44px; }

  .set-rail { order: 4; overflow-x: auto; padding: 4px 6px calc(6px + var(--safe-bottom)); border-top: 1px solid var(--line); }
  .rail-desk { display: none; }
  .rail-sep { width: 1px; height: 30px; margin: 0 2px; }

  /* вкладка вместо реплея */
  .rp-side { display: none; }
  .replay[data-panel="open"]:not([data-tab="settings"]) .rp-body > :not(.rp-side) { display: none; }
  .replay[data-panel="open"]:not([data-tab="settings"]) .rp-side { display: block; order: 0; padding: 0 10px 24px; }

  /* нижние листы: «Настройки реплея» и «Игроки» */
  .replay[data-panel="open"][data-tab="settings"] .rp-side,
  .pl-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    max-height: 74vh;
    max-height: 74dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 auto;
    max-width: 560px;
    border-radius: 18px 18px 0 0;
    background: var(--panel);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  }
  .replay[data-panel="open"][data-tab="settings"] .rp-side { display: block; padding: 8px 14px calc(18px + var(--safe-bottom)); }
  .set-sheet-head { display: flex; }
  .pl-panel .side-head { display: flex; }
  .pl-panel { padding-bottom: var(--safe-bottom); }
  body.sheet-open { overflow: hidden; }
}

@media (max-width: 380px) {
  .rp-tabs > button { padding: 0 2px; font-size: var(--fs-sm); }
  .rp-tabs .tab-count:not(:empty) { margin-left: 2px; padding: 0 4px; }
  .sb-score { font-size: var(--fs-lg); }
  .snap-btn { padding: 0 8px; }
  .rail-btn { width: 54px; }
}

/* ---------- десктоп ---------- */
@media (min-width: 901px) {
  .screen-matches { padding-top: 28px; }
  body[data-screen="replay"] { overflow: hidden; }
  .screen-replay { height: calc(100vh - var(--safe-top) - var(--safe-bottom)); height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); }
  .replay { height: 100%; display: flex; flex-direction: column; }
  .cs2-open-desktop { display: inline-flex !important; justify-content: center; }
  .cs2-mobile-note { display: none; }

  .rp-top {
    flex: none;
    flex-wrap: nowrap;
    gap: 14px;
    min-height: 56px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .rounds { flex: 1; }
  .rounds-arrow { width: 32px; height: 32px; }
  .rbtn { width: 30px; height: 30px; font-size: var(--fs-2xs); }
  .rp-tabs { display: none; }

  .rp-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 62px;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "lrail map side rrail" "dock dock dock dock";
  }
  .pl-rail {
    grid-area: lrail;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-right: 1px solid var(--line);
    background: var(--panel);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .pl-rail-open {
    order: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    min-height: 76px;
    width: 40px;
    padding: 6px 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hint);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .pl-rail-open[aria-expanded="true"] { background: var(--text); color: var(--bg); }
  .pl-dots { flex-direction: column; }
  .pl-dot { width: 46px; height: 42px; }
  .pl-sep { width: 26px; height: 1px; margin: 4px 0; }

  .map-area { grid-area: map; display: flex; flex-direction: column; }
  .map-wrap { flex: 1; min-height: 0; }
  .map-ctx {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 8;
    max-width: min(640px, calc(100% - 24px));
  }
  .map-wrap.is-3d ~ .map-ctx { bottom: 58px; }
  .map-wrap.has-kh ~ .map-ctx { max-width: min(640px, calc(100% - 300px)); }

  .pl-panel {
    grid-area: map;
    justify-self: start;
    align-self: stretch;
    width: 290px;
    min-height: 0;
    z-index: 20;
    border-right: 1px solid var(--line);
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.3);
  }
  .pl-panel .side-head { display: flex; }
  .replay[data-left="open"] .map-tools,
  .replay[data-left="open"] .map-ep,
  .replay[data-left="open"] .kh { left: 300px; }
  /* панель «Игроки» открыта: видимая часть карты уже — виджет клавиш над чипом игрока */
  .replay[data-left="open"] .kh { bottom: 66px; }
  .replay[data-left="open"] .map-wrap.is-3d .kh { left: 300px; bottom: 114px; }
  .replay[data-left="open"] .map-wrap.has-kh .map-ep { bottom: 194px; }

  .rp-side {
    grid-area: side;
    display: none;
    width: clamp(340px, 31vw, 480px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid var(--line);
    background: var(--panel);
    scrollbar-width: thin;
  }
  .replay[data-panel="open"] .rp-side { display: block; }
  .rp-side .side-tabs { display: flex; }
  .rp-side .pane { padding: 12px 12px 18px; }
  .rp-side .analysis { margin: 0; background: transparent; border: 0; border-radius: 0; }
  /* «Настройки» — поверх карты справа (карта не сжимается) */
  .replay[data-panel="open"][data-tab="settings"] .rp-side {
    grid-area: map;
    justify-self: end;
    align-self: stretch;
    width: 350px;
    z-index: 20;
    box-shadow: -10px 0 28px rgba(0, 0, 0, 0.3);
  }
  .replay[data-panel="open"][data-tab="settings"] .killfeed { right: 358px; }
  .replay[data-panel="open"][data-tab="settings"] .side-tabs > button[data-tab] { padding: 0 6px; font-size: var(--fs-xs); }
  .ly-chip { min-height: 34px; padding: 0 11px; font-size: var(--fs-xs); }
  .speeds button { height: 32px; }

  .set-rail {
    grid-area: rrail;
    flex-direction: column;
    padding: 6px 0;
    gap: 1px;
    border-left: 1px solid var(--line);
    background: var(--panel);
    overflow-y: auto;
  }
  .rail-phone { display: none; }
  .rail-btn { min-height: 46px; }
  .rail-sep { width: 30px; height: 1px; margin: 4px 0; }

  .rp-dock {
    grid-area: dock;
    gap: 2px 14px;
    padding: 6px 14px 8px;
    border-top: 1px solid var(--line);
    background: var(--panel);
  }
  .controls { gap: 2px; }
  .cbtn { flex: none; width: 44px; height: 38px; border: 0; background: transparent; border-radius: 9px; }
  .cbtn-play { width: 56px; background: var(--accent); }
  .tl-scope > button { min-height: 34px; padding: 0 12px; }
  .tl-track { height: 34px; }
  .tl-mark { top: 7px; bottom: 7px; }
  .tl-mark.k-bomb { top: 4px; bottom: 4px; }
  .tl-mark.k-utility { top: 12px; bottom: 12px; }
  .tl-mark.k-pickup { top: 10px; bottom: 10px; }
  .tl-mark.k-equip { top: 13px; bottom: 13px; }
  .tl-mark.k-analysis { top: 1px; }
  .tlm-mark { top: 8px; bottom: 8px; }
  .tlm-mark.good { top: 10px; bottom: 10px; }

  .help-pop { align-items: center; }
  .help-box { border-radius: 16px; }
  .help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  .mc-link:hover { background: var(--panel2); }
  .cbtn:hover, .rail-btn:not(.on):hover, .pl-dot:hover, .side-close:hover { background-color: var(--panel2); }
  .rounds-arrow:hover, .rbtn:hover { filter: brightness(1.15); }
  .an-btn:hover { background: var(--panel2); }
  .an-thumb:hover, .md-ref:hover { filter: brightness(1.2); }
  .seg > button:not(.active):hover, .side-tabs > button[data-tab]:not(.active):hover { color: var(--text); }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .sb-name { display: none; }
}
@media (min-width: 901px) and (max-height: 860px) {
  .rail-lb { display: none; }
  .rail-btn { min-height: 38px; }
}

/* иконки общего набора (js/icons.js): размер задаёт место, куда их вставили */
.back-link .ic { width: 20px; height: 20px; vertical-align: middle; }
.rounds-arrow .ic { width: 18px; height: 18px; }
.cbtn .ic { width: 22px; height: 22px; }
.cbtn-play .ic { width: 24px; height: 24px; }
.ic-play, .ic-pause { display: inline-flex; }
.rail-ic .ic { width: 20px; height: 20px; }
.side-close .ic { width: 20px; height: 20px; }
.fc-close .ic, .snap-close .ic, .help-close .ic, .lb-close .ic { width: 18px; height: 18px; vertical-align: middle; }
.an-banner-close .ic { width: 16px; height: 16px; vertical-align: middle; }
.fb-btn .ic { width: 13px; height: 13px; vertical-align: -2px; }

/* ============ «Мой прогресс» (#/progress, progress.js) и упражнения (drills.js) ============ */
.m-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.m-progress > svg { flex: none; color: var(--accent); }
.m-progress span:not(.m-progress-go) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-progress small { color: var(--hint); font-size: var(--fs-xs); }
.m-progress-go { flex: none; color: var(--link); font-size: var(--fs-lg); }
.m-progress:active { filter: brightness(1.15); }

.pg-screen .access-card { min-width: 0; }
.pg-sub { margin: 0 0 6px; font-weight: 600; font-size: var(--fs-base); }
.pg-whos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--hint); margin-bottom: 8px; }
.pg-who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text);
  font-weight: 600;
}
.pg-who small { color: var(--hint); font-weight: 400; font-size: var(--fs-2xs); }
.pg-x {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}
.pg-hint { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--hint); }
.pg-steam { color: var(--link); }

.pg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pl-tile.pg-card { gap: 3px; }
.pl-tile.pg-card b { flex-wrap: wrap; row-gap: 2px; }
.pg-spark { display: block; width: 100%; height: auto; margin: 2px 0; overflow: visible; }
.pg-spark-empty { color: var(--hint); font-size: var(--fs-xs); padding: 12px 0; }
.pg-line { fill: none; stroke: var(--hint); stroke-width: 1.2; opacity: 0.55; }
.pg-ma { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-target { stroke: var(--good); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.pg-dot { fill: var(--text); stroke: var(--panel2); stroke-width: 1; }
.pg-dot.last { fill: var(--accent); }
.pg-dot.approx, .pg-dot.weak { fill: var(--panel2); stroke: var(--hint); stroke-width: 1.2; }
.pg-dot.weak { stroke-dasharray: 1.5 1.5; }

.pg-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel);
  color: var(--hint);
}
.pg-chip small { font-weight: 400; font-size: var(--fs-2xs); }
.pg-chip.better { color: var(--good); background: rgba(79, 201, 117, 0.12); }
.pg-chip.worse { color: var(--danger); background: var(--ds-bad-soft); }
.pg-chip.few { font-weight: 400; }

.pg-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-tag { padding: 9px 10px 10px; border-radius: 10px; background: var(--panel2); min-width: 0; }
.pg-tag-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pg-tag-head > b { flex: 1 1 60%; min-width: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }
.pg-rate { font-variant-numeric: tabular-nums; font-weight: 700; }
.pg-rate small { color: var(--hint); font-weight: 400; font-size: var(--fs-xs); }
.pg-tag-meta { color: var(--hint); font-size: var(--fs-xs); margin: 2px 0 4px; }
.pg-tag .pg-spark { max-height: 40px; }
a.pl-imp-ep { text-decoration: none; }

.pg-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-plan .dr-card { margin-top: 8px; background: var(--panel); }
.pg-goal { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--panel2); font-size: var(--fs-sm); line-height: 1.4; }
.pg-goal.reached { background: rgba(79, 201, 117, 0.12); }
.pg-now { color: var(--hint); font-size: var(--fs-xs); }
.pg-goal .good { color: var(--good); }
.pg-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.pg-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.pg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--good); }
.pg-check.is-on { border-color: var(--good); background: var(--ds-good-soft); }
.pg-count { color: var(--hint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; margin-left: auto; }
.pg-foot { color: var(--hint); font-size: var(--fs-xs); line-height: 1.4; margin: 4px 2px 0; }
.pg-empty { margin-top: 8px; }
.pg-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-match {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pg-match span { color: var(--hint); font-size: var(--fs-sm); }
.pg-match .pg-go { margin-left: auto; color: var(--link); }

/* упражнения: «Как тренировать» в профиле и карточки плана */
.dr-block { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.dr-block > summary {
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--link);
  font-weight: 600;
  font-size: var(--fs-sm);
  list-style: none;
}
.dr-block > summary::-webkit-details-marker { display: none; }
.dr-block > summary::before { content: "▸"; width: 1em; flex: none; }
.dr-block[open] > summary::before { content: "▾"; }
.dr-block > summary small { color: var(--hint); font-weight: 400; }
.dr-card { margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.dr-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.dr-title b { font-size: var(--fs-base); overflow-wrap: anywhere; }
.dr-title small { color: var(--hint); font-size: var(--fs-xs); }
.dr-how { margin: 4px 0 6px; font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.dr-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-sm); min-width: 0; }
.dr-res a { color: var(--link); overflow-wrap: anywhere; }
.dr-res span:not(.dr-kind) { overflow-wrap: anywhere; }
.dr-kind {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--hint);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.dr-kind-workshop { color: var(--link); }
.dr-goal { margin-top: 6px; color: var(--hint); font-size: var(--fs-xs); }

/* «Это я» в профиле игрока */
.pl-me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: -2px 0 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--panel);
  font-size: var(--fs-sm);
  color: var(--hint);
}
.pl-me small { flex-basis: 100%; font-size: var(--fs-xs); }
.pl-me.is-me { color: var(--good); }
.pl-me a { color: var(--link); }

@media (min-width: 700px) {
  .pg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-screen.simple-screen { max-width: 980px; }
}
@media (min-width: 1100px) {
  .pg-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =================== «Пример разбора» (app.js, viewer.js, matches.js, login.html) =================== */

/* Гость: «Войти» в шапке вместо меню аккаунта */
.site-login { flex: none; }

/* Баннер над экраном матча-примера */
.sample-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ct-soft);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.sample-bar-text { flex: 1; min-width: 0; color: var(--text); }
.sample-bar-text b { font-weight: 700; }
.sample-bar-btn { flex: none; text-decoration: none; white-space: nowrap; }
/* оценки «верно / неверно» — только в своих матчах */
body.sample-view .fb-row { display: none !important; }

/* Пустой список матчей: карточка «Пример разбора» над «Где взять демку» */
.ob-sample {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--accent);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}
.ob-sample:active { background: var(--panel2); }
.ob-sample-map { min-height: 64px; }
.ob-sample-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-sample-body b { font-size: var(--fs-base); color: var(--text); }
.ob-sample-body span { font-size: var(--fs-sm); color: var(--hint); line-height: 1.4; }
.ob-sample-body small { font-size: var(--fs-xs); color: var(--hint); }
.ob-sample-go { align-self: center; font-size: 1.5rem; color: var(--hint); }

/* Метка «Пример» у матча в списке */
.mc-sample {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  background: var(--ct-soft);
  color: var(--ct-text);
}

/* Страница входа: «Посмотреть пример разбора» без входа */
.login-sample { margin-top: 16px; }
.login-card .login-sample-hint { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--ds-text-3); }

/* ============ «Разведка соперника» (#/scout, scouting.js) ============ */
.pl-team-head .th-name { /* без :has(.pl-scout): многоточие только при переполнении, без кнопки ничего не меняется */ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-scout {
  flex: none;
  margin-right: auto;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.sc-screen .access-card { min-width: 0; }
.sc-screen h2 { margin-top: 18px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sc-chip, .sc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap;
}
.sc-chip span { color: var(--hint); }
.sc-chip-clear { color: var(--hint); font-weight: 400; }
.sc-pill small { color: var(--hint); font-weight: 400; font-size: var(--fs-xs); }
.sc-pill.sc-on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.sc-pill.sc-on small { color: inherit; opacity: 0.85; }
.sc-tabs { margin: 0 0 10px; }
.sc-matches, .sc-players, .sc-mlist, .sc-plist, .sc-cards, .sc-nades, .sc-used { list-style: none; margin: 0; padding: 0; }
.sc-matches > li { padding: 8px 10px 10px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.sc-mhead { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); margin-bottom: 6px; }
.sc-mhead span { color: var(--hint); }
.sc-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-team {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  min-height: 44px; padding: 7px 9px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--text); font: inherit;
}
.sc-team b { font-size: var(--fs-sm); }
.sc-team.sc-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.sc-team small { color: var(--hint); font-size: var(--fs-xs); line-height: 1.3; overflow-wrap: anywhere; }
.sc-player {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-bottom: 6px; padding: 6px 10px;
  text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit;
}
.sc-player > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sc-player small { color: var(--hint); font-size: var(--fs-xs); }
.sc-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); color: var(--hint); font-weight: 700; }
.sc-player.sc-on { border-color: var(--accent); }
.sc-player.sc-on .sc-tick { background: var(--accent); color: var(--accent-text); }
.sc-maps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc-mlist > li { margin-bottom: 4px; }
.sc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 10px; background: var(--panel); font-size: var(--fs-sm); }
.sc-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.sc-run { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.sc-run .btn { flex: 1; }
.sc-run .btn:disabled { opacity: 0.5; }
.sc-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.sc-summary > div { display: flex; flex-direction: column; min-width: 0; }
.sc-summary b { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sc-summary small { color: var(--hint); font-size: var(--fs-xs); }
.sc-few { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: rgba(214, 163, 92, 0.12); border: 1px solid rgba(214, 163, 92, 0.35); }
.sc-few p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text); }
.sc-side { margin: 6px 0 10px; }
.sc-side button small { font-weight: 400; color: var(--hint); }
.sc-side button.side-t.active { color: var(--t-text); }
.sc-side button.side-ct.active { color: var(--ct-text); }
.sc-mapwrap { display: flex; justify-content: center; }
.sc-canvas { display: block; max-width: 100%; border-radius: 12px; background: var(--map-bg); }
.sc-time { margin: 10px 0 6px; }
.sc-time label { display: block; font-size: var(--fs-sm); color: var(--hint); margin-bottom: 2px; }
.sc-time label b { color: var(--text); font-variant-numeric: tabular-nums; }
.sc-time input[type=range] { width: 100%; margin: 4px 0; accent-color: var(--accent); }
.sc-ticks { display: flex; justify-content: space-between; }
.sc-ticks button {
  min-width: 44px; min-height: 32px; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--hint); font: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.sc-ticks button.active { color: var(--text); font-weight: 700; background: var(--panel2); }
.sc-layers { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--hint); margin: 4px 0 8px; }
.sc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sc-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hint); }
.sc-dot.side-t { background: var(--t); }
.sc-dot.side-ct { background: var(--ct); }
.sc-dot.sc-good { background: var(--good); }
.sc-dot.sc-bad { background: var(--danger); }
.sc-dot.sc-after { background: var(--ds-bad); }
.sc-spots { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.sc-spots h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.sc-spots h3 small { color: var(--hint); font-weight: 400; font-size: var(--fs-xs); }
.sc-zones { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--hint); }
.sc-zones b { color: var(--text); font-weight: 600; }
.sc-plist > li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 4px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.sc-plist > li:first-child { border-top: 0; }
.sc-plist small { color: var(--hint); }
.sc-cards { display: flex; flex-direction: column; gap: 8px; }
.sc-card { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.sc-card b { font-size: var(--fs-base); }
.sc-card p { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.45; }
.sc-exs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-ex {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--panel2); color: var(--link); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-decoration: none;
}
.sc-table th { text-align: left; }
.sc-table small { color: var(--hint); }
.sc-nades > li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.sc-nades > li > .sc-dot { margin-top: 5px; }
.sc-nades > li > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); }
.sc-nades small { color: var(--hint); font-size: var(--fs-xs); }
.sc-nades .sc-exs { margin-top: 4px; }
.sc-used > li { padding: 6px 0; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.sc-used a { text-decoration: none; }
@media (min-width: 901px) {
  .simple-screen.sc-screen { max-width: 1120px; }
  .sc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .sc-right > h2:first-child { margin-top: 0; }
}

/* ---------- Совместный просмотр (watch.js) ---------- */

.rp-badge, .rail-badge[data-watch-count] {
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.rp-badge { position: absolute; top: 2px; right: 2px; }
.rp-badge:empty, .rail-badge[data-watch-count]:empty { display: none; }
#btn-watch { position: relative; }
#btn-watch.on, #rail-watch.on { color: var(--accent); }

.watch-banner {
  position: absolute; left: 10px; top: 10px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 20px);
  padding: 7px 10px; border-radius: 10px;
  background: rgba(24, 21, 18, 0.82); color: #fff;
  font-size: var(--fs-sm); pointer-events: auto;
}
.watch-banner[hidden] { display: none; }
.wb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hint); }
.wb-dot.ok { background: var(--ds-text); box-shadow: 0 0 8px var(--ds-glow); }
.wb-dot.warn { background: var(--ds-warn); }
.wb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-leave {
  flex: none; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff;
  border-radius: 8px; padding: 3px 9px; font-size: var(--fs-xs); font-weight: 600;
}

.watch-pop {
  position: fixed; inset: 0; z-index: 46;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.watch-pop[hidden] { display: none; }
.watch-pop-box {
  width: 100%; max-width: 420px;
  background: var(--panel); color: var(--text);
  border-radius: 18px 18px 0 0;
  padding: 14px 18px calc(18px + var(--safe-bottom));
  max-height: 80vh; overflow-y: auto;
}
@media (min-width: 901px) {
  .watch-pop { align-items: center; }
  .watch-pop-box { border-radius: 16px; max-height: 70vh; }
}
.watch-pop-head { display: flex; align-items: center; justify-content: space-between; }
.watch-pop-head h3 { margin: 0; font-size: var(--fs-lg); }
.wp-text { margin: 10px 0; font-size: var(--fs-sm); color: var(--hint); }
.wp-status { margin: 4px 0 10px; font-size: var(--fs-xs); color: var(--hint); }
.wp-link-row { display: flex; gap: 8px; margin: 6px 0; }
.wp-link-row input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: var(--fs-sm);
}
.wp-sub {
  margin: 14px 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wp-members { display: flex; flex-direction: column; gap: 2px; }
.wp-member { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-sm); }
.wp-member.off { opacity: 0.55; }
.wp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-text); }
.wp-member.off .wp-dot { background: var(--hint); }
.wp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-tag {
  flex: none; padding: 1px 6px; border-radius: 6px; background: var(--panel2);
  color: var(--hint); font-size: var(--fs-xs); font-weight: 700;
}
.wp-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Зритель в комнате (не ведущий): плеер, раунды и рисование блокируются в JS (viewer.js
   watchLocked, draw.js _canDraw) — здесь только визуальная подсказка, не единственная защита. */
.watch-locked #controls .cbtn,
.watch-locked #speeds button,
.watch-locked #rounds-prev,
.watch-locked #rounds-next,
.watch-locked #btn-prev-round,
.watch-locked #btn-next-round,
.watch-locked #btn-draw,
.watch-locked #rail-draw {
  opacity: 0.5;
}