/* Megapari Zambia — site styles.
   Built on tokens.css. Rules from MEGAPARI_BRAND_GUIDE_AI.md:
   dark #000413 canvas, Druk display + Gilroy UI, pill controls #1A5DCE,
   sport = blue dominant, casino = red+gold accent, 3D as a single accent. */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--mp-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--text);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip-path: none;
  border-radius: var(--radius-pill);
  background: var(--ui-blue);
  color: var(--text-on-accent);
  font-weight: 500;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Buttons (§6.1 — pill, #1A5DCE, four states) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--button);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Label is --text, not --text-on-accent. The brand guide names #D6DCEC for
   labels on blue, but on #1A5DCE that measures 4.37:1 — under the 4.5:1 AA
   floor, and these labels are 19px/500, so the 3:1 large-text allowance does
   not apply. #EFF1F8 is still a brand token and measures 5.32:1. */
.btn-primary {
  background: var(--ui-blue);
  color: var(--text);
}

.btn-primary:hover {
  background: var(--btn-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #000, 0 0 0 3px var(--ui-blue);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
}

.btn-primary[disabled],
.btn-primary[aria-disabled='true'] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  transform: none;
}

/* Ghost = chip-style outline (§6.2) */
.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--ui-blue-bright);
}

.btn-ghost:hover {
  background: rgba(32, 102, 218, 0.14);
  color: var(--text);
  transform: translateY(-1px);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #000413, 0 0 0 3px var(--ui-blue);
}

.btn-ghost:active {
  transform: translateY(0) scale(0.99);
}

.btn-lg {
  min-height: 3.5rem;
  padding: 0 var(--space-7);
  font-size: var(--body-lg);
}

.btn-yellow {
  background: var(--mp-yellow);
  color: #1a1200;
}

.btn-yellow:hover {
  background: #ffb31a;
  color: #1a1200;
  transform: translateY(-1px);
}

.btn-yellow:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #000, 0 0 0 3px var(--mp-yellow);
}

.btn-yellow:active {
  transform: translateY(0) scale(0.99);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(0, 4, 19, 0.82);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--hairline);
}

.nav-inner {
  width: var(--wrap);
  margin-inline: auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
}

.brand img {
  height: 1.75rem;
  width: auto;
}

.nav-links {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: var(--body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--text);
}

.nav-links a[aria-current='page'] {
  position: relative;
}

.nav-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ui-blue-bright);
}

.nav-cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-cta .btn {
  min-height: 2.625rem;
  padding: 0 var(--space-5);
  font-size: var(--body-sm);
}

.nav-toggle {
  display: none;
  min-height: 2.625rem;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ui-blue-bright);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body-sm);
  font-weight: 500;
  cursor: pointer;
}

.nav-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 1.25rem var(--space-6);
  border-block-start: 1px solid var(--hairline);
}

/* `display: grid` would otherwise beat the browser's [hidden] rule. */
.nav-panel[hidden] {
  display: none;
}

.nav-panel ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* :not(.btn) for the same specificity reason as .prose a — the panel holds a
   .btn-primary, and a descendant-a rule outranks a single-class button rule. */
.nav-panel a:not(.btn) {
  color: var(--text);
  font-size: var(--body-lg);
  font-weight: 500;
  text-decoration: none;
}

/* ---------- Hero (§12.1 — full-bleed Option A, copy on the quiet left) ---------- */

/* Compact on purpose: a shorter field than 100svh keeps the next section
   peeking above the fold, and it scales the photo down with it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  --hero-h: clamp(25rem, 68svh, 38rem);
  min-height: var(--hero-h);
  padding-block: var(--space-6);
  background: var(--bg);
}

/* A hero without a photograph. The base .hero reserves 25-38rem for artwork
   that sits behind the copy; with no image that reserve is just a hole —
   measured 378px of empty space under a 230px block at 1440. Here the height
   comes from the content, with breathing room set deliberately. */
.hero--plain {
  --hero-h: auto;
  min-height: 0;
  padding-block: clamp(var(--space-6), 7vw, var(--space-8));
}

.hero--plain .hero-copy {
  max-width: 44rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sport-glow);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  gap: var(--space-7);
  align-items: center;
}

.hero-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--ui-blue-bright);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw + 0.5rem, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero-offer {
  margin: 0;
  color: var(--mp-yellow);
  font-family: var(--font-ui);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.35;
}

.hero-offer b {
  font-weight: 700;
}

