/*
  ВИЗУАЛЬНЫЙ ЯЗЫК

  Регистр: спортивная лига в декорациях пост-апокалипсиса.
  Это по сути турнирная таблица чемпионата — поэтому логика подачи взята
  у спортивных трансляций (крупные цифры, цвет команды, драматизм places),
  а фактура — индустриальная: почти чёрный, сигнальный оранжевый, зерно.

  Сначала телефон: аудитория играет и заходит с телефона.
*/

/* ── Токены: тёмная тема (по умолчанию) ─────────────────────────────────── */
:root {
  --bg:        #0a0b0d;
  --surface:   #111318;
  --raised:    #171b22;
  --raised-2:  #1e232b;
  --line:      #23272f;
  --line-soft: #191d23;

  --text:      #f4f6f9;
  --dim:       #99a1ad;
  --mute:      #666e7b;

  --accent:    #ff6a2b;
  --accent-dk: #d4501a;
  --gold:      #ffc93c;
  --win:       #35d07f;
  --loss:      #ff4757;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --wrap: 1120px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.7);

  --ease: cubic-bezier(.22,.68,.34,1);

  /* Пастельные оттенки статусов и ссылок: на тёмном фоне — светлые. */
  color-scheme: dark;
  --link:      #7fb2ff;
  --soft-ok:   #9be9bd;
  --soft-bad:  #ffb3ba;
  --soft-warn: #ffe1a3;
}

/* ── Токены: светлая тема ──────────────────────────────────────────────── */
/* «Arctic Command»: холодный командный центр премиальной AAA-игры. База —
   светло-серый с голубым подтоном (не белый!), панели — белое стекло,
   текст — графитово-синие чернила, сигнальный акцент — янтарь. Пропорция:
   ~70% холодных нейтральных, ~20% графит, ~10% янтарь и статусы. */
[data-theme="light"] {
  --bg:        #ece9e1;
  --surface:   #f7f4ec;
  --raised:    #e5e0d5;
  --raised-2:  #fbf8f1;
  --line:      #d4ccbd;
  --line-soft: #dfd8ca;

--text:      #2b2822;
  --dim:       #625d53;
  --mute:      #756e61;

  --accent:    #c05a24;
  --accent-dk: #943e19;
  --gold:      #9a6a24;
  --win:       #28745a;
  --loss:      #b84b45;

  --shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 12px 32px -24px rgba(69,51,30,.32);

  color-scheme: light;
  --link:      #79502b;
  --soft-ok:   #28745a;
  --soft-bad:  #b84b45;
  --soft-warn: #9a6a24;
}

/* ── Переключатель темы ──────────────────────────────────────────────────── */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  color: var(--dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-size: 17px;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-soft); background: color-mix(in srgb, var(--text) 4%, transparent); }
/* Иконки — inline-SVG внутри span: центрируем, чтобы не прыгали. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: grid; place-items: center; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: grid; }
[data-theme="light"] .theme-toggle .icon-sun { display: grid; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Онлайн индикатор ─────────────────────────────────────────────────── */
.online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 6px var(--win);
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 4px;
}
.forum-nick .online-dot { margin-left: 3px; vertical-align: -1px; }

/* ── Статистика сервера и турниры ──────────────────────────────────────── */
.server-stats { margin: 10px 0; }
.server-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 9px;
}
.server-stat {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  text-align: center;
}
.server-stat b { display: block; font-size: 17px; font-weight: 700; }
.server-stat span { display: block; margin-top: 2px; color: var(--dim); font-size: 10.5px; }

.server-stats__chart {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}
.server-stats__chart .spark { width: 100%; height: 28px; }
.server-stats__labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  color: var(--dim);
  font-size: 9px;
  text-align: center;
}

/* ── Countdown / Timer ────────────────────────────────────────────────── */
.quart-timer {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--raised);
  font-size: 13px;
}
.quart-timer .num {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}

/* ── Статья недели ─────────────────────────────────────────────────────── */
.post-weekly {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--accent-dk);
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--raised), var(--raised-2));
}
.post-weekly::before {
  content: '✨';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 17px;
}
.post-weekly .forum-post__title { font-size: 15px; font-weight: 800; }
.post-weekly .forum-post__by { font-size: 12px; }

/* ── Гиды: markdown-секция ─────────────────────────────────────────────── */
.guide-content {
  line-height: 1.6;
}
.guide-content h2 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; }
.guide-content h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 700; }
.guide-content ul { padding-left: 18px; }
.guide-content li { margin-bottom: 4px; }

