/* ==========================================================================
   Tower Rush — single-game casino landing
   --------------------------------------------------------------------------
   Dark night-sky visual system: deep navy background throughout, amber CTA
   gradient, bright cyan-teal secondary accent, hazard-stripe energy on
   primary actions. Full-bleed hero with overlaid headline, aviator-style
   bold uppercase display type. Distinct footprint from the royal-drop /
   royaldrop-in / wheel-out family — no shared component classes.
   RE-THEMING A NEW GAME: change the "BRAND" block below. Everything else
   derives from it. Nothing further needs editing.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {

  /* --- BRAND: the only block to touch when re-theming --- */
  --color-bg:       #0c1526;   /* Tower Rush: deep night-sky navy */
  --color-surface:  #14213a;   /* card surface, a step lighter than bg */
  --color-accent:   #f5a623;   /* Tower Rush: amber CTA */
  --color-accent-2: #2fc4dd;   /* Tower Rush: bright cyan-teal */
  --color-text:     #f6ead2;   /* warm cream ink */
  --color-muted:    rgba(246, 234, 210, .62);

  /* --- Derived surfaces & lines --- */
  --color-surface-2: #1b2c4a;
  --color-line:      rgba(246, 234, 210, .14);
  --color-line-soft: rgba(246, 234, 210, .08);
  --color-accent-dim: rgba(245, 166, 35, .16);
  --color-accent-line: rgba(245, 166, 35, .42);
  --color-on-accent: #2b1400;
  --color-danger:    #ff6b5b;
  --color-success:   #4ade80;

  /* --- Header: a touch darker than the page bg for subtle layering --- */
  --color-header-bg:    #091120;
  --color-header-text:  #f6ead2;
  --color-header-muted: rgba(246, 234, 210, .72);
  --color-header-line:  rgba(246, 234, 210, .12);

  /* --- Typography --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               Helvetica, Arial, 'Apple Color Emoji', sans-serif;
  --font-display: 'Sora', var(--font-sans);

  --fs-xs:   clamp(0.75rem,  0.735rem + 0.08vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.86rem  + 0.08vw, 0.9375rem);
  --fs-base: clamp(1rem,     0.97rem  + 0.15vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem,1.01rem  + 0.28vw, 1.1875rem);
  --fs-h4:   clamp(1.0625rem,1.0rem   + 0.31vw, 1.25rem);
  --fs-h3:   clamp(1.1875rem,1.09rem  + 0.47vw, 1.5rem);
  --fs-h2:   clamp(1.5rem,   1.29rem  + 1.05vw, 2.125rem);
  --fs-h1:   clamp(2.125rem, 1.65rem  + 2.4vw,  3.375rem);

  --lh-tight: 1.12;
  --lh-snug:  1.4;
  --lh-base:  1.65;

  /* --- Space --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --section-y: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);

  /* --- Layout --- */
  --w-content: 760px;   /* copy, forms, FAQ */
  --w-wide:    960px;   /* specs table, screenshots, page shell */
  --gutter:    clamp(1rem, .7rem + 1.4vw, 1.75rem);
  --header-h:  60px;

  /* --- Radius / elevation / motion --- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --sh-md: 0 4px 14px rgba(0, 0, 0, .32);
  --sh-lg: 0 18px 44px rgba(0, 0, 0, .45);
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

/* Amber reads at ~8:1 against the navy bg — safe for inline text, not just
   solid button fills, unlike the old light-cream theme. */
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.2em; }
li { margin-bottom: var(--sp-2); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 3. LAYOUT ---------- */

/* .shell = page-wide container (960). .wrap = reading column (760). */
.shell {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Opt-in escape hatch: lets a table or figure inside .wrap reach 960. */
.bleed-wide {
  width: min(var(--w-wide), calc(100vw - var(--gutter) * 2));
  margin-inline: calc(50% - min(var(--w-wide), 100vw - var(--gutter) * 2) / 2);
}

.section { padding-block: var(--section-y); }
.section-alt { background: var(--color-surface); }
.section-lead { color: var(--color-muted); font-size: var(--fs-lg); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600; font-size: var(--fs-sm);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

.kicker {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}

.copy { color: var(--color-muted); }
.copy h3, .copy h4 { color: var(--color-text); margin-top: var(--sp-6); }
.copy strong { color: var(--color-text); font-weight: 600; }
.copy-legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); }

/* ---------- 4. BUTTONS ---------- */
.rivet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base),
              transform var(--t-fast), box-shadow var(--t-base);
}
.rivet-btn:hover { text-decoration: none; transform: translateY(-1px); }
.rivet-btn:active { transform: translateY(0); }

