/* =====================================================================
   Регата «Дракон» — оформление.

   Палитра: зелёный — основа, янтарный — акценты, золотой — заголовки.
   Оформление всегда тёмное, светлого варианта нет.

   Цвета заданы в два слоя. Нижний — неизменные ряды оттенков
   (--green-*, --amber-*, --gold-*). Верхний — смысловые переменные
   (--bg, --surface, --text, --heading...), которые и используются
   в правилах. Правило берёт только смысловую переменную, поэтому
   перекрасить сайт целиком — работа в одном месте.

   Мелкий текст — времена, названия команд — золотым не красим:
   сайт смотрят с телефона на солнце, и разборчивость там дороже
   единообразия. Золото достаётся заголовкам и крупным цифрам.
   ===================================================================== */

:root {
  /* --- зелёный: основа, шапка, ссылки --- */
  --green-950: #05150e;
  --green-900: #0a2418;
  --green-700: #17603d;
  --green-500: #2e8b5a;
  --green-300: #8ecaa8;
  --green-200: #bfe3ce;

  /* --- янтарный: акценты, отметки, текущий заезд --- */
  --amber-600: #a86410;
  --amber-500: #c47f16;
  --amber-400: #e0a12a;

  /* --- золотой: заголовки и призовые места --- */
  --gold-700: #8a6410;
  --gold-400: #dcb63c;
  --gold-300: #ecd06a;

  --success-700: #0b6b45;

  /* --- смысловой слой: им и пользуются правила --- */
  --bg: #04120c;
  --bg-image:
    radial-gradient(1100px 520px at 50% -12%, rgba(120, 200, 150, 0.1), transparent 62%),
    linear-gradient(180deg, #0a2418 0%, #04120c 46%);
  --surface: #0b2117;
  --surface-veil: rgba(11, 33, 23, 0.94);
  --surface-muted: rgba(255, 255, 255, 0.04);
  --surface-sunken: rgba(255, 255, 255, 0.06);
  --border: rgba(220, 182, 60, 0.22);
  --border-strong: rgba(220, 182, 60, 0.38);

  --text: #e8f2ea;
  --text-soft: #c6dccd;
  --text-muted: #9cbaa8;
  --text-faint: #7d9b89;
  --text-ghost: #5e7a69;
  --text-whisper: #47604f;

  /* На тёмном золото можно взять в полную силу */
  --heading: var(--gold-300);

  --link: var(--green-300);
  --accent: var(--amber-400);
  --accent-soft: rgba(224, 161, 42, 0.14);
  --accent-line: rgba(224, 161, 42, 0.32);

  --header-bg: #071b12;
  --hero-bg: #071b12;
  --hero-text: #ffffff;

  --badge-neutral-bg: rgba(255, 255, 255, 0.08);
  --badge-neutral-text: var(--green-200);
  --badge-gold-bg: rgba(224, 161, 42, 0.18);
  --badge-gold-text: var(--amber-400);
  --badge-green-bg: rgba(46, 139, 90, 0.24);
  --badge-green-text: #7fd6a6;
  --badge-red-bg: rgba(231, 154, 154, 0.16);
  --badge-red-text: #efabab;
  --badge-sky-bg: rgba(224, 161, 42, 0.18);
  --badge-sky-text: var(--amber-400);

  --podium-bg: linear-gradient(160deg, rgba(201, 162, 39, 0.16), var(--surface) 60%);
  --podium-row: rgba(201, 162, 39, 0.12);
  --podium-chip: linear-gradient(180deg, rgba(220, 182, 60, 0.9), rgba(201, 162, 39, 0.95));
  --podium-border: rgba(220, 182, 60, 0.45);
  --podium-title: var(--gold-300);

  --btn-primary-bg: var(--green-700);
  --btn-primary-hover: var(--green-500);
  --btn-primary-text: #ffffff;

  --danger-text: #efabab;
  --danger-border: rgba(231, 154, 154, 0.4);
  --danger-bg: rgba(231, 154, 154, 0.14);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -18px rgba(0, 0, 0, 0.7);

  --radius: 16px;
  --font: 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.page-main { flex: 1; padding: 20px 0 24px; }

/*
 * Блоки, которые сами начинаются с тёмного фона, поднимаем под шапку:
 * иначе между ними и шапкой видна светлая полоса отступа.
 */
.page-main > .hero:first-child,
.page-main > .admin-bar:first-child { margin-top: -20px; }

/* Цифры одинаковой ширины — таблица времён не «прыгает» */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

a { color: var(--link); }

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

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(4, 18, 12, 0.35);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.brand-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.live-badge {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-300); }
.live-badge[data-state='live'] .live-dot { background: var(--amber-400); animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.live-badge[data-state='offline'] .live-dot { background: var(--gold-400); }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(224, 161, 42, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(224, 161, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 161, 42, 0); }
}

/*
 * В шапке только название и значок связи.
 * Разделы — внизу на любой ширине: до них одинаково просто дотянуться
 * и большим пальцем, и мышью.
 */
@media (max-width: 860px) {
  .header-inner { height: 52px; }
  .brand-title { font-size: 14px; }
  .live-badge { padding: 4px 10px; font-size: 10px; }
}

/* ------------------------ нижнее меню ------------------------ */

/*
 * Панель — скруглённая плашка с золотой обводкой, приподнятая над нижним
 * краем. Внешний <nav> сам ничего не рисует: он только держит плашку внизу
 * и даёт поля по бокам.
 *
 * Цвета сняты пипеткой с образца организаторов: плашка бирюзово-зелёная
 * и заметно светлее страницы, а активная вкладка — наоборот, темнее плашки.
 * Поэтому заданы здесь числами, а не через общую палитру сайта: панель
 * нарочно выбивается из неё.
 */
.bottom-nav {
  --nav-bg: #204b44;
  --nav-active-bg: #153a33;
  --nav-edge: rgba(214, 184, 110, 0.55);
  --nav-icon: #dcbf72;
  --nav-label: #a5cbc2;
  --nav-label-active: #eddca0;

  position: sticky; bottom: 0; z-index: 40;
  width: 100%; max-width: 960px; margin: 0 auto;
  padding: 12px 10px calc(10px + env(safe-area-inset-bottom));
  /* Растяжка к фону гасит содержимое, которое иначе проступало бы
     в зазоре под плашкой при прокрутке */
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}

.nav-deck {
  display: flex; align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--nav-edge);
  border-radius: 22px;
  background: var(--nav-bg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.nav-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 4px 10px;
  text-decoration: none;
  color: var(--nav-label);
  transition: color 0.15s, background-color 0.15s;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); }
