/* ==========================================================================
   BET THE MIC — Majestic Isle Casino, Antigua & Barbuda — design system
   Dark casino aesthetic: deep aubergine, ribbon gold, Caribbean turquoise.
   Fonts: Barlow Condensed (display) + Inter var (UI). Self-hosted.

   PALETTE PROVENANCE — every brand colour below is SAMPLED from the supplied
   mark (assets/brand/mic-logo-source.jpg), not invented:
     shield field   #8d3d78   -> the --purple family and the dark --bg ramp
     shield border  #c8a34a   -> --gold-deep (antique, metallic)
     ribbon         #f5a011   -> --gold. The ribbon carries a yellow-orange-gold
                                 GRADIENT: bright #ffc702 through the centre,
                                 falling to #f18916 at the swallowtail ends. This
                                 is the mid-ramp, sampled at x=840 of 2362 across
                                 the source banner.
                                 The first pass took the ribbon's BRIGHTEST point
                                 (#fec502) and Allen read it as lemon - too near
                                 the outgoing IWAD yellow. Pulling ~9 degrees of
                                 hue warmer reads as gold rather than yellow, and
                                 ties the accents to the ribbon now that the
                                 ribbon is back in the lockup. It stays clearly
                                 distinct from --gold-deep (dE 31); #e8a72e was
                                 tried at dE 20, where the two begin to collapse.
     wordmark ink   #342c2a   -> warm neutral, informs --line and shadows
   The backgrounds are that purple taken far down in lightness rather than a
   generic dark grey, so every surface on the site is a tint of the brand
   rather than a neutral the brand sits on top of.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Aubergine ramp: the shield's #8d3d78 driven down in lightness. Keeps a
     violet cast in every surface so the dark is the brand's dark, not grey.

     LIFTED 2026-08-30. The first ramp bottomed out at 5.9% lightness against a
     brand purple of 39.6%, and measurement showed 78.9% of the page rendering
     as near-black: the violet cast was real in the numbers and too dark for
     anyone to SEE. It read as near-black wearing purple at the edges rather
     than as a purple site. bg-0 is now 13% and the near-black figure is 7.6%.
     Hue is held at 305 and saturation at 33% across all four steps - the hue
     was never wrong, only the lightness, so nothing here shifts toward mauve.
     Two steps lighter again (bg-0 at 16%) was rendered and rejected: the page
     flattens, the cards lose their edges and the horizon dissolves into it. */
  --bg-0: #2c162a;
  --bg-1: #381c36;
  --bg-2: #492546;
  --bg-3: #5f305b;

  /* Warm-neutral rules, from the wordmark ink rather than a cool slate. */
  --line: rgba(226, 199, 220, 0.14);
  --line-strong: rgba(226, 199, 220, 0.30);

  /* The mark's two golds. --gold is the ribbon at its MID-RAMP (warm, metallic
     - see the provenance note at the top of this block); --gold-deep is the
     shield border (antique). They sit dE 31 apart, so the pairing still reads
     as two distinct metals rather than one smeared tone. */
  --gold: #f5a011;
  --gold-deep: #c8a34a;

  /* The shield purple itself, for brand-forward surfaces. */
  --purple: #8d3d78;
  --purple-lift: #a84d90;

  /* Caribbean turquoise replaces Chicago sky blue as the functional accent:
     it reads as sea rather than as a second brand colour, and it is the one
     hue that stays legible against aubergine without competing with gold. */
  --sky: #35d6d0;
  --green: #2ee6a8;
  --red: #ff5c6c;

  --ink: #fbf3f8;
  --ink-dim: #dcc7d6;
  --muted: #ac91a5;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow-1: 0 6px 24px rgba(14, 5, 13, 0.5);
  --shadow-2: 0 18px 60px rgba(14, 5, 13, 0.66);
  --glow-gold: 0 0 0 1px rgba(245, 160, 17, 0.25), 0 8px 32px rgba(200, 163, 74, 0.30);

  --wrap: 1180px;
  --nav-h: 84px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

