/* Оформление по НОВОМУ макету Figma «OLLO.gg-NEW» (Ma9ke0s59hoQFPKrMRVI7R, Page 13): посадочная главная (десктоп 1440, мобильный 390)
   и страница матча M1 · Mobile states (4 состояния EN и RU) — планка качества для остальных страниц. Токены — в :root:
   чёрный фон, панели #0c0c0c / #181818, красный live, фиолетовый градиент #5D2BFF → #8C2EFF, Montserrat.
   Отличия от макета ради доступности (WCAG AA 4.5): белый текст на красной заливке даёт 3.65 → заливка --red-fill (4.51);
   третичный #718096 не ставится на --panel-2 (4.42); фиолетовые заголовки макета (тёмный градиент, ~3:1) светлее — --purple-text;
   красный текст на красных чипах рангов (--red на rgba(255,45,85,.16) поверх --panel-2 даёт 4.18, на двойной подложке 3.44) — светлее, --red-text (≥ 5.0).
   Свечения, градиенты, дым, наведение — только CSS, скриптов нет. Шрифты, логотип, арт и QR лежат рядом (assets/): внешних запросов нет. */
/* Запасной шрифт с метриками Montserrat (size-adjust и override): пока woff2 не пришёл на медленной сети, системный шрифт занимает те же строки — подмена шрифта не сдвигает вёрстку (CLS 0) */
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'), local('Roboto'), local('Helvetica Neue'); ascent-override: 84.95%; descent-override: 22.03%; line-gap-override: 0%; size-adjust: 113.93%; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/montserrat-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #000000; --panel: #0c0c0c; --panel-2: #181818; --line: #1f1f22; --line-2: #2a2a2e;
  --fg: #ffffff; --fg-2: #a0aec0; --fg-3: #718096;
  --red: #ff2d55; --red-fill: #e61e4d; --red-text: #ff7a90; --purple-1: #5d2bff; --purple-2: #8c2eff; --green: #30d158; --link: #2aa6e8;
  --purple-text: #b79cff; --gold: #ffc940; --xp: #6cc3ff; --silver: #c9ced6; --bronze: #e0955a;
  --glow: rgba(93,43,255,.35); --glow-2: rgba(140,46,255,.22);
  --radius: 16px; --radius-s: 8px; --radius-l: 28px; --header-h: 56px; color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font: 500 14px/1.5 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, .btn-qr:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 30; padding: 10px 16px; border-radius: var(--radius-s); background: var(--red-fill); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; }
main:focus { outline: none; }
svg { display: inline-block; }