.nav-item.is-active {
  color: var(--nav-label-active);
  background: var(--nav-active-bg);
}

.nav-label { font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; }

/*
 * Значок золотой у всех вкладок, подпись — нет: активная отличается
 * цветом подписи и фоном, а строй значков остаётся ровным, как на образце.
 */
.nav-icon { display: block; width: 26px; height: 26px; flex-shrink: 0; color: var(--nav-icon); }
.nav-item.is-active .nav-icon { stroke-width: 1.8; }

/* --------------------------- карточки --------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.card-pad { padding: 20px; }
a.card { display: block; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-header h1 { margin: 0; font-size: clamp(22px, 5vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.page-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.page-actions { display: flex; gap: 8px; }

h2.section { margin: 0 0 4px; font-size: clamp(18px, 4vw, 22px); font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.section-note { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.empty { padding: 48px 24px; text-align: center; }
.empty-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-soft); }
.empty-hint { margin: 8px auto 0; max-width: 34em; font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* ---------------------------- hero ---------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--hero-bg); color: var(--hero-text);
  padding: 22px 0 24px; margin-bottom: 16px;
}
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.45; pointer-events: none;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(46, 139, 90, 0.55), transparent 60%),
    radial-gradient(700px 320px at 90% 100%, rgba(224, 161, 42, 0.32), transparent 60%);
}
.hero > .container { position: relative; }
.hero-kicker {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(236, 208, 106, 0.45); background: rgba(224, 161, 42, 0.14);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-300);
}
.hero h1 {
  margin: 0; font-size: clamp(24px, 6.2vw, 40px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
}

/* Место и дата — одной строкой: на телефоне это экономит пол-экрана */
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.hero-fact { font-size: 14px; font-weight: 600; color: var(--green-200); }