.hero-lede {
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted);
  font-size: var(--body-lg);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* One quiet entrance, not a scroll-reveal system. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: hero-rise 620ms var(--ease) backwards;
  }

  .hero-copy > :nth-child(1) { animation-delay: 40ms; }
  .hero-copy > :nth-child(2) { animation-delay: 110ms; }
  .hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .hero-copy > :nth-child(4) { animation-delay: 250ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

/* Right-hand field, not full-bleed. The frame stays narrower than the
   photo's own 3:2, so `cover` scales by height: the subject is never cut
   at the top or bottom, and it reads smaller than a full-width crop.
   Only the photo's own dark left margin is trimmed. */
/* Width is capped at 1.5x the hero height — the photo's own 3:2 — so the
   frame never becomes wider than the picture and `cover` always scales by
   height. That keeps the vertical crop at zero on any screen width. */
.hero-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(63%, calc(var(--hero-h) * 1.5));
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

/* Portrait only: edges dissolve so the page canvas and sport glow
   show through. The 3D ball sits on top and is not masked. */
.hero-photo {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 36%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 36%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% center;
}

/* Official brand 3D fallback if the generated files are missing. */
.hero-visual--3d {
  background:
    radial-gradient(56% 56% at 62% 52%, rgba(32, 102, 218, 0.55) 0%, rgba(0, 31, 82, 0) 74%),
    radial-gradient(38% 38% at 82% 30%, rgba(230, 53, 43, 0.3) 0%, rgba(0, 4, 19, 0) 76%),
    linear-gradient(180deg, #041027 0%, #01060f 100%);
}

.hero-visual--3d .hero-art {
  position: absolute;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Sport is the dominant object, casino the secondary one — roughly 2:1
   in area, so the hierarchy from guide §3.2 is unmistakable. */
.hero-art--sport {
  inset-block-end: 5%;
  inset-inline-start: 5%;
  max-width: 62%;
  max-height: 74%;
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.6));
}

.hero-art--casino {
  inset-block-start: 6%;
  inset-inline-end: 4%;
  max-width: 40%;
  max-height: 44%;
  opacity: 0.9;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art--sport {
    animation: hero-float 6.5s ease-in-out infinite;
  }

  .hero-art--casino {
    animation: hero-float 7.5s ease-in-out -2.5s infinite;
  }
}

@keyframes hero-float {
  0%, 100% { translate: 0 -0.35rem; }
  50% { translate: 0 0.35rem; }
}

@media (max-width: 40rem) {

  /* Photo on top, copy below it — no overlap at all. Relying on the dark
     zone of the portrait only works while the crop cooperates; stacking is
     deterministic. */
  .hero {
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 0;
    padding-block: 0 var(--space-6);
  }

  .hero-copy {
    gap: var(--space-3);
  }

  .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }

  .hero-lede {
    font-size: var(--body);
  }

  .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 36svh;
  }

  /* fade the bottom of the photo into the page, so the copy below it starts
     on clean ground instead of a hard edge */
  .hero-photo {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  }

  /* 55% keeps the face near the middle of the crop and shows more of the
     flag (measured: 13% flag-green in frame vs 11% at 22%). */
  .hero-photo img {
    object-position: center 55%;
  }

  .hero-inner {
    margin-block-start: var(--space-2);
  }

  /* Logo + flag + Menu must fit 390px: the SVG logo scales by its own
     aspect ratio, so it needs a smaller cap here. */
  .nav-inner {
    gap: var(--space-4);
  }

  .brand img {
    height: 1.375rem;
  }

  .nav-toggle {
    padding: 0 var(--space-4);
  }

  .hero-art--sport {
    max-width: 62%;
    max-height: 66%;
  }

  .hero-art--casino {
    max-width: 50%;
  }
}

/* ---------- Stat row (welcome numbers, sport-first) ---------- */

.stats {
  width: var(--wrap);
  margin: var(--space-7) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
}

.stat--sport::before {
  background: var(--grad-blue);
}

.stat--casino::before {
  background: var(--grad-red);
}

.stat--promo::before {
  background: var(--grad-gold);
}

.stat b {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(1.4rem, 2vw + 0.6rem, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.stat--sport b {
  color: var(--mp-blue);
}

.stat--casino b {
  color: var(--mp-red);
}

.stat--promo b {
  color: var(--mp-yellow);
}

.stat span {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* ---------- Page head (inner pages) ---------- */

.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-6);
  border-block-end: 1px solid var(--hairline);
}

.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sport-glow);
}

.page-head h1 {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
}

.page-head p {
  width: 100%;
  max-width: 70rem;
  margin: var(--space-4) auto 0;
  color: var(--text-muted);
  font-size: var(--body-lg);
}

/* ---------- Table of contents ----------
   Generated from the page's own H2 elements, so it cannot list a section that
   is not there. Sits directly under the lead, where a reader looks for it. */

.toc {
  margin-block: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* The whole summary row is the toggle, so the target matches what is read.
   list-style is removed on both selectors because Safari needs the WebKit
   pseudo-element and everything else uses the standard one. */
.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-accent);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.toc > summary::-webkit-details-marker {
  display: none;
}

.toc-count {
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.toc-count::after {
  content: '';
  display: inline-block;
  margin-inline-start: 0.5rem;
  width: 0.34rem;
  height: 0.34rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.12rem;
  transition: rotate var(--dur) var(--ease);
}

.toc[open] > summary .toc-count::after {
  rotate: 225deg;
  translate: 0 0.1rem;
}

.toc ol {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 1.35rem);
}

