/* ============================================================
   duel-casino-xxx.com
   Palette taken from the live Duel project (duel casino site/styles.css :root).
   Blue carries every action, grey carries everything quiet. Red exists in the
   upstream palette but is marked "use very rarely" and is unused there, so it is
   unused here as well.
   ============================================================ */

:root {
  /* Duel palette */
  --bg-site: #0c102b;
  --bg-header: #070b23;
  --bg-area: #121731;
  --bg-block-dark: #181e3c;
  --bg-block-light: #1f2546;
  --bg-button-dark: #343c64;
  --bg-button-dark-hover: #47507c;
  --bg-button-blue: #4558ff;
  --bg-button-blue-hover: #5e6eff;
  --base-color: #5e6eff;
  --link-color: #5e6eff;
  --text-primary: #b1b3cf;
  --text-white: #ffffff;
  --text-icon: #767faa;
  --color-green: #6de8bf;
  --color-orange: #e38b06;
  --color-red: #a11236;
  --bg-extra-blue: #4558ff4f;
  --bg-extra-green: #6de8bf1c;
  --bg-extra-orange: #db85041c;

  /* Accents stay inside the Duel palette: blue for action, grey for everything quiet.
     --color-red is defined upstream but marked "use very rarely" and is unused there, so it is unused here too. */
  --accent: #5e6eff;
  --accent-soft: #4558ff2e;
  --muted-chip: #232a4d;

  --container-width: 1200px;
  --container-padding: 20px;
  --border-radius: 10px;
  --transition-speed: 0.2s;
  --header-height: 70px;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-site);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--text-white); line-height: 1.2; margin: 0 0 .6em; font-weight: 800; }
h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.02em; }
h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.01em; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 1.1em; }
a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
strong { color: var(--text-white); font-weight: 700; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .45em; }

