/* nine-casino.world — stylesheet (es-ES) */
/* Single dark theme. The ground is a near-black plum (~262deg) lit by two
   faint violet and gold washes; the brand accent is a luminous violet that
   carries on a dark field, with casino gold reserved for the
   call-to-action surfaces. Every colour is a token declared in :root. */

:root {
  color-scheme: dark;

  /* Ground + surfaces. One hue family (~262deg) climbing in lightness so
     every raised surface reads as the same material under more light —
     the whole ramp carries a trace of the brand violet instead of grey. */
  --shade-950: #06050C;   /* footer, deepest shade */
  --shade-900: #0B0912;   /* page ground */
  --shade-800: #16121F;   /* raised tiles, tables */
  --shade-750: #120F1B;   /* prose card */
  --shade-700: #1F1930;   /* hover surfaces, raised edges */
  --shade-650: #0E0B17;   /* hero far corner */

  /* Accent. Amber gold: the casino signal colour, carried on buttons and
     decorative marks where a dark label sits on top of it. */
  --accent: #FFC22E;
  --accent-soft: #FFD966;
  --accent-deep: #F0A500;

  /* Brand violet, lifted for a dark ground: it marks headings, rules,
     icons and every small uppercase label. */
  --violet: #A98BFF;
  --violet-soft: #C4AEFF;
  --violet-deep: #8E6BFF;

  /* Secondary signals. Used sparingly — ribbons, dots, live markers. */
  --magenta: #FF4D8D;
  --cyan: #2FD9C6;

  /* Cool counterweights for the hero field */
  --indigo-050: #171129;
  --iris-glow: rgba(169, 139, 255, 0.20);
  --azure-glow: rgba(47, 217, 198, 0.10);

  --accent-glow: rgba(255, 194, 46, 0.20);
  --accent-haze: rgba(255, 194, 46, 0.09);
  --accent-wash: rgba(255, 194, 46, 0.14);

  --violet-wash: rgba(169, 139, 255, 0.10);
  --violet-edge: rgba(169, 139, 255, 0.30);

  /* Text */
  --ink-100: #F2EEFF;
  --ink-300: #A79FC4;

  --hairline: rgba(226, 216, 255, 0.10);
  --hairline-strong: rgba(226, 216, 255, 0.20);

  /* Type. Sora for display — a contemporary geometric sans with squared
     terminals and a real 400-800 range, so the heavy hero figures are true
     weights rather than faux bold. Plus Jakarta Sans carries the body
     copy: open apertures, tall x-height, comfortable at small sizes. */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --step-1: 1.0625rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.6vw, 2.9rem);
  /* H1 — a touch tighter than before, so the compact hero keeps the lead. */
  --step-4: clamp(1.95rem, 1.3rem + 3.1vw, 3.35rem);

  /* Shape. Squarer than a pill-heavy set: a modern European casino look
     leans on crisp rectangles with a small, consistent radius. */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: clamp(14px, 1.6vw, 20px);
  --r-btn: 10px;

  /* Elevation. Deep and near-black — on a dark ground a shadow is what
     separates a raised surface from the field behind it. */
  --sh-1: 0 10px 24px -14px rgba(0, 0, 0, 0.72);
  --sh-2: 0 18px 38px -20px rgba(0, 0, 0, 0.76);
  --sh-3: 0 30px 60px -28px rgba(0, 0, 0, 0.80);

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --stack: clamp(1.75rem, 4.2vw, 3.25rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* No element may push the document wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

img, svg { max-width: 100%; }

/* Keeps a jump target clear of the viewport edge. */
.hero,
.categories,
.faq,
.prose h3 { scroll-margin-top: 1.5rem; }

body {
  margin: 0;
  /* Three very low-alpha washes keep the long page from reading as a flat
     slab; the solid near-black underneath is what the browser actually
     paints for overscroll and for the address bar. */
  background:
    radial-gradient(60% 40% at 92% -4%, rgba(143, 96, 255, 0.16) 0%, transparent 64%),
    radial-gradient(52% 34% at 4% 2%, rgba(255, 194, 46, 0.09) 0%, transparent 62%),
    radial-gradient(46% 30% at 50% 100%, rgba(47, 217, 198, 0.07) 0%, transparent 66%),
    var(--shade-900);
  background-attachment: fixed;
  color: var(--ink-300);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.68;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Top bar ---------- */

/* NB: .topbar also carries .container, which sets padding-inline.
   Only padding-block here — a `padding` shorthand would wipe it. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: clamp(1.25rem, 3vw, 2rem) 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: clamp(1.15rem, 3.2vw, 1.6rem);
  border-radius: var(--r-btn);
  /* Transparent border keeps the solid pill exactly as tall as the
     outlined one, so the pair sits on a shared baseline. */
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 180ms ease;
}

.pill-solid {
  background: linear-gradient(175deg, var(--accent-soft) 0%, var(--accent) 52%, var(--accent-deep) 100%);
  color: #3B2A02;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 18px -12px rgba(240, 165, 0, 0.7);
}

.pill-solid:hover,
.pill-solid:focus-visible {
  background: linear-gradient(175deg, #FFE79B 0%, var(--accent-soft) 55%, var(--accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 26px -12px rgba(240, 165, 0, 0.75);
  transform: translateY(-1px);
}

.pill-outline {
  background: var(--shade-800);
  border-color: var(--hairline-strong);
  color: var(--ink-100);
}

.pill-outline:hover,
.pill-outline:focus-visible {
  background: var(--violet-wash);
  border-color: var(--violet-edge);
  color: var(--violet);
  transform: translateY(-1px);
}

/* ---------- Slide-out drawer ----------
   Pure-CSS disclosure: a visually hidden checkbox drives the panel, and
   every toggle (burger, close, backdrop) is a <label> bound to it.
   The checkbox stays keyboard-focusable, so Space opens and closes. */

.brand-row {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.875rem);
}

.nav {
  display: flex;
  align-items: center;
}

/* ---------- Logo ---------- */

/* Two dice and the wordmark, set in a quiet raised badge so the mark reads
   as one object against the header instead of floating loose beside the
   text. Footprint stays close to 42x32: the badge is 38x38. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

.logo:hover,
.logo:focus-visible {
  background: var(--violet-wash);
}

.logo-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 120% at 24% 12%, rgba(255, 194, 46, 0.20) 0%, transparent 62%),
    linear-gradient(152deg, var(--shade-700) 0%, var(--shade-800) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 14px -10px rgba(0, 0, 0, 0.8);
  transition: border-color 200ms ease, box-shadow 220ms ease;
}

.logo:hover .logo-mark {
  border-color: var(--violet-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 18px -10px rgba(143, 96, 255, 0.55);
}

.logo-mark svg {
  display: block;
  width: 28px;
  height: 22px;
}

.logo-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-100);
  white-space: nowrap;
}

/* "Casino" carries the accent so the lockup has a hierarchy without
   changing the brand name or adding a second line of text. */
.logo-word b {
  font-weight: 700;
  color: var(--violet);
}

@media (max-width: 420px) {
  .logo { gap: 0.4375rem; padding-inline: 0.1875rem 0.25rem; }
  .logo-mark { width: 34px; height: 34px; border-radius: var(--r-sm); }
  .logo-mark svg { width: 25px; height: 20px; }
  .logo-word { font-size: 1rem; }
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid var(--hairline-strong);
  background: var(--shade-800);
  color: var(--ink-100);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.burger:hover {
  background: var(--violet-wash);
  border-color: var(--violet-edge);
  color: var(--violet);
}

/* The ring lands on the label, since the input itself is 1px. */
.nav-toggle:focus-visible + .burger {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(3, 2, 8, 0.72);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 280ms ease, visibility 280ms;
}

.nav-toggle:checked ~ .nav-backdrop {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(86vw, 360px);
  padding: 1rem 1rem 1.5rem;
  background: var(--shade-750);
  border-right: 1px solid var(--hairline);
  box-shadow: 26px 0 54px -26px rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  /* visibility keeps the closed panel's links out of the tab order —
     without it, keyboard users tab into an offscreen menu. */
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 320ms;
}

.nav-toggle:checked ~ .drawer {
  transform: translateX(0);
  visibility: visible;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
}

.drawer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-100);
}