.toc li {
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.toc a {
  display: inline-block;
  /* 24 px minimum hit area (WCAG 2.5.8): 18 px of line box plus 3 px each side. */
  padding-block: 3px;
  color: var(--text);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* Anchored headings must not land under the sticky header. */
.prose h2[id] {
  scroll-margin-block-start: 5rem;
}

/* ---------- FAQ accordion ----------
   Built from the same parse that produces the FAQPage schema, so the visible
   text and the markup always agree. <details> carries the collapse, the
   keyboard handling and the semantics; answers stay in the DOM either way, so
   nothing is hidden from a crawler. */

.faq-item {
  border-block-start: 1px solid var(--hairline);
}

.faq-item:last-of-type {
  border-block-end: 1px solid var(--hairline);
}

.faq-item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.4;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

/* The chevron is on the summary rather than a nested span: a summary can hold
   only inline content reliably, and an extra wrapper would need markup the
   schema parse does not expect. */
.faq-item > summary::after {
  content: '';
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin-block-start: 0.35rem;
  border-inline-end: 1.6px solid var(--text-muted);
  border-block-end: 1.6px solid var(--text-muted);
  rotate: 45deg;
  transition: rotate var(--dur) var(--ease);
}

.faq-item[open] > summary::after {
  rotate: 225deg;
  margin-block-start: 0.55rem;
}

.faq-item > summary:hover {
  color: var(--text);
}

.faq-item > summary:hover::after {
  border-color: var(--text);
}

/* The answer is a <p> the prose rules already style; it only needs the
   indent-free bottom spacing that separates it from the next question. */
.faq-item > p {
  margin: 0;
  padding-block-end: var(--space-4);
  padding-inline-end: var(--space-6);
}

/* A path through a device's settings menu, inline in a sentence. Its own class
   because .ticket is a full-width grid button for the promo code — borrowing it
   here would have styled a menu path as an offer. */
.ui-path {
  padding: 0.1em 0.4em;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.94em;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  /* The Android path is too long to hold on one line on a phone. */
  .ui-path {
    white-space: normal;
  }
}

/* ---------- Fact table ----------
   The competitor's strongest device: a two-column table of verified values a
   reader can scan in three seconds instead of reading four paragraphs. Row
   labels are <th scope="row">, so a screen reader announces the label with
   each value instead of reading two disconnected columns. */

.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--body-sm);
}

.facts th,
.facts td {
  padding: var(--space-3) 0;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--hairline);
}

.facts tr:last-child th,
.facts tr:last-child td {
  border-block-end: 0;
}

.facts th {
  width: 42%;
  padding-inline-end: var(--space-4);
  font-weight: 500;
  color: var(--text-muted);
}

.facts td {
  color: var(--text);
}

.facts--compare {
  table-layout: fixed;
}

.facts--compare th,
.facts--compare td {
  width: auto;
  padding: var(--space-4) var(--space-5);
}

.facts--compare thead th {
  font-weight: 700;
  color: var(--text);
}

.facts--compare th[scope='row'] {
  width: 36%;
}

/* Honest freshness stamp: the date comes from the lastmod ledger, so it moves
   only when the page's content actually moves. */
.stand {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--hairline);
}

/* After a FAQ the rule is already there — the last question draws it. */
.faq-item:last-of-type + .stand {
  padding-block-start: 0;
  border-block-start: 0;
  color: var(--text-muted);
  font-size: var(--caption);
}

@media (max-width: 30rem) {
  /* Two columns stop working when the label wraps to three lines. */
  .facts th,
  .facts td {
    display: block;
    width: auto;
  }

  .facts th {
    padding-block-end: 0;
    border-block-end: 0;
  }
}

/* ---------- Promo ticket (§3.3 gold = promo / rewards) ---------- */

/* Not a grey plate on the dark ground: a lit field. The gold hairline and
   the ambient wash carry it, so it belongs to the page instead of sitting
   on top of it. */
.promo {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(237, 159, 2, 0.16) 0%, rgba(0, 4, 19, 0) 62%),
    radial-gradient(90% 120% at 8% 100%, rgba(32, 102, 218, 0.18) 0%, rgba(0, 4, 19, 0) 60%),
    linear-gradient(180deg, #0a1226 0%, #050c1c 100%);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.promo::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--grad-gold);
}

.promo h2,
.promo h3 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.promo > p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* ---------- Promo ticket: the whole card is the copy button ---------- */

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'code icon'
    'hint icon';
  align-items: center;
  gap: 0.15rem var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px rgba(237, 159, 2, 0.45);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: start;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.ticket:hover {
  background: rgba(237, 159, 2, 0.07);
  box-shadow: inset 0 0 0 1.5px var(--mp-yellow);
  transform: translateY(-1px);
}

.ticket:active {
  transform: translateY(0);
}

