/* ============================================================
   Nagano 2026 — дизайн-система
   Источник токенов: DESIGN.md (формат Google Stitch)
   ============================================================ */

:root {
  /* Цвета — из фирменного стиля Trout Area Czech Republic (assets/img/logo) */
  --c-primary: #2b3e8f;       /* фирменный синий (TROUT) */
  --c-primary-deep: #22305f;
  --c-red: #e01820;           /* фирменный красный (AREA) */
  --c-ink: #14222e;
  --c-ink-soft: #50616e;
  --c-surface: #ffffff;
  --c-surface-soft: #f7f9fd;
  --c-surface-deep: #001838;  /* глубокий нэви из кольцевого бейджа */
  --c-line: #e8ebf4;
  --c-cz-blue: #11457e;
  --c-jp-red: #bc002d;
  --c-gold: #f0bb00;
  --c-trout-pink: #e8718d;    /* радужная форель (стайка за курсором): боковая полоса */
  --c-trout-olive: #5a7a4c;   /* спина и плавники */
  --c-trout-silver: #c7d0d6;  /* бок */
  --c-trout-belly: #f2f4f1;   /* брюхо */
  --c-success: #2faa6a;

  /* Канальные значения тех же цветов. Полупрозрачные заливки пишем
     как rgb(var(--c-primary-rgb) / .12) — тогда смена цвета выше
     перекрашивает и заливки. Значения обязаны совпадать с hex. */
  --c-primary-rgb: 43 62 143;
  --c-red-rgb: 224 24 32;
  --c-deep-rgb: 0 24 56;
  --c-gold-rgb: 240 187 0;
  --c-cz-blue-rgb: 17 69 126;

  /* Типографика */
  --f-head: "Manrope", "Noto Sans JP", system-ui, sans-serif;
  --f-body: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Размерная шкала — единственный источник font-size.
     Сырых rem-значений в файле быть не должно. */
  --fs-display: clamp(2.4rem, 4.6vw, 64px); /* потолок в px, не в rem: на широких экранах корневой шрифт растёт до 20px, и rem-потолок давал 72px — чешский заголовок героя (32 знака) переносился на две строки; 64px укладывают его в колонку 1200 */
  --fs-h1: clamp(2.2rem, 4vw, 2.8rem);  /* заголовок страницы */
  --fs-h2: 1.5rem;                      /* заголовок раздела */
  --fs-h3: 1.15rem;                     /* заголовок карточки */
  --fs-lead: 1.1875rem;                 /* лид, цитата */
  --fs-body: 1.0625rem;                 /* базовый текст */
  --fs-ui: .9375rem;                    /* 15px — основной размер интерфейса */
  --fs-caption: .875rem;                /* подписи */
  --fs-eyebrow: .8125rem;               /* надзаголовки, мелкая служебка */
  --fs-micro: .7rem;                    /* шкалы плеера и карты */
  --fs-num: 2.5rem;                     /* крупные табличные цифры */

  /* Отступы */
  --header-h: 72px; /* высота шапки: шапка и scroll-margin целей якорей */
  --s-xxs: 4px; --s-xxs2: 6px; --s-xs: 8px; --s-xs2: 12px;
  --s-sm: 16px; --s-md: 24px;
  --s-lg: 40px; --s-xl: 64px; --s-xxl: 96px;

  /* Скругления и тени */
  --r-sm: 4px; --r-md: 12px; --r-full: 999px;
  --shadow: 0 6px 24px rgb(var(--c-deep-rgb) / .08);
  --shadow-hover: 0 10px 32px rgb(var(--c-deep-rgb) / .12);

  /* Подъём поверхности при наведении — один рецепт на всю систему.
     Скорость — токен отклика из motion.css (там же продублирован). */
  --lift: -2px;
  --lift-dur: var(--t-fast);

  /* Внутренние отступы карточек: обычный и плотный */
  --card-pad: var(--s-md);
  --card-pad-tight: var(--s-sm);

  /* Иконочные кнопки: два размера + минимальная зона касания */
  --icon-btn: 32px;
  --icon-btn-lg: 44px;
  --tap-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Что стартует невидимым и проявляется анимацией — показать сразу,
     иначе глушение анимаций прячет содержимое навсегда (так пропадал
     заголовок главной). */
  .hero-line, .reveal, .hk-line, .masonry-item { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-surface);
}

:lang(ja) { font-family: "Noto Sans JP", var(--f-body); }

img { max-width: 100%; display: block; height: auto; }  /* height: auto обязателен: у картинок есть атрибуты width/height, без него бейдж футера растягивался на 510px и рвал сетку */
a { color: var(--c-primary-deep); }
a:hover { color: var(--c-primary); }

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  /* Белый ореол: на тёмных поверхностях (футер, полоса статистики, разворот
     альбома, лупа) синее кольцо давало контраст ~1.9 при норме 3.0. */
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .85);
}

.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--s-md); }
@media (max-width: 640px) { .container { padding-inline: var(--s-sm); } }

/* --- Типографика --- */
h1, h2, h3 { font-family: var(--f-head); margin: 0; }
.display { font-size: var(--fs-display); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
/* Заголовок страницы (.h1) крупнее заголовка раздела (h2): раньше оба были
   2rem, и на внутренних страницах шесть h2 подряд читались как шесть
   заголовков страницы. */
.h1 {
  font-family: var(--f-head);
  font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
}
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; }

.eyebrow {
  font-family: var(--f-head);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-primary-deep);
}
.muted { color: var(--c-ink-soft); }
.numeric { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 700; }

/* --- Кнопки и чипы --- */
.btn {
  display: inline-block;
  font-family: var(--f-body); font-size: var(--fs-ui); font-weight: 600;
  padding: var(--s-xs2) var(--s-md); border-radius: var(--r-full);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  /* border-color в списке обязателен: у .btn-ghost меняется именно рамка */
  transition: background var(--t-fast) var(--e-std), color var(--t-fast) var(--e-std),
              border-color var(--t-fast) var(--e-std), transform var(--t-fast) var(--e-std);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none; cursor: default;
}
/* Малый размер — явная ступень (.btn-lock оставлен как псевдоним,
   пока разметка в core.js не получит класс .btn-sm) */
.btn-sm, .btn-lock { padding: var(--s-xs) var(--s-sm); font-size: var(--fs-eyebrow); }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }

.chip {
  display: inline-block;
  font-family: var(--f-head); font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-surface-soft); color: var(--c-ink-soft);
  border-radius: var(--r-full); padding: var(--s-xxs2) var(--s-sm);
}
.chip-brand { background: rgb(var(--c-primary-rgb) / .1); color: var(--c-primary); }
/* Текст затемнён: фирменный #e01820 на светлой плашке давал 4.19 при норме 4.5. */
.chip-red { background: rgb(var(--c-red-rgb) / .12); color: #b8111a; }
.chip-blue { background: rgb(var(--c-cz-blue-rgb) / .1); color: var(--c-cz-blue); }
.hero .chip { background: rgba(255, 255, 255, .16); color: #fff; }

/* --- Шапка --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .container {
  display: flex; align-items: center; gap: var(--s-sm);
  height: var(--header-h); flex-wrap: nowrap;
}
.logo { display: flex; align-items: center; gap: var(--s-sm); text-decoration: none; color: var(--c-ink); flex: 0 0 auto; }
.logo img { height: 40px; width: auto; }
.logo b {
  font-family: var(--f-head); font-weight: 800; font-size: var(--fs-body);
  letter-spacing: .02em; color: var(--c-primary); white-space: nowrap;
  border-left: 2px solid var(--c-line); padding-left: var(--s-sm);
}
/* «NAGANO 2026» на телефоне не прятать. Без него в шапке остаётся только
   логотип федерации, и человек, тапая по нему, ждёт сайт Trout Area, а не
   возврат на главную портала. Подпись уменьшаем, но оставляем: она и есть
   указатель «это Нагано, нажатие ведёт на главную». */
@media (max-width: 760px) {
  .logo { gap: var(--s-xs); }
  .logo img { height: 30px; }
  .logo b { font-size: var(--fs-eyebrow); padding-left: var(--s-xs); }
}
@media (max-width: 380px) {
  .logo img { height: 26px; }
  .logo b { font-size: var(--fs-micro); }
}

.site-nav { display: flex; gap: var(--s-sm); margin-inline: auto; flex-wrap: nowrap; }
.site-nav a {
  font-size: var(--fs-ui); font-weight: 600; text-decoration: none;
  color: var(--c-ink); padding: var(--s-xxs2) 2px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--c-primary-deep);
  border-bottom-color: var(--c-primary);
}

/* Переключатель языков: компактная кнопка-флажок + меню с «летающими» флагами */
.lang { position: relative; flex: 0 0 auto; }
.lang-btn {
  display: flex; align-items: center; gap: var(--s-xs);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-full);
  padding: var(--s-xxs2) var(--s-xs2); cursor: pointer; color: var(--c-ink);
  font: 800 var(--fs-eyebrow) var(--f-head);
}
.lang-btn:hover { border-color: var(--c-primary); }
.flag { display: inline-flex; width: 22px; border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.flag-svg { display: block; width: 100%; height: auto; }
.caret { opacity: .5; transition: transform var(--t-fast) var(--e-std); }
.lang.open .caret { transform: rotate(180deg); }
.lang-pop {
  position: absolute; top: calc(100% + var(--s-xs)); right: 0;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-hover); padding: var(--s-xxs2); min-width: 178px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity var(--t-fast) var(--e-std), transform var(--t-fast) var(--e-std), visibility var(--t-fast);
}
.lang:hover .lang-pop, .lang.open .lang-pop { opacity: 1; visibility: visible; transform: none; }
.lang-opt {
  display: flex; align-items: center; gap: var(--s-xs2); width: 100%;
  background: none; border: 0; cursor: pointer; padding: var(--s-xs) var(--s-xs2);
  border-radius: var(--r-sm); text-align: left;
  font: 600 var(--fs-ui) var(--f-body); color: var(--c-ink);
}
.lang-opt .flag { width: 28px; }
.lang-opt:hover { background: var(--c-surface-soft); }
.lang-opt.on { color: var(--c-primary); }
.lang-opt.on .lang-name { font-weight: 700; }
/* Пункты приходят каскадом один раз при раскрытии. Поворот 4°, а не 8°:
   на флаге шириной 22px восемь градусов читались как дрожание, а не жест.
   Постоянного покачивания (bob) больше нет — движущийся акцент без единого
   байта информации в открытом меню только отвлекал. */
.lang:hover .lang-opt, .lang.open .lang-opt { animation: flagIn var(--t-base) var(--e-out) backwards; animation-delay: calc(var(--i) * var(--stagger)); }
@keyframes flagIn { from { opacity: 0; transform: translateY(10px) rotate(-4deg); } to { opacity: 1; transform: none; } }
.lang-opt:hover .flag { transform: scale(1.12) rotate(4deg); }

/* --- Hero --- */
.hero {
  position: relative; color: #fff;
  min-height: 78vh; display: flex; align-items: flex-end;
  background: var(--c-surface-deep) center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top right, rgb(var(--c-deep-rgb) / .85) 20%, rgb(var(--c-deep-rgb) / .25) 70%);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-video.is-on { opacity: 1; }
.hero .container { position: relative; z-index: 2; padding-block: var(--s-xl); }
.hero .display { color: #fff; margin-block: var(--s-sm); }
.hero-date { font-size: var(--fs-lead); font-weight: 500; color: rgba(255, 255, 255, .85); margin-bottom: var(--s-md); }

/* Строка заголовка больше не анимируется отдельно: её ведёт общий каскад
   первого экрана (см. motion.css). Раньше она стартовала с opacity: 0 и своей
   анимацией — если анимации не шли, заголовок пропадал насовсем. */
.hero-line { display: block; }

.countdown { display: flex; gap: var(--s-md); margin-block: var(--s-md); }
.countdown .cell { text-align: center; }
.countdown .num { font-size: var(--fs-num); line-height: 1.1; color: #fff; }
.countdown .lbl { font-size: var(--fs-eyebrow); color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: .1em; }

/* --- Секции --- */
.section { padding-block: var(--s-xl); }

/* Полосатость: чередование белого и мягкого фона. Класс рассчитан на
   разделы любой страницы — .page-hero для него не обязателен. */
.section-soft { background: var(--c-surface-soft); border-block: 1px solid var(--c-line); }
/* Две мягкие полосы подряд (и .page-hero перед мягкой полосой) — это одна
   полоса: линию на стыке убираем с обеих сторон, иначе внутри однотонного
   фона висит волосок ниоткуда. */
.section-soft + .section-soft { border-top: 0; }
.section-soft:has(+ .section-soft) { border-bottom: 0; }
.page-hero + .section-soft { border-top: 0; }
.page-hero:has(+ .section-soft) { border-bottom: 0; }
/* Страница без .page-hero: мягкая полоса сразу под шапкой не должна
   удваивать её нижнюю линию. */
#main-content > .section-soft:first-child { border-top: 0; }

.section-head { display: flex; align-items: center; gap: var(--s-md); margin-bottom: var(--s-lg); flex-wrap: wrap; }
/* Ритм внутренних страниц = ритму главной: разделы внутри одной .section
   разделены xl (64px), а не lg (40px) от утилиты .mt-lg. */
.section-head:not(:first-child) { margin-top: var(--s-xl); }

/* По умолчанию — тонкий разделитель */
.section-head::after {
  content: ""; flex: 1; min-width: 60px; height: 1px;
  background: var(--c-line);
}
/* Фирменные «спид-лайны» из логотипа — по модификатору, не более
   одного-двух на экран (DESIGN.md → Do's and Don'ts) */
.section-head--accent::after {
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--c-primary) 0 18px, transparent 18px 26px,
      var(--c-red) 26px 38px, transparent 38px 50px);
  background-size: 100% 3px;
  background-position: 0 2.5px;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

/* --- Карточки --- */
.grid { display: grid; gap: var(--s-sm); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Единый рецепт поверхности-карточки: фон, рамка, радиус, отступ.
   Тень и подъём — только у кликабельных карточек (.card--link, a.card,
   .report-list-card); DESIGN.md: «one soft shadow token for raised cards». */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--card-pad);
  transition: transform var(--lift-dur) ease, box-shadow var(--lift-dur) ease, border-color var(--lift-dur) ease;
}
a.card { display: block; } /* карточка-ссылка «Дневника» в .v-stack — иначе строчная и рвётся */
a.card, .card--link { box-shadow: var(--shadow); text-decoration: none; color: inherit; }
a.card:hover, a.card:focus-visible,
.card--link:hover, .card--link:focus-visible {
  transform: translateY(var(--lift)); box-shadow: var(--shadow-hover);
}
/* цели переходов из «Дневника»: не прятать начало блока под липкой шапкой */
#japan-tips, #fipsed-rules, #spectators, #org-info { scroll-margin-top: calc(var(--header-h) + var(--s-md)); }
.card.featured { border-top: 3px solid; border-image: linear-gradient(90deg, var(--c-cz-blue) 33%, #fff 33% 66%, var(--c-red) 66%) 1; }
.card h3 { margin-block: var(--s-xs); }
.card .meta { display: flex; gap: var(--s-xs); align-items: center; flex-wrap: wrap; }
.card time { font-family: var(--f-mono); font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }

/* --- Состав --- */
.person { text-align: center; }
.avatar {
  width: 96px; height: 96px; margin: 0 auto var(--s-sm);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgb(var(--c-primary-rgb) / .14), rgb(var(--c-red-rgb) / .1));
  color: var(--c-primary);
  font: 800 var(--fs-h2) var(--f-head);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-full); }

/* --- Тёмная полоса статистики --- */
.stats-band {
  position: relative; color: #fff;
  background: var(--c-surface-deep) center / cover no-repeat;
}
.stats-band::after { content: ""; position: absolute; inset: 0; background: rgb(var(--c-deep-rgb) / .82); }
.stats-band .container { position: relative; z-index: 1; padding-block: var(--s-xl); }
.stats-band h2 { color: #fff; margin-bottom: var(--s-lg); }
.stat-tile { text-align: center; padding: var(--card-pad); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-md); }
.stat-tile .num { font-size: var(--fs-num); line-height: 1.1; color: #fff; }
.stat-tile .lbl { color: rgba(255, 255, 255, .72); font-size: var(--fs-ui); }

/* --- Расписание --- */
.day { margin-bottom: var(--s-lg); }
.day-head { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.day.competition .day-card { border-left: 3px solid var(--c-primary); background: rgb(var(--c-primary-rgb) / .04); }
.day-card { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.day-card table { width: 100%; border-collapse: collapse; }
.day-card td { padding: var(--s-xs2) var(--s-sm); border-top: 1px solid var(--c-line); }
.day-card tr:first-child td { border-top: 0; }
.day-card .t { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; width: 1%; }
.day-card .v { color: var(--c-ink-soft); font-size: var(--fs-caption); }

/* --- Место проведения --- */
.venue { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-lg); align-items: center; }
@media (max-width: 900px) { .venue { grid-template-columns: 1fr; } }
.venue img { border-radius: var(--r-md); box-shadow: var(--shadow); }
.venue ul { padding-left: 1.2em; }

/* --- Футер --- */
.site-footer { background: var(--c-surface-deep); color: rgba(255, 255, 255, .75); margin-top: var(--s-xl); }
.site-footer .container { padding-block: var(--s-xl); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-lg); }
@media (max-width: 720px) { .site-footer .container { grid-template-columns: 1fr; } }
.site-footer h3 { color: #fff; display: flex; align-items: center; gap: var(--s-xs); }
.footer-badge { width: 88px; margin-bottom: var(--s-sm); }
/* Логотипы в подвале: две полосы подряд — «Партнёры» (круглые знаки FIPSed
   и ČRS) и «Спонсоры». Каждая полоса — подпись-надзаголовок и ряд знаков. */
.site-footer .logos {
  display: flex; flex-direction: column; gap: var(--s-xs);
  padding-block: var(--s-md) var(--s-lg);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.site-footer .logos + .logos { padding-top: 0; border-top: 0; }
.site-footer .logos-title {
  font-family: var(--f-head); font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.site-footer .logos-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-lg); }
.site-footer .logos-row img { height: 52px; width: auto; opacity: .92; }
.site-footer .sponsor {
  display: inline-flex; align-items: center; gap: var(--s-xs2);
  padding: var(--s-xxs) var(--s-xs); border-radius: var(--r-md); min-height: var(--tap-min);
}
.site-footer .sponsor:hover, .site-footer .sponsor:focus-visible { background: rgba(255, 255, 255, .06); }
.site-footer .sponsor:hover img { opacity: 1; }
.site-footer .logos-row .gausse-wordmark { height: 34px; }
/* логотип 6-го ЧМ (v1.82.0): красный знак на тёмном подвале не читается — белая плашка, как у круглых знаков партнёров */
.site-footer .wc-logo { display: inline-flex; align-items: center; padding: var(--s-xxs2) var(--s-xs2); border-radius: var(--r-md); background: var(--c-surface); min-height: var(--tap-min); }
.site-footer .logos-row .wc-logo img { height: 46px; opacity: 1; }
/* он же крупно в шапке «О чемпионате» */
.page-hero .wc-mark { display: block; width: min(260px, 60vw); height: auto; margin: 0 0 var(--s-sm); }
/* Шестерёнка Gausse Holler: зубчатое кольцо крутится, крючок в центре стоит.
   Два слоя — один и тот же квадрат, вырезанный из одного кадра логотипа по
   прозрачному зазору между кольцом и центром, поэтому их центры совпадают.
   Вращение — состояние, как диск плеера, а не вход: длительность своя. */
.gear-logo { position: relative; display: block; width: 52px; height: 52px; flex: none; }
.gear-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gear-logo .gear-ring { animation: gearSpin 14s linear infinite; transform-origin: 50% 50%; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gear-logo .gear-ring { animation: none; } }
.ai-meter { font-size: var(--fs-eyebrow); color: rgba(255, 255, 255, .55); cursor: help; }
.ai-meter .numeric { font-size: var(--fs-eyebrow); color: rgba(255, 255, 255, .8); }
.site-footer .ver { font-family: var(--f-mono); font-size: var(--fs-eyebrow); color: rgba(255,255,255,.6);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; }
.site-footer .ver:hover, .site-footer .ver:focus-visible { color: #fff; }
.whatsnew-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: rgba(255,255,255,.85); text-decoration: underline; }
.whatsnew-btn:hover { color: #fff; }

/* Окно «Что нового» */
.updates-modal { position: fixed; inset: 0; z-index: 120; background: rgba(0,10,24,.6); display: flex; align-items: center; justify-content: center; padding: var(--s-md); }
.upd-card { position: relative; background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-md); box-shadow: var(--shadow-hover); max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; padding: var(--s-lg); }
.upd-card h2 { margin-bottom: var(--s-md); }
/* Зона касания 44×44 без раздувания глифа */
.upd-close {
  position: absolute; top: var(--s-xs); right: var(--s-xs);
  width: var(--icon-btn-lg); height: var(--icon-btn-lg); border-radius: var(--r-full);
  background: none; border: 0; font-size: var(--fs-h2); line-height: 1;
  cursor: pointer; color: var(--c-ink-soft);
}
.upd-close:hover { background: var(--c-surface-soft); color: var(--c-ink); }
.upd-entry { padding: var(--s-sm) 0; border-top: 1px solid var(--c-line); }
.upd-entry:first-of-type { border-top: 0; }
.upd-head { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-xs); }
.upd-head time { font-family: var(--f-mono); font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }
.upd-entry ul { margin: 0; padding-left: 1.2em; }
.upd-entry li { margin: 2px 0; }

/* ============================================================
   Многостраничность: доп. компоненты
   ============================================================ */

/* Утилиты */
.mb-lg { margin-bottom: var(--s-lg); }
.mt-lg { margin-top: var(--s-lg); }
.mt-md { margin-top: var(--s-md); }
.mb-md { margin-bottom: var(--s-md); }
.mt-sm { margin-top: var(--s-sm); }
.small { font-size: var(--fs-caption); }
.container.narrow { max-width: 760px; }
/* Вертикальный ритм списка. Раньше назывался .stack и конфликтовал
   с кнопкой-стопкой галереи ниже по файлу: дневник и админка получали
   центрирование, лишний отступ и курсор-палец. */
.v-stack > * + * { margin-top: var(--s-sm); }
.lead { font-size: var(--fs-lead); line-height: 1.6; }

/* Шапка: правая группа, кнопка-замок */
.header-right { display: flex; align-items: center; gap: var(--s-sm); }
.btn-lock { display: inline-flex; align-items: center; gap: var(--s-xxs2); white-space: nowrap; flex-shrink: 0; }
.btn-lock svg { flex-shrink: 0; }
@media (max-width: 1040px) { .btn-lock span { display: none; } }

/* Бургер-меню */
.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-xxs); background: none; border: 0; cursor: pointer;
  padding: var(--s-xs); margin-left: auto;
  min-width: var(--tap-min); min-height: var(--tap-min);
}
.nav-toggle span { width: 22px; height: 2px; background: var(--c-ink); border-radius: var(--r-sm); }
/* Точка бургера — 1440: русские подписи меню вместе с кнопкой зоны команды и
   выбором языка не помещаются в контейнер 1200px — на 1281–1420px уходили
   за край (горизонтальная прокрутка, замер v1.84.0). Та же точка
   продублирована в core.js (NAV_WIDE). */
