/* =====================================================================
   GREEN LIONS FC — Design System
   FC27 / PRO CLUBS
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* surface */
  --bg:            #050807;
  --bg-2:          #080c0a;
  --surface:       #0c1210;
  --surface-2:     #111916;
  --surface-3:     #16201c;

  /* lines */
  --line:          rgba(255,255,255,.075);
  --line-2:        rgba(255,255,255,.14);
  --line-green:    rgba(0,199,94,.30);

  /* Дві речі, які раніше були вписані як rgba(255,255,255,…) просто в
     правилах. Винесені в токени, бо на світлій смузі білий підсвіт
     і білий контур літер зникають — там ці ж змінні стають чорнильними. */
  --wash:          rgba(255,255,255,.022);  /* підсвіт рядка/картки під курсором */
  --stroke:        rgba(255,255,255,.26);   /* контур порожнистих цифр */
  --track:         rgba(255,255,255,.07);   /* жолоб діаграм-смужок */

  /* brand */
  --green:         #00A94F;
  --green-2:       #10D26A;
  --green-3:       #58F09B;
  --green-glow:    rgba(0,169,79,.35);
  --green-wash:    rgba(0,169,79,.10);
  /* Фірмовий зелений на світлому тлі дає лише 2.8:1 — підписи на світлих
     смугах через нього не читались. Для тексту на --paper береться цей,
     темніший (5.2:1). На темному тлі й далі --green / --green-2. */
  --green-ink:     #0E7539;
  --gold:          #C9A552;
  --gold-dim:      rgba(201,165,82,.35);

  /* text — контраст на --bg перевірений за WCAG:
     text 15.9:1, muted 8.4:1, dim 5.3:1. Раніше dim давав 3.5:1
     і на дрібних підписах читався погано. */
  --white:         #ffffff;
  --text:          #E6EDE8;
  --muted:         #9FACA4;
  --dim:           #7B8A82;

  /* result */
  --win:           #10D26A;
  --draw:          #C9A552;
  --loss:          #E0544B;

  /* type
     Roboto Condensed замість пари Barlow Condensed / Oswald: у нього повна
     кирилиця, справжній курсив (Oswald курсиву не має взагалі — браузер
     нахиляв літери сам, і це виглядало криво) і товщі штрихи, тому дрібні
     заголовки й таблиці читаються, а не зливаються. Одна гарнітура на обидві
     мови — сайт виглядає однаково в EN і UK. */
  --font-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Шрифт великих заголовків (.hm-display) — квадратна техно-гарнітура
     під стиль ігрових логотипів.

     Чому саме Tektur: у нього є ПОВНА українська абетка. Ближчі за
     формою Orbitron, Chakra Petch, Michroma й сам шрифт логотипа EA
     не мають Ґ, Є, І, Ї — перевірено, «ДО ЛЕВІВ» у них розсипається
     посеред слова. З перевірених повну українську дають лише Tektur,
     Unbounded, Geologica, Play і Oswald.

     Дрібні заголовки, рахунки й цифри лишаються на --font-display:
     дисплейна гарнітура на малому кеглі читається гірше. */
  --font-title:   "Tektur", "Roboto Condensed", system-ui, sans-serif;
  --display-weight: 800;
  --display-track: .01em;

  /* Мікропідписи. Нижче 11px не опускаємось — раніше було 8px. */
  --micro:      .688rem;   /* 11px */
  --micro-2:    .75rem;    /* 12px */

  /* metrics */
  --container: 1320px;
  --gutter: 32px;
  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Кирилиця більше не потребує окремої гарнітури — Roboto Condensed покриває
   обидві мови. Лишається тільки трек: кириличні великі літери щільніші за
   латинські, тож їм треба трохи більше повітря. */
html[lang="uk"] {
  --display-track: .018em;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--green); color: #04160c; }

/* Прапор — SVG без атрибутів width/height, тому без явного розміру він
   тягнеться за контейнером: у рядку, де ім'я гравця переносилось на два
   рядки, прапор ставав удвічі більшим за сусідні. Розмір задається тут
   один раз, а не в кожному місці використання окремо. */
.flag {
  width: 24px; height: 16px;
  flex: none;
  border: 1px solid var(--line-2);
  object-fit: cover;
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1c2a24; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #26382f; }

/* ---------- 3. TYPOGRAPHY PRIMITIVES ---------- */
.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--display-weight);
  line-height: .88;
  letter-spacing: var(--display-track);
}
.display { font-size: clamp(3.4rem, 9.2vw, 9.5rem); line-height: .84; }
.h1      { font-size: clamp(2.8rem, 6.4vw, 6rem); }
.h2      { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.h3      { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }

.kicker {
  font-family: var(--font-body);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--green);
  flex: none;
}
.kicker--plain::before { display: none; }
.kicker--gold { color: var(--gold); }
.kicker--gold::before { background: var(--gold); }

.lead {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.75;
  font-weight: 400;
}
.text-green { color: var(--green-2); }
.text-white { color: var(--white); }
.text-muted { color: var(--muted); }
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--stroke);
}

/* ---------- 4. LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1620px; }
/* Внутрішні відступи смуг живуть у .band__in (секція 27). .section лишається
   для сторонньої розмітки, яку ще не переведено на смуги. */
.section { padding-block: clamp(72px, 9vw, 148px); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-line: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--green);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
  z-index: -1;
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: #04160c; border-color: var(--green); }
.btn:active { transform: translateY(1px); }
.btn__arrow { width: 16px; height: 8px; flex: none; transition: transform .4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { --btn-bg: var(--green); --btn-fg: #04160c; --btn-line: var(--green); }
.btn--primary::after { background: var(--white); }
.btn--primary:hover { color: #04160c; border-color: var(--white); }
.btn--ghost { --btn-line: var(--line-2); color: var(--white); }
.btn--gold { --btn-line: var(--gold-dim); color: var(--gold); }
.btn--gold::after { background: var(--gold); }
.btn--gold:hover { color: #150f02; border-color: var(--gold); }
.btn--sm { padding: 12px 22px; font-size: .688rem; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--white);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-2);
  transition: color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow:hover { color: var(--green-2); border-color: var(--green); gap: 18px; }

/* ---------- 6. HEADER ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,7,.85), rgba(5,8,7,0));
  pointer-events: none;
}
.header.is-stuck {
  background: rgba(6,10,8,.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.header.is-stuck::before { opacity: 0; }
.header__inner {
  position: relative;
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 40px;
}
/* The club logo is a square lockup — every slot that holds it sizes the
   box and lets the artwork fit inside without distortion. */
.crest { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__crest { width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.brand__sub {
  font-size: var(--micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 4px;
  font-weight: 600;
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative;
  padding: 10px 15px;
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--white); }
.nav__link.is-active::after { transform: scaleX(1); background: var(--green); }
.header__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.header__socials { display: flex; align-items: center; gap: 2px; }
.social-ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--dim);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.social-ico svg { width: 15px; height: 15px; }
.social-ico:hover { color: var(--green-2); transform: translateY(-2px); }
.header__cta { margin-left: 4px; }

/* language switcher */
.lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  flex: none;
}
.lang__btn {
  padding: 8px 11px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--micro-2);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--dim);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.lang__btn + .lang__btn { border-left: 1px solid var(--line); }
.lang__btn:hover { color: var(--white); }
.lang__btn.is-active { color: #04160c; background: var(--green); }
.mobile-menu__lang { margin-bottom: 22px; }
.mobile-menu__lang .lang__btn { padding: 12px 20px; font-size: .688rem; }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px;
  background: var(--white);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 99;
  background: linear-gradient(160deg, #070b09 0%, #050807 60%, #04110a 100%);
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .68s var(--ease-out), visibility .68s;
  overflow-y: auto;
}
body.menu-open .mobile-menu { transform: translateY(0); visibility: visible; }
.mobile-menu__glow {
  position: absolute; left: -20%; bottom: -25%;
  width: 120%; height: 60%;
  background: radial-gradient(ellipse at 30% 100%, var(--green-glow), transparent 65%);
  opacity: .5; pointer-events: none;
}
.mobile-menu__nav { position: relative; display: flex; flex-direction: column; }
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  display: flex; align-items: baseline; gap: 14px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.menu-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu__link span { font-family: var(--font-body); font-size: var(--micro-2); letter-spacing: .2em; color: var(--dim); font-weight: 600; }
.mobile-menu__link.is-active { color: var(--green-2); }
.mobile-menu__foot { position: relative; margin-top: auto; padding-top: 36px; }
.mobile-menu__socials { display: flex; gap: 6px; margin-bottom: 22px; }
.mobile-menu__socials .social-ico { border: 1px solid var(--line); width: 42px; height: 42px; color: var(--muted); }

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: var(--header-h);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; background: #040705; }
.hero__stadium { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.hero__glow {
  position: absolute; z-index: -2; pointer-events: none;
  left: 50%; bottom: -30%;
  width: 140vw; height: 90vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(0,169,79,.30) 0%, rgba(0,169,79,.10) 32%, transparent 62%);
}
.hero__sweep {
  position: absolute; z-index: -2; inset: -10% -30%;
  background: linear-gradient(100deg, transparent 38%, rgba(16,210,106,.055) 48%, transparent 58%);
  animation: sweep 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%,100% { transform: translateX(-14%); opacity: .5; }
  50%     { transform: translateX(14%);  opacity: 1; }
}
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,7,5,.92) 0%, rgba(4,7,5,.25) 30%, rgba(4,7,5,.55) 68%, rgba(4,7,5,.98) 100%),
    radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(4,7,5,.75) 100%);
}
.hero__crest-watermark {
  position: absolute; z-index: -1; pointer-events: none;
  right: -2vw; top: 50%;
  width: min(44vw, 580px);
  aspect-ratio: 1;              /* the logo is square — give the box a height */
  transform: translateY(-50%);
  opacity: .10;
  animation: crest-breathe 9s ease-in-out infinite;
}
@keyframes crest-breathe {
  0%,100% { opacity: .09; transform: translateY(-50%) scale(1); }
  50%     { opacity: .15; transform: translateY(-50%) scale(1.025); }
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(32px, 5vw, 68px);
}
.hero__eyebrow {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  flex-wrap: wrap;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-green);
  background: rgba(0,169,79,.07);
  font-size: var(--micro-2); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green-3);
}
.hero__badge i {
  width: 6px; height: 6px; background: var(--green-2); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16,210,106,.6);
  animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(16,210,106,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(16,210,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,210,106,0); }
}
.hero__club {
  font-size: var(--micro-2); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.005em;
  font-size: clamp(3.6rem, 11.4vw, 12rem);
  color: var(--white);
  margin-bottom: clamp(20px, 2.6vw, 34px);
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
  display: block;
  transform: translateY(105%);
  animation: rise .95s var(--ease-out) forwards;
}
.hero__title .ln:nth-child(1) > span { animation-delay: .12s; }
.hero__title .ln:nth-child(2) > span { animation-delay: .24s; }
.hero__title .ln:nth-child(2) { color: var(--green-2); }
@keyframes rise { to { transform: translateY(0); } }
.hero__bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 2.6vw, 34px);
}
.hero__desc { max-width: 40ch; font-size: 1rem; color: var(--muted); font-weight: 400; }
.hero__desc strong { color: var(--white); font-weight: 500; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(32px, 5vw, 68px);
  writing-mode: vertical-rl;
  font-size: var(--micro); letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 12px;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 54px;
  background: linear-gradient(var(--green), transparent);
  animation: scroll-line 2.4s ease-in-out infinite;
}
@keyframes scroll-line { 0%,100% { transform: scaleY(.4); opacity:.4; transform-origin: top; } 50% { transform: scaleY(1); opacity:1; transform-origin: top; } }

