/* CrownPlay — theme for the monobrand template
   Palette, type and button plates are read off crownplay's own
   stylesheet (--stb-* design system), so the names below carry the
   lobby's real values rather than an approximation of them. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The lobby's own display face, served the way the lobby serves it:
   local() first, then its five woff cuts. Only the display roles use it
   — titles, buttons, nav — because the lobby is an app of short labels
   and this page carries paragraphs it never has to set. */
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-light.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-regular.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-medium.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-bold.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-heavy.woff') format('woff');
}

:root {
  --scheme: dark;

  /* type scale: every font-size in the sheet snaps to one of these steps */
  --fs-1: .7rem;
  --fs-2: .78rem;
  --fs-3: .85rem;
  --fs-4: .95rem;
  --fs-5: 1.05rem;
  --fs-6: 1.2rem;
  --fs-7: 1.35rem;

  /* ---- CrownPlay's own ramp --------------------------------------------
     The lobby is near-black rather than tinted: its canvas is the
     --stb-yellow-1300 #050404, and the steps above it climb through the
     same warm brown family, not a grey one. The light half is the
     lobby's --stb-neutral-* scale, which is a cool grey-teal — the one
     cool note in the sheet, and the reason body copy reads blue-ish
     against the brown it sits on. Every step is a value the lobby
     ships. Note the ramp is numbered the opposite way round from the
     lobby's own: here 950 is the canvas and 50 is the copy. */
  --stb-neutral-950: 5 4 4;        /* yellow-1300 — bg-primary, the canvas */
  --stb-neutral-900: 22 16 13;     /* yellow-1200 — bg-secondary, cards    */
  --stb-neutral-850: 25 23 21;     /* yellow-1500                          */
  --stb-neutral-800: 30 19 19;     /* yellow-1100 — bg-tertiary, raised    */
  --stb-neutral-750: 40 32 26;     /* yellow-900 — the input well, hairline*/
  --stb-neutral-700: 45 36 29;     /* yellow-1000 — the well, selected     */
  --stb-neutral-600: 62 58 52;     /* yellow-1400 — borders                */
  --stb-neutral-550: 50 34 22;     /* brand-1400 — the bronze plate's foot */
  --stb-neutral-500: 84 63 50;     /* brand-1450 — the input stroke        */
  --stb-neutral-400: 115 136 134;  /* neutral-200 — the lobby's body copy  */
  --stb-neutral-300: 136 162 157;  /* neutral-300 — fine print, 7:1 on bg  */
  --stb-neutral-200: 151 178 180;  /* neutral-500 — secondary copy         */
  --stb-neutral-150: 193 210 210;  /* neutral-600                          */
  --stb-neutral-100: 217 217 217;  /* neutral-900                          */
  --stb-neutral-50: 241 241 241;   /* neutral-950 — primary copy           */
  --stb-white: 255 255 255;
  --stb-black: 9 8 12;             /* the lobby's black, faintly violet    */

  /* the amber the lobby accents with: --stb-accent is yellow-300 and its
     links are yellow-400, with the pale yellow-700/800 kept for the
     lettering that sits on a lit plate */
  --stb-gold-100: 254 205 161;     /* yellow-800 — the pale end            */
  --stb-gold-200: 255 176 57;      /* yellow-400 — link accent, hover      */
  --stb-gold-300: 229 144 69;      /* yellow-300 — --stb-accent            */
  --stb-gold-500: 192 132 86;      /* yellow-600 — icons                   */
  --stb-gold-600: 156 106 57;      /* yellow-1600                          */
  --stb-gold-700: 34 22 10;        /* yellow-50 — the ground under gold    */

  /* "brand" is the lobby's mint ramp: the primary button's lit top, the
     win figures, and nothing else */
  --stb-brand-500: 8 235 181;      /* brand-1050 — the CTA's lit crown     */
  --stb-brand-600: 0 255 133;      /* green-800                            */
  --stb-brand-700: 7 101 79;       /* brand-1100 — the CTA's foot          */
  --stb-brand-200: 129 255 225;    /* brand-1000 — the hover crown         */
  --stb-brand-150: 232 254 95;     /* green-700                            */

  /* the lobby paints its accent links in amber too, so "blue" is amber */
  --stb-blue-500: 229 144 69;
  --stb-blue-600: 192 132 86;
  --stb-blue-700: 156 106 57;

  --stb-red-500: 234 51 35;        /* red-500 — --stb-functional-alert     */
  --stb-green-500: 8 235 181;      /* the lobby's one green is the mint    */

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-950));
  /* the ground under the hero picture. On desktop the artwork covers the
     banner and this never shows; on the phone it backs the narrow band
     above the picture, so it carries the artwork's own edge tone rather
     than the page's brown. Re-sample it if the art changes — the mean of
     the picture's leftmost column is the number. */
  --hero-blue: #01140f;
  /* the shared stop list both hero scrims run, each in its own direction:
     a short solid lip, then an eased ramp to nothing */
  --hero-fade:
    rgb(var(--stb-neutral-950)) 0%,
    rgb(var(--stb-neutral-950)) 20%,
    rgb(var(--stb-neutral-950) / .96) 30%,
    rgb(var(--stb-neutral-950) / .84) 40%,
    rgb(var(--stb-neutral-950) / .68) 50%,
    rgb(var(--stb-neutral-950) / .5) 60%,
    rgb(var(--stb-neutral-950) / .32) 70%,
    rgb(var(--stb-neutral-950) / .16) 80%,
    rgb(var(--stb-neutral-950) / .04) 90%,
    rgb(var(--stb-neutral-950) / 0) 100%;
  /* the sides run the same eased ramp but over a shorter distance, since
     they only have to carry the picture's edge into the bare canvas
     beside it. The left runs further: that is the side the copy sits on,
     so it doubles as the headline's ground — but only just past the end
     of the headline, so the artwork is clear of it from there on. */
  --hero-side:
    rgb(var(--stb-neutral-950)) 0%,
    rgb(var(--stb-neutral-950) / .9) 5%,
    rgb(var(--stb-neutral-950) / .78) 10%,
    rgb(var(--stb-neutral-950) / .62) 15%,
    rgb(var(--stb-neutral-950) / .44) 20%,
    rgb(var(--stb-neutral-950) / .28) 24%,
    rgb(var(--stb-neutral-950) / .15) 28%,
    rgb(var(--stb-neutral-950) / .05) 32%,
    rgb(var(--stb-neutral-950) / 0) 36%;
  --hero-side-soft:
    rgb(var(--stb-neutral-950) / .85) 0%,
    rgb(var(--stb-neutral-950) / .6) 4%,
    rgb(var(--stb-neutral-950) / .34) 9%,
    rgb(var(--stb-neutral-950) / .16) 14%,
    rgb(var(--stb-neutral-950) / .05) 19%,
    rgb(var(--stb-neutral-950) / 0) 24%;
  --bg-top: rgb(var(--stb-neutral-900));
  --bg-elevated: rgb(var(--stb-neutral-800));
  --surface: rgb(var(--stb-neutral-900));
  --surface-2: rgb(var(--stb-neutral-800));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-750));

  --text: rgb(var(--stb-neutral-50));
  --text-muted: rgb(var(--stb-neutral-200));
  /* the fine print takes neutral-300, the lowest step on this ramp that
     still clears 4.5:1 against every surface the copy actually sits on */
  --text-faint: rgb(var(--stb-neutral-300));

  /* links and accents are the lobby's #e5a749; the brighter #ffb039 is
     kept for hover and for the plates' own lettering */
  --gold: rgb(var(--stb-gold-300));
  --gold-2: rgb(var(--stb-gold-200));
  --green: rgb(var(--stb-green-500));

  /* the gold of the crown in the mark, stop for stop */
  --grad-gold: linear-gradient(180deg, #f9f295 0%, #dbb057 32.46%, #d9ac53 53.16%, #ffeca9 75%, #c9a65e 89.65%, #b88a44 100%);
  /* the mint the primary plate lights with, flattened to a line */
  --grad-mint: linear-gradient(270deg, #81ffe1 0%, #08ebb5 45%, #07654f 100%);
  /* --stb-gradient-400, the lobby's quiet panel fill */
  --grad-teal: linear-gradient(270deg, #16100d 0%, #1e1313 35.63%, #16100d 100%);

  /* the three button plates, stop for stop: --stb-gradient-600 (primary),
     --stb-gradient-800 (secondary) and --stb-gradient-1000 (tertiary).
     Each lights from a point above the plate's top edge, which is what
     gives the fill its domed look without any border drawing it. */
  --plate-primary: radial-gradient(100% 100% at 50% 0%, rgb(var(--stb-brand-500)) 0%, rgb(var(--stb-brand-700)) 100%);
  --plate-secondary: radial-gradient(100% 100% at 50% 0%, rgb(245 188 137) 13.54%, rgb(102 55 0) 100%);
  --plate-tertiary: radial-gradient(100% 100% at 50% 0%, rgb(126 99 68) 0%, rgb(var(--stb-neutral-550)) 100%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(8, 235, 181, .05);
  --glow-b: rgba(229, 144, 69, .06);
  /* the header keeps the lobby's bg-tertiary band above the canvas */
  --header-bg: linear-gradient(180deg, rgb(30 19 19) 0%, rgb(25 17 14) 55%, rgb(22 16 13) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-850));
  --band-bg: linear-gradient(to bottom, rgba(22, 16, 13, .75), rgba(22, 16, 13, .5) 60%, rgba(22, 16, 13, .75));
  --scrim-top: linear-gradient(to bottom, rgba(5, 4, 4, .7), transparent);
  --overlay: rgb(5 4 4 / .94);

  --win: rgb(var(--stb-brand-500));
  --win-glow: rgba(8, 235, 181, .4);
  --tint-accent: rgba(229, 144, 69, .12);
  --accent-glow: rgba(229, 144, 69, .3);
  --cta-glow: rgba(8, 235, 181, .26);
  --subtle-fill: rgba(241, 241, 241, .04);
  --subtle-fill-2: rgba(241, 241, 241, .08);
  /* the marks are black-on-transparent, so they are flattened to white
     rather than greyed the way they were against a light lobby */
  --provider-filter: brightness(0) invert(1);
  --provider-blend: normal;

  /* ---- radii: the lobby cuts a 4px corner on nearly everything — the
     game thumbnail, every button, the arrow controls — and saves 8px
     for the panels it treats as dialogs.                              */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-btn: 4px;
  --radius-pill: 9999px;
  --radius-thumb: 4px;

  /* ---- type -------------------------------------------------------------
     The lobby sets everything in BeaufortforLOL, which it self-hosts, so
     this page serves the same five cuts. It takes the display roles only
     — titles, buttons, nav — and leaves the body to Inter: the lobby is
     an app of short labels, and the paragraphs here have no counterpart
     in it to copy. Cases and tracking are the lobby's own: titles and
     labels uppercase, the type set tight.                             */
  --font-display: "BeaufortforLOL", "Times New Roman", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 700;
  /* the lobby sets its titles tight and in plain case — its .title-block
     carries no text-transform at all, and -.03em of tracking at 28-32px.
     Only the controls are uppercased, which is why --btn-case and
     --nav-case still are. The tracking is eased to -.02em here because
     these headings run over a wider size range than the lobby's two. */
  --display-track: -.02em;
  --display-case: none;
  --btn-weight: 700;
  --btn-track: .02em;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the plates are flat gradients with a cast shadow, not moulded caps,
     so the press is a short dip onto that shadow */
  --btn-shadow-height: 0px;
  --btn-active-transform: 1px;
  --btn-label: rgb(var(--stb-neutral-50));
  /* the lobby's nav runs on the display face at medium */
  --nav-weight: 500;
  --nav-track: .03em;
  --nav-case: uppercase;
  --hero-stroke: 0;

  --container: 1180px;
  --container-narrow: 720px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .15s;
  --shadow-1: 0 4px 24px rgba(0, 0, 0, .25);
}

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

html {
  color-scheme: var(--scheme);
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(75vw 55vh at 8% 5%, var(--glow-a), transparent 70%),
    radial-gradient(70vw 55vh at 95% 20%, var(--glow-b), transparent 70%),
    radial-gradient(75vw 55vh at 10% 42%, var(--glow-a), transparent 70%),
    radial-gradient(70vw 55vh at 92% 60%, var(--glow-b), transparent 70%),
    radial-gradient(75vw 55vh at 12% 80%, var(--glow-a), transparent 70%),
    radial-gradient(70vw 55vh at 90% 98%, var(--glow-b), transparent 70%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 25%, var(--bg) 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-transform: var(--display-case);
}

p { color: var(--text-muted); }

button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--gold);
  color: var(--on-accent);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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

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

.wrap {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.wrap-narrow { max-width: var(--container-narrow); }

.section { padding: clamp(3.5rem, 6vw, 6.5rem) 0; }

.wins-section {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  background: var(--band-bg);
  box-shadow: inset 0 12px 24px -12px rgba(0, 0, 0, .5);
}
/* the lobby's own page texture: a 260px band of teal marble laid across
   the top of a content block and masked away at both ends. On the lobby
   it is the first thing under the header; here the banner holds that
   place, so it backs the band directly below the banner instead, which
   is the same job one block down. */
.wins-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/bg-page-mobile.webp") center top / 1280px 260px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3% 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3% 97%, transparent);
}
@media (min-width: 1280px) {
  .wins-section::before {
    background-image: url("/assets/bg-page.webp");
    background-size: 1920px 260px;
  }
}
.wins-section > .wins-wrap { position: relative; z-index: 1; }

.wins-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 860px) {
  .wins-wrap { grid-template-columns: 1fr 260px; align-items: stretch; }
}

.wins-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .9rem;
}