.ticket:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ticket-label {
  grid-area: label;
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticket-code {
  grid-area: code;
  font-family: var(--font-accent);
  font-size: clamp(1.35rem, 1.4vw + 0.8rem, 1.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--mp-yellow);
}

.ticket-hint {
  grid-area: hint;
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
}

.ticket-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
  background: rgba(237, 159, 2, 0.12);
  color: var(--mp-yellow);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ticket-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ticket:hover .ticket-icon {
  background: var(--mp-yellow);
  color: #1a1200;
}

.ticket[data-state='ok'] {
  box-shadow: inset 0 0 0 1.5px var(--mp-yellow);
  background: rgba(237, 159, 2, 0.12);
}

.ticket[data-state='ok'] .ticket-hint {
  color: var(--mp-yellow);
}

.ticket[data-state='ok'] .ticket-icon {
  background: var(--mp-yellow);
  color: #1a1200;
}

.ticket[data-state='err'] {
  box-shadow: inset 0 0 0 1.5px var(--mp-red);
}

.ticket[data-state='err'] .ticket-hint {
  color: var(--mp-red);
}

.promo .btn {
  justify-self: start;
}

/* Offer title as a composition, not a sentence: small kicker, one large
   Druk figure, quiet qualifier. Keeps the narrow column from reading as a
   block of text while the h2 semantics stay intact. */
.promo-title {
  display: grid;
  gap: 0.1rem;
}

.promo-kicker {
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.promo-figure {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3.6vw + 1rem, 4rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--mp-yellow);
}

.promo-with {
  font-family: var(--font-ui);
  font-size: var(--body-sm);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Prose + offer column. The aside sticks, so a long text column never
   leaves it stranded in white space — it travels with the reading instead. */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.with-aside .prose {
  max-width: 62ch;
}

.promo--aside {
  position: sticky;
  inset-block-start: calc(var(--nav-h) + var(--space-4));
  gap: var(--space-6);
  padding: 2.5rem var(--space-6);
}

.promo--aside .promo-copy {
  display: grid;
  gap: var(--space-3);
}

.promo--aside h2,
.promo--aside h3 {
  font-size: var(--h3);
}

.promo--aside > p {
  font-size: var(--body-sm);
}

.promo--aside .promo-action {
  display: grid;
  gap: var(--space-4);
}

.promo--aside .ticket {
  padding: var(--space-3) var(--space-4);
}

.promo--aside .btn {
  justify-self: stretch;
}

@media (max-width: 62rem) {
  .with-aside {
    grid-template-columns: 1fr;
  }

  .promo--aside {
    position: static;
  }
}

/* Wide promo band — copy left, code and CTA right. No dead column. */
.promo--band {
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 26rem);
  align-items: center;
  gap: var(--space-6) var(--space-7);
  padding: 2.5rem var(--space-6);
}

.promo--band .promo-copy {
  display: grid;
  gap: var(--space-3);
}

.promo--band .promo-figure {
  font-size: clamp(2.2rem, 2.6vw + 1rem, 3.2rem);
}

.promo--band .promo-copy p {
  margin: 0;
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.promo--band .promo-action {
  display: grid;
  gap: var(--space-3);
}

.promo--band .promo-action .btn {
  justify-self: stretch;
}

@media (max-width: 62rem) {
  .promo--band {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-5);
  }
}

/* Promo ticket in the hero — fills the dead right column. */
.promo--hero {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.65rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--hairline);
}

.promo--hero .promo-copy {
  display: grid;
  gap: var(--space-3);
}

.promo--hero .promo-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

.promo--hero .promo-action {
  display: grid;
  gap: var(--space-4);
}

.promo--hero .btn {
  justify-self: stretch;
}

/* ---------- Directions: Sport (blue) vs Casino (red+gold) — §3.2 ---------- */

.directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.direction {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-5);
  padding: 2.5rem var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.direction::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
}

/* Official brand 3D object as a single accent (guide §7), never a collage. */
.direction-art {
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: -1.5rem;
  translate: 0 -50%;
  width: clamp(7rem, 12vw, 11rem);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 62rem) {
  .direction-art {
    inset-block-start: auto;
    inset-block-end: -1rem;
    translate: none;
    width: 7rem;
    opacity: 0.38;
  }
}

.direction--sport::before {
  background: var(--sport-glow);
}

.direction--casino::before {
  background: var(--casino-glow);
}

/* Label reads first, the number carries the direction colour. */
.direction h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.direction h3::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
}

.direction--sport h3::before {
  background: var(--mp-blue);
}

.direction--casino h3::before {
  background: var(--mp-red);
}

.direction .amount {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 2vw + 0.7rem, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.direction--sport .amount {
  color: var(--mp-blue);
}

.direction--casino .amount {
  color: var(--mp-yellow);
}

.direction p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
  max-width: 44ch;
}

.direction .btn {
  justify-self: start;
  margin-block-start: var(--space-2);
}

/* ---------- Jump tiles (home, after hero) ---------- */

.section--blocks {
  padding-block: clamp(3.25rem, 5.5vw, 5.5rem) clamp(2.5rem, 4vw, 4rem);
}

.jumps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-7);
  padding: 0;
  list-style: none;
}

