/* Телевизор арены (tv.igrastation.ru) — оболочка эфира.
 *
 * Палитра и шрифты — из айдентики «Igra Station» (design-ref/): жёлтый,
 * чёрный, кремовый, серый, оранжевый акцент; Unbounded в заголовках, IBM Plex
 * Mono в кодах, счёте и часах.
 *
 * ⚠️ Оболочка — это шапка, карточки программы, панели агентов, лента и плашки.
 * САМ РЕНДЕР ИГР не перекрашивается: доска остаётся доской, её марки читаются
 * из словаря сеток одинаково на всех играх (блок «доски» ниже). Классы
 * оболочки с префиксом air-, доски — av-: на этой же станции уже живут .tv-*
 * (общий экран), .os-* (старая витрина) и .sheet (бумага), и столкнуться с
 * ними нельзя.
 *
 * ⚠️ Собственных hex-ов в оболочке нет: всё через токены ниже. Исключение —
 * телесный тон и контурная линия бойцов каратеки, и оно объяснено в
 * public/js/tv-karateka.js.
 */

.air {
  /* эфир */
  --air-yellow: #FFC81A;
  --air-orange: #FF5C1A;
  --air-ink: #1A1A1A;
  --air-ink-2: #2A2A2A;
  --air-cream: #F4F1EA;
  /* Серый айдентики (#8A8A8A) держим для ЛИНИЙ. Для мелкого текста он даёт
     контраст 4.97 на чёрном — впритык к AA и ниже него на карточках, которые
     чуть светлее фона. Поэтому у подписей свой, светлее. */
  --air-line: #3A3A3A;
  --air-grey: #8A8A8A;
  --air-muted: #A8A29A;

  /* стороны: первая жёлтая, вторая кремовая — одинаково на досках, в лентах,
     на кимоно каратеки и на танках артиллерии */
  --air-p1: #FFC81A;
  --air-p1-dim: #C08F00;
  --air-p2: #F4F1EA;
  --air-p2-dim: #B7B0A1;
  --air-p3: #FF5C1A;
  --air-p4: #8A8A8A;
  --air-p3-dim: #C0400F;
  --air-p4-dim: #5F5F5F;

  /* доска: светлая плитка на тёмном экране — так читается и чёрная фигура,
     и белая, и цветная марка */
  --air-tile: #E6E1D4;
  --air-tile-dark: #C2BAA7;
  --air-tile-ink: #1A1A1A;
  --air-good: #3E7A4E;
  --air-cold: #6E8AA6;
  --air-earth: #5A5348;

  --air-head: 'Unbounded', 'Futura', 'Trebuchet MS', system-ui, sans-serif;
  --air-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --air-text: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--air-ink);
  color: var(--air-cream);
  font-family: var(--air-text);
  font-size: 16px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ шапка -- */

.air-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: var(--air-ink-2);
  border-bottom: 2px solid var(--air-yellow);
}

.air-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--air-cream);
}
.air-logo-mark {
  font-size: 26px;
  line-height: 1;
  color: var(--air-yellow);
}
.air-logo-text {
  font-family: var(--air-head);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.air-logo-text b { font-weight: 900; color: var(--air-yellow); }

.air-channel {
  font-family: var(--air-mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--air-muted);
}

.air-livecount {
  margin-left: auto;
  font-family: var(--air-mono);
  font-size: 15px;
  color: var(--air-muted);
}
.air-livecount.is-live { color: var(--air-yellow); font-weight: 600; }
.air-livecount.is-live::before {
  content: '●';
  margin-right: 8px;
  color: var(--air-orange);
}

.air-hall-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--air-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--air-cream);
  cursor: pointer;
  user-select: none;
}
.air-hall-switch:hover { border-color: var(--air-yellow); }
.air-hall-switch input { accent-color: var(--air-yellow); cursor: pointer; }

/* --------------------------------------------------------------- программа -- */

.air-main { padding: 24px 28px 8px; overflow-y: auto; min-height: 0; }

.air-section { margin-bottom: 34px; }

.air-section-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--air-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--air-cream);
}
.air-section-note {
  font-family: var(--air-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--air-muted);
  text-transform: lowercase;
}

.air-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
/* «Идут по переписке» — список, а не витрина: трансляции у них нет, и
   занимать половину экрана большими карточками им незачем. */
.air-grid.is-list { grid-template-columns: 1fr; gap: 8px; }
.air-grid.is-list .air-card-mini { display: none; }
.air-grid.is-list .air-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
}
.air-grid.is-list .air-card-top { margin: 0; }

.air-card {
  display: block;
  padding: 14px 16px 12px;
  background: var(--air-ink-2);
  border: 1px solid var(--air-line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease;
}
.air-card:hover { border-color: var(--air-yellow); }
.air-card.is-air { border-color: color-mix(in srgb, var(--air-yellow) 45%, var(--air-line)); }

.air-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.air-card-emoji { font-size: 22px; line-height: 1; }
.air-card-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--air-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--air-cream);
}

.air-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--air-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.air-badge.is-live { background: var(--air-yellow); color: var(--air-ink); }
.air-badge.is-rec { background: var(--air-orange); color: var(--air-cream); }
.air-badge.is-ended { background: var(--air-cream); color: var(--air-ink); }
.air-badge.is-idle {
  background: transparent;
  border: 1px solid var(--air-grey);
  color: var(--air-muted);
}