.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-300);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.drawer-close:hover {
  background: var(--violet-wash);
  border-color: var(--violet-edge);
  color: var(--violet);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-link {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-100);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.drawer-link:hover,
.drawer-link:focus-visible {
  background: var(--violet-wash);
  color: var(--violet);
}

.drawer-sep {
  height: 1px;
  margin: 1rem 0.25rem;
  background: var(--hairline);
}

.drawer-heading {
  margin: 0 0 0.5rem;
  padding-inline: 0.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  opacity: 0.8;
}

/* ---------- Heading ---------- */

/* Tight: the hero below is a band rather than a stage, so the title does
   not need a deep well of space to separate them. */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding-block: clamp(1.75rem, 4.5vw, 2.75rem) 0;
}

.page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink-100);
  text-align: center;
  text-wrap: balance;
}

/* Short rule under the title, tying the heading to the accent without
   adding another line of text. */
.page-head::after {
  content: "";
  width: 68px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--magenta) 0%, var(--violet) 52%, var(--accent) 100%);
  opacity: 1;
}

/* ---------- Hero ----------
   Deliberately compact: a band, not a stage — an eyebrow, the offer, the
   CTA and a four-cell fact strip, so the first screen also shows the
   start of the article. */

.hero {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 2vw, 1.125rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  /* Violet and azure washes on opposing corners with one gold flare, over
     a pale indigo ramp — the cool field is what keeps the gold warm. */
  background:
    radial-gradient(90% 150% at 12% 0%, var(--iris-glow) 0%, transparent 58%),
    radial-gradient(80% 140% at 94% 100%, var(--azure-glow) 0%, transparent 62%),
    radial-gradient(60% 110% at 78% 4%, var(--accent-glow) 0%, transparent 54%),
    linear-gradient(156deg, var(--indigo-050) 0%, var(--shade-800) 54%, var(--shade-650) 100%);
  box-shadow:
    var(--sh-3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Colour rule along the top edge, brightest under the offer. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 4%, var(--magenta) 20%, var(--violet) 44%, var(--accent-deep) 62%, var(--cyan) 84%, transparent 96%);
  opacity: 0.9;
}