@media (max-width: 1440px) {
  .nav-toggle { display: flex; order: 1; }
  .logo { margin-right: auto; }
  /* Высота шапки перестаёт быть жёсткой: при фиксированных 72px раскрытое
     меню вываливалось за пределы её фона и пункты ложились прямо на
     фотографию первого экрана — прочитать их было нельзя. */
  .site-header .container {
    flex-wrap: wrap; gap: var(--s-sm);
    height: auto; min-height: var(--header-h); padding-bottom: var(--s-xs);
  }
  /* Плюс собственный непрозрачный фон у самого меню — на случай, если под
     ним окажется что угодно ещё. */
  .site-header.nav-open .site-nav {
    background: var(--c-surface);
    margin-inline: calc(-1 * var(--s-md));
    padding-inline: var(--s-md);
    box-shadow: 0 12px 24px rgb(var(--c-deep-rgb) / .12);
  }
  .site-nav {
    order: 3; width: 100%; margin: 0;
    flex-direction: column; gap: 0;
    max-height: 70vh; overflow-y: auto; padding-top: var(--s-xs);
  }
  /* Раскладка не анимируется: закрытое меню просто не занимает места
     (из порядка табуляции его вдобавок выключает атрибут inert из core.js),
     открытое появляется сразу. Едут только пункты — opacity и сдвиг. */
  .site-header:not(.nav-open) .site-nav { display: none; }
  .site-nav a { padding: var(--s-xs2) 0; border-bottom: 1px solid var(--c-line); width: 100%; }
  .site-header.nav-open .site-nav a { animation: navItemIn var(--t-fast) var(--e-out) both; }
  .site-header.nav-open .site-nav a:nth-child(2) { animation-delay: 30ms; }
  .site-header.nav-open .site-nav a:nth-child(3) { animation-delay: 60ms; }
  .site-header.nav-open .site-nav a:nth-child(4) { animation-delay: 90ms; }
  .site-header.nav-open .site-nav a:nth-child(5) { animation-delay: 120ms; }
  .site-header.nav-open .site-nav a:nth-child(6) { animation-delay: 150ms; }
  .site-header.nav-open .site-nav a:nth-child(7) { animation-delay: 180ms; }
  .site-header.nav-open .site-nav a:nth-child(8) { animation-delay: 210ms; }
  .site-header.nav-open .site-nav a:nth-child(n+9) { animation-delay: 240ms; }
  .header-right { order: 2; }
}
/* Шаг каскада здесь мельче общего --stagger: пунктов девять, а раскрытие
   меню — отклик на нажатие, оно не имеет права идти дольше полусекунды. */
@keyframes navItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Заголовок страницы (компактный hero) */
.page-hero {
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-lg);
}
.page-hero .eyebrow { margin-bottom: var(--s-xs); }
.page-hero .muted { max-width: 60ch; }

/* Шапка секции: [заголовок] [спид-лайны] [ссылка «все записи»] */
.section-head h2 { order: 1; }
.section-head::after { order: 2; }
.section-link { order: 3; font-weight: 600; font-size: var(--fs-ui); text-decoration: none; white-space: nowrap; }

/* Countdown live */
.cd-live { display: inline-flex; align-items: center; gap: var(--s-xs); font-family: var(--f-head); font-weight: 800; color: #fff; font-size: var(--fs-h3); }
/* Кольцо расходится масштабом псевдоэлемента, а не растущей тенью:
   box-shadow перерисовывался краской каждый кадр, transform/opacity уходят
   в композитор. Циклов четыре, а не бесконечность: пульс, который идёт
   двое суток подряд, перестаёт что-либо выделять. */
.cd-live .pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--c-red); }
.cd-live .pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgb(var(--c-red-rgb) / .6);
  animation: pulse 1.6s var(--e-out) 4 forwards;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .6; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}

/* Фильтры-чипы */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-bottom: var(--s-lg); }
.chip.filter { cursor: pointer; border: 1px solid var(--c-line); background: #fff; }
.chip.filter.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Медиа-полоска в записи дневника */
.media-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xxs); margin-top: var(--s-sm); }
.media-strip img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); }

/* Списки с галочками */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: var(--s-xs) 0 var(--s-xs) 22px; position: relative; border-top: 1px solid var(--c-line); }
.ticks li:first-child { border-top: 0; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.ticks.small li { font-size: var(--fs-ui); }

/* Сетка 2 колонки */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }

/* Страны-участницы */
.nations { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin: var(--s-sm) 0 var(--s-md); }
.nation {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  padding: var(--s-xs) var(--s-sm); background: #fff;
  font-size: var(--fs-ui); font-weight: 600; color: var(--c-ink);
}
.nation img { border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.nation.is-home { border-color: var(--c-primary); background: rgb(var(--c-primary-rgb) / .06); color: var(--c-primary); }
.nation[data-banner] { cursor: pointer; }
.nation[data-banner] { position: relative; overflow: hidden; }
.nation.is-on { border-color: var(--c-primary); background: rgb(var(--c-primary-rgb) / .1); color: var(--c-primary); box-shadow: 0 0 0 2px rgb(var(--c-primary-rgb) / .18); }
/* полоска отсчёта до смены баннера (движение — motion.css) */
.nation[data-banner]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-primary); transform: scaleX(0); transform-origin: left;
}
.nation.is-on::after { transform: none; }
/* Сцена баннера команды: два слоя картинки под перекрёстное растворение
   (движение — motion.css), подпись в нижнем углу */
.nations-stage {
  position: relative; aspect-ratio: 21 / 9; margin: 0 0 var(--s-sm);
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-surface-soft);
}
.ns-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ns-img.is-on { opacity: 1; }
.ns-cap {
  position: absolute; inset: auto 0 0; margin: 0; padding: var(--s-md) var(--s-sm) var(--s-xs);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-sm); flex-wrap: wrap;
  color: #fff; font-size: var(--fs-ui); font-weight: 700;
  background: linear-gradient(transparent, rgb(var(--c-deep-rgb) / .78));
}
.ns-cap small { font-weight: 500; opacity: .85; }
/* Блок «Участнику» на «О чемпионате» (ADR-40) */
.ath { margin: var(--s-lg) 0; scroll-margin-top: calc(var(--header-h) + var(--s-sm)); }
.ath-grid { margin-top: var(--s-md); }
.ath-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-xs) var(--s-sm); margin: 0; }
.ath-facts dt { font-weight: 700; }
.ath-facts dd { margin: 0; }
.ath-day { margin: var(--s-sm) 0 var(--s-xxs); }
.ath-day:first-child { margin-top: 0; }
.ath-sched table.mini td { font-size: var(--fs-ui); vertical-align: top; overflow-wrap: anywhere; }
.ath-sched .ath-v { float: right; margin-left: var(--s-sm); color: var(--c-ink-soft); }
.ath-routes { list-style: none; margin: 0; padding: 0; }
.ath-routes li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); padding: var(--s-xs) 0; border-top: 1px solid var(--c-line); }
.ath-routes li:first-child { border-top: 0; }
.ath-routes .btn { flex: none; }
.ath-tel { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; }
.ath-contact { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ath-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ath-facts dd { margin-bottom: var(--s-xs); }
  .ath-routes li { flex-direction: column; align-items: stretch; }
  .ath-sched .ath-v { float: none; display: block; margin: 0; font-size: var(--fs-caption); } /* место — второй строкой, не прятать */
}
/* официальный баннер сборной: внизу у него имена — подпись наверх */
.nations-stage.is-official .ns-cap {
  inset: 0 0 auto; padding: var(--s-xs) var(--s-sm) var(--s-md);
  background: linear-gradient(rgb(var(--c-deep-rgb) / .78), transparent);
}
.card.info h3 { margin-bottom: var(--s-xs); }
.card.info .eyebrow { margin-bottom: var(--s-sm); }

/* Callout */
.callout {
  display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap;
  background: rgb(var(--c-primary-rgb) / .05); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md); padding: var(--card-pad); margin-bottom: var(--s-lg);
}
.callout.warn { border-left-color: var(--c-gold); background: rgb(var(--c-gold-rgb) / .07); }

/* Пустое состояние */
.empty { text-align: center; padding: var(--s-xl) var(--s-md); color: var(--c-ink-soft); }
.empty-icon { font-size: var(--fs-num); display: block; margin-bottom: var(--s-sm); }

/* Статистика: светлые плитки */
.stat-tile.light { background: var(--c-surface-soft); border: 1px solid var(--c-line); }
.stat-tile.light .num { color: var(--c-primary); }
.stat-tile.light .lbl { color: var(--c-ink-soft); }

/* Таблица результатов */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); margin-bottom: var(--s-lg); }
table.results { width: 100%; border-collapse: collapse; }
table.results th, table.results td { padding: var(--s-xs2) var(--s-sm); text-align: left; border-top: 1px solid var(--c-line); }
table.results thead th { background: var(--c-surface-soft); font: 700 var(--fs-eyebrow) var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
table.results tr.podium td { border-left: 3px solid var(--c-gold); }
table.results tr.czech { font-weight: 700; background: rgb(var(--c-primary-rgb) / .04); }
table.results .rank, table.results .numeric { font-family: var(--f-mono); }
/* Подсветка строки под курсором: колонок пять, и по пути от места к весу
   глаз сбивался на соседнюю строку. Только таблицы результатов — строки
   расписания (.day-card) остаются спокойными. Красим сам <tr>, а не ячейки:
   так вспышка живого обновления (tr.is-updated в motion.css) остаётся
   видна и под курсором — анимация перебивает обычное объявление. */
table.results tbody tr { transition: background-color var(--t-fast) var(--e-std); }
table.results tbody tr:hover { background-color: var(--c-surface-soft); }

/* Числовая ячейка. Класс висит и в .day-card, и в table.results, поэтому
   правило глобальное и стоит ПОСЛЕ table.results (иначе text-align: left
   у одноимённой специфичности перебивал выравнивание вправо). */
.v, td.v, th.v { text-align: right; white-space: nowrap; }

/* Галерея: masonry + lightbox */
.masonry { columns: 3 240px; column-gap: var(--s-sm); }
.masonry-item { position: relative; break-inside: avoid; margin: 0 0 var(--s-sm); padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; display: block; }
.masonry-item::after {
  content: "🔍"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: rgba(1, 12, 28, .35);
  border-radius: var(--r-md); opacity: 0; transition: opacity var(--t-fast) var(--e-std);
}
.masonry-item:hover::after, .masonry-item:focus-visible::after { opacity: 1; }
.masonry-item img { width: 100%; border-radius: var(--r-md); display: block; transition: transform var(--t-fast) var(--e-std); }
.masonry-item:hover img { transform: scale(1.02); }
.gallery-credit { margin-top: var(--s-md); font-size: var(--fs-eyebrow); text-align: right; }
/* ============================================================
   Виниловый проигрыватель (справа снизу) + светомузыка
   ============================================================ */
#vinyl-player { position: fixed; right: var(--s-sm); bottom: var(--s-sm); z-index: 90; }
#vinyl-player .vp-lights {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}
.vp-deck {
  position: relative; z-index: 1;
  width: 250px; padding: var(--s-xs2) var(--s-xs2) var(--s-xs);
  /* без корпуса: элементы парят в воздухе */
  background: none; border: 0; box-shadow: none;
  display: grid;
  grid-template-columns: 30px 128px 1fr;
  grid-template-areas: "side plate arm" "bottom bottom bottom" "title title title";
  gap: var(--s-xxs2) var(--s-xs); align-items: center;
}
/* кнопки по бокам — диджейский пульт */
/* gap = 12px, чтобы зоны касания соседних кнопок (44px) не перекрывались */
.vp-side { grid-area: side; display: flex; flex-direction: column; gap: var(--s-xs2); }
.vp-btn {
  position: relative;
  width: var(--icon-btn); height: var(--icon-btn); border-radius: 50%;
  background: #0a1730; color: #cfd8ea;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.5), 0 1px 2px rgba(255,255,255,.08);
  cursor: pointer; font-size: var(--fs-micro); line-height: 1;
}
/* расширитель зоны касания до 44×44 без изменения вида кнопки */
.vp-btn::after, .map-zoom-ctl button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tap-min); height: var(--tap-min);
  transform: translate(-50%, -50%);
}
.vp-btn:hover { color: #fff; border-color: var(--c-gold); }
.vp-btn:active { transform: translateY(1px); }
/* пластинка */
.vp-plate { grid-area: plate; cursor: pointer; }
.vp-disc {
  position: relative; width: 128px; height: 128px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #111 0 2px, #1c1c1e 2px 4px);
  box-shadow: 0 3px 10px rgba(0,0,0,.6), inset 0 0 0 2px #000;
  display: flex; align-items: center; justify-content: center;
}
.vp-disc img { width: 58%; height: 58%; border-radius: 50%; pointer-events: none; }
.vp-spindle { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #d9dee8; box-shadow: 0 0 3px #000; }
.vp-deck.on .vp-disc { animation: vpSpin 1.9s linear infinite; }
@keyframes vpSpin { to { transform: rotate(360deg); } }
/* тонарм с иглой */
.vp-arm { grid-area: arm; position: relative; height: 128px; cursor: pointer; }
.vp-arm-base {
  position: absolute; top: 6px; right: 8px; width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8edf5, #7a8698 70%);
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.vp-arm-rod {
  position: absolute; top: 15px; right: 17px;
  width: 4px; height: 84px;
  background: linear-gradient(90deg, #d6dbe6, #8b95a6);
  border-radius: 3px;
  transform-origin: top center;
  transform: rotate(-18deg); /* пауза: игла убрана в сторону */
  transition: transform .8s cubic-bezier(.3,.7,.3,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.vp-needle {
  position: absolute; bottom: -9px; left: -5px;
  width: 13px; height: 14px; border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, #c8102e, #7c0a1d);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.vp-deck.on .vp-arm-rod { transform: rotate(42deg); } /* игла головкой над чёрным краем пластинки */
/* низ: прогресс + громкость */
.vp-bottom { grid-area: bottom; display: flex; align-items: center; gap: var(--s-xs); }
.vp-progress { flex: 1; height: 6px; border-radius: var(--r-sm); background: rgb(var(--c-deep-rgb) / .18); cursor: pointer; overflow: hidden; }
.vp-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-gold), #ffdf6b); border-radius: var(--r-sm); }
.vp-vol { width: 64px; accent-color: var(--c-gold); }
.vp-title {
  grid-area: title; font: 700 var(--fs-micro) var(--f-mono); color: var(--c-ink-soft);
  text-shadow: 0 1px 6px rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.vp-title.is-changed { animation: vpTitle var(--t-slow) var(--e-out); }
@keyframes vpTitle { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  #vinyl-player { right: 8px; bottom: 8px; transform: scale(.82); transform-origin: bottom right; }
}
/* На телефоне пульт занимал половину ширины экрана и постоянно висел над
   нижней частью таблиц и контактов. Уменьшаем, устройство не меняем. */
@media (max-width: 480px) {
  #vinyl-player { transform: scale(.58); }
  /* Длинные подписи («Проложить маршрут в Google Maps») не помещались в строку
     и выталкивали страницу за край экрана. На узких кнопка переносится. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-deck.on .vp-disc { animation: none; }
}

/* Карта озера */
.map-wrap { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 8; }
.map-zoom-ctl {
  position: absolute; top: var(--s-xs2); right: var(--s-xs2); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-xs);
  background: rgba(255,255,255,.94); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-xxs2); box-shadow: var(--shadow);
}
.map-zoom-ctl button {
  position: relative;
  width: var(--icon-btn); height: var(--icon-btn); border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: #fff;
  font: 800 var(--fs-h3) var(--f-head); color: var(--c-primary); cursor: pointer; line-height: 1;
}
.map-zoom-ctl button:hover { border-color: var(--c-primary); }
.mz-val { font: 700 var(--fs-micro) var(--f-mono); color: var(--c-ink-soft); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .map-wrap { aspect-ratio: 4 / 3; } }

/* Галерея-стопки (уровень 1) — крупный размер как на главной */
.stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--s-xl) var(--s-lg); padding-top: var(--s-sm); }
.stack { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--s-md); width: 100%; }
.stack-pile { position: relative; width: 90%; max-width: 520px; aspect-ratio: 4 / 3; height: auto; display: block; }
.stack-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); border: 4px solid #fff; box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.2,.7,.2,1); transform-origin: center bottom; }
.stack-layer:nth-child(1) { z-index: 3; transform: rotate(-6deg); }
.stack-layer:nth-child(2) { z-index: 2; transform: rotate(5deg); }
.stack-layer:nth-child(3) { z-index: 1; transform: rotate(-1deg); }
.stack:hover .stack-layer:nth-child(1), .stack:focus-visible .stack-layer:nth-child(1) { transform: rotate(-11deg) translate(-14px, -6px); }
.stack:hover .stack-layer:nth-child(2), .stack:focus-visible .stack-layer:nth-child(2) { transform: rotate(10deg) translate(14px, -3px); }
.stack:hover .stack-layer:nth-child(3), .stack:focus-visible .stack-layer:nth-child(3) { transform: rotate(0deg) translateY(2px); }
.stack-label { font: 800 var(--fs-body) var(--f-head); color: var(--c-ink); }
.stack-label b { font-family: var(--f-mono); color: var(--c-primary); font-size: var(--fs-eyebrow); margin-left: var(--s-xxs); }
/* Компактная встраиваемая стопка (в карточках) */
.stacks--embed { display: flex; padding-top: var(--s-xxs2); gap: 0; }
.stacks--embed .stack { gap: var(--s-sm); width: auto; }
.stacks--embed .stack-pile { width: 150px; height: 110px; aspect-ratio: auto; max-width: none; }
.stacks--embed .stack-label { font-size: var(--fs-caption); }
/* Крупная стопка вместо фото в секции «Место проведения» (= дефолтный размер) */
.venue-stack .stacks { display: block; padding-top: 0; }

/* Разворот альбома ПОВЕРХ страницы с затемнением фона (уровень 2) */
.album-view {
  position: fixed; inset: 0; z-index: 110;
  /* фон РАЗМЫВАЕТСЯ; тёмная вуаль лёгкая — только для контраста белых подписей */
  background: rgba(2, 14, 32, .66);
  /* радиус умеренный: размытие на весь экран пересчитывается покадрово
     во время проявления слоя — большие радиусы дают просадку кадров */
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-lg) var(--s-md) var(--s-xl);
  opacity: 0; transform: scale(.985);
  transition: opacity .42s var(--e-out), transform .42s var(--e-out);
}
/* деградация: без поддержки backdrop-filter — плотное затемнение, как раньше */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .album-view { background: rgba(2, 14, 32, .94); }
}
/* на телефонах размытие дешевле держать мельче */
@media (max-width: 640px) {
  .album-view {
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    background: rgba(2, 14, 32, .66);
  }
}
.album-view .av-bar h2 { color: #fff; }
.album-view .av-close { color: #fff; border-color: rgba(255,255,255,.35); }
.album-view .av-close:hover { color: var(--c-gold); border-color: var(--c-gold); }
.album-view .gallery-credit, .album-view .gallery-credit a { color: rgba(255,255,255,.8); }
.album-view.open { opacity: 1; transform: none; }
.av-bar { display: flex; align-items: center; gap: var(--s-md); margin: 0 auto var(--s-lg); max-width: 1200px; }
.av-bar h2 { margin: 0; }
.av-close { background: none; border: 1px solid var(--c-line); border-radius: var(--r-full); width: var(--icon-btn-lg); height: var(--icon-btn-lg); cursor: pointer; font-size: var(--fs-h3); color: var(--c-ink); flex-shrink: 0; }
.av-close:hover { border-color: var(--c-primary); color: var(--c-primary); }
.album-view .masonry, .album-view .gallery-credit { max-width: 1200px; margin-inline: auto; }
/* Каскад раскрытия: фото выстраиваются по порядку, одно за другим.
   На transition (а не keyframes) — чтобы закрытие шло обратной волной.
   --n — порядковый номер фото, --rn — он же в обратную сторону. */
.album-view .masonry-item {
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .48s var(--e-out), transform .48s var(--e-out);
}
.album-view.open .masonry-item { opacity: 1; transform: none; transition-delay: calc(var(--n) * .055s); }
.album-view.closing { transition-delay: .12s; }
.album-view.closing .masonry-item {
  opacity: 0; transform: translateY(10px) scale(.97);
  transition-duration: .34s; transition-delay: calc(var(--rn) * .035s);
}
@media (prefers-reduced-motion: reduce) {
  .album-view, .album-view .masonry-item { opacity: 1; transform: none; }
  .album-view.closing, .album-view.closing .masonry-item { opacity: 0; }
}
.lightbox { position: fixed; inset: 0; z-index: 130; background: rgba(0,10,24,.92); display: flex; flex-direction: column; gap: var(--s-sm); align-items: center; justify-content: center; padding: var(--s-md) 0; } /* выше .album-view (110), иначе лупа «не работает» */
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 90vw; max-height: 82vh; border-radius: var(--r-md); }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; font-size: var(--fs-h2); width: var(--icon-btn-lg); height: var(--icon-btn-lg); border-radius: var(--r-full); }
.lb-close { top: var(--s-md); right: var(--s-md); }
.lb-prev { left: var(--s-sm); } .lb-next { right: var(--s-sm); }
.lb-cap { margin: 0; color: rgba(255,255,255,.85); font-size: var(--fs-ui); }
@media (max-width: 560px) { .lb-prev, .lb-next { display: none; } }
/* Рамка снимка в лупе: на неё ложится хокку. Высота фото уступает место
   подписи и строке атрибуции под ним. */