/* ticker */
.ticker {
  position: relative;
  border-block: 1px solid var(--line);
  background: rgba(9,14,11,.7);
  overflow: hidden;
  padding: 13px 0;
  z-index: 2;
}
.ticker__track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker__item {
  display: inline-flex; align-items: center; gap: 12px;
  padding-inline: 26px;
  font-size: .688rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.ticker__item b { color: var(--white); font-weight: 600; }
.ticker__item::after { content: ""; width: 4px; height: 4px; background: var(--line-2); margin-left: 22px; }
.ticker__tag { font-weight: 700; letter-spacing: .1em; }
.ticker__tag--w { color: var(--win); }
.ticker__tag--d { color: var(--draw); }
.ticker__tag--l { color: var(--loss); }

/* ---------- 8. INTRO / STATS ---------- */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.intro__body p + p { margin-top: 20px; }
.intro__meta { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap; }
.intro__meta div { border-left: 1px solid var(--line); padding-left: 16px; }
.intro__meta dt { font-size: var(--micro); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.intro__meta dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* Модифікатор замість inline-стилю на сторінках: inline перебивав
   мобільне правило, і на телефоні лишалось 4 колонки по 86px —
   підписи в них не вміщались. */
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 38px);
  position: relative;
  overflow: hidden;
  transition: background-color .5s var(--ease);
}
.stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--green);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--ease-out);
}
.stat:hover { background: var(--wash); }
.stat:hover::before { transform: scaleY(1); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 800; line-height: .9;
  color: var(--white);
  display: flex; align-items: baseline; gap: 2px;
}
.stat__value sup { font-size: .38em; color: var(--green-2); transform: translateY(-.9em); }
.stat__label {
  margin-top: 12px;
  font-size: var(--micro-2); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.stat--accent .stat__value { color: var(--green-2); }

/* ---------- 9. MATCH CARDS (BROADCAST) ---------- */
.match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Сітка розтягує обгортки до однакової висоти, але сама картка лишалась
   заввишки за змістом — і сусідні картки з різною кількістю рядків тексту
   виходили різні. Тягнемо картку на всю обгортку; підвал у неї вже
   притиснутий донизу через .mcard__foot { margin-top: auto }. */
.match-grid > *:not(.mcard) { display: flex; }
.match-grid > *:not(.mcard) > .mcard { flex: 1 1 auto; }
.mcard {
  position: relative;
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface) 55%, #0a0f0d 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.mcard::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, var(--green-wash), transparent 60%);
  opacity: 0; transition: opacity .6s var(--ease);
  pointer-events: none;
}
.mcard:hover { border-color: var(--line-2); transform: translateY(-4px); }
.mcard:hover::before { opacity: 1; }
.mcard__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.28);
}
.mcard__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--micro-2); letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--white);
}
.mcard__label i { width: 5px; height: 5px; background: var(--green-2); border-radius: 50%; }
.mcard__comp { font-size: var(--micro-2); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.mcard__body { padding: clamp(28px, 3.2vw, 46px) clamp(20px, 2.6vw, 36px); }
.mcard__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
}
.mteam { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; min-width: 0; }
.mteam__badge {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  transition: transform .5s var(--ease);
}
.mcard:hover .mteam__badge { transform: scale(1.06); }
.mteam__name {
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.35vw, 1.25rem);
  text-transform: uppercase; font-weight: 700; letter-spacing: .04em; line-height: 1.1;
  color: var(--white);
}
.mteam__tag { font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.mcard__center { text-align: center; }
.mcard__vs {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  color: var(--dim); letter-spacing: .06em;
}
.mcard__score {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: 1;
  color: var(--white); white-space: nowrap;
  display: flex; align-items: center; gap: 12px;
}
.mcard__score em { font-style: normal; color: var(--dim); font-size: .5em; }
.mcard__kick {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 0;
  border: 1px solid var(--line);
  width: fit-content; margin-inline: auto;
}
.mcard__kick span { padding: 8px 16px; font-size: .688rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mcard__kick span + span { border-left: 1px solid var(--line); color: var(--white); font-weight: 600; }
.mcard__foot {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(0,0,0,.2);
}
.result-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-size: var(--micro-2); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.result-pill--w { color: var(--win); background: rgba(16,210,106,.08); }
.result-pill--d { color: var(--draw); background: rgba(201,165,82,.08); }
.result-pill--l { color: var(--loss); background: rgba(224,84,75,.08); }
.countdown { display: flex; gap: 10px; }
.countdown div { text-align: center; min-width: 42px; }
.countdown b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--white); line-height: 1; }
.countdown span { font-size: var(--micro); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* ---------- 10. PLAYER CARDS ---------- */
.squad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.squad-grid--5 { grid-template-columns: repeat(5, 1fr); }
.pcard {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.1;
  background: linear-gradient(170deg, #14201a 0%, #0b100e 60%, #070a09 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s var(--ease-out), border-color .5s var(--ease);
}
.pcard::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, rgba(0,169,79,.22) 0%, transparent 46%);
  opacity: .8;
  transition: opacity .6s var(--ease);
}
.pcard::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.pcard:hover { transform: translateY(-6px); border-color: var(--line-2); }
.pcard:hover::after { transform: scaleX(1); }
.pcard:hover::before { opacity: 1; }
.pcard__visual {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.pcard__visual svg, .pcard__visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .6s var(--ease);
  filter: grayscale(.35) contrast(1.05);
}

/* A real player photo sits on top of the generated artwork.
   Framed a little high so the face lands in the upper third of the card,
   where the design leaves it clear of the name plate. */
.pvisual {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
/* Fill the frame rather than fit inside it — "fit" is what left the gaps.
   Framed high so the face sits above the vignette at the bottom. */
.profile__visual .pvisual { object-fit: cover; object-position: 50% 18%; }
.gw-row__visual .pvisual { object-position: 50% 25%; }
.pcard:hover .pcard__visual svg, .pcard:hover .pcard__visual img {
  transform: scale(1.07);
  filter: grayscale(0) contrast(1.08);
}
.pcard__shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(4,8,6,.15) 0%, rgba(4,8,6,.05) 40%, rgba(4,8,6,.88) 84%, rgba(4,8,6,.97) 100%);
}
.pcard__num {
  position: absolute; z-index: 3;
  top: 12px; right: 16px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 800; line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--stroke);
  transition: -webkit-text-stroke-color .5s var(--ease), color .5s var(--ease);
}
.pcard:hover .pcard__num { -webkit-text-stroke-color: var(--green-2); }
.pcard__ovr {
  display: block;
  font-family: var(--font-body);
  font-size: var(--micro); font-weight: 700; letter-spacing: .24em;
  color: var(--dim);
  -webkit-text-stroke: 0;
  text-align: right;
  margin-top: 2px;
}
.pcard:hover .pcard__ovr { color: var(--green-2); }
.pcard__flag {
  position: absolute; z-index: 3; top: 16px; left: 16px;
  width: 24px; height: 16px;
  border: 1px solid rgba(255,255,255,.22);
  overflow: hidden;
}
.pcard__info { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 20px; display: block; }
.pcard__pos {
  display: table;
  font-size: var(--micro); font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--green-2);
  border: 1px solid var(--line-green);
  padding: 4px 9px;
  margin-bottom: 10px;
  background: rgba(0,169,79,.08);
}
.pcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.5rem); font-weight: 800; text-transform: uppercase;
  line-height: 1.02; color: var(--white);
  overflow-wrap: break-word;
}
.pcard__meta {
  margin-top: 8px;
  font-size: var(--micro-2); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  display: flex; gap: 12px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease);
}
.pcard:hover .pcard__meta { max-height: 40px; opacity: 1; }
.pcard--captain .pcard__name::after {
  content: "C";
  display: inline-grid; place-items: center;
  width: 17px; height: 17px;
  margin-left: 9px;
  font-family: var(--font-body); font-size: var(--micro); font-weight: 700;
  color: var(--gold); border: 1px solid var(--gold-dim);
  vertical-align: middle;
}

/* mobile scroller variant */
.scroller {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }

/* ---------- 11. SEASON TEASER ---------- */
.season-teaser { position: relative; overflow: hidden; }
.season-teaser__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 40%, rgba(0,169,79,.14), transparent 55%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}
.season-teaser__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.season-teaser__year {
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 12rem);
  line-height: .78; font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--stroke);
}
.season-teaser__title { margin-top: 10px; }
.figure-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.figure {
  padding: 26px 20px 26px 0;
  border-right: 1px solid var(--line);
  padding-left: 20px;
}
.figure:first-child { padding-left: 0; }
.figure:last-child { border-right: 0; }
.figure__label { font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.figure__value {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--white);
}
.figure--green .figure__value { color: var(--green-2); }

/* ---------- 11b. GATEWAY (landing → sections) ---------- */
.gateway { border-top: 1px solid var(--line); }
.gw-row {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr) 210px 132px 40px;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: padding-left .55s var(--ease-out);
}
.gw-row::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,169,79,.10), rgba(0,169,79,.02) 45%, transparent 75%);
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.gw-row::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--green);
  transform: scaleY(0); transform-origin: center;
  transition: transform .55s var(--ease-out);
}
.gw-row:hover { padding-left: 22px; }
.gw-row:hover::before { opacity: 1; }
.gw-row:hover::after { transform: scaleY(1); }

.gw-row__idx {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .1em;
  color: var(--dim);
  transition: color .45s var(--ease);
}
.gw-row:hover .gw-row__idx { color: var(--green-2); }

.gw-row__main { min-width: 0; }
.gw-row__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  font-weight: 800; line-height: .94; text-transform: uppercase;
  color: var(--white);
  transition: color .45s var(--ease);
}
.gw-row:hover .gw-row__title { color: var(--green-2); }
.gw-row__desc {
  display: block;
  margin-top: 10px;
  max-width: 46ch;
  font-size: .875rem; font-weight: 400; line-height: 1.7;
  color: var(--muted);
}