.air-card-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin-bottom: 12px;
  padding: 8px;
  background: var(--air-ink);
  border-radius: 10px;
  overflow: hidden;
}
.air-card-nomini { font-size: 40px; opacity: .35; }

.air-card-vs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}
.air-vs-name { font-weight: 700; }
.air-vs-sep { color: var(--air-muted); font-size: 13px; }

.air-card-meta {
  margin-top: 6px;
  font-family: var(--air-mono);
  font-size: 13px;
  color: var(--air-muted);
}

.air-empty {
  max-width: 44ch;
  margin: 12vh auto;
  font-family: var(--air-head);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--air-muted);
}

/* -------------------------------------------------------------- один матч -- */

.air-stage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.air-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.air-bar-emoji { font-size: 26px; line-height: 1; }
.air-bar-title {
  margin: 0;
  font-family: var(--air-head);
  font-size: 26px;
  font-weight: 900;
  color: var(--air-cream);
}
.air-bar-code {
  margin-left: auto;
  font-family: var(--air-mono);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--air-muted);
}
.air-bar-extra { font-family: var(--air-mono); font-size: 14px; color: var(--air-muted); }

.air-play {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(150px, 210px);
  gap: 20px;
  align-items: start;
  min-height: 0;
}

/* Столбец плашек у края экрана: игроков бывает и трое (экономика на дворы). */
.air-sidecol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.air-agent {
  padding: 14px 16px;
  background: var(--air-ink-2);
  border-radius: 12px;
}

/* Сторону называет ЦВЕТ ИМЕНИ, а не полоса вдоль карточки: тот же приём, что
   на досках и на кимоно каратеки, — и ровно тот, который не превращает
   карточку в шаблонную плашку с цветным боком. */
.air-agent-name {
  font-family: var(--air-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--air-cream);
}
.air-agent.av-side-1 .air-agent-name { color: var(--air-p1); }
.air-agent.av-side-2 .air-agent-name { color: var(--air-p2); }
.air-agent.av-side-3 .air-agent-name { color: var(--air-p3); }
.air-agent.av-side-4 .air-agent-name { color: var(--air-p4); }
.air-agent-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--air-mono);
  font-size: 13px;
  color: var(--air-muted);
}
.air-agent-owner { margin-top: 4px; font-size: 13px; color: var(--air-muted); }
.air-agent-state {
  margin-top: 12px;
  font-family: var(--air-mono);
  font-size: 14px;
  color: var(--air-muted);
}
.air-agent-state.is-now { color: var(--air-yellow); font-weight: 600; }
.air-agent-state.is-now::before { content: '● '; color: var(--air-orange); }

.air-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  background: var(--air-ink-2);
  border-radius: 14px;
}

/* Зал игры в рамке: у игр со своим экраном (изометрия марша, объём колец и
   отдачи) телевизор показывает их страницу целиком. Своих полей здесь нет —
   рамка и есть картинка, а её собственные рамки прячет ?embed=1.

   Высоту задаём соотношением сторон, а не процентом: внутри рамки чужой
   документ, и от него нельзя узнать, сколько он хочет. 16:9 — то, под что
   нарисованы все залы (HUD 1920×1080). */
.air-screen.is-hall {
  padding: 0;
  overflow: hidden;
}

.air-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: var(--air-ink-2);
}

.air-verdict {
  font-family: var(--air-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--air-yellow);
  text-align: center;
}

/* ------------------------------------------------------------ лента снизу -- */

.air-bottom {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 10px 28px 14px;
  background: var(--air-ink-2);
  border-top: 1px solid var(--air-line);
}
.air-bottom-label {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--air-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--air-yellow);
}
.air-ticker {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 88px;
  overflow-y: auto;
  font-size: 14px;
}
.air-tick { display: flex; gap: 10px; padding: 1px 0; }
.air-tick-time { font-family: var(--air-mono); font-size: 12px; color: var(--air-grey); }
.air-tick-text { color: var(--air-muted); }
.air-tick:last-child .air-tick-text { color: var(--air-cream); }

/* ------------------------------------------------------------------ доски -- */

.av-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.av-boards.is-mini { gap: 6px; height: 100%; align-items: stretch; }

.av-board {
  --av-lab: 16px;
  padding: 8px 10px 10px;
  background: var(--air-ink);
  border: 1px solid var(--air-line);
  border-radius: 10px;
}
.av-board.is-hot { border-color: var(--air-yellow); }
.av-board.is-wide { flex: 1 1 100%; }
.av-board.av-side-1 { border-top: 3px solid var(--air-p1); }
.av-board.av-side-2 { border-top: 3px solid var(--air-p2); }
.av-board.av-side-3 { border-top: 3px solid var(--air-p3); }
.av-board.av-side-4 { border-top: 3px solid var(--air-p4); }

.is-mini .av-board {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px;
  border-width: 1px;
  border-radius: 6px;
  box-sizing: border-box;
}
.is-mini .av-board-head { display: none; }
.is-mini .av-board.is-wide { flex: 1 1 0; }