.lb-frame { position: relative; margin: 0; line-height: 0; border-radius: var(--r-md); overflow: hidden; max-width: 90vw; }
.lightbox .lb-frame img { display: block; max-height: 76vh; border-radius: 0; }
.lb-meta { display: grid; gap: var(--s-xxs); justify-items: center; text-align: center; max-width: min(900px, 90vw); }
/* Атрибуция свободной лицензии: видно, но тихо */
.lb-credit { margin: 0; font-size: var(--fs-eyebrow); color: rgba(255,255,255,.6); line-height: 1.45; }
.lb-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 2px; }
.lb-credit a:hover { color: var(--c-gold); text-decoration-color: currentColor; }

/* Хокку на снимке. Перевод — внизу слева на мягком затемнении, курсив,
   как хокку-вступление (.haiku); японский оригинал — столбцом сверху
   справа (татэгаки). Строки проявляются по очереди, как в .hk-line. */
.lb-hk, .lb-hk-ja { position: absolute; margin: 0; line-height: 1.6; color: #fff; text-shadow: 0 1px 2px rgb(var(--c-deep-rgb) / .9), 0 0 18px rgb(var(--c-deep-rgb) / .6); pointer-events: none; }
.lb-hk[hidden], .lb-hk-ja[hidden] { display: none; }
.lb-hk {
  left: 0; right: 0; bottom: 0;
  padding: var(--s-xl) var(--s-md) var(--s-sm);
  background: linear-gradient(to top, rgb(var(--c-deep-rgb) / .72), rgb(var(--c-deep-rgb) / .35) 55%, transparent);
  display: grid; gap: 2px; justify-items: start;
}
.lb-hk-line { display: block; opacity: 0; filter: blur(6px); transform: translateY(8px); }
.lb-hk .lb-hk-line { font: italic 400 var(--fs-lead) var(--f-body); }
.lb-hk-ja {
  top: 0; right: 0; padding: var(--s-sm) var(--s-sm) var(--s-md) var(--s-md);
  /* мягкая тень под столбцом — оригинал читается и на светлом небе */
  background: radial-gradient(closest-side, rgb(var(--c-deep-rgb) / .4), transparent);
  writing-mode: vertical-rl; font-family: "Noto Sans JP", var(--f-body);
  font-size: var(--fs-ui); letter-spacing: .12em; line-height: 1.9;
  color: rgba(255,255,255,.92);
}
.lightbox.hk-in .lb-hk-line {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity var(--t-slow) ease, filter var(--t-slow) ease, transform var(--t-slow) var(--e-out);
  transition-delay: calc(.15s + var(--i) * var(--hk-step));
}
.lightbox.hk-in .lb-hk-ja .lb-hk-line { transition-delay: calc(.15s + (var(--i) + 3) * var(--hk-step)); opacity: .9; }
@media (max-width: 640px) {
  .lb-hk { padding: var(--s-lg) var(--s-xs2) var(--s-xs); }
  .lb-hk .lb-hk-line { font-size: var(--fs-caption); }
  .lb-hk-ja { font-size: var(--fs-eyebrow); padding: var(--s-xs) var(--s-xs) var(--s-sm) var(--s-sm); }
}
/* Хокку на плитке раскрытого альбома: три строки по низу снимка */
.mi-hk {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-lg) var(--s-xs2) var(--s-xs);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(to top, rgb(var(--c-deep-rgb) / .7), transparent);
  color: #fff; text-align: left; pointer-events: none;
  font: italic 400 var(--fs-caption)/1.45 var(--f-body);
  text-shadow: 0 1px 2px rgb(var(--c-deep-rgb) / .8);
  display: grid; transition: opacity var(--t-fast) var(--e-std);
}
.mi-hk--alt { font-style: normal; font-weight: 500; }
.masonry-item:hover .mi-hk, .masonry-item:focus-visible .mi-hk { opacity: 0; } /* при наведении — лупа */
@media (prefers-reduced-motion: reduce) {
  .lb-hk-line, .lightbox.hk-in .lb-hk-line { opacity: 1; filter: none; transform: none; transition: none; }
}

/* Зона команды */
.btn.is-off { opacity: .55; cursor: not-allowed; }
.tz-owner { margin-left: var(--s-xxs); vertical-align: middle; }
.tz-form { margin-top: var(--s-xs); border: 1px dashed var(--c-line); border-radius: var(--r-sm); padding: var(--s-xs) var(--s-xs2); }
.tz-form summary { cursor: pointer; font-weight: 600; color: var(--c-primary); font-size: var(--fs-ui); }
.tz-form form { margin-top: var(--s-sm); display: grid; gap: var(--s-xxs); }
.tz-form .field { margin-bottom: var(--s-xxs); }
.tz-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xs); }
@media (max-width: 480px) { .tz-form-row { grid-template-columns: 1fr; } }
.tz-hp { position: absolute; left: -9999px; }
.tz-open { margin: var(--s-xs) 0 0; padding-left: 1.1em; color: var(--c-ink-soft); font-size: var(--fs-ui); display: grid; gap: var(--s-xxs); }
.tz-gate { display: flex; justify-content: center; padding-block: var(--s-lg); }
.lock-card { max-width: 420px; width: 100%; text-align: center; }
.lock-badge { width: 64px; height: 64px; margin: 0 auto var(--s-sm); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(var(--c-primary-rgb) / .1); color: var(--c-primary); }
.field { display: block; text-align: left; margin-bottom: var(--s-sm); }
.field > span { display: block; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--c-ink-soft); margin-bottom: var(--s-xxs); }
.field input, .field select, .field textarea { width: 100%; padding: var(--s-xs2); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-ui); }
.field.check { display: flex; align-items: center; gap: var(--s-xs); }
.field.check input { width: auto; }
.err { color: var(--c-red); font-size: var(--fs-caption); margin: 0 0 var(--s-sm); }
.tz-note { font-size: var(--fs-eyebrow); margin-top: var(--s-md); }
.tz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-md); margin-bottom: var(--s-md); flex-wrap: wrap; }
/* Быстрая навигация зоны команды (ADR-39). Без лент, которые листаются
   вбок: вверху — сетка всех кнопок с переносом; когда она ушла под шапку,
   сверху выезжает строка «☰ Разделы · текущий» (.tz-jump, фиксированная,
   под шапкой: --tz-top меряет JS) с теми же кнопками в раскрывающемся меню. */
.tz-nav { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-bottom: var(--s-md); }
.tz-nav-btn {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: var(--s-xxs) var(--s-sm); border-radius: var(--r-full);
  border: 1px solid var(--c-line); background: var(--c-surface);
  font: 600 var(--fs-caption) var(--f-body); color: var(--c-ink-soft);
  text-decoration: none; white-space: nowrap;
}
.tz-nav-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tz-nav-btn.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.tz-nav-btn[hidden] { display: none; }
.tz-jump {
  position: fixed; left: 0; right: 0; top: var(--tz-top, var(--header-h)); z-index: 45;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  transform: translateY(-110%); visibility: hidden;
  transition: transform var(--t-fast) var(--e-out), visibility 0s linear var(--t-fast);
}
.tz-jump.is-shown { transform: none; visibility: visible; transition: transform var(--t-fast) var(--e-out); }
.tz-jump-btn {
  display: flex; align-items: center; gap: var(--s-xs); width: 100%; min-height: 44px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 700 var(--fs-caption) var(--f-body); color: var(--c-ink); text-align: left;
}
.tz-jump-cur { font-weight: 600; color: var(--c-primary); }
.tz-jump-cur:not(:empty)::before { content: "·"; margin-right: var(--s-xs); color: var(--c-ink-soft); }
.tz-jump-btn[aria-expanded="true"] { color: var(--c-primary); }
.tz-jump-menu {
  display: flex; flex-wrap: wrap; gap: var(--s-xs); padding: 0 0 var(--s-sm);
  max-height: calc(100vh - var(--tz-top, var(--header-h)) - var(--tz-jump-h, 44px) - var(--s-md)); overflow-y: auto;
}
.tz-jump-menu[hidden] { display: none; }
.tz-grid > .card { scroll-margin-top: calc(var(--tz-top, var(--header-h)) + var(--tz-jump-h, 44px) + var(--s-sm)); }
/* фокус переходит в карточку вслед за прыжком (для клавиатуры и диктора); рамка не нужна — карточка не кнопка */
.tz-grid > .card[tabindex="-1"]:focus { outline: none; }
@media (max-width: 760px) { .tz-nav-btn { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .tz-jump, .tz-jump.is-shown { transition: none; } }
.plans { display: flex; gap: var(--s-sm); flex-wrap: wrap; margin: var(--s-sm) 0; }
.plan { flex: 1; min-width: 160px; background: var(--c-surface-soft); border-radius: var(--r-md); padding: var(--card-pad-tight); }
.plan p { margin: var(--s-xxs2) 0 0; }
table.mini { width: 100%; border-collapse: collapse; }
table.mini td { padding: var(--s-xs) 0; border-top: 1px solid var(--c-line); }
table.mini td.t { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; padding-right: var(--s-sm); }
/* время под датой в «Важно быть» (v1.81.0): каждый отрезок « · » — своей строкой, чтобы на телефоне не распирать таблицу */
table.mini td.t .tz-mtime { display: inline-block; font-size: var(--fs-caption); color: var(--c-primary); line-height: 1.35; }
table.mini.tz-mand td { vertical-align: top; overflow-wrap: anywhere; } /* 320px: длинные строки дня не распирают таблицу */

/* ============================================================
   Админ-панель
   ============================================================ */
body.admin { background: var(--c-surface-soft); }
.admin-bar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: var(--s-lg); padding: 0 var(--s-md); height: 60px; }
.admin-bar .logo img { height: 34px; }
.admin-bar .logo b { color: var(--c-primary); border-left: 2px solid var(--c-line); padding-left: var(--s-sm); font-family: var(--f-head); }
#admin-tabs { display: flex; gap: var(--s-xs); }
#admin-tabs button { font: 600 var(--fs-ui) var(--f-body); background: none; border: 0; cursor: pointer; padding: var(--s-xs) var(--s-sm); border-radius: var(--r-full); color: var(--c-ink-soft); }
#admin-tabs button.on { background: var(--c-primary); color: #fff; }
.admin-main { padding-block: var(--s-lg); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); align-items: start; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-grid .row { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.admin-grid fieldset { border: 1px solid var(--c-line); border-radius: var(--r-sm); margin: 0 0 var(--s-sm); padding: var(--s-sm); }
.admin-grid legend { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--c-primary); padding: 0 var(--s-xxs2); }
.admin-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.mini-entry { display: flex; justify-content: space-between; align-items: center; gap: var(--s-sm); padding: var(--s-sm); }
.link-del { background: none; border: 0; color: var(--c-red); cursor: pointer; font-size: var(--fs-eyebrow); }
.prose { line-height: 1.7; }
.prose code { background: var(--c-surface-soft); padding: 2px var(--s-xxs2); border-radius: var(--r-sm); font-size: var(--fs-caption); }
.prose ol { padding-left: 1.4em; }
.toast { position: fixed; bottom: var(--s-md); left: 50%; transform: translateX(-50%); background: var(--c-ink); color: #fff; padding: var(--s-xs2) var(--s-md); border-radius: var(--r-full); font-size: var(--fs-ui); box-shadow: var(--shadow-hover); z-index: 200; }
.site-footer a { color: rgba(255, 255, 255, .85); }
.site-footer .sun { width: 12px; height: 12px; border-radius: 50%; background: var(--c-jp-red); display: inline-block; }
.site-footer nav { display: grid; gap: var(--s-xxs); }

/* Карточки репортажа (kind: photo | video | facts | quote | album | text) */
.report-demo-note { max-width: 60ch; margin: var(--s-sm) auto 0; color: var(--c-ink-soft); font-size: var(--fs-caption); }
.report-card { margin-bottom: var(--s-lg); }
.report-card h3 { margin-bottom: var(--s-xs); }
.report-card figure { margin: 0 0 var(--s-sm); }
.report-card figure img,
.report-card figure video { width: 100%; height: auto; display: block; border-radius: var(--r-md); background: #000; }
.report-card figcaption { margin-top: var(--s-xs); }
.report-card.is-quote blockquote {
  margin: 0; padding-left: var(--s-md);
  border-left: 3px solid var(--c-primary);
  font-size: var(--fs-lead); line-height: 1.5;
}
.report-card.is-facts .stats-row { display: grid; gap: var(--s-sm); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-block: var(--s-sm); }

/* Документация системы (docs.html): книга + печать в PDF */
.doc-cover { padding-block: var(--s-lg); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-lg); }
.doc-toc ol { padding-left: 1.4em; line-height: 1.9; }
.doc-toc .small { margin-left: var(--s-xs); }
.doc-maps { margin-block: var(--s-lg); }
.doc-figure { margin: 0 0 var(--s-lg); }
.doc-figure svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.doc-figure figcaption { margin-top: var(--s-xs); }
.doc-chapter { padding-top: var(--s-lg); border-top: 1px solid var(--c-line); margin-top: var(--s-lg); }
.doc-chapter-title { font-size: var(--fs-h1); margin-bottom: var(--s-sm); }
/* размеры берутся от глобальных h2/h3 — отдельных ступеней больше нет */
.doc-chapter .prose h2 { margin-top: var(--s-md); }
.doc-chapter .prose h3 { margin-top: var(--s-sm); }
.doc-chapter .prose pre { background: var(--c-surface-soft); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: var(--s-sm); overflow-x: auto; font-size: var(--fs-eyebrow); }
.doc-chapter .prose blockquote { margin: var(--s-sm) 0; padding-left: var(--s-sm); border-left: 3px solid var(--c-line); color: var(--c-ink-soft); }
.doc-chapter .prose ul, .doc-chapter .prose ol { padding-left: 1.4em; }

@media print {
  .no-print, #vinyl-player, .smoke-news, .map-zoom-ctl,
  .site-header, .site-footer, .updates-modal, .album-view, .lightbox { display: none !important; }
  .hero .display, .stat-tile .num, .stat-tile .lbl, .stats-band { color: #000 !important; }
  .table-wrap { overflow: visible !important; }
  body { background: #fff; }
  .section { padding: 0; }
  .container { max-width: none; padding: 0; }
  .doc-cover { break-after: page; page-break-after: always; }
  .doc-chapter { break-before: page; page-break-before: always; border-top: 0; }
  .doc-figure, .table-wrap, pre { break-inside: avoid; page-break-inside: avoid; }
  a { color: inherit; text-decoration: underline; }
  @page { margin: 18mm 14mm; }
}

/* Репортажи: список материалов и разворот одного */
.report-note { max-width: 60ch; margin-bottom: var(--s-md); }
.report-grid { display: grid; gap: var(--s-md); }
.report-list-card {
  display: grid; grid-template-columns: 168px 1fr; align-items: stretch;
  overflow: hidden; text-decoration: none; color: inherit;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: transform var(--lift-dur) ease, box-shadow var(--lift-dur) ease, border-color var(--lift-dur) ease;
}
.report-list-card:hover, .report-list-card:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); }
.rl-cover { overflow: hidden; background: var(--c-surface-soft); min-height: 120px; }
.rl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-fast) var(--e-out); }
.report-list-card:hover .rl-cover img { transform: scale(1.04); }
.rl-body { padding: var(--card-pad-tight) var(--card-pad); display: flex; flex-direction: column; gap: var(--s-xxs); }
.rl-body h3 {
  font-size: var(--fs-h3); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Лид в списке — не больше трёх строк: иначе строка списка вырастала
   в полноэкранную плашку и список переставал читаться списком. */
.rl-body > .muted {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-ui); line-height: 1.5;
}
.rl-meta { display: flex; align-items: center; gap: var(--s-xs); margin-top: auto; padding-top: var(--s-xs); }
.rl-go { margin-left: auto; color: var(--c-primary); font-weight: 600; }
.report-list-card:hover .rl-go { text-decoration: underline; }

.report-back { margin-bottom: var(--s-md); }
.report-full-head { margin-bottom: var(--s-md); }
.report-full-head .h1 { margin-block: var(--s-xs); }
.report-full-cover { margin: 0 0 var(--s-lg); }
.report-full-cover img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.report-sources { border-top: 1px solid var(--c-line); padding-top: var(--s-md); margin-top: var(--s-lg); }

/* Переход список ↔ разворот */
@keyframes reportEnter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.view-enter { animation: reportEnter .42s var(--e-out) both; }
.view-enter > * { animation: reportEnter .5s var(--e-out) both; animation-delay: .06s; }

@media (prefers-reduced-motion: reduce) {
  .view-enter, .view-enter > *, .report-list-card, .rl-cover img { animation: none; transition: none; }
}

/* Хокку-вступление: курсивная цитата справа, на полотне страницы */
.haiku {
  margin: 0 0 var(--s-lg); margin-left: auto;
  max-width: min(30rem, 100%); text-align: right;
}
.hk-lines { margin: 0; border: 0; padding: 0; display: grid; gap: 4px; }
.hk-line {
  display: block; font-style: italic;
  font-family: var(--f-body); font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  line-height: 1.75; color: var(--c-ink-soft);
  opacity: 0; filter: blur(6px); transform: translateY(10px);
}
.hk-line:first-child::before { content: "«"; color: var(--c-line); }
.hk-line:last-child::after { content: "»"; color: var(--c-line); }
.haiku.is-in .hk-line {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .9s ease, filter .9s ease, transform .9s var(--e-out);
  transition-delay: calc(var(--i) * 900ms);
}
.haiku figcaption { margin-top: var(--s-xs); }
.hk-original {
  font-family: "Noto Sans JP", var(--f-body); font-style: normal;
  color: var(--c-ink-soft); font-size: .9rem;
  opacity: 0; transition: opacity .9s ease;
}
.hk-kigo {
  font-size: .8125rem; color: var(--c-ink-soft); letter-spacing: .02em;
  opacity: 0; transition: opacity .9s ease .15s;
}
.haiku.is-complete .hk-original, .haiku.is-complete .hk-kigo { opacity: .85; }