/* Длинный подзаголовок прячем под раскрытие — он мешает добраться до сути */
.hero-more { margin-top: 12px; }
.hero-more > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--amber-400);
}
.hero-more > summary::-webkit-details-marker { display: none; }
.hero-more > summary::after { content: ' ▾'; }
.hero-more[open] > summary::after { content: ' ▴'; }
.hero-more p {
  margin: 8px 0 0; max-width: 46em;
  font-size: 13.5px; line-height: 1.55; color: var(--green-200);
}

/* ------------------- что происходит сейчас ------------------- */

.now-card {
  padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.now-card.is-live { border-color: var(--amber-500); box-shadow: var(--shadow-lift), 0 0 0 3px rgba(224, 161, 42, 0.28); }

.now-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.now-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--badge-neutral-bg); color: var(--badge-neutral-text);
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.now-pill-live { background: var(--amber-600); color: #fff; }
.now-pill-done { background: var(--badge-green-bg); color: var(--badge-green-text); }
.now-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.now-cat { font-size: 12px; font-weight: 700; color: var(--text-faint); }

.now-title { margin: 12px 0 0; font-size: clamp(24px, 6vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.now-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.now-clock {
  margin: 10px 0 0; font-size: clamp(30px, 9vw, 44px); font-weight: 800;
  line-height: 1; letter-spacing: -0.02em; color: var(--text);
}

.now-leader {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.now-leader-label { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.now-leader-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; }
.now-leader-time { font-size: 17px; font-weight: 800; }

/* -------------------------- плитки -------------------------- */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px; border-radius: 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: inherit;
}
.tile:hover { background: var(--surface-sunken); }
.tile-value { font-size: clamp(22px, 6vw, 28px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.tile-value small { font-size: 0.55em; color: var(--text-ghost); }
.tile-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.25; }

.block { margin-top: 16px; }


/* ---------------------- золото заголовков ---------------------- */

/*
 * Золотой отдан заголовкам и крупным числам — там он читается как акцент
 * и не мешает. Времена, названия команд и текст таблиц остаются
 * контрастными: их разбирают на солнце, и цвет там дороже украшения.
 */
.hero h1,
.page-header h1,
h2.section,
.section-caps,
.subsection,
.stage-head h3,
.empty-title,
.now-title,
.tile-value,
.brand-title { color: var(--heading); }

/* В шапке и hero фон тёмный — золото там звучит в полную силу */
.site-header .brand-title { color: var(--gold-300); }
.hero h1 { color: var(--gold-300); }

/* --------------------------- бейджи --------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.badge-scheduled { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-preparing { background: var(--badge-gold-bg); color: var(--badge-gold-text); }
.badge-running { background: var(--amber-600); color: #fff; }
.badge-finished { background: var(--badge-green-bg); color: var(--badge-green-text); }
.badge-cancelled { background: var(--badge-red-bg); color: var(--badge-red-text); }
.badge-muted { background: var(--badge-neutral-bg); color: var(--text-muted); }
.badge-penalty { background: var(--badge-red-bg); color: var(--badge-red-text); }
.badge-cat { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-cat-women { background: var(--badge-sky-bg); color: var(--badge-sky-text); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.place { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 46px; padding: 4px 8px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.place b { font-size: 19px; font-weight: 800; }
.place-podium { background: var(--podium-chip); color: var(--green-950); box-shadow: inset 0 0 0 1px var(--podium-border); }
.place-none { color: var(--text-whisper); font-size: 19px; font-weight: 800; }

/* --------------------------- заезды --------------------------- */

.heat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.heat { overflow: hidden; }
.heat.is-running { border-color: var(--amber-400); box-shadow: var(--shadow-lift), 0 0 0 3px rgba(76, 198, 255, 0.35); }
.heat.is-cancelled { opacity: 0.6; }
.heat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; background: var(--surface-muted); }
.heat.is-running .heat-head { background: var(--accent-soft); }
.heat-num {
  flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-soft);
}
.heat.is-running .heat-num { background: var(--amber-600); color: #fff; box-shadow: none; }
.heat-when { flex: 1; min-width: 120px; }
.heat-time { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.heat-title { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.heat-stage { margin: 0; font-size: 12px; color: var(--text-muted); }
.heat-badges { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.heat-note { margin: 0; padding: 8px 16px; background: var(--badge-gold-bg); border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--badge-gold-text); }
.heat-empty { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--text-faint); }

.lineup { list-style: none; margin: 0; padding: 0; }
.lineup li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); }
.lane { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-sunken); font-size: 12px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lineup-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-time {
  flex-shrink: 0; text-align: right; font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.lineup-gap { display: block; font-size: 11px; font-weight: 700; color: var(--text-faint); }
.lineup li.is-leader .lane { background: var(--amber-600); color: #fff; }

/* --------------------------- таблицы --------------------------- */

.table-wrap { overflow-x: auto; }
table.results { width: 100%; min-width: 520px; border-collapse: collapse; text-align: left; }
table.results th {
  padding: 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border);
}
table.results td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.results tr:last-child td { border-bottom: 0; }
table.results th:first-child, table.results td:first-child { padding-left: 16px; }
table.results th:last-child, table.results td:last-child { padding-right: 16px; text-align: right; }
.col-num { width: 78px; }
.col-heat { width: 62px; text-align: center; }
.col-time { width: 112px; text-align: right; }
.col-status { width: 96px; }
tr.is-podium { background: var(--podium-row); }
tr.is-out td { color: var(--text-faint); }
.team-name { margin: 0; font-weight: 600; line-height: 1.25; }
.team-sub { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--gold-700); }
.team-sub { color: var(--gold-300); }
.team-note { margin: 2px 0 0; font-size: 11px; color: var(--danger-text); }
.time-main { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.time-gap { display: block; font-size: 11px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rank-num { font-size: 19px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Сортируемые заголовки видно сразу: они оформлены как кнопки */
th.sortable {
  cursor: pointer; user-select: none; white-space: nowrap;
  border-radius: 8px; transition: background 0.12s, color 0.12s;
}
th.sortable:hover { background: var(--surface-sunken); color: var(--link); }
th.sortable::after {
  content: '↕'; display: inline-block; margin-left: 5px;
  font-size: 11px; opacity: 0.5;
}
th.sortable[data-dir='asc']::after { content: '↑'; opacity: 1; color: var(--accent); }
th.sortable[data-dir='desc']::after { content: '↓'; opacity: 1; color: var(--accent); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --------------------------- пьедестал --------------------------- */

.podium { overflow: hidden; border-color: var(--podium-border); background: var(--podium-bg); }
.podium-head { padding: 12px 20px; border-bottom: 1px solid var(--podium-border); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--podium-title); }
.podium ol { list-style: none; margin: 0; padding: 0; }
.podium li { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border); }
.podium li:first-child { border-top: 0; }
.podium-medal { font-size: 30px; line-height: 1; }
.podium-body { flex: 1; min-width: 0; }
.podium-name { margin: 0; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-place { margin: 1px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.podium-time { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --------------------------- кнопки --------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-gold { background: var(--gold-400); color: var(--green-950); }
.btn-gold:hover { background: var(--gold-300); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-sunken); }
.btn-danger { background: var(--surface); border-color: var(--danger-border); color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 10px; }
/* Крупные кнопки для мокрых пальцев на планшете секретаря */
.btn-touch { min-height: 54px; border-radius: 14px; font-size: 15px; padding: 12px 20px; }
.btn-block { width: 100%; }

/* --------------------------- формы --------------------------- */

.field { margin-bottom: 14px; }
.label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px;
}
.input:focus { outline: none; border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(46, 139, 90, 0.28); }
textarea.input { resize: vertical; min-height: 84px; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } .form-span-2 { grid-column: 1 / -1; } }

.alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.alert-error { background: var(--danger-bg); color: var(--danger-text); }
.alert-warn { background: var(--badge-gold-bg); color: var(--badge-gold-text); }
.alert-info { background: var(--accent-soft); color: var(--link); }

/* --------------------------- админка --------------------------- */

.admin-bar { background: var(--surface); border-bottom: 1px solid var(--border-strong); }
.admin-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 54px; }
.admin-who { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--text-muted); }
.admin-tag { padding: 4px 10px; border-radius: 999px; background: var(--green-900); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-tag { background: var(--amber-600); }
.admin-links { display: flex; align-items: center; gap: 12px; }
.admin-links a, .admin-links button { font-size: 13px; font-weight: 700; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--link); }
.admin-links button { color: var(--text-faint); }
.admin-tabs { display: flex; gap: 4px; overflow-x: auto; }
.admin-tab { padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--text-faint); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.admin-tab.is-active { color: var(--link); border-bottom-color: var(--accent); }

.heat-picker { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 8px; margin: 0 -16px; }
.pick {
  flex-shrink: 0; min-width: 72px; display: flex; flex-direction: column; align-items: center;
  padding: 10px 12px; border-radius: 14px; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--surface); color: var(--text-soft);
}
.pick-num { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pick-time { margin-top: 4px; font-size: 11px; font-weight: 700; opacity: 0.75; font-variant-numeric: tabular-nums; }
.pick-preparing { background: var(--badge-gold-bg); color: var(--badge-gold-text); box-shadow: inset 0 0 0 1px var(--podium-border); }
.pick-running { background: var(--amber-600); color: #fff; box-shadow: inset 0 0 0 1px var(--amber-600); }
.pick-finished { background: var(--badge-green-bg); color: var(--badge-green-text); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.5); }
.pick-cancelled { background: var(--badge-neutral-bg); color: var(--text-faint); text-decoration: line-through; }
.pick.is-active { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.04); }

.status-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.status-controls .btn { flex-direction: column; gap: 2px; font-weight: 800; }
.status-controls .btn span.ico { font-size: 20px; line-height: 1; }
.status-controls .btn span.txt { font-size: 12px; }
.btn-prep { background: var(--badge-gold-bg); color: var(--badge-gold-text); }
.btn-start { background: var(--amber-600); color: #fff; }
.btn-finish { background: var(--success-700); color: #fff; }
.btn.is-on { box-shadow: 0 0 0 4px rgba(224, 161, 42, 0.4); }
.status-extra { display: flex; gap: 8px; margin-top: 8px; }
.status-extra form { flex: 1; }

.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.entry { border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.entry-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.entry-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-row { display: grid; grid-template-columns: 1fr 118px; gap: 8px; }
.entry-time { height: 54px; text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.entry-time:disabled { background: var(--surface-sunken); color: var(--text-ghost); cursor: not-allowed; }
.entry-time.is-invalid { border-color: var(--danger-border); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25); }
.entry-status { height: 54px; font-weight: 700; }
.entry-note { margin-top: 8px; font-size: 13px; }
.entry-error { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--danger-text); }
.input-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.input-hint b { color: var(--text-soft); font-variant-numeric: tabular-nums; }

.save-bar {
  position: sticky; bottom: 0; display: flex; gap: 8px; margin: 16px -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-veil); border-top: 1px solid var(--border); backdrop-filter: blur(8px);
}
.save-bar .btn:first-child { flex: 1; }
.save-bar .btn:last-child { flex: 2; }

.seed-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seed-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; }
.seed-item:hover { background: var(--surface-sunken); }
.seed-item input { position: absolute; opacity: 0; pointer-events: none; }
.seed-item:has(input:checked) { border-color: var(--amber-500); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--amber-500); }
.seed-rank { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-sunken); color: var(--text-faint); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.seed-item:has(input:checked) .seed-rank { background: var(--amber-600); color: #fff; }
.seed-body { flex: 1; min-width: 0; }
.seed-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seed-hint { display: block; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

details.row { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 8px; }
details.row > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 700; }
details.row > summary::-webkit-details-marker { display: none; }
.row-body { padding: 16px; border-top: 1px solid var(--border); }
.row-edit { font-size: 12px; font-weight: 700; color: var(--link); margin-left: auto; }

/* ---------------------- фильтры таблиц ---------------------- */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 14px 16px; margin-bottom: 16px;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.filter-field select {
  min-width: 150px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border-strong); font: inherit; font-size: 14px;
  background: var(--surface); color: var(--text);
}
.filter-reset { margin-left: auto; }
.filter-count { font-size: 12px; font-weight: 700; color: var(--text-faint); align-self: center; }