.jump {
  display: grid;
  gap: var(--space-2);
  min-height: 11rem;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.jump:hover {
  background: var(--surface);
  transform: translateY(-2px);
}

.jump:active {
  transform: translateY(0);
}

.jump:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.jump-kicker {
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jump-title {
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.jump--sport .jump-title {
  color: var(--mp-blue);
}

.jump--casino .jump-title {
  color: var(--mp-red);
}

.jump--promo .jump-title {
  color: var(--mp-yellow);
}

.jump-note {
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

/* ---------- Mid-article pull (CTA without a TOC heading) ---------- */

.pull {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}

.pull-copy {
  display: grid;
  gap: var(--space-2);
}

.pull-lead {
  margin: 0;
  color: var(--text);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.4;
}

.pull p {
  margin: 0;
}

.pull .btn {
  justify-self: end;
  min-width: 12rem;
}

/* ---------- Casino titles Germans actually play ---------- */

.games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.game {
  display: grid;
  gap: var(--space-2);
  min-height: 9.5rem;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.game:hover {
  background: var(--surface);
  transform: translateY(-2px);
}

.game:active {
  transform: translateY(0);
}

.game:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.game-kind {
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.game-name {
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--mp-yellow);
}

.game-note {
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

.section--blocks .games {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-block: var(--space-6) 0;
}

.section--blocks h2 {
  margin-block-end: var(--space-5);
}

/* ---------- Casino kinds (lobby types with product shots) ---------- */

.kinds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-7);
  padding: 0;
  list-style: none;
}

.kind {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.kind:hover {
  background: var(--surface);
  transform: translateY(-2px);
}

.kind:active {
  transform: translateY(0);
}

.kind:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.kind-media {
  display: block;
  aspect-ratio: 496 / 300;
  overflow: hidden;
  background: var(--surface);
}

.kind-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kind-kicker,
.kind-name,
.kind-note {
  padding-inline: var(--space-5);
}

.kind-note {
  padding-block-end: var(--space-5);
}

.kind-kicker {
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kind-name {
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--mp-yellow);
}

.kind-note {
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

/* ---------- Testurteil: plus / minus, no invented stars ---------- */

.verdict {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}

.verdict-head {
  display: grid;
  gap: var(--space-2);
}

.verdict-kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.verdict-line {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.verdict-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.verdict h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.verdict-plus h3 {
  color: var(--mp-blue);
}

.verdict-minus h3 {
  color: var(--mp-red);
}

.verdict ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.verdict li {
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.45;
  padding-inline-start: 1.1rem;
  position: relative;
}

.verdict-plus li::before,
.verdict-minus li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}

.verdict-plus li::before {
  content: '+';
  color: var(--mp-blue);
}

.verdict-minus li::before {
  content: '–';
  color: var(--mp-red);
}

.verdict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.prose .verdict p,
.prose .verdict li {
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.prose .verdict-line {
  color: var(--text);
  font-size: var(--h3);
}

/* ---------- Licence compare (Anjouan vs GGL) ---------- */

.compare-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.compare-wrap::-webkit-scrollbar {
  display: none;
}

.compare {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--body-sm);
}

.compare th,
.compare td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--hairline);
}

.compare thead th {
  font-weight: 500;
  color: var(--text-muted);
}

.compare tbody th {
  font-weight: 500;
  color: var(--text-muted);
}

.compare td {
  color: var(--text);
}

.compare thead th:nth-child(2),
.compare tbody td:nth-child(2) {
  color: var(--mp-yellow);
  background: rgba(237, 159, 2, 0.06);
}

.compare tr:last-child th,
.compare tr:last-child td {
  border-block-end: 0;
}

/* ---------- Content sections: readable prose + full-width figures ---------- */

/* Vertical rhythm scales with the viewport: 3rem on a phone up to 6rem on a
   desktop, so large image sections get real separation instead of a flat gap. */
.section {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.section + .section {
  padding-block-start: 0;
}

.section-head {
  margin-block-end: var(--space-6);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.section h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.section h2 + p {
  margin: 0;
}

/* Prose column — one measure, start-aligned, never a half-empty card. */
/* A prose column that is the only column gets centred. Left-flush it leaves
   498px of dead space on one side at 1440 — measured on /lizenz/. Pages that
   carry a promo aside are unaffected: there the aside occupies that space, and
   `.with-aside .prose` sets its own measure. The direct-child selector is what
   separates the two cases. */
.wrap > .prose {
  margin-inline: auto;
}

.prose {
  max-width: var(--measure);
  display: grid;
  gap: var(--space-5);
}

.prose p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body);
  line-height: 1.65;
}

.prose p strong {
  color: var(--text);
  font-weight: 700;
}

/* :not(.btn) — a bare .btn-primary rule (0,1,0) loses to .prose a (0,1,1),
   so without this every button inside prose was painted link-blue on blue. */
.prose a:not(.btn):not(.tile-go):not(.thumb):not(.tile-art) {
  color: var(--mp-blue);
}

.prose .figure {
  width: min(100%, 52rem);
  max-width: 52rem;
  justify-self: center;
  margin-inline: auto;
}

/* Figures keep their own aspect ratio — the art is baked into the banner,
   so it is never cropped into a narrow column. */
/* No card, no shadow: the banners are lit objects on the same #000413
   ground as the page, so they dissolve into it instead of sitting on it
   as a plate. Their own floor reflection is brighter than the page, which
   is what made the bottom edge read as a hard cut — the mask kills it. */
.figure {
  margin-block: 0;
  margin-inline: auto;
  justify-self: center;
  overflow: hidden;
}

.figure img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 16 / 9);
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

/* Figure above a single readable column — capped so a banner never
   becomes the loudest thing on the page. */
.figure figcaption {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
  text-align: center;
}

.stack {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
}

.stack .figure {
  width: min(100%, 52rem);
  max-width: 52rem;
}

/* Two-column split: figure beside prose. Top-aligned, so a long text
   column never leaves the figure floating in the middle of dead space. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.split .prose {
  max-width: 56ch;
}

.split .promo {
  position: sticky;
  inset-block-start: calc(var(--nav-h) + var(--space-4));
}

.split--reverse .figure {
  order: 2;
}

/* ---------- App block ---------- */

.appblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: 2.5rem var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.appblock h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  text-transform: uppercase;
}

.appblock p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  max-width: 46ch;
}

.store-links {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.store-links img {
  height: 3.25rem;
  width: auto;
  border-radius: var(--radius-control);
}

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 4vw, 3.5rem);
  border-block-start: 1px solid var(--hairline);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-ambient);
  opacity: 0.42;
}