@media (max-width: 640px) {
  .haiku { max-width: 100%; text-align: left; }
  .hk-line:first-child::before, .hk-line:last-child::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-line { opacity: 1; filter: none; transform: none; transition: none; }
  .hk-original, .hk-kigo { opacity: .85; transition: none; }
}

/* Турниры на водоёме до чемпионата */
.tournaments { display: grid; gap: var(--s-sm); }
.tournament {
  padding: var(--card-pad); background: var(--c-surface);
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md);
}
.tournament h3 { font-size: var(--fs-h3); margin-block: var(--s-xxs); }
.t-when { font-family: var(--f-mono); font-size: var(--fs-eyebrow); color: var(--c-primary); }
.tournament.is-past { border-left-color: var(--c-line); }
.tournament.is-past .t-when { color: var(--c-ink-soft); }
/* Афиша турнира: на узком экране под текстом, от 720px — колонка справа,
   в которую она всплывает при наведении (движение — motion.css) */
.tournament.has-poster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-xs) var(--s-md); }
.t-poster { margin: var(--s-xs) 0 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-line); max-width: 320px; }
.t-poster img { display: block; width: 100%; height: auto; }
@media (min-width: 720px) {
  .tournament.has-poster { grid-template-columns: minmax(0, 1fr) 220px; align-items: center; }
  .t-poster { grid-column: 2; grid-row: 1 / span 3; margin: 0; max-width: none; }
}

/* Отметка времени в книге документации */
.doc-stamp { margin-top: var(--s-xs); }
.doc-selfnote { max-width: 60ch; }
.report-card.is-table .table-wrap { margin-block: var(--s-sm); }

/* Счётчик записей в чипе фильтра дневника */
.chip .chip-count { margin-left: .35em; opacity: .6; font-size: .85em; }

/* Оговорки под разделами */
.nations-note { margin-top: var(--s-sm); }
.gallery-note { margin-bottom: var(--s-md); }
.team-note { margin-top: var(--s-lg); }
.stats-band .stats-note { margin-top: var(--s-sm); color: rgba(255, 255, 255, .72); font-size: var(--fs-caption); }
.stats-band .stats-note a { color: #fff; text-decoration: underline; }

/* Плеер над тёмным футером: корпуса у него нет, поэтому переключаем сам текст */
#vinyl-player.on-dark .vp-title { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgb(var(--c-deep-rgb) / .9); }
#vinyl-player.on-dark .vp-progress { background: rgba(255, 255, 255, .22); }

/* Зона команды — маршруты, точки, памятка, что посмотреть (v1.19.0) */
.grid-2 .span-2 { grid-column: 1 / -1; }
/* Зона команды: карточки живут своей высотой. Иначе сосед по ряду тянется до
   высоты самой длинной (внутреннее расписание на 32 строки) и рядом с ним
   зияет пустая карточка. */
.tz-grid { align-items: start; }
/* Расписание во всю ширину раскладывается в две колонки: 32 строки одной
   лентой заставляют листать, а два столбца читаются с одного экрана.
   Колонки настоящие, а не CSS-многоколоночные: таблицу ими не разрезать. */
.tz-sched { display: grid; gap: 0 var(--s-lg); align-items: start; }
@media (min-width: 900px) { .tz-sched { grid-template-columns: 1fr 1fr; } }
.route-list { display: grid; gap: var(--s-xs); }
.route-btn { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-sm); row-gap: var(--s-xxs); align-items: center; padding: var(--s-xs2) var(--s-sm); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; color: var(--c-ink); background: var(--c-surface-soft); min-height: var(--tap-min); }
.route-btn:hover { box-shadow: var(--shadow); border-color: var(--c-primary); }
.route-btn-main { display: flex; gap: var(--s-xs); align-items: center; flex-wrap: wrap; }
.route-btn .small { grid-column: 1; }
.route-btn-go { grid-column: 2; grid-row: 1 / span 2; font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); white-space: nowrap; }
.place-list { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.place-btn { display: inline-flex; align-items: center; gap: var(--s-xs); padding: var(--s-xs) var(--s-sm); border-radius: var(--r-full); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); text-decoration: none; font: 600 var(--fs-ui) var(--f-body); min-height: var(--tap-min); }
.place-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.place-ico { width: 20px; height: 20px; color: var(--c-primary); display: inline-flex; flex: none; }
.place-ico svg { width: 100%; height: 100%; }
.tips { display: grid; }
.tip { border-top: 1px solid var(--c-line); }
.tip:first-child { border-top: 0; }
.tip summary { cursor: pointer; padding: var(--s-xs) 0; font-weight: 700; list-style: none; display: flex; align-items: center; gap: var(--s-sm); min-height: var(--tap-min); }
.tip summary::-webkit-details-marker { display: none; }
.tip summary::after { content: "+"; margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-lead); color: var(--c-primary); flex: none; }
.tip[open] summary::after { content: "−"; }
.tip p { margin: 0 0 var(--s-sm); color: var(--c-ink-soft); font-size: var(--fs-ui); line-height: 1.6; }
/* Снимок зон с воздуха на «Озере» (ADR-30, пересмотр 14.10): статичная карта с метками */
.lake-map { margin: 0 0 var(--s-md); }
.lake-map-stage { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--c-primary-deep); box-shadow: var(--shadow); }
.lake-map-stage img { display: block; width: 100%; height: auto; }
.lm-mark, .lm-num { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-mono); font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.lm-mark { padding: .32em .5em; border-radius: .4em; background: rgba(247, 249, 253, .94); color: var(--c-ink); font-size: clamp(.7rem, 1.7vw, .95rem); letter-spacing: .06em; }
.lm-mark.is-champ { background: var(--c-red); color: #fff; outline: 2px solid #fff; }
.lm-num { width: 2em; height: 2em; display: grid; place-items: center; border-radius: 50%; background: var(--c-ink); color: #fff; border: 2px solid #fff; font-size: clamp(.7rem, 1.5vw, .9rem); }
.lake-map figcaption { margin-top: var(--s-xs); }
.lake-map figcaption p { margin: 0 0 var(--s-xs); font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lake-map-legend { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-bottom: var(--s-xs); }
.lake-map-legend .chip b { font-family: var(--f-mono); margin-right: .35em; }
.lake-map-pois { margin: 0 0 var(--s-xs); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); font-size: var(--fs-ui); }
.lake-map-pois b { font-family: var(--f-mono); color: var(--c-ink); }
.lake-map-layout { margin: var(--s-sm) 0 var(--s-xs); padding: var(--s-sm) var(--s-md); border-left: 3px solid var(--c-red); background: var(--c-surface-soft); border-radius: 0 var(--r-md) var(--r-md) 0; }
.lake-map-layout h3 { margin: 0 0 var(--s-xs); font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-soft); }
.lake-map-layout ul { margin: 0; }
.lake-map-layout li { font-size: var(--fs-ui); }
/* Облёт озера на рельефе в разделе «Место» главной (ADR-30 пересмотр, ADR-31) */
.flyover { margin: var(--s-lg) 0 0; }
.flyover video, .flyover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--c-primary-deep); box-shadow: var(--shadow); }
.flyover.is-live video { cursor: pointer; }
/* Живой облёт (ADR-35): холст Three.js в той же рамке 16:9, всё управление
   орлом — внутри неё. До готовности сцены — постер ролика. */