.gw-row__visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  opacity: .5;
  filter: grayscale(.7);
  transition: opacity .6s var(--ease), filter .6s var(--ease), border-color .6s var(--ease);
}
.gw-row__visual > * { width: 100%; height: 100%; }
.gw-row__visual svg { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gw-row:hover .gw-row__visual { opacity: 1; filter: grayscale(0); border-color: var(--line-green); }
.gw-row:hover .gw-row__visual svg { transform: scale(1.06); }

.gw-row__meta { text-align: right; }
.gw-row__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: 800; line-height: 1;
  color: var(--white);
}
.gw-row__meta span {
  display: block; margin-top: 8px;
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.gw-row__arrow {
  justify-self: end;
  color: var(--dim);
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.gw-row:hover .gw-row__arrow { color: var(--green-2); transform: translateX(6px); }

/* mini visuals used inside the gateway */
.gw-mini {
  display: flex; align-items: center; justify-content: center; gap: 12%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 120%, rgba(0,169,79,.22), transparent 62%), var(--surface);
}
.gw-mini svg { width: 26%; height: auto; }
.gw-mini__vs {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  color: var(--dim); letter-spacing: .06em;
}
.gw-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 8%;
  height: 100%; padding: 18% 12%;
  background: radial-gradient(ellipse at 50% 120%, rgba(0,169,79,.18), transparent 62%), var(--surface);
}
.gw-bars i { display: block; flex: 1; background: linear-gradient(180deg, var(--green-2), rgba(0,169,79,.2)); }
.gw-trophy {
  display: grid; place-items: center; height: 100%; padding: 10%;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,165,82,.20), transparent 62%), var(--surface);
}
.gw-trophy svg { width: auto; height: 100%; }

/* ---------- 12. TROPHY ROOM ---------- */
.trophy-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.trophy-rail::-webkit-scrollbar { display: none; }
.tcard {
  position: relative;
  background: var(--bg-2);
  padding: clamp(28px, 3vw, 42px) clamp(22px, 2.4vw, 34px);
  min-height: clamp(400px, 46vw, 520px);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  overflow: hidden;
  transition: background-color .6s var(--ease);
}
.tcard::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: radial-gradient(ellipse at 50% 110%, rgba(201,165,82,.16), transparent 60%);
  opacity: 0; transition: opacity .7s var(--ease);
  pointer-events: none;
}
.tcard:hover { background: #0a100d; }
.tcard:hover::after { opacity: 1; }
.tcard__season {
  font-family: var(--font-display); font-size: clamp(2.4rem,3.4vw,3.2rem); font-weight: 800; line-height: 1;
  color: var(--white);
}
.tcard__meta { margin-top: 6px; font-size: var(--micro-2); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.tcard__trophy {
  margin: auto 0;
  display: grid; place-items: center;
  padding-block: 26px;
  transition: transform .7s var(--ease-out);
}
.tcard__trophy svg { width: clamp(96px, 12vw, 132px); height: auto; }
.tcard:hover .tcard__trophy { transform: translateY(-6px) scale(1.04); }
.tcard__foot { border-top: 1px solid var(--line); padding-top: 18px; }
.tcard__title { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; color: var(--white); line-height: 1.05; }
.tcard__comp { margin-top: 8px; font-size: .688rem; color: var(--muted); }
.tcard--current { background: linear-gradient(180deg, #0a130e, #070c09); }
.tcard--current::after { background: radial-gradient(ellipse at 50% 110%, rgba(0,169,79,.22), transparent 62%); opacity: 1; }
.tcard--current .tcard__title { color: var(--green-2); }
.tcard__badge {
  position: absolute; top: 0; right: 0;
  padding: 7px 13px;
  font-size: var(--micro); letter-spacing: .24em; text-transform: uppercase; font-weight: 700;
  background: var(--green); color: #04160c;
}

/* ---------- 13. MEDIA ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.mtile {
  position: relative;
  grid-column: span 4;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  isolation: isolate;
  background: var(--surface);
  transition: border-color .5s var(--ease);
}
.mtile--wide { grid-column: span 6; aspect-ratio: 16/9; }
.mtile--tall { grid-column: span 4; aspect-ratio: 3/4; }
.mtile--hero { grid-column: span 8; aspect-ratio: 16/8; }
.mtile__thumb { position: absolute; inset: 0; z-index: 0; }
.mtile__thumb svg, .mtile__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.mtile:hover .mtile__thumb svg, .mtile:hover .mtile__thumb img { transform: scale(1.06); }
.mtile:hover { border-color: var(--line-2); }
.mtile__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,8,6,.1), rgba(4,8,6,.55) 55%, rgba(4,8,6,.95));
  transition: background .6s var(--ease);
}
.mtile__body { position: absolute; z-index: 2; inset: auto 0 0 0; padding: clamp(18px,2vw,26px); }
.mtile__plat {
  position: absolute; z-index: 3; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  background: rgba(4,8,6,.6);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  font-size: var(--micro); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--white);
}
.mtile__plat svg { width: 12px; height: 12px; }
.mtile__cat { display: block; font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--green-2); margin-bottom: 9px; }
.mtile__title {
  display: block;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem); line-height: 1.05; color: var(--white);
  max-width: 24ch;
}
.mtile__meta { display: block; margin-top: 10px; font-size: var(--micro-2); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.mtile__play {
  position: absolute; z-index: 3; right: 18px; bottom: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(4,8,6,.5);
  backdrop-filter: blur(6px);
  color: var(--white);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.mtile:hover .mtile__play { background: var(--green); color: #04160c; border-color: var(--green); transform: scale(1.06); }
.mtile__play svg { width: 13px; height: 13px; }

/* ---------- 13b. LIVE (TWITCH) ---------- */
.live-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.live-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  font-size: var(--micro-2); font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.live-pill--idle { border-color: var(--line); }
.live-pill--on {
  color: #fff;
  border-color: rgba(224,84,75,.5);
  background: rgba(224,84,75,.10);
}
.live-pill--on i {
  width: 7px; height: 7px; border-radius: 50%; background: #E0544B;
  animation: pulse-live 1.8s infinite;
}
@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0 rgba(224,84,75,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(224,84,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,84,75,0); }
}
.live-status__v { font-size: var(--micro-2); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

.live {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 16px;
  align-items: stretch;
}
.live--chat { grid-template-columns: minmax(0,1fr) 340px; }
.live__main { border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.live__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #040806;
  overflow: hidden;
}
.live__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.live__bar-text b {
  display: block;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--white);
  line-height: 1.15;
}
.live__bar-text span {
  display: block; margin-top: 6px;
  font-size: var(--micro-2); letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.live__side {
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column;
  min-height: 0;
}
.live__side-head {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--micro); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  background: rgba(0,0,0,.25);
}
.live__chat { flex: 1; width: 100%; border: 0; min-height: 420px; }

.live--solo { grid-template-columns: minmax(0,1fr); }
.live__offline {
  position: relative;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(0,169,79,.16), transparent 62%),
    linear-gradient(170deg, var(--surface-2), var(--surface) 60%, #080c0a);
  padding: clamp(40px, 6vw, 84px) clamp(24px, 4vw, 60px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  min-height: clamp(320px, 40vw, 460px);
  justify-content: center;
}
.live__offline-crest { width: 96px; height: 96px; margin-bottom: 22px; opacity: .9; }
.live__offline-text {
  max-width: 46ch; margin-bottom: 28px;
  font-size: .938rem; font-weight: 400; line-height: 1.8; color: var(--muted);
}

/* ---------- 13c. MATCH ARCHIVE (YOUTUBE) ---------- */
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}
.vcard {
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--surface-2), var(--surface) 65%, #080c0a);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.vcard:hover { border-color: var(--line-2); transform: translateY(-4px); }
.vcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #06100b;
  border-bottom: 1px solid var(--line);
}
.vcard__media[role="button"] { cursor: pointer; }
.vcard__media[role="button"]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.vcard__thumb { position: absolute; inset: 0; }
.vcard__thumb svg, .vcard__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .6s var(--ease);
}
.vcard__thumb img { filter: grayscale(.3) contrast(1.05); }
.vcard:hover .vcard__thumb svg, .vcard:hover .vcard__thumb img { transform: scale(1.05); filter: grayscale(0); }
.vcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,8,6,.15), rgba(4,8,6,.55));
  transition: background .5s var(--ease);
}
.vcard:hover .vcard__veil { background: linear-gradient(180deg, rgba(4,8,6,.05), rgba(4,8,6,.42)); }
.vcard__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(4,8,6,.55);
  backdrop-filter: blur(6px);
  color: var(--white);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.vcard:hover .vcard__play {
  background: var(--green); color: #04160c; border-color: var(--green);
  transform: translate(-50%,-50%) scale(1.08);
}
.vcard__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  background: rgba(4,8,6,.6);
  backdrop-filter: blur(6px);
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.vcard--soon .vcard__thumb svg { filter: grayscale(.75); opacity: .7; }
.vcard__dur {
  position: absolute; right: 12px; bottom: 12px;
  padding: 4px 9px;
  background: rgba(4,8,6,.78);
  border: 1px solid var(--line);
  font-size: var(--micro-2); letter-spacing: .12em; color: var(--white);
  font-family: var(--font-display);
}
.vcard__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcard__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vcard__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--micro); letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.vcard__date {
  color: var(--green-2);
  border: 1px solid var(--line-green);
  background: rgba(0,169,79,.07);
  padding: 4px 9px;
  font-weight: 700;
}
.vcard__title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  text-transform: uppercase; line-height: 1.08; color: var(--white);
}
.vcard__desc { font-size: .813rem; font-weight: 400; line-height: 1.7; color: var(--muted); }

/* ---------- 14. REQUIREMENT CHIPS ---------- */
/* Смугу набору замінив .cta-band (секція 27) — той самий блок, що
   «Стань левом» на головній, з банером команди замість світіння. */
.req-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.req-list li {
  padding: 9px 15px;
  border: 1px solid var(--line);
  font-size: var(--micro-2); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.req-list li:hover { border-color: var(--line-green); color: var(--white); }

/* ---------- 15. FOOTER ---------- */
.footer { background: #040706; border-top: 1px solid var(--line); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,.85fr));
  gap: 40px;
  padding-block: clamp(56px, 6vw, 88px);
}
.footer__brand .brand__crest { width: 62px; height: 62px; }
.footer__brand .brand { align-items: flex-start; }
.footer__tag { margin-top: 22px; max-width: 34ch; font-size: .875rem; color: var(--muted); font-weight: 400; }
.footer__col h4 {
  font-size: var(--micro); letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 20px; font-weight: 600; font-family: var(--font-body);
}
.footer__col li + li { margin-top: 11px; }
.footer__col a {
  font-size: .813rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 9px;
  transition: color .35s var(--ease), gap .35s var(--ease);
}
.footer__col a:hover { color: var(--white); gap: 13px; }
.footer__col a svg { width: 13px; height: 13px; }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  font-size: .688rem; color: var(--dim); letter-spacing: .08em;
}
.footer__bottom-links { display: flex; gap: 24px; }
.footer__bottom-links a:hover { color: var(--muted); }

/* ---------- 16. BREADCRUMB ---------- */
/* Темні .pagehead прибрані — шапки сторінок тепер світлі (.phead, секція 27). */
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--micro-2); letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.breadcrumb a:hover { color: var(--green-2); }

