/* freedemoslot.co — mobile-first, dark. SA free-play demo slots. */

/* Display face for headings only; body copy stays on system fonts (fastest, and
   the differentiation is carried by the headings anyway). Latin subset, self-
   hosted — no third-party connection. swap = system font paints first. */
@font-face {
  font-family: "FDS Display";
  src: url("../fonts/chakra.woff2") format("woff2");
  /* Chakra Petch is a static 700 with no width axis: declaring the real weight
     stops the browser faux-bolding the 800 requests below, and the font-stretch
     values on the heading rules are simply ignored. */
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Surfaces: hue 272, LOW saturation so the chrome never competes with the game
     art. Lightness steps solved against contrast targets rather than picked by
     eye — the previous ladder was specced at 1.42 and measured 1.17.
     Measured: card/bg 1.45, card-2/card 1.33, line/card 1.55,
     line-strong/card 3.16 (WCAG 1.4.11 for interactive edges). */
  --bg: #0A080D;
  --bg-2: #120E16;
  --card: #34293D;
  --card-2: #483B54;
  --line: #52455F;          /* decorative hairline */
  --line-strong: #896F9F;   /* interactive edges + focus — meets 3:1 on --card */
  --text: #F4F1F8;
  --muted: #ACA4BF;
  /* Accents sampled from the logo artwork rather than guessed. The logo is gold
     (hue 38-45) + magenta-violet (hue 282-290); the old --purple was hue 252,
     a blue-violet that agreed with nothing on the page. */
  --gold: #FFC247;
  --gold-2: #FF9D3C;
  --purple: #A63DE8;        /* fills — #fff on it measures 4.71 (AA) */
  --purple-2: #D98BFF;      /* outlines, links, glow — 5.94 on --card */
  --free: #3DDC97;
  --free-ink: #04231a;
  --radius: 14px;
  --wrap: 1120px;
  --shadow: 0 6px 20px rgba(0,0,0,.5);
  --glow: 0 0 24px rgba(166,61,232,.45);
  --font-display: "FDS Display", "Segoe UI", system-ui, sans-serif;
}

/* Headings carry the brand voice: wide, heavy, tight-tracked. */
h1, h2, h3,
.section-title, .brand, .btn, .chip {
  font-family: var(--font-display);
  font-stretch: 118%;
  letter-spacing: -.01em;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* must win over .age-gate/.consent display */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Desaturated from #241a4a (48% sat) — this glow was the main source of the
     violet wash that made every page read as one flat purple field. */
  background: radial-gradient(1200px 600px at 50% -200px, #1A1226 0%, var(--bg) 60%);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-wrap: break-word;
}
body.locked { overflow: hidden; }
a { color: var(--purple-2); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Keyboard focus. The site had none outside .skip, so keyboard users were
   navigating blind. Gold reads 12:1 on the background. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; }
img { max-width: 100%; }
code { background: var(--bg-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 10px; }
/* Vertical only. A `padding` shorthand here would wipe .wrap's side gutter on
   every .wrap.section element — that was the flush-to-edge bug. */
.section { padding-top: 28px; padding-bottom: 8px; }
/* Section headers were 1.25rem grey and all the same weight — the page had no
   hierarchy at all. Bigger, uppercase, with a neon tick to anchor the left edge. */
.section-title { position: relative; margin: 0 0 14px; padding-left: 14px; font-size: clamp(1.3rem, 3.4vw, 1.75rem); font-weight: 800; font-stretch: 122%; text-transform: uppercase; letter-spacing: -.02em; }
.section-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--purple)); box-shadow: 0 0 12px rgba(166,61,232,.6); }
/* Responsive side gutter. Side properties only, for the same reason as above. */
@media (min-width: 560px) { .wrap { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 900px) { .wrap { padding-left: 16px; padding-right: 16px; } }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; border-radius: 8px; z-index: 60; }