.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bg-button-blue); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--border-radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 22px; border-radius: var(--border-radius);
  font-weight: 700; font-size: 15px; line-height: 1; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
}
.btn:hover { text-decoration: none; }
.btn--play { background: var(--bg-button-blue); color: #fff; }
.btn--play:hover { background: var(--bg-button-blue-hover); }
.btn--ghost { background: transparent; color: var(--text-white); border-color: var(--bg-button-dark); }
.btn--ghost:hover { background: var(--bg-button-dark); }
.btn--compact { width: 100%; padding: 10px 12px; font-size: 14px; }
.table-card__play { margin: 14px 0 0; }
.table-card__body > .table-card__play { margin-top: auto; padding-top: 14px; }
.guest__play { margin-top: auto; }
.btn--dark { background: var(--bg-button-dark); color: #fff; }
.btn--dark:hover { background: var(--bg-button-dark-hover); }

.badge-18 {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 8px; border-radius: 6px;
  background: var(--muted-chip); color: var(--text-icon);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-header);
  border-bottom: 1px solid #ffffff0f;
}
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-height); }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text-white); font-weight: 900; font-size: 19px; letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo__mark { color: var(--base-color); display: inline-flex; }
.logo__accent { color: var(--base-color); }
.logo__xxx { color: var(--text-icon); margin-left: 4px; }
.logo--footer { font-size: 21px; margin-bottom: 14px; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* The global li margin-bottom applies to prose lists, not to UI lists. Left in, it
   adds a phantom 7px under every nav item and lifts the whole menu off centre. */
.site-nav__list li, .site-nav__sub li, .crumbs__list li, .post-strip__list li { margin: 0; }
/* Flex, not inline-block: an inline-block link sits on the text baseline of its
   li and ends up a few px above the true centre of the header. */
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__item > a {
  position: relative; display: flex; align-items: center;
  min-height: 40px; padding: 0 12px; border-radius: 8px;
  color: var(--text-primary); font-size: 15px; font-weight: 600; line-height: 1.2;
}
.site-nav__item > a:hover { color: var(--text-white); background: #ffffff0a; text-decoration: none; }
.site-nav__item.is-current > a { color: var(--text-white); }
/* Absolute, so marking the current tab never makes it taller than its neighbours. */
.site-nav__item.is-current > a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px;
  height: 2px; background: var(--text-icon); border-radius: 2px;
}

.site-nav__expand { display: none; }
.site-nav__item--has-children > a { padding-right: 26px; }
.site-nav__item--has-children::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px;
  border-right: 2px solid var(--text-icon); border-bottom: 2px solid var(--text-icon);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.site-nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px;
  background: var(--bg-block-light); border: 1px solid #ffffff12; border-radius: var(--border-radius);
  padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
  box-shadow: 0 18px 40px #00000059;
}
.site-nav__item--has-children:hover .site-nav__sub,
.site-nav__item--has-children:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__sub a { display: block; padding: 9px 12px; border-radius: 7px; color: var(--text-primary); font-size: 15px; }
.site-nav__sub a:hover { background: #ffffff0d; color: var(--text-white); text-decoration: none; }

.site-nav__cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle { display: none; }
.nav-scrim { display: none; }
.site-nav__close { display: none; }
/* Desktop already carries Play inside the nav, so the bar copy stays hidden there. */
.site-header__play { display: none; }

/* ---------- layout ---------- */
main { display: block; }
.section { padding: 56px 0; }
.section--tight {
    padding: 40px 0;
}
.section--alt { background: var(--bg-area); }
/* A block heading always breathes above itself, whatever block happens to precede it.
   Listing the allowed neighbours meant every new block type broke the gap again. */
.section__title { margin-top: 38px; margin-bottom: 8px; }
.section__title:first-child { margin-top: 0; }
/* Подраздел ленты: он живёт под общим H2, поэтому и по размеру ниже его. */
.group__title { font-size: 24px; margin-top: 40px; }
/* Ряд карточек-ссылок отбивается сверху той же линией, что и герой снизу. */
.section__title--divided { border-top: 2px solid #ffffff14; padding-top: 34px; margin-top: 44px; }
.section__title--divided:first-child,
.section__lead + .section__title--divided,
/* На главной разделы помечает черта слева у заголовка, верхняя линия там лишняя. */
.page--home .section__title--divided { margin-top: 44px; padding-top: 0; border-top: 0; }
/* На странице игры между подписью автора и лидом стоит блок с плитками,
   поэтому общее правило до лида не достаёт и линию рисуем отдельно. */
.game-page .section__lead { border-bottom: 2px solid #ffffff14; padding-bottom: 30px; margin-bottom: 34px; }
.section__lead { max-width: 760px; font-size: 18px; }

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }

.crumbs { padding: 18px 0 0; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.crumbs__item + .crumbs__item::before { content: '/'; color: var(--text-icon); margin-right: 6px; }
.crumbs__item span { color: var(--text-icon); }

/* ---------- hero ---------- */
.hero {
    position: relative;
    padding: 25px 0 40px;
    background: radial-gradient(1000px 420px at 12% -10%, #4558ff26, transparent 60%), var(--bg-area);
    border-bottom: 1px solid #ffffff0d;
}
.hero__inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--muted-chip); color: var(--text-icon); font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.hero__lead { font-size: 19px; max-width: 620px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__actions .btn { padding: 15px 26px; font-size: 16px; }
.hero__note { margin-top: 14px; font-size: 14px; color: var(--text-icon); }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat { background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius); padding: 18px; }
.stat__value { display: block; color: var(--text-white); font-size: 25px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.stat__value--green { color: var(--color-green); }
.stat__value--accent { color: var(--accent); }
.stat__label { display: block; margin-top: 6px; font-size: 13px; color: var(--text-icon); }

/* ---------- video ---------- */
.video { margin: 0 0 8px; }
.video--wide { margin: 0; }
.video__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--border-radius); background: var(--bg-block-dark);
  border: 1px solid #ffffff12;
}
.video__thumb { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #0c102b4d; border: 0; color: var(--accent); cursor: pointer;
  transition: background var(--transition-speed);
}
.video__play:hover { background: #0c102b26; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__frame--pending { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #181e3c, #181e3c 14px, #1b2143 14px, #1b2143 28px); border-style: dashed; border-color: #ffffff1f; }
.video__pending { text-align: center; padding: 24px; }
.video__pending-icon { color: var(--text-icon); display: inline-flex; }
.video__pending-title { margin: 8px 0 4px; color: var(--text-white); font-weight: 700; }
.video__pending-text { margin: 0; font-size: 14px; color: var(--text-icon); max-width: 420px; }
.video__caption { margin-top: 10px; font-size: 14px; color: var(--text-icon); }

/* ---------- cards ---------- */
.cards { display: grid; gap: 16px; margin: 26px 0; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius); padding: 22px; }
.card__icon { display: inline-flex; margin-bottom: 12px; color: var(--base-color); }
.card__title { font-size: 17px; margin-bottom: 8px; }
/* A stat card is a caption plus a figure, not a section, so neither line is a heading. */
.card__label { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-icon); }
.card__figure { margin: 0 0 8px; color: var(--text-white); font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.card__text { margin: 0; font-size: 15px; }

/* Fits three or four cards without a separate class per case. */
.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 24px 0 0; }
.link-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius);
  color: var(--text-primary);
}
.link-card:hover { background: var(--bg-block-light); border-color: #ffffff1f; text-decoration: none; }
.link-card__title { color: var(--text-white); font-weight: 700; font-size: 17px; }
.link-card__text { font-size: 14px; }
/* A bare arrow did not read as clickable until you hovered it, so the cards carry a
   visible label. */
.link-card__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 4px;
  color: var(--base-color); font-weight: 700; font-size: 14px;
}
/* text-decoration set on a parent is painted by that parent and a child cannot cancel
   it, so the label carries the underline and the arrow stays clean. */
.link-card__arrow { transition: transform var(--transition-speed); }
.link-card:hover .link-card__label { text-decoration: underline; }
.link-card:hover .link-card__arrow { transform: translateX(3px); }

/* ---------- games ---------- */
.games { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 28px 0; }
.game {
  display: flex; flex-direction: column; padding: 14px; text-align: center;
  background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius);
  color: var(--text-primary);
}
.game:hover { background: var(--bg-block-light); text-decoration: none; }
/* Source tiles ship at different heights. They are centre cropped to one frame on disk,
   and cover here as well, so no tile ever letterboxes. */
.game__img { width: 100%; aspect-ratio: 360 / 468; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.game__name { display: block; color: var(--text-white); font-weight: 700; font-size: 15px; }
.game__rtp { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--bg-extra-green); color: var(--color-green); }
.game__rtp--partial { background: var(--bg-extra-orange); color: var(--color-orange); }
/* The tile goes to our page about the game, so it has to say so. */
.game__go { display: block; margin-top: 8px; color: var(--base-color); font-size: 13px; font-weight: 700; }
.game__go span { display: inline-block; margin-left: 5px; transition: transform var(--transition-speed); }
.game:hover .game__go span { transform: translateX(3px); }
.game:hover { border-color: var(--base-color); }

/* ---------- callout / spec / faq ---------- */
/* Editorial aside. No left stripe and no tinted block: every callout is the same
   neutral card, and only the short rule on top plus the kicker change colour. */