.wins-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.wins-panel-title {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 800;
  color: var(--text);
}

.wins-live {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--win);
  flex-shrink: 0;
}
.wins-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--win);
  animation: wins-pulse 1.6s ease-in-out infinite;
}
@keyframes wins-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--win-glow); }
  50% { opacity: .7; box-shadow: 0 0 0 5px transparent; }
}

.wins-panel-head-right {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}

.wins-nav { display: flex; gap: .35rem; }

.wins-carousel-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.wins-arrow {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}
.wins-arrow svg { width: 12px; height: 12px; }

.wins-track {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
}
.wins-track::-webkit-scrollbar { display: none; }

.win-card {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
  width: 175px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .5rem;
}

.win-card-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--thumb-bg, var(--surface-2));
  overflow: hidden;
  display: flex;
}
.win-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.win-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.win-card-player {
  font-size: var(--fs-1);
  color: var(--text-faint);
  font-weight: 500;
}
.win-card-game {
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-card-amount {
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--win);
  font-variant-numeric: tabular-nums;
}

.jackpot-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
@media (min-width: 860px) {
  .jackpot-panel { flex-direction: column; }
}

.jackpot-coin-icon {
  flex-shrink: 0;
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

.jackpot-amount {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform .15s ease;
}
.jackpot-amount.is-ticking { transform: scale(1.04); }

#games {
  position: relative;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
#games::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(90px, 12vw, 170px);
  background: var(--scrim-top);
  pointer-events: none;
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
#providers-payments .section-head { max-width: none; }

.eyebrow {
  color: var(--gold-2);
  font-weight: 700;
  font-size: var(--fs-2);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.section-head h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

.overview-lead {
  max-width: 780px;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  font-size: var(--fs-4);
  color: var(--text-muted);
}

.grad-text {
  color: var(--green);
  text-shadow: 0 18px 18px rgba(0, 0, 0, .4), 0 3px 0 #8e500b;
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: var(--btn-weight);
  font-size: var(--fs-4);
  line-height: 1;
  text-transform: var(--btn-case);
  letter-spacing: var(--btn-track);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
  transform: translateZ(0);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-gold);
  color: var(--on-accent);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border-color: var(--border);
  color: var(--text);
  background: var(--subtle-fill);
}
.btn-outline:hover { border-color: var(--gold-2); color: var(--gold-2); }

.btn-ghost {
  color: var(--gold-2);
  border-color: var(--gold-2);
}
.btn-ghost:hover { color: var(--gold-2); border-color: var(--gold-2); }

.btn-sm { padding: .55rem 1.1rem; font-size: var(--fs-3); }
.btn-lg { padding: .72rem 2.2rem; font-size: var(--fs-6); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-soft);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-6);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* The mark is a wordmark seven times as wide as it is tall, so it is
   sized on its width: hold it by height and the header fills with it. */