/* ---------- 17. TABS / FILTERS ---------- */
.tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--wash);
}
.tab {
  padding: 13px 30px;
  background: none; border: 0; cursor: pointer;
  font-size: .688rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  position: relative;
  transition: color .35s var(--ease), background-color .35s var(--ease);
}
.tab + .tab { border-left: 1px solid var(--line); }
.tab:hover { color: var(--white); }
.tab.is-active { color: #04160c; background: var(--green); }

/* ---------- 18. MATCH LIST ---------- */
.mlist { border-top: 1px solid var(--line); }
.mrow {
  width: 100%;
  display: grid;
  grid-template-columns: 130px 1fr auto 1fr 120px 44px;
  align-items: center;
  gap: 20px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background-color .45s var(--ease), padding-left .45s var(--ease);
}
.mrow::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--green);
  transform: scaleY(0);
  transition: transform .5s var(--ease-out);
}
.mrow:hover { background: var(--wash); padding-left: 28px; }
.mrow:hover::before { transform: scaleY(1); }
.mrow__date { }
.mrow__day { font-family: var(--font-display); font-size: 1.5rem; color: var(--white); line-height: 1; text-transform: uppercase; }
.mrow__time { font-size: var(--micro-2); letter-spacing: .2em; color: var(--dim); text-transform: uppercase; margin-top: 5px; }
.mrow__team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mrow__team--away { justify-content: flex-end; text-align: right; }
.mrow__team--away { flex-direction: row-reverse; }
.mrow__badge { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.mrow__name {
  font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mrow__name.is-us { color: var(--white); }
.mrow__score {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--white);
  border: 1px solid var(--line); padding: 6px 16px; min-width: 92px; text-align: center;
}
.mrow__vs { font-family: var(--font-display); font-size: 1.1rem; color: var(--dim); padding-inline: 18px; }
.mrow__comp { font-size: var(--micro-2); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mrow__chev { color: var(--dim); justify-self: end; transition: transform .4s var(--ease), color .4s var(--ease); }
.mrow:hover .mrow__chev { color: var(--green-2); transform: translateX(4px); }

/* ---------- 18b. EMPTY STATES ---------- */
.empty-state {
  border: 1px solid var(--line);
  border-top: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(0,169,79,.12), transparent 62%),
    linear-gradient(170deg, var(--surface-2), var(--surface) 60%, #080c0a);
  padding: clamp(44px, 6vw, 82px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.empty-state__crest { width: 88px; height: 88px; margin: 0 auto 22px; opacity: .85; }
.empty-state .lead { max-width: 48ch; }
.mcard--empty { border-style: dashed; }
.mcard--empty .mcard__label { color: var(--muted); }

/* ---------- 19. MODAL ---------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: rgba(2,5,4,.86); backdrop-filter: blur(10px); }
.modal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 86vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  transform: translateY(24px) scale(.985);
  transition: transform .55s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  border: 1px solid var(--line); background: rgba(0,0,0,.3);
  cursor: pointer; color: var(--muted);
  display: grid; place-items: center;
  transition: color .3s, border-color .3s;
}
.modal__close:hover { color: var(--white); border-color: var(--line-2); }

/* ---------- 20. TABLES / SEASON ---------- */
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--surface-2), var(--surface) 60%, #090d0b);
}
.panel__head {
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.panel__title { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; color: var(--white); }
.panel__body { padding: 26px; }

.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
  text-align: left;
  padding: 14px 16px;
  font-size: var(--micro); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.dtable td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  font-size: .875rem; color: var(--text);
}
.dtable tbody tr { transition: background-color .35s var(--ease); }
.dtable tbody tr:hover { background: var(--wash); }
.dtable td.num { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); }
.dtable .rank { color: var(--dim); font-family: var(--font-display); font-size: 1.05rem; }
.dtable .player-cell { display: flex; align-items: center; gap: 12px; }
.dtable .player-cell .flag { width: 20px; height: 14px; border: 1px solid var(--line-2); flex: none; }
.dtable .player-cell b { color: var(--white); font-weight: 500; }
.dtable .player-cell span { color: var(--dim); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }

.bar-track { height: 4px; background: var(--track); overflow: hidden; }
.bar-fill { height: 100%; background: var(--green); width: 0; transition: width 1.2s var(--ease-out); }

.form-guide { display: flex; gap: 6px; }
.form-guide b {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .875rem; font-weight: 700;
  border: 1px solid currentColor;
  transition: transform .3s var(--ease);
}
.form-guide b:hover { transform: translateY(-3px); }
.form-guide .w { color: var(--win); background: rgba(16,210,106,.1); }
.form-guide .d { color: var(--draw); background: rgba(201,165,82,.1); }
.form-guide .l { color: var(--loss); background: rgba(224,84,75,.1); }

.donut { display: grid; place-items: center; position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut__val {
  position: absolute; text-align: center;
  font-family: var(--font-display); font-size: 2.4rem; color: var(--white); line-height: 1;
}
.donut__val span { display: block; font-family: var(--font-body); font-size: var(--micro); letter-spacing: .24em; color: var(--dim); margin-top: 6px; }

.chart-bars { display: flex; align-items: flex-end; gap: clamp(6px,1vw,14px); height: 200px; }
.chart-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; }
.chart-bars .bar {
  width: 100%;
  background: linear-gradient(180deg, var(--green-2), rgba(0,169,79,.25));
  height: 0;
  transition: height 1.1s var(--ease-out);
  position: relative;
}
.chart-bars .bar::after {
  content: attr(data-val);
  position: absolute; top: -22px; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-size: .875rem; color: var(--white);
}
.chart-bars .lbl { font-size: var(--micro); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* ---------- 20b. DATA SOURCE INDICATOR ---------- */
/* flex, а не inline-flex: .kicker над ним теж inline-level, тому на широкому
   екрані вони ставали в один рядок і індикатор наїжджав на підзаголовок.
   Блоковий бокс із шириною по вмісту завжди починає власний рядок. */
/* display:flex перебиває типове [hidden]{display:none}, тому ховаємо явно —
   інакше прихована діагностика все одно малювалася б. */
.datasrc[hidden] { display: none; }
.datasrc {
  display: flex; width: fit-content; align-items: center; gap: 11px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  background: var(--wash);
  font-size: var(--micro); font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--dim);
  transition: color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.datasrc i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.datasrc--live {
  color: var(--green-2);
  border-color: var(--line-green);
  background: rgba(0,169,79,.07);
}
.datasrc--live i { animation: pulse-dot 2.4s infinite; }
.datasrc--sync { color: var(--gold); border-color: var(--gold-dim); }
.datasrc--sync i { animation: sync-blink 1s ease-in-out infinite; }
@keyframes sync-blink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
.datasrc--fail { color: var(--loss); border-color: rgba(224,84,75,.32); }
.datasrc__btn {
  margin-left: 4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line);
  color: inherit; cursor: pointer;
  font-size: .75rem; line-height: 1;
  transition: border-color .3s var(--ease), transform .5s var(--ease);
}
.datasrc__btn:hover { border-color: currentColor; transform: rotate(180deg); }

/* EA members with no profile page on the site yet */
.dtable tr.is-extra td { color: var(--muted); }
.dtable tr.is-extra .player-cell b { color: var(--muted); font-weight: 400; }

/* ---------- 21. PLAYER PROFILE ---------- */
.profile {
  position: relative;
  padding-top: var(--header-h);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.profile__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 68% 30%, rgba(0,169,79,.20), transparent 55%),
    linear-gradient(180deg, transparent 40%, var(--bg));
}
.profile__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 70px);
}
.profile__num {
  font-family: var(--font-display); font-weight: 800; line-height: .8;
  font-size: clamp(4rem, 9vw, 8.5rem);
  color: transparent; -webkit-text-stroke: 1.6px var(--line-2);
  margin-bottom: 8px;
}
.profile__name { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.profile__tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tag {
  padding: 8px 15px; border: 1px solid var(--line);
  font-size: var(--micro-2); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 9px;
}
.tag--green { color: var(--green-2); border-color: var(--line-green); background: rgba(0,169,79,.07); }
.tag--gold { color: var(--gold); border-color: var(--gold-dim); }
.tag .flag { width: 20px; height: 14px; }
/* Capping the height directly fought the aspect ratio: the box turned
   square and a 4:5 photo letterboxed inside it. Capping the *width*
   instead keeps the frame a true 4:5 and still never exceeds ~62vh tall. */
.profile__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: min(100%, 49vh);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
}
/* Sinks the photo into the page instead of leaving a bright rectangle. */
.profile__visual::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,8,7,.45) 0%, transparent 24%, transparent 58%, rgba(5,8,7,.88) 100%),
    radial-gradient(ellipse at 50% 38%, transparent 42%, rgba(5,8,7,.55) 100%);
}
.profile__visual::before {
  content: "";
  position: absolute; inset: 8% 12%;
  background: radial-gradient(ellipse at 50% 60%, rgba(0,169,79,.32), transparent 70%);
  filter: blur(20px);
}
.profile__visual svg { position: relative; width: 100%; height: 100%; }
.profile__quote {
  margin-top: 26px;
  padding-left: 22px;
  border-left: 1px solid var(--line-green);
  font-size: 1rem; color: var(--muted); font-weight: 400; font-style: italic;
  max-width: 46ch;
}
.stat-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-strip > div {
  padding: clamp(20px,2.4vw,32px) 20px;
  border-right: 1px solid var(--line);
  transition: background-color .45s var(--ease);
}
.stat-strip > div:last-child { border-right: 0; }
.stat-strip > div:hover { background: var(--wash); }
.stat-strip b {
  display: block;
  font-family: var(--font-display); font-size: clamp(2rem,3.4vw,3rem); font-weight: 800; line-height: 1; color: var(--white);
}
.stat-strip span { display: block; margin-top: 10px; font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

/* ---------- 22. FORM ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.field label span { color: var(--green-2); }
.field input, .field select, .field textarea {
  background: var(--wash);
  border: 1px solid var(--line);
  padding: 15px 16px;
  font-size: .938rem;
  color: var(--white);
  outline: none;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
  border-radius: 0;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select option { background: #0c1210; color: var(--white); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); background: rgba(0,169,79,.05);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--loss); }
.field__err { font-size: .688rem; color: var(--loss); display: none; }
.field.has-error .field__err { display: block; }
/* Приманка для ботів: прибираємо з очей, але лишаємо в потоці форми.
   display:none тут не годиться — частина ботів такі поля пропускає, а
   нам треба, щоб вони його заповнили й видали себе. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Помилка надсилання лежить не всередині .field, тому вмикається
   власним класом, а не через .has-error. */
[data-join-error] { font-size: .75rem; line-height: 1.7; }
[data-join-error].is-visible { display: block; }
.form-note { font-size: .75rem; color: var(--dim); line-height: 1.7; }
.form-success {
  display: none;
  border: 1px solid var(--line-green);
  background: rgba(0,169,79,.07);
  padding: 26px;
  text-align: center;
}
.form-success.is-visible { display: block; }
.form-success h3 { font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; color: var(--green-2); margin-bottom: 10px; }

/* steps */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step {
  counter-increment: step;
  background: var(--bg-2);
  padding: clamp(22px,2.4vw,32px);
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  align-items: start;
  transition: background-color .5s var(--ease);
}
.step:hover { background: #0a100d; }
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--green);
  line-height: 1;
}
.step h4 { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.step p { font-size: .875rem; color: var(--muted); font-weight: 400; }

/* ---------- 23. MISC BLOCKS ---------- */
.split-list { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.split-list__row {
  background: var(--bg);
  display: grid; grid-template-columns: 220px 1fr;
  gap: 30px;
  padding: clamp(20px,2.4vw,30px) 0;
  transition: background-color .5s var(--ease);
}
.split-list__row:hover { background: #080d0b; }
.split-list__k { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; color: var(--white); }
.split-list__v { color: var(--muted); font-weight: 400; }

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--green);
  background: linear-gradient(90deg, rgba(0,169,79,.06), transparent 60%);
  padding: clamp(24px,2.6vw,34px);
}

.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.tl-item {
  position: relative;
  padding: 0 0 clamp(40px,5vw,72px) clamp(28px, 4vw, 60px);
}
.tl-item::before {
  content: ""; position: absolute; left: -4px; top: 8px;
  width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--green);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.tl-item:hover::before { background: var(--green); transform: scale(1.25); }

/* ---------- 24. REVEAL ANIMATIONS ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="scale"] { transform: scale(.97); }
[data-reveal].is-in { opacity: 1; transform: none; }
.reveal-line {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.reveal-line.is-in { transform: scaleX(1); }

/* page transition */
body { opacity: 1; transition: opacity .32s ease; }
body.is-leaving { opacity: 0; }
.page-veil {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
body.is-leaving .page-veil { opacity: 1; }

/* noise */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .035;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* =====================================================================
   26. HOMEPAGE — light/dark editorial layout
   Alternating light and dark bands with angled joins, oversized italic
   display type and full-bleed photography. Scoped with `hm-` so the
   inner pages keep the original dark system untouched.
   ===================================================================== */
:root {
  --paper:      #F2F3F0;   /* light band background */
  --paper-2:    #E7E9E4;
  --ink:        #0A130E;   /* display type on light */
  --ink-soft:   #46524B;
  --cut:        44px;      /* depth of the angled section joins */
}

.hm-display {
  font-family: var(--font-title);
  /* У Tektur немає власного курсиву — нахил синтезує браузер, і для
     квадратної гарнітури це саме те, що треба. */
  font-style: italic;
  font-weight: var(--display-weight);
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.005em;
}
html[lang="uk"] .hm-display { letter-spacing: .006em; }

.hm-eyebrow {
  font-size: .688rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- HERO ---------- */
.hm-hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.hm-hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1620px;
  margin-inline: auto; padding: clamp(30px,5vw,70px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 40px; align-items: center;
}
.hm-hero__copy { max-width: 42rem; }
.hm-hero__eyebrow { color: var(--ink); opacity: .75; margin-bottom: clamp(18px,2.4vw,28px); display: block; }
/* Назва клубу зеленим. Фірмовий #00A94F на папері дає 2.79:1 — нижче
   навіть за поріг 3:1 для великого тексту, тому береться --green-ink.
   На такому кеглі він читається як насичений клубний зелений. */
.hm-hero__title {
  font-size: clamp(3.6rem, 10.5vw, 9.5rem);
  color: var(--green-ink);
  margin-bottom: 6px;
}
.hm-hero__tag {
  display: block;
  margin: clamp(14px,2vw,22px) 0 clamp(18px,2.4vw,26px);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-ink);
}
.hm-hero__desc {
  font-size: clamp(.938rem, 1.15vw, 1.05rem);
  line-height: 1.75; color: var(--ink-soft); max-width: 34ch;
  margin-bottom: clamp(26px,3vw,38px);
}
.hm-hero__actions { display: flex; align-items: center; gap: clamp(16px,2.4vw,30px); flex-wrap: wrap; }

/* photo side */
.hm-hero__figure {
  position: absolute; inset: 0 0 0 44%;
  z-index: 1; pointer-events: none;
}
.hm-hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
}
.hm-hero__figure::before {   /* fades the photo into the light band */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(242,243,240,.72) 14%, transparent 42%);
}
.hm-hero__splash {
  position: absolute; z-index: 0; inset: 0 0 0 38%;
  background:
    linear-gradient(112deg, transparent 34%, rgba(0,169,79,.16) 34.4%, rgba(0,169,79,.16) 46%, transparent 46.4%),
    linear-gradient(112deg, transparent 56%, rgba(10,19,14,.10) 56.4%, rgba(10,19,14,.10) 62%, transparent 62.4%);
  pointer-events: none;
}
.hm-hero__side {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  writing-mode: vertical-rl;
  font-size: var(--micro); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); opacity: .7;
  display: flex; align-items: center; gap: 16px;
}
.hm-hero__side::after { content: ""; width: 1px; height: 60px; background: var(--green); }
/* light-header mode, used while the page sits at the top of a light hero */
.header--light .nav__link { color: rgba(10,19,14,.62); }
.header--light .nav__link:hover, .header--light .nav__link.is-active { color: var(--ink); }
.header--light .brand__name { color: var(--ink); }
.header--light .brand__sub { color: rgba(10,19,14,.66); }
.header--light .social-ico { color: rgba(10,19,14,.58); }
.header--light .social-ico:hover { color: var(--green-ink); }
.header--light .lang { border-color: rgba(10,19,14,.16); }
.header--light .lang__btn { color: rgba(10,19,14,.66); }
.header--light .lang__btn:hover { color: var(--ink); }
/* Ця гілка йде після .lang__btn.is-active і має ту саму вагу, тому без
   явного правила активна мова на світлій шапці втрачала свій колір
   і лишалась напівпрозорою на зеленому — 3.5:1. */