* { box-sizing: border-box; }
::selection { background: var(--accent); color: #0a0b0d; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: 'cv02','cv03','cv04','tnum' 0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Атмосфера: два мягких пятна света и едва заметное зерно поверх.
   Зерно — то, что отличает «плоский тёмный сайт» от плотной картинки. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 8% -8%,  rgba(255,106,43,.10), transparent 62%),
    radial-gradient(760px 460px at 96% 2%,  rgba(53,208,127,.055), transparent 58%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-head, #app, .site-foot { position: relative; z-index: 2; }

h1,h2,h3,h4 {
  font-family: Unbounded, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }

.muted { color: var(--mute); font-size: .87em; }
.num { font-variant-numeric: tabular-nums; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.site-head__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
@media (min-width: 760px) {
  .site-head__inner {
    padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
}

.brand { display: flex; align-items: center; gap: 11px; padding: 13px 0 9px; text-decoration: none; color: inherit; }
.brand__num {
  font-family: Unbounded, sans-serif; font-weight: 800; font-size: 17px;
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #14100c;
  background: linear-gradient(145deg, #ffa04a, var(--accent));
  box-shadow: 0 4px 16px -4px rgba(255,106,43,.55);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text b { font-family: Unbounded, sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.brand__text small { color: var(--mute); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.nav::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .nav { padding-bottom: 0; } }

.nav__link {
  flex: none; position: relative;
  padding: 8px 14px;
  font-size: 13.5px; font-weight: 500;
  color: var(--dim); text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4.5%, transparent); }
.nav__link.is-active { color: #14100c; background: var(--accent); font-weight: 600; }

/* ── Общие блоки ────────────────────────────────────────────────────────── */
#app { padding-top: 24px; padding-bottom: 48px; }

.panel {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, #000));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  position: relative;
}
/* Тонкий световой кант сверху — даёт ощущение объёма, а не плоской заливки. */
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent);
}
@media (min-width: 760px) { .panel { padding: 24px; } }

.panel__head { margin-bottom: 16px; }
.panel__head h2 { font-size: clamp(17px, 2.4vw, 21px); }
.panel__head p { margin: 5px 0 0; }

.eyebrow {
  font-family: Inter, sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

.grid-2 { display: grid; gap: 18px; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.loading { padding: 80px 0; text-align: center; color: var(--mute); }
.error { border-color: var(--loss); }

/* ── Главная: герой ─────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(700px 300px at 80% -30%, rgba(255,106,43,.14), transparent 60%),
    linear-gradient(165deg, var(--raised-2), var(--surface) 62%);
  padding: 22px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
@media (min-width: 760px) { .hero { padding: 30px 32px; } }

/* Диагональная штриховка — единственный «фактурный» элемент на странице.
   Один раз и по делу: даёт индустриальный характер, не превращаясь в шум. */
.hero::after {
  content: ''; position: absolute;
  top: -30%; right: -6%; width: 220px; height: 170%;
  background: repeating-linear-gradient(58deg, rgba(255,106,43,.075) 0 3px, transparent 3px 13px);
  transform: rotate(4deg);
  pointer-events: none;
}

.hero__top { position: relative; z-index: 1; }
.hero__week { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero__word {
  font-family: Unbounded, sans-serif; font-weight: 600;
  font-size: clamp(17px, 3.4vw, 26px);
  color: var(--dim);
  letter-spacing: -.01em;
}
.hero__num {
  font-family: Unbounded, sans-serif; font-weight: 800;
  font-size: clamp(52px, 13vw, 96px);
  line-height: .84;
  letter-spacing: -.05em;
  background: linear-gradient(172deg, #fff 18%, #7d848f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__dates { font-size: 13.5px; color: var(--dim); margin-top: 10px; }
.hero__sep { color: var(--mute); margin: 0 4px; }

/* Карточка лидера */
.leader {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 16px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--gold) 9%, color-mix(in srgb, var(--text) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.leader__crown { font-size: 21px; filter: saturate(1.2); }
.leader__body { flex: 1; min-width: 150px; }
.leader__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.leader__name { font-family: Unbounded, sans-serif; font-size: clamp(19px, 4.6vw, 27px); font-weight: 700; margin-top: 2px; }
.leader__meta { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.leader__pts {
  font-family: Unbounded, sans-serif; font-weight: 800;
  font-size: clamp(30px, 8vw, 46px); line-height: 1;
  color: var(--gold);
}

/* Победа в VS / поражение в VS */
.split { display: grid; gap: 14px; margin-top: 20px; position: relative; z-index: 1; }
@media (min-width: 720px) { .split { grid-template-columns: 1fr 1fr; gap: 20px; } }

.split__col h3 {
  font-family: Inter, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
}
.split__col--win h3 { color: var(--win); }
.split__col--loss h3 { color: var(--loss); }
.split__count {
  font-family: Unbounded, sans-serif; font-size: 12px; letter-spacing: 0;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text);
}
.split__bar { height: 3px; flex: 1; border-radius: 2px; background: currentColor; opacity: .22; }

.tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.tile {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tag-color, var(--mute));
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.tile:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--text) 7%, transparent); }
.tile b { font-family: Unbounded, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--tag-color); }

/* ── Состояние до первого результата ────────────────────────────────────── */
.preseason { position: relative; z-index: 1; margin-top: 20px; max-width: 62ch; }
.preseason__lead { margin: 0; font-size: clamp(14px, 2.2vw, 16px); color: var(--text); line-height: 1.6; }
.preseason__note { margin: 10px 0 0; }
.preseason__title {
  font-family: Inter, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
}

/* ── Взлёты и падения ───────────────────────────────────────────────────── */
.movers { display: grid; gap: 18px; }
@media (min-width: 520px) { .movers { grid-template-columns: 1fr 1fr; } }
.movers__title { font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 9px; }
.movers__title--up { color: var(--win); }
.movers__title--down { color: var(--loss); }
.movers__list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.movers__list li { padding: 7px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.movers__list li:last-child { border-bottom: 0; }

/* ── Подиум ─────────────────────────────────────────────────────────────── */
.podium { list-style: none; margin: 0; padding: 0; }
.podium__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.podium__item:last-child { border-bottom: 0; }
.podium__place {
  font-family: Unbounded, sans-serif; font-size: 19px; font-weight: 800;
  width: 26px; color: var(--mute);
}
.podium__item--1 .podium__place { color: var(--gold); }
.podium__item--2 .podium__place { color: #c8cdd6; }
.podium__item--3 .podium__place { color: #c98a52; }
.podium__name { flex: 1; font-weight: 500; }
.podium__points { font-family: Unbounded, sans-serif; font-size: 18px; font-weight: 700; color: var(--win); }

/* ── График ─────────────────────────────────────────────────────────────── */
.ch { width: 100%; overflow: hidden; }
.ch svg { width: 100%; height: auto; display: block; overflow: visible; }
.ch__grid { stroke: var(--line); stroke-width: 1; }
.ch__grid--zero { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-dasharray: 3 3; }
.ch__ytick, .ch__xtick {
  fill: var(--mute); font-family: Inter, sans-serif; font-size: 10px; font-variant-numeric: tabular-nums;
}
.ch__ytick { text-anchor: end; }
.ch__xtick { text-anchor: middle; }
.ch__label { font-family: Unbounded, sans-serif; font-size: 11px; font-weight: 700; }

/* ── Рейтинг: панель управления ─────────────────────────────────────────── */
[hidden] { display: none !important; }

.ctl {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-bottom: 16px;
}

.search {
  position: relative; flex: 1 1 210px; min-width: 0;
  display: flex; align-items: center;
}
.search svg {
  position: absolute; left: 12px; width: 15px; height: 15px;
  fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%;
  font: inherit; font-size: 14px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px 9px 34px;
  outline: none;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.search input::placeholder { color: var(--mute); }
.search input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--raised-2);
}
.search input::-webkit-search-cancel-button { filter: invert(.6); cursor: pointer; }

.seg {
  display: flex; gap: 2px; flex: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.seg__btn {
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--dim);
  background: none; border: 0; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-on { color: #14100c; background: var(--accent); font-weight: 600; }

/* ── Рейтинг: строки ────────────────────────────────────────────────────── */
.lad__head {
  display: none;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute);
  padding: 0 8px 10px; border-bottom: 1px solid var(--line);
}
.ta-r { text-align: right; }

.lad__row {
  display: grid;
  grid-template-columns: 54px auto 1fr auto;
  grid-template-areas:
    "place ident ident pts"
    "place form  wl    pts";
  gap: 3px 10px;
  align-items: center;
  padding: 11px 8px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.lad__row:hover { background: color-mix(in srgb, var(--text) 3.2%, transparent); border-left-color: var(--tag-color); }
.lad__row--off { opacity: .42; }
.lad__row--m1 { border-left-color: var(--gold); }
.lad__row--m2 { border-left-color: #c8cdd6; }
.lad__row--m3 { border-left-color: #c98a52; }

.lad__place { grid-area: place; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.lad__place b { font-family: Unbounded, sans-serif; font-size: 15px; font-weight: 700; color: var(--dim); }
.lad__row--m1 .lad__place b { color: var(--gold); }
.lad__row--m2 .lad__place b { color: #c8cdd6; }
.lad__row--m3 .lad__place b { color: #c98a52; }

.lad__ident { grid-area: ident; display: flex; align-items: center; gap: 0; flex-wrap: wrap; min-width: 0; }
.lad__name { font-weight: 500; }
.lad__off { font-size: 11px; color: var(--mute); font-style: normal; margin-left: 7px; }

.lad__form { grid-area: form; }
.lad__wl { grid-area: wl; font-family: Unbounded, sans-serif; font-size: 12.5px; font-weight: 600; }
.lad__wl b { font-weight: 700; }
.lad__wl i { color: var(--mute); font-style: normal; margin: 0 3px; opacity: .6; }
.c-win { color: var(--win); }
.c-loss { color: var(--loss); }

.lad__pts {
  grid-area: pts; text-align: right;
  font-family: Unbounded, sans-serif; font-size: 19px; font-weight: 800;
  color: var(--dim);
}
.lad__pts.pos { color: var(--win); }
.lad__pts.neg { color: var(--loss); }

.lad__spark { grid-area: spark; display: none; }

.lad__empty { text-align: center; color: var(--mute); padding: 28px 0; font-size: 14px; }
.lad__period {
  margin: 8px 0 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel--quarter .lad__head { display: none; }
.panel--quarter .lad__row {
  grid-template-columns: 54px 1fr auto;
  grid-template-areas:
    "place ident pts"
    "place form pts";
}
.panel--quarter .lad__wl,
.panel--quarter .lad__spark { display: none; }
.panel--quarter .lad__form { padding-top: 3px; }
.panel--quarter .form { gap: 5px; }
.panel--quarter .dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}

@media (min-width: 880px) {
  .panel--quarter .lad__row {
    grid-template-columns: 74px minmax(180px, 1fr) 74px;
    grid-template-areas:
      "place ident pts"
      "place form pts";
    gap: 5px 10px;
  }
  .panel--quarter .lad__pts { align-self: center; }
}

.lad__count { margin: 14px 0 0; }

/* Строка рейтинга — ссылка на карточку альянса. */
a.lad__row { color: inherit; text-decoration: none; cursor: pointer; }
a.lad__row:hover .lad__name { color: var(--tag-color); }

/* ── Карточка альянса ───────────────────────────────────────────────────── */
.back {
  display: inline-block; margin-bottom: 14px;
  font-size: 13px; font-weight: 500; color: var(--dim); text-decoration: none;
  transition: color .15s var(--ease);
}
.back:hover { color: var(--accent); }

.ally {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(620px 260px at 12% -40%, color-mix(in srgb, var(--tag-color) 22%, transparent), transparent 62%),
    linear-gradient(165deg, var(--raised-2), var(--surface) 64%);
  padding: 22px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  animation: rise .5s var(--ease) both;
}
@media (min-width: 760px) { .ally { padding: 28px 30px; } }

.ally__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ally__tag {
  flex: none;
  font-family: Unbounded, sans-serif; font-weight: 800;
  font-size: clamp(16px, 3.6vw, 22px); letter-spacing: .02em;
  padding: 10px 14px; border-radius: 12px;
  color: var(--tag-color);
  background: color-mix(in srgb, var(--tag-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-color) 40%, transparent);
}
.ally__name { font-size: clamp(25px, 6.4vw, 42px); letter-spacing: -.03em; }
.ally__sub { margin: 5px 0 0; font-size: 13px; color: var(--dim); }

.ally__stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 620px) { .ally__stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ally__stats { grid-template-columns: repeat(6, 1fr); } }

.stat { background: var(--surface); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; }
.stat__label { font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--mute); }
.stat__value {
  font-family: Unbounded, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.stat__value.pos { color: var(--win); }
.stat__value.neg { color: var(--loss); }

.ch--big svg { min-height: 200px; }
.ch__legend { margin: 8px 0 0; font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 7px; }
.ch__dash { display: inline-block; width: 20px; height: 0; border-top: 1.5px dashed var(--mute); }

/* Хроника всех VS */
.vs { list-style: none; margin: 0; padding: 0; }
.vs__row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  grid-template-areas:
    "week dates  total"
    "week badge  total";
  gap: 2px 12px;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
}
.vs__row:last-child { border-bottom: 0; }
.vs__row--win  { border-left-color: color-mix(in srgb, var(--win) 60%, transparent); }
.vs__row--loss { border-left-color: color-mix(in srgb, var(--loss) 60%, transparent); }
.vs__row--none { opacity: .45; }

.vs__week { grid-area: week; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 13px; color: var(--dim); }
.vs__dates { grid-area: dates; font-size: 12.5px; color: var(--mute); }
.vs__badge {
  grid-area: badge; justify-self: start;
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
}
.vs__badge--win  { color: var(--win);  background: color-mix(in srgb, var(--win) 15%, transparent); }
.vs__badge--loss { color: var(--loss); background: color-mix(in srgb, var(--loss) 15%, transparent); }
.vs__badge--none { color: var(--mute); background: color-mix(in srgb, var(--text) 5%, transparent); }
.vs__sign { display: none; }
.vs__total {
  grid-area: total; text-align: right;
  font-family: Unbounded, sans-serif; font-weight: 700; font-size: 16px; color: var(--dim);
}

@media (min-width: 620px) {
  .vs__row {
    grid-template-columns: 56px 150px 1fr 44px 70px;
    grid-template-areas: "week dates badge sign total";
  }
  .vs__sign { grid-area: sign; display: block; text-align: right; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
}

@media (min-width: 880px) {
  .lad__head, .lad__row {
    /* Имя не должно растягиваться на всю свободную ширину — иначе между ним
       и данными зияет пустота. Слабину забирает график динамики: там она
       превращается в пользу, потому что линия становится читаемее. */
    grid-template-columns: 74px minmax(180px, 22rem) 92px 84px 74px minmax(130px, 1fr);
    grid-template-areas: "place ident form wl pts spark";
    gap: 10px;
  }
  .lad__head { display: grid; }
  .lad__row { padding: 10px 8px; }
  .lad__spark { display: block; }
  .lad__wl { text-align: left; }
  .lad__spark svg { width: 100%; height: 28px; }
}

.tag {
  display: inline-block;
  font-family: Unbounded, sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 7px; border-radius: 5px;
  color: var(--tag-color, var(--dim));
  background: color-mix(in srgb, var(--tag-color, #888) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-color, #888) 26%, transparent);
  margin-right: 8px;
}
.name { font-weight: 500; }

.delta { font-size: 10px; margin-left: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta--up { color: var(--win); }
.delta--down { color: var(--loss); }
.delta--flat { color: var(--mute); opacity: .45; }

.form { display: inline-flex; gap: 3px; }
.dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dot--win  { background: var(--win); }
.dot--loss { background: var(--loss); }
.dot--pending { background: var(--line); border: 1px dashed var(--mute); }

.streak { font-size: 10.5px; margin-left: 7px; white-space: nowrap; font-weight: 600; }
.streak--win { color: var(--accent); }
.streak--loss { color: var(--mute); }
.spark { display: block; }

/* ── Хронология: шапка и стена трофеев ──────────────────────────────────── */
.hero--tl::after { opacity: .7; }
.tl__title { font-size: clamp(26px, 6vw, 40px); margin: 4px 0 0; letter-spacing: -.03em; }

.tl__stats {
  display: flex; flex-wrap: wrap; gap: 22px 34px;
  margin-top: 18px; position: relative; z-index: 1;
}
.tl__stat { display: flex; align-items: baseline; gap: 8px; }
.tl__stat b {
  font-family: Unbounded, sans-serif; font-weight: 800;
  font-size: clamp(26px, 6vw, 38px); line-height: 1;
  color: var(--accent);
}
.tl__stat span { font-size: 12px; color: var(--dim); max-width: 9em; line-height: 1.3; }

.trophies {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  margin-top: 24px; position: relative; z-index: 1;
}
.trophy {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 14px 8px 11px;
  border-radius: var(--r);
  background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 13%, transparent), color-mix(in srgb, var(--text) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  animation: rise .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * .05s);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.trophy:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.trophy__num {
  font-family: Unbounded, sans-serif; font-weight: 800;
  font-size: clamp(24px, 5.4vw, 32px); line-height: 1;
  color: var(--gold);
}
.trophy__date { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.trophy__days { font-size: 10px; color: var(--mute); }

/* ── Итог недели ────────────────────────────────────────────────────────────
   Первое, за чем заходят на вкладку после VS, — поэтому крупно и с цветом
   исхода. Цвета те же, что у победы и поражения в VS: второй язык цветов
   человеку учить не нужно.                                                  */
.verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mute);
  border-radius: var(--r);
}
.verdict--win { border-left-color: var(--win); }
.verdict--loss { border-left-color: var(--loss); }

.verdict__week { text-align: center; flex: none; }
.verdict__week span {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.verdict__week b {
  display: block;
  font-family: Unbounded, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1;
}
.verdict--win .verdict__week b { color: var(--win); }
.verdict--loss .verdict__week b { color: var(--loss); }

.verdict__body { min-width: 0; }
.verdict__text { font-size: clamp(17px, 4.4vw, 26px); letter-spacing: -.02em; margin: 0; }
.verdict__dates { margin: 5px 0 0; font-size: 12.5px; color: var(--mute); }

/* Календарь: год → месяц. Через год недель станет больше пятидесяти,
   и «посмотреть сентябрь» без него означало бы листать всё подряд. */
.cal { margin-top: 18px; }
.cal__label {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 8px;
}
.cal__row { display: flex; flex-wrap: wrap; gap: 6px; }
.cal__row--mo { margin-top: 6px; }
.cal__btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease);
}
.cal__btn:hover { color: var(--text); border-color: var(--mute); }
.cal__btn.is-on {
  color: #0a0b0d;
  background: var(--accent);
  border-color: var(--accent);
}

/* Лента прошлых недель: летопись, которую видно одним взглядом. */
.wks { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; }
.wks__empty { color: var(--mute); font-size: 13px; margin: 12px 0 0; }
.wk {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px 6px 9px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.wk:hover { background: var(--raised-2); }
.wk--win.is-sel { color: var(--win); }
.wk--loss.is-sel { color: var(--loss); }
.wk__num { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 13px; color: var(--dim); }
.wk__what { color: var(--mute); }
.wk__what b { color: var(--dim); }
.wk--win { border-color: color-mix(in srgb, var(--win) 34%, transparent); }
.wk--win .wk__num { color: var(--win); }
.wk--loss { border-color: color-mix(in srgb, var(--loss) 34%, transparent); }
.wk--loss .wk__num { color: var(--loss); }

.ctl--tl { margin: 18px 0 16px; }

/* ── Хронология: лента ──────────────────────────────────────────────────── */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }

.tl__year {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 16px;
}
.tl__year span {
  font-family: Unbounded, sans-serif; font-weight: 700; font-size: 13px;
  color: var(--mute);
  background: var(--surface);
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line);
}
.tl__year::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.tl__empty { text-align: center; color: var(--mute); padding: 20px 0 40px; font-size: 14px; }
.tl::before {
  content: ''; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--line) 22%, var(--line));
  opacity: .5;
}
.tl__item { display: flex; gap: 15px; padding-bottom: 24px; position: relative; }
.tl__body { flex: 1; padding-top: 3px; }
.tl__meta { display: flex; gap: 11px; align-items: baseline; flex-wrap: wrap; margin-bottom: 3px; }
.tl__type { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.tl__meta time { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.tl__body h3 { font-size: 16px; margin-bottom: 4px; }
.tl__body p { margin: 0; color: var(--dim); font-size: 14px; }
.tl__img { max-width: 100%; border-radius: var(--r-sm); margin-top: 11px; border: 1px solid var(--line); }

/* ── Гайд: доказательная часть ──────────────────────────────────────────── */
.guide__sub { margin: 8px 0 0; color: var(--dim); font-size: 13.5px; max-width: 52ch; position: relative; z-index: 1; }
.guide__lead { margin: 8px 0 0; color: var(--dim); font-size: 14px; max-width: 60ch; }

.proofs { display: grid; gap: 20px; margin-top: 24px; position: relative; z-index: 1; }
@media (min-width: 900px) { .proofs { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.proof__label {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.proof__hint { font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); }

.proof__rows { display: grid; gap: 7px; }
.proof__row { display: grid; grid-template-columns: 92px 1fr auto; gap: 9px; align-items: center; }
.proof__who { font-size: 11px; color: var(--mute); }
.proof__bar { position: relative; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text) 5.5%, transparent); overflow: hidden; }
.proof__fill {
  display: block; height: 100%; border-radius: 5px;
  animation: grow .8s var(--ease) both;
}
/* Полоса, расходящаяся от центра: слева минус, справа плюс. */
.proof__bar--div::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: color-mix(in srgb, var(--text) 22%, transparent); z-index: 1;
}
.proof__fill--abs { position: absolute; top: 0; }
.proof__fill--top { background: linear-gradient(90deg, color-mix(in srgb, var(--win) 65%, transparent), var(--win)); }
.proof__fill--bottom { background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 55%, transparent), var(--loss)); }
.proof__val { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 14px; min-width: 44px; text-align: right; }
.proof__val--top { color: var(--win); }
.proof__val--bottom { color: var(--loss); }

@keyframes grow { from { width: 0 !important; } }

/* ── Гайд: карточки принципов ───────────────────────────────────────────── */
.cards { display: grid; gap: 12px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 18px 16px;
  animation: rise .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * .05s);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
.card__num {
  font-family: Unbounded, sans-serif; font-weight: 800; font-size: 12px;
  color: var(--accent); opacity: .75;
  display: block; margin-bottom: 7px;
}
.card h3 { font-size: 16px; margin-bottom: 8px; letter-spacing: -.015em; }
.card__body p { margin: 0 0 8px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.card__body p:last-child { margin-bottom: 0; }

/* ── Гайд: списки ───────────────────────────────────────────────────────── */
.prose--week ul, .prose--dont ul { list-style: none; padding-left: 0; }
.prose--week li, .prose--dont li {
  position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 13.5px;
}
.prose--week li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.prose--dont li::before {
  content: '×'; position: absolute; left: 3px; top: -.05em;
  color: var(--loss); font-size: 15px; font-weight: 700;
}
.prose--week strong { color: var(--text); }

.prose { max-width: 64ch; }
.prose h2 { font-size: 20px; margin: 24px 0 9px; }
.prose h3 { font-size: 15px; margin: 22px 0 8px; color: var(--accent); font-family: Inter, sans-serif; font-weight: 700; letter-spacing: .01em; }
.prose h4 { font-size: 14px; margin: 17px 0 6px; }
.prose p { margin: 0 0 12px; color: var(--dim); }
.prose ul { margin: 0 0 15px; padding-left: 20px; color: var(--dim); }
.prose li { margin-bottom: 6px; }

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  padding-top: 20px; padding-bottom: 34px;
  color: var(--mute); font-size: 12.5px;
}
.site-foot p { margin: 0; }

/* ── Появление ──────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }
@keyframes pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.hero, .panel { animation: rise .5s var(--ease) both; }
.panel:nth-of-type(2) { animation-delay: .06s; }
.panel:nth-of-type(3) { animation-delay: .12s; }

.ch__line {
  stroke-dasharray: var(--dash);
  animation: draw 1.1s var(--ease) both;
  animation-delay: var(--delay, 0s);
}
.ch__dot, .ch__label { animation: pop .4s var(--ease) both; animation-delay: var(--delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ch__line { stroke-dasharray: none; }
  html { scroll-behavior: auto; }
}

/* ── Кварт: отдельный экран comeback-цикла ─────────────────────────────── */
.quart-page {
  --quart-acid: #d3a6ff;
  --quart-cyan: #9f86c9;
  --quart-ink: #11150d;
  position: relative;
  margin-bottom: 18px;
}
.quart-hero {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  padding: 24px 20px 18px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--quart-acid) 36%, var(--line));
  border-radius: 26px;
  background:
    linear-gradient(124deg, rgba(211,166,255,.16), transparent 38%),
    radial-gradient(520px 250px at 93% 6%, color-mix(in srgb, var(--electric) 15%, transparent), transparent 64%),
    #151a15;
  box-shadow: 0 18px 50px -28px rgba(211,166,255,.55), var(--shadow);
}
.quart-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: linear-gradient(135deg, transparent 0 48%, rgba(211,166,255,.16) 48.2% 48.8%, transparent 49% 100%);
  background-size: 28px 28px;
  pointer-events: none;
}
.quart-hero__glow {
  position: absolute;
  width: 220px;
  height: 220px;
  right: 12%;
  top: -110px;
  border-radius: 50%;
  background: var(--quart-acid);
  filter: blur(90px);
  opacity: .13;
}
.quart-hero__top,
.quart-hero__bottom { position: relative; z-index: 1; }
.quart-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.quart-hero__copy { max-width: 590px; }
.quart-kicker,
.quart-section-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--quart-acid);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.quart-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--quart-acid);
  box-shadow: 0 0 0 4px rgba(211,166,255,.11), 0 0 14px var(--quart-acid);
}
.quart-hero h2 {
  margin-top: 13px;
  color: #f5f9ee;
  font-size: clamp(38px, 9vw, 76px);
  line-height: .95;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.quart-hero__copy p {
  max-width: 40ch;
  margin: 15px 0 0;
  color: #b5c3aa;
  font-size: 14px;
}
.quart-dial {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.quart-dial span,
.quart-dial small { color: #9bac91; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.quart-dial b {
  color: var(--quart-acid);
  font-family: Unbounded, sans-serif;
  font-size: clamp(42px, 9vw, 72px);
  line-height: .95;
  letter-spacing: -.09em;
  text-shadow: 0 0 28px rgba(211,166,255,.24);
}
.quart-dial small { margin-top: 8px; color: var(--quart-cyan); letter-spacing: .06em; }
.quart-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
  padding-top: 13px;
  border-top: 1px solid rgba(211,166,255,.2);
  color: #aab9a0;
  font-size: 12px;
}
.quart-hero__bottom b { color: var(--quart-acid); font-size: 16px; }
.quart-hero__countdown { color: #c9d6be; }
.quart-hero__countdown b { color: var(--quart-acid); font-size: 16px; }
.quart-hero__legend { display: flex; gap: 5px; }
.quart-led { width: 24px; height: 5px; border-radius: 99px; background: #394735; }
.quart-led--on { background: var(--quart-acid); box-shadow: 0 0 9px rgba(211,166,255,.55); }

.quart-board {
  position: relative;
  overflow: hidden;
  padding: 20px 16px 16px;
  border: 1px solid #28342c;
  border-radius: 20px;
  background: linear-gradient(180deg, #101713, #0d1110);
  box-shadow: var(--shadow);
}
.quart-board::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 32%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--quart-cyan));
  opacity: .8;
}
.quart-board__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin: 0 4px 18px;
}
.quart-board__head h3 { margin-top: 7px; color: #edf5e9; font-size: clamp(16px, 2.4vw, 22px); }
.quart-board__head p { margin: 0; color: #768878; font-size: 12px; }
.quart-section-label { color: var(--quart-cyan); font-size: 9px; }
.quart-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.quart-controls .search { flex: 1 1 220px; }
.quart-controls .search input,
.quart-controls .seg { background: #18221c; border-color: #2b4031; }
.quart-controls .search input:focus { border-color: var(--quart-acid); background: #1e2a20; }
.quart-controls .seg__btn.is-on { color: var(--quart-ink); background: var(--quart-acid); }
.quart-controls .seg__btn:hover { color: var(--quart-acid); }
.quart-streak { margin-left: 6px; font-size: 11px; }
.quart-streak--win { color: var(--quart-acid); }
.quart-streak--loss { color: #ff7782; }
.quart-count { margin: 13px 3px 0; color: #6f856f; font-size: 11px; }
.quart-empty { padding: 28px 0; color: #789078; text-align: center; }
@media (min-width: 760px) {
  .quart-hero { padding: 33px 34px 21px; }
  .quart-board { padding: 25px 24px 20px; }
}
@media (max-width: 520px) {
  .quart-hero__top { display: block; }
  .quart-dial { align-items: flex-start; margin-top: 22px; text-align: left; }
  .quart-dial b { font-size: 42px; }
  .quart-hero__bottom { margin-top: 23px; }
  .quart-board__head { display: block; }
  .quart-board__head p { margin-top: 7px; }
}

/* ── Кварт: подиум и карточная доска ───────────────────────────────────── */
.quart-podium {
  position: relative;
  overflow: hidden;
  padding: 20px 16px 16px;
  margin-bottom: 14px;
  border: 1px solid #33452e;
  border-radius: 20px;
  background:
    radial-gradient(480px 180px at 50% 0%, rgba(211,166,255,.11), transparent 70%),
    linear-gradient(180deg, #182219, #101711);
  box-shadow: var(--shadow);
}
.quart-podium::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background: linear-gradient(90deg, transparent 0 32%, rgba(211,166,255,.25) 32.1% 32.2%, transparent 32.3% 66%, color-mix(in srgb, var(--electric) 20%, transparent) 66.1% 66.2%, transparent 66.3%);
}
.quart-podium__heading { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 14px; margin: 0 4px 16px; }
.quart-podium__heading h3 { margin-top: 7px; color: #edf5e9; font-size: clamp(16px, 2.4vw, 22px); }
.quart-podium__note { color: #849a82; font-size: 11px; }
.quart-podium__grid { position: relative; z-index: 1; display: grid; gap: 8px; }
.quart-podium-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 25px 1fr auto;
  grid-template-areas: "place medal tag score" "place medal name score" "place medal meta score";
  align-items: center;
  min-height: 84px;
  padding: 10px 12px 10px 8px;
  border: 1px solid #2b3b2a;
  border-radius: 14px;
  background: rgba(11,18,13,.65);
  color: inherit;
  text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.quart-podium-card:hover { transform: translateY(-3px); border-color: var(--quart-acid); background: rgba(29,45,27,.9); }
.quart-podium-card--gold { border-color: rgba(211,166,255,.62); background: linear-gradient(100deg, rgba(211,166,255,.15), rgba(10,18,12,.62) 68%); }
.quart-podium-card--silver { border-color: color-mix(in srgb, var(--electric) 35%, transparent); }
.quart-podium-card__place { grid-area: place; color: #6f8b6a; font-family: Unbounded, sans-serif; font-size: 12px; text-align: center; }
.quart-podium-card--gold .quart-podium-card__place { color: var(--quart-acid); }
.quart-podium-card__medal { grid-area: medal; color: #6e8866; font-size: 19px; }
.quart-podium-card--gold .quart-podium-card__medal { color: var(--quart-acid); text-shadow: 0 0 13px rgba(211,166,255,.6); }
.quart-podium-card--silver .quart-podium-card__medal { color: var(--quart-cyan); }
.quart-podium-card__tag { grid-area: tag; color: var(--tag-color); font-family: Unbounded, sans-serif; font-size: 10.5px; font-weight: 800; }
.quart-podium-card > b { grid-area: name; overflow: hidden; color: #f0f7eb; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.quart-podium-card__meta { grid-area: meta; color: #799078; font-size: 10px; }
.quart-podium-card > strong { grid-area: score; color: var(--quart-acid); font-family: Unbounded, sans-serif; font-size: 23px; }
.quart-board { margin-top: 0; }
.quart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quart-card {
  display: flex;
  min-height: 122px;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #26372a;
  border-radius: 15px;
  background: linear-gradient(145deg, #17231a, #111812);
  color: inherit;
  text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.quart-card:hover { transform: translateY(-4px); border-color: var(--tag-color); box-shadow: 0 10px 24px -18px var(--quart-acid); }
.quart-card--off { opacity: .44; }
.quart-card--m1 { border-color: rgba(211,166,255,.65); box-shadow: inset 0 2px 0 var(--quart-acid); }
.quart-card--m2 { border-color: color-mix(in srgb, var(--electric) 45%, transparent); }
.quart-card--m3 { border-color: rgba(139,168,148,.46); }
.quart-card__top, .quart-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.quart-card__rank { color: #66816a; font-family: Unbounded, sans-serif; font-size: 10px; }
.quart-card--m1 .quart-card__rank { color: var(--quart-acid); }
.quart-card__tag { overflow: hidden; color: var(--tag-color); font-family: Unbounded, sans-serif; font-size: 10.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.quart-card__name { overflow: hidden; margin-top: 10px; color: #eaf4e6; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.quart-card__form .form { gap: 4px; }
.quart-card__form .dot { width: 11px; height: 11px; border-radius: 3px; }
.quart-card__bottom strong { color: var(--quart-acid); font-family: Unbounded, sans-serif; font-size: 18px; }
.quart-card:not(.quart-card--m1):not(.quart-card--m2):not(.quart-card--m3) .quart-card__bottom strong { color: #d9e8d7; }
.quart-card__bottom strong small { color: #6d856e; font-family: Inter, sans-serif; font-size: 7px; letter-spacing: .1em; }
@media (min-width: 620px) {
  .quart-podium__grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .quart-podium-card { min-height: 138px; grid-template-columns: 1fr auto; grid-template-areas: "medal place" "tag tag" "name name" "meta score"; padding: 15px; }
  .quart-podium-card__medal { font-size: 27px; }
  .quart-podium-card__place { text-align: right; }
  .quart-podium-card > b { margin-top: 8px; }
  .quart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 920px) {
  .quart-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Фильтры: активная кнопка остаётся читаемой даже при наведении. */
.seg__btn.is-on:hover,
.quart-controls .seg__btn.is-on:hover { color: #14100c; }

/* В карточках Кварта тег всегда закреплён у правого края верхней строки. */
.quart-podium-card__tag { justify-self: end; text-align: right; }

/* Фиксированная шапка карточки Кварта: ничего не прыгает из-за серии. */
.quart-card__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; gap: 5px; }
.quart-card__rank { justify-self: start; }
.quart-card__tag { justify-self: center; margin: 0; text-align: center; }
.quart-card__streak-slot { justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 24px; min-height: 16px; }
.quart-card__streak-slot .quart-streak { margin: 0; }

/* ── Достижения альянса ─────────────────────────────────────────────────── */
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.achievement { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raised); }
.achievement__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--achievement-color) 16%, transparent); color: var(--achievement-color); font-size: 19px; }
.achievement b, .achievement small { display: block; }
.achievement b { color: var(--text); font-size: 12px; }
.achievement small { margin-top: 3px; color: var(--dim); font-size: 11px; }
.achievement--fire { --achievement-color: #ff7a45; }
.achievement--gold { --achievement-color: #ffd166; }
.achievement--comeback { --achievement-color: #a7a3c2; }
.achievement--perfect { --achievement-color: var(--accent); }
.achievement-empty { margin: 0; padding: 14px; color: var(--dim); border: 1px dashed var(--line); border-radius: var(--r-sm); }

.achievement-count { display: inline-flex; align-items: center; gap: 2px; margin-left: 7px; color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; }

.achievement--crown { --achievement-color: #f3c969; }
.achievement--veteran { --achievement-color: #c8d0dc; }
.achievement--shield { --achievement-color: #7ec8ff; }
.achievement--double { --achievement-color: #ff9ee7; }

/* Галерея фотографий события */
.tl__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.tl__gallery a { display: block; overflow: hidden; border-radius: 10px; background: var(--raised); }
.tl__gallery .tl__img { display: block; width: 100%; height: 150px; object-fit: cover; transition: transform .2s var(--ease); }
.tl__gallery a:hover .tl__img { transform: scale(1.03); }
@media (max-width: 420px) { .tl__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl__gallery .tl__img { height: 112px; } }


/* ── Motion layer: Server 33 atmosphere ──────────────────────────────────── */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-spring: cubic-bezier(.16, 1.25, .3, 1);
}

@keyframes s33-aurora { 0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; } 50% { transform: translate3d(2%, 2%, 0) scale(1.05); opacity: 1; } }
@keyframes s33-grain { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1%, 1%); } 50% { transform: translate(1%, -1%); } 75% { transform: translate(1%, 1%); } }
@keyframes s33-screen-in { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes s33-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes s33-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,106,43,0); } 50% { box-shadow: 0 0 28px -14px rgba(255,106,43,.8); } }
@keyframes s33-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes s33-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(.4deg); } }
@keyframes s33-pulse-dot { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.28); opacity: 1; } }

body::before { transform-origin: 50% 0; animation: s33-aurora 14s var(--ease) infinite; }
body::after { animation: s33-grain 9s steps(2, end) infinite; }
#app { animation: s33-screen-in .52s var(--ease-out) both; }
.site-head { transition: background .28s var(--ease-out), box-shadow .28s var(--ease-out); }
.site-head:hover { box-shadow: 0 12px 34px -24px rgba(255,106,43,.75); }
.brand__num { position: relative; overflow: hidden; animation: s33-glow 4s ease-in-out infinite; transition: transform .22s var(--ease-spring); }
.brand:hover .brand__num { transform: rotate(-5deg) scale(1.08); }
.brand__num::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--text) 50%, transparent) 48%, transparent 68%); transform: translateX(-130%); transition: transform .55s var(--ease-out); }
.brand:hover .brand__num::after { transform: translateX(130%); }
.nav__link { transition: color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-spring), box-shadow .18s var(--ease-out); }
.nav__link:hover { transform: translateY(-2px); }
.nav__link.is-active { box-shadow: 0 7px 20px -12px var(--accent); }

.panel, .hero, .quart-hero, .quart-board, .achievements-panel, .tl__item, .lad__row, .card, .leader, .podium-card, .quart-card { animation: s33-rise .52s var(--ease-out) both; }
.panel:nth-child(2), .hero + *, .tl__item:nth-child(2), .lad__row:nth-child(2), .card:nth-child(2), .quart-card:nth-child(2) { animation-delay: 55ms; }
.panel:nth-child(3), .tl__item:nth-child(3), .lad__row:nth-child(3), .card:nth-child(3), .quart-card:nth-child(3) { animation-delay: 105ms; }
.panel:nth-child(4), .tl__item:nth-child(4), .lad__row:nth-child(4), .card:nth-child(4), .quart-card:nth-child(4) { animation-delay: 155ms; }
.panel, .hero, .quart-card, .card, .leader, .podium-card, .tl__item { transition: transform .24s var(--ease-spring), border-color .24s var(--ease-out), box-shadow .24s var(--ease-out); }
.panel:hover, .hero:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 18px 42px -28px rgba(255,106,43,.55), var(--shadow); }
.card:hover, .leader:hover, .podium-card:hover, .tl__item:hover { transform: translateY(-4px); }

button, .seg__btn, .cal__btn { transition: transform .16s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
button:active, .seg__btn:active, .cal__btn:active { transform: scale(.96); }
button:hover, .seg__btn:hover, .cal__btn:hover { box-shadow: 0 8px 20px -16px currentColor; }
.hero__num { background-size: 220% 100%; animation: s33-shimmer 6s linear infinite; }
.dot { animation: s33-pulse-dot 2.8s ease-in-out infinite; }
.tl__gallery { perspective: 800px; }
.tl__img { transition: transform .3s var(--ease-spring), filter .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.tl__img:hover { transform: translateY(-6px) rotate(-1deg) scale(1.025); filter: saturate(1.12) brightness(1.08); box-shadow: 0 18px 34px -22px rgba(255,106,43,.8); }
.achievement__icon, .quart-podium-card__medal { animation: s33-float 4s ease-in-out infinite; }
.quart-card:hover { box-shadow: 0 16px 34px -22px var(--quart-acid), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
.loading::after { content: ' ·'; animation: s33-loading-dots 1.1s steps(4, end) infinite; }
@keyframes s33-loading-dots { 0% { content: ' ·'; } 33% { content: ' ··'; } 66% { content: ' ···'; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Extra delight: движение интерфейса без тяжёлого JavaScript ───────────── */
@keyframes s33-scan { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes s33-border { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes s33-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes s33-line-draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes s33-status-win { 0%, 100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); } 50% { box-shadow: 0 0 0 4px rgba(53,208,127,.10); } }
@keyframes s33-status-loss { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); } 50% { box-shadow: 0 0 0 4px rgba(255,71,87,.10); } }

.site-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 22%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: s33-scan 7s var(--ease-in-out, linear) infinite; pointer-events: none; }
.hero, .panel, .lad__row, .quart-card, .achievement, .tl__item, .leader, .podium__item { overflow: hidden; }
.hero::before, .panel::after, .lad__row::after, .quart-card::after, .achievement::after, .tl__item::after { content: ''; position: absolute; inset: 0 auto 0 -45%; width: 28%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7.5%, transparent), transparent); transform: skewX(-18deg); opacity: 0; }
.hero:hover::before, .panel:hover::after, .lad__row:hover::after, .quart-card:hover::after, .achievement:hover::after, .tl__item:hover::after { opacity: 1; animation: s33-scan .8s var(--ease-out) both; }
.hero::before { z-index: 0; }
.panel::after, .lad__row::after, .quart-card::after, .achievement::after, .tl__item::after { z-index: 1; }
.hero__top, .panel > *, .lad__row > *, .quart-card > *, .achievement > *, .tl__item > * { position: relative; z-index: 2; }
.panel__head h2, .quart-section-label, .tl__year { text-shadow: 0 0 22px rgba(255,106,43,.13); }

.lad__row:hover, .quart-card:hover, .achievement:hover { border-color: color-mix(in srgb, var(--tag-color, var(--accent)) 62%, var(--line)); }
.lad__row:nth-child(odd) { animation-delay: 40ms; }
.lad__row:nth-child(even) { animation-delay: 100ms; }
.achievement:nth-child(3n + 1) .achievement__icon { animation-delay: -1.1s; }
.achievement:nth-child(3n + 2) .achievement__icon { animation-delay: -.45s; }
.achievement:nth-child(3n) .achievement__icon { animation-delay: -.8s; }
.form .dot--win, .form .dot.c-win { animation: s33-status-win 2.2s ease-in-out infinite; }
.form .dot--loss, .form .dot.c-loss { animation: s33-status-loss 2.2s ease-in-out infinite; }
.streak--win, .quart-streak--win { animation: s33-breathe 2.4s ease-in-out infinite; }
.streak--loss, .quart-streak--loss { animation: s33-breathe 2.8s ease-in-out infinite reverse; }
.ch__line { stroke-dasharray: 900; animation: s33-line-draw 1.35s var(--ease-out) both; }
.proof__fill { position: relative; overflow: hidden; }
.proof__fill::after { content: ''; position: absolute; inset: 0; width: 28%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 32%, transparent), transparent); animation: s33-scan 3.2s ease-in-out infinite; }
.quart-hero__glow { animation: s33-breathe 5s ease-in-out infinite; }
.quart-podium-card:nth-child(1) { animation-delay: 70ms; }
.quart-podium-card:nth-child(2) { animation-delay: 140ms; }
.quart-podium-card:nth-child(3) { animation-delay: 210ms; }
.quart-podium-card--gold .quart-podium-card__medal { animation: s33-breathe 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .site-head::after, .hero::before, .panel::after, .lad__row::after, .quart-card::after, .achievement::after, .tl__item::after, .proof__fill::after { display: none; }
}

/* ── Mobile motion: никакого долгого зажатия для красивого эффекта ────────── */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-tap-highlight-color: rgba(255,106,43,.18); }
  a, button, .seg__btn, .cal__btn { touch-action: manipulation; }

  /* Блоки оживают именно в момент появления в области просмотра. */
  .panel, .hero, .quart-hero, .quart-board, .achievements-panel, .tl__item, .lad__row, .card, .leader, .podium-card, .quart-card, .achievement {
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  /* Убираем «залипающий» hover на сенсорных экранах. */
  .site-head:hover { box-shadow: none; }
  .nav__link:hover, .brand:hover .brand__num, .card:hover, .leader:hover, .podium-card:hover, .tl__item:hover, .panel:hover, .hero:hover, .quart-card:hover, .achievement:hover, .lad__row:hover { transform: none; }
  .panel:hover, .hero:hover { border-color: var(--line); box-shadow: var(--shadow); }
  .quart-card:hover { border-color: #26372a; box-shadow: none; }
  .tl__gallery a:hover .tl__img, .tl__img:hover { transform: none; filter: none; box-shadow: none; }
  .hero:hover::before, .panel:hover::after, .lad__row:hover::after, .quart-card:hover::after, .achievement:hover::after, .tl__item:hover::after { opacity: 0; animation: none; }

  /* На обычный тап — короткий физический отклик, видимый без удержания. */
  .nav__link:active, .tile:active, .seg__btn:active, .cal__btn:active { transform: scale(.95); }
  .card:active, .leader:active, .podium-card:active, .quart-card:active, .achievement:active, .tl__item:active { transform: translateY(-3px) scale(.985); border-color: var(--accent); }
  .tl__gallery a:active .tl__img { transform: scale(1.04); filter: saturate(1.14) brightness(1.08); }
  .brand:active .brand__num { transform: rotate(-4deg) scale(1.08); }
  .hero:active, .panel:active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

  /* Чуть заметнее живые статусы на небольшом экране. */
  .dot, .achievement__icon, .quart-podium-card__medal { animation-duration: 2.2s; }
}

/* ── WOW redesign: тактический командный центр Server 33 ────────────────── */
:root { --electric: #a7a3c2; --violet: #9c7cff; --hud-line: color-mix(in srgb, var(--electric) 20%, transparent); }
:root[data-theme="light"] { --electric: #51606e; --violet: #6c7a8c; --hud-line: color-mix(in srgb, var(--electric) 30%, transparent); }
body {
  background:
    radial-gradient(900px 600px at 50% -18%, rgba(255,106,43,.12), transparent 62%),
    radial-gradient(700px 520px at 110% 42%, color-mix(in srgb, var(--electric) 6%, transparent), transparent 60%),
    linear-gradient(color-mix(in srgb, var(--text) 1.8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 1.8%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 46px 46px, 46px 46px, auto;
}
body::before { background: radial-gradient(560px 260px at 48% 5%, rgba(255,106,43,.13), transparent 70%), radial-gradient(420px 500px at 4% 55%, color-mix(in srgb, var(--electric) 5%, transparent), transparent 72%); }
.site-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg) 78%, transparent));
  border-bottom-color: rgba(255,106,43,.25);
  box-shadow: 0 12px 40px -32px rgba(255,106,43,.7);
}
.site-head__inner { position: relative; }
.site-head__inner::before { content: 'LIVE // SERVER 33'; position: absolute; top: 4px; right: 32px; color: var(--mute); font: 700 8px/1 Inter, sans-serif; letter-spacing: .18em; pointer-events: none; }
.brand__text small { color: var(--electric); }
.nav { padding-top: 4px; }
.nav__link { border: 1px solid transparent; background: color-mix(in srgb, var(--text) 1.8%, transparent); }
.nav__link:hover { border-color: var(--hud-line); background: color-mix(in srgb, var(--electric) 7%, transparent); }
.nav__link.is-active { color: #081010; border-color: color-mix(in srgb, var(--text) 30%, transparent); background: linear-gradient(135deg, #ff9a4a, var(--accent)); box-shadow: 0 0 0 1px rgba(255,106,43,.18), 0 8px 24px -14px var(--accent); }

#app { position: relative; }
#app::before { content: 'SYSTEM ONLINE'; position: absolute; top: 5px; right: 18px; color: var(--mute); font: 700 8px/1 Inter, sans-serif; letter-spacing: .18em; }
.hero {
  min-height: 315px;
  border-color: rgba(255,106,43,.38);
  background:
    radial-gradient(480px 220px at 88% 8%, rgba(255,106,43,.24), transparent 66%),
    radial-gradient(300px 260px at 2% 100%, color-mix(in srgb, var(--electric) 10%, transparent), transparent 70%),
    linear-gradient(145deg, var(--raised-2) 0%, var(--raised) 58%, var(--surface) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent), 0 22px 70px -38px rgba(255,106,43,.85), var(--shadow);
}
.hero::after { opacity: .78; background: repeating-linear-gradient(58deg, rgba(255,106,43,.11) 0 2px, transparent 2px 12px); }
.hero__top::after { content: 'TACTICAL OVERVIEW'; display: block; margin-top: 18px; color: color-mix(in srgb, var(--electric) 62%, transparent); font: 700 9px/1 Inter, sans-serif; letter-spacing: .22em; }
.hero__word { color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.hero__num { text-shadow: 0 0 38px color-mix(in srgb, var(--text) 12%, transparent); }
.leader { border-color: rgba(255,201,60,.48); background: linear-gradient(100deg, rgba(255,201,60,.17), color-mix(in srgb, var(--text) 3.5%, transparent) 58%, color-mix(in srgb, var(--electric) 5%, transparent)); box-shadow: inset 3px 0 0 var(--gold), 0 14px 34px -26px rgba(255,201,60,.8); }
.leader__crown { display: inline-block; transform-origin: center; filter: drop-shadow(0 0 8px rgba(255,201,60,.6)); animation: s33-float 4s ease-in-out infinite; }
.leader__pts { text-shadow: 0 0 18px rgba(255,201,60,.42); }
.panel { border-color: color-mix(in srgb, var(--text) 10%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--raised) 94%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 14px 34px -25px rgba(0,0,0,.9); }
.panel::before { background: linear-gradient(90deg, var(--accent), var(--electric), transparent 72%); opacity: .48; }
.panel__head h2 { letter-spacing: -.045em; }
.eyebrow { color: var(--electric); }
.lad__row { border-color: color-mix(in srgb, var(--text) 7%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--text) 3.5%, transparent), transparent 72%); box-shadow: inset 3px 0 0 transparent; }
.lad__row:hover { box-shadow: inset 3px 0 0 var(--accent), 0 14px 26px -24px rgba(255,106,43,.7); }
.quart-hero { border-color: rgba(211,166,255,.36); box-shadow: inset 0 1px 0 rgba(211,166,255,.22), 0 20px 55px -34px rgba(211,166,255,.6); }
.tl__item { border-color: color-mix(in srgb, var(--electric) 16%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--electric) 42%, transparent), 0 14px 36px -28px color-mix(in srgb, var(--electric) 40%, transparent); }
.tl__item:hover { border-color: color-mix(in srgb, var(--electric) 55%, transparent); }
.achievement { background: linear-gradient(135deg, color-mix(in srgb, var(--text) 5.5%, transparent), color-mix(in srgb, var(--text) 1.8%, transparent)); }
.achievement:hover { box-shadow: 0 16px 30px -24px var(--achievement-color); }
.site-foot { border-top-color: color-mix(in srgb, var(--electric) 16%, transparent); }

@media (max-width: 759px) {
  .site-head__inner::before { top: 3px; right: 18px; font-size: 7px; }
  .nav { margin-top: 2px; padding-top: 5px; }
  #app::before { right: 18px; font-size: 7px; }
  .hero { min-height: 285px; padding-top: 26px; }
  .hero__top::after { margin-top: 14px; font-size: 8px; }
}
@media (max-width: 520px) {
  .site-head__inner::before, #app::before { display: none; }
  .hero { min-height: 270px; }
}

@keyframes s33-scroll-reveal { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes s33-aurora {
  0%, 100% { transform: translate3d(calc(-2% + var(--s33-parallax-x, 0px)), calc(-1% - var(--s33-parallax-y, 0px) * .06 + var(--s33-parallax-pointer-y, 0px)), 0) scale(1); opacity: .72; }
  50% { transform: translate3d(calc(2% + var(--s33-parallax-x, 0px)), calc(2% - var(--s33-parallax-y, 0px) * .06 + var(--s33-parallax-pointer-y, 0px)), 0) scale(1.05); opacity: 1; }
}
@keyframes s33-grain {
  0%, 100% { transform: translate3d(0, calc(var(--s33-parallax-y, 0px) * -.025), 0); }
  25% { transform: translate3d(-1%, calc(1% + var(--s33-parallax-y, 0px) * -.025), 0); }
  50% { transform: translate3d(1%, calc(-1% + var(--s33-parallax-y, 0px) * -.025), 0); }
  75% { transform: translate3d(1%, calc(1% + var(--s33-parallax-y, 0px) * -.025), 0); }
}
.hero::after { transform: translate3d(var(--s33-parallax-x, 0px), calc(var(--s33-parallax-y, 0px) * .12), 0) rotate(4deg); }

@media (hover: none) and (pointer: coarse) {
  .scroll-reveal { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); animation: none !important; }
  .scroll-reveal.is-scroll-visible { animation: s33-scroll-reveal .68s var(--ease-out) var(--scroll-delay, 0ms) both !important; }
  .card:active, .leader:active, .podium-card:active, .quart-card:active, .achievement:active, .tl__item:active { transform: none; border-color: inherit; }
  .hero::after { transform: translate3d(0, calc(var(--s33-parallax-y, 0px) * .06), 0) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .hero::after { transform: none !important; }
}

/* ── Micro-interactions: быстрый и понятный отклик интерфейса ─────────────── */
@keyframes s33-control-pop { 0% { transform: scale(.94); } 65% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes s33-focus-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--electric) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--electric) 12%, transparent); } }
@keyframes s33-sheen { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

button, .nav__link, .seg__btn, .cal__btn, .tile, .tl__gallery a { position: relative; overflow: hidden; }
button::after, .nav__link::after, .seg__btn::after, .cal__btn::after, .tile::after, .tl__gallery a::after { content: ''; position: absolute; inset: 0 auto 0 -38%; width: 24%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 20%, transparent), transparent); transform: translateX(-140%) skewX(-18deg); opacity: 0; }
button:hover::after, .nav__link:hover::after, .seg__btn:hover::after, .cal__btn:hover::after, .tile:hover::after, .tl__gallery a:hover::after { opacity: 1; animation: s33-sheen .62s var(--ease-out) both; }
button:focus-visible, .nav__link:focus-visible, .seg__btn:focus-visible, .cal__btn:focus-visible, .tile:focus-visible, .tl__gallery a:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; animation: s33-focus-pulse 1.5s ease-in-out infinite; }
button:active, .seg__btn:active, .cal__btn:active { animation: s33-control-pop .22s var(--ease-out); }
.nav__link.is-active { animation: s33-control-pop .28s var(--ease-out); }
.seg__btn.is-on, .cal__btn.is-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent), 0 6px 16px -12px currentColor; }
.tile, .tl__gallery a { transition: transform .22s var(--ease-spring), background .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.tile:active, .tl__gallery a:active { transform: scale(.97); }
.search input, input, textarea, select { transition: border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-spring); }
.search input:focus, input:focus, textarea:focus, select:focus { transform: translateY(-1px); }

@media (hover: none) and (pointer: coarse) {
  button:hover::after, .nav__link:hover::after, .seg__btn:hover::after, .cal__btn:hover::after, .tile:hover::after, .tl__gallery a:hover::after { animation: none; opacity: 0; }
  button:active::after, .nav__link:active::after, .seg__btn:active::after, .cal__btn:active::after, .tile:active::after, .tl__gallery a:active::after { opacity: 1; animation: s33-sheen .38s var(--ease-out) both; }
}

/* ── First-visit loader ───────────────────────────────────────────────────── */
@keyframes boot-mark-in { from { opacity: 0; transform: scale(.72) rotate(-9deg); } 65% { opacity: 1; transform: scale(1.06) rotate(1deg); } to { transform: scale(1) rotate(0); } }
@keyframes boot-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes boot-signal { 0%, 100% { opacity: .25; transform: scaleY(.65); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes boot-scan { from { transform: translateX(-130%); } to { transform: translateX(260%); } }
@keyframes boot-status { from { opacity: .35; } to { opacity: 1; } }
@keyframes boot-exit { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.boot-loader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; overflow: hidden; contain: strict; background: radial-gradient(680px 420px at 50% 44%, rgba(255,106,43,.13), transparent 64%), #08090b; transition: opacity .34s var(--ease-out), visibility .34s; }
.s33-loader-seen .boot-loader { display: none; }
.boot-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-loader::before { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--text) 2.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 2.5%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%); }
.boot-loader::after { content: ''; position: absolute; top: 0; left: -30%; width: 24%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--electric) 12%, transparent), transparent); transform: skewX(-15deg); animation: boot-scan 2.6s ease-in-out infinite; }
.boot-loader__core { position: relative; z-index: 1; display: grid; justify-items: center; min-width: min(310px, 82vw); }
.boot-loader__mark { position: relative; display: grid; place-items: center; contain: paint; width: 92px; height: 92px; border: 1px solid rgba(255,106,43,.8); border-radius: 25px; background: linear-gradient(145deg, #ff9b4a, var(--accent)); color: #12100d; box-shadow: 0 0 0 8px rgba(255,106,43,.06), 0 0 50px -12px rgba(255,106,43,.95); animation: boot-mark-in .78s var(--ease-spring) both; }
.boot-loader__mark::before, .boot-loader__mark::after { content: ''; position: absolute; inset: -13px; border: 1px solid color-mix(in srgb, var(--electric) 35%, transparent); border-radius: 31px; animation: boot-ring 5s linear infinite; }
.boot-loader__mark::after { inset: -23px; border-color: rgba(255,106,43,.18); border-style: dashed; animation-direction: reverse; animation-duration: 8s; }
.boot-loader__mark span { font: 800 31px/1 Unbounded, sans-serif; letter-spacing: -.08em; }
.boot-loader__brand { display: grid; gap: 4px; margin-top: 25px; text-align: center; }
.boot-loader__brand strong { color: var(--text); font: 800 16px/1 Unbounded, sans-serif; letter-spacing: .04em; }
.boot-loader__brand small { color: var(--electric); font: 600 9px/1 Inter, sans-serif; letter-spacing: .2em; }
.boot-loader__signal { display: flex; align-items: center; gap: 5px; height: 22px; margin-top: 27px; }
.boot-loader__signal i { display: block; width: 4px; height: 14px; border-radius: 3px; background: var(--accent); animation: boot-signal 1s var(--ease) infinite; }
.boot-loader__signal i:nth-child(2) { animation-delay: .12s; } .boot-loader__signal i:nth-child(3) { animation-delay: .24s; } .boot-loader__signal i:nth-child(4) { animation-delay: .36s; } .boot-loader__signal i:nth-child(5) { animation-delay: .48s; }
.boot-loader__status { display: flex; justify-content: space-between; width: 100%; margin-top: 10px; color: var(--dim); font: 700 9px/1 Inter, sans-serif; letter-spacing: .14em; animation: boot-status 1.2s ease-in-out infinite alternate; }
.boot-loader__status b { color: var(--win); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .boot-loader::after, .boot-loader__mark, .boot-loader__mark::before, .boot-loader__mark::after, .boot-loader__signal i, .boot-loader__status { animation: none; }
  .boot-loader { transition-duration: .01ms; }
}

/* ── Telegram guide bot page ──────────────────────────────────────────────── */
@keyframes bot-orbit { from { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(180deg) translateX(10px); } to { transform: rotate(360deg) translateX(0); } }
@keyframes bot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bot-signal { 0%, 100% { opacity: .28; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1); } }
.bot-hero { position: relative; overflow: hidden; min-height: 410px; background: radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--electric) 14%, transparent), transparent 24%), linear-gradient(135deg, rgba(23,28,35,.98), rgba(10,14,18,.98)); }
.bot-hero::before { content: 'TELEGRAM GUIDE SYSTEM'; position: absolute; right: 24px; bottom: 22px; color: color-mix(in srgb, var(--electric) 28%, transparent); font: 700 9px/1 Inter, sans-serif; letter-spacing: .22em; }
.bot-hero__orb { position: absolute; border: 1px solid color-mix(in srgb, var(--electric) 25%, transparent); border-radius: 50%; pointer-events: none; animation: bot-orbit 13s linear infinite; }
.bot-hero__orb--one { width: 280px; height: 280px; right: -78px; top: -78px; box-shadow: 0 0 70px -30px var(--electric); }
.bot-hero__orb--two { width: 150px; height: 150px; right: 56px; top: 35px; border-color: rgba(255,106,43,.3); animation-duration: 9s; animation-direction: reverse; }
.bot-hero__top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 22px; }
.bot-hero__lead { max-width: 650px; margin: 18px 0 0; color: var(--dim); font-size: 16px; line-height: 1.7; }
.bot-hero__lead strong { color: var(--electric); font-size: 1.14em; font-weight: 900; }
.bot-hero__signal { display: grid; align-content: center; justify-items: center; gap: 8px; min-width: 84px; color: var(--electric); font: 800 22px/1 Unbounded, sans-serif; }
.bot-hero__signal i { display: block; width: 42px; height: 2px; background: var(--electric); animation: bot-signal 1.2s ease-in-out infinite; }
.bot-hero__signal i:nth-child(2) { animation-delay: .14s; } .bot-hero__signal i:nth-child(3) { animation-delay: .28s; } .bot-hero__signal i:nth-child(4) { animation-delay: .42s; }
.bot-hero__bottom { position: absolute; right: 24px; bottom: 24px; left: 24px; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 700px; }
.bot-stat { display: grid; gap: 5px; padding: 12px 14px; border-left: 2px solid var(--electric); background: color-mix(in srgb, var(--electric) 5.5%, transparent); }
.bot-stat b { display: block; color: var(--electric); font: 900 clamp(22px, 3vw, 30px)/.95 Unbounded, sans-serif; letter-spacing: -.06em; text-shadow: 0 0 18px color-mix(in srgb, var(--electric) 28%, transparent); } .bot-stat span { color: var(--dim); font-size: 12px; font-weight: 600; }
.bot-launch { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-color: color-mix(in srgb, var(--electric) 27%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--electric) 10%, transparent), color-mix(in srgb, var(--text) 3.5%, transparent) 55%, rgba(255,106,43,.06)); }
.bot-launch__mark { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--electric); border-radius: 20px; color: #0b1011; background: var(--electric); font-size: 29px; box-shadow: 0 0 32px -13px var(--electric); animation: bot-float 3.4s ease-in-out infinite; }
.bot-launch__copy h2 { margin: 5px 0 10px; font-size: clamp(22px, 3vw, 29px); font-weight: 900; } .bot-launch__copy p { max-width: 620px; margin: 0; color: var(--dim); font-size: 16px; line-height: 1.65; }
.bot-launch__handle { align-self: start; color: var(--electric); font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; }
.bot-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; padding: 12px 15px; border: 1px solid var(--electric); border-radius: 7px; color: #081011; background: var(--electric); font-weight: 800; text-decoration: none; transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out), background .22s var(--ease-out); }
.bot-cta b { font-size: 18px; line-height: .8; } .bot-cta:hover { color: #081011; background: #b9fff4; box-shadow: 0 12px 30px -18px var(--electric); transform: translateY(-3px); } .bot-cta:active { transform: scale(.97); }
.bot-section { margin-top: 22px; } .bot-section__head { margin-bottom: 14px; } .bot-section__head p { color: var(--dim); }
.bot-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bot-feature { position: relative; min-height: 220px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(145deg, rgba(24,29,38,.92), rgba(14,17,22,.96)); transition: transform .24s var(--ease-spring), border-color .24s var(--ease-out), box-shadow .24s var(--ease-out); }
.bot-feature:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--electric) 55%, transparent); box-shadow: 0 18px 34px -27px var(--electric); } .bot-feature--accent { border-color: rgba(255,106,43,.42); }
.bot-feature__index { color: var(--mute); font: 800 12px/1 Inter, sans-serif; letter-spacing: .14em; } .bot-feature__icon { margin: 28px 0 20px; color: var(--electric); font: 800 28px/1 Unbounded, sans-serif; } .bot-feature--accent .bot-feature__icon { color: var(--accent); }
.bot-feature h3 { margin: 0 0 10px; font-size: clamp(18px, 2vw, 21px); font-weight: 900; letter-spacing: -.02em; } .bot-feature p { margin: 0; color: var(--dim); font-size: 16px; font-weight: 500; line-height: 1.65; }
.bot-promise { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; margin-top: 22px; border-color: rgba(255,201,60,.25); background: linear-gradient(120deg, rgba(255,201,60,.09), color-mix(in srgb, var(--text) 2.5%, transparent)); }
.bot-promise__line { position: absolute; width: 2px; height: 74px; background: var(--gold); box-shadow: 0 0 22px var(--gold); } .bot-promise h2 { max-width: 540px; margin-top: 6px; } .bot-promise p { margin: 0; color: var(--dim); line-height: 1.75; } .bot-promise strong { color: var(--gold); }
.bot-final { display: grid; justify-items: center; padding: 70px 20px 30px; text-align: center; } .bot-final h2 { margin: 12px 0 2px; font-size: clamp(26px, 5vw, 46px); } .bot-final em { color: var(--electric); font-style: normal; }
.bot-cta--large { margin-top: 22px; padding: 14px 18px; }
@media (max-width: 800px) { .bot-feature-grid { grid-template-columns: repeat(2, 1fr); } .bot-launch { grid-template-columns: auto 1fr; } .bot-launch__handle { grid-column: 2; } }
@media (max-width: 560px) { .bot-hero { min-height: 0; padding-bottom: 24px; } .bot-hero__top { display: block; } .bot-hero__signal { position: absolute; top: 5px; right: 0; min-width: 62px; } .bot-hero__bottom { position: relative; right: auto; bottom: auto; left: auto; grid-template-columns: 1fr; width: 100%; margin-top: 34px; } .bot-hero::before { display: none; } .bot-launch { grid-template-columns: 1fr; gap: 14px; } .bot-launch__handle { grid-column: auto; } .bot-feature-grid { grid-template-columns: 1fr; } .bot-feature { min-height: 0; } .bot-promise { grid-template-columns: 1fr; gap: 18px; } .bot-promise__line { position: relative; width: 70px; height: 2px; } }