.av-board-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.av-board-who { font-weight: 700; color: var(--air-cream); }
.av-board-note {
  display: flex;
  gap: 8px;
  font-family: var(--air-mono);
  font-size: 12px;
  color: var(--air-muted);
  text-align: right;
}
.av-note-hot { color: var(--air-yellow); font-weight: 600; white-space: nowrap; }

.av-grid {
  display: grid;
  gap: 2px;
  /* Размер клетки считается сразу от ДВУХ ограничений — ширины экрана и его
     высоты, — иначе доска в пятнадцать рядов, растянутая по ширине, уезжает
     под бегущую строку, а доска в две колонки (каратека, «уговор») наоборот
     превращает всю ширину карточки в высоту. Последнее слагаемое — потолок:
     доска 3×3 не должна занимать полэкрана. */
  --av-u: min(
    calc(62vw / var(--av-cols, 10)),
    calc(46vh / var(--av-rows, 10)),
    3.6rem);
  width: calc(var(--av-cols, 10) * var(--av-u));
  max-width: 100%;
}
/* Миниатюра просто заполняет отведённый прямоугольник: клетки в ней не
   квадратные и не подписаны — на шести пикселях это всё равно не читается,
   а «что за игра и как густо на доске» видно и так. */
.is-mini .av-grid {
  gap: 1px;
  width: 100%;
  height: 100%;
  max-width: none;
}
.is-mini .av-cell { aspect-ratio: auto; }

.av-lab {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--air-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--air-grey);
}

.av-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 3px;
  background: var(--air-tile);
  color: var(--air-tile-ink);
  font-weight: 700;
  font-size: clamp(9px, calc(22px - var(--av-len, 1) * 3px), 20px);
  line-height: 1;
}
.is-mini .av-cell { border-radius: 1px; font-size: 0; }

.av-cell.is-dark { background: var(--air-tile-dark); }
.av-cell.is-last { box-shadow: inset 0 0 0 2px var(--air-orange); }

/* Стороны — теми же двумя цветами, что везде на телевизоре. */
.av-cell.av-p1, .av-cell.av-b1, .av-cell.av-e1, .av-cell.av-p1-crit {
  background: var(--air-p1); color: var(--air-ink);
}
.av-cell.av-p2, .av-cell.av-b2, .av-cell.av-e2, .av-cell.av-p2-crit {
  background: var(--air-p2-dim); color: var(--air-ink);
}
.av-cell.av-p3, .av-cell.av-b3, .av-cell.av-e3 { background: var(--air-p3); color: var(--air-ink); }
.av-cell.av-p4, .av-cell.av-b4, .av-cell.av-e4 { background: var(--air-p4); color: var(--air-ink); }
/* Клетка на грани взрыва («цепная реакция») — обводкой, а не цветом: цвет уже
   занят под «чья она». */
.av-cell.av-p1-crit, .av-cell.av-p2-crit { box-shadow: inset 0 0 0 2px var(--air-orange); }

/* Фигуры шахмат, шашек и реверси: марка говорит цвет ФИГУРЫ, а не клетки.
 *
 * Обе стороны рисуются ОДНОЙ тёмной краской — как в печатной шахматной
 * диаграмме: белые это полый знак (♔ ♖ ○), чёрные — залитый (♚ ♜ ●). Красить
 * белую фигуру в белое на светлой доске бессмысленно: полый знак светлой
 * краской на светлой клетке исчезает совсем (так и было в первом кадре). */
.av-cell.av-w, .av-cell.av-b { color: var(--air-tile-ink); }
/* В миниатюре значков нет — там фигуру приходится показывать самой клеткой,
   иначе доска на карточке программы выглядит пустой в любой позиции. */
.is-mini .av-cell.av-w {
  background: var(--air-cream);
  box-shadow: inset 0 0 0 1px var(--air-ink);
}
.is-mini .av-cell.av-b { background: var(--air-ink); }
.is-mini .av-cell.is-dark { background: var(--air-tile-dark); }

/* Исход клетки: неудача — оранжевым, удача — зелёным, нейтральное — глуше. */
.av-cell.av-hit, .av-cell.av-kill, .av-cell.av-boom, .av-cell.av-boom-now,
.av-cell.av-hurt, .av-cell.av-no, .av-cell.av-burn, .av-cell.av-broke {
  background: color-mix(in srgb, var(--air-orange) 40%, var(--air-tile));
}
.av-cell.av-yes, .av-cell.av-kept, .av-cell.av-got {
  background: color-mix(in srgb, var(--air-good) 40%, var(--air-tile));
}
.av-cell.av-bull { background: color-mix(in srgb, var(--air-p1) 55%, var(--air-tile)); }
.av-cell.av-cow { background: color-mix(in srgb, var(--air-cold) 45%, var(--air-tile)); }
.av-cell.av-tie { background: var(--air-tile-dark); }
.av-cell.av-tile { background: var(--air-tile); }

/* Поле и вода. */
.av-cell.av-ground, .av-cell.av-wall { background: var(--air-earth); }

/* «Эйайфория»: карта владения. Земля — та же земляная краска, что под стенами
   у остальных; жильё берёт цвет двора (марка p1…p4), поэтому в миниатюре, где
   знаки не рисуются вовсе, карта всё равно читается как «чьё и сколько».
   Павший двор гаснет: серо и вполсилы. */