.header--light .lang__btn.is-active { color: #04160c; }
.header--light .burger { border-color: rgba(10,19,14,.18); }
.header--light .burger span { background: var(--ink); }
.header--light::before { background: linear-gradient(180deg, rgba(242,243,240,.9), rgba(242,243,240,0)); }

/* ---------- shared band helpers ---------- */
.hm-band { position: relative; }
.hm-band--dark { background: var(--bg-2); color: var(--text); }
.hm-band--paper { background: var(--paper); color: var(--ink); }
.hm-cut-top    { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--cut) * -1); }
.hm-cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.hm-cut-both   { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); margin-top: calc(var(--cut) * -1); }

.hm-head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px,2.6vw,34px); }
.hm-head__line { flex: 1; height: 1px; background: currentColor; opacity: .18; }
.hm-head .hm-eyebrow { color: var(--green-2); white-space: nowrap; }
.hm-band--paper .hm-head .hm-eyebrow { color: var(--green-ink); }

/* ---------- MATCH STRIP ---------- */
.hm-matches {
  padding: calc(var(--cut) + clamp(40px,5vw,70px)) 0 clamp(40px,5vw,70px);
}
.hm-matches__grid {
  display: grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  gap: clamp(24px,4vw,60px); align-items: center;
}
.hm-matches__rule { background: var(--line); align-self: stretch; }
.hm-fixture { text-align: center; }
.hm-fixture__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(12px,2vw,26px);
  margin-top: 22px;
}
.hm-fixture__club { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hm-fixture__badge { width: 76px; height: 76px; }
.hm-fixture__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.875rem,1.2vw,1.1rem); letter-spacing: .04em; color: var(--white);
  line-height: 1.15;
}
.hm-fixture__vs {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(1.6rem,2.6vw,2.4rem); color: var(--white);
}
.hm-fixture__score {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem,4.4vw,3.6rem); color: var(--white); white-space: nowrap;
}
.hm-fixture__meta {
  margin-top: 6px;
  font-size: var(--micro-2); letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.hm-fixture__when {
  margin-top: 8px;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--white); letter-spacing: .06em;
}
.hm-fixture__cta { margin-top: 24px; }
.hm-fixture__empty {
  margin-top: 18px; font-size: .875rem; color: var(--muted); max-width: 34ch; margin-inline: auto;
}

/* ---------- OUR CLUB ---------- */
.hm-club { position: relative; overflow: hidden; }
.hm-club__grid {
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  align-items: center; min-height: clamp(420px, 46vw, 560px);
}
.hm-club__photo { position: relative; align-self: stretch; overflow: hidden; }
/* Постать зміщена вліво від центру кадру, тому прив'язка йде до лівого
   краю: при типовому центруванні `cover` зрізав саме ногу в замаху.
   Праворуч лишається стадіон, який і так гаситься градієнтом у папір. */
.hm-club__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}
.hm-club__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,20,12,.25), rgba(0,169,79,.18) 55%, var(--paper) 99%);
}
/* Правий відступ тримає колонку під лева, щоб текст не заходив під нього.
   Лев ширший за попереднього маскота, тому колонка теж ширша. */
.hm-club__body {
  padding: clamp(36px,4vw,64px) clamp(var(--gutter), 27vw, 370px) clamp(36px,4vw,64px) clamp(32px,4vw,64px);
}
.hm-club__title { font-size: clamp(2.2rem,4.4vw,3.6rem); color: var(--ink); margin-bottom: 20px; }
.hm-club__text { font-size: .938rem; line-height: 1.8; color: var(--ink-soft); max-width: 52ch; }
.hm-club__stats {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: clamp(20px,3.4vw,52px); justify-content: start;
  margin: clamp(28px,3.4vw,44px) 0 clamp(24px,3vw,36px);
}
.hm-stat b {
  display: block;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(1.9rem,3vw,2.6rem); color: var(--ink); line-height: 1;
}
.hm-stat span {
  display: block; margin-top: 8px;
  font-size: var(--micro); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
}
/* Геральдичний лев клубу, стоїть на нижньому краї світлої смуги праворуч.

   Приглушений до силуету: суцільна заливка на повну силу перетягувала на
   себе весь блок і сперечалася із заголовком. На такій прозорості знак
   читається як тиснення на папері, а не як друга ілюстрація поруч із фото.

   Тіні немає навмисно — під плоскою заливкою вона виглядає брудом, а не
   об'ємом, і тим більше не потрібна напівпрозорому знаку.

   Висота менша за ту, що була під маскота: цей знак значно ширший при
   тій самій висоті (889×1045 проти 640×1100). Ширину колонки під нього
   див. у .hm-club__body. */
.hm-club__art {
  position: absolute; right: clamp(6px, 1.4vw, 22px); bottom: 0;
  height: clamp(230px, 27vw, 360px);
  z-index: 2;
  pointer-events: none;
  opacity: .22;
}
.hm-club__art img { height: 100%; width: auto; display: block; }

/* pill button for light bands */
.btn--pill {
  border-radius: 999px; padding: 14px 26px;
  border-color: rgba(10,19,14,.2); color: var(--ink);
}
.btn--pill::after { background: var(--ink); }
.btn--pill:hover { color: var(--paper); border-color: var(--ink); }

/* ---------- RESULTS + SQUAD ---------- */
.hm-lower { padding-block: clamp(44px,5vw,78px); }

/* Список результатів. На головній зараз не використовується — смуга матчів
   угорі вже показує останній результат, — але стилі лишені: розмітку блоку
   заповнює той самий [data-hm-results] у main.js, тож повернути його можна
   одним фрагментом HTML. */