.brand-logo {
  width: 190px;
  height: auto;
}

.nav-side {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}
.nav-side-left { justify-content: flex-start; }
.nav-side-right { justify-content: flex-end; margin-left: auto; }

.nav-side ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-side ul a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--nav-weight);
  font-size: var(--fs-2);
  letter-spacing: var(--nav-track);
  text-transform: var(--nav-case);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-side ul a:hover { color: var(--text); }

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.nav-icon [fill="currentColor"] { fill: url(#icon-gold-grad); }
.nav-icon [stroke="currentColor"] { stroke: url(#icon-gold-grad); }

.main-nav {
  display: none;
}

.main-nav ul {
  display: flex;
  gap: 1.75rem;
}

.main-nav ul a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--nav-weight);
  font-size: var(--fs-2);
  letter-spacing: var(--nav-track);
  text-transform: var(--nav-case);
  transition: color var(--dur) var(--ease);
}
.main-nav ul a:hover { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--subtle-fill-2); }

.nav-toggle-bar {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 24px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

.nav-actions {
  display: none;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(300px, 29vw, 390px);
  background: var(--hero-blue) url("assets/hero-bg-extended.webp") right bottom / auto 115% no-repeat;
}

/* From the tablet breakpoint up the artwork simply covers the banner. It
   used to be sized by height, which held its scale but left a band of bare
   page at the left and, once the banner passed about 3.5:1, let the
   picture's own border read as a vertical step against that band. Covering
   costs a slice off the top and bottom — which the two fades were eating
   anyway — and in exchange the banner is one unbroken image at every width,
   with nothing for the side scrim to have to hide. */
@media (min-width: 861px) {
  .hero {
    background-image:
      linear-gradient(to right, var(--hero-side)),
      linear-gradient(to left, var(--hero-side-soft)),
      url("assets/hero-bg-extended.webp");
    background-size: 100% 100%, 100% 100%, cover;
    background-position: left center, right center, center;
    background-repeat: no-repeat;
    min-height: clamp(460px, 27vw, 520px);
  }
}

/* the banner carries no drawn edge: the artwork is dissolved into the page
   at top and bottom, so what reads as its border is the fade itself. the stops
   trace a smoothstep rather than a straight ramp — a linear fade turns at both
   ends and the eye catches those corners as bands across the artwork */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.hero::before {
  top: 0;
  height: clamp(72px, 8vw, 115px);
  background: linear-gradient(to bottom, var(--hero-fade));
}
.hero::after {
  bottom: 0;
  height: clamp(100px, 10.5vw, 140px);
  background: linear-gradient(to top, var(--hero-fade));
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem);
  max-width: 760px;
  margin-inline: auto;
}
/* the bonus figure is the one display line set tight: at this size the
   stock tracking opens gaps the shadow then doubles */
.hero h1 .grad-text { font-weight: 900; letter-spacing: -.025em; text-transform: none; }
.hero-subtext { display: inline-block; font-size: .55em; position: relative; top: -.6em; }

/* ---- the notched plate under every bonus-type title ------------------
   Built from the middle slice alone, tiled, with the notch cut by hand.

   The three label files are not a matched set: the middle is
   opaque and runs rgb(75 47 123) down to rgb(72 43 119), while the two
   end caps are alpha 223 and a good deal lighter, around rgb(96 68 143).
   Composite the caps over this card and they land near rgb(90 61 128) —
   still lighter and redder than the middle, so butting them together
   leaves a seam down each join no matter how they are aligned, and the
   caps are 48px tall against the middle's 46, which steps the lip too.

   The middle is uniform across its width (two levels at most), so it
   tiles without a seam, and the cut below reproduces the cap's own
   silhouette: measured off the left cap, the edge runs in from 1px at
   the top to 8px at the middle and back out — a shallow chevron 7px deep
   over 48px of height, which is the .15 of the box height used here.
   Swap back to the three-slice build if matching caps ever turn up.   */
.promo-card h3,
.hero h1 .hero-label {
  /* The two side paddings are even; the top and bottom are not, because
     the label has to sit on the plate's optical centre rather than its
     box centre. The pair is set by measurement, not by eye: the plate
     and the label's ink were measured off a 2x render and the padding
     walked until the gap above matched the gap below. Both values are in
     em, so the split survives a change of type size — but it is tied to
     this face, and a new one wants re-measuring the same way. */
  padding: .367em 1.45em .133em;
  background: url("/assets/main-banner-centr-label.c40b9f32fb073d21.png") left center / auto 100% repeat-x;
  /* the notch is a share of the height, so it holds its angle at any size */
  --notch: .26em;
  clip-path: polygon(
    0 0, 100% 0,
    calc(100% - var(--notch)) 50%,
    100% 100%, 0 100%,
    var(--notch) 50%
  );
}


/* the welcome-bonus line takes the same plate as every other bonus type,
   so the hero and the promo cards name a bonus the same way. It used to
   be poured through the glyphs as a gradient, which the plate now makes
   redundant — and the plate earns its keep here twice over, because the
   line sits on the brightest part of the artwork, where reversed-out
   text was thinnest.                                                   */
.hero-label {
  display: inline-block;
  text-transform: none;
  font-size: .44em;
  line-height: 1.2;
}
.hero h1 .hero-label {
  color: rgb(var(--stb-gold-100));
  -webkit-text-fill-color: rgb(var(--stb-gold-100));
  text-shadow: 0 2px 0 rgba(0, 33, 27, .55);
  /* clip-path takes the drop-shadow with it, so the lift sits on the
     plate rather than on a box the cut has already thrown away */
  filter: drop-shadow(0 3px 10px rgba(3, 26, 22, .55));
  /* lifted off the figure below, whose carons were all but touching the
     plate's lip. It rides on `top`, not margin, so the line box keeps its
     height and the two lines under it do not move with it. There is open
     artwork above, which is where the gap comes from. */
  position: relative;
  top: -.3em;
}


@media (min-width: 641px) {
  .hero h1 { font-size: 42px; }

  .hero h1 { margin-inline: 0; }
  .hero-inner { margin-left: clamp(-3rem, -4vw, -1.5rem); }
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}
/* the freespins line is lifted .6em off its own baseline, which leaves dead
   space under it — the hero button closes that gap back up */
.hero .hero-cta { margin-top: -.55rem; }

/* ---- the hero's CTA breathes, the way the jackpot button does -------
   The scale sits on the button itself, so the plate and its label grow
   together. That is what the layer promotion is for: scaled without it,
   the glyphs are re-rasterized on every frame and the label visibly
   shivers — which is why this used to ride on the plate alone. Promoted,
   the button is rasterized once and the GPU scales the whole thing, type
   included.

   The glow stays on the plate layer. Keeping it off the button leaves
   `filter` free there for the hover brightness, and a drop-shadow drawn
   from the plate's own alpha follows its chamfered corners instead of
   squaring off around the button's box. */
.hero .hero-cta .btn-primary {
  will-change: transform;
  backface-visibility: hidden;
  animation: cta-pulse 1.9s ease-in-out infinite;
}
.hero .hero-cta .btn-primary::before {
  animation: cta-plate-glow 1.9s ease-in-out infinite;
}
.hero .hero-cta .btn-primary:hover,
.hero .hero-cta .btn-primary:hover::before,
.hero .hero-cta .btn-primary:active::before { animation-play-state: paused; }
/* the press has to cancel the animation outright rather than pause it: a
   paused animation still wins the cascade, so a transform declared here
   would otherwise be ignored */
.hero .hero-cta .btn-primary:active {
  animation: none;
  transform: translateY(var(--btn-active-transform));
}
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
@keyframes cta-plate-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(146, 234, 59, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(146, 234, 59, .5)); }
}