/* Amber CTA gradient straight from the identity doc — the "Build" button,
   reads as construction gear and pops hard against the navy. */
.rivet-btn-primary {
  background: linear-gradient(180deg, #f5a623 0%, #d97a0a 100%);
  color: var(--color-on-accent);
  border-color: rgba(43, 20, 0, .35);
  box-shadow: 0 4px 18px rgba(245, 166, 35, .3);
}
.rivet-btn-primary:hover {
  background: linear-gradient(180deg, #f7b346 0%, #e28418 100%);
  box-shadow: 0 6px 24px rgba(245, 166, 35, .4);
}

.rivet-btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line);
}
.rivet-btn-ghost:hover { border-color: var(--color-accent-line); background: var(--color-accent-dim); }

.rivet-btn-sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.rivet-btn-lg { min-height: 52px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

/* Prelaunch state — looks like a button, is not one. Not focusable, not a link. */
.rivet-btn.is-disabled {
  background: var(--color-surface-2);
  color: var(--color-muted);
  border-color: var(--color-line);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.rivet-btn.is-disabled:hover { transform: none; }

/* ---------- 5. HEADER ---------- */
/* A touch darker than the page — reads almost seamless against the hero
   image directly below it on the home page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-header-bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-header-line);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: rgba(9, 17, 32, .92); }
}

.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 100%;
}

.mark { display: flex; align-items: center; flex-shrink: 0; }
.mark:hover { text-decoration: none; }
.mark-logo {
  width: auto;
  height: 32px;
  transition: opacity var(--t-base);
}
.mark:hover .mark-logo { opacity: .85; }

.crew-nav { min-width: 0; }
.crew-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 2.2vw, var(--sp-6));
  list-style: none;
  margin: 0;
  padding: 0;
}
.crew-nav-list li { margin: 0; }
.crew-nav-list a {
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--color-header-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.crew-nav-list a:hover,
.crew-nav-list a:focus-visible { color: var(--color-header-text); text-decoration: none; }

.header-action { flex-shrink: 0; }
.header-action .rivet-btn { padding-block: var(--sp-2); }
.header-action .rivet-btn-secondary { display: none; } /* prelaunch fallback link has no room in the header */

@media (max-width: 380px) {
  .mark-logo { height: 26px; }
  .crew-nav-list a { font-size: 11px; }
}

/* Below this width the nav links and the header CTA no longer both fit —
   keep the CTA (it is the conversion path) and drop the text links; every
   destination they point to is one scroll away on this single-page site. */
@media (max-width: 640px) {
  .crew-nav { display: none; }
}

/* ---------- 6. HERO ----------
   Full-bleed background photo with a dark scrim, headline overlaid at
   left — same structure as the reference crash-game landers: nav bar
   directly above, bold uppercase headline, single CTA. */
.intro {
  position: relative;
  min-height: clamp(440px, 68vh, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line-soft);
}

.intro-visual { position: absolute; inset: 0; z-index: 0; }
.intro-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.intro-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 10, 20, .96) 0%, rgba(6, 10, 20, .88) 38%, rgba(6, 10, 20, .5) 66%, rgba(6, 10, 20, .22) 100%),
    linear-gradient(0deg, rgba(6, 10, 20, .92) 0%, transparent 45%),
    radial-gradient(60% 90% at 15% 100%, rgba(245, 166, 35, .16) 0%, transparent 70%);
}