.hl {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-md); box-shadow: var(--shadow);
  background: var(--c-primary-deep) center / cover no-repeat; outline: none; --hl-k: 1; touch-action: pan-y;
}
.hl.is-ctl, .hl.is-full, .hl:fullscreen { touch-action: none; } /* в управлении и во весь экран жесты — сцене, а не странице */
.hl-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--t-slow) var(--e-out); }
.hl.is-ready .hl-gl { opacity: 1; }
.hl-wait { position: absolute; left: var(--s-sm); bottom: var(--s-sm); margin: 0; padding: var(--s-xxs) var(--s-xs2); border-radius: var(--r-full); background: rgb(var(--c-deep-rgb) / .6); color: #fff; font-size: var(--fs-caption); }
.hl.is-ready .hl-wait { display: none; }
.hl-pins { position: absolute; inset: 0; pointer-events: none; }
.hl-pin {
  position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform;
  display: flex; align-items: center; justify-content: center;
  width: calc(40px * var(--hl-k)); height: calc(40px * var(--hl-k)); border-radius: 50%;
  background: var(--c-surface-soft); color: var(--c-ink); border: calc(3px * var(--hl-k)) solid var(--c-ink);
  font: 600 calc(20px * var(--hl-k)) / 1 var(--f-body, system-ui), sans-serif; box-shadow: 0 8px 18px rgb(var(--c-deep-rgb) / .22);
}
.hl-pin.is-lake { background: var(--c-red); color: #fff; border-color: #fff; width: calc(46px * var(--hl-k)); height: calc(46px * var(--hl-k)); }
/* компас и цифры не мельче 11 px: у компаса свой нижний предел масштаба */
.hl { --hl-kc: max(var(--hl-k), .8); --hl-pad: var(--s-sm); --hl-btn: var(--tap-min); }
.hl-north { position: absolute; right: var(--hl-pad); top: var(--hl-pad); width: calc(48px * var(--hl-kc)); height: calc(48px * var(--hl-kc)); opacity: .9; pointer-events: none; }
.hl-now, .hl-ticker, .hl-status, .hl-hint {
  margin: 0; padding: var(--s-xxs) var(--s-xs2); border-radius: var(--r-full); background: rgb(var(--c-deep-rgb) / .62); color: #fff;
  font-size: var(--fs-caption); font-variant-numeric: tabular-nums; pointer-events: none;
}
.hl-now { position: absolute; left: var(--hl-pad); top: var(--hl-pad); max-width: calc(100% - 3 * var(--hl-pad) - 48px * var(--hl-kc)); }
.hl-now[data-fps]::after { content: " · " attr(data-fps) " fps"; }
/* лента событий: под строкой времени, гаснет через 4 с */
.hl-ticker { position: absolute; left: 50%; top: calc(var(--hl-pad) + 36px); transform: translateX(-50%); max-width: calc(100% - 2 * var(--hl-pad)); background: rgb(var(--c-gold-rgb) / .92); color: var(--c-ink); font-weight: 700; opacity: 0; transition: opacity var(--t-base) var(--e-std); }
.hl-ticker.on { opacity: 1; }
/* рация фрегата (radio.js): последние три реплики слева над нижней панелью, подсказкой, джойстиком и кнопками (--hl-radio-b меряет main.js) и под строкой времени и состоянием (--hl-radio-t); не влезает — старые строки срезаются сверху; старые бледнеют, после тишины панель гаснет */
.hl-radio { position: absolute; left: var(--hl-pad); bottom: calc(var(--hl-radio-b, calc(var(--hl-pad) * 2 + var(--hl-btn))) + var(--hl-pad)); width: min(38%, 360px); max-height: calc(100% - var(--hl-radio-b, 0px) - var(--hl-radio-t, 0px) - 2 * var(--hl-pad)); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s-xxs); pointer-events: none; opacity: 0; transition: opacity var(--t-base) var(--e-std); }
.hl-radio.on { opacity: 1; }
.hl-radio[hidden] { display: none; }
.hl-radio p { flex: none; margin: 0; padding: var(--s-xxs) var(--s-xs2); border-left: 3px solid var(--c-gold); border-radius: var(--r-md); background: rgb(var(--c-deep-rgb) / .72); color: #fff; font-size: var(--fs-caption); line-height: 1.3; transition: opacity var(--t-base) var(--e-std); }
.hl-radio p.old { opacity: .55; }
.hl-radio b { font-weight: 700; margin-right: .2em; }
.hl-radio small { display: block; margin-top: 1px; font-size: var(--fs-eyebrow); color: rgb(255 255 255 / .72); } /* перевод английского эфира на язык сайта */
@media (max-width: 640px) { .hl-radio { width: calc(100% - 2 * var(--hl-pad)); } .hl:is(.is-full, .is-native-full) .hl-radio { width: calc(100% - var(--hl-sys-w, 0px) - 3 * var(--hl-pad)); } .hl-radio p.old { display: none; } } /* во весь экран справа столбец кнопок — рация левее него (ревью 25.10: иначе её сжимало в полоску) */ /* телефон: одна реплика; низ — над всем в колонке (--hl-radio-b меряет main.js) */
/* нижняя панель: ползунок скорости облёта и кнопки режимов */
.hl-bar { position: absolute; left: var(--hl-pad); right: var(--hl-pad); bottom: var(--hl-pad); display: flex; align-items: end; justify-content: flex-end; gap: var(--s-xxs2); pointer-events: none; }
.hl-speed { margin-right: auto; pointer-events: auto; display: flex; align-items: center; gap: var(--s-xxs2); min-height: var(--hl-btn); padding: 0 var(--s-xs2); border-radius: var(--r-full); background: rgb(var(--c-deep-rgb) / .62); color: #fff; }
.hl-speed input { width: clamp(70px, 14vw, 160px); accent-color: var(--c-gold); }
/* в управлении ползунок — чувствительность наводки и руля; у свободной камеры и кино его нет */
.hl[data-mode="free"] .hl-speed, .hl[data-mode="cinema"] .hl-speed { visibility: hidden; }
.hl-sys { position: absolute; right: var(--hl-pad); bottom: var(--hl-pad); pointer-events: auto; display: flex; gap: var(--s-xxs2); }
.hl-bar { right: calc(var(--hl-pad) + var(--s-xxs2) + var(--hl-sys-w, 230px)); } /* справа — группа системных кнопок (ширина меряется в main.js) */
.hl-modes { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: end; gap: var(--s-xxs2); }
.hl-mode, .hl-full, .hl-act, .hl-exit, .hl-call {
  min-height: var(--hl-btn); min-width: var(--hl-btn); padding: var(--s-xxs) var(--s-xs2); border: 0; border-radius: var(--r-full);
  background: rgba(255,255,255,.92); color: var(--c-ink); font: 700 var(--fs-caption) var(--f-head); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xxs);
  box-shadow: 0 4px 12px rgb(var(--c-deep-rgb) / .25); white-space: nowrap; touch-action: none;
}
.hl-mode.on { background: var(--c-gold); }
.hl-call.is-busy { opacity: .5; }
.hl-mode:focus-visible, .hl-call:focus-visible, .hl-full:focus-visible, .hl-act:focus-visible, .hl-exit:focus-visible, .hl-speed input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hl-mode span { font-size: 1.15em; }
.hl-hud { position: absolute; inset: 0; pointer-events: none; }
.hl-mode.is-wait { animation: hl-wait 1s ease-in-out infinite alternate; } /* ждём фрегат: кнопка пушки или истребителя пульсирует */
@keyframes hl-wait { from { box-shadow: 0 0 0 0 rgb(255 210 122 / 0); } to { box-shadow: 0 0 0 4px rgb(255 210 122 / .85); } }
@media (prefers-reduced-motion: reduce) { .hl-mode.is-wait { animation: none; box-shadow: 0 0 0 3px rgb(255 210 122 / .85); } }
.hl.is-ctl .hl-ticker { max-width: calc(100% - 2 * (var(--hl-exit-w, 0px) + 2 * var(--hl-pad))); } /* по центру — между краем и «Выйти ✕» */
/* прицел истребителя (v1.75.0): кольцо — куда идут лучи, рамка — цель, на которую они сводятся; позиции — из main.js (placeXh) */
.hl-xh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.hl-xh i, .hl-xh b { position: absolute; left: 0; top: 0; will-change: transform; }
.hl-xh i { width: 40px; height: 40px; border: 2px solid rgba(255, 96, 110, .9); border-radius: 50%; box-shadow: 0 0 6px rgba(255, 60, 80, .6); }
.hl-xh i::before, .hl-xh i::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 96, 110, .9); transform: translate(-50%, -50%); }
.hl-xh i::before { width: 2px; height: 10px; } .hl-xh i::after { width: 10px; height: 2px; }
.hl-xh b { width: 58px; height: 58px; border: 2px dashed rgba(255, 220, 120, .95); border-radius: 4px; animation: hl-lock 0.6s ease-in-out infinite alternate; }
@keyframes hl-lock { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-xh b { animation: none; } }
.hl-exit { position: absolute; right: var(--hl-pad); top: calc(var(--hl-pad) * 2 + 48px * var(--hl-kc)); pointer-events: auto; }
.hl-hint { position: absolute; left: 50%; bottom: calc(var(--hl-pad) * 2 + var(--hl-btn)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--hl-pad)); border-radius: var(--r-md); text-align: center; transition: opacity var(--t-base) var(--e-std); }
.hl-hint.is-gone { opacity: 0; }
.hl-status { position: absolute; left: var(--hl-pad); top: calc(var(--hl-pad) + 36px); }
.hl-status:empty { display: none; }
.hl-acts { position: absolute; right: var(--hl-pad); bottom: calc(var(--hl-pad) * 2 + var(--hl-btn)); display: flex; flex-wrap: wrap; justify-content: end; gap: var(--s-xxs2); max-width: 60%; pointer-events: auto; }
.hl-act.on { background: var(--c-gold); }
/* экранный джойстик (палец) */
.hl-joy { position: absolute; left: var(--hl-pad); bottom: calc(var(--hl-pad) * 2 + var(--hl-btn)); width: 104px; height: 104px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.14); pointer-events: auto; touch-action: none; }
.hl-joy .knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.88); transform: translate(-50%, -50%); }
/* в режимах управления подсказка облёта и метки не нужны; во весь экран — поверх всего, ниже тоста */
.hl.is-full { position: fixed; inset: 0; z-index: 150; aspect-ratio: auto; border-radius: 0; }
html.hl-lock { overflow: hidden; }
.hl:fullscreen { aspect-ratio: auto; border-radius: 0; }
@media (max-width: 640px) {
  .hl { --hl-pad: var(--s-xs); }
  .hl-mode b { display: none; }
  .hl-now, .hl-status { font-size: var(--fs-eyebrow); }
  .hl-hint { font-size: var(--fs-eyebrow); line-height: 1.3; }
  .hl-joy { width: 88px; height: 88px; }
}
@media (max-width: 1000px) { .hl:not(.is-full):not(:fullscreen) .hl-mode b { display: none; } }
.flyover figcaption { margin-top: var(--s-xs); }
.flyover figcaption p { margin: 0 0 var(--s-xs); font-size: var(--fs-ui); color: var(--c-ink-soft); }
.flyover-legend { margin: 0 0 var(--s-xs); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); font-size: var(--fs-ui); }
.flyover-legend b { font-family: var(--f-mono); color: var(--c-ink); }
/* Памятка по Японии на «О чемпионате» (ADR-29): спойлер с пометкой «Важно», золотой кант */
.jt { padding: 0; border-left: 4px solid var(--c-gold); margin-bottom: var(--s-md); }
.jt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-sm) var(--s-md); font-weight: 700; min-height: var(--tap-min); }
.jt > summary::-webkit-details-marker { display: none; }
.jt > summary::after { content: "+"; margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-lead); color: var(--c-primary); flex: none; }
.jt[open] > summary::after { content: "−"; }
.jt-body { padding: 0 var(--s-md) var(--s-sm); }
.jt-title { flex: 1 1 auto; min-width: 0; }
.jt-badge { background: var(--c-red); color: #fff; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; flex: none; }
.jt-strict { color: var(--c-red); font-size: .8em; font-weight: 600; margin-left: calc(-1 * var(--s-xs)); }
.tip.is-alert summary { color: var(--c-red); }
/* карточки приманок Trout King на «Озере» (v1.63.2): рекомендации, а не правило — синяя метка вместо красной */
.tk-lures { border-left-color: var(--c-primary); }
.tk-badge { background: var(--c-primary); }
.about-champ { border-left-color: var(--c-primary); }
.about-champ .jt-badge { text-transform: none; } /* бренд пишется FIPSed */
/* Инфографика этапов Trout King на «Озере» (v1.63.3, по шпаргалке директора):
   день турнира, как играется, шкала блёсен, формат с фазами, воблеры, цвета, зоны, погода.
   Движение — в motion.css (класс .is-on ставится при раскрытии карточки) */
.tkv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-sm); margin: var(--s-sm) 0; }
.tkv-box { min-width: 0; padding: var(--s-sm) var(--s-md); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-soft); }
.tkv-wide { grid-column: 1 / -1; }
.tkv-box > .eyebrow { margin: 0 0 var(--s-xs); }
.tkv-legend { display: flex; flex-wrap: wrap; gap: var(--s-xxs) var(--s-sm); margin: var(--s-xs) 0 0; font-size: var(--fs-caption); color: var(--c-ink-soft); }
.tkv-legend span { display: inline-flex; align-items: center; gap: var(--s-xxs2); }
.tkv-legend .tkv-seg { display: inline-block; width: 14px; height: 10px; flex: none; }
/* фазы и роли: цвета */
.b-micro, .c-micro { background: color-mix(in srgb, var(--c-primary) 8%, #fff); }
.b-pressure, .c-pressure { background: color-mix(in srgb, var(--c-primary) 18%, #fff); }
.b-fresh, .c-fresh { background: color-mix(in srgb, var(--c-primary) 32%, #fff); }
.c-plugs { background: color-mix(in srgb, var(--c-gold) 35%, #fff); }
.r-p1, .r-plug, .r-any { background: var(--c-primary); }
.r-p2 { background: color-mix(in srgb, var(--c-primary) 55%, #fff); }
.r-spot { background: color-mix(in srgb, var(--c-primary) 78%, #fff); }
.r-spoon { background: var(--c-gold); color: var(--c-ink) !important; }
.r-swap { background: color-mix(in srgb, var(--c-ink-soft) 22%, #fff); color: var(--c-ink-soft) !important; }
/* день турнира */
.tkv-day { position: relative; height: 92px; margin: 0 var(--s-xs); }
.tkv-hr { position: absolute; top: 0; transform: translateX(-50%); font: 600 10px var(--f-mono); color: var(--c-ink-soft); }
.tkv-hr::after { content: ""; position: absolute; left: 50%; top: 15px; height: 70px; border-left: 1px solid var(--c-line); }
.tkv-sun { position: absolute; top: 17px; transform: translateX(-50%); font-size: 10px; white-space: nowrap; color: var(--c-ink-soft); }
.tkv-sun.dn { transform: translateX(-100%); }
.tkv-sun::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: var(--c-gold); }
.tkv-sun.dn::before { opacity: .5; }
.tkv-dreg, .tkv-dplay { position: absolute; top: 40px; height: 26px; transform-origin: left; }
.tkv-dreg { background: color-mix(in srgb, var(--c-ink-soft) 30%, #fff); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tkv-dplay { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; }
.tkv-stock { position: absolute; top: 48px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); }
.tkv-bento { position: absolute; top: 32px; height: 42px; border-left: 2px dashed var(--c-red); }
.tkv-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; flex: none; }
.k-reg { background: color-mix(in srgb, var(--c-ink-soft) 30%, #fff); }
.k-bento { width: 0; height: 12px; border-left: 2px dashed var(--c-red); border-radius: 0; }
.k-stock { width: 8px; height: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--c-primary); transform: rotate(45deg); }
/* как играется */
.tkv-hows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-sm); }
.tkv-how { min-width: 0; padding: var(--s-xs) var(--s-sm); border-radius: var(--r-sm); background: var(--c-surface); }
.tkv-how.is-wide { grid-column: 1 / -1; }
.tkv-how > p { margin: var(--s-xs) 0 0; }
.tkv-h { display: flex; align-items: center; gap: var(--s-xs); margin-bottom: var(--s-xs); font-size: var(--fs-ui); }
.tkv-h i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: 11px; font-style: normal; }
.tkv-mt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-xxs) var(--s-xs); align-items: center; }
.tkv-mta { position: relative; height: 14px; }
.tkv-mta i { position: absolute; transform: translateX(-50%); font: 600 11px var(--f-mono); font-style: normal; color: var(--c-ink-soft); }
.tkv-mta i:first-child { transform: none; }
.tkv-mta i:last-child { transform: translateX(-100%); }
.tkv-mtl { font-size: var(--fs-caption); font-weight: 700; }
.tkv-mtl.is-dim { color: var(--c-ink-soft); }
.tkv-mt .tkv-fbar { height: 30px; }
.tkv-mt .tkv-seg { padding: 0 var(--s-xxs); font-size: 11px; }
.tkv-seg b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tkv-seg .ss { display: none; }
.tkv-fbar.is-dim .tkv-seg:not(.r-swap) { background: color-mix(in srgb, var(--c-ink-soft) 55%, #fff); }
.tkv-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.tkv-tab th { padding: var(--s-xxs) var(--s-xxs2); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--c-ink-soft); text-align: center; }
.tkv-tab td { padding: 5px var(--s-xxs2); border-top: 1px solid var(--c-line); text-align: center; }
.tkv-tab td small { color: var(--c-ink-soft); }
.tkv-tab .tkv-th { font-weight: 700; text-align: left; white-space: nowrap; }
.tkv-tab td.is-hl { background: color-mix(in srgb, var(--c-primary) 14%, #fff); color: var(--c-primary); font-weight: 800; }
.tkv-flow { display: flex; align-items: center; gap: var(--s-sm); }
.tkv-lanes { display: grid; flex: 1; gap: var(--s-sm); min-width: 0; }
.tkv-lane { display: flex; align-items: center; gap: var(--s-xxs2); min-width: 0; }
.tkv-lab { flex: none; width: 5.6em; font-size: var(--fs-eyebrow); font-weight: 700; font-style: normal; color: var(--c-ink-soft); }
.tkv-fb { flex: 1 1 0; min-width: 0; padding: var(--s-xxs2) var(--s-xs); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-primary) 14%, #fff); text-align: center; }
.tkv-lane.is-dim .tkv-fb:not(.is-end) { background: var(--c-line); }
.tkv-fb b { display: block; font-size: var(--fs-caption); line-height: 1.2; }
.tkv-fb small { display: block; font-size: 11px; color: var(--c-ink-soft); }
.tkv-fb.is-start { flex: none; width: 10em; background: var(--c-primary); color: #fff; }
.tkv-fb.is-end { background: var(--c-ink); color: #fff; }
.tkv-fb.is-start small, .tkv-fb.is-end small { color: rgba(255, 255, 255, .8); }
.tkv-arr { position: relative; flex: none; width: 12px; height: 2px; background: var(--c-ink); }
.tkv-arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-right: 0; border-left: 6px solid var(--c-ink); }
/* шкала блёсен */
.tkv-axis { position: relative; height: 64px; margin: var(--s-xxs) var(--s-xs) 0; }
.tkv-band { position: absolute; top: 6px; height: 34px; border-radius: var(--r-sm); transform-origin: left; }
.tkv-line { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--c-ink-soft); opacity: .45; }
.tkv-dot { position: absolute; top: 23px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; background: var(--c-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.tkv-dot.is-no { background: var(--c-red); }
.tkv-dot.is-start { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--c-gold); }
.tkv-dot.is-start::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--c-gold); border-radius: 50%; opacity: 0; }
.tkv-tick { position: absolute; top: 46px; transform: translateX(-50%); font: 600 var(--fs-eyebrow) var(--f-mono); color: var(--c-ink-soft); }
.tkv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-xs); margin-top: var(--s-xs); }
.tkv-col { padding: var(--s-xs) var(--s-sm); border-radius: var(--r-sm); }
.tkv-col > b { display: block; font-size: var(--fs-ui); }
.tkv-col > small { display: block; margin-bottom: var(--s-xxs); color: var(--c-ink-soft); }
.tkv-col ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); line-height: 1.55; }
.tkv-col li.is-no { color: var(--c-red); }
.tkv-w { display: inline-block; min-width: 2.4em; font: 700 1em var(--f-mono); }
.tkv-col em, .tkv-pchip em { font-size: .9em; font-style: normal; color: var(--c-ink-soft); }
.tkv-flag { display: inline-block; padding: 0 6px; border-radius: var(--r-full); font-size: .75em; font-weight: 700; font-style: normal; }
.tkv-flag.no { background: var(--c-red); color: #fff; }
.tkv-flag.chk { background: color-mix(in srgb, var(--c-gold) 40%, #fff); color: var(--c-ink); }
.tkv-flag.st { background: var(--c-gold); color: var(--c-ink); }
/* формат с фазами */
.tkv-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab sum" "bar bar"; gap: var(--s-xxs) var(--s-sm); align-items: baseline; margin-bottom: var(--s-sm); padding-top: var(--s-xs); border-top: 1px solid var(--c-line); }
.tkv-frow .tkv-flabel { grid-area: lab; font-size: var(--fs-ui); font-weight: 700; }
.tkv-frow .tkv-fwrap { grid-area: bar; }
.tkv-hint { margin: 0 0 var(--s-sm); }
.tkv-fwrap { display: block; min-width: 0; }
.tkv-frow .tkv-fbar { height: 30px; }
.tkv-frow .tkv-seg { font-size: 12px; padding: 0 var(--s-xxs); }
.tkv-seg.r-swap { padding: 0; }
.tkv-fax { position: relative; display: block; height: 16px; margin-top: 2px; }
.tkv-fax i { position: absolute; transform: translateX(-50%); font: 600 11px var(--f-mono); font-style: normal; color: var(--c-ink-soft); white-space: nowrap; }
.tkv-fax i:first-child { transform: none; }
.tkv-fax i.is-end { transform: translateX(-100%); }
.tkv-fsum { grid-area: sum; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-xxs) var(--s-xs); font-size: var(--fs-caption); }
.tkv-fsum b { color: var(--c-primary); }
.tkv-fsum small { color: var(--c-ink-soft); }
.tkv-fsum .tkv-chips { margin: 0; }
.tkv-flabel { font-size: var(--fs-caption); font-weight: 600; }
.tkv-fbar { display: flex; gap: 2px; height: 24px; min-width: 0; }
.tkv-seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-radius: var(--r-sm); color: #fff; font: 600 11px var(--f-mono); white-space: nowrap; transform-origin: left; }
.tkv-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-xxs); }
.tkv-chip { padding: 1px var(--s-xs); border-radius: var(--r-full); color: var(--c-ink); font-size: var(--fs-eyebrow); font-weight: 700; font-style: normal; }
/* воблеры, цвета, зоны, погода */
.tkv-plug, .tkv-cg, .tkv-zone { margin-bottom: var(--s-xs); }
.tkv-plug > b, .tkv-cg > b, .tkv-zone > b { font-size: var(--fs-ui); }
.tkv-plug > small, .tkv-cg > small, .tkv-zone > small { display: block; font-size: var(--fs-caption); color: var(--c-ink-soft); }
.tkv-pchips { display: flex; flex-wrap: wrap; gap: var(--s-xxs); margin-top: var(--s-xxs); }
.tkv-pchip { padding: 2px var(--s-xs2); border: 1px solid var(--c-line); border-radius: var(--r-full); background: var(--c-surface); font-size: var(--fs-caption); }
.tkv-pchip.is-no { border-color: var(--c-red); color: var(--c-red); }
.tkv-pchip.is-chk { border-style: dashed; border-color: var(--c-gold); }
.tkv-sws { display: flex; gap: var(--s-xxs2); margin: var(--s-xxs) 0; }
.tkv-sw { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.tkv-zbar { position: relative; display: block; height: 20px; margin: 3px 0; overflow: hidden; border-radius: var(--r-sm); background: var(--c-surface); }
.tkv-zmax, .tkv-zavg { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: left; }
.tkv-zmax { background: color-mix(in srgb, var(--c-primary) 25%, #fff); }
.tkv-zavg { background: var(--c-primary); }
.tkv-ztxt { position: absolute; left: var(--s-xs); top: 0; line-height: 20px; color: #fff; font: 600 11px var(--f-mono); }
.tkv-wxs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xs); }
.tkv-wx { padding: var(--s-xs); border-radius: var(--r-sm); background: var(--c-surface); }
.tkv-wx small { font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }
.tkv-wx b { display: block; color: var(--c-primary); font: 800 var(--fs-h3) var(--f-head); }
.tkv-wx span { display: block; font-size: var(--fs-caption); color: var(--c-ink-soft); }
.tkv-more { margin-top: var(--s-sm); }
.tkv-more > summary { display: flex; align-items: center; min-height: var(--tap-min); color: var(--c-primary); font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
  .tkv, .tkv-hows, .tkv-cols { grid-template-columns: minmax(0, 1fr); }
  .tkv-box { padding: var(--s-xs) var(--s-sm); }
  .tkv-hr:nth-child(even) { color: transparent; }
  .tkv-frow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lab" "bar" "sum"; gap: var(--s-xxs); }
  .tkv-fsum { justify-content: flex-start; }
  .tkv-fax i.after-swap { display: none; }
  .tkv-chips { justify-content: flex-start; }
  .tkv-mt .tkv-seg { font-size: 12px; }
  .tkv-seg .sl { display: none; }
  .tkv-seg .ss { display: inline; }
  .tkv-hr, .tkv-sun, .tkv-mta i, .tkv-flag { font-size: 11px; }
  .tkv-flow { flex-direction: column; align-items: stretch; }
  .tkv-fb.is-start { width: auto; }
  .tkv-lanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tkv-lane { flex-direction: column; align-items: stretch; }
  .tkv-lab { width: auto; text-align: center; }
  .tkv-arr { width: 2px; height: 10px; margin: 0 auto; }
  .tkv-arr::after { right: -4px; top: auto; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top: 6px solid var(--c-ink); }
}
@media (max-width: 480px) {
  .jt > summary { padding: var(--s-sm) var(--s-xs); gap: var(--s-xs); line-height: 1.3; }
  .jt-title { font-size: var(--fs-ui); }
  .jt-body { padding: 0 var(--s-xs) var(--s-sm); }
  .jt-strict { display: block; margin-left: 0; }
}
.sights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-sm); grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.sight { background: var(--c-surface-soft); border-radius: var(--r-md); padding: var(--card-pad-tight); display: flex; flex-direction: column; gap: var(--s-xs); }
.sight-head { display: flex; justify-content: space-between; gap: var(--s-xs); align-items: flex-start; }
.sight-head .chip { white-space: nowrap; flex: none; }
.sight p { margin: 0; flex: 1; }
.sight .btn { align-self: flex-start; }

/* Карта маршрута (route-map.js). Геометрия — route-map-data.js */
.rm-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-soft); border: 1px solid var(--c-line); }
@media (max-width: 600px) { .rm-stage { aspect-ratio: 4 / 3; } }
.rm-svg { width: 100%; height: 100%; display: block; }
.rm-sea { fill: var(--c-surface-soft); }
.rm-grat path { stroke: rgb(var(--c-primary-rgb) / .08); fill: none; }
.rm-land { fill: var(--c-surface); stroke: rgb(var(--c-primary-rgb) / .35); } /* толщины линий карты — в пикселях, ставит route-map.js */
.rm-route { fill: none; stroke: rgb(var(--c-primary-rgb) / .22); stroke-linecap: round; stroke-linejoin: round; }
.rm-trail { fill: none; stroke: var(--c-primary); stroke-linecap: round; stroke-linejoin: round; }
.rm-pins.is-world .rm-pin:not(.rm-pin-world), .rm-pins.is-japan .rm-pin:not(.rm-pin-japan) { opacity: 0; }
.rm-dot { fill: var(--c-red); stroke: var(--c-surface); stroke-width: 2; }
.rm-halo { fill: rgb(var(--c-red-rgb) / .16); }
.rm-kind-lake .rm-dot { fill: var(--c-primary); }
.rm-kind-lake .rm-halo { fill: rgb(var(--c-primary-rgb) / .16); }
.rm-pin text { font: 700 var(--fs-eyebrow) var(--f-head); fill: var(--c-ink); paint-order: stroke; stroke: var(--c-surface); stroke-width: 3px; stroke-linejoin: round; }
/* магазины планов: красная точка с мигающим ореолом, пунктир крюка, подпись */
.rm-shop .rm-dot { fill: var(--c-red); }
.rm-shop .rm-halo { fill: rgb(var(--c-red-rgb) / .22); }
.rm-shop text { fill: var(--c-red); }
.rm-shop .rm-shop-win { font: 600 9px var(--f-mono); fill: #8a0e14; }
.rm-shop-link { fill: none; stroke: var(--c-red); stroke-dasharray: 4 4; stroke-linecap: round; opacity: .9; }
.rm-shop-num { font: 700 9px var(--f-mono); fill: #fff; stroke: none; paint-order: normal; }
/* легенда магазинов в углу карты: номера → названия, дни, крюки */
.rm-legend { position: absolute; left: var(--s-xs); bottom: var(--s-xs); max-width: min(46%, 300px); padding: var(--s-xs) var(--s-xs2); border-radius: var(--r-md); background: rgb(255 255 255 / .9); border: 1px solid var(--c-line); box-shadow: var(--shadow); font-size: var(--fs-micro); line-height: 1.25; display: grid; gap: var(--s-xxs); }
.rm-legend-day { display: grid; gap: 2px; }
.rm-legend-day > b { color: var(--c-red); font: 700 var(--fs-micro) var(--f-head); letter-spacing: .06em; text-transform: uppercase; }
.rm-legend-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 4px; align-items: baseline; color: var(--c-ink); border: 0; background: none; padding: 1px 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.rm-legend-row:hover { color: var(--c-red); }
.rm-legend-row.is-sel { color: var(--c-red); font-weight: 700; }
.rm-shop.is-sel .rm-dot { stroke: var(--c-gold); stroke-width: 3; }
.shop-row.is-sel .shop-btn { border-color: var(--c-red); box-shadow: 0 0 0 3px rgb(var(--c-red-rgb) / .18); }
.shop-row.is-sel .shop-num { box-shadow: 0 0 0 3px rgb(var(--c-gold-rgb) / .6); }
.rm-legend.is-below { position: static; max-width: none; margin-top: var(--s-xs); grid-template-columns: 1fr 1fr; box-shadow: none; background: var(--c-surface-soft); font-size: var(--fs-micro); }
.rm-legend.is-below .rm-legend-row small { display: inline; }
@media (max-width: 719px) {
  .rm-legend:not(.is-below) { left: 4px; bottom: 4px; max-width: 72%; padding: 4px 6px; gap: 2px; font-size: 9px; }
  .rm-legend:not(.is-below) .rm-legend-row small { display: none; }
  .rm-zoom-btn { width: 36px; height: 36px; }
}
@media (max-width: 420px) { .rm-legend.is-below { grid-template-columns: 1fr; } }
.rm-legend-row i { width: 14px; height: 14px; border-radius: 50%; background: var(--c-red); color: #fff; font: 700 8px var(--f-mono); display: inline-grid; place-items: center; font-style: normal; }
.rm-legend-row small { color: var(--c-ink-soft); font-family: var(--f-mono); white-space: nowrap; }
.rm.plan-off-shops .rm-legend { display: none; }
@media (max-width: 719px) { .rm-legend { max-width: 60%; font-size: 9px; } }
.rm-zoom { display: inline-flex; gap: var(--s-xxs); margin: var(--s-xs) 0 0 var(--s-xs); vertical-align: top; }
.rm-zoom-btn { width: 32px; height: 32px; border-radius: var(--r-full); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-soft); font: 700 14px var(--f-mono); cursor: pointer; }
.rm-zoom-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rm-styles { display: inline-flex; }
.rm-shop-tick { fill: none; stroke: rgb(var(--c-red-rgb) / .5); stroke-width: 1px; }
.rm-shop-lab text { font: 600 9px var(--f-mono); fill: var(--c-red); paint-order: stroke; stroke: var(--c-surface); stroke-width: 3px; }
.rm.plan-off-shops .rm-plan-shops { display: none; }
.rm-svg[data-style="satellite"] .rm-shop-lab text, .rm-svg[data-style="satellite"] .rm-shop text { stroke: rgb(0 0 0 / .55); }
.rm-vehicle path { fill: var(--c-red); stroke: var(--c-surface); stroke-width: 1.5; stroke-linejoin: round; }
.rm-bar { display: flex; align-items: center; gap: var(--s-sm); margin-top: var(--s-sm); flex-wrap: wrap; }
.rm-play { min-width: 180px; }
.rm-caption { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rm-date { font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary-deep); }
.rm-title { font-size: var(--fs-ui); }
.rm-meta { font: 700 var(--fs-caption) var(--f-mono); color: var(--c-ink-soft); }
.rm-legs { list-style: none; margin: var(--s-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-xs); }
.rm-leg-btn { width: 100%; text-align: left; background: var(--c-surface-soft); border: 1px solid transparent; border-radius: var(--r-md); padding: var(--s-xs) var(--s-xs2); cursor: pointer; font: inherit; color: var(--c-ink); display: grid; gap: 2px; }
.rm-leg-btn:hover { border-color: var(--c-primary); }
.rm-leg.is-active .rm-leg-btn { background: rgb(var(--c-primary-rgb) / .1); border-color: var(--c-primary); }
.rm-leg-date { font: 700 var(--fs-micro) var(--f-mono); color: var(--c-primary); letter-spacing: .06em; }
.rm-leg-title { font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; }
.rm-leg-meta { font: 500 var(--fs-micro) var(--f-mono); color: var(--c-ink-soft); }
/* Часы участка и полоса прогресса маршрута */
.rm-clock { position: absolute; top: var(--s-xs2); left: var(--s-xs2); display: flex; flex-direction: column; gap: 2px; padding: var(--s-xs) var(--s-xs2); border-radius: var(--r-md); background: rgb(255 255 255 / .82); backdrop-filter: blur(6px); pointer-events: none; }
.rm-clock-date { font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary-deep); }
.rm-clock-time { font: 700 var(--fs-h2) var(--f-mono); color: var(--c-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.rm-clock-approx { color: var(--c-ink-soft); }
/* Полоса-ползунок: перетаскиванием и стрелками листает маршрут вперёд-назад.
   Положение хранится в одной переменной --rm-p (0…1) — её ставит route-map.js. */
.rm-track { position: relative; height: var(--tap-min); margin-top: var(--s-xxs); cursor: pointer; touch-action: none; }
.rm-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--r-full); background: var(--c-line); }
.rm-track-fill { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--r-full); background: var(--c-primary); transform-origin: left center; transform: scaleX(var(--rm-p, 0)); }
.rm-track-ticks i { position: absolute; top: 50%; width: 2px; height: 10px; margin-top: -5px; background: var(--c-surface); border-radius: 1px; }
.rm-track-knob { position: absolute; top: 50%; left: calc(var(--rm-p, 0) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primary); box-shadow: var(--shadow); }
.rm-track:hover .rm-track-knob, .rm-track.is-scrubbing .rm-track-knob { border-color: var(--c-primary-deep); }
.rm-track:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-full); }
.rm-note { margin: var(--s-xs) 0 0; }
/* Сводка километров под этапами и день без переездов на карте */
.rm-sum { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); margin-top: var(--s-sm); padding-top: var(--s-sm); border-top: 1px solid var(--c-line); }
.rm-sum-item { font-size: var(--fs-caption); color: var(--c-ink-soft); }
.rm-sum-item b { font-family: var(--f-mono); font-size: var(--fs-ui); color: var(--c-ink); }
.rm-stay { fill: rgb(var(--c-primary-rgb) / .18); stroke: var(--c-primary); stroke-width: 2px; opacity: 0; }
/* Расписание: дата — заголовок дня, время узкой колонкой, текст занимает
   остальное. Переезды подсвечены — видно, когда едем, а когда стоим. */
table.sched { table-layout: auto; }
table.sched td.numeric { width: 1%; white-space: nowrap; vertical-align: top; padding-right: var(--s-sm); font-weight: 700; }
table.sched td:last-child { width: auto; }
.sched-day th {
  text-align: left; padding: var(--s-md) 0 var(--s-xxs);
  font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-primary-deep); border-top: 1px solid var(--c-line);
}
.sched-day:first-child th { border-top: 0; padding-top: 0; }
.sched-day + tr td { border-top: 0; }
/* Планы (ADR-27): переключатель-чипы, цветные строки, скрытие */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); margin: var(--s-xs) 0 var(--s-sm); }
.plan-chip { display: inline-flex; align-items: center; gap: .45em; font: 700 var(--fs-micro) var(--f-head); letter-spacing: .06em; text-transform: uppercase; padding: var(--s-xxs) var(--s-xs2); border-radius: var(--r-full); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-soft); cursor: pointer; min-height: 32px; }
.plan-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line); box-shadow: inset 0 0 0 2px var(--c-surface); }
.plan-chip.plan-primary i { background: var(--c-primary); }
.plan-chip.plan-red i { background: var(--c-red); }
.plan-chip.is-on { border-color: currentColor; color: var(--c-ink); }
.plan-chip.plan-red.is-on { color: var(--c-red); border-color: var(--c-red); background: rgb(var(--c-red-rgb) / .06); }
.plan-chip.plan-primary.is-on { color: var(--c-primary); border-color: var(--c-primary); background: rgb(var(--c-primary-rgb) / .06); }
.plan-chip[disabled] { cursor: default; }
.plan-chip:not(.is-on) i { background: var(--c-line); }
.plan-lead { flex-basis: 100%; }
.tz-plan.is-off { display: none !important; }
tr.tz-plan-shops td { background: rgb(var(--c-red-rgb) / .06); color: #8a0e14; }
tr.tz-plan-shops td:first-child { box-shadow: inset 2px 0 0 var(--c-red); color: var(--c-red); }
.chip-red { background: rgb(var(--c-red-rgb) / .1); color: var(--c-red); border-color: rgb(var(--c-red-rgb) / .3); }
.chip-gold { background: rgb(var(--c-gold-rgb) / .16); color: #6a5000; } /* пометка «оценка»; текст — затемнённое золото ради контраста (≈6,9:1) */
/* карточка магазинов: кнопки в Google Maps */
.shop-list { display: grid; gap: var(--s-xs); }
.shop-day { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); margin-top: var(--s-sm); }
.shop-day > b { font: 700 var(--fs-h3) var(--f-head); color: var(--c-primary-deep); }
.shop-day > p { flex-basis: 100%; margin: 0; }
/* Раздел «Зрителям»: плитки-цифры, облёт зон со списком в такт, пиктограммы, правила, стенды */
.spx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-sm); margin: var(--s-md) 0 var(--s-lg); }
.spx-stats .stat-tile.light { background: var(--c-surface); }
.spx-stats .num small { font-size: .42em; margin-left: .12em; color: var(--c-ink-soft); font-weight: 700; }
.spx-head { display: flex; align-items: center; gap: var(--s-xs); margin-bottom: var(--s-sm); }
.spx-head .eyebrow { margin-bottom: 0; }
.spx-ico { width: 28px; height: 28px; flex: none; color: var(--c-primary); }
.spx-rules-card { margin-top: var(--s-md); }
.spx-rules { display: grid; gap: var(--s-sm) var(--s-md); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.spx-rule { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-xs); align-items: start; }
.spx-rule .spx-ico { width: 44px; height: 44px; padding: 10px; border-radius: var(--r-full); background: rgb(var(--c-red-rgb) / .1); color: var(--c-red); }
/* Облёт зон (ADR-33): ролик без текста, под ним список тактов; активная строка
   подсвечена золотом, её полоска --p растёт за время такта, текст раскрывается
   (grid-template-rows 0fr→1fr). В .is-still (постер) раскрыты все строки. */