/* ---------- Hero decoration ----------
   Two quiet layers under the copy: an abstracted wheel bleeding off the
   right edge and a hairline weave. Both very low alpha, so they read as
   depth and never as pattern. */

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.030) 0 1px,
    transparent 1px 38px);
}

.decor-wheel {
  position: absolute;
  top: 50%;
  right: -78px;
  width: 260px;
  height: 260px;
  transform: translateY(-50%);
}

@media (max-width: 720px) {
  .decor-wheel {
    right: -104px;
    width: 210px;
    height: 210px;
    opacity: 0.6;
  }
}

/* Everything in flow sits above .hero-decor (z-index 0): positioned
   elements paint after in-flow content, so without this the decoration
   would cover the copy. */
.hero-flag,
.hero-body,
.hero-facts {
  position: relative;
  z-index: 1;
}

.hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--violet-edge);
  background: var(--violet-wash);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--violet-deep);
}

.hero-flag-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.25);
}

.hero-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
}

.hero-copy {
  flex: 1 1 17rem;
  min-width: 0;
}

.hero-kicker {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.hero-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--violet);
}

.hero-plus {
  font-size: clamp(0.9375rem, 1.9vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-100);
}

.hero-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-300);
}

.hero-act {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex: 0 0 auto;
}

.hero-coin {
  display: block;
  flex: 0 0 auto;
  width: clamp(56px, 8vw, 80px);
  filter: drop-shadow(0 10px 18px rgba(240, 165, 0, 0.30));
}