.av-cell.av-land { background: var(--air-earth); }
.av-cell.av-gone { background: var(--air-tile-dark); opacity: .4; }
/* Год, до которого партия ещё не дожила: клетка есть, но её почти не видно. */
.av-cell.av-ahead { background: var(--air-ink-2); }
.av-cell.av-water, .av-cell.av-sunk {
  background: color-mix(in srgb, var(--air-cold) 55%, var(--air-ink));
  color: var(--air-cream);
}
.av-cell.av-sunk { font-size: .75em; opacity: .8; }
.av-cell.av-dot { background: var(--air-tile-dark); }
.av-cell.av-miss::after, .av-cell.av-auto::after { content: '·'; color: var(--air-grey); }
.av-cell.av-auto::after { opacity: .5; }

/* Танки: след, вспышка и силуэт машины — формой, а не оттенком (см. шапку
   Tanks.spectatorView). */
.av-cell.av-dust1 { background: color-mix(in srgb, var(--air-p1) 22%, var(--air-tile)); }
.av-cell.av-dust2 { background: color-mix(in srgb, var(--air-p2) 22%, var(--air-tile)); }
.av-cell.av-shot1, .av-cell.av-miss1, .av-cell.av-miss1-now {
  background: color-mix(in srgb, var(--air-p1) 45%, var(--air-tile));
}
.av-cell.av-shot2, .av-cell.av-miss2, .av-cell.av-miss2-now {
  background: color-mix(in srgb, var(--air-p2) 45%, var(--air-tile));
}
.av-cell.av-miss1-now, .av-cell.av-miss2-now { box-shadow: inset 0 0 0 2px var(--air-orange); }
.av-cell.av-tank1, .av-cell.av-tank1-boom { background: var(--air-p1); }
.av-cell.av-tank2, .av-cell.av-tank2-boom { background: var(--air-p2); }
.av-cell.av-tank1-boom, .av-cell.av-tank2-boom { box-shadow: inset 0 0 0 3px var(--air-orange); }

.av-status, .av-legend {
  margin: 0;
  max-width: 76ch;
  font-size: 14px;
  color: var(--air-muted);
  text-align: center;
}
.av-legend-who { color: var(--air-cream); }
.av-legend-who.av-side-1 { color: var(--air-p1); }
.av-legend-who.av-side-2 { color: var(--air-p2); }
.av-legend-sep { color: var(--air-grey); }

.av-empty { font-size: 15px; color: var(--air-muted); }

/* --------------------------------------------------------------- каратека -- */

.ka-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ka-duel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}
.ka-fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ka-fighter.is-mirror .ka-body { transform: scaleX(-1); }
.ka-fighter.is-hit .ka-body { opacity: .85; }
.ka-svg { width: clamp(96px, 16vmin, 220px); height: auto; display: block; }
.is-mini .ka-svg { width: 54px; }

.ka-act {
  min-height: 1.4em;
  font-family: var(--air-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--air-muted);
}
.ka-act.is-ready { color: var(--air-yellow); }

.ka-hp { display: flex; gap: 4px; }
.ka-pip {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--air-line);
}
.ka-pip.is-on.av-side-1 { background: var(--air-p1); }
.ka-pip.is-on.av-side-2 { background: var(--air-p2); }

.ka-name { font-family: var(--air-head); font-size: 15px; font-weight: 700; }
.ka-name.av-side-1 { color: var(--air-p1); }
.ka-name.av-side-2 { color: var(--air-p2); }
.ka-vs {
  align-self: center;
  font-family: var(--air-head);
  font-size: 18px;
  color: var(--air-grey);
}
.ka-caption { font-size: 15px; color: var(--air-muted); }
.is-mini .ka-caption, .is-mini .ka-act, .is-mini .ka-name { display: none; }

/* -------------------------------------------------------------- артиллерия -- */

.ar-field { width: 100%; max-width: 900px; }
.ar-svg { width: 100%; height: auto; display: block; }
.ar-ground { fill: var(--air-earth); }
.ar-boom { fill: var(--air-orange); }
.ar-spark { stroke: var(--air-orange); stroke-width: .18; stroke-linecap: round; }
.ar-tank .ar-hull, .ar-tank .ar-turret { fill: var(--air-grey); }
.ar-tank .ar-barrel { stroke: var(--air-grey); stroke-width: .3; stroke-linecap: round; }
.ar-tank.av-side-1 .ar-hull, .ar-tank.av-side-1 .ar-turret { fill: var(--air-p1); }
.ar-tank.av-side-1 .ar-barrel { stroke: var(--air-p1); }
.ar-tank.av-side-2 .ar-hull, .ar-tank.av-side-2 .ar-turret { fill: var(--air-p2); }
.ar-tank.av-side-2 .ar-barrel { stroke: var(--air-p2); }
.ar-tank.is-dead { opacity: .4; }
.ar-tank.is-dead .ar-hull, .ar-tank.is-dead .ar-turret { fill: var(--air-grey); }

/* ------------------------------------------------------------------- зал --- */

/* Зал смотрят с последнего ряда: кегли крупнее, служебной мелочи нет,
   партия занимает весь экран. Переключатель остаётся — им выходят обратно. */