.callout { position: relative; margin: 30px 0; padding: 24px 26px; border-radius: 12px; background: var(--bg-block-dark); border: 1px solid #ffffff14; }
.callout::before { content: ''; position: absolute; left: 26px; top: -1px; width: 44px; height: 2px; border-radius: 0 0 2px 2px; background: var(--base-color); }
.callout__kicker { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-icon); }
.callout__title { font-size: 18px; margin-bottom: 8px; }
.callout__body p:last-child { margin-bottom: 0; }
.callout--warn::before { background: var(--color-orange); }
.callout--warn .callout__kicker { color: var(--color-orange); }
.callout--good::before { background: var(--color-green); }
.callout--good .callout__kicker { color: var(--color-green); }

.spec { overflow-x: auto; margin: 26px 0; }
.spec__table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.spec__caption { text-align: left; color: var(--text-white); font-weight: 700; padding-bottom: 10px; }
.spec__table th, .spec__table td { padding: 12px 14px; border-bottom: 1px solid #ffffff12; text-align: left; vertical-align: top; }
.spec__table th { color: var(--text-icon); font-weight: 600; width: 42%; }
.spec__table td { color: var(--text-white); }

.faq { margin: 34px 0 0; }
.faq__heading { margin-bottom: 14px; }
.faq__item { background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius); margin-bottom: 10px; padding: 0 18px; }
.faq__q { cursor: pointer; padding: 16px 0; color: var(--text-white); font-weight: 700; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; float: right; color: var(--base-color); font-weight: 700; }
.faq__item[open] .faq__q::after { content: '\2212'; }
.faq__a { padding-bottom: 4px; }
.faq__a p:last-child { margin-bottom: 16px; }

/* ---------- author note + cta ---------- */
.author-note { margin: 44px 0 38px; padding: 26px; border-radius: var(--border-radius); background: var(--bg-block-dark); border: 1px solid #ffffff0f; }
.author-note__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.author-note__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; border: 1px solid #ffffff1f; }
.author-note__avatar--letter { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-button-blue); color: #fff; font-weight: 800; }
.author-note__label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-icon); }
.author-note__name { margin: 0; color: var(--text-white); font-weight: 700; }
.author-note__name span { display: block; font-weight: 400; font-size: 13px; color: var(--text-icon); }
.author-note__body p:last-child { margin-bottom: 0; }