.cta-band .wrap {
  display: grid;
  /* One column, and never wider than the wrap. Without minmax(0, 1fr) the
     implicit auto track takes the max-content width of the heading; the
     heading's cap is 26ch of Druk Wide, which measures 476px, so on a 390px
     phone the track was 476px and the section's overflow:hidden cut the
     title, the paragraph and the button off at the right edge. Measured at
     320, 360 and 390. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

.cta-band h2 {
  margin: 0;
  /* ch is a display-font unit here and 26 of them exceed a phone. The cap is
     for a long line on a desktop; the container wins on a narrow screen. */
  max-width: min(26ch, 100%);
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  /* A single German compound can be wider than the screen in this face —
     "Willkommensbonus" at 34px measures about 416px. Hyphenation breaks it
     where the language allows; break-word is the backstop for a token with no
     legal break, such as a licence number. Without either, the word cannot
     wrap and the section's overflow:hidden cuts it off: measured at 127px lost
     on a 390px screen. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.cta-band p {
  margin: 0;
  max-width: min(48ch, 100%);
  color: var(--text-on-accent);
}

/* ---------- Breadcrumbs ---------- */

/* A little air under the trail, otherwise it sits glued to the page head. */
.crumbs {
  padding-block: var(--space-4) var(--space-3);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--caption);
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
}

.crumbs li + li::before {
  content: '/';
  color: var(--mp-grey);
}

.crumbs a {
  display: inline-block;
  padding-block: 3px;
  color: var(--text-muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--text);
}

.crumbs [aria-current='page'] {
  color: var(--text);
}

/* Typographic steps: a Druk numeral does the work an icon was doing badly,
   and the single-line labels cannot wrap into an awkward second line. */
.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--hairline);
}

.steps li:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.steps b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mp-blue);
}

.steps span {
  color: var(--text);
  font-size: var(--body);
  line-height: 1.45;
}

/* Download CTA on the APK page: button plus the one-line reassurance
   a user wants before installing something outside Google Play. */
.apk-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.apk-cta span {
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* ---------- Device screenshots (/app/apk/) ----------
   The captures are of a light-themed app sitting on a #000413 page, so each
   one gets a hairline and a rounded crop: without an edge the white UI bleeds
   into the dark ground and reads as a hole rather than a phone screen.
   A horizontal strip keeps six tall 9:19.25 shots from turning the page into
   a column of screenshots. */

.shots {
  margin-block: var(--space-6);
  /* .prose is a grid, and a grid item defaults to min-width:auto — without
     this the flex track below sizes the column to its own content and pushes
     the whole prose column past the layout instead of scrolling, which puts
     the later screenshots off-screen and out of reach. */
  min-width: 0;
}

.shots-track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 var(--space-5) var(--space-4) 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  /* the strip is the only thing that scrolls sideways, never the page */
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.shots-track::-webkit-scrollbar {
  height: 6px;
}

.shots-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--hairline);
}

.shot {
  flex: none;
  width: 11.25rem;
  scroll-snap-align: start;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0 0 1px rgb(0 0 0 / 0.4);
}

.shot p {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.45;
}

.shots-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

/* the check date rides quietly behind the version it qualifies */
.spec-when {
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- App card (APK download) ----------
   Structure follows an app-store listing so the page is scannable, but every
   row is a verified fact; unverifiable catalogue rows are absent, not faked. */

.appcard {
  display: grid;
  gap: var(--space-5);
  padding: 2rem var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.appcard-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.appcard-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-card);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.appcard-name {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}

.appcard-dev {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.appcard-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--hairline);
}

.appcard-spec div {
  display: grid;
  gap: 0.15rem;
}