::selection { background: rgba(245, 160, 17, 0.9); color: #241019; }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 36px); } }

/* ---------- Type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(34px, 4.6vw, 52px); margin: 10px 0 14px; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }

.accent-gold { color: var(--gold); }
.accent-sky { color: var(--sky); }

section { position: relative; }
.section-pad { padding: 96px 0; }
@media (max-width: 720px) { .section-pad { padding: 64px 0; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-gold {
  background: linear-gradient(180deg, #ffe06b 0%, var(--gold) 45%, var(--gold-deep) 100%);
  color: #241019;
  box-shadow: var(--glow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(245, 160, 17, 0.4), 0 14px 44px rgba(200, 163, 74, 0.4); }
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { border-color: rgba(245, 160, 17, 0.6); color: var(--gold); transform: translateY(-2px); }
.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn .arr { transition: transform 0.18s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- Utility bar ---------- */
.utility-bar {
  background: #271426;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.utility-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.utility-bar .u-items { display: flex; gap: 22px; align-items: center; }
.utility-bar .u-item { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.utility-bar .u-item svg { width: 13px; height: 13px; color: var(--gold); }
.utility-bar .u-21 {
  font-weight: 700;
  color: var(--ink-dim);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: 0.04em;
}
@media (max-width: 860px) { .utility-bar .u-items .hide-m { display: none; } }

/* ---------- Nav ---------- */
/* ---------- Two-state brand mark ----------
   At rest the full artist mark (shield + ribbon + GOLD PALMS + wordmark) spans
   the utility bar and the header together; once the page scrolls the header
   sticks on its own and the small lockup inside .brand takes over.

   The two rows are SIBLINGS, so .site-top exists only to give the overlay one
   positioning context to span. The mark is absolutely positioned rather than
   placed in flow: putting it in either row would make that row 126px tall and
   push the other one down.

   Both marks are in the DOM and cross-fade. Swapping a src on scroll would
   flash the first time, because the large PNG has not decoded yet. */
/* ⚠ DO NOT WRAP THE TWO ROWS IN A CONTAINER TO HANG THIS OFF.
   position:sticky only sticks within its PARENT's box. Wrapping the utility
   bar and the header in a 126px-tall div gave the sticky header 41px of travel
   and it scrolled away with the wrapper - the header simply vanished on scroll.
   The mark is instead a direct child of <body>, positioned against the page,
   so the header keeps <body> as its parent and its full sticky travel. */
.brand-hero {
  position: absolute;
  /* Line the mark up with the .wrap gutter, not the viewport edge:
     .wrap is min(--wrap, 100% - 48px), so the gutter is half the remainder. */
  left: max(24px, calc((100% - var(--wrap)) / 2));
  top: 4px;
  z-index: 95;
  display: block;
  line-height: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.brand-hero img {
  width: auto;
  height: 118px;          /* utility bar 41 + header 85, less the top offset */
  display: block;
}

/* Clear a lane for the mark so the topbar items and the nav sit to its RIGHT
   rather than under it. The emblem is 167px wide at 118px tall. */
.utility-bar .wrap,
.site-header .nav { padding-left: 186px; }

/* Scrolled: the big mark retires, the small lockup arrives. */
.brand { transition: opacity 0.28s ease; }
body:not(.is-scrolled) .brand { opacity: 0; pointer-events: none; }
body.is-scrolled .brand-hero { opacity: 0; transform: translateY(-6px); pointer-events: none; }
body.is-scrolled .site-header .nav { padding-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .brand-hero, .brand { transition: none; }
}

/* PHONES: the two-state mark does not survive here and should not try to.
   At 390px the utility bar already drops two of its three left items, and a
   131px lane leaves ~200px for the phone number, "21+" and the nav - the
   topbar overflowed to 470px when the desktop lane was applied. The big mark
   also has nothing to breathe under: the hero starts immediately.
   So below 720px the small lockup is the ONLY mark, at rest and scrolled. */
@media (max-width: 719.98px) {
  .brand-hero { display: none; }
  .utility-bar .wrap,
  .site-header .nav { padding-left: 0; }
  body:not(.is-scrolled) .brand { opacity: 1; pointer-events: auto; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(44, 22, 42, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(44, 22, 42, 0.92); }
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav-h);
}
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
/* The lockup carries the ribbon, so it is WIDE (66x52), not a square tile, and
   it is presented bare rather than boxed: the old 44px rounded tile cropped the
   swallowtail tails, which are the detail that makes a ribbon read as a ribbon.
   52px is the measured floor - below it the tails thin out and the banner
   degrades into a smudge (see assets/brand/screenshots/lockup-sizes.png). */
.brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark img, .brand-mark svg { width: 70px; height: 52px; display: block; }
.brand-word { line-height: 1; }
.brand-word .bw-top {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 23px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-word .bw-top em { font-style: italic; color: var(--gold); }
.brand-word .bw-sub {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sky);
}
.brand-word .bw-sub svg { width: 7px; height: 7px; color: var(--gold); }

.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-dim);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.nav-links a.is-active { color: var(--gold); }
.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  place-items: center;
  margin-left: auto;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  position: relative;
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(44, 22, 42, 0.98);
  padding: 18px 0 26px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a.mm-link {
  display: block;
  padding: 14px 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a.mm-link.is-active { color: var(--gold); }
.mobile-menu .mm-cta { display: flex; gap: 12px; margin-top: 20px; }
.mobile-menu .mm-cta .btn { flex: 1; }

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: grid; }
}

/* At 390px the full-size lockup plus the wordmark plus the burger overflow the
   viewport by a hair. Scale the MARK rather than tightening the wordmark: the
   ribbon still reads at 46px, and the brand block is the thing with slack here
   because the nav links are already collapsed behind the burger. */
@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand-mark img, .brand-mark svg { width: 62px; height: 46px; }
  .brand-word .bw-top { font-size: 21px; }
  .brand-word .bw-sub { font-size: 8px; letter-spacing: 0.28em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 0;
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(53, 214, 208, 0.14), transparent 60%),
    radial-gradient(900px 480px at 85% 8%, rgba(200, 163, 74, 0.12), transparent 55%),
    var(--bg-0);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(226, 199, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 199, 220, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 600px at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 600px at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 120px;
}
.hero h1 {
  font-size: clamp(52px, 7.4vw, 96px);
  margin: 18px 0 20px;
}
.hero h1 .line { display: block; }
.hero h1 .gold-line {
  color: var(--gold);
  text-shadow: 0 0 42px rgba(200, 163, 74, 0.35);
}
.hero-sub {
  max-width: 520px;
  color: var(--ink-dim);
  font-size: 18px;
  margin-bottom: 30px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; color: var(--muted); font-size: 14px; }
.hero-trust .ht { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--green); }

/* Floating slip visual */
.hero-visual { position: relative; min-height: 460px; }
.slip-card {
  position: relative;
  width: min(400px, 100%);
  margin-left: auto;
  margin-right: 14px;
  background: linear-gradient(170deg, var(--bg-3), var(--bg-1) 70%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 22px;
  animation: float-a 7s ease-in-out infinite;
}
.slip-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.slip-head .display { font-size: 20px; letter-spacing: 0.08em; }
.chip-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--green);
  background: rgba(46, 230, 168, 0.1);
  border: 1px solid rgba(46, 230, 168, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
}
.chip-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
.slip-leg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.slip-leg:last-of-type { border-bottom: 0; }
.slip-leg .leg-info { min-width: 0; }
.slip-leg .leg-team { font-weight: 600; font-size: 15px; }
.slip-leg .leg-mkt { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.odds-pill {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  background: rgba(245, 160, 17, 0.09);
  border: 1px solid rgba(245, 160, 17, 0.3);
  border-radius: 9px;
  padding: 7px 12px;
  flex-shrink: 0;
}
.slip-total {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(245, 160, 17, 0.06);
  border: 1px dashed rgba(245, 160, 17, 0.35);
  display: flex; align-items: center; justify-content: space-between;
}
.slip-total .st-label { font-size: 12.5px; color: var(--muted); }
.slip-total .st-val { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--green); letter-spacing: 0.02em; }
.slip-btn { width: 100%; margin-top: 14px; }

.float-chip {
  position: absolute;
  background: rgba(56, 28, 54, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 11px 15px;
  font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.float-chip .fc-odds { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.float-chip.fc-1 { top: -9%; left: 2%; animation: float-b 6s ease-in-out infinite; }
.float-chip.fc-2 { bottom: -5%; right: -2%; animation: float-b 8s ease-in-out 0.8s infinite; }
.float-chip.fc-3 { top: -6%; right: 0; animation: float-b 7s ease-in-out 1.6s infinite; }
.float-chip .fc-ico {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(53, 214, 208, 0.12);
  border: 1px solid rgba(53, 214, 208, 0.3);
  display: grid; place-items: center;
}
.float-chip .fc-ico svg { width: 16px; height: 16px; color: var(--sky); }

@keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

/* Skyline strip */
.skyline {
  position: relative;
  margin-top: -80px;
  pointer-events: none;
}
/* The island reads at 1.78:1 against the hero sky, up from 1.15:1. At the old
   value the silhouette was drawn in very nearly the page background and Allen
   reported almost missing it entirely; the Chicago band it replaced was plainly
   visible, and this brings it back to that presence while staying a silhouette
   rather than becoming a foreground illustration. Measured, not guessed -
   #5f3a5c was tried and starts competing with the hero content above it. */
/* Re-pitched for the lifted ramp: the sky moved, so a fixed fill would have
   drifted. #553052 measured 1.78:1 against the OLD bg-0 and only 1.54:1
   against the new one; #663462 restores exactly 1.78:1. */
.skyline svg { width: 100%; height: auto; color: #663462; }

/* The horizon's palms pick up the LOGO's gold - Allen's question, and the
   answer is yes but MUTED, not --gold.
   At full --gold (#f5a011) the fronds measure 9.16:1 against the sky and
   5.14:1 against the ridge: a 5x jump that makes them the brightest thing in
   the band, pulls the eye to the bottom of the page and competes with the CTA.
   They stop being landscape and become stickers on it.
   #977440 is the same hue family two steps down - 3.89:1 / 2.19:1 (it was
   #8a6a3a before the ramp lifted; same ratios, re-solved for the new sky).
   Warm enough
   to read as moonlit gold and to echo the gold palms in the mark directly
   above, quiet enough to stay part of the silhouette. As purple they measured
   1.00:1 against the ridge, i.e. not separate elements at all. */
.skyline svg .palm { fill: #977440; }
.hero .skyline { filter: drop-shadow(0 -18px 40px rgba(53, 214, 208, 0.18)); }

@media (max-width: 960px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: 1fr; padding-bottom: 90px; }
  .hero-visual { min-height: 0; margin-top: 8px; }
  .slip-card { margin-inline: auto; }
  .float-chip.fc-1 { left: 0; }
  .float-chip.fc-2 { right: 0; }
  .float-chip.fc-3 { display: none; }
}
@media (max-width: 640px) {
  .float-chip.fc-1 { top: -5%; left: 4%; }
  .float-chip.fc-2 { display: none; }
}

/* ---------- Ticker ---------- */
.ticker {
  background: #271426;
  border-block: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.ticker::before, .ticker::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 90px; z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, #271426, transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, #271426, transparent); }
.ticker-label {
  position: absolute; inset: 0 auto 0 0;
  z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  background: #271426;
  border-right: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.ticker-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; }
.ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: ticker-scroll 46s linear infinite;
  padding-left: 140px;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.tick {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border-right: 1px solid var(--line);
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--ink-dim);
}
.tick .t-league { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--sky); }
.tick .t-odds { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ---------- Feature cards ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(170deg, rgba(95, 48, 91, 0.55), rgba(56, 28, 54, 0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 160, 17, 0.35);
  box-shadow: var(--shadow-1);
}
.card .card-ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(245, 160, 17, 0.16), rgba(245, 160, 17, 0.05));
  border: 1px solid rgba(245, 160, 17, 0.3);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.card .card-ico svg { width: 24px; height: 24px; color: var(--gold); }
.card h3 { font-size: 24px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- Sport tiles ---------- */
.sport-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1020px) { .sport-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sport-grid { grid-template-columns: repeat(2, 1fr); } }
.sport-tile {
  position: relative;
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sport-tile:hover { transform: translateY(-4px); border-color: rgba(53, 214, 208, 0.45); }
.sport-tile::after {
  content: "";
  position: absolute; inset: auto -20% -55% -20%;
  height: 120px;
  background: radial-gradient(closest-side, rgba(53, 214, 208, 0.16), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sport-tile:hover::after { opacity: 1; }
.sport-tile svg.s-ico { width: 30px; height: 30px; color: var(--sky); margin-bottom: 14px; }
.sport-tile .s-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; text-transform: uppercase; letter-spacing: 0.05em; }
.sport-tile .s-leagues { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- Split feature (casino teaser etc.) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split .section-head { margin-bottom: 26px; }
.feature-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 13px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-dim); font-size: 15.5px; }
.feature-list svg { width: 19px; height: 19px; color: var(--green); flex-shrink: 0; margin-top: 3px; }

/* Casino visual: fanned cards + chips (pure CSS/SVG) */
.casino-visual {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
}
.cv-glow {
  position: absolute; inset: 10% 6%;
  background: radial-gradient(closest-side, rgba(255, 92, 108, 0.14), transparent 70%);
}
.play-card {
  position: absolute;
  width: 150px; height: 210px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f8fafc, #dbe3ef);
  color: #10182b;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  border: 1px solid #fff;
}
.play-card .pc-corner { font-size: 26px; line-height: 0.9; }
.play-card .pc-corner span { display: block; font-size: 22px; }
.play-card .pc-pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; }
.play-card.red { color: #d92643; }
.play-card.c-1 { transform: rotate(-14deg) translate(-72px, 6px); z-index: 1; }
.play-card.c-2 { transform: rotate(2deg) translateY(-10px); z-index: 2; }
.play-card.c-3 { transform: rotate(16deg) translate(72px, 8px); z-index: 3; }
.casino-visual:hover .play-card.c-1 { transform: rotate(-18deg) translate(-86px, 2px); }
.casino-visual:hover .play-card.c-3 { transform: rotate(20deg) translate(86px, 4px); }
.play-card { transition: transform 0.35s ease; }
.poker-chip {
  position: absolute;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.poker-chip::before {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.65);
}
.poker-chip.gold { background: repeating-conic-gradient(var(--gold) 0 30deg, #b17f00 30deg 60deg); color: #241a00; }
.poker-chip.blue { background: repeating-conic-gradient(#3ba7e0 0 30deg, #1a5f8a 30deg 60deg); color: #04121d; }
.poker-chip.chip-1 { bottom: 8%; left: 12%; animation: float-b 6s ease-in-out infinite; }
.poker-chip.chip-2 { top: 10%; right: 14%; width: 60px; height: 60px; font-size: 14px; animation: float-b 7s 1s ease-in-out infinite; }

/* ---------- Promo cards ---------- */
.promo-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-3), var(--bg-1) 75%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.promo-card:hover { transform: translateY(-6px); border-color: rgba(245, 160, 17, 0.5); box-shadow: var(--shadow-2); }
.promo-card.featured {
  background: linear-gradient(165deg, rgba(200, 163, 74, 0.16), var(--bg-1) 70%);
  border-color: rgba(245, 160, 17, 0.55);
}
.promo-tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
  background: rgba(53, 214, 208, 0.1);
  border: 1px solid rgba(53, 214, 208, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.promo-card.featured .promo-tag { color: var(--gold); background: rgba(245, 160, 17, 0.1); border-color: rgba(245, 160, 17, 0.4); }
.promo-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 4vw, 56px);
  text-transform: uppercase;
  line-height: 0.95;
}
.promo-amount .pa-sub { display: block; font-size: 22px; color: var(--muted); font-weight: 600; letter-spacing: 0.08em; margin-top: 6px; }
.promo-card .promo-desc { color: var(--muted); font-size: 14.5px; margin: 16px 0 24px; flex: 1; }
.promo-card .btn { align-self: flex-start; }
.promo-star {
  position: absolute;
  top: -22px; right: -18px;
  width: 120px; height: 120px;
  color: rgba(245, 160, 17, 0.07);
}
.promo-card.featured .promo-star { color: rgba(245, 160, 17, 0.16); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  counter-increment: step;
  position: relative;
  background: linear-gradient(170deg, rgba(95, 48, 91, 0.5), rgba(56, 28, 54, 0.85));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 28px 30px;
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 160, 17, 0.5);
  display: block;
  margin-bottom: 16px;
}
.step h3 { font-size: 24px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- Stats band ---------- */
.stats-band {
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(200, 163, 74, 0.05), rgba(53, 214, 208, 0.05));
}
.stats-band .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 44px 0;
  text-align: center;
}
@media (max-width: 820px) { .stats-band .wrap { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; } }
.stat .stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 54px);
  color: var(--gold);
  letter-spacing: 0.02em;
}
.stat .stat-label { color: var(--muted); font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 26, 49, 0.5);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item.is-open { border-color: rgba(245, 160, 17, 0.4); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 16px;
}
.faq-q .faq-x {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.faq-q .faq-x::before { content: ""; width: 10px; height: 2px; background: currentColor; position: absolute; }
.faq-q .faq-x::after { content: ""; width: 2px; height: 10px; background: currentColor; position: absolute; transition: transform 0.25s ease; }
.faq-item.is-open .faq-x { background: var(--gold); border-color: var(--gold); color: #241019; }
.faq-item.is-open .faq-x::after { transform: rotate(90deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 110px 0 130px;
  background:
    radial-gradient(700px 340px at 50% 20%, rgba(200, 163, 74, 0.16), transparent 65%),
    var(--bg-1);
  border-top: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 16px; }
.cta-band p { color: var(--ink-dim); font-size: 18px; max-width: 520px; margin: 0 auto 34px; }
/* The CTA band sits on --bg-1, LIGHTER than the hero sky, so the hero's fill
   plus an opacity multiply left this island DARKER than its own backdrop and
   reading at 1.03:1 - invisible, and inverted. Both bands come from one source
   and must stay in step in APPEARANCE, which means each needs a fill pitched
   against the surface it actually sits on, not one value plus an alpha. */
.cta-band .skyline { position: absolute; left: 0; right: 0; bottom: -6px; margin: 0; opacity: 1; }
/* Likewise for the CTA band, which sits on bg-1: #6b4468 fell from 2.31:1 to
   1.89:1 when the ramp lifted; #884482 restores 2.30:1. */
.cta-band .skyline svg { color: #884482; }
.cta-band .cta-inner { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { background: #271426; border-top: 1px solid var(--line); padding: 64px 0 34px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-about p { color: var(--muted); font-size: 14px; max-width: 300px; margin-top: 16px; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--muted); font-size: 14.5px; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--gold); }
.footer-legal {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12.5px;
}
.footer-legal .rg { display: flex; gap: 10px; align-items: center; }
.footer-legal .badge-21 {
  font-weight: 800;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--ink-dim);
  flex-shrink: 0;
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 70px;
  background:
    radial-gradient(800px 380px at 22% 0%, rgba(53, 214, 208, 0.12), transparent 60%),
    radial-gradient(700px 340px at 82% 20%, rgba(200, 163, 74, 0.1), transparent 55%),
    var(--bg-0);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(44px, 6.4vw, 76px); margin: 14px 0 16px; }
.page-hero .ph-sub { max-width: 560px; color: var(--ink-dim); font-size: 17.5px; margin-bottom: 28px; }

/* ---------- Odds board (sports page) ---------- */
.board-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.board-tab {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s ease;
}
.board-tab svg { width: 16px; height: 16px; }
.board-tab:hover { border-color: rgba(245, 160, 17, 0.5); color: var(--ink); }
.board-tab.is-active {
  background: linear-gradient(180deg, #ffe06b, var(--gold) 60%, var(--gold-deep));
  border-color: transparent;
  color: #241019;
}
.board { display: none; }
.board.is-active { display: block; }
.game-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 108px);
  gap: 12px;
  align-items: center;
  background: rgba(16, 26, 49, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.game-row:hover { border-color: rgba(53, 214, 208, 0.4); transform: translateX(3px); }
.game-row .g-meta { min-width: 0; }
.game-row .g-teams { font-weight: 600; font-size: 15.5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.game-row .g-at { color: var(--muted); font-weight: 400; font-size: 13px; }
.game-row .g-time { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.game-row .g-time .live { color: var(--red); font-weight: 700; }
.g-odd {
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 6px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.g-odd:hover { border-color: var(--gold); background: rgba(245, 160, 17, 0.07); transform: translateY(-2px); }
.g-odd .go-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-odd .go-val { font-weight: 700; font-size: 14.5px; color: var(--green); font-variant-numeric: tabular-nums; }
.board-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
@media (max-width: 720px) {
  .game-row { grid-template-columns: 1fr; gap: 10px; }
  .game-row .g-odds-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.g-odds-wrap { display: contents; }
@media (max-width: 720px) { .g-odds-wrap { display: grid; } }

/* ---------- Casino game cards ---------- */
.game-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--bg-3), var(--bg-1) 80%);
  padding: 30px 26px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.game-card:hover { transform: translateY(-6px); border-color: rgba(255, 92, 108, 0.5); }
.game-card .gc-art {
  position: absolute;
  top: 18px; right: 18px;
  width: 84px; height: 84px;
  opacity: 0.9;
  transition: transform 0.3s ease;
}
.game-card:hover .gc-art { transform: scale(1.1) rotate(-4deg); }
.game-card h3 { font-size: 26px; }
.game-card p { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.game-card .gc-tag {
  position: absolute; top: 20px; left: 24px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red);
}

/* ---------- Register page ---------- */
.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: start;
  padding: 72px 0 100px;
}
@media (max-width: 960px) { .register-layout { grid-template-columns: 1fr; gap: 44px; } }

.reg-pitch .bonus-card {
  margin: 30px 0;
  background: linear-gradient(160deg, rgba(200, 163, 74, 0.18), rgba(56, 28, 54, 0.9) 70%);
  border: 1px solid rgba(245, 160, 17, 0.5);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.reg-pitch .bonus-card .promo-star { top: -30px; right: -24px; width: 150px; height: 150px; color: rgba(245, 160, 17, 0.12); }
.reg-pitch .bonus-amount { font-family: var(--font-display); font-weight: 700; font-size: 46px; text-transform: uppercase; line-height: 1; }
.reg-pitch .bonus-amount small { display: block; font-size: 18px; color: var(--ink-dim); letter-spacing: 0.1em; margin-bottom: 6px; }
.reg-pitch .bonus-note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

.reg-form-card {
  background: linear-gradient(170deg, var(--bg-2), var(--bg-1) 80%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 40px;
}
@media (max-width: 560px) { .reg-form-card { padding: 28px 22px; } }
.reg-form-card h2 { font-size: 34px; margin-bottom: 6px; }
.reg-form-card .rf-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  margin-bottom: 7px;
}
.field .input-wrap { position: relative; }
.field input {
  width: 100%;
  background: rgba(44, 22, 42, 0.7);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  padding: 14px 16px;
  font-size: 15px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input::placeholder { color: #5b6b84; }
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 160, 17, 0.15);
}
.field.has-error input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 92, 108, 0.12); }
.field .err {
  display: none;
  color: var(--red);
  font-size: 12.5px;
  margin-top: 6px;
}
.field.has-error .err { display: block; }
.field .hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.pw-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  color: var(--muted);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.pw-toggle:hover { color: var(--gold); }
.pw-meter { display: flex; gap: 5px; margin-top: 9px; }
.pw-meter span { height: 4px; flex: 1; border-radius: 2px; background: var(--line-strong); transition: background 0.25s ease; }
.pw-meter.s1 span:nth-child(1) { background: var(--red); }
.pw-meter.s2 span:nth-child(-n+2) { background: #ffae3d; }
.pw-meter.s3 span:nth-child(-n+3) { background: #ffe06b; }
.pw-meter.s4 span:nth-child(-n+4) { background: var(--green); }
.pw-label { font-size: 12px; color: var(--muted); margin-top: 5px; min-height: 16px; }

.promo-toggle {
  background: none;
  color: var(--sky);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 18px;
}
.promo-toggle:hover { text-decoration: underline; }
.promo-field { display: none; }
.promo-field.is-open { display: block; }

.check-field { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; }
.check-field input {
  appearance: none;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(44, 22, 42, 0.7);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.15s ease;
  margin-top: 1px;
}
.check-field input:checked { background: var(--gold); border-color: var(--gold); }
.check-field input:checked::before {
  content: "";
  width: 11px; height: 6px;
  border-left: 2.5px solid #241019;
  border-bottom: 2.5px solid #241019;
  transform: rotate(-45deg) translateY(-1px);
}
.check-field label { font-size: 13.5px; color: var(--muted); cursor: pointer; }
.check-field label a { color: var(--sky); }
.check-field label a:hover { text-decoration: underline; }
.check-field.has-error input { border-color: var(--red); }

.reg-submit { width: 100%; margin-top: 6px; }
.reg-alt { text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px; }
.reg-alt a { color: var(--gold); font-weight: 600; }
.reg-alt a:hover { text-decoration: underline; }
.reg-success {
  display: none;
  text-align: center;
  padding: 40px 10px;
}
.reg-success.is-shown { display: block; }
.reg-success .rs-ico {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(46, 230, 168, 0.12);
  border: 1px solid rgba(46, 230, 168, 0.45);
  display: grid; place-items: center;
}
.reg-success .rs-ico svg { width: 32px; height: 32px; color: var(--green); }

.trust-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-dim);
  background: rgba(16, 26, 49, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
}
.trust-chip svg { width: 14px; height: 14px; color: var(--green); }

/* ---------- Login modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(4, 7, 13, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  width: min(420px, 100%);
  background: linear-gradient(170deg, var(--bg-3), var(--bg-1) 75%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 36px;
  position: relative;
  animation: modal-in 0.25s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.modal h2 { font-size: 30px; margin-bottom: 4px; }
.modal .m-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.modal-close:hover { color: var(--ink); border-color: var(--line-strong); }
.modal .btn { width: 100%; }
.modal .m-forgot { display: block; text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--sky); }
.modal .m-forgot:hover { text-decoration: underline; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Misc ---------- */
.divider-stars {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--gold);
  margin: 0 auto;
}
.divider-stars svg { width: 14px; height: 14px; }
.divider-stars::before, .divider-stars::after {
  content: "";
  height: 1px; width: min(140px, 20vw);
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.divider-stars::after { background: linear-gradient(-90deg, transparent, var(--line-strong)); }

/* ==========================================================================
   Promo code step (register.html) — post-registration, $200 free play.
   Presentation only; the offshore team wires validation and attribution.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.promo-step { margin-top: 26px; text-align: left; }

.promo-entry, .promo-result {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(141, 61, 120, 0.16), rgba(56, 28, 54, 0.6));
  padding: 22px 22px 18px;
}

.promo-head h3, .promo-result h3 {
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 0.01em;
  margin: 8px 0 6px;
  color: var(--ink);
}
.promo-head p, .promo-result > p { color: var(--ink-dim); font-size: 14.5px; margin: 0 0 16px; }
.promo-head p strong { color: var(--gold); }

.promo-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid rgba(200, 163, 74, 0.4);
  background: rgba(200, 163, 74, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
}

.promo-input-row { display: flex; gap: 10px; align-items: stretch; }
.promo-input-row input {
  flex: 1 1 auto; min-width: 0;
  background: rgba(16, 7, 16, 0.7);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 13px 15px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.promo-input-row input::placeholder { color: var(--muted); text-transform: none; letter-spacing: normal; }
.promo-input-row input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-color: transparent; }
.promo-input-row .btn { flex: 0 0 auto; padding-inline: 22px; }

.promo-note { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; }
.promo-note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.promo-skip {
  display: inline-block; margin-top: 14px;
  color: var(--muted); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.promo-skip:hover { color: var(--ink-dim); }

/* --- result states --- */
.promo-result { text-align: center; }
.pr-ico {
  width: 46px; height: 46px; margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(46, 230, 168, 0.12);
  border: 1px solid rgba(46, 230, 168, 0.4);
  color: var(--green);
}
.pr-ico svg { width: 24px; height: 24px; }
.pr-ico-bad {
  background: rgba(255, 92, 108, 0.12);
  border-color: rgba(255, 92, 108, 0.4);
  color: var(--red);
}

.pr-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(245, 160, 17, 0.1);
  border: 1px solid rgba(245, 160, 17, 0.28);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.pr-meta {
  display: grid; gap: 1px;
  margin: 4px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  text-align: left;
}
.pr-meta > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: rgba(16, 7, 16, 0.72);
  padding: 11px 14px;
}
.pr-meta dt { color: var(--muted); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.pr-meta dd { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 600; text-align: right; }
.pr-meta .pr-amount {
  font-family: var(--font-display); font-size: 22px; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

.promo-result .btn { margin-top: 4px; }
.promo-bad .promo-input-row { margin-top: 14px; }

@media (max-width: 520px) {
  .promo-input-row { flex-wrap: wrap; }
  .promo-input-row .btn { width: 100%; }
  .pr-meta > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pr-meta dd { text-align: left; }
}

/* Support number — topbar and footer. The brief places a real 24/7 number on a
   site whose copy already promises "support that picks up", so it appears in
   both the persistent chrome (topbar, every page) and the footer brand column
   where a player looks for contact details. tel: links so it dials on mobile. */
.u-phone {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.u-phone svg { width: 13px; height: 13px; }
.u-phone:hover { color: var(--ink); }

.footer-support {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(200, 163, 74, 0.35);
  background: rgba(200, 163, 74, 0.08);
  border-radius: var(--radius);
  color: var(--ink);
}
.footer-support:hover { border-color: rgba(245, 160, 17, 0.55); background: rgba(245, 160, 17, 0.1); }
.footer-support svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
.footer-support span { display: flex; flex-direction: column; line-height: 1.25; }
.footer-support .fs-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.footer-support strong {
  font-family: var(--font-display); font-size: 21px; letter-spacing: 0.02em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}