@media (min-width: 641px) {
  .hero .hero-cta { justify-content: center; max-width: 760px; margin-inline: 0; }
}

.pg-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
@media (min-width: 640px) {
  .pg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .pg-grid { grid-template-columns: repeat(5, 1fr); }
}

.pg-card {
  background: var(--surface);
  /* the carved frame draws this tile's edge, so no border is drawn here */
  border: 0;
  border-radius: var(--radius-lg);
  padding: .9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pg-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.pg-thumb {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-thumb);
  overflow: hidden;
  background: var(--surface-2);
}
.pg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pg-card:hover .pg-thumb::after { opacity: 1; }

/* the thumbnails breathe and catch a slow sheen, the whole grid in step */
.pg-thumb img {
  animation: pg-breathe 4.4s ease-in-out infinite;
}
.pg-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgb(255 255 255 / 0) 42%,
    rgb(255 255 255 / .34) 50%,
    rgb(255 255 255 / 0) 58%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: pg-sheen 4.4s ease-in-out infinite;
}
.pg-card:hover .pg-thumb img,
.pg-card:hover .pg-thumb::before { animation-play-state: paused; }

@keyframes pg-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes pg-sheen {
  0%, 62% { background-position: 170% 0; }
  88%, 100% { background-position: -70% 0; }
}

.pg-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.3rem;
  border-radius: var(--radius-btn);
  background: var(--grad-gold);
  color: var(--on-accent);
  font-weight: 700;
  font-size: var(--fs-3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 1;
}
.pg-card:hover .pg-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pg-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pg-badge-hot { background: var(--grad-gold); color: var(--on-accent); }

.pg-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: 0 .2rem;
  text-align: center;
}
.pg-title {
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--text);
  white-space: normal;
  line-height: 1.25;
}
.pg-provider {
  font-size: var(--fs-3);
  color: var(--text-faint);
}

.promo-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .promo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .promo-grid { grid-template-columns: repeat(3, 1fr); }
}

.promo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.promo-card:hover { transform: translateY(-4px); }

.promo-card-featured {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border-color: var(--gold);
}

.promo-tag {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: var(--tint-accent);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.promo-card h3 { font-size: var(--fs-6); margin-bottom: .3rem; }
.promo-value {
  font-weight: 800;
  font-size: var(--fs-7);
  line-height: 1.25;
  color: var(--gold);
  margin-bottom: .6rem;
}
.promo-card p:not(.promo-value) { font-size: var(--fs-4); margin-bottom: 1rem; }

.promo-card .btn {
  display: table;
  margin-inline: auto;
}

.promo-code {
  display: table;
  margin-inline: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--gold);
  background: var(--tint-accent);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  padding: .3rem .6rem;
  margin-top: 1rem;
}

.promo-code-inline {
  display: inline-block;
  margin: 0 .1rem;
  vertical-align: middle;
}

.promo-fineprint {
  margin-top: 2rem;
  font-size: var(--fs-3);
  color: var(--text-faint);
  max-width: 900px;
}

.fact-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .fact-grid { grid-template-columns: repeat(3, 1fr); }
}

.fact-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

#support {
  scroll-margin-top: 90px;
}

.fact-label {
  font-size: var(--fs-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
}

.fact-value {
  font-size: var(--fs-4);
  color: var(--text);
  line-height: 1.5;
}

.steps-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .steps-grid { grid-template-columns: repeat(5, 1fr); }
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.step-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--on-accent);
  font-weight: 800;
  margin-bottom: 1rem;
}

.step-card h4 { font-size: var(--fs-5); margin-bottom: .4rem; }
.step-card p { font-size: var(--fs-3); }

.info-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--border-soft);
}

.info-block-title {
  font-size: var(--fs-7);
  margin-bottom: 1.2rem;
}

/* a heading inside an info block, one step down from its title */
.info-block-subtitle {
  font-size: var(--fs-5);
  margin: 2rem 0 .9rem;
}

.info-block > p { max-width: 780px; margin-bottom: 1.5rem; }
.info-block > p:last-child { margin-bottom: 0; }

.info-list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-width: 780px;
}
.info-list li { position: relative; padding-left: 1.5rem; color: var(--text-muted); }
.info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-gold);
}
.info-list strong { color: var(--text); }

/* The sign-up walk-through is a sequence rather than a set, so its
   markers count instead of repeating: the gold dot becomes a numbered
   plate, and the copy clears the wider marker. */
.info-list-steps { counter-reset: step; }
.info-list-steps li { counter-increment: step; padding-left: 2.4rem; }
.info-list-steps li::before {
  content: counter(step);
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  font: 700 var(--fs-2)/1.6rem var(--font-ui);
  text-align: center;
  color: rgb(var(--stb-gold-700));
}

.limits-table-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.limits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-3);
}
.limits-table th,
.limits-table td {
  padding: .9rem 1.2rem;
  text-align: left;
  white-space: nowrap;
}
.limits-table thead th {
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.limits-table tbody tr { background: var(--surface); }
.limits-table tbody tr:nth-child(even) { background: var(--bg-elevated); }
.limits-table td:first-child { color: var(--text); font-weight: 600; }
.limits-table td:last-child { color: var(--text-muted); white-space: normal; }

/* The payments table runs six columns inside the narrow prose column, where
   nowrap cells push the last one past the edge and leave it to be scrolled
   for. Letting the cells wrap fits all six in the 720px measure; the wrap's
   own overflow-x stays as the fallback on a phone, where wrapping alone is
   not enough. */
.wrap-narrow .limits-table th,
.wrap-narrow .limits-table td {
  padding: .75rem .85rem;
  white-space: normal;
}

.providers-carousel + .providers-carousel { margin-top: 2.5rem; }

.providers-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.providers-carousel-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: var(--fs-5);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
}