.zf-card { margin-bottom: var(--s-md); }
.zf-card .eyebrow { margin-bottom: 0; }
.zf.flyover { margin-top: var(--s-sm); }
.zf-list { list-style: none; margin: var(--s-sm) 0 0; padding: 0; display: grid; gap: var(--s-xxs); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.zf-item { --p: 0; --zf-badge: 46px; position: relative; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); overflow: hidden; transition: border-color var(--t-base) var(--e-std), background-color var(--t-base) var(--e-std); }
.zf-item--poi { --zf-badge: 28px; }
.zf-item.is-on { border-color: var(--c-gold); background: rgb(var(--c-gold-rgb) / .1); }
.zf-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-xs2); align-items: center; width: 100%; padding: var(--s-xs2) var(--s-sm); border: 0; background: none; text-align: left; font: inherit; color: var(--c-ink); cursor: pointer; }
.zf-row::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(100% * var(--p)); background: var(--c-gold); opacity: 0; }
.zf-item.is-on .zf-row::after { opacity: 1; }
.zf-badge { display: inline-grid; place-items: center; min-width: var(--zf-badge); height: 28px; padding: 0 8px; border-radius: 8px; background: var(--c-ink); color: #fff; font: 700 12px var(--f-mono); letter-spacing: .04em; transition: background-color var(--t-base) var(--e-std), color var(--t-base) var(--e-std); }
.zf-badge--poi { width: var(--zf-badge); padding: 0; border-radius: 50%; background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-ink); }
.zf-item.is-on .zf-badge--area { background: var(--c-gold); color: var(--c-ink); }
.zf-item.is-on .zf-badge--poi { background: var(--c-red); color: #fff; box-shadow: inset 0 0 0 2px var(--c-red); }
.zf-title { font-weight: 600; }
.zf-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--e-out); }
.zf-body > div { overflow: hidden; }
.zf-body p { margin: 0; padding: 0 var(--s-sm) var(--s-xs2) calc(var(--s-sm) + var(--zf-badge) + var(--s-xs2)); color: var(--c-ink-soft); font-size: var(--fs-ui); }
.zf-item.is-on .zf-body, .zf.is-still .zf-body { grid-template-rows: 1fr; }
/* «Моргание» в такт: когда камера доходит до точки, строка вспыхивает золотом и
   бейдж расходится кольцом — как бейдж с кодом в ролике; дальше строка просто
   подсвечена (.is-on), пока идёт её такт. Класс ставится заново на каждом такте,
   поэтому анимация запускается каждый раз. */
@keyframes zfFlash { from { background-color: rgb(var(--c-gold-rgb) / .5); } to { background-color: rgb(var(--c-gold-rgb) / .1); } }
@keyframes zfRing { from { box-shadow: 0 0 0 0 rgb(var(--c-gold-rgb) / .9); transform: scale(1.2); } to { box-shadow: 0 0 0 var(--s-xs2) rgb(var(--c-gold-rgb) / 0); transform: none; } }
.zf-badge { position: relative; }
.zf-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.zf-item.is-on { animation: zfFlash .9s var(--e-out) 1; }
.zf-item.is-on .zf-badge::after { animation: zfRing .9s var(--e-out) 1; }
/* кнопка «запустить», если браузер не дал автозапуск: по центру постера */
.zf-media { position: relative; }
.zf-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--c-gold-rgb) / .92); box-shadow: var(--shadow); cursor: pointer; transform: translate(-50%, -50%); }
.zf-play span { display: block; width: 0; height: 0; margin: 0 auto; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--c-ink); transform: translateX(3px); }
.zf-play[hidden] { display: none; }
@media (max-width: 560px) { .zf-list { grid-template-columns: 1fr; } }
.spx-vendors { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.spx-quote { font-size: var(--fs-lead); max-width: 62ch; margin-top: var(--s-lg); }
.tz-file { display: inline-block; margin-top: var(--s-xxs); font-size: var(--fs-micro); font-weight: 600; color: var(--c-red); }
.shop-row { display: grid; grid-template-columns: auto minmax(0, 1fr); /* minmax: на 320px кнопка не шире экрана */ gap: var(--s-xs); align-items: start; }
.shop-num { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c-red); color: #fff; font: 700 12px var(--f-mono); display: inline-grid; place-items: center; cursor: pointer; margin-top: var(--s-xs2); box-shadow: var(--shadow); }
.shop-num:hover { transform: translateY(-1px); }
.shop-btn { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-sm); row-gap: var(--s-xxs); align-items: start; padding: var(--s-xs2) var(--s-sm); border: 1px solid rgb(var(--c-red-rgb) / .3); border-left: 3px solid var(--c-red); border-radius: var(--r-md); text-decoration: none; color: var(--c-ink); background: var(--c-surface); }
.shop-btn:hover { box-shadow: var(--shadow); border-color: var(--c-red); }
.shop-btn-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.shop-btn-meta { display: flex; flex-wrap: wrap; gap: var(--s-xxs); margin-top: 2px; }
.shop-btn .route-btn-go { align-self: center; color: var(--c-red); }
@media (max-width: 719px) { .shop-btn { grid-template-columns: minmax(0, 1fr); } .shop-btn .route-btn-go { grid-column: 1; } }
.tz-ride td { background: rgb(var(--c-primary-rgb) / .05); }
.tz-ride td:first-child { box-shadow: inset 2px 0 0 var(--c-primary); }

/* ============================================================
   Боевая карта Хираи (assets/js/tactics.js, content/tactics.json)
   ============================================================ */
.tac-details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-sm); min-height: var(--tap-min); }
.tac-details > summary::-webkit-details-marker { display: none; }
.tac-details > summary::after { content: "+"; font-family: var(--f-mono); font-size: var(--fs-h2); color: var(--c-primary); flex: none; }
.tac-details[open] > summary::after { content: "−"; }
/* Ступень H3 — единственная ступень заголовка карточки в системе (DESIGN.md).
   Надзаголовок eyebrow здесь не держал: за ним раскрывается целый раздел. */
.tac-title { margin: 0; font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; color: var(--c-primary-deep); }
.tac-details > summary .small { display: block; margin-top: var(--s-xxs); }
.tac-body { padding-top: var(--s-md); }

/* Шапка: подпись, значение и шкала одной колонкой — значение сбоку от
   ползунка читалось как чужое. */
.tac-head { display: grid; gap: var(--s-xxs); }
.tac-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); }
.tac-head-top .eyebrow { color: var(--c-primary-deep); }
.tac-temp-val { font: 700 var(--fs-num) var(--f-mono); line-height: 1; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.tac-range { width: 100%; accent-color: var(--c-primary); min-height: var(--tap-min); margin: 0; }
.tac-scale { display: grid; gap: 2px; }
.tac-scale-ends { display: flex; justify-content: space-between; }
.tac-scale-end { font: 700 var(--fs-micro) var(--f-mono); color: var(--c-ink-soft); white-space: nowrap; }
/* Засечки идут по той же ширине, что и ползунок, с поправкой на половину
   бегунка: иначе подписи по краям сдвигали шкалу и метки не совпадали
   с положением бегунка. */
.tac-marks { position: relative; height: 14px; margin: 0 8px; }
.tac-marks i { position: absolute; top: 3px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: var(--c-line); cursor: pointer; }
.tac-marks i::after { content: ""; position: absolute; inset: -10px -8px; }
.tac-marks i.is-near { background: var(--c-red); height: 12px; top: 1px; }
.tac-scale-note { margin: 0; }

/* Разрез сверху, состояния сеткой под ним. Раньше они стояли в колонке
   рядом с картой: колонка узкая, шесть состояний вытягивались на полтора
   экрана, а карта высотой в четверть этого простаивала. */
.tac-grid { display: grid; gap: var(--s-md); margin-top: var(--s-md); }
.tac-figure { max-width: 720px; }
.tac-axes { margin: var(--s-xs) 0 0; }
.tac-side-head { color: var(--c-primary-deep); margin: 0 0 var(--s-xs); }
.tac-svg { width: 100%; height: auto; display: block; border-radius: var(--r-md); border: 1px solid var(--c-line); }
.tac-cell rect { fill: rgb(var(--c-primary-rgb) / calc(var(--on, 0) * .38)); stroke: rgb(var(--c-primary-rgb) / calc(var(--on, 0) * .5)); stroke-width: 1; }
.tac-lab { font: 700 var(--fs-micro) var(--f-head); fill: var(--c-ink-soft); paint-order: stroke; stroke: var(--c-surface); stroke-width: 3px; stroke-linejoin: round; }
.tac-lab-x { text-anchor: middle; }
.tac-line { stroke: rgb(var(--c-primary-rgb) / .35); stroke-width: 1; }
.tac-fish path { fill: var(--c-red); }

.tac-states { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-xs); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); align-items: start; }
.tac-state { background: var(--c-surface-soft); border-radius: var(--r-md); padding: var(--s-xs) var(--s-xs2); display: grid; gap: 2px; }
.tac-tools { font-size: var(--fs-caption); color: var(--c-ink-soft); }
/* Приманки плашками в строку: списком с пояснением на каждую карточка
   растягивалась на несколько экранов. Пояснение — во всплывающей подсказке
   и в каталоге ниже. */
.tac-lures { list-style: none; margin: var(--s-xxs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.tac-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px var(--s-xs); border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-line); font-size: var(--fs-micro); line-height: 1.5; cursor: help; }
.tac-chip b { font-size: var(--fs-micro); font-weight: 700; }
.tac-chip span { font-family: var(--f-mono); color: var(--c-ink-soft); }
.tac-spec { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--c-ink-soft); }

.tac-days { margin-top: var(--s-md); display: grid; gap: var(--s-xs); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); align-items: start; }
.tac-days > .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--c-primary-deep); }
.tac-day { background: var(--c-surface-soft); border-radius: var(--r-md); padding: var(--s-xs) var(--s-xs2); font-size: var(--fs-caption); }
.tac-day header { display: flex; align-items: center; gap: var(--s-xs); flex-wrap: wrap; margin-bottom: var(--s-xxs); }
.tac-day time { font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary-deep); }
.tac-win { margin: 0 0 var(--s-xxs); font-size: var(--fs-caption); }
.tac-conf { font: 700 var(--fs-micro) var(--f-head); letter-spacing: .08em; text-transform: uppercase; padding: 2px var(--s-xs); border-radius: var(--r-full); }
.tac-conf-high { background: rgb(47 170 106 / .14); color: #1d7a49; }
.tac-conf-medium { background: rgb(var(--c-gold-rgb) / .18); color: #8a6b00; }
.tac-conf-low { background: rgb(var(--c-red-rgb) / .1); color: var(--c-red); }
/* Баннер живой погоды на странице озера (weather-live.js, mode banner) */
.wx-banner { display: grid; grid-template-columns: auto 1fr; gap: var(--s-xs) var(--s-md); align-items: center; padding: var(--s-sm) var(--s-md); border: 1px solid var(--c-line); border-left: 3px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-surface); }
.wxb-now { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--s-sm); }
.wxb-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); font-size: var(--fs-ui); }
.wxb-facts li { display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap; }
.wxb-facts small { color: var(--c-ink-soft); }
/* 14 дней (v1.76.0): полоса листается — пальцем со щелчком по дню и стрелками ‹ ›; видно 5 дней, на телефоне 4 */
.wxb-strip { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-xxs); padding-top: var(--s-xs); border-top: 1px solid var(--c-line); }
.wxb-days { --wxb-n: 5; min-width: 0; container-type: inline-size; padding: 0 0 var(--s-xxs); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.wxb-days > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-xxs); }
.wxb-days .wxb-d { flex: 0 0 calc((100cqw - (var(--wxb-n) - 1) * var(--s-xxs)) / var(--wxb-n)); /* ширина видимой части полосы (контейнер) */ scroll-snap-align: start; padding: 2px 0; border-radius: var(--r-sm); position: relative; }
/* дни после недели: бледнее только значок и рамка — текст читается полностью (контраст) */
.wxb-d.is-far { outline: 1px dashed var(--c-line); outline-offset: -1px; }
.wxb-d.is-far .wxb-d-i { opacity: .55; }
.wx-days tr.is-far td { color: var(--c-ink-soft); }
.wxb-d.is-event { background: var(--c-surface-soft); outline: 1px solid var(--c-primary); outline-offset: -1px; }
.wxb-cup { position: absolute; top: 0; right: 2px; font-size: .75rem; line-height: 1; } /* кубок в углу — дата в подписи не обрезается */
.wxb-nav { width: var(--tap-min, 44px); height: var(--tap-min, 44px); border: 1px solid var(--c-line); border-radius: 50%; background: #fff; color: var(--c-primary); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.wxb-nav:disabled { opacity: .3; cursor: default; }
/* плёнка погоды (v1.77.0): сцена + шкала 14 суток; бегунок перематывается пальцем */
.wxb-film { grid-column: 1 / -1; min-width: 0; position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-surface-soft); }
.wxb-film canvas { display: block; width: 100%; height: 170px; cursor: ew-resize; touch-action: pan-y; }
.wxb-film canvas:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.wxf-bar { display: flex; align-items: center; gap: var(--s-xs); padding: var(--s-xxs) var(--s-xs); border-top: 1px solid var(--c-line); background: var(--c-surface); }
/* управление плёнкой поверх сцены справа: − скорость +, пауза */
.wxf-ctl { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: var(--r-full); background: rgb(255 255 255 / .55); }
.wxf-spd { min-width: 2.2em; text-align: center; font-size: var(--fs-caption); font-weight: 700; color: var(--c-primary-deep); font-variant-numeric: tabular-nums; }
.wxf-slow, .wxf-fast { width: var(--tap-min, 44px); height: var(--tap-min, 44px); border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: rgb(255 255 255 / .85); color: var(--c-primary); font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; }
.wxf-slow:disabled, .wxf-fast:disabled { opacity: .4; cursor: default; }
.wxf-play { width: var(--tap-min, 44px); height: var(--tap-min, 44px); border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: rgb(255 255 255 / .85); color: var(--c-primary); font-size: 1rem; cursor: pointer; }
.wxf-cap { margin: 0; min-width: 0; min-height: 2.9em; line-height: 1.45; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; } /* высота с запасом на две строки — подпись не прыгает каждый час */
.wxf-cap b { font-size: 1.15rem; color: var(--c-ink); margin-right: .6em; }
.wxf-cap span { display: inline-block; white-space: nowrap; margin-right: .8em; color: var(--c-ink-soft); }
@media (max-width: 480px) { .wxf-cap .wxf-x { display: none; } .wxf-cap { font-size: var(--fs-caption); min-height: 4.4em; } .wxf-cap b { font-size: 1rem; } } /* на телефоне без словесного описания — значок уже говорит */
.wxb-d.is-play { box-shadow: inset 0 -3px 0 var(--c-red); }
/* карта погоды под спойлером: слои Windy, грузится при раскрытии */
.wxb-map { grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: var(--s-xs); }
.wxb-map > summary { cursor: pointer; font-weight: 700; color: var(--c-primary); min-height: var(--tap-min, 44px); display: flex; align-items: center; }
.wxm-tabs { display: flex; flex-wrap: wrap; gap: var(--s-xxs); margin: var(--s-xs) 0; }
.wxm-tabs button { cursor: pointer; border: 1px solid var(--c-line); min-height: 36px; }
.wxm-tabs button[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.wxb-map .wx-radar { aspect-ratio: auto; height: clamp(320px, 75vw, 520px); max-height: none; }
@media (prefers-reduced-motion: reduce) { .wxb-days { scroll-behavior: auto; } }
/* подписи-источники с длинными адресами (камеры у дороги на «Озере») переносятся, а не раздвигают страницу на телефоне */
.muted.small { overflow-wrap: break-word; }
.wxb-d { display: grid; justify-items: center; gap: 1px; font-size: var(--fs-caption); text-align: center; }
.wxb-d-t { color: var(--c-ink-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wxb-d-i { font-size: 1.2rem; line-height: 1; }
.wxb-d small { color: var(--c-ink-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wxb-d { min-width: 0; }
.wxb-d.is-wet small { color: var(--c-primary); font-weight: 700; }
.wxb-foot { grid-column: 1 / -1; margin: 0; }
@media (max-width: 719px) {
  .wx-banner { grid-template-columns: 1fr; }
  .wxb-days { --wxb-n: 4; }
  .wxb-nav { width: 34px; height: 34px; font-size: 1.1rem; }
  .wxb-d { font-size: 10px; }
  .wxb-d-t { font-size: 9px; }
}
/* Живая погода в зоне команды (weather-live.js, ADR-25) */
.wx-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-xs); }
.wx-tile { display: grid; gap: 2px; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; font-size: var(--fs-ui); }
.wx-tile small { color: var(--c-ink-soft); }
.wx-tile-main { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--s-sm); }
@media (min-width: 720px) { .wx-tile-main { grid-column: span 2; } }
.wx-icon { font-size: 2.2rem; line-height: 1; }
.wx-temp { font-family: var(--f-mono); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--c-primary); }
.wx-desc { line-height: 1.25; }
.wx-wind { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; }
.wx-wind small { color: var(--c-ink-soft); }
.wx-arrow { display: inline-block; font-style: normal; color: var(--c-primary); }
.wx-stamp { margin-top: var(--s-xs); }
.wx-refresh { border: 0; background: none; padding: 0; color: var(--c-primary); text-decoration: underline; cursor: pointer; font: inherit; }
.wx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-xxs); }
/* часы сгруппированы по дням: подпись дня — над своей группой во всю её
   ширину (раньше висела над одной ячейкой и наезжала на соседние часы) */