.air[data-mode='hall'] .air-main { padding: 20px 32px 4px; }
.air[data-mode='hall'] .air-bar-title { font-size: clamp(26px, 3.4vmin, 52px); }
.air[data-mode='hall'] .air-agent-name { font-size: clamp(18px, 2.2vmin, 34px); }
.air[data-mode='hall'] .air-agent-state { font-size: clamp(14px, 1.7vmin, 26px); }
.air[data-mode='hall'] .air-play {
  grid-template-columns: minmax(180px, 16vw) minmax(0, 1fr) minmax(180px, 16vw);
}
.air[data-mode='hall'] .av-grid {
  --av-u: min(
    calc(66vw / var(--av-cols, 10)),
    calc(58vh / var(--av-rows, 10)),
    5.2rem);
}
/* В зале рамку меряем высотой экрана, а не шириной колонки: проектор шире,
   чем выше, и зал, растянутый по ширине, уехал бы за нижний край. */
.air[data-mode='hall'] .air-frame {
  height: 74vh;
  width: auto;
  max-width: 100%;
}
.air[data-mode='hall'] .ka-svg { width: clamp(140px, 24vmin, 340px); }
.air[data-mode='hall'] .ka-caption { font-size: clamp(16px, 2vmin, 30px); }
.air[data-mode='hall'] .av-status,
.air[data-mode='hall'] .av-legend { font-size: clamp(14px, 1.6vmin, 24px); max-width: 92ch; }
.air[data-mode='hall'] .air-ticker { font-size: clamp(14px, 1.5vmin, 22px); max-height: 104px; }
.air[data-mode='hall'] .air-channel { display: none; }

/* -------------------------------------------------------------- телефон ---- */

@media (max-width: 760px) {
  .air-top { flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; }
  .air-channel { display: none; }
  .air-livecount { margin-left: 0; font-size: 14px; }
  .air-main { padding: 16px; }
  .air-play { grid-template-columns: 1fr; gap: 12px; }
  .air-agent { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .air-agent-state { margin-top: 0; }
  .air-bottom { padding: 8px 16px 12px; }
  .air-ticker { max-height: 60px; font-size: 13px; }
  /* Длинная подпись доски («Правило»: «половина 2 из 2 · зелёное — правило
     верно…») рядом с названием сжималась в столбик по слову; на узком экране
     она уходит под название строкой во всю ширину (23.09.2026). */
  .av-board-head { flex-wrap: wrap; row-gap: 4px; }
  /* Строка «по переписке» в три колонки на телефоне не входит: название игры
     забирало ширину, имена обрезались, часы хода уезжали за край. */
  .air-grid.is-list .air-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .air-section-title { flex-wrap: wrap; row-gap: 4px; }
  .av-board-note { flex-wrap: wrap; justify-content: flex-end; column-gap: 8px; }
}

/* ------------------------------------------ «Эйайфория»: карта мира и хроника --
 *
 * Экран делится надвое: слева круг мира с замками, справа — числа дворов и
 * последние годы хроники, свежий год сверху. Всё держится в одном кадре:
 * телевизор никто не листает (public/js/tv-euphoria.js). */

.eu-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
  gap: 22px;
  align-items: start;
  width: 100%;
}
.eu-wrap.is-mini { display: block; height: 100%; }
/* Первый год: хроники ещё нет, и карта занимает кадр целиком.
   ⚠️ Без явной ширины столбца SVG сжимается до собственной внутренней —
   карта мира на полэкрана становилась маркой в 300 пикселей. */
.eu-wrap.is-solo { grid-template-columns: minmax(0, 1fr); }
.eu-wrap.is-solo .eu-stage { width: 100%; }
.eu-wrap.is-solo .eu-world { max-height: 62vh; }

.eu-stage { min-width: 0; }
.eu-world { display: block; width: 100%; max-height: 58vh; }
.eu-world.is-mini { max-height: 100%; height: 100%; }
.eu-sea { fill: var(--air-ink-2); stroke: var(--air-line); stroke-width: 2; }
.eu-name {
  font-family: var(--air-head);
  font-size: 17px;
  font-weight: 700;
  fill: var(--air-cream);
}
.eu-name.eu-side-1 { fill: var(--air-p1); }
.eu-name.eu-side-2 { fill: var(--air-p2); }
.eu-name.eu-side-3 { fill: var(--air-p3); }
.eu-name.eu-side-4 { fill: var(--air-p4); }
.eu-num { font-family: var(--air-mono); font-size: 13px; fill: var(--air-muted); }
/* Беда года — значком над замком, на глухой подложке: иначе тонкий контур
   теряется на бороздах пашни. */
.eu-woe-bg { fill: var(--air-ink); opacity: .82; }

.eu-status {
  margin: 6px 0 0;
  font-family: var(--air-mono);
  font-size: 14px;
  color: var(--air-muted);
  text-align: center;
}

/* Правый столбец не растёт бесконечно: телевизор никто не листает, и хроника
   длинной партии иначе уводит кадр под бегущую строку. Что не поместилось —
   обрезается снизу, то есть уходит самое давнее; свежий год всегда наверху. */