.providers-carousel-nav { display: flex; gap: .5rem; flex-shrink: 0; }

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--btn-label);
  background: transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel-arrow:hover { border-color: var(--btn-label); color: var(--btn-label); }

.providers-carousel-track {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.providers-carousel-track::-webkit-scrollbar { display: none; }

.provider-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(110px, 13vw, 150px);
  height: 70px;
  padding: .7rem .9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  isolation: isolate;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.provider-item:hover {
  border-color: var(--gold-2);
  box-shadow: 0 0 16px var(--accent-glow);
}
.provider-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--provider-filter);
  mix-blend-mode: var(--provider-blend);
  opacity: .9;
}

.summary-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-4);
}
.summary-table td {
  padding: .95rem 1.3rem;
  border-bottom: 1px solid var(--border-soft);
}
.summary-table tr:last-child td { border-bottom: none; }
.summary-table tr:nth-child(even) { background: var(--bg-elevated); }
.summary-table td:first-child { color: var(--text-faint); font-weight: 600; width: 40%; }
.summary-table td:last-child { color: var(--text); font-weight: 700; text-align: right; }
/* the brand table carries a header row, labelled the same way the limits
   table labels its columns */
.summary-table thead th {
  padding: .8rem 1.3rem;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  text-align: left;
}
.summary-table thead th:last-child { text-align: right; }

.updated-section {
  padding: 1.6rem 0;
  border-top: 1px solid var(--border-soft);
}
.updated-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--text-faint);
  font-size: var(--fs-3);
}
.updated-badge svg { flex-shrink: 0; color: var(--gold-2); }
.updated-date { color: var(--text-muted); font-weight: 700; }

.content-screenshot {
  margin: 1.75rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.content-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

.faq-list { display: flex; flex-direction: column; gap: .7rem; }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold-2);
  border-bottom: 2px solid var(--gold-2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg); }

.faq-item p { margin-top: .8rem; font-size: var(--fs-4); }

.faq-item p a,
.info-block p a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.faq-item p a:hover,
.info-block p a:hover { color: var(--gold-2); }

.cta-band {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.cta-band-glow {
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse at center, var(--cta-glow), transparent 65%);
  z-index: -1;
  pointer-events: none;
}

.cta-band-logo {
  width: 190px;
  height: auto;
  margin: 0 auto 1.2rem;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  margin-bottom: .6rem;
}
.cta-band p { max-width: 480px; margin-inline: auto; }
.cta-band .hero-cta { justify-content: center; }

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-top: clamp(3rem, 5vw, 4.5rem);
}

.footer-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
@media (min-width: 780px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand .brand-logo {
  width: 160px;
}

.footer-brand p {
  margin: .9rem 0 1.1rem;
  font-size: var(--fs-4);
  max-width: 480px;
}

.footer-col h3 {
  font-size: var(--fs-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a {
  color: var(--text-muted);
  font-size: var(--fs-4);
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 1.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-legal-text {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer-disclaimer {
  font-size: var(--fs-2);
  color: var(--text-faint);
  max-width: 100%;
}
.footer-disclaimer a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.footer-disclaimer a:hover { color: var(--gold-2); }

.footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-3);
  color: var(--text-faint);
}

.license-badge, .age-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
  font-weight: 700;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The inline nav needs about 1120px before the five links, the mark and
   the two pills stop fighting for the row — the wordmark is 190px wide
   on its own. So the nav folds into the panel well above the phone
   breakpoint, and everything else in the header stays desktop until
   860px. */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }

  .nav-side ul { display: none; }

  .main-nav {
    display: block;
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--nav-panel-bg);
    padding: 1.5rem clamp(1.25rem, 6vw, 2rem) 2rem;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }

  body.nav-open { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--border-soft); }
  .main-nav ul a { display: flex; padding: 1rem 0; font-size: var(--fs-5); }

  /* log in and register keep their place in the header at every width,
     so the panel carries links only */
  .nav-actions { display: none; }
}

@media (max-width: 640px) {
  .hero-inner { text-align: center; }
  .hero h1 { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-cta { justify-content: center; margin-inline: auto; max-width: none; }
}

.show-more-btn {
  display: none;
}
@media (max-width: 640px) {
  .pg-grid:not(.is-expanded) .pg-card:nth-child(n+7) {
    display: none;
  }
  .show-more-btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: .8rem 1.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--subtle-fill);
    color: var(--text);
    font-weight: 700;
    font-size: var(--fs-4);
    text-align: center;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .show-more-btn:hover { border-color: var(--gold); color: var(--gold); }
}

/* ---- typography roles ------------------------------------------------ */
.eyebrow,
.wins-panel-title,
.wins-live,
.providers-carousel-title,
.fact-label,
.footer-col h3,
.promo-tag,
.promo-value,
.jackpot-amount,
.limits-table thead th,
.step-number,
.pg-title,
.win-card-game,
.show-more-btn,
.license-badge,
.age-badge {
  font-family: var(--font-display);
}

.hero h1 .grad-text { -webkit-text-stroke: var(--hero-stroke); }

/* dark lobby: panels sit on the teal-navy and cast a real shadow */
.site-header { box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }

.pg-card,
.promo-card,
.fact-item,
.step-card,
.faq-item,
.win-card,
.wins-panel,
.jackpot-panel,
.provider-item,
.limits-table-wrap,
.summary-table-wrap,
.content-screenshot {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .34);
}
.pg-card:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 1px var(--accent-glow);
}

/* ---- bonus cards: a white lobby card carrying the hero's blue plate --- */
.promo-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* clearance for the badge tucked under the top edge */
  padding-top: 2.9rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .34);
}
.promo-card:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 1px var(--accent-glow);
}
.promo-card-featured {
  background: var(--surface);
  border-color: var(--gold);
}

/* the kind of bonus rides the same notched plate as the hero label, and
   takes the same cream-gold on it, so the two read as one label style */
.promo-card h3 {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: var(--fs-5);
  line-height: 1.2;
  text-transform: none;
  color: rgb(var(--stb-gold-100));
  text-shadow: 0 1px 0 rgba(0, 33, 27, .5);
}