.cta { padding: 52px 0; }
.cta__inner { text-align: center; padding: 40px 24px; border-radius: 14px; background: linear-gradient(140deg, #1f2546, #181e3c 60%); border: 1px solid #ffffff14; }
.cta__title { margin-bottom: 10px; }
.cta__text { max-width: 620px; margin: 0 auto 22px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta__small { margin: 16px 0 0; font-size: 13px; color: var(--text-icon); }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-header); border-top: 1px solid #ffffff0f; margin-top: 20px; }
/* Sits directly under the header now, so it keeps the bottom rule only. */
.post-strip {
    background: var(--bg-block-dark);
    padding: 20px 0;
    border-bottom: 1px solid #000000;
}
/* One row, always: "Straight to a story:" on the left, pills after it. The list never
   wraps; if the pills do not fit they scroll sideways inside their own track, so the
   page itself never gains a horizontal scrollbar. */
.post-strip__inner { display: flex; align-items: center; flex-wrap: nowrap; gap: 14px; }
.post-strip__title { flex: 0 0 auto; margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-icon); white-space: nowrap; }
/* The pills run as a loop. The list is rendered twice and the track slides by exactly
   half its width, so the seam is invisible and the motion never jumps. */
.post-strip__viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.post-strip__track { display: flex; width: max-content; gap: 8px; animation: post-strip-run 46s linear infinite; }
.post-strip__list { display: flex; flex-wrap: nowrap; gap: 8px; list-style: none; margin: 0; padding: 2px 0; }
.post-strip__list a { white-space: nowrap; }

@keyframes post-strip-run { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }

/* Stop while somebody is reading or tabbing through it. */
.post-strip:hover .post-strip__track,
.post-strip__track:focus-within { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .post-strip__track { animation: none; }
  .post-strip__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.post-strip__list a { display: inline-block; padding: 8px 13px; border-radius: 999px; background: #0c102b; color: #b1b3cf; font-size: 14px; }
.post-strip__list a:hover { background: var(--bg-button-dark); color: var(--text-white); text-decoration: none; }

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 100px;
    padding-top: 44px;
    padding-bottom: 34px;
}
.footer-col__title { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-icon); margin-bottom: 14px; }
.footer-col__list { list-style: none; margin: 0 0 16px; padding: 0; }
.footer-col__list a { color: var(--text-primary); font-size: 15px; }
.footer-col__list a:hover { color: var(--text-white); }
.footer-col__text { font-size: 14px; }
.footer-col__text--muted { color: var(--text-icon); font-size: 13px; }

.site-footer__bar { border-top: 1px solid #ffffff0f; padding: 18px 0; }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--text-icon); }
.site-footer__bar-inner p { margin: 0; }
/* Needs the parent in the selector: `.site-footer__bar-inner p { margin: 0 }` above is
   more specific than a lone class and was cancelling the auto margin. */
.site-footer__bar-inner .site-footer__author { margin-left: auto; text-align: right; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .games { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .link-cards { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  /* Play must be reachable without opening the menu, so it sits in the bar as well
     as inside the drawer. */
  .site-header__play { display: inline-flex; margin-left: auto; padding: 0 26px; min-height: 40px; font-size: 14px; }
  .nav-toggle {
    /* justify-content matters here: the box is held open by min-width, the bars are only
       16px wide, so without it they sit against the left padding instead of the centre. */
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: transparent; border: 1px solid var(--bg-button-dark); border-radius: 8px;
    color: var(--text-white); padding: 0 13px; min-height: 44px; min-width: 44px;
    font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .nav-toggle__bars i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

  /* Drawer is fixed and scrolls on its own. The header keeps no overflow rule and no
     backdrop-filter, because either one turns position:fixed children into a mess. */
  .site-nav {
    position: fixed; top: var(--header-height); right: 0; bottom: 0; width: min(340px, 86vw);
    margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-header); border-left: 1px solid #ffffff12;
    padding: 14px 16px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform var(--transition-speed) ease-out;
    z-index: 120;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav__close {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-end;
    min-height: 44px; padding: 0 12px; margin-bottom: 6px;
    background: transparent; border: 1px solid var(--bg-button-dark); border-radius: 8px;
    color: var(--text-icon); font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .site-nav__close:hover { color: var(--text-white); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__item > a { min-height: 48px; padding: 0 12px; font-size: 16px; }
  .site-nav__item.is-current > a::after { display: none; }
  .site-nav__item--has-children::after { display: none; }
  /* In the drawer the row wraps: link and toggle share the first line, the submenu
     takes the full width underneath. The item is a flex row on desktop, so without
     wrapping the link gets squeezed to a few pixels and breaks letter by letter. */
  .site-nav__item { flex-wrap: wrap; }
  .site-nav__item > a { flex: 1 1 auto; min-width: 0; padding-right: 12px; }
  .site-nav__expand {
    display: inline-flex; align-items: center; justify-content: center;
    position: static; flex: 0 0 44px; width: 44px; height: 44px;
    background: transparent; border: 0; color: var(--text-icon); cursor: pointer;
  }
  .site-nav__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
  /* A lone hairline on the left did not read as "these belong to the item above".
     The open group gets its own tinted panel and each child a small marker instead. */
  .site-nav__item--has-children:has(.site-nav__sub.is-open) {
    background: #ffffff08; border-radius: 10px; margin: 2px 0;
  }
  .site-nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; background: transparent; border: 0;
    flex: 1 1 100%; width: 100%; min-width: 0;
    padding: 2px 8px 10px; margin: 0;
  }
  .site-nav__sub.is-open { display: block; }
  .site-nav__sub a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; font-size: 15px; color: var(--text-primary);
  }
  .site-nav__sub a::before {
    content: ''; flex: 0 0 14px; height: 1px; background: var(--text-icon); opacity: .6;
  }
  .site-nav__sub a:hover::before,
  .site-nav__sub a[aria-current]::before { background: var(--base-color); opacity: 1; }
  .site-nav__expand[aria-expanded="true"] { color: var(--text-white); }
  /* Play lives in the header bar on mobile, so the drawer does not repeat it. */
  .site-nav__cta { margin-top: 16px; }
  .site-nav__cta .btn--play { display: none; }

  /* The scrim must sit BELOW the header. The header is sticky with z-index 100, which
     opens its own stacking context, so the drawer inside it cannot rise above a scrim
     that lives in the body. At 110 the scrim painted over the drawer and greyed it out. */
  .nav-scrim { display: block; position: fixed; inset: var(--header-height) 0 0; background: #05081ab8; z-index: 90; }
  .nav-scrim[hidden] { display: none; }

  body.nav-open { overflow: hidden; }

  .site-footer__bar-inner .site-footer__author { margin-left: 0; text-align: left; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 40px 0; }
  .games { grid-template-columns: repeat(2, 1fr); }
  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .link-cards { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 38px 0 34px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- screenshots ---------- */
.shots { margin: 38px 0; }
.shots__title { margin-bottom: 6px; }
.shots__note { color: var(--text-icon); font-size: 15px; max-width: 700px; }
.shots__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.shot {
  display: block; padding: 0; border: 1px solid #ffffff12; border-radius: var(--border-radius);
  overflow: hidden; background: var(--bg-block-dark); cursor: zoom-in; aspect-ratio: 16 / 9;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot:hover { border-color: var(--base-color); }
/* A cropped panel from the interface is not 16:9 and must not be cropped again. */
.shot--native { aspect-ratio: auto; }
.shot--native img { height: auto; object-fit: contain; }
.shot--pending {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; cursor: default; border-style: dashed; border-color: #ffffff1f;
  background: repeating-linear-gradient(135deg, #181e3c, #181e3c 14px, #1b2143 14px, #1b2143 28px);
  color: var(--text-icon); font-size: 13px; line-height: 1.4;
}
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: #05081ae6; padding: 24px; border: 0;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1200px, 94vw); max-height: 88vh; border-radius: var(--border-radius); }
.lightbox__close {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-block-light); color: var(--text-white); border: 0; font-size: 20px; cursor: pointer;
}
@media (max-width: 860px) { .shots__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .shots__grid { grid-template-columns: 1fr; } }

/* ---------- text with a visual beside it ----------
   Long prose is capped at a readable measure, which leaves the right side of a
   1200px container empty. Where we have a frame to show, it goes here instead. */
.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 34px; align-items: start; margin: 26px 0; }
.split .prose { max-width: none; margin: 0; }
.split__media { position: sticky; top: calc(var(--header-height) + 20px); }
.split__media .shot, .split__media .video { margin: 0; }
.split__media .shot { width: 100%; }
.split__caption { margin: 10px 0 0; font-size: 13px; color: var(--text-icon); }
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 22px; }
  .split__media { position: static; }
}

/* ---------- small phones (320 and up) ----------
   At 320 the header ran 8px past the viewport: logo + 24px gap + the labelled
   toggle did not fit. Tighten the gutter, shrink the logo, drop the word on the
   button. Everything else already reflows. */
@media (max-width: 400px) {
  :root { --container-padding: 14px; }

  .site-header__inner { gap: 8px; }
  /* At 320 the bar carries logo + Play + burger. The mark is the first thing to go:
     the wordmark alone still identifies the site. */
  .logo { font-size: 16px; gap: 0; }
  .logo__mark { display: none; }
  .site-header__play { padding: 0 20px; min-height: 40px; font-size: 13px; }
  .logo { font-size: 15px; }

  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* The word Menu is hidden below 400px, so the box holds only the 16px of bars.
     Zero padding plus justify-content centre puts them in the middle of the square. */
  .nav-toggle { padding: 0; }

  .site-nav { width: min(300px, 92vw); }

  h1 { font-size: 27px; }
  h2 { font-size: 22px; }
  .stat__value { font-size: 21px; }
  .stat { padding: 14px; }
  .stat-grid { gap: 10px; }
  .hero__lead, .section__lead { font-size: 16px; }

  .callout { padding: 20px 18px; }
  .callout::before { left: 18px; }
  .faq__item { padding: 0 14px; }
  .card { padding: 18px; }
  .link-card { padding: 16px; }
  .cta__inner { padding: 28px 16px; }
  .author-note { padding: 20px 18px; }
  .post-strip__list a { font-size: 13px; padding: 7px 11px; }
}

/* Long unbroken tokens (handles, urls, hashes) must never push the page wide. */
body { overflow-wrap: anywhere; }
.spec__table td, .link-card__text, .shot--pending span { overflow-wrap: anywhere; }


/* ---------- reading width ----------
   Article pages run at 1100 inside the 1200 shell. Heading, text, cards, tables and
   callouts all share one edge, so there is no dead strip on the right. Text set at
   the full 1100 runs long, so the body size steps up on wide screens and the heavy
   explainer blocks use the two column split, which brings the measure back down. */
.container--reading { max-width: 1100px; }
.container--reading .prose,
.container--reading .section__lead { max-width: none; }
.container--reading .cards--3 { grid-template-columns: repeat(3, 1fr); }
.container--reading .link-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Text and the frame beside it must start on the same line. */
.split .prose > :first-child,
.split__media > :first-child { margin-top: 0; }
.split { align-items: start; }

@media (min-width: 1025px) {
  .container--reading .prose,
  .container--reading > .section__lead { font-size: 18px; line-height: 1.7; }
}
@media (max-width: 1024px) {
  .container--reading .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .container--reading .cards--3 { grid-template-columns: 1fr; }
}


/* A set of one or two frames should not sit in a third of the row. */
.shots__grid--1 { grid-template-columns: minmax(0, 620px); }
.shots__grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Only the hero reel runs full width. Secondary clips stay at a sane size. */
.video:not(.video--wide) { max-width: 720px; }
.split__media .video { max-width: none; }

/* ---------- reserved slots ----------
   A slot waiting on a file shows the demo still under a mask with a visible tag,
   so it reads as "a picture belongs here" instead of as a hole. */
.slot-mask {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center;
  background: linear-gradient(180deg, #0c102bd9, #0c102bf2);
}
.slot-mask__tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--bg-button-blue); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.slot-mask__text { margin: 0; max-width: 460px; color: var(--text-primary); font-size: 14px; line-height: 1.45; }

.video__frame--pending { position: relative; background: var(--bg-block-dark); border-style: solid; border-color: #ffffff12; }
.video__frame--pending .video__thumb { width: 100%; height: 100%; object-fit: cover; opacity: .5; }

.shot--pending { position: relative; padding: 0; border-style: solid; border-color: #ffffff12; background: var(--bg-block-dark); overflow: hidden; }
.shot--pending img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.shot--pending .slot-mask__text { font-size: 12.5px; }
@media (max-width: 620px) { .slot-mask__text { font-size: 13px; } }

/* ---------- table cards ----------
   Six stacked full width clips turned the page into a column of identical
   placeholders. Two up cards keep the same content scannable. */
/* Снизу сетки роликов нужен воздух: иначе она упирается в следующий заголовок. */
.tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 26px 0 44px; }
/* Extra full cuts under the main reel. One cut centres itself instead of hanging in a
   half empty row; two sit side by side as before. */
.tables--pair { margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(0, 520px)); justify-content: center; }
.table-card { display: flex; flex-direction: column; background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: 12px; overflow: hidden; }
.table-card .video { margin: 0; max-width: none; }
.table-card .video__frame { border: 0; border-radius: 0; }
/* Тело карточки тянется, поэтому кнопка внизу стоит на одной линии у всех карточек ряда. */
.table-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 22px; }
.table-card__title { font-size: 18px; margin-bottom: 10px; }
.table-card__text { margin: 0; font-size: 15px; }
.verdict {
  display: inline-block; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--muted-chip); color: var(--text-icon);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
@media (max-width: 760px) { .tables { grid-template-columns: 1fr; } }

/* ---------- hero banner ----------
   Banner on the right, the four figures sit directly under it as pills. */
.hero__media { display: flex; flex-direction: column; gap: 12px; }
/* The artwork carries its own glow and transparency, so it sits on the page with no
   panel, no border and no padding behind it. */
.hero__banner { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.hero__media .stat-grid { margin: 0; }
.hero__media .stat {
    padding: 8px 12px;
    border-radius: 10px;
    text-align: center;
}
.hero__media .stat__value { font-size: 22px; }
.hero__media .stat__label { font-size: 12px; line-height: 1.35; }
@media (max-width: 1024px) {
  .hero__media .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .hero__media .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__banner { max-width: 320px; }
}

/* ---------- byline ---------- */
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: -6px 0 26px; color: var(--text-icon); font-size: 14px; }
.byline__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #ffffff1f; }
.byline__sep { opacity: .5; }
.table-card__more { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.table-card__more a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.table-card__more a:hover .table-card__more-label { text-decoration: underline; }
.table-card__more a:hover .table-card__more-arrow { transform: translateX(3px); }
.table-card__more-arrow { transition: transform var(--transition-speed); }
.table-card__title { margin-bottom: 10px; }
.table-card__title a { color: var(--text-white); }
.table-card__title a:hover { color: var(--base-color); text-decoration: none; }

/* ---------- author page ---------- */
.author-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: center; margin: 0 0 30px; }
.author-hero__photo { width: 100%; border-radius: 14px; border: 1px solid #ffffff14; }
.author-hero__role { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-icon); }
.author-hero__lead { margin: 0; font-size: 18px; }
@media (max-width: 700px) {
  .author-hero { grid-template-columns: 1fr; gap: 20px; }
  .author-hero__photo { max-width: 220px; }
}

/* Responsible gambling line and the 18+ badge live with the site description. */
.footer-col__rg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--text-icon);
}
.footer-col__rg .badge-18 { flex: 0 0 auto; }

/* Homepage only: the closing CTA sits flat on the page, without the gradient panel. */
.page--home .cta__inner {
    background: none;
}

@media (max-width: 620px) {
  .post-strip__inner { gap: 10px; }
}


/* A section heading that follows a finished block needs air above it. Without this
   "Related" sits flush against the bottom edge of the author card. */

/* ---------- definition list ----------
   Name plus description is a definition list, not a run of headings. */
/* ---------- Duel Originals lineup ----------
   A definition list laid out as rows: cover, name and return on the left, the note in
   the middle, a play link on the right. Full content width, no dead strip. */
.lineup { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); margin: 26px 0 0; }

.lineup__name,
.lineup__desc {
  border-top: 1px solid #ffffff12;
  transition: background var(--transition-speed);
}
.lineup:hover .lineup__name,
.lineup:hover .lineup__desc { background: transparent; }

.lineup__name {
  grid-column: 1; display: flex; align-items: center; gap: 13px;
  padding: 14px 20px 14px 14px; border-radius: 10px 0 0 10px;
  color: var(--text-white); font-weight: 700; font-size: 17px;
}
.lineup__desc {
  grid-column: 2; display: flex; align-items: center; gap: 20px; margin: 0;
  padding: 14px 14px 14px 0; border-radius: 0 10px 10px 0;
}
.lineup__text { flex: 1 1 auto; min-width: 0; }

.lineup__icon {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 9px; object-fit: cover;
  border: 1px solid #ffffff14; transition: transform var(--transition-speed);
}
.lineup__label { min-width: 0; }

.lineup__rtp {
  margin-left: auto; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  background: var(--bg-extra-green); color: var(--color-green);
}
.lineup__rtp--partial { background: var(--bg-extra-orange); color: var(--color-orange); }

.lineup__play {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--muted-chip); color: var(--text-primary);
  font-size: 13px; font-weight: 700;
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
}
.lineup__play:hover { background: var(--bg-button-blue); color: #fff; text-decoration: none; }

/* Highlight the whole row on hover, and reveal its play link. */
.lineup__name:hover, .lineup__name:hover + .lineup__desc,
.lineup__desc:hover, .lineup__desc:hover { background: #ffffff08; }
.lineup__name:hover .lineup__icon { transform: scale(1.05); }
.lineup__name:hover + .lineup__desc .lineup__play,
.lineup__desc:hover .lineup__play,
.lineup__play:focus-visible { opacity: 1; transform: translateX(0); }

@media (max-width: 860px) {
  .lineup__play { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .lineup { grid-template-columns: 1fr; }
  .lineup__name { grid-column: 1; padding: 16px 0 10px; border-radius: 0; }
  .lineup__desc { grid-column: 1; padding: 0 0 18px; border-top: 0; border-radius: 0; flex-wrap: wrap; gap: 12px; }
  .lineup__name:hover, .lineup__name:hover + .lineup__desc, .lineup__desc:hover { background: transparent; }
  .lineup__text { flex: 1 1 100%; }
}

}

/* ---------- pull quote ----------
   Used only where we are quoting somebody else, never for our own copy. */
.quote { margin: 30px 0; padding: 0; }
.quote blockquote { margin: 0; padding: 18px 24px; border-left: 2px solid var(--base-color); background: var(--bg-block-dark); border-radius: 0 12px 12px 0; }
.quote blockquote p { margin: 0; color: var(--text-white); font-size: 18px; line-height: 1.5; }
.quote figcaption { margin-top: 9px; font-size: 13px; color: var(--text-icon); }

/* ---------- page head ----------
   H1, byline and the opening paragraph read as one block, closed off with a hairline.
   Technical pages and the homepage keep their plain layout. */
body:not(.page--home):not(.page--legal):not(.page--page):not(.page--error) .byline + .section__lead {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 2px solid #ffffff14;
}

/* Button row that sits under a block rather than above it. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 6px; }
.actions--center { justify-content: center; }
@media (max-width: 620px) { .actions .btn { flex: 1 1 100%; } }

/* Post cards lead with a picture, as the brief asks: image, headline, link. */
.link-card--post { padding: 0; overflow: hidden; }
.link-card__media { display: block; aspect-ratio: 16 / 9; background: var(--bg-block-light); }
.link-card__media img { width: 100%; height: 100%; object-fit: cover; }
.link-card--post .link-card__title,
.link-card--post .link-card__text,
.link-card--post .link-card__go { padding-left: 20px; padding-right: 20px; }
.link-card--post .link-card__title { margin-top: 16px; }
.link-card--post .link-card__go { padding-bottom: 18px; }

/* The homepage cta is emitted by a helper and has no container of its own. */
/* Только на главной: заголовок, открывающий раздел, помечается чертой слева. */
.page--home .section > .container > .section__title {
  border-left: 4px solid var(--base-color); padding-left: 18px;
}
.page--home .cta__inner { max-width: 1100px; margin-inline: auto; }

/* Section link under a heading: reads as a link at a glance, arrow included. */
/* A photograph, not a screenshot: same frame as .shot but nothing to open. */
.shot-static { width: 100%; border-radius: var(--border-radius); border: 1px solid #ffffff12; }
/* Stands in for a video that does not exist, in the same frame a player would fill. */
.noclip { position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 42px 24px; border: 1px solid #ffffff12; border-radius: var(--border-radius);
  background: var(--bg-block-dark); }
/* The demo still sits behind the text, blurred right down, so the frame reads as a
   held place rather than as a blank panel. */
.noclip::before {
  content: ''; position: absolute; inset: -24px;
  background: url('/images/demo/placeholder-960.webp') center / cover no-repeat;
  filter: blur(14px) saturate(.5); opacity: .38;
}
.noclip > * { position: relative; }
.noclip__title { margin: 0; color: var(--text-white); font-size: 20px; font-weight: 800; }
/* Inside a clip card the block has to match the 16:9 frame it replaces. */
.noclip--card { aspect-ratio: 16 / 9; padding: 18px; border: 0; border-bottom: 1px solid #ffffff12; border-radius: 0; }
.noclip--card .noclip__title { font-size: 17px; }
.noclip--card .noclip__text { font-size: 14px; }
.noclip__text { margin: 0; max-width: 620px; color: var(--text-icon); font-size: 15px; }
.hero__actions--center { justify-content: center; margin: 16px 0 0; }
/* Одна кнопка под панелью разделов: во всю ширину колонки. */
.hero__actions--wide { display: block; margin: 18px 0 10px; }
/* Подпись к ролику, когда она стоит после кнопки, а не сразу под видео. */
.video__caption--under { margin: 0 0 26px; text-align: center; }
.hero__actions--wide .btn { width: 100%; }
/* Full width photograph inside running text, with its own caption. */
.figure-wide { margin: 26px 0; }
.figure-wide img { width: 100%; border-radius: var(--border-radius); border: 1px solid #ffffff12; }
.figure-wide figcaption { margin-top: 10px; color: var(--text-icon); font-size: 14px; line-height: 1.5; }
/* ---------- game page header ----------
   Cover on the left, the four numbers a player checks first on the right. */
.game-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; margin: 22px 0 26px; }
.game-head__cover { width: 100%; border-radius: var(--border-radius); border: 1px solid #ffffff12; }
.game-head__side { display: flex; flex-direction: column; gap: 14px; }
.game-head__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
/* Одна кнопка под характеристиками: тянется на всю ширину правой колонки. */
.game-head__actions { margin: 0; display: block; }
.game-head__actions .btn { width: 100%; }
.game-head__facts > div { background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius); padding: 14px 16px; }
.game-head__facts dt { font-size: 13px; color: var(--text-icon); }
.game-head__facts dd { margin: 4px 0 0; color: var(--text-white); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.game-head__facts dd.is-zero { color: var(--color-green); }
.game-head__facts dd.is-cut { color: var(--color-orange); }
@media (max-width: 700px) {
  .game-head { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; }
  .game-head__facts { grid-template-columns: 1fr; }
}

/* The game name carries the link on the lineup, so it has to read as one. */
a.lineup__label { color: var(--text-white); }
a.lineup__label:hover { color: var(--base-color); text-decoration: underline; }
/* ---------- guest cards ----------
   A face, a line, and the route to that guest's clips. The whole card is the link. */
/* Пятеро гостей стоят одним рядом: это набор, а не список, и он читается разом. */
.guests { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 24px 0 8px; }
@media (max-width: 900px) { .guests { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .guests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guest {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius);
  padding: 12px; color: var(--text-primary);
  transition: border-color var(--transition-speed), background var(--transition-speed);
}
.guest:hover { border-color: var(--base-color); }
.guest__face { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.guest__face--none {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, #181e3c, #181e3c 12px, #1b2143 12px, #1b2143 24px);
  border: 1px dashed #ffffff1f; color: var(--text-icon); font-size: 13px;
}
.guest__name { margin: 0; color: var(--text-white); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.guest__who { margin: 0; color: var(--text-icon); font-size: 12.5px; line-height: 1.4; }
.guest__text { margin: 0; font-size: 13.5px; line-height: 1.45; }
/* Кнопка в карточке одна. Переход к клипу идёт ссылкой под ней, без фона. */
.guest__reel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; background: none; padding: 0;
  color: var(--base-color); font-size: 13.5px; font-weight: 700;
}
.guest__reel:hover { text-decoration: none; }
.guest__reel:hover .guest__reel-label { text-decoration: underline; }
.guest__reel-arrow { transition: transform var(--transition-speed); }
.guest__reel:hover .guest__reel-arrow { transform: translateX(3px); }
.guest__reel span { transition: transform var(--transition-speed); }
.guest__reel:hover span { transform: translateX(3px); }
.guest__story { text-align: center; font-size: 13.5px; color: var(--text-icon); }
.guest__story:hover { color: var(--base-color); }
.guest__go { margin-top: auto; color: var(--base-color); font-size: 14px; font-weight: 700; }
.guest__go span { display: inline-block; margin-left: 6px; transition: transform var(--transition-speed); }
.guest:hover .guest__go span { transform: translateX(3px); }

/* ---------- clip section bar ----------
   Three ways into the same page. The count is rendered from data, so it cannot lie. */
.clip-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 10px; }
.clip-nav__item {
  display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center;
  background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius);
  padding: 18px 16px 14px; color: var(--text-white); font-weight: 700; font-size: 16px;
  transition: border-color var(--transition-speed), background var(--transition-speed);
}
.clip-nav__item:hover { border-color: var(--base-color); background: var(--bg-block-light); text-decoration: none; }
.clip-nav__ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 10px; border-radius: 10px;
  background: var(--accent-soft); color: var(--base-color);
}
.clip-nav__hint { color: var(--text-icon); font-size: 13px; font-weight: 400; line-height: 1.35; }
/* Ссылка ведёт вниз по этой же странице, поэтому стрелка смотрит вниз и стоит под текстом. */
.clip-nav__arrow { margin-top: 12px; color: var(--base-color); font-size: 18px; line-height: 1; transition: transform var(--transition-speed); }
.clip-nav__item:hover .clip-nav__arrow { transform: translateY(3px); }
/* Панель разделов идёт сразу за вводным абзацем, поэтому линия, закрывающая шапку,
   переезжает под неё: сначала текст и три входа, потом отбивка. */
body:not(.page--home):not(.page--legal):not(.page--page):not(.page--error) .byline + .section__lead:has(+ .clip-nav) {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 20px;
}
.clip-nav { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #ffffff14; }

/* Кнопка в конце статьи стоит в своей рамке, а не висит абзацем в тексте. */
.endcta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  margin: 30px 0 8px; padding: 22px 20px; border: 1px solid #ffffff14; border-radius: var(--border-radius);
  background: var(--bg-block-dark); }
.endcta__text { margin: 0; color: var(--text-white); font-weight: 700; font-size: 17px; }
.endcta .btn { min-width: 240px; }
.section-link { margin: 4px 0 18px; }
/* Under a grid of cards the link reads better centred than hanging off the left edge. */
.section-link--center { text-align: center; margin-top: 22px; }
.section-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--base-color); font-weight: 700; font-size: 15px; text-decoration: none; }
.section-link__arrow { transition: transform var(--transition-speed); }
.section-link a:hover .section-link__label { text-decoration: underline; }
.section-link a:hover .section-link__arrow { transform: translateX(3px); }

/* Shorts are 9:16. In the normal frame they would sit between two black bars, so the
   frame changes shape and stays centred instead. */
/* A short keeps the same frame as every other clip on the site. Only the picture inside
   is narrow, centred, with the frame showing either side of it. */
.video--vertical .video__frame { background: #05070f; }
.video--vertical .video__thumb { width: auto; max-width: 100%; margin: 0 auto; display: block; object-fit: contain; }
.video--vertical .video__frame iframe {
  inset: 0 auto 0 50%; width: auto; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%);
}

/* A clip that lives on X, Instagram or TikTok cannot be embedded here, so the slot
   becomes a link to the source rather than a dead frame. */
.video__frame--external { display: block; position: relative; text-decoration: none; overflow: hidden; }
.video__frame--external img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.video__frame--external:hover img { opacity: .55; }
.video__frame--external .slot-mask__tag { background: var(--bg-button-blue); }

/* Age restricted clips refuse to play inside an embed, so every video keeps a way out. */
/* Standalone link, not an inline one inside a sentence: real tap target, centred. */
.video__fallback { display: flex; align-items: center; justify-content: center; min-height: 32px;
  padding: 4px 0; margin: 0 auto; color: var(--base-color); font-weight: 600; text-align: center; }
.video--wide .video__caption { text-align: left; }

/* ---------- back to top ----------
   Правый нижний угол; на мобильном уходит выше, чтобы не спорить с системной панелью. */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid #ffffff1f; border-radius: 50%;
  background: var(--bg-block-dark); color: var(--text-white); cursor: pointer;
  box-shadow: 0 8px 24px #05081a66;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), border-color var(--transition-speed), background var(--transition-speed);
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; transform: translateY(0); }
.to-top:hover { border-color: var(--base-color); background: var(--bg-block-light); color: var(--base-color); }
.to-top:focus-visible { outline: 2px solid var(--base-color); outline-offset: 3px; }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Кнопка наверх висит в правом нижнем углу, поэтому нижняя строка подвала уступает ей место. */
.site-footer__bar-inner { padding-right: 64px; }
@media (max-width: 640px) { .site-footer__bar-inner { padding-right: 0; padding-bottom: 44px; } }

/* Домен дописан только в подвале: в шапке логотип - ссылка, а не адрес.
   В подвале это адрес сайта, поэтому пишется одним словом, без отбивки перед XXX. */
.logo--footer .logo__tld { color: var(--text-icon); font-weight: 700; }
.logo--footer .logo__xxx { margin-left: 0; }

/* Кадр героя внутри истории: подложка на всю ширину колонки, квадрат по центру.
   Без подложки квадрат висел в пустоте и колонка выглядела дырявой. */
.hero-shot {
  margin: 30px 0; padding: 22px;
  background: var(--bg-block-dark); border: 1px solid #ffffff0f; border-radius: var(--border-radius);
}
.hero-shot img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border-radius: var(--border-radius); }
.hero-shot figcaption { margin: 14px auto 0; max-width: 440px; color: var(--text-icon); font-size: 14px; line-height: 1.5; text-align: center; }
@media (max-width: 640px) { .hero-shot { padding: 14px; } }