.hero-coin svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Four cells on one rule, so the supporting numbers never compete with
   the offer figure above them. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: clamp(0.75rem, 2vw, 0.9375rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 620px) {
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hero-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.hero-facts b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-100);
}

.hero-facts span {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  opacity: 0.85;
}

/* Below 560px the coin would crowd the button, so the pair stacks and the
   CTA takes the full width of the card. */
@media (max-width: 559px) {
  .hero-act {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-act .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--r-btn);
  border: 1px solid rgba(240, 165, 0, 0.45);
  background: linear-gradient(175deg, var(--accent-soft) 0%, var(--accent) 52%, var(--accent-deep) 100%);
  color: #3B2A02;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 22px -14px rgba(240, 165, 0, 0.8);
  transition: background 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  background: linear-gradient(175deg, #FFE79B 0%, var(--accent-soft) 55%, var(--accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 18px 30px -14px rgba(240, 165, 0, 0.85);
  transform: translateY(-2px);
}

/* The hero CTA only; in-article buttons keep the base size. */
.btn-lg {
  margin-top: 0;
  padding: 0.9375rem clamp(1.5rem, 4vw, 2.25rem);
  font-size: 0.9375rem;
}

/* ---------- Shimmer utility ----------
   Add `sheen` to any solid gold button. Registering the alpha as a
   typed custom property lets the hover step ramp instead of jumping;
   browsers without @property support just switch it instantly. */

@property --sheen-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

.sheen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --sheen-alpha: 0.5;
  transition: --sheen-alpha 260ms ease;
}

/* z-index -1 paints the gloss above the gold fill but below the label,
   so the text never washes out as the light passes over it. */
.sheen::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, var(--sheen-alpha)) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-16deg);
  animation: sheen-sweep 3.2s ease-in-out infinite;
}

.sheen:hover,
.sheen:focus-visible {
  --sheen-alpha: 0.72;
}

/* Travels for the first 1.7s, then rests offscreen for the remainder —
   a loop with a built-in pause rather than a constant sweep. */
@keyframes sheen-sweep {
  0%, 6%    { transform: translateX(-130%) skewX(-16deg); }
  58%, 100% { transform: translateX(330%) skewX(-16deg); }
}

/* ---------- Category cards ---------- */

/* Mobile-first: one column, widening to two then four. Explicit
   breakpoints rather than auto-fit, so the row never breaks 3+1. */
.categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 560px) {
  .categories { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .categories { grid-template-columns: repeat(4, 1fr); }
}

.cat-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 82px;
  padding: 0.9375rem 1.125rem 0.9375rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background:
    linear-gradient(158deg, var(--shade-800) 0%, var(--shade-750) 100%);
  box-shadow: var(--sh-1);
  text-decoration: none;
  overflow: hidden;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 240ms ease,
    transform 200ms ease;
}

/* Violet edge that grows on hover — the card's only moving part besides
   the lift, so the row never flickers when the pointer crosses it. */
.cat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--violet-soft) 0%, var(--violet-deep) 100%);
  opacity: 0.4;
  transition: opacity 200ms ease;
}

.cat-card:hover,
.cat-card:focus-visible {
  background: linear-gradient(158deg, var(--shade-700) 0%, var(--shade-800) 100%);
  border-color: var(--violet-edge);
  box-shadow:
    var(--sh-2),
    0 10px 24px -14px rgba(143, 96, 255, 0.40);
  transform: translateY(-3px);
}

.cat-card:hover::before,
.cat-card:focus-visible::before { opacity: 1; }

.cat-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cat-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink-100);
}

.cat-sub {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-300);
}

.cat-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.cat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Prose block ---------- */

.prose-card {
  margin-top: var(--stack);
  padding: clamp(1.75rem, 4.2vw, 3.25rem) clamp(1.25rem, 4.2vw, 3.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(143, 96, 255, 0.10) 0%, transparent 62%),
    linear-gradient(168deg, var(--shade-800) 0%, var(--shade-750) 100%);
  box-shadow: var(--sh-3);
}