/* buttons */
.btn { display: inline-block; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; text-align: center; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #201500; }
.btn-primary:hover { text-decoration: none; filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { text-decoration: none; border-color: var(--purple-2); }

/* header */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(10,8,13,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); font-size: 1.1rem; white-space: nowrap; }
.brand img { display: block; height: 32px; width: auto; }   /* 60px header; 28px read too small next to the nav */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.age-badge { background: var(--card-2); border: 1px solid var(--line); color: var(--gold); font-weight: 800; font-size: .8rem; padding: 4px 8px; border-radius: 8px; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 36px; padding: 0 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.nav-toggle-bar { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.main-nav { display: none; }
.main-nav.open { display: flex; }
.main-nav a { color: var(--muted); font-weight: 600; font-size: .95rem; }
.main-nav a:hover { color: var(--text); text-decoration: none; }

/* provider dropdown under "All Slots" */
.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; }
.sub-toggle:hover { color: var(--text); }
.sub-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s ease; }
.nav-item.open > .sub-toggle .sub-caret { transform: rotate(180deg); }
.sub-menu { display: none; }

@media (max-width: 759px) {
  .main-nav.open { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 0 0 12px 12px; padding: 4px 14px; box-shadow: 0 14px 32px rgba(0,0,0,.5); z-index: 45; }
  .main-nav.open a { padding: 13px 2px; border-bottom: 1px solid var(--line); }
  .main-nav.open a:last-child { border-bottom: 0; }
  /* Touch has no hover, so the sub-menu opens on tap and sits inline in the
     panel rather than floating. 44px target = the usual minimum. */
  .main-nav.open .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .main-nav.open .nav-item > a { flex: 1; border-bottom: 0; }
  .main-nav.open .sub-toggle { width: 44px; height: 44px; }
  .main-nav.open .nav-item.open .sub-menu { display: flex; flex-direction: column; width: 100%; padding-left: 14px; }
  .main-nav.open .sub-menu a { padding: 11px 2px; font-size: .9rem; border-bottom: 0; }
}
@media (min-width: 760px) {
  .main-nav { display: flex; margin-left: auto; gap: 22px; }
  .header-actions { margin-left: 22px; }
  .nav-toggle { display: none; }
  /* Stretch to the full 60px header so there is no dead gap between the
     trigger and the panel — the pointer would otherwise cross it and close. */
  .nav-item { align-self: stretch; }
  .sub-menu { position: absolute; top: 100%; left: -12px; min-width: 190px; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: var(--shadow); z-index: 46; }
  .nav-item:hover .sub-menu,
  .nav-item:focus-within .sub-menu,
  .nav-item.open .sub-menu { display: flex; }
  .sub-menu a { padding: 9px 12px; border-radius: 7px; white-space: nowrap; }
  .sub-menu a:hover { background: var(--card); color: var(--text); }
}

/* hero — arcade signage. Type-led and CSS-only on purpose: the previous hero
   pushed the first game to ~430px on desktop and ~480px on a phone, and the
   games are the thing people came for. Zero extra bytes, ~120px shorter. */
.hero { position: relative; padding: 30px 0 22px; text-align: center; overflow: hidden; isolation: isolate; }
/* Arcade floor: perspective grid, faded before it reaches the content. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(166,61,232,.16) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(166,61,232,.10) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
/* Stage lighting: magenta key behind the headline, warm rim either side — the
   logo's own pair. Percentages resolve against this box, so it must sit flush
   with .hero; an inset of -40%/-10% shifted the whole coordinate system and
   dragged the key light off to the left as a hard-edged slab. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 420px at 50% 6%, rgba(166,61,232,.26), transparent 68%),
    radial-gradient(680px 300px at 88% 0%, rgba(255,194,71,.12), transparent 72%),
    radial-gradient(680px 300px at 12% 0%, rgba(255,194,71,.09), transparent 72%);
}
.hero h1 {
  margin: 0 auto 12px;
  max-width: 13ch;              /* breaks as "FREE SLOTS / SOUTH AFRICA" without a <br> */
  text-wrap: balance;
  font-size: clamp(2rem, 7.2vw, 3.9rem);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-transform: uppercase;
  background: linear-gradient(150deg, #fff 12%, var(--gold) 62%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 18px rgba(166,61,232,.5));
}
.hero-sub { max-width: 620px; margin: 0 auto 18px; color: var(--muted); font-size: 1.02rem; }
.hero-sub strong { color: var(--text); }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Signage pills — these carry the three promises the lead paragraph used to
   spend 90 words on. */
.hero-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.hero-mark {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600; color: var(--muted);
  background: rgba(52,41,61,.5);
}
.hero-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--free); box-shadow: 0 0 8px var(--free); }
@media (min-width: 620px) { .hero-cta { flex-direction: row; justify-content: center; } }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.chip { background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.chip:hover { text-decoration: none; color: var(--text); }
.chip.is-active { background: var(--purple); border-color: var(--purple-2); color: #fff; box-shadow: var(--glow); }

/* game grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Elevation comes from three things together, not the fill alone: the surface
   step, a lighter top edge, and a real shadow. */
.game-card { display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--line); border-top-color: var(--line-strong); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
/* Hover lights the cabinet up rather than just nudging it. */
.game-card:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--purple-2); box-shadow: 0 14px 30px rgba(0,0,0,.55), var(--glow); }
.thumb { position: relative; aspect-ratio: 3/2; background: linear-gradient(150deg, var(--card-2), var(--line)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.thumb-ph { font-size: 1.8rem; font-weight: 800; color: rgba(255,255,255,.5); letter-spacing: 1px; }
/* Covers are real <img> now; fill the 3:2 box exactly as the old background-size:cover did. */
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) translateY(4px); background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #201500; font-size: .75rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; opacity: 0; transition: opacity .14s, transform .14s; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.game-card:hover .play-badge { opacity: 1; transform: translateX(-50%) translateY(0); }
.game-meta { padding: 9px 10px 11px; min-width: 0; }
/* The card is an <a>, so the title inherited the link colour and read as a link
   rather than a name — worse now that the accent is a stronger magenta. */
.game-name { display: block; color: var(--text); font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-card:hover .game-name { color: var(--purple-2); }
.game-sub { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }

/* page heads / content */
.page-head { padding-top: 26px; }
.page-head h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.page-sub { color: var(--muted); margin: 0 0 14px; }
.content-page { padding-top: 26px; padding-bottom: 10px; max-width: 820px; }
.content-page h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); }
.content-page h2 { margin-top: 28px; }
.lead { font-size: 1.1rem; color: var(--muted); }
.prov-links { padding-left: 18px; }
.empty { color: var(--muted); grid-column: 1 / -1; }