.intro-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  padding-block: var(--sp-7);
}
.intro h1 {
  margin-bottom: var(--sp-3);
  max-width: 16ch;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.intro-sub {
  font-size: var(--fs-lg);
  color: var(--color-muted);
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
  text-wrap: pretty;
}

.intro-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.intro-actions .rivet-btn { width: 100%; max-width: 320px; }

/* ---------- 6b. OPERATOR PROMO (1xBet) ---------- */
.operator-promo {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(47, 196, 221, .12) 0%, transparent 70%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
}
.operator-logo { height: 34px; width: auto; }
.operator-copy h2 { margin-bottom: var(--sp-2); }
.operator-copy p { margin: 0; color: var(--color-muted); max-width: 56ch; }
.operator-cta { margin-top: var(--sp-1); }
@media (min-width: 700px) {
  .operator-promo { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; padding-inline: var(--sp-6); }
  .operator-copy p { margin-inline: 0; }
  .operator-cta { margin-top: 0; }
}

.rivet-btn-secondary {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
}
.rivet-btn-secondary:hover { color: var(--color-accent); border-color: var(--color-accent-line); text-decoration: none; }

.intro-age { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; max-width: 46ch; }
.intro-age a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.intro-age a:hover { color: var(--color-accent); }

@media (min-width: 700px) {
  .intro-actions { flex-direction: row; }
  .intro-actions .rivet-btn { width: auto; }
}

/* ---------- 7. SPECS TABLE (may reach 960) ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}
.blueprint-table { font-size: var(--fs-sm); }
.blueprint-table th,
.blueprint-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.blueprint-table tr:last-child th,
.blueprint-table tr:last-child td { border-bottom: 0; }
.blueprint-table th {
  width: 38%;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
}
.blueprint-table td { color: var(--color-muted); }
.blueprint-table .is-unwritten { color: var(--color-muted); opacity: .62; font-style: italic; }

/* ---------- 8. DEMO ---------- */
.demo-frame {
  position: relative;
  margin: var(--sp-5) auto 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.demo-poster { width: 100%; height: 100%; object-fit: cover; }
.demo-frame iframe,
.demo-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px;
  border: 0; border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform var(--t-base);
}
.demo-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.demo-frame.is-playing .demo-play,
.demo-frame.is-playing .demo-poster { display: none; }

/* Fullscreen toggle — only shown once the real demo has loaded */
.demo-fullscreen {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-base);
}
.demo-fullscreen:hover { background: rgba(0, 0, 0, .74); }
.demo-frame.is-playing .demo-fullscreen { display: flex; }
.demo-frame:fullscreen,
.demo-frame:-webkit-full-screen { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.demo-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--color-muted); }

/* Prelaunch stand-in for the demo embed */
.demo-placeholder {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px dashed var(--color-line);
  border-radius: var(--r-lg);
}
.demo-placeholder svg { color: var(--color-accent); }
.demo-placeholder h3 { margin: var(--sp-2) 0 0; color: var(--color-text); font-size: var(--fs-h4); }
.demo-placeholder p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); }

/* Repeat CTA under a block */
.block-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 700px) { .block-cta { flex-direction: row; justify-content: center; } }

/* Shared muted footnote under tables and lists */
.note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.note em { font-style: normal; color: var(--color-text); }

/* .note variant holding more than one paragraph */
.copy-note p { margin: 0 0 var(--sp-3); }
.copy-note p:last-child { margin-bottom: 0; }

/* Highlighted "what we know so far" panel */
.flag-box {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--r-md);
}
.flag-box h3 { margin-top: 0; font-size: var(--fs-h4); }
.flag-box p:last-child { margin-bottom: 0; }

/* ---------- 9. STEPS ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.5rem;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}
.steps li::before {
  content: counter(step);
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--fs-xs); font-weight: 700;
}
.steps li strong { display: block; color: var(--color-text); margin-bottom: var(--sp-1); }

/* ---------- 10. CARDS ---------- */
.tile-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 620px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }

.tile {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base);
}
.tile:hover { border-color: var(--color-accent-line); }
.tile-icon { color: var(--color-accent); margin-bottom: var(--sp-3); }
.tile h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.tile p { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }

/* ---------- 11. BOOSTERS ---------- */
/* Text-only cards — no per-floor icon art, just a colour tab and copy. */
.floor-grid { list-style: none; display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; }
@media (min-width: 620px) { .floor-grid { grid-template-columns: repeat(2, 1fr); } }

.floor-card {
  margin: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--r-md);
}
.floor-name { display: block; font-family: var(--font-display); font-weight: 700; margin-bottom: var(--sp-1); }
.floor-effect { display: block; color: var(--color-muted); font-size: var(--fs-sm); }