.eu-side-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-height: calc(100vh - 230px);
  overflow: hidden;
}
.eu-chron { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); }

/* ---------------------------------------------------- итог партии («Эйайфория»)
   Показывается только на финальном кадре: там раскрыты и амбар, и казна. */
.eu-final { display: flex; flex-direction: column; gap: 6px; }
.eu-final-row { padding: 6px 12px 8px; background: var(--air-ink-2); border-radius: 10px; }
.eu-final-row.is-win { background: color-mix(in srgb, var(--air-p1) 14%, var(--air-ink-2)); }
.eu-final-head { display: flex; align-items: baseline; gap: 8px; }
.eu-final-name { font-family: var(--air-head); font-size: 15px; color: var(--air-cream); }
.eu-final-name.eu-side-1 { color: var(--air-p1); }
.eu-final-name.eu-side-2 { color: var(--air-p2); }
.eu-final-name.eu-side-3 { color: var(--air-p3); }
.eu-final-name.eu-side-4 { color: var(--air-p4); }
.eu-final-badge {
  font-family: var(--air-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--air-yellow);
}
.eu-final-dead { font-size: 12px; color: var(--air-orange); }
.eu-final-place { font-family: var(--air-mono); font-size: 12px; color: var(--air-muted); margin-left: auto; }
.eu-final-row.is-win .eu-final-place { color: var(--air-cream); }
.eu-final-elo { font-family: var(--air-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.eu-final-elo.is-up { color: var(--air-p1); }
.eu-final-elo.is-down { color: var(--air-orange); }
.eu-final-elo.is-flat { color: var(--air-muted); }
.eu-final-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px 8px; }
.eu-final-nums div { display: flex; flex-direction: column; min-width: 0; }
.eu-final-nums b {
  font-family: var(--air-mono);
  font-size: 16px;
  color: var(--air-cream);
  font-variant-numeric: tabular-nums;
}
.eu-final-nums span { font-size: 11px; color: var(--air-muted); }
.eu-final-verdict { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--air-muted); }
/* Фраза про причину исхода — крупнее вердикта по числам: ради неё и смотрят. */
.eu-final-why {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--air-cream);
}
.av-epilogue { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--air-cream); }

.eu-chron-head {
  margin: 0;
  font-family: var(--air-head);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--air-muted);
}
.eu-chron { display: flex; flex-direction: column; gap: 6px; mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.eu-year { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.eu-year-n {
  font-family: var(--air-head);
  font-size: 20px;
  color: var(--air-grey);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.eu-evs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eu-ev {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--air-ink-2);
  font-size: 13px;
  color: var(--air-cream);
}
.eu-ev b { flex: none; font-weight: 700; }
.eu-ev span { font-family: var(--air-mono); font-size: 12px; color: var(--air-muted); min-width: 0; }
.eu-ico { width: 15px; height: 15px; flex: none; align-self: center; }
/* Цветом сказано только «к добру или к беде» — сами дворы раскрашены на карте,
   и второй цветовой словарь в одном кадре читать невозможно. */
.eu-ev.is-bad { color: var(--air-orange); }
.eu-ev.is-good { color: var(--air-p1); }
.eu-ev.is-cold { color: var(--air-cold); }
.eu-ev.is-trade { color: var(--air-cream); }
.eu-ev.is-quiet span { opacity: .6; font-style: italic; }

/* Узкий экран: круг и числа встают друг под друга. */
@media (max-width: 900px) {
  .eu-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .eu-world { max-height: 42vh; }
}

/* ------------------------------------------------ табло «Эйайфории» (19.09.2026)
   Круг мира делил кадр по земле, а земля у дворов почти всегда поровну:
   разница в людях на нём не читалась, хроника мелким моноширинным — тем более.
   Центр кадра теперь табло: строка года, карточка на двор, хроника двух
   последних лет и полоса земли. Круг остался в миниатюре зала. Размеры под
   экран в зале: читать с трёх метров, листать некому. */
.eu-wrap.is-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  /* Общий .eu-wrap ставит start — тогда колонки берут высоту содержимого, а
     не дорожки, и на финале летописи ложатся под ведомость (20.09.2026). */
  align-items: stretch;
  height: calc(100vh - 320px);
  min-height: 520px;
}
.eu-wrap.is-board.is-final { grid-template-rows: auto minmax(0, 1fr) auto; }
/* На финале ведомость итога забирает низ кадра; на экране зала (1080) под
   карточками остаётся полоска в два десятка пикселей — не летопись, а обрезок. */
@media (max-height: 1200px) {
  .eu-wrap.is-board.is-final .eu-col-log { display: none; }
}

.eu-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--air-ink-2);
}
.eu-strip-year { display: flex; align-items: baseline; gap: 12px; flex: none; }
.eu-strip-label { font-family: var(--air-mono); font-size: 16px; letter-spacing: .12em; color: var(--air-muted); }
.eu-strip-n {
  font-family: var(--air-head);
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  color: var(--air-yellow);
  font-variant-numeric: tabular-nums;
}
.eu-strip-of { font-size: 20px; color: var(--air-muted); }
.eu-strip-prog { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.eu-segs { display: flex; gap: 5px; }
.eu-seg {
  flex: 1 1 0;
  height: 14px;
  border-radius: 4px;
  background: var(--air-ink);
  border: 2px solid var(--air-line);
  box-sizing: border-box;
}
.eu-seg.is-done { background: var(--air-yellow); border-color: var(--air-yellow); }
.eu-seg.is-now { border-color: var(--air-yellow); animation: eu-blink 1.6s ease-in-out infinite; }
@keyframes eu-blink { 50% { background: color-mix(in srgb, var(--air-yellow) 35%, var(--air-ink)); } }
.eu-strip-sub {
  font-family: var(--air-mono);
  font-size: 15px;
  color: var(--air-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Колонка на двор (19.09.2026, вечер): карточка сверху, под ней летопись
   этого двора до низа кадра. Ширина — по числу дворов (--eu-n ставит рендер):
   на двоих две колонки, а не две и дыра.
   Ряд — ровно высота дорожки, не содержимого: иначе на финале летописи
   вылезали из своей строки сетки и ложились под ведомость итога (20.09.2026). */
.eu-cols {
  display: grid;
  grid-template-columns: repeat(var(--eu-n, 3), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}
.eu-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.eu-col-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--air-ink-2);
}
.eu-col-log .eu-chron { gap: 8px; }
.eu-col-log .eu-year { grid-template-columns: 40px minmax(0, 1fr); }
.eu-col-log .eu-year-n { font-size: 28px; color: var(--air-cream); }
.eu-col-log .eu-year + .eu-year .eu-year-n { color: var(--air-grey); }
.eu-col-log .eu-year + .eu-year .eu-ev { opacity: .72; }
.eu-col-log .eu-ev { background: var(--air-ink); font-size: 16px; padding: 6px 12px; gap: 10px; min-width: 0; }
/* Строка в колонке шириной в треть экрана: пусть переносится, чем режется —
   «← FalsiFiable: принял 11 беженцев» в одну строку туда не входит. */
.eu-col-log .eu-ev span { font-family: inherit; font-size: 15px; line-height: 1.25; }
.eu-col-log .eu-ico { width: 18px; height: 18px; }
/* Приказ двора — не беда и не удача: нейтральный, но заметный. Три плашки:
   налог, паёк, посев. */
.eu-ev.is-plan { color: var(--air-yellow); flex-wrap: wrap; gap: 6px 8px; }
.eu-col-log .eu-ev.is-plan .eu-pill {
  font-family: var(--air-mono);
  font-size: 14px;
  color: var(--air-cream);
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--air-yellow) 12%, var(--air-ink));
  white-space: nowrap;
}