/* game page */
.breadcrumb { padding-top: 16px; color: var(--muted); font-size: .85rem; }
.breadcrumb a { color: var(--muted); }
/* Was capped at 900px, which on a 1440 screen left ~540px of empty page on either
   side and stacked the stage, the facts and the copy in one narrow column. The
   page now uses the full wrap; the reading measure is restored on .game-body. */
.game-page { padding-top: 8px; padding-bottom: 20px; }
.game-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* Grid items default to min-width:auto, and .demo-frame carries aspect-ratio 16/10
   with min-height 280px — the spec transfers that minimum height through the ratio
   into a 448px minimum WIDTH, which held the column open at 448px on a 375px
   phone. Everything in the column inherited it. Blocks ignore the transfer, which
   is why this only appeared once the two-column grid was introduced. */
.game-top > * { min-width: 0; }
.game-body { max-width: 72ch; }
.facts-more { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--purple-2); }
@media (min-width: 900px) {
  .game-top { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 0 26px; align-items: start; }
  /* Explicit placement so the DOM can stay stage -> facts -> guide (the order that
     reads correctly once this stacks on mobile) while the facts still occupy the
     right-hand column for the article's full height. */
  .game-stage { grid-column: 1; grid-row: 1; }
  .game-body  { grid-column: 1; grid-row: 2; }
  .game-facts { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 76px; align-self: start; }
  .game-facts .meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .game-stage .disclaimer.inline { margin-bottom: 0; }
}
.game-page h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 6px 0 16px; }
.h1-sub { display: block; font-size: .95rem; color: var(--muted); font-weight: 500; }
/* max-width is load-bearing, not decoration. min-height makes the height definite
   at 280px, and with width:auto the aspect-ratio transfers that back into a width
   of 280 x 1.6 = 448px — wider than a 375px phone, so every game page scrolled
   sideways. Measured on the live build too: this predates the redesign. */