/* шапка: полупрозрачный чёрный с размытием, как в макете; логотип · язык · колокольчик (оповещения в Telegram) */
header.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; min-height: var(--header-h); padding: 6px 16px; background: rgba(0,0,0,.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
header .logo { display: inline-flex; align-items: center; text-decoration: none; }
header .logo img { display: block; height: 26px; width: auto; }
.bell { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--fg-2); background: var(--panel-2); transition: color .15s, box-shadow .2s, background .15s; }
.bell svg { width: 22px; height: 22px; }
.bell:hover { color: #fff; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); box-shadow: 0 0 22px var(--glow); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* меню: Матчи, Команды — ссылки; Новости, Лидерборд — пока без страниц: не ссылки, с меткой «скоро» */
.ni { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 14px; color: var(--fg-2); font-size: 11px; font-weight: 600; line-height: 14px; text-decoration: none; text-align: center; }
.ni .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); transition: background .15s, box-shadow .2s, transform .2s; }
.ni .ic svg { width: 22px; height: 22px; }
a.ni:hover .ic { background: var(--panel-4, #26262b); box-shadow: 0 0 18px var(--glow-2); transform: translateY(-1px); }
.ni[aria-current] { color: var(--fg); }
.ni[aria-current] .ic { background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); color: #fff; box-shadow: 0 0 22px var(--glow); }
.ni.soon { color: var(--fg-3); cursor: default; }
.ni.soon .ic { background: var(--panel); border: 1px dashed var(--line-2); color: var(--fg-3); }
.soon-tag { display: inline-block; padding: 1px 6px; border-radius: 100px; background: var(--panel-2); color: var(--fg-2); font-size: 9px; font-weight: 700; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
.ni .soon-tag { position: absolute; top: 2px; right: 0; }
.side { display: none; }
.social { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-bottom: 8px; }
.so { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); color: var(--purple-text); transition: color .15s, box-shadow .2s, transform .2s; }
.so svg { width: 20px; height: 20px; }
.so:hover { color: #fff; box-shadow: 0 0 18px var(--glow); transform: translateY(-1px); }
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: space-around; gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.bar .ni { flex: 1; min-width: 0; }
.bar .social { display: none; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.is-match { padding-bottom: 0; }
body.is-match .bar { display: none; }
/* свечения и печать Telegram выходят за край колонки: обрезаем без полосы прокрутки (clip не ломает sticky-шапку) */
.content { overflow-x: clip; }
html { overflow-x: clip; }
@media (min-width: 1024px) {
  body { padding-bottom: 0; background: radial-gradient(520px 560px at 0 34%, rgba(93,43,255,.16), transparent 72%), var(--bg); }
  .shell { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .content { min-width: 0; }
  .side { position: sticky; top: var(--header-h); align-self: start; display: flex; flex-direction: column; align-items: center; gap: 12px; height: calc(100vh - var(--header-h)); padding: 22px 0; }
  .bar { display: none; }
}

/* шапка страницы матча: назад · табло (логотип, счёт, логотип) · язык */
header.top.match-top { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 6px 10px; }
.back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--fg); text-decoration: none; transition: background .15s; }
.back:hover { background: var(--panel-2); }
.back svg { width: 22px; height: 22px; }
.sb { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 17px; line-height: 24px; font-variant-numeric: tabular-nums; }
.sb .sl { display: flex; gap: 3px; }
.sb .sl i { display: block; width: 4px; height: 24px; background: #3a3a3e; transform: skewX(-18deg); border-radius: 1px; }
.sb .sl.r i:last-child { background: var(--green); }
.sb .pts { white-space: nowrap; }

main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 12px; }
main.match { max-width: 760px; padding: 0 0 12px; }
h1 { margin: 0 0 6px; font-weight: 700; font-size: clamp(26px, 5vw, 40px); line-height: 1.25; letter-spacing: -.01em; }
h2 { margin: 28px 0 12px; font-weight: 700; font-size: 20px; line-height: 28px; }
h3 { margin: 0 0 10px; font-weight: 700; font-size: 17px; line-height: 24px; }
.lead { margin: 0; color: var(--fg-2); font-size: 14px; max-width: 44em; }
/* фиолетовые заголовки макета: сплошной светлый фиолетовый со свечением вместо градиента через background-clip: text —
   у такого текста проверки контраста (axe/Lighthouse) не видят цвета, а AA здесь обязателен */
.grad { color: var(--purple-text); text-shadow: 0 0 28px rgba(140,46,255,.45); }

/* ── посадочная главная ── */
main.landing { max-width: 1000px; padding-top: 12px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); grid-template-areas: 'text card' 'art art'; gap: 20px 32px; align-items: start; padding-top: 28px; }
.hero::before { content: ''; position: absolute; inset: -40px 0 auto; height: 560px; background: radial-gradient(60% 60% at 50% 60%, rgba(93,43,255,.28), transparent 70%); pointer-events: none; z-index: -1; }
.hero-text { grid-area: text; padding-top: 24px; }
.hero-h { margin: 0; padding-right: .08em; font-size: clamp(44px, 7.2vw, 88px); line-height: 1; letter-spacing: -.02em; }
.hero-lead { margin: 18px 0 0; color: var(--fg-2); font-size: clamp(16px, 2vw, 20px); font-weight: 600; line-height: 1.4; max-width: 16.5em; /* не ch: ширина «0» зависит от того, какой файл шрифта уже пришёл, и строки перескакивали (CLS) */ }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 11px 16px; border: 1px solid rgba(183,156,255,.35); border-radius: var(--radius-s); color: var(--fg); font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; transition: border-color .15s, box-shadow .2s, transform .2s; }
.btn-ghost svg { width: 18px; height: 18px; color: var(--purple-text); transition: transform .2s; }
.btn-ghost:hover { border-color: var(--purple-text); box-shadow: 0 0 22px var(--glow-2); transform: translateY(-1px); }
.btn-ghost:hover svg { transform: translateX(3px); }
.hero-art { grid-area: art; display: block; justify-self: center; width: min(100%, 720px); height: auto; margin: -30px 0 -70px; pointer-events: none; }
.tg-card { grid-area: card; position: relative; z-index: 1; margin-top: 44px; padding: 26px 24px 24px; border: 1px solid rgba(140,46,255,.25); border-radius: var(--radius-l); background: linear-gradient(160deg, rgba(93,43,255,.16), rgba(12,12,12,.92) 55%), var(--panel); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px var(--glow-2); }
.tg-stamp { position: absolute; top: -28px; right: -12px; display: grid; place-items: center; width: 88px; height: 88px; color: #fff; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); clip-path: polygon(50% 0, 60% 7%, 72% 3%, 78% 14%, 90% 16%, 90% 28%, 100% 36%, 95% 48%, 100% 62%, 92% 72%, 92% 84%, 80% 86%, 74% 97%, 62% 94%, 50% 100%, 38% 94%, 26% 97%, 20% 86%, 8% 84%, 8% 72%, 0 62%, 5% 48%, 0 36%, 10% 28%, 10% 16%, 22% 14%, 28% 3%, 40% 7%); }
.tg-stamp svg { width: 40px; height: 40px; transform: translate(-2px, 1px); }
.tg-card .t1 { margin: 0; font-weight: 700; font-size: 20px; line-height: 28px; padding-right: 72px; /* печать (88 px, выступ 12) — зазор до текста ≥ 16 px на 1024–1440 */ }
.tg-card .t2 { margin: 8px 0 0; color: var(--purple-text); font-weight: 600; font-size: 15px; line-height: 20px; }
.acts { display: flex; align-items: stretch; gap: 10px; margin: 20px 0 0; }
.btn-p { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 10px; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); color: #fff; font-weight: 600; font-size: 15px; line-height: 20px; text-decoration: none; box-shadow: 0 8px 26px var(--glow); transition: box-shadow .2s, transform .2s, filter .2s; }
.btn-p svg { width: 20px; height: 20px; }
.btn-p:hover { box-shadow: 0 10px 34px rgba(140,46,255,.55); transform: translateY(-1px); filter: brightness(1.08); }
.btn-qr { position: relative; display: grid; place-items: center; width: 48px; min-height: 48px; border-radius: 10px; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); color: #fff; box-shadow: 0 8px 26px var(--glow); transition: box-shadow .2s, transform .2s; }
.btn-qr svg { width: 24px; height: 24px; }
.btn-qr:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(140,46,255,.55); }
/* QR появляется подсказкой при наведении или фокусе (без скриптов); сам код — статический SVG на t.me/ollogg */
.qr-pop { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; display: none; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 6px; border-radius: 12px; background: #fff; color: #111; font-size: 12px; font-weight: 600; transform: translateX(-50%); box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.qr-pop img { display: block; width: 132px; height: 132px; border-radius: 6px; }
.btn-qr:hover .qr-pop, .btn-qr:focus-visible .qr-pop { display: flex; }

.kicker { margin: 0 0 4px; color: var(--fg-2); font-weight: 600; font-size: 15px; letter-spacing: .02em; text-align: center; }
.panel { position: relative; margin: 20px 0 0; padding: 36px 28px 32px; border: 1px solid rgba(140,46,255,.18); border-radius: var(--radius-l); background: linear-gradient(180deg, rgba(93,43,255,.12), rgba(12,12,12,.85) 50%), var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.panel h2.grad, .perks h2.grad { margin: 0; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; text-align: center; }
.sub { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; color: var(--fg); font-weight: 700; font-size: 15px; line-height: 20px; text-align: center; }
.soon-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(183,156,255,.45); background: rgba(93,43,255,.18); color: var(--purple-text); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); transition: transform .2s, box-shadow .25s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: rgba(140,46,255,.45); box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 30px var(--glow-2); }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 26px auto 0; padding: 0; max-width: 760px; list-style: none; }
.cards3 .card { display: flex; flex-direction: column; }
.cards3 .card h3 { flex: 1; display: flex; align-items: center; margin: 0; padding: 18px 20px 22px; font-size: 17px; line-height: 24px; background: var(--bg); }
.art { display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; min-width: 0; overflow: hidden; height: 170px; background: radial-gradient(70% 70% at 50% 60%, rgba(93,43,255,.25), transparent 72%), #121018; }
.art .lg { font-size: 22px; }
.art .vs { color: var(--purple-text); font-weight: 700; font-size: 18px; letter-spacing: .08em; }
.art .plus { color: var(--green); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.02em; text-shadow: 0 0 28px rgba(48,209,88,.6); }
.art-prize { color: var(--gold); }
.art-prize svg { width: 96px; height: 96px; filter: drop-shadow(0 0 16px rgba(255,201,64,.45)); }

.perks { margin: 52px 0 0; }
.perks .sub { margin-top: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px auto 0; max-width: 760px; }
.pcard { padding: 24px 22px 22px; }
.pcard h3 { margin: 0 0 18px; font-size: 20px; line-height: 28px; text-align: center; }
.pcard.wide { grid-column: 1 / -1; }
.ranks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ranks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); border-left: 3px solid transparent; }
.ranks .rn { padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 18px; }
.ranks b { font-size: 17px; line-height: 24px; }
.ranks .r1 { background: linear-gradient(90deg, rgba(255,201,64,.18), var(--panel-2)); border-color: var(--gold); color: var(--gold); }
.ranks .r1 .rn { background: rgba(255,201,64,.16); }
.ranks .r2 { background: linear-gradient(90deg, rgba(255,45,85,.16), var(--panel-2)); border-color: var(--red); color: var(--red-text); }
.ranks .r2 .rn { background: rgba(255,45,85,.16); }
.ranks .r3 { background: linear-gradient(90deg, rgba(140,46,255,.18), var(--panel-2)); border-color: var(--purple-text); color: var(--purple-text); }
.ranks .r3 .rn { background: rgba(140,46,255,.18); }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; height: 170px; padding: 0 12px; }
.podium > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; border-radius: 12px 12px 4px 4px; }
.podium i { display: grid; place-items: center; width: 44px; height: 44px; }
.podium i svg { width: 36px; height: 36px; }
.podium b { display: grid; place-items: center; width: 100%; font-size: 22px; color: #111; }
.podium .p1 { height: 100%; background: linear-gradient(180deg, #ffe08a, #e0a800); color: var(--gold); box-shadow: 0 0 36px rgba(255,201,64,.35); }
.podium .p2 { height: 72%; background: linear-gradient(180deg, #e4e8ee, #9aa3b0); color: var(--silver); }
.podium .p3 { height: 56%; background: linear-gradient(180deg, #f0b27a, #b86f3a); color: var(--bronze); }
.podium .p1 b { height: 56px; } .podium .p2 b { height: 44px; } .podium .p3 b { height: 36px; }
.podium i { color: #fff; filter: drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.cm { padding: 16px 18px; border-radius: 14px; background: var(--panel-2); max-width: 560px; margin: 0 auto; }
.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ava { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); color: #fff; font-weight: 700; }
.rbadge { padding: 2px 8px; border-radius: 100px; background: rgba(255,45,85,.16); color: var(--red-text); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.when { width: 100%; color: var(--fg-2); font-size: 12px; margin-left: 40px; margin-top: -6px; }
.cm-text { margin: 10px 0 0; font-size: 14px; line-height: 20px; }
.pick { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--panel); }
.pick .pk { color: var(--fg-2); font-size: 12px; }
.pick b { font-size: 14px; }
.lg.s28 { width: 28px; height: 28px; font-size: 12px; }
.demo { margin: 12px 0 0; color: var(--fg-3); font-size: 12px; text-align: center; }
.cta-final { margin: 56px auto 0; padding: 32px 24px; max-width: 760px; text-align: center; border-radius: var(--radius-l); background: linear-gradient(180deg, rgba(93,43,255,.14), rgba(93,43,255,.03)); }
.cta-final h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); line-height: 1.3; }
.cta-final .acts { justify-content: center; margin-top: 20px; }
.errbox { padding: 40px 0; }
.errbox .acts { gap: 12px; }

/* метки состояния: фиолетовая (ожидается, завершён), красная (live), серая (нет данных) */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: .02em; text-transform: uppercase; }
.b-live { background: var(--red-fill); }
.b-sched, .b-fin { background: linear-gradient(8.6deg, var(--purple-1) 0%, var(--purple-2) 100%); }
.b-na { background: var(--panel-2); color: var(--fg-2); border: 1px solid var(--line-2); }

/* экран матча — шапка по M1 (Figma OLLO.gg-NEW, кадр 3300:200): крупное состояние над плашкой статуса, затем заголовок и строка даты */
.mhero { padding: 44px 16px 36px; background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); }
.mhero .big { margin: 0 0 40px; font-weight: 700; font-size: clamp(32px, 9vw, 44px); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Заголовок (хозяева / «против» / гости) и строка даты с турниром — по одной строке на часть (nowrap, многоточие): высота шапки
   не зависит от ширины шрифта и от того, успел ли он прийти. При медленной сети латинский Montserrat приходит после первого кадра,
   и перенос по содержимому давал на 768 RU +40 px у заголовка (2 → 3 строки) и +22 px у строки даты (1 → 2) — сдвиг 0,12–0,19
   (скептик 05.10); preload шрифтов ускоряет, но от этого не защищает. */
.mhero h1 { margin: 12px 0 0; display: grid; font-size: clamp(26px, 7vw, 32px); line-height: 40px; }
.mhero h1 .vs { font-size: 20px; font-weight: 600; line-height: 24px; color: var(--fg-2); }
.mhero h1 > *, .mhero .metarow > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhero .metarow { margin: 10px 0 0; display: flex; flex-wrap: nowrap; gap: 20px; color: var(--fg-3); font-size: 13px; line-height: 18px; }
.mhero .metarow time { flex: none; }
.state-live { background: linear-gradient(180deg, rgba(255,45,85,.12), transparent 70%), var(--panel); }
.state-scheduled, .state-finished { background: radial-gradient(60% 80% at 0 0, rgba(93,43,255,.18), transparent 70%), var(--panel); }
.tabs { display: flex; gap: 6px; padding: 18px 10px 4px; }
.tabs a { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; height: 44px; padding: 8px 16px; border-radius: 100px; color: var(--fg-2); font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; transition: background .15s, color .15s; }
.tabs a:hover { background: var(--panel-2); color: var(--fg); }
.details { margin: 12px 16px 0; padding: 16px; border-radius: var(--radius); background: var(--panel); display: grid; gap: 12px; }
.details h2 { margin: 0; font-size: 20px; line-height: 40px; }
.details p { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 18px; }
.details table { background: transparent; border: 0; }
.pv { margin: 18px 16px 0; color: var(--fg-3); font-size: 12px; }

/* списки матчей: карточка как у aurora (72 px, #0c0c0c): турнир, команды с логотипами и чёрточками победы, кнопка */
.matches { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mc { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: border-color .15s, transform .2s, box-shadow .25s; }
.mc:hover { border-color: rgba(140,46,255,.4); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 24px var(--glow-2); }
.mc.live { background: linear-gradient(0deg, rgba(255,45,85,.08), rgba(255,45,85,.08)), var(--panel); border-color: rgba(255,45,85,.35); }
.mc.live:hover { border-color: rgba(255,45,85,.6); box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 24px rgba(255,45,85,.25); }
.mc.finished.w-home { background: radial-gradient(280px 100px at 20% 50%, rgba(48,209,88,.17), transparent 70%), var(--panel); }
.mc.finished.w-away { background: radial-gradient(280px 100px at 80% 50%, rgba(48,209,88,.17), transparent 70%), var(--panel); }
.mc > a { display: grid; grid-template-columns: minmax(150px,1fr) minmax(0,1.7fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 12px 16px; text-decoration: none; }
.mc .tour { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mc .ti { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--panel-2); color: var(--fg-3); }
.mc .ti svg { width: 16px; height: 16px; }
.mc .tn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-3); font-size: 13px; font-weight: 600; line-height: 18px; }
.mc .core { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.mc .tm { display: flex; align-items: center; flex: 1 1 0; gap: 12px; min-width: 0; }
.mc .tm.l { justify-content: flex-end; }
.mc .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; line-height: 20px; }
.mc .nm.win { color: var(--green); }
.mc .mid { flex: none; width: 92px; text-align: center; }
.mc .up { display: block; font-weight: 600; font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.mc .dn { display: block; color: var(--fg-3); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; /* «19:45 UTC» в запасном шрифте шире ячейки: без nowrap строка переносилась и карточка прыгала при приходе latin-500 */ }
/* на карточке с зелёным свечением победителя третичный серый даёт 3.7 в центре свечения (замер по пикселям, круг 2) — там турнир и время вторичным */
.mc.w-home .tn, .mc.w-home .dn, .mc.w-away .tn, .mc.w-away .dn { color: var(--fg-2); }
.wb { display: grid; place-items: center; flex: none; width: 10px; }
.wb i { display: block; width: 6px; height: 20px; background: rgba(255,255,255,.2); transform: skewX(10deg); }
.mid ~ .wb i { transform: skewX(-10deg); }
.wb.on i { background: linear-gradient(135deg, #34ee50, #248a3d); box-shadow: 0 0 6px rgba(52,238,80,.6); }
.mc .cta { justify-self: end; margin: 0; padding: 10px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-s); background: none; color: var(--fg-2); font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; transition: border-color .15s, color .15s, box-shadow .2s; }
.mc a:hover .cta { border-color: var(--purple-text); color: var(--fg); box-shadow: 0 0 16px var(--glow-2); }
.mc.live .cta { color: var(--red); border-color: rgba(255,45,85,.4); }
.live { color: var(--red); font-weight: 700; letter-spacing: .06em; }
.live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.8s infinite; }
/* карточка в эфире (Роман 06.10, снимок с прода: «● В эфире 11:32» наезжал на логотип второй команды, лишняя точка в углу карточки):
   точка — только у подписи «В эфире», не у самой карточки; подпись и время матча — двумя строками, колонка счёта растёт по содержимому */
.mc.live::before { content: none; }
.mc.live .mid { width: auto; min-width: 92px; }
.mc.live .dn { display: flex; flex-direction: column; align-items: center; line-height: 16px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,45,85,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,45,85,0); } }
.empty { margin: 0; padding: 20px 18px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--fg-2); }
.source { color: var(--fg-3); font-size: 12px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .2s; }
.btn:hover { border-color: var(--purple-text); box-shadow: 0 0 16px var(--glow-2); }

/* логотипы: круг с буквой под картинкой (картинка не загрузилась — видна буква) */
.lg { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--fg-2); font-weight: 700; line-height: 1; }
.lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg.s40 { width: 40px; height: 40px; font-size: 15px; }
.lg.s44 { width: 44px; height: 44px; font-size: 16px; }
.lg.s56 { width: 56px; height: 56px; font-size: 22px; border-color: rgba(183,156,255,.5); box-shadow: 0 0 20px var(--glow-2); }
.lg.s64 { width: 64px; height: 64px; font-size: 22px; }
.lg.tl { width: 28px; height: 28px; font-size: 12px; }

/* выбор дня */
.days { margin: 20px 0 4px; }
.days .mon { margin: 0 0 8px; color: var(--fg-3); font-size: 13px; font-weight: 600; text-transform: capitalize; }
.days ul { display: flex; direction: rtl; gap: 6px; width: max-content; max-width: 100%; margin: 0; padding: 0 0 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; list-style: none; scroll-snap-type: x proximity; }
.days li { direction: ltr; flex: none; }
.days .mb { align-self: center; padding: 0 4px 0 8px; color: var(--fg-3); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.days a { display: grid; justify-items: center; gap: 2px; min-width: 50px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg-2); text-decoration: none; scroll-snap-align: start; transition: border-color .15s, box-shadow .2s, transform .2s; }
.days .wd { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.days .dn { color: var(--fg); font-size: 17px; font-weight: 700; line-height: 24px; }
.days a:hover { border-color: rgba(140,46,255,.5); transform: translateY(-1px); box-shadow: 0 0 16px var(--glow-2); }
.days a[aria-current] { border-color: transparent; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); color: #fff; box-shadow: 0 0 22px var(--glow); }

/* команды */
.tlist { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.tcard > a { display: grid; grid-template-columns: 32px auto minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-decoration: none; transition: border-color .15s, transform .2s, box-shadow .25s; }
.tcard > a:hover { border-color: rgba(140,46,255,.4); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 24px var(--glow-2); }
.tcard .rk { color: var(--fg-3); font-weight: 700; text-align: center; }
.tcard:nth-child(-n+3) .rk { color: var(--gold); }
.tcard .tnm b { display: block; font-size: 15px; line-height: 20px; }
.tcard .tnm small { color: var(--fg-3); font-size: 12px; }
.tcard .stat { text-align: right; }
.tcard .stat b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.tcard .stat small { color: var(--fg-3); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.thero { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; padding: 20px; border-radius: var(--radius); background: radial-gradient(60% 100% at 0 0, rgba(93,43,255,.18), transparent 70%), var(--panel); border: 1px solid var(--line); }
.thero h1 { margin: 0; }
.chips { display: flex; gap: 10px; margin: 0 0 0 auto; }
.chips div { padding: 8px 14px; border-radius: 12px; background: var(--panel-2); text-align: center; }
.chips dt { color: var(--fg-2); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.chips dd { margin: 0; font-size: 17px; font-weight: 700; }

table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
th { padding: 10px 14px; text-align: left; background: var(--panel-2); color: var(--fg-2); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--line); }
td small { color: var(--fg-3); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 22px; margin: 16px 0; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); }
.facts dt { color: var(--fg-3); font-weight: 600; }
.facts dd { margin: 0; font-weight: 600; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.roster { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roster li { padding: 7px 12px; border-radius: var(--radius-s); background: var(--panel-2); font-weight: 600; transition: box-shadow .2s; }
.roster li:hover { box-shadow: 0 0 14px var(--glow-2); }
.roster small { color: var(--fg-2); }
img.logo { vertical-align: middle; border-radius: 8px; }
.ad-slot:empty { display: none; }

/* подвал (макет): логотип · «Твой навигатор в мире киберспорта!» · copyright · колонки «Сайт», «Вконтакте», «Telegram» */
footer.foot { position: relative; max-width: 1040px; margin: 56px auto 0; padding: 40px 16px 40px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: 13px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 40px; }
footer.foot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: radial-gradient(60% 100% at 50% 100%, rgba(93,43,255,.22), transparent 70%); pointer-events: none; z-index: -1; }
.fbrand img { display: block; height: 28px; width: auto; }
footer .big { margin: 22px 0 10px; color: var(--fg); font-weight: 700; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.02em; max-width: 8.4em; }
footer .copy { margin: 0; color: var(--fg-3); font-size: 12px; }
.fcols { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 24px 32px; align-content: start; padding-top: 24px; }
.fh { margin: 0 0 12px; color: var(--fg); font-size: 14px; line-height: 20px; font-weight: 700; }
.fcol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fcol li > a, .fcol li > .soon { display: inline-block; padding: 4px 0; line-height: 20px; }
.fcol a { color: var(--fg-2); text-decoration: none; transition: color .15s; }
.fcol a:hover { color: var(--fg); text-decoration: underline; }
.fcol .soon { color: var(--fg-3); white-space: nowrap; /* «Лидерборд · скоро» на 768 переносился на две строки — интервалы колонки сбивались */ }
.fine { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: 12px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'text' 'art' 'card'; gap: 8px; padding-top: 12px; text-align: center; }
  .hero-text { padding-top: 8px; display: flex; flex-direction: column; align-items: center; }
  .hero-h { max-width: none; font-size: clamp(44px, 12vw, 64px); text-transform: uppercase; letter-spacing: 0; line-height: 1.05; }
  .hero-lead { max-width: 14em; }
  .hero-art { margin: -12px 0 -40px; }
  .tg-card { margin-top: 0; text-align: left; }
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .cards3 .card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: stretch; }
  .cards3 .art { height: auto; min-height: 110px; gap: 6px; }
  .cards3 .card h3 { padding: 16px; }
  .art .lg.s56 { width: 36px; height: 36px; font-size: 15px; }
  .art .vs { font-size: 14px; letter-spacing: .04em; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 28px 16px 24px; }
  /* подвал в одну колонку уже с 860: на 768 трём колонкам «Сайт / Вконтакте / Telegram» со строками без переноса не хватало половины ширины */
  footer.foot { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fcols { padding-top: 0; }
}
@media (max-width: 720px) {
  .mc > a { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px 14px; }
  .mc .cta { display: none; }
  .mc .nm { white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
  .mc .tm { gap: 8px; }
  .tcard > a { grid-template-columns: 26px auto minmax(0,1fr) auto; gap: 10px; padding: 12px; }
  .tcard .stat:last-child { display: none; }
  .fcols { grid-template-columns: repeat(2, minmax(max-content, 1fr)); /* колонка не уже «Лидерборд · скоро» (133 px на 320) */ }
}
@media (max-width: 560px) {
  main { padding: 20px 12px 12px; }
  /* нижнее меню: с «Турнирами» (C1 + ARCH1) в нём шесть пунктов, и на 375 подписи «Leaderboard» / «Classificação» вылезали за свой
     пункт и за край окна. Пункты «скоро» (Новости, Лидерборд — не ссылки) на телефоне в нижнем меню не показываем: они есть в меню
     шапки и в подвале; в нижнем остаются четыре живых раздела */
  .bar .ni.soon { display: none; }
  main.landing { padding-top: 8px; }
  header.top { gap: 10px; padding: 6px 12px; }
  .mc .nm { font-size: 13px; }
  .mc .lg.s40 { width: 28px; height: 28px; font-size: 12px; }
  .mc .mid { width: 68px; }
  .mc.live .mid { min-width: 68px; }
  .mc .core { gap: 6px; }
  th, td { padding: 9px 10px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .chips { margin-left: 0; }
  .tg-card { padding: 22px 18px 20px; }
  .tg-stamp { top: -22px; right: -10px; width: 72px; height: 72px; }
  .tg-stamp svg { width: 32px; height: 32px; }
  .cta-final { padding: 28px 16px; }
  .qr-pop { left: auto; right: 0; transform: none; }
  .cards3 .card { grid-template-columns: 104px minmax(0, 1fr); }
  .art .plus { font-size: 40px; }
  .art .lg.s56 { width: 32px; height: 32px; font-size: 13px; }
  .art .vs { font-size: 12px; }
  .art-prize svg { width: 64px; height: 64px; }
}
@media (max-width: 420px) {
  .mc .wb { display: none; }
  .mc .nm { font-size: 12.5px; hyphens: auto; }
  .acts { flex-wrap: wrap; }
  .acts .btn-p { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover, .mc:hover, .tcard > a:hover, .btn-p:hover, .btn-qr:hover, .btn-ghost:hover, .days a:hover, .so:hover, a.ni:hover .ic { transform: none; }
}
.flinks nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.flinks a { color: var(--fg-2); font-size: 13px; text-decoration: none; }
.flinks a:hover { color: var(--fg); }

/* ───── страница матча (MATCH2): драфт, график золота и опыта, события, игроки; планшет 768 и компьютер 1280 ─────
   Телефон — один столбец в порядке макета; с 768 — шапка в три колонки с логотипами; с 1024 — две колонки.
   Линии графика — токены --gold и --xp (контраст на панели проверяет тест). Скриптов нет: порядок и колонки задаёт CSS. */
.lg.mh { display: none; }
.mhero .mh-mid { min-width: 0; }
.tabs { overflow-x: auto; scrollbar-width: none; }
/* порядок блоков на телефоне — как в макете: панель состояния, драфт, график, события, игроки, турнир */
.mcols { display: flex; flex-direction: column; }
.mmain, .maside { display: contents; }
.panel { order: 1; } #draft { order: 2; } #chart { order: 3; } #events { order: 4; } #stats { order: 5; } #tournament { order: 6; }
.details .hint { color: var(--fg-2); }
.details h3 { margin: 4px 0 0; }
/* драфт: две стороны, пики и баны по порядку; герой — монограмма в круге, чужих картинок нет */
.draft { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dside { min-width: 0; }
.dside .dl { margin: 10px 0 6px; color: var(--fg-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dlist li { display: grid; grid-template-columns: 16px 30px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.dlist .ord { color: var(--fg-2); font-size: 11px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* имя героя: перенос только по пробелам и дефисам; слово, которое не влезло («Dawnbreaker» в узком столбце 375), — многоточие, полное имя в title */
.dlist .hn { min-width: 0; font-size: 13px; font-weight: 600; line-height: 16px; overflow-wrap: normal; word-break: normal; overflow: hidden; text-overflow: ellipsis; }
.hm { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .02em; }
.pick .hm { border-color: transparent; background: linear-gradient(135deg, var(--purple-1), var(--purple-2)); color: #fff; }
.ban .hm { color: var(--fg-2); }
.ban .hn { color: var(--fg-2); text-decoration: line-through; }
/* график: SVG с сервера; подписи и сетка — токены; узкая версия показывается только на телефоне */
.advfig { margin: 4px 0 0; }
.advfig figcaption { margin: 0 0 8px; color: var(--fg-2); font-size: 13px; line-height: 18px; }
.advfig figcaption b { display: block; color: var(--fg); font-size: 15px; line-height: 20px; }
.adv { display: block; width: 100%; height: auto; }   /* селектор без svg.: иначе он сильнее .adv-n/.adv-w, и спрятать одну из версий не выйдет */
.adv text { fill: var(--fg-2); font: 500 11px/1 'Montserrat', system-ui, sans-serif; }
.adv .sd { font-weight: 600; }
.adv .grid line { stroke: var(--line-2); stroke-width: 1; }
.adv .grid .zero { stroke: var(--fg-3); }
.adv .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.adv .area { opacity: .16; }
.adv.gold .line { stroke: var(--gold); }
.adv.gold .area { fill: var(--gold); }
.adv.xp .line { stroke: var(--xp); }
.adv.xp .area { fill: var(--xp); }
.adv-n { display: none; }
/* лента событий: время · логотип стороны · текст */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ev { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); align-items: center; gap: 10px; }
.ev time { color: var(--fg-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ev .et { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.ev.firstblood time { color: var(--red); }
.ev.roshan time { color: var(--gold); }
.ev.ancient .et { font-weight: 700; }
.lg.tl.none { background: transparent; border-style: dashed; }
/* таблица игроков: с 600 px — таблица; на телефоне строка становится карточкой с подписями из data-l, ничего не обрезается */
.players th, .players td { padding: 8px 10px; font-size: 13px; }
.players td { font-variant-numeric: tabular-nums; }
.players .hr span:last-child { vertical-align: middle; }
.players .hm { width: 26px; height: 26px; margin-right: 8px; font-size: 10px; vertical-align: middle; }
@media (max-width: 599px) {
  .players, .players tbody, .players td { display: block; }
  .players thead { display: none; }
  .players tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; border-top: 1px solid var(--line); }
  .players tr:first-child { border-top: 0; }
  .players td { padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .players td::before { content: attr(data-l); display: block; margin-bottom: 2px; color: var(--fg-2); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: normal; }
  .players .pl { font-weight: 700; }
  .players .hr { display: flex; flex-wrap: wrap; align-items: center; }
  .players .hr::before { flex-basis: 100%; }
  .players .hr .hm { margin-right: 8px; }
  .players .hr span:last-child { flex: 1 1 0; min-width: 0; }
  .adv-w { display: none; }
  .adv-n { display: block; }
}
@media (max-width: 359px) { .draft { grid-template-columns: 1fr; } }
/* планшет: шире, шапка матча в три колонки — логотип, табло, логотип */
@media (min-width: 768px) {
  main.match { max-width: 1120px; padding: 0 16px 12px; }
  .mhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 16px; padding: 28px 24px; border-radius: var(--radius); text-align: center; }
  .lg.mh { display: inline-grid; justify-self: center; width: 80px; height: 80px; font-size: 28px; }
  .mhero .metarow { justify-content: center; }
  .tabs { padding: 18px 0 4px; }
  .details { margin: 12px 0 0; padding: 20px; }
  .pv { margin: 18px 0 0; }
  .draft { gap: 20px; }
}
/* компьютер: две колонки — драфт, график, игроки слева; состояние, события, турнир справа */
@media (min-width: 1024px) {
  .mcols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 16px; align-items: start; }
  .mmain, .maside { display: block; min-width: 0; }
  /* «О турнире» в колонке 340 px — подпись над значением, как на телефоне: в две колонки «Длительность» (106 px) и «Профессиональный»
     (152 px) не помещаются в 264 px, и список вылезал за карточку на 74 px (ARCH1-SEO-02, замер headless Chrome 08.10) */
  .maside .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .maside .facts dd { margin-bottom: 8px; }
}

/* ───── выбор языка (details без скриптов): кнопка с глобусом, список языков своими названиями ───── */
.lp { margin-left: auto; position: relative; }
header.match-top .lp { margin: 0; }
.lp-d { position: relative; }
.lp-s { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 100px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--fg); font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.lp-s::-webkit-details-marker { display: none; }
.lp-s:hover, .lp-d[open] > .lp-s { border-color: rgba(140,46,255,.55); background: #1d1a26; }
.lp-s:focus-visible, .lp-menu a:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.lp-s svg { width: 16px; height: 16px; flex: none; }
.lp-s .chev { opacity: .65; transition: transform .15s; }
.lp-d[open] .chev { transform: rotate(180deg); }
.lp-code { display: none; letter-spacing: .06em; }
.lp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: #14111c; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(93,43,255,.2); }
.lp-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--fg); font-weight: 600; font-size: 14px; text-decoration: none; }
.lp-menu a:hover { background: rgba(140,46,255,.14); }
.lp-menu a[aria-current] { color: var(--purple-text); background: rgba(93,43,255,.16); }
.lp-menu .lp-c { margin-left: auto; color: var(--fg-3); font-size: 11px; letter-spacing: .06em; }
.lp-menu .ck { width: 16px; height: 16px; flex: none; color: var(--purple-text); }
@media (max-width: 520px) { .lp-name { display: none; } .lp-code { display: inline; } .lp-s { padding: 0 10px; gap: 6px; } }
/* китайский: Montserrat только для цифр и латиницы, иероглифы — системный шрифт без загрузки (CSP, без внешних шрифтов) */
:lang(zh) body, body:lang(zh) { font-family: 'Montserrat', 'Montserrat Fallback', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif; }
/* PandaScore schedule: readable UTC fallback and independent stream link. */
.mc.scheduled .mid { min-width: 120px; }
.mc.scheduled .dn { display: flex; flex-direction: column; white-space: normal; line-height: 1.4; }
.countdown { display: block; color: var(--fg-3); font-size: 12px; }
.provider { margin: 0; padding: 8px 16px; font-size: 12px; border-top: 1px solid var(--line); }
.provider .stream { display: inline-block; padding: 6px 0; }
.schedule-detail { padding: 12px 0; }

/* HDR1: one site header, native disclosure on compact screens. */
.site-header .hdr-brand { color: var(--fg); font-size: 25px; font-weight: 800; letter-spacing: .06em; }
.hdr-desktop { display: flex; align-items: center; gap: 22px; flex: 1; }
.hdr-links,.hdr-games { display: flex; align-items: center; gap: 16px; }
.hdr-links a,.hdr-games a,.hdr-telegram { text-decoration: none; color: var(--fg); font-size: 12px; font-weight: 600; }
.hdr-links a[aria-current],.hdr-games a { color: var(--purple-text); }
.hdr-soon { display: flex; flex-direction: column; gap: 2px; color: var(--fg-2); font-size: 12px; }
.hdr-soon small { font-size: 9px; color: var(--fg-3); text-transform: uppercase; }
.hdr-telegram { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.hdr-mobile { display: none; }
.hdr-score { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px; border-bottom: 1px solid var(--line); }
.hdr-score .sb { max-width: 420px; }
@media(max-width:1199px) {
 .hdr-desktop { display: none; }
 .hdr-mobile { display: block; }
 .hdr-mobile summary { cursor: pointer; padding: 11px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 10px; }
 .hdr-panel { position: absolute; top: 100%; left: 12px; right: 12px; padding: 20px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px #0009; }
 .hdr-panel .hdr-links { flex-wrap: wrap; margin-top: 20px; gap: 20px; }
 .site-header .lp { margin-left: auto; }
}
@media(max-width:480px) {
 header.site-header { gap: 7px; padding: 6px 10px; }
 .site-header .hdr-brand { font-size: 21px; }
 .hdr-telegram { font-size: 11px; padding: 10px 7px; }
}

/* MY1: пояс времени (по образцу выбора языка), кнопки «Следить», «Мои матчи», поиск. Без скриптов: <details>, :target. */
.tzp { position: relative; }
.tz-d { position: relative; }
.tz-s { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 100px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--fg); font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; transition: border-color .15s, background .15s; }
.tz-s::-webkit-details-marker { display: none; }
.tz-s:hover, .tz-d[open] > .tz-s { border-color: rgba(140,46,255,.55); background: #1d1a26; }
.tz-s:focus-visible, .tz-menu a:focus-visible, .fw:focus-visible, .sform input:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.tz-s svg { width: 16px; height: 16px; flex: none; }
.tz-s .chev { opacity: .65; transition: transform .15s; }
.tz-d[open] .chev { transform: rotate(180deg); }
.tz-cur { font-variant-numeric: tabular-nums; }
.tz-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px; max-height: min(70vh, 560px); overflow-y: auto; margin: 0; padding: 8px 6px; background: #14111c; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(93,43,255,.2); }
.tz-h { margin: 6px 10px 4px; color: var(--fg-3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tz-hc, .tz-list { margin: 0; padding: 0; list-style: none; }
.tz-hc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tz-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--fg); font-weight: 600; font-size: 14px; text-decoration: none; }
.tz-menu a:hover { background: rgba(140,46,255,.14); }
.tz-menu a[aria-current] { color: var(--purple-text); background: rgba(93,43,255,.16); }
.tz-o { margin-left: auto; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.tz-note { margin: 8px 10px 4px; color: var(--fg-3); font-size: 12px; line-height: 1.4; }
.site-header .tz-bar { margin-left: auto; }
.site-header .tz-bar + .lp { margin-left: 0; }
.tz-panel { display: none; margin-top: 20px; }
.tz-panel .tz-menu { position: static; width: auto; max-height: none; margin-top: 8px; box-shadow: none; }
@media (max-width: 559px) {
  .site-header .tz-bar { display: none; }
  .site-header .tz-bar + .lp { margin-left: auto; }
  .tz-panel { display: block; }
}
/* кнопка «Следить»: «Не следить» видна только в состоянии on (сервер на /my или /assets/follow.js по cookie) */
.fw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(183,156,255,.35); border-radius: 100px; background: none; color: var(--fg); font: inherit; font-weight: 600; font-size: 14px; line-height: 20px; cursor: pointer; transition: border-color .15s, box-shadow .2s, background .15s; }
.fw:hover { border-color: var(--purple-text); box-shadow: 0 0 16px var(--glow-2); }
.fw .st { width: 18px; height: 18px; flex: none; color: var(--purple-text); }
.fw.on { background: rgba(93,43,255,.16); border-color: rgba(183,156,255,.55); }
.fw.on .st { fill: currentColor; }
.fw .fw-b, .fw.on .fw-a { display: none; }
.fw.on .fw-b { display: inline; }
.fw.sm { min-height: 32px; max-width: 100%; padding: 4px 10px; gap: 6px; border-color: var(--line-2); color: var(--fg-2); font-size: 12px; line-height: 16px; }
.fw.sm .st { width: 14px; height: 14px; }
.fw-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-fw { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px 12px; }
.mhero + .mc-fw { padding: 12px 0 0; }
.thero .fw { flex: none; }
/* строка результата после формы (POST → 303 → #fw-on): видна только по :target, работает без JS */
.flash { display: none; margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(48,209,88,.4); border-radius: var(--radius-s); background: rgba(48,209,88,.08); color: var(--fg); }
.flash:target { display: block; }
.flash a { color: var(--purple-text); font-weight: 600; }
.flash.err { border-color: rgba(255,99,99,.45); background: rgba(255,99,99,.08); }
/* время завершённого матча с днём (md; td, когда у читателя другой день): день и время — две строки (перевод строки в тексте),
   без переноса по ширине — как и одна строка «19:45 UTC», не прыгает при приходе шрифта */
.mc .dn time[data-tz="td"], .mc .dn time[data-tz="md"] { white-space: pre; }
/* «Мои матчи» */
.my-teams { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.my-teams li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.my-teams li > a { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; font-weight: 600; text-decoration: none; }
.my-teams li > a span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-teams li > .my-unk { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--fg-2); font-weight: 600; }
.my-empty .acts { flex-wrap: wrap; margin-top: 12px; }
.my-empty .btn-ghost { margin-top: 0; }
/* поиск */
.sform { margin: 18px 0 0; }
.sform label { display: block; margin-bottom: 8px; color: var(--fg-2); font-weight: 600; }
.sform-row { display: flex; gap: 10px; }
.sform input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--fg); font: inherit; font-size: 16px; }
.sform .btn-p { flex: none; min-height: 48px; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.sform .hint { margin: 8px 0 0; color: var(--fg-3); font-size: 12px; }
main.search > .empty { margin-top: 20px; }
.sr-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sr-list li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.sr-list li > a { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; }
.sr-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-n small { color: var(--fg-3); }
@media (max-width: 420px) {
  .my-teams li, .sr-list li { flex-wrap: wrap; }
  .sform-row { flex-direction: column; }
}
/* нижнее меню с пятым пунктом «Мои матчи» на самых узких экранах (320): длинное слово («Classificação») переносится, а не налезает на соседа */
@media (max-width: 359px) {
  .bar { gap: 2px; padding-left: 2px; padding-right: 2px; }
  .bar .ni { padding: 6px 2px; }
  .bar .lb { max-width: 100%; font-size: 10px; overflow-wrap: anywhere; }
  .bar .soon-tag { padding: 0 4px; font-size: 8px; letter-spacing: .02em; white-space: nowrap; }
  /* SITEQA1 ollo-02: кнопка «Меню» в одну строку (на 320 она сжималась до 58 px, и маркер ▸ уходил над текстом) */
  .hdr-mobile { flex: none; }
  .hdr-mobile summary { white-space: nowrap; padding: 11px 6px; }
}

/* Каталог героев (C2): собственные монограммы, указатель работает без JavaScript. Блок C2 — последним: его правила для телефона
   (кнопка карточки игрока) идут после общих правил карточек матчей. */
.hero-index { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0; }
.hero-index a { padding: 8px 0; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; list-style: none; padding: 0; }
.hero-card { padding: 20px; background: var(--panel); border-radius: var(--radius); scroll-margin-top: 80px; }
.hero-card:target { outline: 2px solid var(--fg-2); }
.hero-card h2 { margin: 12px 0; }
.hero-card dl { margin: 0; }
.hero-card dt { color: var(--fg-2); margin-top: 8px; }
.hero-card dd { margin: 4px 0 0; }
.hero-monogram { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-2); font-weight: 700; }

/* Страница игрока: карточка матча в стиле карточек матчей — герой, исход, У/С/П, время; ссылка только у матчей лиг.
   Последняя дорожка — постоянной ширины: у каждой карточки своя сетка, и без кнопки «Подробности» дорожка auto схлопывалась бы,
   а колонки исхода, У/С/П и даты съезжали бы относительно соседних карточек. */
.pm { display: grid; grid-template-columns: minmax(0,1.6fr) 92px 92px minmax(0,1.3fr) 10.5rem; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; }
.pm small { display: block; color: var(--fg-3); font-size: 12px; font-weight: 500; line-height: 16px; }
.pm .ph { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pm .hero-monogram { flex: none; width: 36px; height: 36px; font-size: 13px; }
.pm .pn { min-width: 0; font-weight: 600; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.pm .pn > a, .favs a, .thero .lead a, .roster a, .players td a { display: inline-block; padding: 3px 0; } /* цель касания не ниже 24 px */
.pm .pr { font-weight: 700; }
.pm .pk b { font-variant-numeric: tabular-nums; }
.pm .pt time { font-size: 13px; }
.pm .cta { justify-self: end; padding: 10px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-s); color: var(--fg-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pm .cta:hover { border-color: rgba(255,255,255,.4); color: var(--fg); }
.mc.r-win { background: radial-gradient(280px 100px at 12% 50%, rgba(48,209,88,.14), transparent 70%), var(--panel); }
.r-win .pm small { color: var(--fg-2); } /* --fg-3 на зелёном отсвете ниже AA 4.5 (3.98:1) */
.r-win .pr { color: var(--green); }
.r-loss .pr { color: var(--fg-2); }
@media (max-width: 720px) {
  .pm { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 12px 14px; }
  .pm .ph { grid-column: 1 / -1; }
  .pm .cta { display: inline-block; grid-column: 1 / -1; justify-self: start; } /* у карточки матча кнопка на телефоне скрыта: там ссылка — вся карточка */
}

/* ── ARCH1 #441: центр матчей по архиву Figma (кадры 07–09) — полоса месяцев, группы по турнирам со звёздами уровня, фильтры,
   хлебные крошки. Только токены макета; --fg-3 — только на --bg и --panel (на --panel-2 он даёт 4.42). ── */
.months ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.months a { display: inline-block; padding: 6px 0; color: var(--fg-3); font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: color .15s; }
.months a:hover, .months a[aria-current] { color: var(--fg); }
.months a[aria-current] { box-shadow: inset 0 -2px 0 var(--purple-2); }
.months + .days { margin-top: 8px; }
/* группа турнира: плашка с именем и звёздами, под ней строки матчей (кадр 08) */
.tg { margin: 0 0 16px; }
.tg:last-child { margin-bottom: 0; }
.tg-h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 8px 14px; border-radius: 12px; background: var(--panel-2); color: var(--fg); font-size: 14px; font-weight: 700; line-height: 20px; }
.tgn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-h .stars { margin-left: auto; }
/* звёзды уровня: форма звезды — clip-path, включённая — светлым фиолетовым, выключенная — тёмной (текст для диктора — aria-label) */
.stars { display: inline-flex; flex: none; gap: 2px; vertical-align: -2px; }
.stars i { display: block; width: 14px; height: 14px; background: #3a3a3e; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: var(--purple-text); }
.facts dd.tier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
/* фильтры: одна форма в двух местах — на узком экране свёрнута в <details> под лентой дней, на широком — правой колонкой */
.filters-m { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.filters-m > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; color: var(--fg); font-weight: 600; font-size: 14px; line-height: 20px; list-style: none; cursor: pointer; user-select: none; }
.filters-m > summary::-webkit-details-marker { display: none; }
.filters-m > summary svg { width: 20px; height: 20px; flex: none; color: var(--purple-text); }
.filters-m[open] > summary { border-bottom: 1px solid var(--line); }
.filters-m .fp { padding: 14px 16px 16px; }
.filters-m .ff { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.fp { display: grid; gap: 14px; }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-head h2 { margin: 0; font-size: 17px; line-height: 24px; }
.fp-my { display: inline-flex; align-items: center; gap: 6px; color: var(--purple-text); font-size: 13px; font-weight: 600; line-height: 20px; text-decoration: none; }
.fp-my svg { width: 16px; height: 16px; flex: none; }
.fp-my:hover { color: var(--fg); }
.ff { display: grid; gap: 12px; }
.ff-f { display: grid; gap: 6px; min-width: 0; }
.ff label { color: var(--fg-2); font-size: 13px; font-weight: 600; line-height: 18px; }
.ff select { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); color: var(--fg); font: inherit; font-size: 14px; }
.ff select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ff-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; grid-column: 1 / -1; }
.ff .btn-p { min-height: 44px; padding: 10px 18px; border: 0; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.ff .btn-ghost { margin-top: 0; min-height: 44px; }
.filters-side { display: none; }
@media (min-width: 1200px) {
  main:has(> .mlayout) { max-width: 1320px; }
  .mlayout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
  .filters-m { display: none; }
  .filters-side { display: block; position: sticky; top: calc(var(--header-h) + 16px); margin-top: 28px; }
  .filters-side .fp { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
}
/* хлебные крошки: «Матчи Dota 2 › турнир › A vs B»; разделитель — CSS без текста для читалки, длинное имя — многоточие */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 14px; padding: 0; list-style: none; color: var(--fg-2); font-size: 13px; font-weight: 600; line-height: 20px; }
.crumbs li { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs li + li::before { content: '›'; content: '›' / ''; padding: 0 8px; color: var(--fg-3); }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg); }
main.match > .crumbs { padding: 14px 16px 0; }
main.match > .crumbs ol { margin-bottom: 0; }
/* C1 + ARCH1: имя группы центра матчей — ссылка на страницу турнира, растянутая на всю плашку (::after от .tg-h, цель касания 36 px,
   .tgn с overflow: hidden её не обрезает — блок-контейнер псевдоэлемента выше); звёзды — над ней, их подсказка title видна */
.tg-h { position: relative; }
.tgn > a { color: inherit; text-decoration: none; }
.tgn > a::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.tgn > a:hover { text-decoration: underline; }
.tgn > a:focus-visible { outline: none; }
.tgn > a:focus-visible::after { outline: 2px solid var(--link); outline-offset: 2px; }
.tg-h .stars { position: relative; z-index: 1; }
/* C1: ссылка турнира у карточки матча — сосед ссылки матча (не вложена в неё), подвал карточки; цель касания 32 px */
.mc > .tournament-link { display: block; min-height: 32px; padding: 6px 16px; color: var(--fg-2); font-size: 12px; font-weight: 600; line-height: 20px; text-decoration: none; border-top: 1px solid var(--line); }
.mc > .tournament-link:hover { color: var(--fg); text-decoration: underline; }
/* C1: список турниров — значок кубка, имя, звёзды и даты окна, число матчей; на телефоне число матчей не прячется */
.tcard.tournament > a { grid-template-columns: 32px minmax(0,1fr) auto; }
.tcard.tournament .stat:last-child { display: block; }
.tcard .tnm { min-width: 0; overflow-wrap: anywhere; }
.tcard.tournament .tic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--panel-2); color: var(--fg-3); }
.tcard.tournament .tic svg { width: 18px; height: 18px; }
.tcard.tournament .tnm small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; }
.tcard.tournament-team > a { grid-template-columns: 44px minmax(0,1fr); gap: 14px; }
/* страница турнира: строка уровня и честная оговорка про окно последних 100 матчей */
.ttier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; color: var(--fg-2); font-size: 14px; line-height: 20px; }
.tnote { margin: 8px 0 0; max-width: 44em; color: var(--fg-3); font-size: 13px; line-height: 18px; }

/* CS1: keep the localized date/countdown inside the card gutter. */
.cs2-card-meta { margin: 0; padding: 0 16px 12px; }

.cs2-hero { display: grid; gap: 12px; }
.cs2-hero h2, .cs2-hero > p { margin: 0; }
.cs2-hero .pts { font-size: 32px; font-weight: 700; }

/* LOGO2: shared local-logo badge on every CS2 view; long names wrap without clipping. */
.cs2-team, .cs2-sides { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.cs2-team > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cs2-sides { flex-wrap: wrap; }
.cs2-team-brand { margin: 12px 0; }
/* Keep the existing translated SEO tail in its own readable line. */
.mhero h1 .series-title-tail { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 18px; line-height: 1.35; color: var(--fg-2); }

/* CS2 has one team label per team card, rather than Dota's five-column ranking row. */
.cs2-team-card > a { grid-template-columns: minmax(0, 1fr); }
.cs2-match-card > a { grid-template-columns: minmax(0, 1fr) auto; }
.cs2-match-card > a > span:last-child { grid-column: 1 / -1; }

/* OLLO-HSTAT1 (#776): статистика героев — таблица без JavaScript (сортировка и период — ссылками), на телефоне — карточки строк */
.hs { margin: 24px 0 32px; }
.hs-periods { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hs-periods a, .hs-periods span, .hs-sorts a, .hs-sorts span { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); text-decoration: none; }
.hs-periods span[aria-current], .hs-sorts span[aria-current] { border-color: var(--fg-2); color: var(--fg); font-weight: 600; }
.hs-sorts { display: none; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hs-cap { color: var(--fg-2); }
.hstat th, .hstat td { padding: 8px 12px; font-size: 14px; }
.hstat td { font-variant-numeric: tabular-nums; }
.hstat thead th a { display: inline-block; padding: 3px 0; }
.hstat th[aria-sort] { color: var(--fg); }
.hstat th[aria-sort]::after { content: " ↓"; }
.hstat th[aria-sort="ascending"]::after { content: " ↑"; }
.hstat tbody th { text-align: left; background: none; border-top: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.hstat tbody th a { display: inline-block; padding: 3px 0; }
.hstat small, .hs-facts small, .hs-top small { color: var(--fg-2); font-size: 12px; }
.hero-more { display: inline-block; margin-top: 12px; padding: 3px 0; }
.hs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin: 16px 0 0; }
.hs-facts div { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hs-facts dt { color: var(--fg-2); font-size: 13px; }
.hs-facts dd { margin: 6px 0 0; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.hs-top { margin: 0; padding-left: 24px; }
.hs-top li { padding: 6px 0; }
.hs-top a { display: inline-block; padding: 3px 0; }
/* P3 гейта PR53 (куратор «Данные», 17.10): тап-цели периода, сортировки и топов — не меньше 44×44 px (WCAG 2.5.5 / HIG) */
.hs-periods a, .hs-periods span, .hs-sorts a, .hs-sorts span, .hstat thead th a, .hs-top a { box-sizing: border-box; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .hstat, .hstat tbody, .hstat tr, .hstat th, .hstat td { display: block; }
  .hstat thead { display: none; }
  .hs-sorts { display: flex; }
  .hstat tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; border-top: 1px solid var(--line); }
  .hstat tr:first-child { border-top: 0; }
  .hstat tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
  .hstat td { padding: 0; border: 0; min-width: 0; }
  .hstat td::before { content: attr(data-l); display: block; margin-bottom: 2px; color: var(--fg-2); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
}