/* Зерно и золото — вторыми по величине после людей. */
.eu-card-res { display: flex; gap: 22px; }
.eu-stat { display: flex; flex-direction: column; min-width: 0; }
.eu-stat span { font-size: 12px; color: var(--air-muted); }
.eu-stat b {
  font-family: var(--air-head);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--air-cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eu-stat b em { font-style: normal; font-family: var(--air-mono); font-size: 13px; font-weight: 400; color: var(--air-muted); margin-left: 4px; }

/* Лента снизу на экране «Эйайфории» спрятана: летопись уже в колонках. */
.air.air-no-ticker .air-bottom { display: none; }
.air.air-no-ticker .eu-wrap.is-board { height: calc(100vh - 205px); }

.eu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.eu-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 16px;
  border-radius: 14px;
  background: var(--air-ink-2);
  min-width: 0;
}
/* Цвет двора — именем и полосой людей, без цветной планки по краю: толстая
 * полоса сбоку карточки — узнаваемый шаблон ИИ-вёрстки (гейт `side-tab`). */
.eu-card.is-gone { opacity: .7; }
.eu-card-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.eu-card-name {
  font-family: var(--air-head);
  font-size: 26px;
  font-weight: 900;
  color: var(--air-cream);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eu-card.eu-side-1 .eu-card-name { color: var(--air-p1); }
.eu-card.eu-side-2 .eu-card-name { color: var(--air-p2); }
.eu-card.eu-side-3 .eu-card-name { color: var(--air-p3); }
.eu-card.eu-side-4 .eu-card-name { color: var(--air-p4); }
.eu-card.is-gone .eu-card-name { color: var(--air-grey); }
.eu-card-state { margin-left: auto; flex: none; font-family: var(--air-mono); font-size: 13px; color: var(--air-muted); }
.eu-card-state.is-now { color: var(--air-yellow); }
.eu-card-state.is-now::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--air-yellow);
  vertical-align: middle;
}
.eu-card-state.is-gone { color: var(--air-orange); }
.eu-card-people { display: flex; align-items: baseline; gap: 10px; }
.eu-card-lbl { font-size: 14px; color: var(--air-muted); }
.eu-card-n {
  font-family: var(--air-head);
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: var(--air-cream);
  font-variant-numeric: tabular-nums;
}
.eu-delta { font-family: var(--air-mono); font-size: 15px; padding: 2px 9px; border-radius: 999px; }
.eu-delta.is-up { color: #8fe3a5; background: color-mix(in srgb, #8fe3a5 14%, var(--air-ink)); }
.eu-delta.is-down { color: var(--air-orange); background: color-mix(in srgb, var(--air-orange) 14%, var(--air-ink)); }
.eu-delta.is-flat { color: var(--air-muted); }
.eu-bar { height: 10px; border-radius: 5px; background: var(--air-ink); overflow: hidden; }
.eu-bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--air-cream); }
.eu-card.eu-side-1 .eu-bar-fill { background: var(--air-p1); }
.eu-card.eu-side-2 .eu-bar-fill { background: var(--air-p2); }
.eu-card.eu-side-3 .eu-bar-fill { background: var(--air-p3); }
.eu-card.eu-side-4 .eu-bar-fill { background: var(--air-p4); }
.eu-card.is-gone .eu-bar-fill { background: var(--air-grey); }
.eu-card-grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 16px; }
.eu-cell { display: flex; flex-direction: column; min-width: 0; }
.eu-cell span { font-size: 12px; color: var(--air-muted); }
.eu-cell b {
  font-family: var(--air-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--air-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eu-cell b em { font-style: normal; color: var(--air-muted); }
.eu-cell.is-bad b { color: var(--air-orange); }

.eu-bottom { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; min-height: 0; }
.eu-bottom.is-solo { grid-template-columns: minmax(0, 1fr); }
.eu-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--air-ink-2);
  min-height: 0;
  overflow: hidden;
}
/* Хроника в панели крупнее общей: её читают из зала. Что не влезло — уходит
   вниз, самое давнее; свежий год всегда наверху. */