/* ── Alliance leadership guide ───────────────────────────────────────────── */
.roles-panel { margin-top: 22px; border-color: color-mix(in srgb, var(--electric) 24%, transparent); background: linear-gradient(145deg, rgba(18,25,30,.96), rgba(12,16,21,.98)); }
.roles-panel__head { margin-bottom: 15px; } .roles-panel__head h2 { margin-top: 5px; } .roles-panel__head .guide__lead { max-width: 780px; }
.roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.role-card { position: relative; display: flex; flex-direction: column; min-height: 255px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--text) 2.5%, transparent); transition: transform .24s var(--ease-spring), border-color .24s var(--ease-out), box-shadow .24s var(--ease-out); }
.role-card::after { content: ''; position: absolute; right: -28px; bottom: -40px; width: 120px; height: 120px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; pointer-events: none; }
.role-card:hover { transform: translateY(-5px); border-color: currentColor; box-shadow: 0 16px 30px -25px currentColor; }
.role-card--gold { color: var(--gold); } .role-card--orange { color: var(--accent); } .role-card--violet { color: #c7a6ff; } .role-card--cyan { color: var(--electric); } .role-card--red { color: #ff7f7f; }
.role-card__top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; } .role-card__icon { font-size: 25px; filter: saturate(1.1); } .role-card__tag { padding: 4px 7px; border: 1px solid currentColor; border-radius: 4px; opacity: .72; font: 800 9px/1 Inter, sans-serif; letter-spacing: .12em; }
.role-card h3 { margin: 18px 0 6px; color: var(--text); font-size: 18px; font-weight: 900; } .role-card__intro { min-height: 42px; margin: 0 0 8px; color: var(--dim); font-size: 13px; line-height: 1.45; }
.role-card ul { display: grid; gap: 5px; margin: 0; padding: 0 0 0 16px; color: var(--dim); font-size: 12px; line-height: 1.42; } .role-card li::marker { color: currentColor; }
.role-card__assistant { display: inline-flex; align-self: flex-start; margin-top: auto; padding-top: 10px; color: currentColor; font-size: 11px; font-weight: 800; }
.roles-notice { display: grid; grid-template-columns: 44px 1fr; gap: 15px; align-items: start; margin-top: 12px; border-color: rgba(255,201,60,.34); background: linear-gradient(110deg, rgba(255,201,60,.09), color-mix(in srgb, var(--text) 2.5%, transparent)); }
.roles-notice__mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%; color: #18130a; background: var(--gold); font: 900 20px/1 Unbounded, sans-serif; box-shadow: 0 0 22px -10px var(--gold); }
.roles-notice h3 { margin: 5px 0 8px; color: var(--gold); font-size: 18px; } .roles-notice p { max-width: 900px; margin: 6px 0 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
@media (max-width: 900px) { .roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roles-grid { grid-template-columns: 1fr; } .role-card { min-height: 0; } .role-card__intro { min-height: 0; } .roles-notice { grid-template-columns: 1fr; } .roles-notice__mark { width: 34px; height: 34px; font-size: 16px; } }

.roles-credit { margin: 18px 0 0; color: var(--mute); font-size: 10px; line-height: 1.4; letter-spacing: .02em; text-align: center; opacity: .78; }

/* ── User-created guide blocks ───────────────────────────────────────────── */
.guide-extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.guide-extra-card { padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--electric); border-radius: var(--r); background: linear-gradient(145deg, rgba(24,29,38,.92), rgba(14,17,22,.96)); animation: s33-rise .7s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }
.guide-extra-card h2 { margin: 8px 0 12px; font-size: clamp(19px, 3vw, 26px); } .guide-extra-card .prose { color: var(--dim); line-height: 1.65; }
.guide-extra-card--gold { border-top-color: var(--gold); } .guide-extra-card--orange { border-top-color: var(--accent); } .guide-extra-card--violet { border-top-color: #c7a6ff; } .guide-extra-card--red { border-top-color: #ff7f7f; }
@media (max-width: 560px) { .guide-extra-grid { grid-template-columns: 1fr; gap: 10px; } .guide-extra-card { padding: 16px; } }

/* User-selected colours from the full Guide editor */
.role-card[style*="--role-color"]{--tone:var(--role-color);border-color:color-mix(in srgb,var(--role-color) 62%,var(--line));box-shadow:inset 0 0 32px color-mix(in srgb,var(--role-color) 8%,transparent),0 0 24px color-mix(in srgb,var(--role-color) 12%,transparent)}
.role-card[style*="--role-color"] .role-card__icon,.role-card[style*="--role-color"] .role-card__tag{color:var(--role-color);text-shadow:0 0 16px color-mix(in srgb,var(--role-color) 52%,transparent)}
.role-card[style*="--role-color"]::after{background:linear-gradient(90deg,transparent,var(--role-color),transparent);opacity:.42}
.guide-extra-card[style*="--extra-color"]{border-color:color-mix(in srgb,var(--extra-color) 58%,var(--line));box-shadow:inset 0 0 36px color-mix(in srgb,var(--extra-color) 8%,transparent),0 0 22px color-mix(in srgb,var(--extra-color) 10%,transparent)}
.guide-extra-card[style*="--extra-color"] .eyebrow{color:var(--extra-color);text-shadow:0 0 14px color-mix(in srgb,var(--extra-color) 48%,transparent)}

/* Delicate credit accent */
.roles-credit{position:relative;display:block;max-width:fit-content;margin:22px auto 0;padding:7px 14px 8px;color:color-mix(in srgb,var(--text) 72%,var(--mute));font-size:10.5px;line-height:1.45;letter-spacing:.035em;text-align:center;opacity:.9;border-top:1px solid color-mix(in srgb,var(--electric) 42%,transparent);border-bottom:1px solid color-mix(in srgb,var(--electric) 18%,transparent);text-shadow:0 0 12px color-mix(in srgb,var(--electric) 26%,transparent)}
.roles-credit::before,.roles-credit::after{content:"✦";display:inline-block;margin:0 8px;color:var(--electric);font-size:9px;vertical-align:1px;opacity:.75}
@media (max-width:560px){.roles-credit{max-width:92%;padding:7px 10px;font-size:10px}.roles-credit::before,.roles-credit::after{margin:0 5px}}

/* Calm card atmosphere: replace distracting circles with a lightweight scan accent */
.role-card::after{right:auto;bottom:auto;left:-48%;top:0;width:48%;height:1px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.48;animation:role-card-scan 8s ease-in-out infinite;will-change:transform}
.role-card:nth-child(2)::after{animation-delay:-2.2s}.role-card:nth-child(3)::after{animation-delay:-4.4s}.role-card:nth-child(4)::after{animation-delay:-1.1s}.role-card:nth-child(5)::after{animation-delay:-3.3s}
@keyframes role-card-scan{0%,18%{transform:translateX(0);opacity:0}32%{opacity:.42}58%,100%{transform:translateX(310%);opacity:0}}
@media (prefers-reduced-motion:reduce){.role-card::after{animation:none;left:0;width:100%;opacity:.22}}

/* Manual president board — persistent across all public tabs */
.president-board{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:10px;margin:10px 0 0;padding:9px 13px;border:1px solid color-mix(in srgb, var(--electric) 24%, transparent);border-left:2px solid var(--electric);border-radius:10px;background:linear-gradient(110deg,color-mix(in srgb, var(--electric) 9%, transparent),color-mix(in srgb, var(--text) 2.5%, transparent));box-shadow:inset 0 0 22px color-mix(in srgb, var(--electric) 4.5%, transparent),0 10px 28px -24px var(--electric);animation:president-board-breathe 5s ease-in-out infinite}
.president-board__signal{width:7px;height:7px;border-radius:50%;background:var(--electric);box-shadow:0 0 12px var(--electric);animation:president-board-pulse 2s ease-in-out infinite}
.president-board__label{color:var(--electric);font:800 9px/1 Inter,sans-serif;letter-spacing:.14em;white-space:nowrap}.president-board__name{color:var(--text);font-size:14px}.president-board__alliance{color:var(--gold);font-family:Unbounded,sans-serif;font-size:14px;font-weight:800;letter-spacing:.04em}.president-board__note{color:var(--mute);font-size:10px;text-align:right}
@keyframes president-board-breathe{0%,100%{box-shadow:inset 0 0 22px color-mix(in srgb, var(--electric) 4.5%, transparent),0 10px 28px -24px var(--electric)}50%{box-shadow:inset 0 0 28px color-mix(in srgb, var(--electric) 9%, transparent),0 12px 32px -22px var(--electric)}}
@keyframes president-board-pulse{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:700px){.president-board{grid-template-columns:auto 1fr auto;gap:6px 8px;padding:9px 10px}.president-board__label{grid-column:2/-1;font-size:8px}.president-board__name{grid-column:2;font-size:13px}.president-board__alliance{grid-column:3;font-size:13px}.president-board__note{grid-column:2/-1;text-align:left;font-size:9px}}
@media(prefers-reduced-motion:reduce){.president-board,.president-board__signal{animation:none}}

/* Compact timeline cards: остальное перекрыто редизайном ленты ниже,
   здесь остаётся только анимация раскрытия деталей. */
@keyframes timeline-details-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.tl__details-body p{margin:0;line-height:1.65}
.tl__details-body .tl__gallery{margin-top:12px}
.adm-publish--top{position:sticky;top:10px;z-index:8;margin:0 0 14px;box-shadow:0 12px 30px -24px rgba(0,0,0,.9);backdrop-filter:blur(12px)}
@media(max-width:600px){.adm-publish--top{top:6px;display:grid;gap:10px}.adm-publish--top .adm-publish__actions{display:grid;grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.tl__details-body{animation:none}}

/* ── Presidential status card: refined command-center treatment ─────────── */
.president-board{position:relative;display:block;isolation:isolate;overflow:hidden;margin:14px 0 0;padding:15px 18px 14px;border:1px solid color-mix(in srgb, var(--electric) 28%, transparent);border-left:3px solid var(--electric);border-radius:18px;background:linear-gradient(110deg,color-mix(in srgb, var(--electric) 10.5%, transparent),color-mix(in srgb, var(--text) 2.8%, transparent) 48%,rgba(247,190,72,.055)),linear-gradient(180deg,rgba(16,27,34,.96),rgba(9,14,20,.96));box-shadow:inset 0 1px color-mix(in srgb, var(--text) 8%, transparent),inset 0 -18px 36px rgba(0,0,0,.14),0 14px 34px -24px color-mix(in srgb, var(--electric) 75%, transparent);animation:president-board-breathe 6s ease-in-out infinite}
.president-board::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 18%,color-mix(in srgb, var(--electric) 8%, transparent) 47%,transparent 70%);transform:translateX(-115%);animation:president-board-scan 8s cubic-bezier(.23,1,.32,1) infinite}
.president-board::after{content:'S33 / COMMAND STATUS';position:absolute;right:17px;bottom:12px;color:rgba(174,194,204,.38);font:700 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;pointer-events:none}
.president-board__head{display:flex;align-items:center;gap:9px;min-width:0;margin-bottom:13px}.president-board__signal{width:9px;height:9px;flex:none;border-radius:50%;background:var(--electric);box-shadow:0 0 0 4px color-mix(in srgb, var(--electric) 10%, transparent),0 0 16px var(--electric);animation:president-board-pulse 2.4s ease-in-out infinite}.president-board__label{color:var(--electric);font:800 10px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}.president-board__live{margin-left:auto;padding:4px 7px;border:1px solid color-mix(in srgb, var(--electric) 28%, transparent);border-radius:999px;color:var(--electric);font:800 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;opacity:.82}
.president-board__identity{display:flex;align-items:baseline;justify-content:space-between;gap:18px;min-width:0;padding-left:18px}.president-board__name{min-width:0;overflow:hidden;color:#f2f7f8;font-size:clamp(18px,2.2vw,25px);font-weight:800;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 22px color-mix(in srgb, var(--text) 13%, transparent)}.president-board__alliance{flex:none;color:var(--gold);font-family:Unbounded,sans-serif;font-size:clamp(16px,1.9vw,22px);font-weight:800;letter-spacing:.07em;text-shadow:0 0 18px rgba(247,190,72,.22)}.president-board__note{display:block;margin:11px 0 0;padding:8px 0 0 18px;border-top:1px solid color-mix(in srgb, var(--electric) 13%, transparent);color:var(--mute);font-size:10.5px;line-height:1.4}
@keyframes president-board-scan{0%,55%{transform:translateX(-115%)}75%,100%{transform:translateX(115%)}}
@media(max-width:700px){.president-board{margin-top:10px;padding:13px 13px 12px;border-radius:15px}.president-board__head{margin-bottom:11px}.president-board__label{font-size:8.5px;letter-spacing:.14em}.president-board__live{font-size:7px;padding:4px 6px}.president-board__identity{align-items:flex-start;gap:8px;padding-left:16px}.president-board__name{font-size:16px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.president-board__alliance{font-size:15px;line-height:1.25;text-align:right}.president-board__note{margin-top:9px;padding-left:16px;font-size:9.5px}.president-board::after{right:13px;bottom:10px;font-size:7px}}
@media(max-width:390px){.president-board__identity{display:grid;grid-template-columns:1fr auto;align-items:center}.president-board__name{font-size:15px}.president-board__alliance{font-size:14px}.president-board::after{display:none}}
@media(prefers-reduced-motion:reduce){.president-board,.president-board::before,.president-board__signal{animation:none}}

/* Keep the presidential board visually separated from the animated header edge. */
.president-board{margin-bottom:20px}
@media(max-width:700px){.president-board{margin-bottom:16px}}
@media(max-width:390px){.president-board{margin-bottom:14px}}

/* ── Mobile timeline containment and header order ───────────────────────── */
@media(max-width:759px){
  .site-head__inner{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .site-head__inner .brand{order:1}
  .site-head__inner #president-board{order:2}
  .site-head__inner .nav{order:3}
  .site-head__inner .president-board{width:100%}
  .site-head__inner .nav{width:100%;max-width:100%;min-width:0;overflow-x:auto}
  .tl,.tl__item,.tl__body,.tl__details,.tl__details-body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  .tl__item{gap:10px}
  .tl__body h3,.tl__body p,.tl__summary{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  .tl__meta{min-width:0;max-width:100%;gap:4px 8px}
  .tl__meta time,.tl__type{max-width:100%;overflow-wrap:anywhere}
  .tl__gallery{max-width:100%;overflow:hidden}
}
@keyframes s33-pulse-dot-contained{0%,100%{transform:scale(1);opacity:.86}50%{transform:scale(1.07);opacity:1}}
.tl__dot{animation:s33-pulse-dot-contained 2.8s ease-in-out infinite}

/* ── Ultra-compact president strip for small screens ───────────────────── */
@media(max-width:700px){
  .president-board{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:10px;padding:8px 10px;border-radius:12px;min-height:38px}
  .president-board__head{display:contents}
  .president-board__signal{width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb, var(--electric) 10%, transparent),0 0 12px var(--electric)}
  .president-board__label{flex:none;font-size:7px;letter-spacing:.1em}
  .president-board__live{order:5;flex:none;margin-left:0;padding:3px 5px;font-size:6px;letter-spacing:.08em}
  .president-board__identity{display:flex;align-items:baseline;justify-content:flex-start;gap:7px;min-width:0;flex:1;padding-left:0}
  .president-board__name{min-width:0;flex:1;font-size:13px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .president-board__alliance{font-size:12.5px;line-height:1;white-space:nowrap}
  .president-board__note{display:none}
  .president-board::after{display:none}
  .site-head__inner .brand{padding-top:8px;padding-bottom:5px}
  .site-head__inner .nav{padding-top:3px;padding-bottom:4px}
}
@media(max-width:390px){
  .president-board{gap:6px;padding:7px 8px;min-height:34px}
  .president-board__label{font-size:6.5px;letter-spacing:.07em}
  .president-board__name{font-size:12px}
  .president-board__alliance{font-size:11.5px}
  .president-board__live{padding:3px 4px;font-size:5.5px}
}

/* ── Quarter tab: distinct but integrated accent ────────────────────────── */
.nav__link[href="#/quarter"]{color:#c6a9df;border:1px solid rgba(198,169,223,.16);background:rgba(198,169,223,.035)}
.nav__link[href="#/quarter"]:hover{color:#eadbfa;background:rgba(198,169,223,.11);border-color:rgba(198,169,223,.34)}
.nav__link[href="#/quarter"].is-active{color:#17111d;background:linear-gradient(135deg,#d3a6ff,#a987c7);border-color:#d3a6ff;box-shadow:0 5px 18px -9px rgba(211,166,255,.8)}
.quart-page{--quart-acid:#d3a6ff;--quart-cyan:#9f86c9}

/* ── Final UI polish: consistent surfaces, rhythm and containment ──────── */
:root{--surface-radius:16px;--surface-gap:14px}
.panel,.hero,.quart-hero,.quart-board,.quart-podium,.achievements-panel,.card,.leader,.podium-card,.quart-card,.bot-feature,.bot-promise,.guide-extra-card{min-width:0;box-sizing:border-box;border-radius:var(--surface-radius)}
.panel,.quart-board,.quart-podium,.achievements-panel{padding:18px}
.panel__head{margin-bottom:13px}.panel__head p{max-width:68ch;line-height:1.5}
.grid-2,.proofs,.movers,.guide-extra-grid{gap:var(--surface-gap)}
.hero{margin-bottom:var(--surface-gap)}
.tl__item{min-width:0}.tl__body{min-width:0}.tl__body h3,.tl__body p{overflow-wrap:anywhere}
.tl__gallery{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}.tl__img{display:block;max-width:100%;height:auto}
.quart-hero{margin-bottom:var(--surface-gap)}.quart-board{padding-top:18px}.quart-podium{padding:18px}.quart-podium__heading{margin-bottom:13px}
.bot-section{margin-top:18px}.bot-feature{min-height:190px;padding:16px}.bot-feature__icon{margin:22px 0 16px}.bot-promise{margin-top:18px;padding:18px}.bot-final{padding:48px 16px 24px}
.guide-extra-grid{margin:18px 0}.guide-extra-card{padding:17px}.guide-extra-card h2{margin:7px 0 9px}
.achievements-panel{padding:18px}.roles-credit{margin-top:17px}
@media(max-width:759px){
  #app{padding-top:18px;padding-bottom:34px}
  .wrap{padding-left:12px;padding-right:12px}
  .panel,.hero,.quart-hero,.quart-board,.quart-podium,.achievements-panel{padding:15px 13px}
  .panel{margin-bottom:14px}
  .panel__head{margin-bottom:11px}
  .quart-podium__heading{margin-left:2px;margin-right:2px}
  .bot-feature{min-height:0;padding:14px}.bot-feature__icon{margin:18px 0 13px}
  .bot-promise{padding:15px}.bot-final{padding-top:34px}
  .guide-extra-card{padding:14px}
}
@media(max-width:420px){
  .wrap{padding-left:10px;padding-right:10px}
  .panel,.hero,.quart-hero,.quart-board,.quart-podium,.achievements-panel{padding:13px 11px;border-radius:14px}
  .panel__head h2{font-size:17px}
  .quart-controls,.ctl{gap:7px}
}

/* The gold quarter medal had its float animation overridden by the breathe rule. */
@keyframes quart-gold-medal-float{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--quart-acid) 38%,transparent))}50%{transform:translateY(-5px) scale(1.045);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--quart-acid) 72%,transparent))}}
.quart-podium-card--gold .quart-podium-card__medal{display:inline-block;transform-origin:center;animation:quart-gold-medal-float 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.quart-podium-card--gold .quart-podium-card__medal{animation:none}}

/* ── Хронология: лента как спокойный список ────────────────────────────────
   Прежний вид — рамочные квадратики с номерами, бегущая полоса слева, кружок
   «плюс/минус» и блик при наведении — читался пёстро. Теперь запись: тихая
   цветная точка исхода, подпись типа с датой, название и короткое описание,
   а раскрывающийся хвост обозначает один тонкий уголок. Это перекрывает
   правила выше намеренно целиком: старые классы-заглушки остаются в разметке
   прошлых поколений, и проще переопределить вид, чем разбирать каждый селектор.
*/
.tl::before { content: none; }

.tl__item {
  gap: 12px;
  padding: 2px 0 20px;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  transition: none;
}
.tl__item::after { content: none; }
.tl__item > *, .tl__item .tl__row > * { position: static; z-index: auto; }
.tl__item:hover, .tl__item:active { transform: none; border-color: transparent; }

.tl__row, summary.tl__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  list-style: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
summary.tl__row { cursor: pointer; }
.tl__row::-webkit-details-marker { display: none; }

.tl__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--line);
}
.tl__item--server_capture .tl__dot,
.tl__item--server_defended .tl__dot { background: var(--win); }
.tl__item--capture_failed .tl__dot,
.tl__item--server_lost .tl__dot,
.tl__item--war .tl__dot { background: var(--loss); }