/* the badge sits inside the top-right corner, clear of the border */
.promo-tag {
  position: absolute;
  top: .8rem;
  right: .9rem;
  z-index: 2;
  margin-bottom: 0;
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--grad-gold);
  color: var(--on-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  font-size: var(--fs-1);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* nav glyphs take the lobby's accent-link teal, not the CTA gold */
.nav-icon [fill="currentColor"] { fill: rgb(var(--stb-blue-500)); }
.nav-icon [stroke="currentColor"] { stroke: rgb(var(--stb-blue-500)); }

.btn-outline, .show-more-btn { border-color: rgb(var(--stb-neutral-500)); color: var(--btn-label); }
.faq-item summary::after { border-color: var(--gold); }

/* the hero banner stays a saturated blue panel, so its copy is reversed out */
.hero h1,
.hero h1 .hero-subtext,
.hero-lead { color: #ffffff; text-shadow: 0 2px 10px rgba(3, 26, 22, .6); }
.hero h1 .grad-text { color: rgb(var(--stb-gold-500)); }

/* ---- buttons: the lobby's lit plates ----------------------------------
   CrownPlay draws its buttons in CSS: a 4px box filled by a radial
   gradient whose light source sits on the plate's top edge, so the fill
   domes without a border or a highlight drawn for it, and a short cast
   shadow underneath. Only the primary plate carries a texture over the
   fill — a scalloped tile the lobby repeats at 150x78.

   One number runs the box, --btn-pad, and it moves with the size steps;
   the plate itself stretches, so there is nothing to keep in proportion
   the way a moulded cap would be.                                    */
.btn {
  --btn-pad: 1.5rem;
  --plate-stroke: rgb(var(--stb-black) / .25);

  min-height: 42px;
  padding: 0 var(--btn-pad);
  border: 0;
  border-radius: var(--radius-btn);
  line-height: 1.2;
  letter-spacing: var(--btn-track);
  /* the plate itself is a layer of its own; see the note below */
  position: relative;
  background: none;
  box-shadow: none;
  /* --stb-text-shadow: a single soft drop, which is all the label needs
     to hold against the lit half of the plate */
  text-shadow: 0 1px 1px var(--plate-stroke);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: none; filter: brightness(1.08); }
.btn:active { filter: brightness(.95); transform: translateY(var(--btn-active-transform)); }

/* ---- the plate layer -------------------------------------------------
   The plate rides behind the label rather than on the button itself.
   That is what lets a CTA breathe without the type breathing with it: a
   scale on the button resamples the glyphs every frame and the label
   visibly shivers, where scaling this leaves the text on the pixel grid.
   Both pulse animations drive this layer for exactly that reason. */
.btn-primary::before,
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 4px rgb(var(--stb-black) / .2);
  /* the texture tile comes first so it lies over the fill; it is sized
     in px because it is a repeating pattern, not a stretched layer */
  background-repeat: repeat, no-repeat;
  background-position: left top, 0 0;
  background-size: 150px 78px, auto;
}

/* the mint plate: every call to action — register, claim, play */
.btn-primary { color: var(--btn-label); }
.btn-primary::before {
  background-image: url("/assets/button-pattern.svg"), var(--plate-primary);
}

/* the bronze plate: log in, and anything that sits beside a mint CTA.
   The lobby lays no texture on this one, so the fill is the only layer */
.btn-ghost { color: var(--btn-label); }
.btn-ghost::before {
  background-image: var(--plate-secondary);
  background-size: auto;
  background-position: 0 0;
}
.btn-ghost:hover { color: var(--btn-label); }

/* the lobby's third button is not a plate at all: a hairline box that
   turns gold on hover. It carries no plate, so it keeps its own padding
   and drops the letter-stroke. */
.btn-outline::before, .btn-mint::before { content: none; }

.btn-outline {
  --btn-pad: .9rem;
  padding: 0 var(--btn-pad);
  gap: .5rem;
  border: 1px solid rgb(var(--stb-neutral-400));
  color: var(--btn-label);
  background: none;
  text-shadow: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-outline:hover {
  border-color: currentColor;
  color: var(--gold);
  filter: none;
}

/* the win ramp, kept for the odd secondary the lobby paints in brand */
.btn-mint {
  --btn-pad: 1.4rem;
  padding: 0 var(--btn-pad);
  background: var(--grad-mint);
  color: rgb(var(--stb-neutral-950));
  text-shadow: none;
}

/* ---- the size steps the lobby ships -----------------------------------
   The lobby runs 84/60/48/40px plates on 40/32/24/16px of side padding;
   this page sits between its s and xs steps, so the padding is carried
   across at that ratio rather than at its raw pixel value. */
.btn-sm {
  --btn-pad: 1rem;
  min-height: 38px;
  font-size: var(--fs-3);
}
.btn-lg {
  --btn-pad: 1.75rem;
  min-height: 54px;
  font-size: var(--fs-6);
  --btn-active-transform: 2px;
}

/* ---- the header pair -------------------------------------------------
   The lobby runs its header buttons one step down from the page's, and
   sets them in the UI face at 14px so the two pills stay narrow enough
   to sit beside the mark. */
.header-actions .btn {
  --btn-pad: 1.05rem;
  --btn-active-transform: 1px;
  min-height: 38px;
  padding: 0 var(--btn-pad);
  font-size: var(--fs-3);
}

/* ---- the header's register button ------------------------------------
   The lobby keeps this one on the bronze plate for as long as the
   banner's own call to action is still on screen, and swaps it to green
   the moment that scrolls away — so only ever one green button is in
   view at a time. Log in keeps the bronze plate throughout. The class is
   set from the CTA's visibility in script.js, not from scroll depth. */
.header-actions .btn-primary::before {
  background-image: var(--plate-secondary);
  background-size: auto;
  background-position: 0 0;
}
.site-header.is-cta-passed .header-actions .btn-primary::before {
  background-image: url("/assets/button-pattern.svg"), var(--plate-primary);
  background-size: 150px 78px, auto;
  background-position: left top, 0 0;
}



/* ---- menu button: stacked bars with a search lens -------------------- */
.nav-toggle { width: 46px; height: 40px; border-radius: 10px; }
.nav-toggle-bar {
  left: 8px;
  height: 3px;
  border-radius: 99px;
  background: var(--gold);
  transform: none;
}
.nav-toggle-bar:nth-child(1) { width: 26px; top: 11px; }
.nav-toggle-bar:nth-child(2) { width: 20px; top: 18px; }
.nav-toggle-bar:nth-child(3) { width: 13px; top: 25px; }

.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  transition: opacity var(--dur) var(--ease);
}
.nav-toggle::before {
  right: 7px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--gold);
  border-radius: 50%;
}
.nav-toggle::after {
  right: 4px;
  bottom: 4px;
  width: 2.5px;
  height: 7px;
  border-radius: 99px;
  background: var(--gold);
  transform: rotate(-45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 18px; width: 26px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"]::before,
.nav-toggle[aria-expanded="true"]::after { opacity: 0; }

/* ---- lobby card badge sits astride the top edge ---------------------- */
/* ---- the ring that wraps every game tile ----------------------------
   CrownPlay carves nothing around its thumbnails: the tile is a 4px box
   with a 1px ring, and the ring is a gradient rather than a colour —
   --stb-gradient-1000, the same bronze that fills the tertiary button,
   lit from above so the top of the ring is brighter than its foot. The
   lobby draws it by insetting a filled pseudo-element behind a
   transparent border; here the tile already owns its background, so a
   border-image over the same gradient does it in one layer.

   It sits quiet until the tile is hovered, when the ring steps up to
   the lit --stb-gradient-1100 — which is how the lobby keeps a wall of
   tiles from turning into a wall of bronze. */
.pg-card { position: relative; }
.pg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* above the picture, below the badge that straddles the top edge */
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius-thumb);
  border: 1px solid transparent;
  background: var(--plate-tertiary) border-box;
  /* paint the fill in the border band only: the two layers are clipped
     differently and the padding box is masked out of the pair */
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: background var(--dur) var(--ease);
}
.pg-card:hover::after {
  background: radial-gradient(100% 100% at 50% 0%, rgb(158 131 100) 0%, rgb(var(--stb-neutral-550)) 100%) border-box;
}
.pg-badge {
  top: 0;
  left: 50%;
  right: auto;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* ---- lobby heading: plain case, arrows beside it --------------------- */
#games .section-head,
#crash-games .section-head,
#live-casino .section-head { max-width: none; }
#games .section-head h2,
#crash-games .section-head h2,
#live-casino .section-head h2 { text-transform: none; }
.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pg-nav { display: none; gap: .4rem; flex-shrink: 0; }

/* scroll arrows read as small cards, not bare squares */
.carousel-arrow {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.carousel-arrow:hover { border-color: var(--btn-label); color: var(--btn-label); }

/* ---- providers and payments wrap instead of scrolling sideways ------- */
.providers-carousel-track {
  flex-wrap: wrap;
  overflow-x: visible;
  padding-bottom: 0;
}
.providers-carousel-nav { display: none; }

/* ---- short note that introduces the lobby ---------------------------- */
.intro-note { padding: clamp(1rem, 3vw, 1.75rem) 0 0; }
.intro-note-card {
  padding: .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .34);
}
.intro-note-title {
  margin: 0 0 .75rem;
  font-size: clamp(1.35rem, 1.05rem + 1.25vw, 2rem);
  color: var(--text);
  text-transform: none;
}
.intro-note-text {
  margin: 0;
  font-size: var(--fs-4);
  line-height: 1.7;
  color: var(--text-muted);
}
.intro-note-text + .intro-note-text { margin-top: .75rem; }

/* ---- jackpot now stands alone under the lobby ------------------------ */
.jackpot-section { padding: 0 0 clamp(1.5rem, 4vw, 2.5rem); }

/* the artwork carries the JACKPOT plate; the figure sits on its panel */
.jackpot-panel {
  position: relative;
  display: block;
  width: min(100%, 420px);
  margin-inline: auto;
  padding: 0;
  /* a self-contained plaque, so unlike the banner it keeps a drawn edge */
  border: 2px solid rgba(229, 167, 73, .45);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(229, 167, 73, .16), 0 6px 18px rgba(0, 0, 0, .45);
  container-type: inline-size;
}

/* the artwork rides in flow, so the panel takes its height from the image
   itself. An aspect-ratio box did the same until the panel became a query
   container — WebKit drops the ratio on one, and with both children absolute
   the panel is left empty and flat */
.jackpot-art {
  display: block;
  width: 100%;
  height: auto;
}

/* the plaque is a phone-lobby element; the desktop layout does without it */
@media (min-width: 861px) {
  .jackpot-section { display: none; }
}

/* the plate in the artwork sits 1.5% right of the image centre, so both the
   figure and the button line up with it rather than with the box */
.jackpot-amount {
  position: absolute;
  /* 82% wide, centred on 51.5% — stated as two edges, so no horizontal
     transform is involved */
  left: 10.5%;
  right: 7.5%;
  top: 44%;
  transform: translateY(-50%);
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(1.35rem, 8.9vw, 2.4rem);
  font-size: 9.6cqw;
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 0 rgba(3, 26, 22, .75), 0 0 14px rgba(255, 225, 117, .45);
}
.jackpot-amount.is-ticking { transform: translateY(-50%) scale(1.03); }

/* scoped to the panel so it outweighs the plain `.btn-primary` plate */
.jackpot-panel .jackpot-cta {
  position: absolute;
  /* the margins do the centring, so the button keeps its place whatever
     width the label ends up at */
  left: 3%;
  right: 0;
  bottom: 8.8%;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
  /* The plaque sets this button's scale, so the cap rides on the panel's
     width along with the type — that keeps the brackets in proportion to
     the artwork instead of to the page. The first three declarations are
     the fallback: where container units are missing the cqw pair drops
     and the button would otherwise collapse to the plain .btn size. */
  min-height: clamp(2.6rem, 15vw, 4rem);
  font-size: clamp(.95rem, 6.2vw, 1.6rem);
  padding: 0 clamp(1.5rem, 11.5vw, 3.1rem);
  min-height: 15cqw;
  font-size: 6.2cqw;
  padding-inline: 10cqw;
}
/* the plaque's button runs the same pair, and for the same reason takes
   the scale itself so the label breathes with the plate */
.jackpot-panel .jackpot-cta {
  will-change: transform;
  backface-visibility: hidden;
  animation: cta-pulse 1.9s ease-in-out infinite;
}
.jackpot-panel .jackpot-cta::before {
  animation: cta-plate-glow 1.9s ease-in-out infinite;
}
.jackpot-panel .jackpot-cta:hover,
.jackpot-panel .jackpot-cta:hover::before,
.jackpot-panel .jackpot-cta:active::before { animation-play-state: paused; }
.jackpot-panel .jackpot-cta:active {
  animation: none;
  transform: translateY(1px);
}

/* the wins band lost its side column, so it spans the full width */
@media (min-width: 860px) {
  .wins-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* tighter side gutters throughout */
  .wrap { width: min(100% - 1.5rem, var(--container)); }

  /* hero: full bleed, the fade doing the framing — no chip to inset */
  .hero {
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    /* a third shorter than the stock banner */
    min-height: clamp(292px, 55vw, 336px);
    padding: 2.75rem 0 1.75rem;
    background-size: cover;
    background-position: center;
  }

  /* recent wins: one continuous strip, entries split by hairlines */
  .wins-section {
    padding: 0;
    background: var(--surface);
    border-block: 1px solid var(--border-soft);
    box-shadow: none;
  }
  .wins-wrap { width: 100%; }
  .wins-panel {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* keep the label, drop the arrows — the strip advances on its own */
  .wins-panel-head {
    margin-bottom: .5rem;
    padding: .9rem 1rem 0;
  }
  .wins-panel-title { font-size: var(--fs-5); }
  .wins-live { font-size: var(--fs-3); }
  .wins-nav { display: none; }
  .wins-carousel-wrap { gap: 0; overflow: hidden; }
  .wins-track { gap: 0; scroll-snap-type: x mandatory; }
  .win-card { scroll-snap-align: start; }
  .win-card {
    position: relative;
    width: auto;
    gap: .85rem;
    padding: .95rem 1.05rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .win-card + .win-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 56%;
    background: var(--border);
  }
  .win-card-thumb { width: 92px; height: 70px; border-radius: var(--radius-sm); }
  .win-card-info { gap: 3px; }
  .win-card-player { font-size: var(--fs-3); line-height: 1.25; }
  .win-card-game { font-size: var(--fs-4); line-height: 1.25; max-width: 184px; }
  .win-card-amount { font-size: var(--fs-6); line-height: 1.25; }

  /* lobby: a snapping rail of tall, narrow cards */
  .pg-nav { display: flex; }
  /* the rails sit close together instead of a full section gap apart */
  #games, #crash-games, #live-casino { padding-block: 1rem; }
  #games .section-head,
  #crash-games .section-head,
  #live-casino .section-head { margin-bottom: .55rem; }
  /* These three share their line with the rail's arrows, so they get a
     step below the other section titles: the display face sets wide, and
     at the stock size "Crash a instantné hry" turned the row into two
     lines. Sized off the viewport so it still holds at 320px. */
  #games .section-head h2,
  #crash-games .section-head h2,
  #live-casino .section-head h2 {
    font-size: clamp(1.05rem, .5rem + 2.8vw, 1.5rem);
  }
  .pg-grid {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* the rail clips vertically once overflow-x is set, so the top padding
       has to clear the half-badge that hangs above each card */
    padding: 1rem 0 .4rem;
  }
  .pg-grid::-webkit-scrollbar { display: none; }
  .pg-grid .pg-card {
    /* wide enough that the artwork carries, while the third tile still
       breaks the right edge — that peek is what says the rail scrolls */
    flex: 0 0 152px;
    scroll-snap-align: start;
    padding: .55rem;
    gap: .5rem;
  }
  .provider-item { width: clamp(92px, 28vw, 130px); height: 60px; }
  .pg-thumb { width: 100%; aspect-ratio: 3 / 4; }
  .pg-title { font-size: var(--fs-3); }
  .pg-provider { font-size: var(--fs-1); }
  .pg-grid:not(.is-expanded) .pg-card:nth-child(n+7) { display: flex; }
  .show-more-btn { display: none; }
}

@media (max-width: 640px) {
  /* The phone artwork is a square carrying its own carved plate along the
     bottom, and the bonus copy is meant to sit on that plate. Sized to the
     width the picture is exactly 100vw tall, which left the banner no room
     below it — so the fade had nowhere to land but across the plate. The
     banner is given a skirt of bare teal under the picture instead, and the
     fade spends itself on that. The same skirt is added back as bottom
     padding, or the flex-end copy would drop into it and off the plate. */
  .hero {
    /* how far the picture sits below the banner's top edge, and the band of
       bare page colour left under it. The banner is the sum of the two plus
       the picture, so the skirt always begins exactly where the picture ends
       — drop it without the banner growing to match and the skirt, which is
       pinned to the floor, would ride up over the artwork. */
    --hero-drop: 12px;
    --hero-skirt: 72px;
    align-items: flex-end;
    background-image:
      linear-gradient(var(--bg), var(--bg)),
      url("assets/hero-bg-mobile.webp");
    background-position: center bottom, center var(--hero-drop);
    background-size: 100% var(--hero-skirt), 100% auto;
    min-height: calc(100vw + var(--hero-drop) + var(--hero-skirt));
    /* the copy is bottom-anchored, so the bottom padding is what holds it off
       the floor. It is shorter than the skirt on purpose: the block settles
       low on the carved plate and its last line hangs a little past the
       picture's edge, which is why the skirt was lengthened to make room */
    padding: 1.25rem 0 1.125rem;
  }
  /* the fade stops where the picture does, so it hands over to the skirt at
     full strength: run to the banner's floor instead and its solid stretch —
     a fifth of its height — would be far shorter than the skirt, leaving the
     teal lit up underneath it */
  .hero::after {
    bottom: var(--hero-skirt);
    height: clamp(90px, 26vw, 120px);
  }
}

/* ---- phone header: lens left, mark centred, both pills on their own row */
@media (max-width: 860px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    gap: .75rem;
    row-gap: .65rem;
    padding-block: .6rem;
  }
  .nav-side-left { display: none; }
  .brand { margin-inline: auto; }
  .nav-toggle { position: absolute; top: 12px; left: .75rem; }
  /* same inner padding as a lobby card */
  .intro-note-card { padding: .55rem; }
  .nav-side-right { width: 100%; margin-left: 0; }
  .header-actions { width: 100%; gap: .5rem; }
  /* The pills share the row, so they sit shorter and on the smallest cap
     the plate still models. They also drop a type step: the display face
     sets wide, and at fs-3 the two labels together no longer fit a phone
     row — "Registrácia" alone would push past the right edge. */
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    --btn-pad: .7rem;
    min-height: 34px;
    padding: 0 var(--btn-pad);
    font-size: var(--fs-2);
  }
  /* stays fixed (so the closed panel is clipped instead of widening the page);
     --nav-top is measured from the header when the menu opens, because the
     banner above it scrolls away and changes where the header ends */
  .main-nav {
    position: fixed;
    inset: var(--nav-top, 110px) 0 0 0;
    overflow-y: auto;
  }
}