/* The reading measure is capped on the text elements, not the wrapper, so
   a full-width block dropped into the prose can span the whole column. */
.prose {
  max-width: none;
  margin-inline: 0;
}

/* ---------- Content header row ----------
   Carries the contents control above the article. */

.prose-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* The rail carries its own bottom margin when it stands alone; inside
   this row the wrapper owns the spacing. */
.prose-head .toc { margin-bottom: 0; }

/* ---------- Table of contents ---------- */

/* Collapsed it is a single compact line sized to its own content, and the
   open list is absolutely positioned — so neither state reflows the prose. */
.toc {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.toc-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--shade-700);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.8);
  transition: background-color 180ms ease, border-color 180ms ease;
}

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

.toc-summary:hover,
.toc[open] .toc-summary {
  background: var(--violet-wash);
  border-color: var(--violet-edge);
}

.toc-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-100);
  white-space: nowrap;
}

.toc-chev {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: 0.125rem;
  color: var(--violet);
  transition: transform 220ms ease;
}

.toc-chev path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toc[open] .toc-chev { transform: rotate(180deg); }

.toc-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  min-width: 232px;
  padding: 0.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--violet-edge);
  background: var(--shade-700);
  box-shadow: 0 24px 42px -18px rgba(0, 0, 0, 0.85);
  animation: toc-in 200ms ease;
}

@keyframes toc-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Where ::details-content is supported, fade the panel in AND out.
   allow-discrete holds visibility through the closing fade — a plain
   animation can only ever play on open. */
@supports selector(::details-content) {
  .toc-panel { animation: none; }

  .toc::details-content {
    opacity: 0;
    transition: opacity 220ms ease, content-visibility 220ms allow-discrete;
  }

  .toc[open]::details-content { opacity: 1; }
}

.toc-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--violet);
}

.toc-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc-link {
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--r-xs);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-300);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

/* Numbered because a contents list is a real sequence — these are the
   sections in page order. */
.toc-link::before {
  counter-increment: toc;
  content: counter(toc);
  flex: 0 0 auto;
  width: 1ch;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--violet);
  opacity: 0.75;
}

.toc-link:hover,
.toc-link:focus-visible {
  background: var(--violet-wash);
  color: var(--ink-100);
}

.toc-link:hover::before,
.toc-link:focus-visible::before {
  opacity: 1;
}

.prose h2,
.prose h3,
.prose p { max-width: 68ch; }

/* Section heads carry a short violet stem on the left. It is drawn in the
   margin, so the text baseline and the reading measure are untouched. */
.prose h2 {
  position: relative;
  margin: clamp(2.25rem, 4.5vw, 3rem) 0 0.875rem;
  padding-left: 0.875rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.8rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--ink-100);
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

.prose h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  bottom: 0.22em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--violet-soft) 0%, var(--violet-deep) 100%);
}

.prose h3 {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--violet-deep);
  text-wrap: balance;
}

.prose > :first-child { margin-top: 0; }

/* ----- Data tables ----- */

.table-wrap {
  margin-block: clamp(1.25rem, 3vw, 1.75rem);
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--shade-750);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.8);
}

.prose table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.prose th {
  padding: 0.8125rem 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--violet-deep);
  background: var(--violet-wash);
  border-bottom: 1px solid var(--violet-edge);
}

.prose td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  line-height: 1.5;
  color: var(--ink-300);
  border-bottom: 1px solid var(--hairline);
}

/* Zebra striping, so a wide table stays readable once it scrolls. */
.prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.028); }

.prose td:first-child {
  color: var(--ink-100);
  font-weight: 600;
}

.prose tbody tr:last-child td { border-bottom: 0; }

.prose tbody tr:hover td { background: var(--violet-wash); }

/* ----- In-content call to action ----- */