.tl__body {
  flex: 1;
  min-width: 0;
  display: block;
  padding-top: 1px;
}

.tl__item .tl__title {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tl__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 3px;
  color: var(--mute);
  font-size: 11.5px;
  line-height: 1.5;
}
.tl__type {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--electric);
  overflow-wrap: anywhere;
}
.tl__sep { color: var(--line); font-size: 10px; }
.tl__meta-note { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tl__item--server_capture .tl__type,
.tl__item--server_defended .tl__type { color: var(--win); }
.tl__item--capture_failed .tl__type,
.tl__item--server_lost .tl__type,
.tl__item--war .tl__type { color: var(--loss); }

.tl__item .tl__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tl__details { margin: 0; border: 0; flex: 1; min-width: 0; }
.tl__details > summary::before { content: none; }
.tl__details-body {
  padding: 2px 0 16px 21px;
  color: var(--dim);
  animation: timeline-details-in .22s var(--ease-out) both;
}
.tl__details-body p { margin: 0; font-size: 13.5px; line-height: 1.65; overflow-wrap: anywhere; }
.tl__details-body .tl__gallery { margin-top: 12px; }

.tl__chev {
  flex: none;
  align-self: center;
  margin: 0 2px 0 6px;
  color: var(--mute);
  font-size: 11px;
  line-height: 1;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.tl__row:hover .tl__chev { color: var(--dim); }
.tl__details[open] .tl__chev { transform: rotate(180deg); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tl__details-body { animation: none; }
  .tl__chev { transition: none; }
}

/* ── Комментарии к событиям летописи ──────────────────────────────────── */

.tl__comments-box {
  margin: 8px 0 0;
  padding: 0;
}
.tl__comments-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.tl__comments-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.tl__comments-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.tl__comment {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
}
.tl__comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--raised-2);
  color: var(--dim);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
  overflow: hidden;
}
.tl__comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tl__comment-body { flex: 1; min-width: 0; }
.tl__comment-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.tl__comment-nick { font-weight: 700; font-size: 12px; color: var(--text); }
.tl__comment-time { color: var(--mute); font-size: 10.5px; }
.tl__comment-text { color: var(--dim); line-height: 1.5; }
.tl__comment-del {
  border: 0;
  background: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 11px;
  padding: 1px 4px;
}
.tl__comment-del:hover { color: var(--soft-bad); }
.tl__comment-form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.tl__comment-form input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.tl__comment-form input:focus { outline: none; border-color: var(--accent); }
.tl__comment-form button {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #14100c;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.tl__comment-form button:disabled { opacity: .5; }

/* ── Плашки вердиктов: список режем до нескольких свежих ───────────────────── */
.wks__more {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
  padding: 5px 11px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.wks__more:hover { color: var(--text); border-color: var(--mute); }
.wks__more[hidden] { display: none; }

/* Вердикт в шапке ведёт к записи в ленте — значит, он кликабелен. */
.verdict { cursor: pointer; }
.verdict:hover .verdict__text {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent);
  text-underline-offset: 3px;
}

/* Куда прыгнули из вердикта: короткая вспышка вокруг записи. */
.tl__item.is-flash { animation: tl-flash 1.1s var(--ease); }
@keyframes tl-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tl__item.is-flash { animation: none; }
}

/* ── Подсветка выбранной записи в шапке ────────────────────────────────────── */

/* Плавная анимация перехода между плашками. */
.wk {
  transition: border-color .16s var(--ease), background .16s var(--ease),
              color .16s var(--ease), box-shadow .16s var(--ease);
}

/* Выбранная плашка: заливка акцентом, как у активной кнопки календаря.
   Тёмный текст на оранжевом держит контраст — и цифра, и подпись читаются. */
.wk.is-sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #14100c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent), 0 8px 18px -14px var(--accent);
}
.wk.is-sel .wk__num,
.wk.is-sel.wk--win,
.wk.is-sel.wk--loss { color: #14100c; }
.wk.is-sel .wk__what { color: rgba(20, 16, 12, .74); }
.wk.is-sel.wk--win .wk__what b,
.wk.is-sel.wk--loss .wk__what b { color: #14100c; }

/* Видимый вердикт — выбранный: лёгкая оранжевая рамка-подсветка держит
   вместе плашку сверху и карточку судьбы, не споря с исходом (зелёный/красный). */
.verdict:not([hidden]) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
              0 18px 32px -26px color-mix(in srgb, var(--accent) 60%, transparent);
}