/* ---------- 12. PROS / CONS ---------- */
.tradeoffs { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (min-width: 620px) { .tradeoffs { grid-template-columns: repeat(2, 1fr); } }

.tradeoffs-col {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}
.tradeoffs-col h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.tradeoffs-col ul { list-style: none; display: grid; gap: var(--sp-2); margin: 0; padding: 0; }
.tradeoffs-col li {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.tradeoffs-col li::before { position: absolute; left: 0; font-weight: 700; }
.tradeoffs-pros li::before { content: "+"; color: var(--color-success); }
.tradeoffs-cons li::before { content: "\2013"; color: var(--color-danger); }

/* ---------- 13. SCREENSHOTS ---------- */
.capture-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 760px) { .capture-grid { grid-template-columns: repeat(3, 1fr); } }

/* A lone screenshot should not stretch across the grid */
.capture-grid:has(> .capture:only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }

.capture { margin: 0; }
.capture img {
  width: 100%;
  aspect-ratio: 506 / 1100;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}

/* ---------- 14. CASINO CARDS ---------- */
.spot-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 700px) { .spot-grid { grid-template-columns: repeat(2, 1fr); } }

.spot-card {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}
.spot-grid .spot-card { margin-top: 0; }
.spot-name { margin: 0; font-size: var(--fs-h4); }
.spot-bonus { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }
.spot-card .rivet-btn { margin-top: var(--sp-2); }
.spot-card-empty { border-style: dashed; }

/* ---------- 15. FAQ (native disclosure, no JS) ---------- */
.brief { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

.brief-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}
.brief-item[open] { border-color: var(--color-accent-line); }

.brief-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 600;
  list-style: none;
}
.brief-q::-webkit-details-marker { display: none; }
.brief-q:hover { color: var(--color-accent); }

.brief-chev { flex-shrink: 0; color: var(--color-accent); transition: transform var(--t-base); }
.brief-item[open] .brief-chev { transform: rotate(180deg); }

.brief-a { padding: 0 var(--sp-4) var(--sp-4); color: var(--color-muted); font-size: var(--fs-sm); }
.brief-a p { margin: 0; }

/* ---------- 14. CTA BAND ---------- */
.action-band {
  padding-block: var(--section-y);
  text-align: center;
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(245, 166, 35, .12) 0%, transparent 70%),
    var(--color-surface);
  border-block: 1px solid var(--color-line);
}
.action-band h2 { margin-bottom: var(--sp-3); }
.action-band p { color: var(--color-muted); margin-bottom: var(--sp-5); }
.action-band-note { font-size: var(--fs-xs); margin: var(--sp-4) 0 0; }

/* ---------- 15. AUTHOR ---------- */
.crew-box {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--r-md);
}
.crew-meta { margin-bottom: var(--sp-2); }
.crew-name { margin: 0; font-weight: 700; }
.crew-role {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.crew-bio { color: var(--color-muted); font-size: var(--fs-sm); }
.crew-review {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg);
  border-radius: var(--r-sm);
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.crew-dates { margin: 0; font-size: var(--fs-xs); color: var(--color-muted); }

/* ---------- 16. LEGAL PAGES ---------- */
.page-head { padding-bottom: 0; }
.page-updated { font-size: var(--fs-sm); color: var(--color-muted); }

/* Signs of problem gambling — deliberately plain, not styled as a feature list */
.signs-list {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding-left: 1.2em;
  max-width: 62ch;
}
.signs-list li { margin: 0; color: var(--color-muted); }
.signs-list li::marker { color: var(--color-accent); }

/* Help resource cards */
.guide-links {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
}
@media (min-width: 700px) { .guide-links { grid-template-columns: repeat(2, 1fr); } }

.guide-card {
  margin: 0;
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}
.guide-card a { font-weight: 600; }
.guide-card p { margin: var(--sp-1) 0 0; color: var(--color-muted); font-size: var(--fs-sm); }

/* ---------- 17. FOOTER ---------- */
.site-footer {
  padding-block: var(--sp-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.site-footer > .shell { display: grid; gap: var(--sp-4); }

/* Row 1 — legal links */
.footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { margin: 0; }
.footer-links a { color: var(--color-text); font-weight: 500; }
.footer-links a:hover { color: var(--color-accent); }

/* Row 2 — 18+ badge and responsible gambling line */
.footer-compliance {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--fs-xs);
}
.badge-18 { flex-shrink: 0; color: var(--color-danger); }

/* Row 3 — affiliate disclosure */
.footer-disclosure { margin: 0; color: var(--color-muted); font-size: var(--fs-xs); }

/* Row 4 — copyright */
.footer-copyright { margin: 0; color: var(--color-muted); font-size: var(--fs-xs); }

/* ---------- 18. WIDE LAYOUT ---------- */
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .floor-grid { grid-template-columns: repeat(4, 1fr); }
}