.prose-cta {
  display: flex;
  margin-block: clamp(1.5rem, 3.5vw, 2.25rem);
}

.prose-cta .btn { margin-top: 0; }

/* The contents list is long now, so cap it and let it scroll. */
.toc-panel {
  max-height: min(360px, 60vh);
  overflow-y: auto;
}

.prose p {
  margin: 0 0 1.35rem;
  color: var(--ink-100);
  line-height: 1.7;
}

.prose p:last-child { margin-bottom: 0; }

/* Source copy carries real bullet lists; they inherit the paragraph
   measure and rhythm so a list never reads as a different column. */
.prose ul {
  max-width: 68ch;
  margin: 0 0 1.35rem;
  padding-left: 1.25rem;
  list-style: none;
}

.prose li {
  position: relative;
  margin-bottom: 0.5rem;
  color: var(--ink-100);
  line-height: 1.7;
}

.prose li:last-child { margin-bottom: 0; }

.prose li::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}

/* Numbered steps. Same rhythm and measure as the bullet list, but the
   marker is a counted chip drawn in the margin, so the text edge of both
   list types still lines up with the paragraphs above them. */
.prose ol {
  max-width: 68ch;
  margin: 0 0 1.35rem;
  padding-left: 2.25rem;
  list-style: none;
  counter-reset: step;
}

.prose ol li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -2.25rem;
  top: 0.12em;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--r-xs);
  background: var(--violet-wash);
  border: 1px solid var(--violet-edge);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--violet-deep);
}

.prose strong {
  font-weight: 700;
  color: var(--violet-deep);
}

/* ---------- In-content games showcase ---------- */

.games {
  position: relative;
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.125rem, 3vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(90% 130% at 88% 0%, var(--accent-haze) 0%, transparent 60%),
    linear-gradient(150deg, var(--shade-700) 0%, var(--indigo-050) 100%);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.75);
}

.games-label {
  margin: 0 0 clamp(0.875rem, 2vw, 1.125rem);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-deep);
}

/* Five across in two rows. No scrolling — the grid reflows to three then
   two columns instead. */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(0.625rem, 1.6vw, 0.9375rem);
}

@media (min-width: 520px) {
  .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .games-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card:hover,
.game-card:focus-visible { transform: translateY(-5px); }

.game-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 10px 22px -12px rgba(0, 0, 0, 0.8);
  transition: box-shadow 240ms ease;
}

.game-card:hover .game-art,
.game-card:focus-visible .game-art {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 16px 30px -12px rgba(0, 0, 0, 0.75),
    0 0 22px -6px rgba(143, 96, 255, 0.45);
}

/* Top gloss and floor shade, so every cover reads as a lit object
   rather than a flat swatch. */
.game-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(0, 0, 0, 0.28) 100%);
}

/* REAL ARTWORK GOES HERE.
   Add <img class="cover-img" src="cover.jpg" alt=""> as the first child of
   .game-art and it fills the tile, covering the illustration beneath.
   Supply 600x600 or larger; the gloss, ribbon and hover all still apply. */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vector scene behind the logotype: sits below the gloss pseudo-element
   because it is an earlier child, and below the title via z-index. */
.cover-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Slot covers are dominated by their own logotype, so the title is set
   as display type over the art. */
.cover-mark {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  z-index: 1;
  padding-inline: 8%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.6875rem, 2.3vw, 1rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: #FFFFFF;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(0, 0, 0, 0.6);
}

.cover-mark em {
  display: block;
  font-style: normal;
  color: #FFE58C;
}

.cover-mark small {
  display: block;
  margin-top: 0.25em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}

.cover-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.25rem 0.25rem;
  /* Deeper than --magenta so the small uppercase label keeps its contrast. */
  background: linear-gradient(90deg, #C9134F 0%, #7D1478 100%);
  color: #FFFFFF;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.game-name {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-100);
  transition: color 180ms ease;
}

.game-provider {
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--ink-300);
  opacity: 0.8;
}

.game-card:hover .game-name,
.game-card:focus-visible .game-name { color: var(--violet); }