.hm-rlist { display: grid; gap: 2px; }
.hm-rrow {
  display: grid; grid-template-columns: 34px 78px 58px 1fr;
  align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--wash);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.hm-rrow:hover { background: rgba(255,255,255,.06); transform: translateX(3px); }
.hm-rrow__badge { width: 30px; height: 30px; }
.hm-rrow__res {
  font-size: var(--micro-2); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.hm-rrow__res.w { color: var(--win); } .hm-rrow__res.d { color: var(--draw); } .hm-rrow__res.l { color: var(--loss); }
.hm-rrow__score { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); }
.hm-rrow__opp { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Sized tracks rather than four equal columns: two players sit at a proper
   size instead of being stretched, and the row fills out as the squad grows. */
.hm-squad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 232px));
  justify-content: start;
  gap: 14px;
}
.hm-squad .pcard { aspect-ratio: 3 / 4; }
/* `auto-fit` рахує кількість колонок за максимумом треку (232px), а не за
   мінімумом. Тому нижче ~560px він лишав одну колонку, і дві картки ставали
   одна під одною з порожнечею збоку. На цій ширині — просто дві рівні. */
@media (max-width: 560px) {
  .hm-squad { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MEDIA + SOCIAL ---------- */
.hm-media__grid {
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr);
  gap: clamp(24px,3vw,40px); align-items: stretch;
}
/* Fits however many channels are published — no empty cell when one is
   still missing a link. */
.hm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.hm-tile {
  position: relative; display: block; aspect-ratio: 4/3;
  overflow: hidden; border: 1px solid rgba(10,19,14,.10);
  background: #0b120e;
}
/* Плитка тримає два шари: намальований фон і, поверх нього, справжню
   обкладинку з YouTube. Без position:absolute вони йшли один під одним —
   обкладинка опинялась нижче видимої частини плитки й ніколи не було видно. */
.hm-tile > svg, .hm-tile > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.hm-tile:hover svg, .hm-tile:hover img { transform: scale(1.07); }
.hm-tile__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,6,.1), rgba(4,8,6,.82)); }
.hm-tile__play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5); background: rgba(4,8,6,.35);
  color: #fff; transition: background-color .4s, color .4s, transform .4s;
}
.hm-tile:hover .hm-tile__play { background: var(--green); border-color: var(--green); color: #04160c; transform: translate(-50%,-50%) scale(1.08); }
.hm-tile__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
  color: #fff;
}
/* Назва матчу і його дата. Назва може бути довгою, тому обрізається двома
   рядками, а не ламає плитку. */
.hm-tile__label b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(.813rem, 1.1vw, .95rem); line-height: 1.15; letter-spacing: .01em;
}
.hm-tile__label i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
/* Один запис в архіві не має тулитись у половину рядка, лишаючи порожнє
   місце поряд — займає всю ширину і ширший кадр. */
.hm-tiles .hm-tile:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* Відкритий плеєр займає весь рядок. У плитці 168px ані відео, ані
   трансляція не читаються — у Twitch там навіть керування не вміщається. */
.hm-tiles .hm-tile.is-open {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  transition: none;
}

/* Плитка Twitch. Кутова позначка з'являється тільки тоді, коли сайт
   справді знає, що йде ефір (заповнений TWITCH.statusEndpoint) — інакше
   вона обіцяла б трансляцію, якої немає. */
.hm-tile--live::before {
  content: "TWITCH";
  position: absolute; left: 10px; top: 10px; z-index: 3;
  padding: 5px 10px;
  background: rgba(4,8,6,.62); border: 1px solid rgba(255,255,255,.24);
  font-size: var(--micro); font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.9);
}
.hm-tile--live.is-live::before {
  content: "● LIVE";
  background: var(--loss); border-color: var(--loss); color: #fff;
  animation: live-pulse 2.4s ease-in-out infinite;
}
/* Власна анімація, а не pulse-dot: та світиться зеленим, і на червоній
   позначці ефіру давала б зелений ореол. */
@keyframes live-pulse { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

/* Плитка-відео — це кнопка, а не посилання: курсор має це показувати. */
.hm-tile--video { cursor: pointer; }
.hm-tile--video:focus-visible { outline: 2px solid var(--green-2); outline-offset: -2px; }
.hm-tile__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hm-tile__soon {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  padding: 7px 13px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.28); background: rgba(4,8,6,.55);
  font-size: var(--micro); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
.hm-social {
  position: relative; overflow: hidden;
  border: 1px solid rgba(10,19,14,.10);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px,3vw,38px); min-height: 260px;
}
.hm-social__bg { position: absolute; inset: 0; z-index: 0; }
.hm-social__bg img { width: 100%; height: 100%; object-fit: cover; }
.hm-social__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,12,8,.55), rgba(4,12,8,.9)); }
.hm-social__title { position: relative; z-index: 1; font-size: clamp(1.6rem,2.4vw,2.2rem); color: #fff; margin-bottom: 20px; }
.hm-social__row { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.hm-social__row a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  transition: background-color .35s, color .35s, border-color .35s, transform .35s;
}
.hm-social__row a:hover { background: var(--green); border-color: var(--green); color: #04160c; transform: translateY(-3px); }

/* ---------- BECOME A LION ---------- */
.hm-join { position: relative; overflow: hidden; background: #0a3a20; color: #fff; }

/* A right-hand panel sized as a share of the band, not by the image's own
   proportions — locking it to the height left a dead gap between the copy
   and the artwork. `cover` trims the stripes on its left instead, and the
   right-hand object-position keeps the player in frame at any width. */
.hm-join__bg {
  position: absolute; inset: 0 0 0 auto;
  height: 100%;
  width: clamp(340px, 52%, 860px);
  z-index: 0; pointer-events: none;
}
/* The panel is always shorter than 2.5:1, so `cover` scales by height and
   trims only horizontally — the player's head is never cut. Anchoring right
   keeps him whole with the ~20px margin the banner was drawn with; anything
   less clips the shirt he is holding out. */
.hm-join__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
  display: block;
}

/* Fades the panel's left edge into the band colour so there is no seam. */
.hm-join__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #0a3a20 0%, rgba(10,58,32,.92) 18%, rgba(10,58,32,.55) 42%, rgba(10,58,32,.12) 72%, transparent 100%);
}
/* padding-block only — the shorthand was zeroing the container's side
   gutter, which pushed the copy against the screen edge on mobile.
   Width is constrained on the copy itself, not the container. */
.hm-join__inner {
  position: relative; z-index: 1;
  padding-block: calc(var(--cut) + clamp(34px,3.4vw,54px)) clamp(34px,3.4vw,54px);
}
.hm-join__inner > * { max-width: 40rem; }
.hm-join__title { font-size: clamp(2.4rem,5vw,4rem); color: #fff; margin: 12px 0 16px; }
.hm-join__text { font-size: .938rem; line-height: 1.75; color: rgba(255,255,255,.82); max-width: 40ch; margin-bottom: 22px; }

/* Requirement chips — give the left column substance instead of dead space,
   and say something useful to someone deciding whether to apply. */
.hm-join__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.hm-join__chips li {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  font-size: var(--micro-2); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.hm-join__chips li:hover { border-color: var(--green-3); color: #fff; }

/* ---------- FOOTER TAGLINE ---------- */
.hm-footer-tag { text-align: right; }
.hm-footer-tag p {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1.05rem; line-height: 1.35; text-transform: uppercase; color: var(--muted);
}

/* =====================================================================
   27. BANDS — світло-темна система для внутрішніх сторінок

   Головна вже побудована так: смуги чергуються, стики зрізані під кутом,
   заголовки — великі курсивні. Внутрішні сторінки були суцільно темні —
   одна довга чорна стрічка з тонкими лініями між блоками. Тут та сама
   мова поширюється на решту сайту.

   Ключ до всього — `.band--paper`. Замість того щоб описувати світлий
   варіант кожного компонента окремо, смуга **перевизначає самі токени**
   всередині себе: --surface стає білим, --line чорнильною, --text темним.
   Компоненти (панелі, таблиці, картки, вкладки) написані через ці токени,
   тому перевертаються самі, без жодного дубля розмітки.
   ===================================================================== */

.band { position: relative; }
.band--dark  { background: var(--bg);   color: var(--text); }
.band--dark2 { background: var(--bg-2); color: var(--text); }

.band--paper {
  /* поверхні */
  --bg:         #F2F3F0;
  --bg-2:       #EDEFEA;
  --surface:    #FFFFFF;
  --surface-2:  #F7F8F5;
  --surface-3:  #ECEEE9;
  /* лінії */
  --line:       rgba(10,19,14,.13);
  --line-2:     rgba(10,19,14,.22);
  --line-green: rgba(14,117,57,.32);
  /* текст: --white тут означає «найконтрастніший», а не буквально білий */
  --white:      #0A130E;
  --text:       #26312B;
  --muted:      #4F5C55;
  --dim:        #5B6962;   /* 4.9:1 на папері; світліше не проходило AA */
  /* акцент: фірмовий зелений на світлому дає 2.8:1, тому темніший */
  --green:      var(--green-ink);
  --green-2:    var(--green-ink);
  --green-3:    #0B5C2C;
  --green-wash: rgba(14,117,57,.07);
  --green-glow: rgba(14,117,57,.20);
  /* службові */
  --wash:       rgba(10,19,14,.035);
  --stroke:     rgba(10,19,14,.20);
  --track:      rgba(10,19,14,.10);

  background: var(--paper);
  color: var(--text);
}

/* Кутові зрізи. Смуга «наїжджає» на попередню від'ємним відступом,
   тому стик читається як один діагональний розріз, а не як щілина. */
.cut-top    { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--cut) * -1); }
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }

/* Відступи смуги. Перший варіант — коли зверху зріз: до звичайного
   відступу додається глибина зрізу, інакше вміст лізе під діагональ. */
.band__in     { padding-block: clamp(58px, 7vw, 104px); }
.cut-top > .band__in { padding-top: calc(var(--cut) + clamp(58px, 7vw, 104px)); }
.band__in--tight { padding-block: clamp(44px, 5vw, 74px); }
.cut-top > .band__in--tight { padding-top: calc(var(--cut) + clamp(44px, 5vw, 74px)); }

/* Заголовок смуги тепер несе ще й керування (вкладки, лічильник, посилання),
   тому має переноситись, а лінія — стискатись до нуля, а не ламати рядок. */
.band .hm-head { flex-wrap: wrap; }
.band .hm-head__line { min-width: 24px; }
.band .hm-head > .tabs { flex: none; max-width: 100%; }
.band .hm-head__aside {
  font-size: var(--micro-2); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}

/* На вузьких екранах керування й лічильник ідуть окремим рядком, а не
   тиснуться поруч із назвою смуги: інакше довгий підпис («1 МАТЧ ·
   1 ДОСТУПНО ДЛЯ ПЕРЕГЛЯДУ») розпирав смугу й з'являлась горизонтальна
   прокрутка всієї сторінки. */
@media (max-width: 520px) {
  .band .hm-head > .tabs,
  .band .hm-head__aside,
  .band .hm-head > .link-arrow,
  .band .hm-head > .btn { flex: 1 0 100%; }
  .band .hm-head > .tabs { display: flex; }
  .band .hm-head > .tabs .tab { flex: 1; padding-inline: 10px; }
}

/* ---------- компоненти на світлій смузі ---------- */

/* Заливка ::after у primary-кнопки — це var(--white), тобто на світлій
   смузі вона стала б чорнильною під чорнильним же текстом. */
.band--paper .btn--primary::after { background: var(--ink); }
.band--paper .btn--primary:hover  { color: var(--paper); border-color: var(--ink); }
.band--paper .btn:hover           { color: var(--paper); }
.band--paper .btn--primary        { --btn-fg: #F4FBF6; }

/* Панелі на світлому: біла картка з тінню замість темної з рамкою —
   на папері рамка сама по собі виглядає порожньо. */
.band--paper .panel {
  background: #fff;
  box-shadow: 0 1px 2px rgba(10,19,14,.05), 0 12px 30px -18px rgba(10,19,14,.30);
}
.band--paper .callout {
  background: #fff;
  box-shadow: 0 1px 2px rgba(10,19,14,.05), 0 12px 30px -18px rgba(10,19,14,.30);
}
.band--paper .dtable thead th { background: var(--surface-2); }
.band--paper .tab.is-active { color: var(--paper); }

/* Результати матчів. Яскраві W/D/L на папері дають 2–3:1, тому на світлій
   смузі беруться темніші відповідники — колірний код лишається читним. */
.band--paper {
  --win:  #0A6A36;
  --draw: #6E520C;
  --loss: #A0231A;
}
.band--paper .form-guide .w { background: rgba(10,106,54,.10); }
.band--paper .form-guide .d { background: rgba(110,82,12,.10); }
.band--paper .form-guide .l { background: rgba(160,35,26,.10); }

/* Точкові місця, де темний колір був вписаний числом, а не токеном. */
.band--paper .split-list__row:hover,
.band--paper .step:hover,
.band--paper .tcard:hover { background: var(--surface-2); }
.band--paper .field select option { background: #fff; color: var(--ink); }
.band--paper .vcard { background: #fff; box-shadow: 0 1px 2px rgba(10,19,14,.05), 0 14px 34px -20px rgba(10,19,14,.30); }
.band--paper .vcard:hover { box-shadow: 0 1px 2px rgba(10,19,14,.05), 0 22px 44px -20px rgba(10,19,14,.34); }
.band--paper .empty-state { background: var(--surface-2); }

/* Картки гравців лишаються темними навіть на світлій смузі: фото й
   номери на чорному — це впізнаваний елемент, і на папері вони б
   розсипались. Натомість картка отримує тінь, щоб не «плавала». */
.band--paper .pcard {
  --surface: #0C1210; --surface-2: #111916; --white: #fff;
  --text: #E6EDE8; --muted: #9FACA4; --dim: #7B8A82;
  --line: rgba(255,255,255,.075); --line-2: rgba(255,255,255,.14);
  --stroke: rgba(255,255,255,.26); --green-2: #10D26A;
  color: var(--text);
  box-shadow: 0 18px 40px -24px rgba(10,19,14,.55);
}

/* ---------- ЗАГОЛОВОК СТОРІНКИ ---------- */
/* Був темний блок зі світінням — той самий на всіх сторінках. Тепер це
   світла смуга: назва сторінки великим курсивом чорнилом, герб як
   водяний знак праворуч і ті самі діагональні смуги, що в геро. */
.phead {
  padding-top: calc(var(--header-h) + clamp(44px, 6vw, 96px));
  padding-bottom: clamp(38px, 5vw, 74px);
  overflow: hidden;
  isolation: isolate;
}
.phead__splash {
  position: absolute; inset: 0 0 0 42%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 40%, rgba(0,169,79,.14) 40.4%, rgba(0,169,79,.14) 52%, transparent 52.4%),
    linear-gradient(112deg, transparent 62%, rgba(10,19,14,.08) 62.4%, rgba(10,19,14,.08) 68%, transparent 68.4%);
}
.phead__crest {
  position: absolute; right: clamp(-40px, -2vw, 0px); top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 420px); aspect-ratio: 1;
  opacity: .07; z-index: 0; pointer-events: none;
}
.phead__crest img { width: 100%; height: 100%; object-fit: contain; }

/* Намальована сцена шапки. Живе на всю ширину смуги й притиснута до низу:
   поле «виїжджає» з-під заголовка, а не висить окремою картинкою.
   Ліва третина гаситься градієнтом усередині самого SVG, тому текст
   лишається читним без додаткової накладки. */
/* Сцена займає лише нижню частину смуги, а не всю висоту. Так шеренга
   фігур завжди лишається під текстом: заміряно, що при повній висоті на
   1280px вони налізали на опис рівно на 4px. Газон усередині SVG усе одно
   доходить до нижнього краю, тож поле лишається на всю смугу. */
.phead__art {
  position: absolute; inset: auto 0 0 0; height: 64%;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.phead__art .phead__svg { width: 100%; height: 100%; display: block; }

/* Варіант із готовою картинкою замість намальованої сцени.

   Займає всю висоту смуги, а не 64%: це не сцена з горизонтом, а
   декоративний візерунок — йому потрібне все полотно.

   mix-blend-mode: multiply — бо файл має суцільний білий фон без
   прозорості. Без нього на смузі кольору --paper (#F2F3F0) було б видно
   світлий прямокутник. Множення прибирає біле й лишає самі лінії. */
.phead__art--photo { top: 0; height: 100%; }
.phead__art--photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
  mix-blend-mode: multiply;
  display: block;
}
/* Гасить малюнок під текстом — той самий градієнт, що вбудований у SVG-сцени. */
.phead__art--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--paper) 0%, rgba(242,243,240,.88) 26%, rgba(242,243,240,.35) 46%, transparent 64%);
}