.appcard-spec dt {
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.appcard-spec dd {
  margin: 0;
  color: var(--text);
  font-size: var(--body-sm);
  font-weight: 700;
}

.spec-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

/* ---------- Contacts ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
}

.contact-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: 2.5rem var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.contact-card h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  text-transform: uppercase;
}

.contact-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

.contact-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Label and value on one line: reads as a contact row, not a stacked pair. */
.contact-list li {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
}

@media (max-width: 22rem) {
  .contact-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.contact-list span {
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-list a,
.contact-list b {
  color: var(--text);
  font-size: var(--body);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: var(--mp-blue);
}

/* ---------- Footer ---------- */

.footer .footer-heading {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* No top margin — the CTA band above it already closes the page. */
.footer {
  padding-block: 4rem var(--space-7);
  border-block-start: 1px solid var(--hairline);
  background: var(--surface-2);
}

/* Every column starts with a heading on the same baseline, so the four
   columns share one rhythm instead of each starting wherever its content
   does. Social links and the operator line move to a full-width bottom row —
   in a column they made one side twice as tall as the others. */
.footer-col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.footer .footer-brand p {
  margin: 0;
  max-width: 34ch;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--hairline);
}

/* `.footer ul` is more specific than a bare class, so these inline rows must
   be scoped under .footer or they silently fall back to the column grid. */
.footer .footer-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer-inline li {
  display: flex;
  align-items: center;
}

/* thin separator between inline items */
.footer .footer-inline li + li::before {
  content: '';
  width: 1px;
  height: 0.85em;
  margin-inline-end: var(--space-5);
  background: var(--hairline);
}

.footer .footer-social a:hover {
  color: var(--mp-blue);
}

.footer-operator-line {
  grid-column: 1 / -1;
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.6;
}

.footer-operator-line span:first-child {
  color: var(--text);
  font-weight: 700;
}

.footer-bottom .age {
  margin: 0;
  grid-row: 1 / 3;
  grid-column: 2;
  justify-self: end;
}

/* Four fixed fractions were inherited from a footer that had four columns.
   This one has three, so the fourth stayed empty and left dead space on the
   right. */
.footer-grid {
  display: grid;
  /* Explicit, not auto-fit: auto-fit placed after an fr track has no definite
     space to divide and collapses the whole grid to one column. Three blocks,
     three tracks — the brand keeps the wider share. */
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7) 3.5rem;
  align-items: start;
}

.footer img.footer-logo {
  height: 1.75rem;
  width: auto;
}

.footer p {
  margin: var(--space-4) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.footer a {
  display: inline-block;
  padding-block: 3px;
  color: var(--text-muted);
  font-size: var(--body-sm);
  text-decoration: none;
}

.footer a:hover {
  color: var(--text);
}

.footer .age {
  height: 2.5rem;
  width: auto;
  margin-block-start: var(--space-5);
}

/* No rule and no top spacing of its own: the only place this appears is
   inside .footer-bottom, which already draws the separator above it. */
.legal {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.6;
  max-width: 100ch;
}

.legal a {
  color: var(--mp-blue);
}

/* One centered column — text, splits and tables share the same axis. */
.prose--wide {
  max-width: 70rem;
  margin-inline: auto;
}

.prose--wide > p,
.prose--wide > h2,
.prose--wide > h3,
.prose--wide > ol,
.prose--wide > ul:not(.checks):not(.feats):not(.thumbs):not(.jumps),
.prose--wide > .toc,
.prose--wide > .lead,
.prose--wide > .stand,
.prose--wide > .steps,
.prose--wide > .break,
.prose--wide > .pull,
.prose--wide > .compare-wrap,
.prose--wide > .verdict,
.prose--wide > .spec-wrap,
.prose--wide > .shelf,
.prose--wide > .phones,
.prose--wide > .reel,
.prose--wide > .tiles,
.prose--wide > .codebar,
.prose--wide > .promo,
.prose--wide > .directions,
.prose--wide > .compare,
.prose--wide > .duo,
.prose--wide > .notes,
.prose--wide > table,
.prose--wide > .facts {
  max-width: none;
}

/* ---------- Check lists + split (TR media_block) ---------- */

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.checks li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

.checks li::before {
  content: '';
  width: 1.35rem;
  height: 1.35rem;
  margin-block-start: 0.15rem;
  border-radius: 50%;
  background-color: var(--ui-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23EFF1F8' d='M6.2 10.6 3.7 8.1l-.9.9 3.4 3.4 7-7-.9-.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem 0.75rem;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  justify-items: stretch;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--hairline);
}

.duo:not(:has(.duo-media)) {
  grid-template-columns: minmax(0, 42rem);
}

.notes {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-6);
}

.notes h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.notes p {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.55;
}

.checks--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-7);
}

.duo--rev .duo-copy {
  order: 2;
}

.duo-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.duo-copy p,
.duo-copy ol {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

.duo-copy ol {
  padding-inline-start: 1.2em;
}

.duo-media {
  display: flex;
  justify-content: center;
  justify-self: center;
  width: min(100%, 52rem);
  max-width: 52rem;
  min-width: 0;
}

.duo-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.duo-media--phone {
  display: flex;
  justify-content: center;
  align-self: center;
}

.duo-media--phone img {
  width: auto;
  height: auto;
  max-width: 13.5rem;
  max-height: 24rem;
  object-fit: contain;
  border-radius: 1.15rem;
  background: #11141c;
  box-shadow: var(--shadow-float);
}

/* ---------- Spec sheet ---------- */

.spec-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}

.spec {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--body-sm);
}

.spec th,
.spec td {
  padding: 0.85rem var(--space-5);
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--hairline);
}

.spec tr:nth-child(even) th,
.spec tr:nth-child(even) td {
  background: rgba(239, 241, 248, 0.03);
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-block-end: 0;
}

.spec th {
  width: 34%;
  font-weight: 500;
  color: var(--text-muted);
}

.spec td {
  width: 66%;
  color: var(--text);
}

.spec-ico {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-end: 0.7rem;
  vertical-align: middle;
  color: var(--mp-blue);
}

.spec-ico .ico {
  width: 1.25rem;
  height: 1.25rem;
}

.ico {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* ---------- Game shelves + thumbs ---------- */

.shelf {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-6) 0;
}

.shelf-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: 0 var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shelf-bar .ico {
  color: var(--mp-yellow);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.thumb {
  display: grid;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
}

.thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 496 / 300;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.thumb-name {
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.3;
  text-align: center;
}

.thumb:hover img {
  filter: brightness(1.08);
}

.thumb:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Game reel (auto-scroll chips) ---------- */

.reel {
  overflow: hidden;
  overflow-y: hidden;
  margin: 0 0 var(--space-7);
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.reel-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  animation: reel 48s linear infinite;
}

.reel:hover .reel-track,
.reel:focus-within .reel-track {
  animation-play-state: paused;
}

.chip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.75rem;
  padding: 0.45rem 1.25rem 0.45rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--body);
  font-weight: 500;
}

.chip img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 0.7rem;
}

.chip:hover {
  background: var(--surface);
}

.chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@keyframes reel {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Feature grid ---------- */

.feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.feat {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.feat-ico,
.feat-ico .ico {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--mp-blue);
}

.feat h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--body);
  font-weight: 700;
  color: var(--text);
}

.feat p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.55;
}

/* ---------- Phone stage ---------- */

.phones {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  margin-block: var(--space-6);
  text-align: center;
}

.phones-kicker {
  margin: 0;
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.phones-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--h2);
  font-weight: 700;
}