/* ----- Cover art. Each is a layered radial "spotlight" over a diagonal
   base ramp, which is what gives the flat gradients depth. ----- */

.art-merge {
  background:
    radial-gradient(70% 60% at 32% 26%, #FF98DD 0%, transparent 62%),
    radial-gradient(80% 70% at 76% 82%, #6F44CB 0%, transparent 66%),
    linear-gradient(150deg, #CB44B2 0%, #6039AA 100%);
}

.art-tribes {
  background:
    radial-gradient(66% 58% at 30% 24%, #64E4B2 0%, transparent 60%),
    radial-gradient(80% 74% at 78% 84%, #286050 0%, transparent 64%),
    linear-gradient(150deg, #329473 0%, #244C40 100%);
}

.art-joker {
  background:
    radial-gradient(66% 58% at 32% 24%, #FF7D71 0%, transparent 60%),
    radial-gradient(84% 76% at 78% 86%, #60252F 0%, transparent 66%),
    linear-gradient(150deg, #CB3247 0%, #702531 100%);
}

.art-moon {
  background:
    radial-gradient(64% 56% at 30% 22%, #6CDDEB 0%, transparent 58%),
    radial-gradient(84% 76% at 80% 88%, #283F73 0%, transparent 66%),
    linear-gradient(150deg, #3580B2 0%, #273967 100%);
}

.art-sun {
  background:
    radial-gradient(58% 52% at 46% 40%, #FFEB94 0%, #F49D2B 46%, transparent 72%),
    radial-gradient(86% 80% at 82% 90%, #7D3723 0%, transparent 68%),
    linear-gradient(150deg, #EB732C 0%, #8A3724 100%);
}

.art-pachinko {
  background:
    radial-gradient(64% 58% at 30% 24%, #FF9CB9 0%, transparent 60%),
    radial-gradient(84% 76% at 80% 86%, #70275C 0%, transparent 66%),
    linear-gradient(150deg, #DB3D7A 0%, #6D2760 100%);
}

.art-crazy {
  background:
    radial-gradient(60% 54% at 44% 34%, #8EE4FF 0%, transparent 62%),
    radial-gradient(86% 78% at 80% 88%, #2D3B7D 0%, transparent 66%),
    linear-gradient(150deg, #4476DD 0%, #2D3570 100%);
}

.art-door {
  background:
    radial-gradient(62% 56% at 34% 26%, #FF8A7D 0%, transparent 58%),
    radial-gradient(86% 78% at 80% 88%, #55222D 0%, transparent 66%),
    linear-gradient(150deg, #B22D42 0%, #57242E 100%);
}

.art-funky {
  background:
    radial-gradient(62% 56% at 32% 24%, #FFABF2 0%, transparent 60%),
    radial-gradient(86% 78% at 80% 88%, #472770 0%, transparent 66%),
    linear-gradient(150deg, #9E42CB 0%, #4C2778 100%);
}

.art-lotto {
  background:
    radial-gradient(60% 54% at 40% 28%, #A8C1FF 0%, transparent 58%),
    radial-gradient(86% 78% at 80% 88%, #2D2E55 0%, transparent 66%),
    linear-gradient(150deg, #5256B2 0%, #303256 100%);
}

/* ---------- FAQ ----------
   <details> again: a native accordion that is keyboard-operable and
   announces its expanded state without a line of script. */

.faq {
  margin-top: var(--stack);
}

.faq-title {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-100);
  text-wrap: balance;
}

.faq-intro {
  max-width: 68ch;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.7;
  color: var(--ink-300);
}

/* Closing line under the accordion — same measure as the intro, so the
   block reads as a single column of text around the questions. */
.faq-outro {
  max-width: 68ch;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  line-height: 1.7;
  color: var(--ink-300);
}

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--shade-800);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.75);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.faq-item:hover {
  border-color: var(--violet-edge);
}

.faq-item[open] {
  background: var(--shade-700);
  border-color: var(--violet-edge);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.125rem, 3vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.35;
  color: var(--ink-100);
  transition: color 180ms ease;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q:hover,
.faq-item[open] .faq-q {
  color: var(--violet);
}

.faq-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--violet);
}

.faq-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The vertical stroke swings flat, turning the plus into a minus. */
.faq-icon-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 260ms ease;
}

.faq-item[open] .faq-icon-v {
  transform: rotate(90deg);
}

.faq-a {
  max-width: 70ch;
  margin: 0;
  padding: 0 clamp(1.125rem, 3vw, 1.5rem) clamp(1.125rem, 2.5vw, 1.375rem);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-300);
  animation: faq-in 220ms ease;
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsible gambling ---------- */

.rg {
  margin-top: var(--stack);
}

/* One quiet panel rather than four loose tiles on the page ground: the
   block has a header rule and a contained field, which lifts it out of
   the footer margin without shouting. */
.rg-panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(90% 150% at 4% 0%, var(--accent-haze) 0%, transparent 58%),
    linear-gradient(162deg, var(--shade-800) 0%, var(--shade-750) 100%);
  box-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.75);
}

.rg-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.375rem);
}

/* Short accent stem, then the rule that runs out to the panel edge. */
.rg-head::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--violet);
}

.rg-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}

.rg-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--ink-100);
}

.rg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.625rem, 1.5vw, 0.875rem);
}

@media (min-width: 560px) {
  .rg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .rg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rg-card {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-height: 78px;
  padding: 0.9375rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--shade-700);
  text-decoration: none;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

/* Only the two cards that actually navigate get a hover affordance. */
a.rg-card:hover,
a.rg-card:focus-visible {
  background: var(--violet-wash);
  border-color: var(--violet-edge);
  transform: translateY(-2px);
}

.rg-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--violet-wash);
  border: 1px solid var(--violet-edge);
  color: var(--violet);
}

.rg-icon svg {
  width: 20px;
  height: 20px;
}

.rg-icon svg path,
.rg-icon svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rg-age {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--violet-deep);
}

.rg-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.rg-name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-100);
}

.rg-sub {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--ink-300);
  opacity: 0.85;
}

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

footer {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2rem, 4.5vw, 2.75rem);
  background: var(--shade-950);
  border-top: 1px solid var(--hairline);
}

/* Colour hairline above the footer rule, so the page closes on the accent. */
footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 8%, rgba(255, 77, 141, 0.55) 28%, rgba(169, 139, 255, 0.85) 50%, rgba(47, 217, 198, 0.55) 72%, transparent 92%);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.footer-note {
  max-width: 62ch;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-300);
  opacity: 0.9;
}

/* ---------- Screen-reader helper ---------- */

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

.copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-100);
}

.copyright a {
  color: var(--violet);
  text-decoration: none;
  border-bottom: 1px solid var(--violet-edge);
}

.copyright a:hover,
.copyright a:focus-visible {
  color: var(--violet-deep);
  border-bottom-color: currentColor;
}

/* ---------- A11y ---------- */

a:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .btn:hover,
  .btn:focus-visible,
  .pill:hover,
  .pill:focus-visible,
  .cat-card:hover,
  .cat-card:focus-visible,
  .game-card:hover,
  .game-card:focus-visible,
  a.rg-card:hover,
  a.rg-card:focus-visible { transform: none; }
  .sheen::after { animation: none; opacity: 0; }
  .toc-panel,
  .faq-a { animation: none; }
  .toc::details-content { transition: none; }
}

/* ---------- Progressive-enhancement hooks (assets/js/main.js) ----------
   Both are inert until main.js adds the class. Without JS the page
   behaves exactly as before. */

/* Background scroll lock while the drawer is open. */
html.nav-open { overflow: hidden; }

/* Contents entry for the section currently in view. */
.toc-link.is-current {
  background: var(--violet-wash);
  color: var(--ink-100);
}

.toc-link.is-current::before { opacity: 1; }