.demo-frame { position: relative; max-width: 100%; background: #000; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 280px; aspect-ratio: 16/10; }
.demo-frame.is-live { aspect-ratio: auto; }
.demo-frame iframe { display: block; width: 100%; }
.demo-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: radial-gradient(600px 300px at 50% 0, var(--card-2), var(--bg)); }
/* Blurred game cover behind the play button. `scale` hides the soft edges blur
   leaves at the boundary; the ::after wash keeps the button and text legible over
   whatever artwork sits underneath. Children need a stacking context to sit above it. */
.demo-cover-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(26px) saturate(1.2); transform: scale(1.2); }
.demo-cover-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10,8,13,.66); }
.demo-cover > *:not(.demo-cover-bg) { position: relative; z-index: 1; }
/* Sharp at its native 300px — never upscaled, so it stays crisp. */
.demo-art { width: 260px; max-width: 62%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.demo-ph { font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.35); }
.demo-note { color: var(--muted); font-size: .85rem; margin: 0; }
.demo-dev { color: var(--gold); font-size: .8rem; margin: 4px 0 0; }
.meta-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
@media (min-width: 620px) { .meta-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.meta-strip div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.meta-strip span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
.meta-strip strong { font-size: 1rem; }
.content-block { margin: 26px 0; }
.content-block h2 { font-size: 1.25rem; border-left: 3px solid var(--gold); padding-left: 10px; }
.feature-list, .steps { padding-left: 20px; }
.feature-list li, .steps li { margin: 6px 0; }
.faq dt { font-weight: 700; margin-top: 14px; }
.faq dd { margin: 4px 0 0; color: var(--muted); }

/* disclaimers */
.disclaimer { background: rgba(255,194,71,.08); border: 1px solid rgba(255,194,71,.28); color: #f4e3b6; border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.disclaimer.inline { margin: 14px 0; }

/* footer */
.site-footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--bg-2); padding: 30px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; }
.footer-brand p { color: var(--muted); font-size: .9rem; margin: 8px 0 0; max-width: 44ch; }
.footer-col h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 10px; }
.footer-col a { display: block; color: var(--text); font-size: .92rem; padding: 4px 0; }
.footer-col a:hover { color: var(--purple-2); text-decoration: none; }
.footer-bar { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.footer-rg { color: var(--muted); font-size: .82rem; line-height: 1.7; margin: 0 0 8px; }
.footer-rg strong { color: var(--text); }
.copy { color: var(--muted); font-size: .78rem; margin: 0; }

/* age gate + consent overlays */
.age-gate { position: fixed; inset: 0; z-index: 80; background: rgba(5,4,10,.94); display: flex; align-items: center; justify-content: center; padding: 20px; }
.age-gate-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; max-width: 420px; text-align: center; }
.age-gate-card h2 { margin: 0 0 10px; }
.age-gate-card p { color: var(--muted); }
.age-gate-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.consent p { margin: 0; color: var(--muted); font-size: .88rem; flex: 1 1 240px; }
.consent-actions { display: flex; gap: 8px; }
@media (min-width: 640px) { .consent { left: auto; max-width: 460px; } }

/* provider intro cards (home) */
.provider-intro-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .provider-intro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.provider-intro-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.provider-intro-card h3 { margin: 0; font-size: 1.15rem; }
.provider-intro-card p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; }
.provider-intro-card .btn { align-self: flex-start; }