.wx-hours { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-sm); min-width: max-content; }
.wx-hd { display: grid; gap: var(--s-xxs); align-content: start; }
.wx-hd-l { position: sticky; left: 0; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); font-weight: 700; color: var(--c-primary); }
.wx-hd ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.wx-h { display: grid; gap: 2px; justify-items: center; min-width: 64px; padding: var(--s-xs) var(--s-xxs); border-radius: var(--r-sm); background: var(--c-surface-soft); font-size: var(--fs-caption); text-align: center; }
.wx-h-t { font-family: var(--f-mono); color: var(--c-ink-soft); }
.wx-h-i { font-size: 1.3rem; line-height: 1; }
.wx-h-temp { font-size: var(--fs-ui); }
.wx-h-p { color: var(--c-ink-soft); }
.wx-h-p small { display: block; }
.wx-h-p.is-wet, .wx-days td.is-wet { color: var(--c-primary); font-weight: 700; }
.wx-days td, .wx-days th { white-space: nowrap; }
.wx-d-desc { color: var(--c-ink-soft); }
/* планшет: без описания и восхода-заката таблица помещается без прокрутки вбок */
@media (max-width: 900px) { .wx-d-desc, .wx-d-sun { display: none; } }
/* телефон: строка дня в две линии (дата, значок, макс/мин; ниже осадки и
   ветер), шапка таблицы прячется. Селекторы с table.mini — иначе рамки и
   отступы ячеек table.mini td перебивают по весу */
@media (max-width: 719px) {
  .wx-days thead { display: none; }
  .wx-days, .wx-days tbody { display: block; }
  .wx-days tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t i m" "p p w"; column-gap: var(--s-xs); align-items: baseline; padding: var(--s-xs) 0; border-bottom: 1px solid var(--c-line); }
  table.mini.wx-days td { padding: 0; border: 0; text-align: left; }
  table.mini.wx-days td.wx-d-p { white-space: normal; } /* узкий телефон — осадки переносятся, а не режутся */
  .wx-days .wx-d-t { grid-area: t; overflow: hidden; text-overflow: ellipsis; }
  .wx-days .wx-d-i { grid-area: i; }
  .wx-days .wx-d-m { grid-area: m; text-align: right; }
  .wx-days .wx-d-p { grid-area: p; font-size: var(--fs-caption); }
  .wx-days .wx-d-w { grid-area: w; font-size: var(--fs-caption); text-align: right; }
}
@media (max-width: 380px) { table.mini.wx-days td { font-size: var(--fs-eyebrow); } } /* 320px: дата и осадки без многоточия и переноса */
.wx-note { margin-top: var(--s-sm); }
/* радар — на всю ширину карточки: прежние aspect-ratio 16/10 + max-height 420px
   сужали его до 672px на компьютере */
.wx-radar { width: 100%; height: clamp(320px, 56vw, 520px); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-surface-soft); }
.wx-radar iframe { display: block; width: 100%; height: 100%; border: 0; }
.tac-tours { list-style: none; margin: 0 0 var(--s-md); padding: 0; display: grid; gap: var(--s-xxs); }
/* Источники разбора: группы площадок, внутри — ссылки хост + путь */
.tac-src-groups { list-style: none; margin: 0 0 var(--s-sm); padding: 0; display: grid; gap: var(--s-sm); }
.tac-src-g > b { font-size: var(--fs-ui); }
.tac-src { list-style: none; margin: var(--s-xxs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.tac-src a { display: inline-flex; align-items: baseline; gap: .35em; max-width: 100%; padding: 2px var(--s-xs); border: 1px solid var(--c-line); border-radius: var(--r-full); background: #fff; font-size: var(--fs-caption); text-decoration: none; color: var(--c-ink); }
.tac-src a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tac-src-host { font-weight: 700; }
.tac-src-path { color: var(--c-ink-soft); font-family: var(--f-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.tac-tour { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-sm); align-items: baseline; padding: var(--s-xs) 0; border-top: 1px solid var(--c-line); font-size: var(--fs-ui); }
.tac-tour:first-child { border-top: 0; }
.tac-tour-date { font: 700 var(--fs-micro) var(--f-mono); color: var(--c-primary); white-space: nowrap; }
@media (max-width: 620px) { .tac-tour { grid-template-columns: 1fr; gap: 2px; } }
.tac-checked { margin: var(--s-xxs) 0 0; font-size: var(--fs-caption); color: var(--c-ink); border-left: 2px solid var(--c-primary); padding-left: var(--s-xs); }
.tac-checked b { color: var(--c-primary-deep); }
.tac-src { font-size: var(--fs-micro); white-space: nowrap; }
.tac-more > summary { cursor: pointer; list-style: none; font: 700 var(--fs-micro) var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); padding: var(--s-xxs) 0; }
.tac-more > summary::-webkit-details-marker { display: none; }
.tac-more > summary::after { content: " +"; }
.tac-more[open] > summary::after { content: " −"; }
.tac-cat { list-style: none; margin: 0 0 var(--s-md); padding: 0; display: grid; gap: var(--s-xxs); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.tac-cat-i { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-xs); padding: var(--s-xs) 0; border-top: 1px solid var(--c-line); font-size: var(--fs-caption); line-height: 1.4; }
.tac-cat-i:first-child { border-top: 0; }
.tac-cat-name { flex: 1 1 auto; min-width: 0; }
.tac-cat-type { font: 700 var(--fs-micro) var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); flex: none; }
/* Уверенность в каталоге — точкой: словами она занимала полстроки на каждой
   из 34 моделей. Расшифровка во всплывающей подсказке. */
.tac-cat-i .tac-conf { width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; flex: none; align-self: center; }
/* Частота модели в официальных листах снастей */
.tac-freq { font: 700 var(--fs-micro) var(--f-mono); font-style: normal; color: var(--c-primary); padding-left: 2px; border-left: 1px solid var(--c-line); margin-left: 2px; }
.tac-freqs { margin-top: var(--s-xs); }
.tac-freq-grid { display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); align-items: start; } /* min(): на узком телефоне колонка не шире блока */
.tac-freq-ev h5 { margin: 0 0 var(--s-xs); font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary-deep); }
.tac-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tac-bars li { display: grid; grid-template-columns: minmax(0, 11ch) 1fr auto; gap: var(--s-xs); align-items: center; font-size: var(--fs-caption); }
.tac-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tac-bar { height: 8px; border-radius: var(--r-full); background: var(--c-line); overflow: hidden; }
.tac-bar i { display: block; height: 100%; background: var(--c-primary); border-radius: var(--r-full); }
.tac-bar-n { font: 700 var(--fs-micro) var(--f-mono); color: var(--c-ink-soft); }
/* Стиль карты маршрута: свои слои, без внешних тайлов (ADR-18) */
.rm-styles { display: flex; flex-wrap: wrap; gap: var(--s-xxs); margin-top: var(--s-xs); }
.rm-style-btn { font: 700 var(--fs-micro) var(--f-head); letter-spacing: .06em; text-transform: uppercase; padding: var(--s-xxs) var(--s-xs2); border-radius: var(--r-full); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-soft); cursor: pointer; text-decoration: none; }
.rm-style-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rm-style-btn.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.rm-style-sat { color: var(--c-primary); }
.rm-relief, .rm-tour { pointer-events: none; }
.rm-urban { fill: rgb(var(--c-deep-rgb) / .13); stroke: none; }
.rm-lake { fill: rgb(var(--c-primary-rgb) / .3); stroke: none; }
.rm-river { fill: none; stroke: rgb(var(--c-primary-rgb) / .45); stroke-linecap: round; }
/* В туристическом суша теплее, в рельефе её закрывает сетка высот */
.rm-svg[data-style="tourist"] .rm-land { fill: #fdfaf3; }
.rm-svg[data-style="relief"] .rm-japan { fill: none; }
.rm-svg[data-style="relief"] .rm-sea { fill: rgb(var(--c-primary-rgb) / .1); }
.rm-style-note { margin: var(--s-xxs) 0 0; }
/* Спутник: плитки Sentinel-2 из репозитория, внешних запросов нет */
.rm-sat { pointer-events: none; }
.rm-svg[data-style="satellite"] .rm-land { fill: none; stroke: rgb(255 255 255 / .3); }
.rm-svg[data-style="satellite"] .rm-sea { fill: #0b1c33; }
.rm-svg[data-style="satellite"] .rm-grat path { stroke: rgb(255 255 255 / .08); }
.rm-svg[data-style="satellite"] .rm-pin text { fill: #fff; stroke: rgb(0 0 0 / .55); }
.rm-svg[data-style="satellite"] .rm-route { stroke: rgb(255 255 255 / .45); }
.rm-svg[data-style="satellite"] .rm-lab { fill: #fff; stroke: rgb(0 0 0 / .5); }
.rm-credit { margin: var(--s-xxs) 0 0; }
/* Телефон: этапы лентой в один ряд со своей прокруткой. Страница при этом
   стоит на месте — карта не уезжает, кнопки стилей остаются под пальцем. */
@media (max-width: 700px) {
  .rm-legs { grid-auto-flow: column; grid-auto-columns: 68%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s-xxs); -webkit-overflow-scrolling: touch; }
  .rm-leg { scroll-snap-align: center; }
  .rm-styles { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .rm-style-btn { white-space: nowrap; }
  .rm-bar { flex-direction: column; align-items: stretch; }
  .rm-play { min-width: 0; }
}
/* Карточка — элемент сетки, а у него min-width по умолчанию auto: широкая
   лента этапов растягивала карточку шире экрана, и на телефоне страница
   разъезжалась вбок. min-width: 0 возвращает право сжиматься. */
.tz-grid > .card, #tz-journey, .rm { min-width: 0; }
.rm-legs, .rm-styles, .rm-track, .rm-bar { min-width: 0; max-width: 100%; }
/* Страховка от длинных строк в узких карточках */
.tac-tour, .tac-tour-main, .tac-cat-i, .tac-cat-name, .route-btn, .route-btn-main { min-width: 0; overflow-wrap: anywhere; }
/* Часы на карте: на телефоне плашка съедала треть карты и закрывала первую
   точку. Ужимаем шрифты и поля, но оставляем два ряда — в одну строку дата
   и время вместе выходят ШИРЕ, а ширина здесь дороже высоты. */
@media (max-width: 700px) {
  .rm-clock { gap: 0; padding: 2px var(--s-xs); top: var(--s-xs); left: var(--s-xs); border-radius: var(--r-sm); }
  .rm-clock-date { font-size: var(--fs-micro); letter-spacing: .04em; }
  .rm-clock-time { font-size: var(--fs-ui); }
}
/* Слои стилей лежат ПОВЕРХ суши, поэтому их надо прятать явно: иначе,
   выбрав спутник, вернуться к обычной карте было нельзя — снимки
   оставались на экране под любым стилем. */
.rm-svg:not([data-style="satellite"]) .rm-sat,
.rm-svg:not([data-style="relief"]) .rm-relief,
.rm-svg:not([data-style="tourist"]) .rm-tour { display: none; }

/* Пояснения под спойлером: они стояли между картой и списком этапов
   и не давали видеть путь и пункты на одном экране. */
.rm-help > summary { cursor: pointer; list-style: none; font: 700 var(--fs-micro) var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); padding: var(--s-xxs) 0; }
.rm-help > summary::-webkit-details-marker { display: none; }
.rm-help > summary::after { content: " +"; }
.rm-help[open] > summary::after { content: " −"; }
.rm-help p { margin: var(--s-xxs) 0 0; }

/* Телефон: карта, ползунок и пункты должны помещаться на один экран.
   Кнопка проигрывания из широкой плашки становится кружком у подписи. */
@media (max-width: 700px) {
  .rm-bar { flex-direction: row; align-items: center; gap: var(--s-xs); }
  .rm-play { min-width: 0; flex: none; width: var(--icon-btn-lg); height: var(--icon-btn-lg); padding: 0; border-radius: 50%; font-size: 0; }
  .rm-play::before { content: "▶"; font-size: var(--fs-ui); line-height: 1; }
  .rm-play[aria-pressed="true"]::before { content: "❚❚"; font-size: var(--fs-eyebrow); }
  .rm-caption { font-size: var(--fs-caption); }
  .rm-legs { grid-auto-columns: 62%; }
}
/* Копирайт в подвале: знак Gausse Holler и надпись в две строки рядом */
.site-footer .copyright {
  padding-top: var(--s-sm); margin-top: var(--s-sm);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center; gap: var(--s-xs2);
}
.site-footer .copyright .gausse {
  display: inline-flex; align-items: center; gap: var(--s-xs2);
  text-decoration: none; padding: var(--s-xxs) var(--s-xs); border-radius: var(--r-md);
  min-height: var(--tap-min);
}
.site-footer .copyright .gausse:hover { background: rgba(255, 255, 255, .06); }
.gausse-fb { color: rgba(255, 255, 255, .45); flex: none; }
.site-footer .copyright .gausse:hover .gausse-fb { color: #fff; }
.gausse-mark { width: 32px; height: auto; flex: none; }
.gausse-word { display: flex; flex-direction: column; line-height: 1.15; }
.gausse-word b {
  font-family: var(--f-head); font-weight: 800; font-size: var(--fs-caption);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .88);
}
.gausse-word i {
  font-style: normal; font-family: var(--f-head); font-weight: 700;
  font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
/* Галочки согласия на входе в зону команды */
.tz-consent { align-items: flex-start; gap: var(--s-xs); margin-bottom: var(--s-xs); text-align: left; }
.tz-consent input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--c-primary); }
.tz-consent > span { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--c-ink-soft); margin-bottom: 0; }
/* Всплывающее окно с паролем книги документации */
.docs-gate-card { max-width: 420px; text-align: center; }
.docs-gate-card .field { text-align: left; }
.docs-gate-card form { margin-top: var(--s-sm); }

/* ============================================================
   Регламент FIPSed на «О чемпионате» и регламенты Trout King на «Озере»
   (ADR-34, дополнение v1.63.0): крупная плашка и окно
   просмотра всего документа (страницы картинками, lake.json →
   championshipRules.pages). Движение плашки — в motion.css.
   ============================================================ */
.rules-plate {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: var(--s-md); width: 100%;
  margin-bottom: var(--s-md); padding: var(--s-md) var(--s-lg);
  min-height: var(--tap-min); text-align: left; font: inherit; cursor: pointer;
  color: #fff; border: 2px solid rgb(var(--c-gold-rgb) / .7); border-radius: var(--r-md);
  background: linear-gradient(120deg, var(--c-surface-deep), var(--c-primary-deep) 55%, var(--c-primary));
  box-shadow: var(--shadow-hover);
}
.rules-plate:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.rp-ico { flex: none; width: 56px; height: 56px; color: var(--c-gold); }
.rp-text { display: flex; flex-direction: column; gap: var(--s-xxs); min-width: 0; }
.rp-text b { font-family: var(--f-head); font-size: var(--fs-h2); line-height: 1.2; }
.rp-text small { font-size: var(--fs-caption); color: rgba(255,255,255,.8); }
.rp-go {
  flex: none; margin-left: auto; padding: var(--s-xs) var(--s-md); border-radius: var(--r-full);
  background: var(--c-gold); color: var(--c-ink); font-family: var(--f-head); font-weight: 800; white-space: nowrap;
}
@media (max-width: 640px) {
  .rules-plate { flex-wrap: wrap; gap: var(--s-sm); padding: var(--s-sm) var(--s-md); }
  .rp-ico { width: 40px; height: 40px; }
  .rp-text { flex: 1 1 0; }
  .rp-text b { font-size: var(--fs-h3); }
  .rp-go { margin-left: 0; width: 100%; text-align: center; }
}

/* Окно просмотра: выше плеера (90) и шапки, ниже тоста (200); слой общий
   с окном «Что нового» (120), но подвал под окном inert — оба сразу не открыть.
   Полоса прокрутки при блокировке оставляет место — страница не прыгает. */
html.rv-lock { overflow: hidden; scrollbar-gutter: stable; }
/* курсор-прицел дуэли лежит ниже окна — над окном обычный курсор */
html.sd-cursor .rules-view { cursor: auto; }
.rules-view {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: var(--s-md); background: rgba(2, 14, 32, .72);
}
.rv-card {
  display: flex; flex-direction: column; width: 100%; max-width: 900px; height: 100%; max-height: 100%;
  background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-hover); overflow: hidden;
}
.rv-bar {
  flex: none; display: flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-xs) var(--s-xs) var(--s-xs) var(--s-md); border-bottom: 1px solid var(--c-line);
}
.rv-bar b { font-family: var(--f-head); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-pdf { margin-left: auto; font-size: var(--fs-caption); white-space: nowrap; }
.rv-bar .rv-close { position: static; flex: none; }
.rv-pages {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--s-sm); background: var(--c-surface-soft);
}
.rv-pages img {
  display: block; width: 100%; height: auto; margin: 0 auto var(--s-sm);
  background: #fff; box-shadow: var(--shadow); border-radius: var(--r-sm);
}
@media (max-width: 640px) {
  .rules-view { padding: 0; }
  .rv-card { border-radius: 0; }
  .rv-pages { padding: var(--s-xs); }
  .rv-pages img { margin-bottom: var(--s-xs); }
}
@media print { .rules-view { display: none !important; } }
/* облачко тоста над столом делегации */
.hl-say { position: absolute; left: 0; top: 0; margin: 0; padding: var(--s-xxs) var(--s-xs2); border-radius: var(--r-md); background: #fff; color: var(--c-ink); box-shadow: 0 6px 16px rgb(var(--c-deep-rgb) / .3); pointer-events: none; text-align: center; opacity: 0; transition: opacity var(--t-fast) var(--e-std); }
.hl-say.on { opacity: 1; }
.hl-say b { display: block; font: 700 var(--fs-ui) "Noto Sans JP", var(--f-body); }
.hl-say small { display: block; font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }
.hl-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }

/* звук и музыка */
.hl-snd, .hl-mus { min-height: var(--hl-btn); min-width: var(--hl-btn); border: 0; border-radius: var(--r-full); background: rgba(255,255,255,.92); cursor: pointer; font-size: 1.05em; box-shadow: 0 4px 12px rgb(var(--c-deep-rgb) / .25); }
.hl-mus.on { background: var(--c-gold); }
.hl-snd:focus-visible, .hl-mus:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* цифровой прицел зениток — холст поверх сцены */
.hl-sight2 { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* тепловизор: кнопка в нижней панели */
.hl-ir { min-height: var(--hl-btn); min-width: var(--hl-btn); border: 0; border-radius: var(--r-full); background: rgba(255,255,255,.92); cursor: pointer; font-size: 1.05em; box-shadow: 0 4px 12px rgb(var(--c-deep-rgb) / .25); }
.hl-ir.on { background: var(--c-gold); }
.hl-ir:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* в режимах управления у режимов только значки — панель в один ряд, не налезает на подсказку */
.hl.is-ctl .hl-mode b { display: none; }
.hl.is-ctl .hl-hint { bottom: calc(var(--hl-pad) * 3 + var(--hl-bar-h, 44px) + var(--hl-btn)); }

/* телефон в обычном виде: окно облёта маленькое — только «🎮 Играть» (во весь экран); вся панель — в полном экране */
.hl-full b { display: none; margin-left: var(--s-xxs); }
@media (max-width: 640px) {
  .hl:not(.is-full):not(:fullscreen) .hl-modes, .hl:not(.is-full):not(:fullscreen) .hl-sys > :not(.hl-full), .hl:not(.is-full):not(:fullscreen) .hl-hud, .hl:not(.is-full):not(:fullscreen) .hl-speed, .hl:not(.is-full):not(:fullscreen) .hl-sight2 { display: none !important; }
  .hl:not(.is-full):not(:fullscreen) .hl-full { background: var(--c-gold); padding: 0 var(--s-xs2); }
  .hl:not(.is-full):not(:fullscreen) .hl-full b { display: inline; }
  .hl:not(.is-full):not(:fullscreen) .hl-full::before { content: "🎮"; margin-right: var(--s-xxs); }
}
.hl-full i { font-style: normal; }
@media (max-width: 640px) { .hl:not(.is-full):not(:fullscreen) .hl-full i { display: none; } }
/* телефон стоя во весь экран (директор 19.10: «оптимизируй расположение кнопок в вертикальном режиме»):
   звук, музыка, тепловизор, фрегат, экран — столбиком справа сверху; внизу слева джойстик и ползунок,
   справа — кнопки действий значками и крупная «Огонь»; режимы в управлении не нужны — есть «Выйти» */
@media (max-width: 640px) {
  /* отступы — по замеренному низу соседей (main.js → layout: --hl-fish-b, --hl-exit-b), не числами «под соседа» */
  .hl:is(.is-full, .is-native-full) .hl-sys { position: absolute; right: var(--hl-pad); top: calc(var(--hl-fish-b, 84px) + var(--hl-pad)); bottom: auto; flex-direction: column; }
  .hl.is-ctl .hl-status { max-width: calc(100% - 3 * var(--hl-pad) - var(--hl-exit-w, 96px)); border-radius: var(--r-md); } /* статус пушки не под «Выйти» */
  .hl:is(.is-full, .is-native-full).is-ctl .hl-sys { top: calc(var(--hl-exit-b, 98px) + var(--hl-pad)); }
  .hl:is(.is-full, .is-native-full) .hl-sys > * { min-width: var(--hl-btn); min-height: var(--hl-btn); padding: 0; }
  .hl:is(.is-full, .is-native-full) .hl-bar { right: var(--hl-pad); }
  .hl.is-ctl .hl-modes { display: none; }
  .hl.is-ctl .hl-bar { left: var(--hl-pad); right: auto; }
  .hl.is-ctl .hl-speed input { width: 76px; }
  .hl.is-ctl .hl-acts, .hl.is-ctl .hl-joy { bottom: calc(var(--hl-pad) * 2 + var(--hl-btn)); }
  .hl.is-ctl .hl-acts { max-width: calc(100% - 88px - 3 * var(--hl-pad)); gap: var(--s-xxs2); align-items: end; } /* 88px — ширина джойстика на телефоне */
  .hl.is-ctl .hl-act { min-width: var(--hl-btn); padding: 0 var(--s-xxs); }
  .hl.is-ctl .hl-act b { display: none; }
  .hl.is-ctl .hl-act span { font-size: 1.1em; }
  .hl.is-ctl .hl-act[data-act="fire"] { order: 99; min-width: calc(var(--hl-btn) * 1.75); min-height: calc(var(--hl-btn) * 1.75); background: var(--c-red); color: #fff; flex-direction: column; gap: 0; }
  .hl.is-ctl .hl-act[data-act="fire"] b { display: block; font-size: var(--fs-eyebrow); }
  .hl.is-ctl .hl-act[data-act="fire"].on { background: var(--c-gold); color: var(--c-ink); }
  .hl.is-ctl .hl-hint { left: var(--hl-pad); right: calc(var(--hl-pad) * 2 + var(--hl-btn)); transform: none; width: auto; max-width: none; text-align: left; }
}

/* раскладка по измеренным высотам (main.js → layout): нижняя панель --hl-bar-h, строка времени --hl-now-h, статус --hl-st-h */
.hl-acts, .hl-joy { bottom: calc(var(--hl-pad) * 2 + var(--hl-bar-h, 44px)); }
.hl-hint { bottom: calc(var(--hl-pad) * 2 + var(--hl-bar-h, 44px)); }
.hl-status { top: calc(var(--hl-pad) + var(--hl-now-h, 30px) + 6px); }
.hl-ticker { top: calc(var(--hl-pad) + var(--hl-now-h, 30px) + var(--hl-st-h, 0px) + 6px); max-width: min(70%, calc(100% - 2 * var(--hl-pad) - 120px)); }
@media (max-width: 640px) { .hl.is-ctl .hl-hint { top: calc(max(var(--hl-pad) + var(--hl-now-h, 30px) + var(--hl-st-h, 0px), var(--hl-exit-b, 98px)) + 6px); bottom: auto; } } /* ниже «Выйти ✕» — не под ней */
/* сколько форели в озере — одно число вверху справа, у компаса (ADR-35, дополнение 19.10) */
.hl-fishtotal { position: absolute; top: var(--hl-pad); right: calc(var(--hl-pad) * 2 + 40px * var(--hl-kc, 1)); margin: 0; padding: 2px var(--s-xs2); border-radius: var(--r-md); background: rgb(var(--c-deep-rgb) / .62); color: #fff; font: 600 var(--fs-ui) var(--f-body); white-space: nowrap; pointer-events: none; }
.hl-fishtotal[hidden] { display: none; }
/* зенитки: подсказка висит всё время — сбоку, не поверх стволов и прицела */
@media (min-width: 641px) {
  .hl[data-mode="vulcan"] .hl-hint, .hl[data-mode="cannon"] .hl-hint, .hl[data-mode="fgun"] .hl-hint { left: var(--hl-pad); transform: none; max-width: min(40%, 340px); text-align: left; font-size: var(--fs-eyebrow); line-height: 1.35; }
}
@media (max-width: 640px) { .hl-fishtotal { top: calc(var(--hl-pad) + 44px); right: var(--hl-pad); } }
@media (max-width: 640px) { .hl.is-ctl .hl-fishtotal { display: none; } } /* на телефоне в управлении там кнопка «Выйти» */

/* Поездка в Токио (зона команды): план по часам, цвет — вид дела */
.tokyo-card { --k-ride: var(--c-ink-soft); --k-shop: var(--c-trout-olive); --k-food: var(--c-jp-red); --k-sight: var(--c-primary); --k-air: var(--c-gold); --k-stay: var(--c-cz-blue); }
.tokyo-hotel { margin: var(--s-sm) 0; }
.tokyo-kinds { display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.tk-kind { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.6; padding: 0 var(--s-xs); border-radius: 999px; color: #fff; background: var(--k-ride); vertical-align: middle; }
.tk-kind.k-shop { background: var(--k-shop); } .tk-kind.k-food { background: var(--k-food); } .tk-kind.k-sight { background: var(--k-sight); }
.tk-kind.k-air { background: var(--k-air); color: var(--c-ink); } .tk-kind.k-stay { background: var(--k-stay); }
.tokyo-day { list-style: none; margin: var(--s-xs) 0 0; padding: 0; position: relative; }
.tokyo-day::before { content: ""; position: absolute; left: 5.6em; top: 6px; bottom: 6px; width: 2px; background: var(--c-line); }
.tokyo-day li { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: var(--s-sm); padding: var(--s-xxs) 0 var(--s-xs); position: relative; }
.tokyo-day li::before { content: ""; position: absolute; left: calc(5.6em - 4px); top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--k-ride); box-shadow: 0 0 0 2px var(--c-surface); }
.tokyo-day li.k-shop::before { background: var(--k-shop); } .tokyo-day li.k-food::before { background: var(--k-food); } .tokyo-day li.k-sight::before { background: var(--k-sight); }
.tokyo-day li.k-air::before { background: var(--k-air); } .tokyo-day li.k-stay::before { background: var(--k-stay); }
.tk-time { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--c-ink-soft); white-space: nowrap; }
.tk-body { padding-left: var(--s-sm); min-width: 0; }
@media (max-width: 640px) {
  .tokyo-day::before { left: 4.6em; }
  .tokyo-day li { grid-template-columns: 4em minmax(0, 1fr); }
  .tokyo-day li::before { left: calc(4.6em - 4px); }
  .tk-time { font-size: 11px; white-space: normal; }
}

/* облёт: настройки ⚙ и справка по управлению (ADR-35, дополнение 2026-10-21; как меню caterpillar) */
.hl-cfg { min-height: var(--hl-btn); min-width: var(--hl-btn); border: 0; border-radius: var(--r-full); background: rgba(255,255,255,.92); cursor: pointer; font-size: 1.05em; box-shadow: 0 4px 12px rgb(var(--c-deep-rgb) / .25); }
.hl-cfg.on { background: var(--c-gold); }
.hl-cfg:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hl.no-pins .hl-pins { display: none; }
.hl:not(.is-ctl) .hl-gl, .hl[data-mode="cinema"] .hl-gl, .hl[data-mode="free"] .hl-gl { cursor: grab; }
.hl:not(.is-ctl) .hl-gl:active, .hl[data-mode="cinema"] .hl-gl:active, .hl[data-mode="free"] .hl-gl:active { cursor: grabbing; }
.hl-set, .hl-help {
  position: absolute; right: var(--hl-pad); top: var(--hl-pad); z-index: 3; width: min(360px, calc(100% - 2 * var(--hl-pad))); max-height: calc(100% - 3 * var(--hl-pad) - var(--hl-btn));
  overflow: auto; overscroll-behavior: contain; padding: var(--s-xs2) var(--s-sm); border-radius: var(--r-md);
  background: rgb(var(--c-deep-rgb) / .9); color: #fff; font-size: var(--fs-caption); box-shadow: 0 10px 28px rgb(var(--c-deep-rgb) / .4); backdrop-filter: blur(10px); touch-action: pan-y;
}
.hl-set[hidden], .hl-help[hidden] { display: none; }
.hl-help { width: min(560px, calc(100% - 2 * var(--hl-pad))); }
.hl-set h3, .hl-help h3 { margin: var(--s-xs) 0 var(--s-xxs); font: 700 var(--fs-eyebrow) var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); }
.hl-set h3:first-child, .hl-help h3:first-child { margin-top: 0; }
.hl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-xs); flex-wrap: wrap; margin: var(--s-xxs) 0; }
.hl-row input[type=range] { flex: 1 1 120px; accent-color: var(--c-gold); }
.hl-chk { justify-content: flex-start; cursor: pointer; }
.hl-chk input { accent-color: var(--c-gold); width: 18px; height: 18px; }
.hl-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-seg button, .hl-btns button, .hl-help > button { min-height: 36px; padding: 0 var(--s-xs2); border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-full); background: transparent; color: #fff; font: 600 var(--fs-caption) var(--f-body); cursor: pointer; }
.hl-seg button.on { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.hl-btns { justify-content: flex-start; margin-top: var(--s-xs); }
.hl-set button:focus-visible, .hl-help button:focus-visible, .hl-set input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hl-help table { width: 100%; border-collapse: collapse; }
.hl-help th, .hl-help td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.14); text-align: left; vertical-align: top; }
.hl-help thead th { color: var(--c-gold); font-weight: 700; }
.hl-help tbody th { font-weight: 600; }
.hl-help p { margin: var(--s-xs) 0; opacity: .85; }
@media (pointer: coarse) { .hl-help .hl-pc { display: none; } } /* на телефоне — только столбец жестов (как справка caterpillar) */
@media (max-width: 640px) { .hl:is(.is-full, .is-native-full) :is(.hl-set, .hl-help) { top: calc(var(--hl-fish-b, 84px) + var(--hl-pad)); right: calc(var(--hl-sys-w, 48px) + 2 * var(--hl-pad)); width: auto; left: var(--hl-pad); max-height: calc(100% - var(--hl-fish-b, 84px) - 3 * var(--hl-pad) - var(--hl-btn)); } } /* столбец ⚙ и звука справа остаётся видимым */

/* «Озеро»: снимки дорожных камер у Хираи (MLIT, раз в 10 мин) */
.lake-cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-sm); margin: var(--s-xs) 0; }
.lake-cam { margin: 0; }
.lake-cam img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--c-primary-deep); box-shadow: var(--shadow); }
.lake-cam figcaption { margin-top: var(--s-xxs); font-size: var(--fs-caption); color: var(--c-ink-soft); }
.lake-cam.is-off img { opacity: .25; }
/* живое видео (YouTube, cvn и др.): сначала обложка-кнопка, плеер грузится по нажатию */
.lake-live { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-primary-deep) center / cover no-repeat; box-shadow: var(--shadow); cursor: pointer; }
.lake-live::after { content: "▶"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--c-red-rgb) / .9); color: #fff; font-size: 1.4rem; }
.lake-live .lake-live-tag { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--r-full); background: var(--c-red); color: #fff; font-size: var(--fs-caption); font-weight: 700; }
.lake-live-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); }
html.sd-cursor :is(.album-view, .lightbox) { cursor: auto; } /* прицел дуэли живёт ниже альбома и лупы — там обычный курсор */

/* облёт: обратный отсчёт перезарядки и залпа под прицелом (директор 21.10) — кольцо с долей прошедшего (--p) и крупная цифра */
.hl-count[hidden] { display: none; }
/* left/top ставит main.js — у правого верхнего края круга прицела (sight.js: радиус 0,16·min(W,H)) */
.hl-count { --c: rgba(255, 210, 120, .95); position: absolute; left: 60%; top: 20%; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; align-content: center; pointer-events: none; background: rgba(8, 12, 16, .55); }
.hl-count::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .16) 0); -webkit-mask: radial-gradient(circle, transparent 0 31px, #000 32px); mask: radial-gradient(circle, transparent 0 31px, #000 32px); }
.hl-count.is-reload { --c: rgba(255, 110, 80, .95); }
.hl-count b, .hl-count span { position: relative; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); line-height: 1; }
.hl-count b { font: 700 26px/1 var(--font-head, system-ui); font-variant-numeric: tabular-nums; }
.hl-count span { font-size: 11px; letter-spacing: .04em; margin-top: 2px; text-transform: uppercase; opacity: .85; }

/* облёт: кадры в секунду — тонко, в нижнем левом углу над нижней панелью (директор 22.10); джойстик на экране — правее него */
.hl-fps { position: absolute; left: var(--hl-pad); bottom: calc(var(--hl-pad) * 2 + var(--hl-bar-h, 44px) + 4px); z-index: 3; pointer-events: none; font: 300 11px/1 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .04em; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.hl:has(.hl-joy:not([hidden])) .hl-fps { left: calc(var(--hl-pad) + 100px); }

/* Памятка на сектор (v1.78.0): «если видишь → делай», проводки и правила — сверху разбора Хираи */
.pb { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--s-sm); margin-bottom: var(--s-md); }
.pb-title { margin: 0; font-size: var(--fs-h3, 1.15rem); color: var(--c-primary-deep); }
.pb-lead { margin: 0; padding: var(--s-xs) var(--s-sm); border-left: 3px solid var(--c-red); background: var(--c-surface-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-weight: 600; }
.pb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-xs); }
.pb-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-xs2); padding: var(--s-xs) var(--s-xs2); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.pb-where { display: grid; justify-items: center; align-content: start; gap: 4px; }
.pb-where small { font-size: var(--fs-micro); color: var(--c-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 14px); grid-auto-rows: 10px; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: linear-gradient(var(--c-surface-soft), rgb(var(--c-deep-rgb) / .16)); }
.pb-grid i { border-radius: 2px; background: rgb(var(--c-primary-rgb) / .08); }
.pb-grid i.on { background: var(--c-primary); }
.pb-text { min-width: 0; display: grid; gap: 3px; }
.pb .pb-text > p { margin: 0; font-size: var(--fs-caption); line-height: 1.45; }
.pb-name { font-size: var(--fs-ui); color: var(--c-ink); }
.pb-k { display: inline-block; min-width: 3.6em; padding: 0 6px; margin-right: 2px; border-radius: var(--r-full); font-size: var(--fs-micro); font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.pb-if { background: var(--c-surface-soft); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.pb-do { background: var(--c-primary); color: #fff; }
.pb-lures { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-lure { padding: 0 var(--s-xs); border-radius: var(--r-full); border: 1px solid var(--c-line); background: var(--c-surface-soft); font-size: var(--fs-micro); line-height: 1.6; }
.pb-lure small { color: var(--c-ink-soft); }
.pb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-xs); }
.pb-box { padding: var(--s-xs) var(--s-sm); border-radius: var(--r-md); background: var(--c-surface-soft); }
.pb-box h5 { margin: 0 0 var(--s-xs); font-size: var(--fs-ui); }
.pb-rets { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s-xs); }
.pb-rets span { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--s-xs) 1px 2px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); font-size: var(--fs-caption); }
.pb-rets b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: var(--fs-micro); }
.pb-duel { margin: var(--s-xs) 0 0; padding-top: var(--s-xs); border-top: 1px solid var(--c-line); font-size: var(--fs-caption); }
.pb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pb-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow-wrap: anywhere; gap: 2px var(--s-xs); align-items: baseline; font-size: var(--fs-caption); line-height: 1.4; }
.pb-rule small { grid-column: 2; font-size: var(--fs-micro); color: var(--c-ink-soft); }
.pb-badge { font-style: normal; padding: 0 6px; border-radius: var(--r-full); font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; }
.pb-rule.k-ok .pb-badge { background: color-mix(in srgb, var(--c-success) 18%, #fff); color: #1d6b43; }
.pb-rule.k-no .pb-badge { background: color-mix(in srgb, var(--c-red) 12%, #fff); color: var(--c-red); }
.pb-rule.k-chk .pb-badge { background: color-mix(in srgb, var(--c-gold) 40%, #fff); color: var(--c-ink); }
.pb-rule.k-red .pb-badge { background: var(--c-red); color: #fff; }
/* спойлер «Подробный разбор» — без класса .tip: его .tip p перебивал размеры лида и подписей карты */
.pb-more { border-top: 1px solid var(--c-line); }
.pb-more > summary { cursor: pointer; padding: var(--s-xs) 0; font-weight: 700; list-style: none; display: flex; align-items: center; gap: var(--s-sm); min-height: var(--tap-min); }
.pb-more > summary::-webkit-details-marker { display: none; }
.pb-more > summary::after { content: "+"; margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-lead); color: var(--c-primary); flex: none; }
.pb-more[open] > summary::after { content: "−"; }

/* Ход дня соревнований (v1.79.0): день по часам, полоса поединка с нумерованной легендой, каждая рыба, очки */
.fl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-sm); margin-bottom: var(--s-md); }
.fl-day { list-style: none; margin: 0; padding: 0 0 0 var(--s-sm); border-left: 2px solid var(--c-primary); display: grid; gap: var(--s-xs); }
.fl-day li { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s-xs); font-size: var(--fs-caption); line-height: 1.45; }
.fl-day li::before { content: ""; position: absolute; left: calc(-1 * var(--s-sm) - 6px); top: .35em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primary); }
.fl-day time { font-weight: 700; color: var(--c-primary-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .fl-day li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.fl-bar { display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--s-xs); }
.fl-seg { display: grid; place-items: center; min-width: 22px; font-size: var(--fs-micro); font-weight: 700; color: #fff; }
.fl-seg.k-sig { background: var(--c-gold); color: var(--c-ink); }
.fl-seg.k-fish { background: var(--c-primary); }
.fl-seg.k-fish + .fl-seg.k-swap + .fl-seg.k-fish { background: var(--c-primary-deep); }
.fl-seg.k-swap { background: var(--c-red); }
.fl-seg.k-end { background: var(--c-ink); }
.fl-legend { margin: 0 0 var(--s-xs); padding-left: 1.6em; display: grid; gap: 2px; font-size: var(--fs-caption); }
.fl-legend li::marker { font-weight: 700; color: var(--c-primary); }
.fl-notes, .fl-fish { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--fs-caption); line-height: 1.45; }
.pb-box .fl-never, .pb-box .fl-score, .pb-box .fl-calc { margin: var(--s-xs) 0 0; font-size: var(--fs-caption); line-height: 1.45; }
.pb-box .fl-score { margin-top: 0; font-weight: 600; }
.fl-never { padding: var(--s-xxs) var(--s-xs); border-left: 3px solid var(--c-red); background: var(--c-surface); }