.brand-logo { width: 166px; height: auto; }
.footer-brand .brand-logo { width: 150px; }
.cta-band-logo { width: 166px; height: auto; }

/* ---- where each face lands -------------------------------------------
   The template handed every display role to one face because Oswald is a
   condensed grotesque that works at any size. Luckiest Guy is not: it is
   a single-weight cartoon face drawn for headlines, and it turns to mush
   under 16px. So it keeps the headings and the wordmark, where its
   character is the point, and everything else the template had set in
   the display face — buttons, nav, eyebrows, table heads, the small
   badges and the ticking figures — moves to condensed bold, which holds
   its counters at 12px and can actually carry a weight.               */
.eyebrow,
.wins-panel-title,
.wins-live,
.providers-carousel-title,
.fact-label,
.footer-col h3,
.promo-tag,
.promo-value,
.jackpot-amount,
.limits-table thead th,
.step-number,
.pg-title,
.win-card-game,
.show-more-btn,
.license-badge,
.age-badge {
  font-family: var(--font-ui);
}

/* the buttons are the exception: they carry the display face, the way the
   lobby sets them — uppercase, bold, on the lobby's own .04em.        */
.btn {
  font-family: var(--font-display);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-track);
}

/* so does the nav: the lobby runs the display face everywhere, and the
   links sit right under the wordmark, which is where a second face
   would show */