.filtered-out { display: none !important; }
.no-matches { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--text-faint); }

/* --------------------------- прочее --------------------------- */

.legend { display: grid; gap: 8px 24px; padding: 20px; }
@media (min-width: 640px) { .legend { grid-template-columns: 1fr 1fr; } }
.legend div { display: flex; gap: 12px; align-items: baseline; }
.legend dt { width: 46px; flex-shrink: 0; font-weight: 800; color: var(--text-soft); }
.legend dd { margin: 0; font-size: 14px; color: var(--text-muted); }
.legend dd span { color: var(--text-ghost); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }
.muted { color: var(--text-faint); font-size: 12px; text-align: center; }
.qr-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.qr-img { width: 180px; height: 180px; border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: #fff; }
.qr-url { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 14px; font-weight: 600; word-break: break-all; color: var(--text-soft); }

/* Печать протокола */
@media print {
  .no-print, .site-header, .bottom-nav { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
  .hero { background: #fff !important; color: #000 !important; padding: 0 0 12px; }
  .hero::before { display: none; }
}

/* ------------------- ответ на действие админки ------------------- */

.flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius);
  border: 1px solid transparent; box-shadow: var(--shadow-card);
  transition: opacity 0.4s, transform 0.4s;
}
.flash-icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; background: rgba(255, 255, 255, 0.55);
}
.flash-icon { background: rgba(0, 0, 0, 0.25); }
.flash > div { flex: 1; min-width: 0; }
.flash-text { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.flash-note { margin: 4px 0 0; font-size: 13px; font-weight: 500; opacity: 0.85; }
.flash-close {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; opacity: 0.6;
}
.flash-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.flash-hiding { opacity: 0; transform: translateY(-6px); }

.flash-ok { background: var(--badge-green-bg); color: var(--badge-green-text); border-color: currentColor; }
.flash-info { background: var(--accent-soft); color: var(--link); border-color: currentColor; }
.flash-warn { background: var(--badge-gold-bg); color: var(--badge-gold-text); border-color: currentColor; }
.flash-error { background: var(--danger-bg); color: var(--danger-text); border-color: currentColor; }

/* =====================================================================
   Телефон.
   Основная аудитория смотрит сайт с руки на улице, поэтому здесь
   не «уменьшаем десктоп», а меняем раскладку там, где она мешает читать.
   ===================================================================== */

@media (max-width: 640px) {
  .container { padding: 0 12px; }
  .page-main { padding: 14px 0 18px; }
  .page-main > .hero:first-child,
  .page-main > .admin-bar:first-child { margin-top: -14px; }

  .card-pad { padding: 16px; }
  .page-header { margin-bottom: 14px; gap: 10px; }
  .stack { gap: 12px; }
  .stack-lg { gap: 24px; }

  /*
   * Таблица результатов на узком экране разворачивается в строки-карточки:
   * место слева, название и подпись посередине, время справа. Так пропадает
   * горизонтальная прокрутка, из-за которой время уезжало за край экрана.
   */
  table.results { min-width: 0; }
  table.results thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.results tbody, table.results tr, table.results td { display: block; }
  table.results tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }
  table.results tr:last-child { border-bottom: 0; }
  table.results td { padding: 0; border: 0; }
  table.results td:first-child, table.results td:last-child { padding: 0; }

  td.col-num { width: auto; }
  td.cell-team { min-width: 0; }
  td.col-time { text-align: right; }
  /* Номер заезда и код результата переезжают подписью под название */
  td.col-heat, td.col-status { display: none; }
  .team-meta { display: block; }

  .team-name { font-size: 15px; }
  .time-main { font-size: 17px; }

  /* Панель фильтров: два поля в ряд, кнопка сброса на всю ширину */
  .filters { padding: 12px; gap: 8px; }
  .filter-field { flex: 1 1 calc(50% - 4px); }
  .filter-field select { min-width: 0; width: 100%; }
  .filter-reset { margin-left: 0; width: 100%; }
  .filter-count { width: 100%; }

  /* Заезды */
  .heat-head { padding: 10px 12px; gap: 6px 10px; }
  .heat-num { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .heat-time { font-size: 16px; }
  .heat-when { min-width: 100px; }
  .lineup li { padding: 9px 12px; gap: 10px; }
  .lineup-name { font-size: 14px; }

  /* Пьедестал */
  .podium li { padding: 12px 14px; gap: 12px; }
  .podium-medal { font-size: 26px; }
  .podium-name { font-size: 15px; }
  .podium-time { font-size: 18px; }

  /* Легенда кодов в одну колонку */
  .legend { padding: 16px; }

  /* Админка */
  .admin-bar-inner { height: 48px; gap: 10px; }
  .admin-who span:not(.admin-tag) { display: none; }
  .row-body { padding: 12px; }
  details.row > summary { padding: 12px; }
  .entry { padding: 10px; }
  .entry-row { grid-template-columns: 1fr 104px; }
  .save-bar { margin: 14px -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .heat-picker { padding: 4px 12px 8px; margin: 0 -12px; }

}

/* Совсем узкие экраны — старые телефоны и разделённый экран */
@media (max-width: 360px) {
  .tiles { gap: 6px; }
  .tile { padding: 12px 4px; }
  .tile-label { font-size: 10px; }
  .hero-fact { font-size: 13px; }
  .now-card { padding: 14px; }
}

/*
 * Цели нажатия под палец на любых сенсорных экранах.
 * Вкладок в списке нет: их высоту задаёт табличка на борту, и запас
 * снизу выталкивал бы её с корпуса. Высота панели подобрана так,
 * что табличка и без того крупнее сорока четырёх пикселей.
 */
@media (pointer: coarse) {
  .admin-tab, .btn, .pick, .seed-item, details.row > summary { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  th.sortable { padding-top: 14px; padding-bottom: 14px; }
}

/* Подпись под названием команды: видна только на узком экране */
.team-meta { display: none; margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--text-faint); }

.stage-head { padding: 12px 16px; background: var(--surface-muted); }
.stage-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.stage-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.col-heat { color: var(--text-faint); font-weight: 600; }

/* -------------------------- участники -------------------------- */

.team-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.team-row:first-child { border-top: 0; }
.team-place { flex-shrink: 0; width: 56px; text-align: center; }
.team-main { flex: 1; min-width: 0; }
.team-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.team-line { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-crew { color: var(--text-faint); }
.team-best { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.team-best-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.team-best-time { font-size: 17px; font-weight: 800; line-height: 1.2; }

@media (max-width: 640px) {
  .team-row { padding: 11px 12px; gap: 10px; }
  .team-place { width: 46px; }
  .team-title { font-size: 14.5px; }
  /* Состав экипажа на телефоне занимает строку зря — прячем */
  .team-crew { display: none; }
}

/* --------------------------- инфо --------------------------- */

.facts { display: grid; gap: 12px 24px; margin: 14px 0 0; }
@media (min-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact dt { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.fact dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }

.prose { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.prose-pre { white-space: pre-line; }
.subsection { margin: 0 0 8px; font-size: 15px; font-weight: 800; }

.stage-steps {
  list-style: none; margin: 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--accent-line);
  display: flex; flex-direction: column; gap: 10px;
}
.stage-name { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.stage-places {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px;
  background: var(--badge-gold-bg); color: var(--badge-gold-text);
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.stage-note { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

.legend-inline { padding: 14px 0 0; }
.qr-side { min-width: 0; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

@media (max-width: 640px) {
  .qr-panel { gap: 14px; justify-content: center; }
  .qr-img { width: 200px; height: 200px; }
  .qr-side { width: 100%; text-align: center; }
  .qr-actions { justify-content: center; }
}

/* ---------------------- служебные классы ---------------------- */

.mb { margin-bottom: 12px; }
.mt { margin-top: 8px; }
.mt-lg { margin-top: 28px; }
.hint { margin-left: 8px; font-size: 12px; color: var(--text-faint); }
.row-danger { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-strong { font-weight: 700; }
.row-summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.inline-form .input { max-width: 220px; }

@media (max-width: 640px) {
  .hint { display: block; margin: 6px 0 0; }
  .inline-form { flex-direction: column; }
  .inline-form .input, .inline-form .btn { max-width: none; width: 100%; }
  /* Номер заезда в списке админки, чтобы не занимал полстроки */
  details.row > summary .lane { width: 32px; height: 32px; font-size: 14px; }
  .row-sub { flex-basis: 100%; }
}

.section-caps {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}

.inline-block { display: inline-block; }
.link-muted { color: var(--text-faint); }
.admin-body { padding: 20px 0; }
@media (max-width: 640px) { .admin-body { padding: 14px 0; } }

/* =====================================================================
   Торжественное убранство
   Драконы, лодка и герб вырезаны из пригласительного билета регаты,
   поэтому фон страницы подведён ровно под его зелень: края картинок
   гаснут в тот же цвет и растворяются без видимого шва.
   ===================================================================== */

/* Герб рядом с названием */
.brand-emblem {
  width: 28px; height: 30px; flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.page-main { position: relative; z-index: 1; }

/*
 * Дракон на подложке главной.
 *
 * Слой прибит к окну (fixed), поэтому при прокрутке дракон стоит на месте,
 * а карточки едут поверх него — то же ощущение, что у водяного знака
 * на бумаге. Карточки при этом полупрозрачны, иначе он был бы виден
 * только в промежутках между ними.
 *
 * Прозрачность низкая намеренно: рисунок мелкий и частый, и на полной
 * силе он спорил бы с цифрами времени.
 */
body.with-dragon::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/dragon-bg.png') center 54% / auto 62% no-repeat;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}

/*
 * Чтобы дракон читался, плитки главной полупрозрачны. Меняем саму
 * переменную, а не отдельные правила: на неё опираются и карточки,
 * и шапка заезда, и подиум — иначе часть плиток осталась бы глухой.
 */
body.with-dragon { --surface: rgba(11, 33, 23, 0.68); }

/* Тонкая золотая рамка страницы — как на пригласительном */
body::after {
  content: '';
  position: fixed; inset: 0;
  border: 1px solid rgba(220, 182, 60, 0.28);
  outline: 3px solid rgba(220, 182, 60, 0.1);
  outline-offset: -5px;
  pointer-events: none;
  /* Выше шапки и меню, иначе верх и низ рамки прятались бы за ними.
     Нажатия она не перехватывает, поэтому мешать не может. */
  z-index: 50;
}

@media (max-width: 640px) {
  .brand-emblem { width: 24px; height: 26px; }

  /* Панель к краям экрана ближе: на телефоне поля дороже */
  .bottom-nav { padding: 10px 8px calc(8px + env(safe-area-inset-bottom)); }
  .nav-item { padding: 8px 2px 9px; }
  .nav-label { font-size: 11px; }
  .nav-icon { width: 25px; height: 25px; }

  /* На узком экране дракона тянем по ширине: по высоте он был бы шире экрана */
  body.with-dragon::before { background-size: 108% auto; background-position: center 52%; }
}

/*
 * Совсем узкие экраны: «Расписание» и «Участники» в одну строку требуют
 * около семидесяти пикселей, а вкладке достаётся восемьдесят. Ужимаем
 * шрифт и разрядку, но перенос не разрешаем — строй подписей должен
 * оставаться ровным.
 */
@media (max-width: 360px) {
  .nav-label { font-size: 10px; letter-spacing: -0.2px; }
  .nav-icon { width: 22px; height: 22px; }
}

@media print {
  body::after, body.with-dragon::before { display: none !important; }
}