.phones-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: min(100%, 42rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone {
  margin: 0;
  padding: 0.45rem;
  border-radius: 1.4rem;
  background: #11141c;
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--hairline);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

/* ---------- Edge app tab ---------- */

.apptab {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-end: 0;
  z-index: 40;
  transform: translateY(-50%);
  display: grid;
  min-width: 3.4rem;
  border-radius: 12px 0 0 12px;
  background: var(--mp-yellow);
  color: #1a1200;
  box-shadow: var(--shadow-float);
}

.apptab-head,
.apptab-link {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0.7rem 0.45rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  writing-mode: horizontal-tb;
}

.apptab-head {
  border-block-end: 1px solid rgb(26 18 0 / 0.16);
}

.apptab-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

.apptab a:hover {
  background: rgb(26 18 0 / 0.08);
}

.apptab a:focus-visible {
  outline: 3px solid #000;
  outline-offset: -3px;
}

/* ---------- Jump chips: icon on the right ---------- */

.jump {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5.5rem;
  padding: var(--space-4) var(--space-5);
}

.jump-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.jump-icon {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--mp-blue);
}

.jump-icon .ico,
.jump-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jump--casino .jump-icon {
  color: var(--mp-red);
}

.jump--promo .jump-icon {
  color: var(--mp-yellow);
}

.jump-kicker {
  display: none;
}

/* ---------- Signup tiles + promo bar ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: var(--space-7) 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.tile-art {
  display: block;
  width: 100%;
  max-width: 10.5rem;
}

.tile-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 496 / 300;
  object-fit: contain;
  border-radius: var(--radius-card);
}

.prose .tile-go.btn,
.tile-go.btn {
  width: 100%;
  max-width: 10.5rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prose .tile-go.btn:hover,
.tile-go.btn:hover {
  background: #ffb31a;
  color: #1a1200;
  transform: translateY(-1px);
}

.prose .tile-go.btn:active,
.tile-go.btn:active {
  transform: translateY(0) scale(0.99);
}

.prose .tile-go.btn:focus-visible,
.tile-go.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #000, 0 0 0 3px var(--mp-yellow);
}

.codebar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  margin: var(--space-7) 0;
  padding: 1.15rem 1.5rem;
  border-radius: 1.75rem;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}

.codebar-label {
  font-size: var(--body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.codebar-code {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: #000413;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--h3);
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.codebar-code .ticket-icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--mp-yellow);
}

.codebar-code:hover {
  background: #0a1020;
}

.codebar-code:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.codebar .btn {
  min-width: 12rem;
  min-height: 3.5rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 62rem) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
  }

  .hero-inner,
  .split,
  .directions,
  .appblock,
  .footer-grid,
  .jumps,
  .games,
  .pull {
    grid-template-columns: 1fr;
  }

  .jumps,
  .kinds,
  .section--blocks .games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thumbs,
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .duo,
  .pair {
    grid-template-columns: 1fr;
  }

  .apptab {
    display: none;
  }

  .codebar {
    grid-template-columns: 1fr;
    border-radius: var(--radius-card);
  }

  .verdict-cols {
    grid-template-columns: 1fr;
  }

  .pull .btn {
    justify-self: stretch;
    min-width: 0;
  }

  .split--reverse .figure {
    order: 0;
  }

  .hero-copy {
    max-width: 38ch;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    gap: var(--space-6);
  }
}

@media (min-width: 62.0625rem) {
  .nav-panel {
    display: none !important;
  }

  .hero-inner {
    padding-inline-end: 3.25rem;
  }

  /* Ticket owns the right column. A cropped ball beside it reads as leftover. */
  .hero-visual {
    display: none;
  }
}

@media (max-width: 40rem) {
  /* Phone column: tighter gaps and no separators, so the inline rows wrap
     into two lines instead of one item per line. */
  .footer .footer-inline {
    gap: var(--space-2) var(--space-4);
    font-size: var(--body-sm);
  }

  .footer .footer-inline li + li::before {
    margin-inline-end: var(--space-4);
  }

  .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-bottom .age {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
  }

  /* Phones read tighter than desktop: the same rhythm feels loose on a
     390px column, so pull the section and figure spacing in. */
  .section {
    padding-block: var(--space-6);
  }

  .split,
  .with-aside {
    gap: var(--space-5);
  }

  .section-head {
    margin-block-end: var(--space-5);
  }

  .cta-band {
    padding-block: var(--space-6);
  }

  .hero {
    align-items: start;
    padding-block: var(--space-6) var(--space-6);
  }

  .hero-photo {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  .hero-copy {
    max-width: none;
  }

  .promo,
  .direction,
  .appblock,
  .jump,
  .game,
  .pull {
    padding: var(--space-5);
  }

  .jumps,
  .games,
  .kinds,
  .section--blocks .games,
  .feats,
  .duo,
  .pair,
  .phones-row,
  .tiles,
  .thumbs {
    grid-template-columns: 1fr;
  }

  .duo--rev .duo-copy {
    order: 0;
  }

  .codebar {
    grid-template-columns: 1fr;
    border-radius: var(--radius-card);
  }

  .apptab {
    display: none;
  }

  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-links img {
    height: 2.75rem;
  }
}

/* 320px handsets are real traffic in this market: shrink the wordmark and
   strip the badge chrome, but keep the flag — it is the locale signal. */
@media (max-width: 23rem) {
  .brand img {
    height: 1.125rem;
  }

  .nav-toggle {
    padding: 0 var(--space-3);
    font-size: var(--caption);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reel-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}