.nav-side ul a,
.main-nav ul a,
.nav-actions a {
  font-family: var(--font-display);
  font-weight: var(--nav-weight);
}

/* the wordmark keeps the display face */
.brand { font-family: var(--font-display); font-weight: 700; }

/* the headings, and the bonus figure inside the hero h1. Cinzel sets
   wide by design, so the tight tracking Oswald needed closes it up */
h1, h2, h3, h4 { font-weight: var(--display-weight); line-height: 1.25; }
.hero h1 .grad-text { font-weight: 700; letter-spacing: var(--display-track); }

/* the face carries a tall cap height, so the label plate and the stacked
   hero lines need the extra room */
.hero h1 { line-height: 1.3; }

/* ---- the banner's own three colours ----------------------------------
   Read off the lobby banner: the bonus figure is white, the type plate
   carries the brand gold, and the plate labels are the lobby's white. */

/* the figure: white, over the hard drop the face is drawn for */
.hero h1 .grad-text,
.cta-band h2 .grad-text {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* the plate's label steps up from cream to the lobby's #e5a749 */
.promo-card h3,
.hero h1 .hero-label {
  color: rgb(var(--stb-gold-300));
  -webkit-text-fill-color: rgb(var(--stb-gold-300));
}

/* The plate labels are white, as the lobby sets them — the dark rim that
   separates them from the lit middle of the well is built on .btn, since
   both plates need it. This rule only has to undo the gradient-text fill
   the banner headings set, which would otherwise clip the label. */
.btn-primary,
.btn-ghost {
  -webkit-text-fill-color: rgb(var(--stb-white));
}

/* ---- phone: the banner and its furniture ------------------------------
   Sits after .brand-logo's own rule so these win on source order rather
   than on a specificity bump.                                          */
@media (max-width: 860px) {
  /* the mark carries the header on its own once the nav folds away, so
     it takes the room the shorter pills freed */
  .brand-logo { width: 200px; height: 32px; }

  /* the mint plate is the phone banner's one call to action, so it goes
     up to the large step */
  .btn-primary,
  .btn-primary.btn-lg { --btn-pad: 1.75rem; min-height: 54px; font-size: var(--fs-6); }

  /* the desktop lift is what the label needed over a wide banner; on the
     phone the artwork sits higher and the label wants to come back down */
  .hero h1 .hero-label { top: -.06em; }
}

/* ---- top scrim, sized per banner layout
   The tablet banner is cropped to `cover` and runs tall for its width, so the
   scrim needs more room than the desktop value to carry the artwork up into
   the header. The phone banner is a different picture that starts a drop
   below the banner's own top edge, so its scrim only has to cover that gap
   and a little of the artwork — and it tracks --hero-drop: shorten the gap
   and leave the scrim long and the fade eats into the castle instead. */
@media (min-width: 641px) and (max-width: 860px) {
  .hero::before { height: clamp(110px, 30vw, 170px); }
}
@media (max-width: 640px) {
  .hero::before { height: clamp(72px, 21vw, 120px); }
}