/* Варіант для ТЕМНОЇ картинки на світлій смузі.

   Множення тут не годиться — воно розраховане на білий фон, а темне фото
   через нього просто зачорнить смугу. Тому фото стає правою панеллю, як
   банер у блоці «Стань левом» на головній: ліворуч лишається чистий папір
   під заголовок, праворуч — картинка, а стик між ними гасить градієнт. */
.phead__art--dark {
  top: 0; height: 100%;
  inset-inline: auto 0;
  width: clamp(340px, 62%, 1000px);
}
.phead__art--dark img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  display: block;
}
.phead__art--dark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--paper) 0%, rgba(242,243,240,.94) 14%, rgba(242,243,240,.62) 32%,
    rgba(242,243,240,.18) 56%, transparent 78%);
}
@media (max-width: 760px) {
  /* Вузький екран: панель на всю ширину, градієнт згори вниз — інакше
     заголовок ляже просто на кубок. */
  .phead__art--dark { inset-inline: 0; width: 100%; }
  .phead__art--dark::after {
    background: linear-gradient(180deg,
      rgba(242,243,240,.94) 0%, rgba(242,243,240,.80) 48%, rgba(242,243,240,.55) 100%);
  }
}

/* Сцени, які займають усю смугу, а не тільки її низ. Потрібні там, де
   малюнок не має горизонту й будується навколо центру, — тоді обрізати
   верх не можна. */
.phead__art--full { top: 0; height: 100%; }

/* Смуга з повновисотною сценою вища за звичайну. Причина: предмет у центрі
   затиснутий між шапкою згори й діагональним зрізом наступної секції знизу,
   і в типовій висоті йому лишалось близько 220px — замало, щоб він читався
   як головний об'єкт. Додаткові поля дають запас, у який він росте.
   На телефоні не додаються: там смуга й так висока відносно екрана. */
@media (min-width: 1025px) {
  .phead:has(.phead__art--full) {
    padding-bottom: clamp(70px, 8vw, 130px);
    /* Мінімальна висота, бо заголовки різні: «FC27» займає рядок, а
       «MATCH CENTER» — два, і смуга під ними виходила на 80px нижчою.
       Кубок же росте від ширини екрана, не від висоти смуги, тож на
       коротких шапках він підлазив під шапку сайту. Спільний мінімум
       вирівнює простір під сцену й робить шапки вкладок однаковими. */
    min-height: clamp(420px, 33vw, 640px);
  }
}

/* Права частина рядка під заголовком (форма сезону, статус ефіру, кнопка
   заявки) при `space-between` виїжджає на правий бік смуги — а там уже
   темна частина сцени, і чорнильний текст на ній не читається. Тому на
   сторінках зі сценою обидва блоки тримаються ліворуч, на світлому. */
.phead:has(.phead__art--full) .phead__meta {
  justify-content: flex-start;
  gap: clamp(22px, 3.5vw, 56px);
}
/* І сам заголовок тримається лівої половини. Без обмеження довгі назви
   («ЗНАЙОМСЯ ЗІ СКЛАДОМ») тягнулись на 87% ширини — тобто на темний бік
   сцени, де чорнильний текст зникає. Тепер вони переносяться раніше. */
.phead:has(.phead__art--full) .phead__title,
.phead:has(.phead__art--full) .pintro__text { max-width: min(100%, 58%); }
@media (max-width: 1024px) {
  .phead:has(.phead__art--full) .phead__title,
  .phead:has(.phead__art--full) .pintro__text { max-width: 100%; }
}

/* Вузький екран. Сцена всередині SVG гасне ЗЛІВА — на десктопі це тримає
   текст на світлому боці. Але на телефоні від сцени видно тільки середню
   вертикальну смугу (решту зрізає `slice`), і темна частина опиняється
   просто під заголовком. Текст же тут займає майже всю ширину, відступити
   нікуди — тому сцена глушиться поверх, до рівня ледь помітної фактури.
   Знизу лишається прозоріше: там стоїть кубок, і його силует має читатись. */
@media (max-width: 1024px) {
  .phead__art--full::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
      var(--paper) 0%, rgba(242,243,240,.94) 46%,
      rgba(242,243,240,.80) 74%, rgba(242,243,240,.62) 100%);
  }
}

/* Смуга вужчає — заголовок переноситься на два рядки й опускається,
   тому сцені з горизонтом лишається менше місця. `:not(--full)` тут
   обов'язковий: без нього ці правила зрізали б і повновисотні сцени. */
@media (max-width: 1024px) {
  .phead__art:not(.phead__art--full) { height: 46%; }
}
/* На телефоні від сцени лишається сама розмітка поля: вісім фігур на такій
   ширині перетворюються на дрібне мерехтіння за текстом. */