.eu-panel .eu-chron { min-height: 0; }
/* События года в две колонки: строки короткие, а лет в кадре должно быть два. */
.eu-panel.is-wide .eu-evs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
.eu-panel .eu-ev { background: var(--air-ink); font-size: 17px; padding: 6px 12px; gap: 10px; min-width: 0; }
/* Текст события — основным шрифтом, не моноширинным: он на треть уже, и
   строка «Sparring: 121 ушли искать хлеб» влезает в полколонки. */
.eu-panel .eu-ev span { font-family: inherit; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-panel .eu-ico { width: 18px; height: 18px; }
.eu-panel .eu-year { grid-template-columns: 44px minmax(0, 1fr); }
.eu-panel .eu-year-n { font-size: 30px; color: var(--air-cream); }
.eu-panel .eu-year + .eu-year .eu-year-n { color: var(--air-grey); }
.eu-panel .eu-year + .eu-year .eu-ev { opacity: .72; }
.eu-panel .eu-final-nums b { font-size: 20px; }
.eu-panel .eu-final-nums span { font-size: 12px; }
.eu-panel .eu-final-name { font-size: 20px; }
.eu-panel .eu-final-why { font-size: 16px; }

.eu-landbar { display: flex; gap: 3px; height: 26px; border-radius: 8px; overflow: hidden; }
.eu-landseg { display: block; background: var(--air-cream); }
.eu-landseg.eu-side-1 { background: var(--air-p1); }
.eu-landseg.eu-side-2 { background: var(--air-p2); }
.eu-landseg.eu-side-3 { background: var(--air-p3); }
.eu-landseg.eu-side-4 { background: var(--air-p4); }
.eu-landseg.is-gone { background: var(--air-grey); }
.eu-landleg { display: flex; justify-content: space-between; gap: 8px; font-family: var(--air-mono); font-size: 14px; color: var(--air-cream); }
.eu-landleg .eu-side-1 { color: var(--air-p1); }
.eu-landleg .eu-side-2 { color: var(--air-p2); }
.eu-landleg .eu-side-3 { color: var(--air-p3); }
.eu-landleg .eu-side-4 { color: var(--air-p4); }
.eu-flows { display: flex; flex-direction: column; gap: 6px; }
.eu-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  color: var(--air-cream);
}
.eu-flow-side { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-flow-arrow { color: var(--air-muted); text-align: center; }
.eu-flow-n { font-family: var(--air-head); font-size: 22px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.eu-flow-year { font-family: var(--air-mono); font-size: 12px; font-weight: 400; color: var(--air-muted); }
.eu-flow.is-old { opacity: .6; }
.eu-flow-none { margin: 0; font-size: 14px; color: var(--air-muted); }

/* Телефон: кадр не держим, страница листается. ⚠️ Высоту снимать и у
   `.air-no-ticker` — его правило сильнее, и без этого табло зажималось в
   100vh − 205px, а колонки дворов ложились друг на друга (23.09.2026). */
@media (max-width: 900px) {
  .eu-wrap.is-board,
  .air.air-no-ticker .eu-wrap.is-board { height: auto; min-height: 0; grid-template-rows: none; }
  .eu-cards { grid-template-columns: minmax(0, 1fr); }
  .eu-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; overflow: visible; }
  .eu-card { flex: none; }
  .eu-col-log { flex: none; max-height: 40vh; }
  .eu-bottom { grid-template-columns: minmax(0, 1fr); }
  .eu-strip { flex-wrap: wrap; gap: 12px; }
  .eu-strip-n { font-size: 44px; }
  /* Итог: имя, «победа», «двор пал» и место в одну строку не входят —
     место переносится целиком, а не по слову в столбик. */
  .eu-final-head { flex-wrap: wrap; row-gap: 2px; }
  .eu-final-place, .eu-final-dead, .eu-final-badge { white-space: nowrap; }
}