/* ==========================================================================
   Анкалаев — Гуськов, UFC Abu Dhabi (25.07.2026)
   Одностраничный событийный сайт. Тёмная спортивно-редакционная тема.
   Главный принцип: плеер целиком помещается в первый экран.
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root{
  --bg:#0a0b0d;
  --bg-soft:#101215;
  --bg-panel:#121417;
  --line:#24272c;
  --line-soft:#1b1e22;
  --fg:#f3f4f6;
  --fg-dim:#a8afb8;
  --fg-mute:#7d838c;
  --accent:#e01e2b;
  --accent-soft:#ff4d59;
  --live:#31c46a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --wrap:1280px;
  --hdr:46px;
}

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

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.55 var(--font);
  overflow-x:hidden;
}

h1,h2,h3,h4,p,ul,ol,figure,table,dl{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%;height:auto}

a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;text-decoration-color:#4b525b}
a:hover{text-decoration-color:var(--accent-soft)}

:focus-visible{outline:2px solid #ffd400;outline-offset:2px}

.tabnum{font-variant-numeric:tabular-nums}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:14px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:10px 16px;
  text-decoration:none;font-weight:700;
}
.skip-link:focus{left:0}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 2. Шапка (компактная, 46px) ---------- */
.site-header{
  block-size:var(--hdr);
  border-block-end:1px solid var(--line);
  background:var(--bg-soft);
}
.header-inner{
  block-size:var(--hdr);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.02em;
  white-space:nowrap;
}
.brand-mark{
  inline-size:4px;block-size:18px;background:var(--accent);flex:none;
}
.brand-sub{color:var(--fg-mute);font-weight:400;font-size:12px}
.header-status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);
  white-space:nowrap;
}
.dot{
  inline-size:8px;block-size:8px;border-radius:50%;background:var(--fg-mute);flex:none;
}
.is-live .dot{background:var(--live)}
.is-prematch .dot{background:var(--accent)}
.is-finished .dot{background:var(--fg-mute)}