/* grouped /slots */
.provider-block { padding-top: 10px; }
/* /slots shows 12 games per provider (route_all_slots); trim to 10 on mobile,
   where the grid is 2 columns. Home page grids are untouched. */
/* /slots paints a slice of each studio rather than the whole catalogue: 10 cards on
   phones, 24 from 560px up. Every link stays in the HTML either way - a "View all
   <studio>" button sits under each grid - so this is a painting decision, not a link
   one. It is keyed to .is-capped rather than .provider-block because /new reuses that
   class for its date groups, where a cap would drop games with no route to them.
   scroll-margin clears the sticky header plus the sticky studio index. */
@media (max-width: 559px) { .is-capped .grid .game-card:nth-child(n+11) { display: none; } }
@media (min-width: 560px) { .is-capped .grid .game-card:nth-child(n+25) { display: none; } }
.provider-block { scroll-margin-top: 124px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.provider-block:last-of-type { border-bottom: none; padding-bottom: 8px; }
.provider-block-foot { display: flex; justify-content: flex-end; margin: 16px 0 0; }

/* Studio index: sticky under the 60px header, so switching studio stays one click away
   at any scroll position. This is the navigational half of what tabs would give,
   without hiding seven studios out of eight to get it. Below 720px the row scrolls
   sideways instead of wrapping, so it costs one line of height rather than two. */
.studio-index { position: sticky; top: 60px; z-index: 20; background: var(--bg);
  border-bottom: 1px solid var(--line); padding: 10px 0; margin-bottom: 4px; }
.studio-index .chips { margin: 0; }
@media (max-width: 719px) {
  .studio-index .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .studio-index .chips::-webkit-scrollbar { display: none; }
  .studio-index .chip { flex: 0 0 auto; white-space: nowrap; }
}
.provider-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
/* Same treatment as the home rails, so a studio heading looks the same wherever
   it appears. */
.provider-block-head h2 { margin: 0; font-size: clamp(1.2rem, 3.2vw, 1.55rem); font-weight: 800; font-stretch: 120%; text-transform: uppercase; letter-spacing: -.02em; }

/* providers directory */
.provider-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .provider-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.provider-list-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.provider-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.provider-list-head h2 { margin: 0; font-size: 1.25rem; }
.provider-tagline { color: var(--gold); font-weight: 600; font-size: .95rem; margin: 0; }
.provider-list-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.provider-list-card .btn { align-self: flex-start; margin-top: 4px; }

/* providers page — one big feature block per studio, with a uniform logo panel */
.provider-features { padding: 8px 0 12px; display: flex; flex-direction: column; gap: 22px; }

/* Mobile jump-nav: one chip per studio, horizontal scroll — the same pattern as
   the home rails, so any number of providers just scrolls sideways. Hidden from
   900px up, where the page needs no index. */
.provider-jump { display: none; }
@media (max-width: 899px) {
  .provider-jump {
    display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; scrollbar-width: none;
  }
  .provider-jump::-webkit-scrollbar { display: none; }
  .provider-jump .chip { flex: 0 0 auto; white-space: nowrap; }
  .provider-feature { scroll-margin-top: 72px; }   /* clear the sticky 60px header */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.provider-feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.pf-head { display: flex; flex-direction: column; gap: 16px; }
/* Was #fff. The logo plates carry their own (dark) background now, so a white
   panel would only show as a bright rim if one ever failed to fill the box. */
.pf-logo { flex: 0 0 auto; width: 200px; max-width: 100%; aspect-ratio: 2 / 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pf-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Shown only when a studio has no logo file — must read on the dark panel above. */
.pf-logo-text { color: var(--text); font-weight: 800; font-size: 1.1rem; text-align: center; padding: 0 10px; }
.pf-intro { min-width: 0; }
.pf-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-title h2 { margin: 0; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.pf-lead { color: var(--muted); margin: 8px 0 0; }
.pf-facts { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pf-col h3 { margin: 0 0 10px; font-size: .95rem; }
.pf-col .feature-list { margin: 0; color: var(--muted); font-size: .92rem; }
.provider-feature > .btn { margin-top: 18px; }
@media (min-width: 760px) {
  .pf-head { flex-direction: row; align-items: center; gap: 26px; }
  .pf-logo { width: 240px; }
  .pf-facts { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---- colour scheme A: card depth + teal "free" accent ---- */
.game-card, .provider-feature, .provider-list-card, .provider-intro-card, .how-card { box-shadow: var(--shadow); }
.btn-free { background: var(--free); color: var(--free-ink); }
.btn-free:hover { text-decoration: none; filter: brightness(1.06); }

/* home: keyword intro lead */
.home-lead { padding-top: 20px; padding-bottom: 4px; max-width: 900px; }
.home-lead p { color: var(--muted); margin: 0 0 12px; font-size: 1.02rem; }
.home-lead strong { color: var(--text); }

/* home: how free demo play works */
.how-it-works { padding-top: 30px; }
.how-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .how-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.how-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 16px; }
.how-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--free); color: var(--free-ink); font-weight: 800; font-size: .95rem; margin-bottom: 10px; }
.how-card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.how-card p { margin: 0; color: var(--muted); font-size: .9rem; }

/* home: FAQ accordion */
.home-faq { padding-top: 30px; }
.faq-accordion { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq-accordion details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 2px 16px; box-shadow: var(--shadow); }
.faq-accordion summary { cursor: pointer; font-weight: 700; padding: 14px 26px 14px 0; list-style: none; position: relative; }
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--free); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.faq-accordion details[open] summary::after { content: "\2212"; }
.faq-accordion details p { margin: 0 0 14px; color: var(--muted); }

/* provider detail page */
.provider-page { padding-top: 8px; padding-bottom: 20px; max-width: 980px; }
.provider-page > h1 { margin: 10px 0 6px; font-size: clamp(1.6rem, 5vw, 2.4rem); }
.provider-facts { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .provider-facts { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* theme tags */
.theme-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-tag { background: var(--card-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: .82rem; }

/* provider rails (home) — replaces the four alternating bands. Those repeated the
   same 2x2-collage-plus-text block four times over ~1,000px and showed only 4
   games per studio; a rail shows 12 in less height and varies the page rhythm.
   Phones scroll it horizontally, desktop lays the same 12 out as 2 x 6 so mouse
   users never have to drag a horizontal scroller. */
.rails { padding: 4px 0 0; }
.rail { padding: 20px 0 6px; border-top: 1px solid var(--line); }
.rail:first-child { border-top: 0; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.rail-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; font-size: clamp(1.2rem, 3.2vw, 1.55rem); font-weight: 800; font-stretch: 120%; text-transform: uppercase; letter-spacing: -.02em; }
.rail-more { white-space: nowrap; font-weight: 700; font-size: .92rem; color: var(--purple-2); }
.rail-tag { margin: 4px 0 0; color: var(--gold); font-weight: 600; font-size: .95rem; }
.rail-blurb { margin: 4px 0 0; color: var(--muted); font-size: .93rem; max-width: 78ch; }
.rail-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 14px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rail-track > .game-card { flex: 0 0 46%; scroll-snap-align: start; }
.rail-track::-webkit-scrollbar { height: 8px; }
.rail-track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.rail-track::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 560px) { .rail-track > .game-card { flex-basis: 30%; } }
@media (min-width: 820px) {
  /* Six across, two deep, no scrolling: a horizontal scroller with no arrow
     buttons is a trap for mouse users, and at this width all 12 simply fit. */
  .rail-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; overflow: visible; }
  .rail-track > .game-card { flex-basis: auto; }
}

/* Users who ask for less motion get none of the lift/slide affordances. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .game-card:hover { transform: none; }
  .play-badge { transform: translateX(-50%); }
}