@media (max-width: 620px) {
  .phead__art:not(.phead__art--full) { height: 38%; }
  .phead__art .pa-figure { display: none; }
}
.phead__inner { position: relative; z-index: 2; }
.phead__title {
  font-size: clamp(3rem, 8.5vw, 7rem);
  color: var(--ink);
  margin-block: 16px 18px;
}
.phead__meta {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.phead .breadcrumb { color: var(--ink-soft); }
.phead .breadcrumb a:hover { color: var(--green-ink); }
.phead .kicker { color: var(--ink-soft); }
.phead .kicker::before { background: var(--green-ink); }

/* ---------- ВСТУПНИЙ РЯДОК СТОРІНКИ ---------- */
/* Короткий опис + цифри збоку. Дає світлій смузі вагу, щоб вона не була
   просто заголовком у порожнечі. */
.pintro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(28px,4vw,64px); align-items: center; }
.pintro__text { font-size: 1rem; line-height: 1.8; color: var(--ink-soft); max-width: 54ch; }
.pintro__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pintro__fig { background: var(--paper); padding: clamp(16px,2vw,24px); }
.pintro__fig b {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(1.7rem,3vw,2.5rem); line-height: 1; color: var(--ink);
}
.pintro__fig span {
  display: block; margin-top: 8px;
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- ЗАКЛИК У КІНЦІ СТОРІНКИ ---------- */
/* Той самий блок, що «Стань левом» на головній, щоб низ кожної сторінки
   впізнавався. Фон — банер команди, зліва градієнт у колір смуги. */
.cta-band { position: relative; overflow: hidden; background: #0a3a20; color: #fff; }
.cta-band__bg { position: absolute; inset: 0 0 0 auto; height: 100%; width: clamp(340px, 52%, 860px); z-index: 0; pointer-events: none; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.cta-band__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0a3a20 0%, rgba(10,58,32,.92) 18%, rgba(10,58,32,.55) 42%, rgba(10,58,32,.12) 72%, transparent 100%);
}
.cta-band__in { position: relative; z-index: 1; padding-block: calc(var(--cut) + clamp(40px,4vw,64px)) clamp(40px,4vw,64px); }
.cta-band__in > * { max-width: 40rem; }
.cta-band__title { font-size: clamp(2.2rem,4.6vw,3.6rem); color: #fff; margin: 12px 0 16px; }
.cta-band__text  { font-size: .938rem; line-height: 1.75; color: rgba(255,255,255,.84); max-width: 42ch; margin-bottom: 24px; }
.cta-band .hm-eyebrow { color: var(--green-3); display: block; }

@media (max-width: 1024px) {
  .pintro { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pintro__figs { grid-template-columns: repeat(3, 1fr); }
  .pintro__fig { padding: 14px 12px; }
  .cta-band__bg { inset: 0; width: 100%; }
  .cta-band__bg::after {
    background: linear-gradient(180deg, rgba(10,58,32,.70) 0%, rgba(10,58,32,.88) 55%, rgba(10,58,32,.96) 100%);
  }
  .phead__crest { width: 62vw; opacity: .05; }
  .phead__splash { inset: 0 0 0 20%; }
}

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .squad-grid { grid-template-columns: repeat(3, 1fr); }
  .squad-grid--5 { grid-template-columns: repeat(4, 1fr); }
  .header__socials { display: none; }
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .header__actions { margin-left: auto; }
  .intro__grid, .season-teaser__grid, .profile__grid { grid-template-columns: 1fr; }
  .match-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 44px; }
  .mtile, .mtile--wide, .mtile--tall, .mtile--hero { grid-column: span 6; aspect-ratio: 16/10; }
  .profile__visual { max-width: min(100%, 37vh); order: -1; }
  .mrow { grid-template-columns: 90px 1fr auto 1fr 24px; }
  .mrow__comp { display: none; }
  .gw-row { grid-template-columns: 60px minmax(0,1fr) 118px 34px; }
  .gw-row__visual { display: none; }
  .live--chat { grid-template-columns: minmax(0,1fr); }
  .live__chat { min-height: 380px; }

  /* homepage */
  :root { --cut: 30px; }
  .hm-hero__inner { grid-template-columns: 1fr; }
  .hm-hero__figure { inset: 0 0 0 34%; opacity: .55; }
  .hm-hero__figure::before { background: linear-gradient(90deg, var(--paper) 0%, rgba(242,243,240,.85) 30%, rgba(242,243,240,.25) 70%); }
  .hm-hero__side { display: none; }
  .hm-matches__grid { grid-template-columns: 1fr; gap: 34px; }
  .hm-matches__rule { height: 1px; width: 100%; }
  .hm-club__grid { grid-template-columns: 1fr; }
  /* В один стовпчик фото стає широким і низьким, і `cover` зрізав низ —
     опорну ногу з м'ячем. Задана пропорція оригіналу означає, що
     обрізати вже нічого: кадр збігається з фото піксель у піксель. */
  .hm-club__photo { min-height: 0; aspect-ratio: 943 / 558; }
  .hm-club__photo::after { background: linear-gradient(180deg, rgba(4,20,12,.2), rgba(0,169,79,.14) 60%, var(--paper) 99%); }
  .hm-club__body { padding-inline: var(--gutter); }
  .hm-club__art { display: none; }
  .hm-media__grid { grid-template-columns: 1fr; }
  .section-head .lead[style*="right"] { text-align: left !important; margin-left: 0 !important; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --header-h: 66px; }
  body { font-size: 15px; }
  .squad-grid, .squad-grid--5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .figure-row { grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--line); }
  .figure { border-bottom: 1px solid var(--line); padding-left: 18px; }
  .figure:first-child { padding-left: 18px; }
  .figure:nth-child(2n) { border-right: 0; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip > div { border-bottom: 1px solid var(--line); }
  .stat-strip > div:nth-child(2n) { border-right: 0; }
  .stat-strip > div:last-child { grid-column: 1 / -1; border-right: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .mtile, .mtile--wide, .mtile--tall, .mtile--hero { grid-column: span 12; aspect-ratio: 16/10; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .split-list__row { grid-template-columns: 1fr; gap: 10px; }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* player cards become a horizontal rail on the homepage teaser */
  .squad-grid--rail {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 10px;
  }
  .squad-grid--rail::-webkit-scrollbar { display: none; }
  .squad-grid--rail > * { flex: 0 0 62vw; scroll-snap-align: start; }

  .mcard__foot { flex-wrap: wrap; }
  .mcard__foot .btn { flex: 1 1 auto; justify-content: center; }
  .mcard__foot .countdown { flex: 1 1 auto; }

  /* gateway stacks: index + title, then meta line */
  .gw-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "idx arrow" "title title" "meta meta";
    gap: 10px 16px;
    padding-block: 24px;
  }
  .gw-row:hover { padding-left: 12px; }
  .gw-row__idx { grid-area: idx; }
  .gw-row__main { grid-area: title; }
  .gw-row__desc { font-size: .813rem; max-width: none; }
  .gw-row__meta { grid-area: meta; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .gw-row__meta b { font-size: 1.35rem; }
  .gw-row__meta span { margin-top: 0; }
  .gw-row__arrow { grid-area: arrow; }

  .vgrid { grid-template-columns: 1fr; gap: 16px; }
  .live__bar { padding: 14px 16px; }

  /* homepage */
  :root { --cut: 22px; }
  .hm-hero { min-height: auto; padding-bottom: 40px; }
  .hm-hero__figure { inset: 0 0 0 12%; opacity: .32; }
  .hm-hero__splash { display: none; }
  .hm-hero__actions { width: 100%; }
  .hm-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hm-fixture__badge { width: 56px; height: 56px; }
  .hm-club__stats { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .hm-tiles { grid-template-columns: repeat(2, 1fr); }
  .hm-rrow { grid-template-columns: 28px 62px 46px 1fr; gap: 10px; padding: 10px; }
  .hm-footer-tag { text-align: left; }

  /* Too narrow for a side panel — the artwork becomes a full background
     with a vertical wash so the copy stays readable over it. */
  .hm-join__bg { inset: 0; width: 100%; }
  /* Full-width panel on mobile: `cover` trims ~700px horizontally, so anything
     short of the right edge pushes the player off-screen entirely. */
  .hm-join__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; }
  .hm-join__bg::after {
    background: linear-gradient(180deg,
      rgba(10,58,32,.70) 0%, rgba(10,58,32,.88) 55%, rgba(10,58,32,.96) 100%);
  }
  .live__bar .btn { flex: 1 1 auto; justify-content: center; }
  .live__chat { min-height: 320px; }
  .section-head { align-items: flex-start; }
  .mrow {
    grid-template-columns: 1fr auto;
    grid-template-areas: "date score" "home score" "away score";
    gap: 8px 16px;
    padding: 18px 14px;
  }
  .mrow__date { grid-area: date; display: flex; align-items: baseline; gap: 10px; }
  .mrow__day { font-size: 1.05rem; }
  .mrow__time { margin-top: 0; }
  .mrow__team--home { grid-area: home; }
  .mrow__team--away { grid-area: away; flex-direction: row; justify-content: flex-start; text-align: left; }
  .mrow__score, .mrow__vs { grid-area: score; align-self: center; justify-self: end; }
  .mrow__chev { display: none; }
  .mrow__name { font-size: .95rem; }
  .dtable th:nth-child(n+4), .dtable td:nth-child(n+4) { display: none; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  /* Шапка панелі: назва й підпис в один рядок не вміщались і не мали де
     переноситись, тому розпирали колонку сітки — сторінка сезону на 320px
     отримувала горизонтальну прокрутку. */
  .panel__head { flex-wrap: wrap; gap: 8px 14px; padding-inline: 18px; }
  .panel { min-width: 0; }
  .tabs { width: 100%; }
  .tab { flex: 1; padding-inline: 12px; }
  .trophy-rail { grid-auto-columns: 82vw; }
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel { max-height: 92vh; }
}

/* Найвужчі телефони. Підпис під назвою клубу з читабельним кеглем (11px)
   уже не влазить у шапку разом із перемикачем мов і бургером — на цій
   ширині він суто декоративний, тож ховаємо його, а не зменшуємо назад
   до нечитабельного розміру. */
@media (max-width: 460px) {
  .header .brand__sub { display: none; }
  .header .brand__crest { width: 36px; height: 36px; }
  .header .brand { gap: 10px; }
  /* Герб + назва + перемикач мов + бургер на 390px не лишають запасу:
     при типових 40px проміжку й 20px полях рядок вилазив на 5px. */
  .header__inner { gap: 14px; padding-inline: 16px; }
  .lang__btn { padding-inline: 9px; }
}

/* Найстаріші вузькі телефони (320px). Сайт розрахований від 390px, але
   на 320 рядок шапки вилазив на 37px — це вже не «трохи тісно», а
   горизонтальна прокрутка всієї сторінки. */
@media (max-width: 360px) {
  .header .brand__name { font-size: .9rem; }
  .header .brand__crest { width: 30px; height: 30px; }
  .header__inner { gap: 10px; padding-inline: 14px; }
  .lang__btn { padding-inline: 7px; }
  .burger { width: 40px; height: 40px; }
  .footer__bottom-links { gap: 14px; }
  /* Трійка цифр під заголовком не влазить у три колонки — стає стовпчиком. */
  .pintro__figs { grid-template-columns: 1fr; }
  /* Довгі однослівні підписи («ПРОПУЩЕНО») не переносяться, тому їм
     зменшується розрядка, а не кегль. */
  .stat__label, .figure__label { letter-spacing: .08em; }
  /* Таблиці на картці гравця не вміщались навіть після приховування
     другорядних колонок — місце звільняють поля, а не кегль тексту. */
  .dtable th, .dtable td { padding-inline: 9px; }
  .panel__body { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}