/* ---------- 3. Первый экран: строка H1 + мета ---------- */
.hero{
  padding-block:8px 6px;
}
.hero h1{
  font-size:clamp(15px,3.4vw,22px);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero h1 .accent{color:var(--accent-soft)}
.hero-meta{
  margin-block-start:3px;
  font-size:clamp(11px,2.6vw,13px);
  color:var(--fg-dim);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  line-height:1.35;
  max-block-size:2.8em;
  overflow:hidden;
}
.hero-meta .sep{color:#3c4149}
.hero-meta strong{color:var(--fg);font-weight:600}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);padding:1px 7px;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
}
.badge.live{border-color:#2c6b45;color:#8ee7b0}
.badge.soon{border-color:#5c2229;color:#ff9aa2}
.badge.done{border-color:var(--line);color:var(--fg-dim)}

/* ---------- 4. Плеер: обязательная полная видимость ---------- */
/* --top-space = шапка + строка H1 + мета + отступы.
   Fallback на vh, затем переопределение на svh (мобильные адресные строки). */
/* Заголовок, плеер и продающая строка живут в одной колонке шириной с плеер —
   иначе на широких экранах текст растягивается на всю страницу и липнет к краям. */
.stage-inner{
  --top-space:142px;
  inline-size:min(100%,calc((100vh - var(--top-space)) * 16 / 9));
  max-inline-size:100%;
  margin-inline:auto;
}
@supports (height:100svh){
  .stage-inner{
    inline-size:min(100%,calc((100svh - var(--top-space)) * 16 / 9));
  }
}
.player-stage{inline-size:100%;margin-inline:auto}
.player-shell{
  position:relative;
  inline-size:100%;
  aspect-ratio:16 / 9;
  background:#050505;
  border:1px solid var(--line);
  overflow:hidden;
}
.player-shell iframe,
.player-shell video,
.player-shell object,
.player-shell embed{
  display:block;
  inline-size:100%;
  block-size:100%;
  border:0;
}
/* Чужой embed часто приходит с жёсткими width/height — растягиваем принудительно.
   Разметка плеера: .player-shell > .video-wrapper > #player.dreams-player */
.player-shell > *,
.player-shell .video-wrapper > *{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
}
/* Текст-заглушка «Плеер загружается…» до инициализации скрипта */
.player-shell .dreams-player{
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-mute);font-size:13px;text-align:center;
}
.player-shell .dreams-player > *{color:initial}
.player-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:16px;
  color:var(--fg-dim);font-size:14px;
  background:
    repeating-linear-gradient(45deg,#0c0d0f 0 12px,#0a0b0d 12px 24px);
}
.player-placeholder b{color:var(--fg);font-size:15px;font-weight:700;letter-spacing:.02em}
.player-placeholder span{max-inline-size:46ch;font-size:12.5px;color:var(--fg-mute)}

/* Продающая строка под плеером */
.promo{
  margin-block-start:8px;
  display:flex;align-items:center;gap:11px;
  border:1px solid #7a2b33;
  background:linear-gradient(90deg,#2a1216 0%,#17191d 70%);
  padding:12px 16px;
  font-size:clamp(15px,1.4vw,18px);line-height:1.4;
  color:#ffffff;font-weight:600;
}
.promo-ico{color:#ffc93c;flex:none;line-height:0}
.promo-ico svg{width:20px;height:20px}
.promo b{color:#ffd84d;font-weight:800;letter-spacing:.02em}
.promo-price{
  color:#ff5c67;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:479px){
  .promo{font-size:14px;padding:10px 11px;gap:8px;align-items:flex-start}
  .promo-ico{padding-block-start:2px}
}

.player-note{
  margin-block-start:6px;
  font-size:12px;color:var(--fg-mute);
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
}
.player-note b{color:var(--fg-dim);font-weight:600}

/* Первый экран не должен уезжать: секция без нижнего отступа.
   Контейнер шире остальной страницы — плееру отдаётся максимум площади. */
.stage-section{padding-block-end:10px;border-block-end:1px solid var(--line-soft)}
.stage-section > .wrap{max-inline-size:1600px}

/* ---------- 5. Навигация по якорям ---------- */
.anchor-nav{
  border-block-end:1px solid var(--line);
  background:var(--bg-soft);
}
.anchor-nav ul{
  display:flex;gap:0;overflow-x:auto;
  scrollbar-width:thin;
}
.anchor-nav li{flex:none}
.anchor-nav a{
  display:block;padding:11px 13px;
  font-size:13px;color:var(--fg-dim);text-decoration:none;
  border-inline-end:1px solid var(--line-soft);
  white-space:nowrap;
}
.anchor-nav a:hover{color:var(--fg);background:#16191d}

/* ---------- 6. Секции ---------- */
.section{
  padding-block:26px;
  border-block-end:1px solid var(--line-soft);
}
.section > .wrap > h2{
  font-size:clamp(18px,3.2vw,24px);
  font-weight:800;letter-spacing:-.01em;
  padding-block-end:8px;
  border-block-end:2px solid var(--accent);
  display:inline-block;
  margin-block-end:14px;
}
.section h3{
  font-size:16px;font-weight:700;margin-block:16px 6px;
}
.section p{margin-block-end:10px;color:#d7dade;max-inline-size:78ch}
.section p.lede{color:var(--fg);font-size:17px}
.muted{color:var(--fg-mute);font-size:13px}

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

.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  padding:16px;
}
.panel h3{margin-block-start:0}

.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.kv dt{color:var(--fg-mute)}
.kv dd{margin:0;font-variant-numeric:tabular-nums;text-align:end}

.bullets li{
  position:relative;padding-inline-start:16px;margin-block-end:7px;
  color:#d7dade;font-size:14.5px;
}
.bullets li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
  inline-size:6px;block-size:2px;background:var(--accent);
}

/* ---------- 7. Флаги (CSS, без картинок) ---------- */
.flag{
  display:inline-block;inline-size:20px;block-size:14px;
  border:1px solid #2b2f35;vertical-align:-2px;flex:none;
}
.flag--lg{inline-size:28px;block-size:19px}
.flag-ru{
  background:linear-gradient(to bottom,#ffffff 0 33.33%,#0039a6 33.33% 66.66%,#d52b1e 66.66% 100%);
}
.flag-uz{
  background:linear-gradient(to bottom,
    #0099b5 0 30%,#ce1126 30% 33%,#ffffff 33% 67%,#ce1126 67% 70%,#1eb53a 70% 100%);
}

/* ---------- 8. Карточки бойцов ---------- */
.fighter-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-block-end:10px;border-block-end:1px solid var(--line);
}
.fighter-head h2,.fighter-head h3{margin:0;border:0}
.rank{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);padding:2px 7px;color:var(--fg-dim);
}
.rank.champ{border-color:#8a6b12;color:#f0c14b}
.record{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}

.figure-slot{
  aspect-ratio:4 / 5;
  border:1px dashed var(--line);
  background:repeating-linear-gradient(45deg,#0c0d0f 0 10px,#0a0b0d 10px 20px);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-mute);font-size:12px;text-align:center;padding:10px;
}

/* ---------- 9. Таблицы ---------- */
.table-scroll{overflow-x:auto}
table{
  inline-size:100%;
  border-collapse:collapse;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
caption{
  text-align:start;color:var(--fg-mute);font-size:13px;
  padding-block-end:8px;
}
th,td{
  border:1px solid var(--line);
  padding:7px 9px;
  text-align:start;
  vertical-align:top;
}
thead th{
  background:var(--bg-panel);font-size:12.5px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:600;
}
tbody th{background:#0e1013;font-weight:600;color:var(--fg-dim);inline-size:34%}
td{color:#e4e6e9}
.lead-mark{
  display:inline-block;margin-inline-start:6px;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-soft);border:1px solid #5c2229;padding:0 5px;
  font-variant-numeric:normal;
}
.na{color:var(--fg-mute)}

/* Кард */
.bout{
  display:grid;
  grid-template-columns:1fr;
  gap:2px 12px;
  border:1px solid var(--line);
  border-block-end:0;
  padding:10px 12px;
  background:var(--bg-panel);
}
.bout:last-child{border-block-end:1px solid var(--line)}
.bout-main{background:#15181c}
.bout-names{font-weight:700;font-size:15px}
.bout-meta{
  font-size:12.5px;color:var(--fg-mute);
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
}
.bout-tag{
  border:1px solid var(--line);padding:0 6px;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;
}
.bout-tag.title{border-color:#5c2229;color:#ff9aa2}
.bout-tag.cancel{border-color:#5c2229;color:#ff9aa2;text-decoration:line-through}
.bout-result{font-size:13px;color:#d7dade}
/* Отменённый бой приглушаем явными цветами, а не opacity:
   прозрачность роняет контраст ниже нормы WCAG AA. */
.bout.is-cancelled{background:#0e1013}
.bout.is-cancelled .bout-names{color:var(--fg-dim)}
.bout.is-cancelled .bout-meta{color:var(--fg-dim)}
.bout.is-cancelled .bout-names{text-decoration:line-through;text-decoration-color:#7d3a40}
@media (min-width:720px){
  .bout{grid-template-columns:1fr auto;align-items:center}
  .bout-meta{justify-content:flex-end}
}

/* Расписание */
.schedule{border:1px solid var(--line)}
.schedule-row{
  display:grid;grid-template-columns:1fr;
  gap:2px 16px;padding:11px 12px;
  border-block-end:1px solid var(--line-soft);
}
.schedule-row:last-child{border-block-end:0}
.schedule-row b{font-size:15px}
.schedule-times{font-variant-numeric:tabular-nums;color:var(--fg-dim);font-size:14px}
@media (min-width:640px){
  .schedule-row{grid-template-columns:1fr auto;align-items:baseline}
  .schedule-times{text-align:end}
}

/* Таймер */
.countdown{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  margin-block:6px 12px;
}
.cd-unit{
  min-inline-size:64px;border:1px solid var(--line);background:var(--bg-panel);
  padding:8px 10px;text-align:center;
}
.cd-num{
  display:block;font-size:26px;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.cd-lbl{display:block;font-size:11px;color:var(--fg-mute);letter-spacing:.05em;text-transform:uppercase}

/* FAQ */
.faq-item{border-block-start:1px solid var(--line);padding-block:12px}
.faq-item:first-child{border-block-start:0}
.faq-item h3{margin-block:0 5px;font-size:15.5px}
.faq-item p{margin:0;color:#d7dade;font-size:14.5px}

/* Источники */
.sources li{
  padding-block:8px;border-block-start:1px solid var(--line-soft);
  font-size:13.5px;color:var(--fg-dim);
}
.sources li:first-child{border-block-start:0}
.sources a{color:#cfd3d8}

.legal{color:var(--fg-mute);font-size:13px}
.legal p{color:var(--fg-mute);font-size:13px;max-inline-size:90ch}

.updated{
  font-size:13px;color:var(--fg-dim);
  border-inline-start:2px solid var(--accent);padding-inline-start:10px;
}

.site-footer{
  padding-block:18px 26px;
  color:var(--fg-mute);font-size:12.5px;
}
.site-footer p{margin-block-end:6px;color:var(--fg-mute);font-size:12.5px}

/* Ленивая подгрузка тяжёлых блоков не нужна — контент текстовый.
   Отключаем анимации для тех, кто их не хочет. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- 10. Адаптив первого экрана ---------- */
/* Узкие телефоны: шапка ниже, H1 меньше — верхний блок ужимается */
@media (max-width:479px){
  :root{--hdr:42px}
  .stage-inner{--top-space:120px}
  .wrap{padding-inline:10px}
  .hero{padding-block:6px 4px}
  .hero-meta{gap:5px}
  .header-status{font-size:11px}
}
/* Планшеты и десктоп: места больше, оставляем запас под нижнюю подпись */
@media (min-width:480px){
  .stage-inner{--top-space:150px}
}
@media (min-width:1024px){
  .stage-inner{--top-space:158px}
}
/* Низкие ноутбуки (1366×768 и подобные) — самый узкий случай по высоте */
@media (min-width:1024px) and (max-height:800px){
  .stage-inner{--top-space:150px}
}
/* Ландшафтные телефоны */
@media (max-height:480px) and (orientation:landscape){
  :root{--hdr:38px}
  .stage-inner{--top-space:104px}
  .hero h1{font-size:15px}
  .hero-meta{font-size:11px}
}

/* Счётчик посещаемости в футере */
.counter{margin-block-start:10px;line-height:0}
.counter img{display:inline-block}