/* BigClash Casino — tema do template monomarca */

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-500-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: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-500-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;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-700-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: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-700-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;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-900-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: "Fira Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-900-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;
}
@font-face {
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-900i-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: "Fira Sans";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/fira-sans-900i-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;
}

:root {
  --scheme: dark;

  /* ---- BigClash's own ramp, read off the lobby -------------------------
     neutral is a navy scale, not a grey one: #00113a carries the page and
     #0a2c65 the header band. brand is the green the lobby registers with,
     gold the yellow it prices wins and jackpots in, blue the log-in action
     and every nav glyph.                                                 */
  --stb-neutral-950: 0 9 30;
  --stb-neutral-900: 7 24 60;
  --stb-neutral-850: 2 22 70;
  --stb-neutral-800: 4 28 84;
  --stb-neutral-750: 6 34 96;
  --stb-neutral-700: 10 44 101;
  --stb-neutral-600: 22 62 134;
  --stb-neutral-550: 25 66 144;
  --stb-neutral-500: 36 86 170;
  --stb-neutral-400: 64 116 198;
  --stb-neutral-300: 124 164 222;
  --stb-neutral-200: 168 198 236;
  --stb-neutral-150: 198 218 245;
  --stb-neutral-100: 221 233 250;
  --stb-neutral-50: 238 245 255;
  --stb-white: 244 249 255;
  --stb-black: 0 9 30;

  /* the registration green, lit rim to hard step */
  --stb-brand-500: 32 214 60;
  --stb-brand-600: 23 176 52;
  --stb-brand-700: 13 95 38;
  --stb-brand-200: 123 227 130;
  --stb-brand-150: 160 240 165;

  --stb-gold-100: 255 240 158;
  --stb-gold-500: 254 217 6;
  --stb-gold-300: 255 198 64;
  --stb-gold-200: 251 215 102;
  --stb-gold-600: 219 150 10;
  --stb-gold-700: 122 76 0;

  --stb-blue-500: 88 123 189;
  --stb-blue-600: 43 82 150;
  --stb-blue-700: 29 63 116;

  --stb-red-500: 255 69 58;
  --stb-green-500: 32 214 60;

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-900));
  /* the blue the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #071a2e;
  /* 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-900)) 0%,
    rgb(var(--stb-neutral-900)) 20%,
    rgb(var(--stb-neutral-900) / .96) 30%,
    rgb(var(--stb-neutral-900) / .84) 40%,
    rgb(var(--stb-neutral-900) / .68) 50%,
    rgb(var(--stb-neutral-900) / .5) 60%,
    rgb(var(--stb-neutral-900) / .32) 70%,
    rgb(var(--stb-neutral-900) / .16) 80%,
    rgb(var(--stb-neutral-900) / .04) 90%,
    rgb(var(--stb-neutral-900) / 0) 100%;
  --bg-top: rgb(var(--stb-neutral-850));
  --bg-elevated: rgb(var(--stb-neutral-800));
  --surface: rgb(var(--stb-neutral-850));
  --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));
  /* fine print takes the next step up the ramp so it still clears AA on the
     navy the lobby runs */
  --text-faint: rgb(var(--stb-neutral-300));

  /* links and accents are the lobby's yellow; green is reserved for the
     register action and the live wins */
  --gold: rgb(var(--stb-gold-300));
  --gold-2: rgb(var(--stb-gold-200));
  --green: rgb(var(--stb-brand-500));

  --grad-gold: linear-gradient(180deg, rgb(var(--stb-gold-100)) 0%, rgb(var(--stb-gold-500)) 100%);
  --grad-green: linear-gradient(180deg, rgb(var(--stb-brand-500)) 0%, rgb(var(--stb-brand-600)) 100%);
  --grad-mint: var(--grad-green);
  --grad-blue: linear-gradient(180deg, rgb(var(--stb-blue-600)) 0%, rgb(var(--stb-blue-700)) 100%);
  --grad-teal: var(--grad-blue);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(0, 92, 236, .12);
  --glow-b: rgba(254, 217, 6, .06);
  /* the header keeps the lobby's lighter navy band */
  --header-bg: linear-gradient(180deg, rgb(var(--stb-neutral-700)) 0%, rgb(var(--stb-neutral-750)) 55%, rgb(var(--stb-neutral-800)) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-800));
  --band-bg: linear-gradient(to bottom, rgba(2, 22, 70, .78), rgba(2, 22, 70, .52) 60%, rgba(2, 22, 70, .78));
  --scrim-top: linear-gradient(to bottom, rgba(0, 17, 58, .7), transparent);
  --overlay: rgb(0 13 42 / .92);

  --win: rgb(var(--stb-gold-500));
  --win-glow: rgba(254, 217, 6, .4);
  --tint-accent: rgba(255, 198, 64, .12);
  --accent-glow: rgba(255, 198, 64, .3);
  --cta-glow: rgba(32, 214, 60, .26);
  --subtle-fill: rgba(206, 226, 255, .05);
  --subtle-fill-2: rgba(206, 226, 255, .1);
  /* the marks are black-on-transparent, so they are flattened to white
     rather than greyed the way they were against the light lobby */
  --provider-filter: brightness(0) invert(1);
  --provider-blend: normal;

  /* ---- the lobby's radii: small, not the template's rounded chips ------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-btn: 6px;
  --radius-pill: 9999px;
  --radius-thumb: 4px;

  /* ---- type: Fira Sans throughout, the way the lobby sets it. Headings
     and buttons run 900 italic uppercase; copy runs 500. ---------------- */
  --font-display: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 900;
  --display-style: italic;
  --display-track: 0;
  --display-case: uppercase;
  --btn-weight: 900;
  --btn-style: italic;
  --btn-track: .01em;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the hard step under every pill, and how far it sinks when pressed */
  --btn-shadow-height: 4px;
  --btn-active-transform: 3px;
  --btn-label: rgb(var(--stb-white));
  --nav-weight: 700;
  --nav-track: .03em;
  --nav-case: uppercase;
  --hero-stroke: 2px rgb(0 9 30 / .92);

  /* 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;

  --container: 1180px;
  --container-narrow: 720px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
  --shadow-1: 0 14px 34px -12px rgba(0, 0, 0, .6);
}

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

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

body {
  /* The lobby does not light its field: it is one flat navy from the header
     band to the footer, with a single soft lift under the header where the
     banner meets the page. The template's six drifting glows were replaced
     by that, or the sections below read as a different site to the one the
     hero is a screenshot of. */
  background:
    radial-gradient(120vw 320px at 50% -48px, rgb(var(--stb-neutral-750) / .55), transparent 72%),
    rgb(var(--stb-neutral-900));
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -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);
  font-style: var(--display-style);
  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);
}

.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;
}
/* opacity and transform only: the ring used to grow on `box-shadow`,
   which repaints the dot on every frame of a loop that never ends */
@keyframes wins-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}

.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: .65rem;
  flex: 0 0 auto;
  width: 190px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .72rem .6rem;
}

.win-card-thumb {
  width: 66px;
  height: 66px;
  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, .5), 0 3px 0 rgba(122, 76, 0, .9);
}

.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-style: var(--btn-style);
  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);
}
/* The band is painted on the header itself. It used to ride a pseudo
   element carrying `backdrop-filter: blur(10px)`, which bought nothing —
   `--header-bg` is fully opaque, so there was never anything showing
   through to blur — and cost a composited backdrop pass that the browser
   re-samples on every scroll frame. On a phone that pass lands a frame
   behind the sticky header, which is what read as the header shaking. */
.site-header {
  background: var(--header-bg);
}

.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;
}

.brand-logo {
  height: 52px;
  width: 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-4);
  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-4);
  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 spans the full banner: sized to
   the height it leaves a strip of bare teal on the left, since the picture is
   2.67:1 against a banner nearer 3.6:1. Covering trades that for a vertical
   crop, and anchoring the top spends the whole crop on the foreground — which
   drops the figures as far down the banner as the artwork allows. */
@media (min-width: 861px) {
  .hero {
    background-size: cover;
    background-position: center top;
    /* the banner has to keep growing with the viewport, or covering a fixed
       390px would scale the picture further on every wider screen and crop
       the figures off at the shoulders. tracking the width holds the crop at
       roughly a quarter of the artwork from 1280 up. */
    min-height: clamp(390px, 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 {
  /* the figure is the banner's whole headline, so the ramp runs steep: the
     kicker above it already says what the bonus is, which is what lets the
     line itself stay short enough to hold one row at phone width */
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 3.9rem);
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.12;
}
/* 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 plate under every bonus-type title --------------------------
   The template's three-slice label, with its serrated end caps, came from
   the previous brand. The lobby cuts a title plate one way only — a lean
   that follows the italic, a sliver lost off the bottom edge — so the
   bonus titles take that cut, the same one the rail headings ride. The
   hero line is the one exception: it sits bare on the artwork, see
   below.                                                               */
.promo-card h3 {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: .12em .9em .18em .7em;
}
.promo-card h3::before {
  position: absolute;
  z-index: -1;
  inset: -2px 0 -4px;
  background: linear-gradient(180deg,
    rgb(var(--stb-neutral-550)),
    rgb(var(--stb-neutral-600)));
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  transform: skewX(-12deg);
  pointer-events: none;
  content: "";
}


@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 red CTA breathes, the way the jackpot button does */
.hero .hero-cta .btn-primary {
  animation: hero-cta-pulse 1.9s ease-in-out infinite;
}
.hero .hero-cta .btn-primary:hover,
.hero .hero-cta .btn-primary:active { animation-play-state: paused; }
@keyframes hero-cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

@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;
}
/* The sheen used to travel on `background-position`, which the browser
   cannot hand to the compositor: every frame repainted the thumbnail, and
   with a rail of them running at once a phone spends its scroll budget on
   decoration. The band is now a box 2.6x the tile's width that slides on
   `transform` instead — same sweep, same stops, no repaint. */
.pg-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260%;
  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%
  );
  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); }
}
/* the old percentages restated against the band's own width: a position
   of 170% sat it 2.72 tile-widths left, -70% put it 1.12 to the right */
@keyframes pg-sheen {
  0%, 62% { transform: translateX(-104.6%); }
  88%, 100% { transform: translateX(43.1%); }
}

.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); }

.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); }

.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; }

.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;
  font-style: italic;
  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 {
  height: 48px;
  width: 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 {
  height: 44px;
}

.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;
}

.license-badge {
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.license-badge:hover {
  border-color: var(--gold-2);
  color: var(--gold-2);
}

[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);
}

@media (max-width: 860px) {
  .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%);
    /* The closed panel used to sit there translated off-screen, which
       keeps a full-height, scrollable, transformed box live in the layer
       tree for the whole visit — inside the sticky header, no less, so
       the header carried it on every scroll frame. `visibility` takes it
       out entirely; it is switched back the instant the panel opens and
       only switched off once the slide-out has finished, so the
       animation still runs both ways. */
    visibility: hidden;
    transition:
      transform var(--dur) var(--ease),
      visibility 0s linear var(--dur);
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform var(--dur) var(--ease),
      visibility 0s;
  }

  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); }

  .nav-actions {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 1.5rem;
  }
  .nav-actions .btn { width: 100%; }

  .header-actions .btn { 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);
  /* the tag is cut into the corner now rather than straddling the top
     edge, so the card only needs its own top padding back */
  padding-top: 1.55rem;
  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 */
.promo-card h3 {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: var(--fs-5);
  line-height: 1;
  text-transform: none;
  color: #fff;
}

/* the tag is the game tile's, cut into the card's top-right corner the
   same way: square on its three inner sides, rounded only where it meets
   the card's own corner */
.promo-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin-bottom: 0;
  padding: .16rem .42rem .2rem;
  border: 0;
  border-radius: 0 9px 0 4px;
  background: var(--grad-gold);
  color: var(--on-accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / .5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-1);
  line-height: 1.15;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* nav glyphs take the lobby's accent-link teal, not the CTA gold */
/* nav glyphs take the brighter blue the lobby tints its rail icons with,
   not the pill blue the log-in button is painted in */
.nav-icon [fill="currentColor"] { fill: #3c8eff; }
.nav-icon [stroke="currentColor"] { stroke: #3c8eff; }

.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(0, 17, 58, .6); }
.hero h1 .grad-text { color: rgb(var(--stb-gold-500)); }

/* ---- buttons, built to the lobby's own recipe -------------------------
   A flat vertical gradient, a 1px lit rim, a 2px inset highlight along the
   top edge and a hard step underneath. Pressing the button sinks it onto
   that step rather than fading a shadow.                                */
.btn {
  border-radius: var(--radius-btn);
  line-height: 1.2;
  letter-spacing: 0;
  transition:
    text-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: none; }

/* the gold action: every lobby CTA, register, claim, play */
.btn-primary {
  border: 1px solid rgba(160, 240, 165, .55);
  color: #fff;
  background: var(--grad-green);
  text-shadow: 0 2px 0 rgba(0, 54, 18, .45);
  box-shadow: 0 2px #5aed6a inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-brand-700));
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgb(var(--stb-brand-200)) 0%, rgb(var(--stb-brand-500)) 100%);
}
.btn-primary:active {
  background: var(--grad-green);
  box-shadow: 0 1px #5aed6a inset, 0 1px rgb(var(--stb-brand-700));
  transform: translateY(var(--btn-active-transform));
}

/* the teal action: log in, and anything that sits beside a gold CTA */
.btn-ghost {
  border: 1px solid rgba(118, 152, 214, .6);
  color: var(--btn-label);
  background: var(--grad-blue);
  text-shadow: 0 2px 0 rgba(0, 10, 36, .45);
  box-shadow: 0 2px #587bbd inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-800));
}
.btn-ghost:hover {
  text-shadow: none;
  color: var(--btn-label);
  border-color: rgba(118, 152, 214, .4);
  background: linear-gradient(180deg, rgb(var(--stb-neutral-500)) 0%, rgb(var(--stb-blue-700)) 100%);
  box-shadow: 0 2px #587bbd inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-800));
}
.btn-ghost:active {
  color: rgb(var(--stb-white) / .85);
  background: var(--grad-blue);
  box-shadow: 0 1px #10276a inset, 0 1px rgb(var(--stb-neutral-800));
  transform: translateY(var(--btn-active-transform));
}

/* the mint action, kept for the odd secondary the lobby paints in brand */
.btn-mint {
  border: 1px solid rgba(160, 240, 165, .55);
  color: #fff;
  background: var(--grad-green);
  text-shadow: 0 2px 0 rgba(0, 54, 18, .45);
  box-shadow: 0 2px #5aed6a inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-brand-700));
}
.btn-mint:active {
  box-shadow: 0 1px #a0f0a5 inset, 0 1px rgb(var(--stb-brand-700));
  transform: translateY(var(--btn-active-transform));
}

/* ---- the CTA carries no dressing ------------------------------------
   The template hung two ribbons off the pill's ends and straddled it with
   sparkles. That set belonged to the previous brand: the lobby registers
   on a bare pill, lit along its top rim and stepped onto a darker edge,
   and nothing overhangs it. The pill keeps position so the lifted header
   variants below still have something to stack on.                     */
.btn-primary:not(.btn-sm) { position: relative; }

/* the lobby steps the step down with the button: smaller pills sit on 2px */
.btn-sm,
.header-actions .btn {
  --btn-shadow-height: 2px;
  --btn-active-transform: 1px;
  border-radius: 6px;
}
.btn-lg { --btn-shadow-height: 4px; --btn-active-transform: 3px; border-radius: 12px; }

/* the two header pills stay compact next to the wordmark */
.header-actions .btn {
  padding: .46rem .85rem;
  font-size: var(--fs-4);
  letter-spacing: 0;
}

/* Over the banner both pills ride blue, so neither competes with the green
   the artwork already carries. Registration turns green the moment the
   header pins, which is where it becomes the only CTA on screen. */
.btn-primary[data-cta-section="header-signup"],
.btn-primary[data-cta-section="nav-signup"] {
  border: 1px solid rgba(118, 152, 214, .6);
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 2px #587bbd inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-800));
}
.site-header.is-stuck .btn-primary[data-cta-section="header-signup"],
.site-header.is-stuck .btn-primary[data-cta-section="nav-signup"] {
  border-color: rgba(160, 240, 165, .55);
  background: var(--grad-green);
  box-shadow: 0 2px #5aed6a inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-brand-700));
}
/* and both take the banner CTA's cut lettering: white caps laid over a
   dark stroke, with the shadow thrown down and right — so do the pills
   inside the bonus cards, which are the same action at a smaller size */
.header-actions .btn,
.nav-actions .btn,
.promo-card .btn {
  -webkit-text-stroke: 1.5px rgb(var(--stb-black));
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 rgb(var(--stb-black) / .5);
}


/* ---- 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; }

/* ---- the game tile, the way the lobby draws it ----------------------
   The lobby frames nothing: a tile is the artwork itself, cut to a small
   radius over a dark rim, with no card box behind it and no caption plate.
   The carved corner castings this template shipped with are gone — they
   belonged to the previous brand and read as a different lobby. What is
   left on the tile is the lobby's own decor: a square tag notched into the
   top-right corner, and the gold play plate the artwork reveals. */
.pg-card {
  position: relative;
  padding: 0;
  gap: .5rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pg-card:hover {
  transform: translateY(-3px);
  box-shadow: none;
}
.pg-thumb {
  width: 100%;
  border: 1px solid rgb(0 0 0 / .55);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgb(0 0 0 / .45);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pg-card:hover .pg-thumb {
  border-color: rgb(var(--stb-blue-500) / .85);
  box-shadow: 0 8px 20px rgb(0 0 0 / .55);
}

/* the tag is cut into the corner rather than laid over it: square on the
   three inner sides, and only the outer one follows the tile's radius */
.pg-badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 2;
  transform: none;
  padding: .16rem .42rem .2rem;
  border: 0;
  border-radius: 0 5px 0 4px;
  background: var(--grad-gold);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-1);
  line-height: 1.15;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgb(0 0 0 / .5);
}
.pg-badge-hot { background: var(--grad-gold); }

/* the play plate the artwork reveals runs the same gold, cut the lobby's
   way: italic black caps over a hard bottom step */
.pg-play {
  padding: .5rem 1.1rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 2px 0 0 rgb(var(--stb-gold-600)), 0 4px 10px rgb(0 0 0 / .5);
}

/* the caption drops to the page field, since there is no card under it */
.pg-info { padding-top: 0; }
.pg-title { font-size: var(--fs-4); }
.pg-provider { font-size: var(--fs-2); }

/* ---- 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-text {
  margin: 0;
  font-size: var(--fs-4);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---- 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(254, 217, 6, .5);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(254, 217, 6, .18), 0 6px 18px rgba(0, 0, 0, .5);
  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(0, 9, 30, .8), 0 0 14px rgba(254, 217, 6, .5);
}
.jackpot-amount.is-ticking { transform: translateY(-50%) scale(1.03); }

/* scoped to the panel so it outweighs `.btn-primary:not(.btn-sm)`, which
   claims position: relative for the button's drawn ornaments */
.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 viewport-based pair is the fallback: where container units are
     missing the cqw declarations drop and the button would otherwise
     collapse to the plain .btn size */
  padding: clamp(.55rem, 4.2vw, 1.15rem) clamp(1.5rem, 11.5vw, 3.1rem);
  font-size: clamp(.95rem, 6.2vw, 1.6rem);
  padding: 4.2cqw 11.5cqw;
  font-size: 6.2cqw;
  animation: jackpot-pulse 1.9s ease-in-out infinite;
}
@keyframes jackpot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
.jackpot-panel .jackpot-cta:hover { animation-play-state: paused; transform: translateY(-2px); }
.jackpot-panel .jackpot-cta:active { animation-play-state: paused; 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(330px, 62vw, 375px);
    padding: 3.25rem 0 2rem;
    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: .2rem;
    padding: .5rem .75rem 0;
  }
  .wins-panel-title { font-size: var(--fs-2); }
  .wins-live { font-size: var(--fs-1); }
  .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: .5rem;
    padding: .72rem .7rem;
    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: 58px; height: 46px; border-radius: var(--radius-sm); }
  .win-card-info { gap: 1px; }
  .win-card-player { font-size: var(--fs-1); line-height: 1.3; }
  .win-card-game { font-size: var(--fs-2); line-height: 1.3; max-width: 106px; }
  .win-card-amount { font-size: var(--fs-3); line-height: 1.3; }

  /* 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; }
  .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 {
    flex: 0 0 136px;
    scroll-snap-align: start;
    padding: 0;
    gap: .45rem;
  }
  .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 {
    /* the phone artwork is 597x674, so at full width it stands 112.9vw
       tall. The banner is exactly that and nothing more: the picture butts
       straight against the header with no band of page colour above it,
       and its own carved plate closes the bottom, so the skirt the old
       square art needed underneath has gone with the drop. */
    --hero-art-h: 113.9vw;
    /* a band of bare page colour under the picture. The copy block is a
       little taller than the plate it belongs on, so the skirt is what
       lets it settle low enough to centre on the plate — its last row
       then hangs a touch past the picture's own bottom edge. */
    --hero-skirt: 56px;
    align-items: flex-end;
    background-image: url("assets/hero-bg-mobile.webp");
    background-position: center top;
    background-size: 100% auto;
    min-height: calc(var(--hero-art-h) + var(--hero-skirt));
    /* the plate's own panel closes at 95.5% of the picture, so the block's
       last row lands there: the figure and the button then fill the plate
       instead of straddling its lower trim */
    padding: 1.25rem 0 calc(var(--hero-art-h) * .045 + var(--hero-skirt) - 56px);
  }
  .hero-inner { width: 100%; }
  /* the copy has a plate to fit inside, so every row of it closes up */
  .hero h1 { margin-bottom: 0; line-height: 1.06; }
  .hero-kicker { font-size: .4em; }
  .hero-cta { margin-top: .2rem; }
  .hero .btn-lg { padding: .62rem 1.9rem; }
  /* the picture butts against the header, so the top edge needs only a
     short pass to kill the seam */
  .hero::before { height: clamp(48px, 11vw, 90px); }
  /* the bottom fade stops where the picture does and hands over to the
     skirt, and it is kept short on purpose: run it the old length and it
     would spend itself across the plate the bonus copy sits on */
  .hero::after {
    bottom: var(--hero-skirt);
    height: clamp(74px, 14vw, 86px);
  }
}

/* ---- 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; }
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    padding: .5rem .8rem;
    font-size: var(--fs-4);
  }
  /* the wordmark is the header's only mark at this width, so it is given
     the room the desktop row cannot spare */
  .brand-logo { height: 62px; }
  /* log in / register live in the header, so the panel holds links only */
  .nav-actions { display: none; }
  /* 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 { height: 46px; width: auto; }
@media (max-width: 860px) { .brand-logo { height: 62px; } }
.footer-brand .brand-logo { height: 40px; }
.cta-band-logo { height: 44px; width: auto; }


/* ---- BigClash's own signatures ---------------------------------------
   Two details carry the brand off the lobby and onto this page. Section
   eyebrows ride a plate that leans with the italic and loses a sliver off
   its bottom edge, the way the lobby cuts its own headings. And every
   figure the lobby prices in yellow — the hero's bonus, the jackpot, each
   win on the strip — is cut out of a dark stroke laid behind the fill, so
   it still reads where it crosses artwork.                              */
.eyebrow {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-inline: .65rem .85rem;
  color: #fff;
  font-style: italic;
  font-weight: 900;
}
.eyebrow::before {
  position: absolute;
  z-index: -1;
  inset: -2px 0 -4px;
  background: rgb(var(--stb-neutral-550));
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  transform: skewX(-12deg);
  pointer-events: none;
  content: "";
}
/* on the panels that already sit on a plate, the eyebrow stays plain */
.legal-hero .eyebrow::before { background: rgb(var(--stb-neutral-600)); }

/* the stroke goes behind the fill, so it thickens the glyph outwards
   instead of eating into it */
.hero h1 .grad-text,
.jackpot-amount,
.win-card-amount {
  paint-order: stroke fill;
}
.jackpot-amount,
.win-card-amount {
  -webkit-text-stroke: 1.5px rgb(0 9 30 / .9);
}

/* the live-win amounts take the lobby's yellow rather than its green */
.win-card-amount { color: var(--win); }

/* the lobby's nav glyphs are a lighter blue than its links, and its rails
   and search wells are sunk rather than raised */
.wins-panel,
.providers-carousel,
.summary-table-wrap,
.limits-table-wrap {
  box-shadow: inset 0 1px 0 rgb(60 142 255 / .14), 0 2px 10px rgba(0, 0, 0, .34);
}

/* the intro card now carries its own heading above the copy */
.intro-note-title {
  margin-bottom: .6rem;
  font-size: var(--fs-6);
  color: var(--text);
}
.intro-note-text + .intro-note-text { margin-top: .7rem; }

/* the lobby alternates its rails between the page navy and a half-step up,
   so the sections read as stacked panels rather than one long field */
.section-alt {
  background: linear-gradient(180deg,
    rgb(var(--stb-neutral-850) / .6),
    rgb(var(--stb-neutral-850) / .25));
}

/* a table inside an info block needs air under it as well as over it, since
   the copy that explains it follows immediately */
.info-block .limits-table-wrap { margin: 1.5rem 0 1.5rem; }

/* ---- the lobby's rail chrome -----------------------------------------
   Two more pieces the lobby draws itself. Every rail is titled on a plate
   that leans with the italic and loses a sliver off its bottom edge — the
   same cut the eyebrows take, widened for a heading and given the lighter
   wedge the lobby trails off the end of it. And the rail arrows are chips,
   not outlines: a blue face under a lit rim, stepped onto a darker edge,
   the way the register pill is built.                                   */
#games .section-head h2,
#crash-games .section-head h2,
#live-casino .section-head h2 {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: 0;
  padding: .12em .95rem .18em .75rem;
  color: #fff;
  text-transform: uppercase;
}
#games .section-head h2::before,
#crash-games .section-head h2::before,
#live-casino .section-head h2::before {
  position: absolute;
  z-index: -1;
  inset: -2px 0 -5px;
  background: linear-gradient(180deg,
    rgb(var(--stb-neutral-550)),
    rgb(var(--stb-neutral-600)));
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  transform: skewX(-12deg);
  pointer-events: none;
  content: "";
}
/* the wedge the plate trails off to the right, half a step lighter */
#games .section-head h2::after,
#crash-games .section-head h2::after,
#live-casino .section-head h2::after {
  position: absolute;
  z-index: -1;
  top: -2px;
  bottom: -5px;
  left: 100%;
  width: 1.9rem;
  background: rgb(var(--stb-neutral-500) / .75);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  transform: skewX(-12deg);
  pointer-events: none;
  content: "";
}
/* the plate needs the row to stop stretching it to the full width */
#games .section-head-row,
#crash-games .section-head-row,
#live-casino .section-head-row { align-items: flex-start; }

.carousel-arrow {
  width: 32px;
  height: 30px;
  border: 1px solid rgb(118 152 214 / .6);
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--grad-blue);
  box-shadow:
    0 2px 0 0 rgb(var(--stb-blue-500)) inset,
    0 2px 0 0 rgb(var(--stb-neutral-750));
}
.carousel-arrow:hover {
  border-color: rgb(var(--stb-blue-500));
  color: #fff;
  filter: brightness(1.12);
}
.carousel-arrow svg { width: 17px; height: 17px; }

/* the show-more pill follows the log-in action rather than a bare outline */
.show-more-btn {
  border-color: rgb(118 152 214 / .6);
  background: var(--grad-blue);
  color: #fff;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow:
    0 2px 0 0 rgb(var(--stb-blue-500)) inset,
    0 3px 0 0 rgb(var(--stb-neutral-750));
}
.show-more-btn:hover { border-color: rgb(var(--stb-blue-500)); color: #fff; }

/* the field is flat now, so the alternating rails take a hairline instead
   of a tint — a band of lighter navy would put a seam where the lobby has
   none */
.section-alt {
  background: none;
  border-block: 1px solid rgb(var(--stb-neutral-600) / .3);
}

/* ---- the banner CTA, and the line that introduces the bonus ----------
   Measured off the lobby's own hero plate. The pill is built in four
   flat bands rather than a gradient: a black outline, a lit rim along
   the top, one flat green face, and a darker step along the bottom —
   with the outline repeated below as a hard offset shadow, which is what
   gives the button its weight on artwork. The label it sits under is cut
   the same way its figures are: white italic caps over a dark stroke,
   with the shadow thrown down and right.                               */
.btn-lg,
.jackpot-cta {
  --btn-active-transform: 4px;
  padding: .78rem 2.3rem;
  border: 2px solid rgb(var(--stb-black));
  border-radius: 8px;
  background: rgb(var(--stb-brand-500));
  color: #fff;
  -webkit-text-stroke: 2px rgb(var(--stb-black));
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgb(var(--stb-black));
  box-shadow:
    inset 0 4px 0 0 #29fd2f,
    inset 0 -4px 0 0 #199727,
    0 4px 0 0 rgb(var(--stb-black));
}
.btn-lg:hover,
.jackpot-cta:hover { filter: brightness(1.06); }
/* pressing it sinks the pill onto its own shadow, the way the lobby does */
.jackpot-panel .jackpot-cta:active {
  box-shadow:
    inset 0 4px 0 0 #29fd2f,
    inset 0 -4px 0 0 #199727,
    0 0 0 0 rgb(var(--stb-black));
}
.btn-primary.btn-lg:active,
.btn-lg:active {
  background: rgb(var(--stb-brand-500));
  transform: translateY(var(--btn-active-transform));
  box-shadow:
    inset 0 4px 0 0 #29fd2f,
    inset 0 -4px 0 0 #199727,
    0 0 0 0 rgb(var(--stb-black));
}

/* the bonus is introduced, not announced: a half-size line over the
   figure, reversed out white and cut from the same dark stroke */
.hero-kicker {
  display: inline-block;
  font-size: .44em;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 1.5px rgb(0 9 30 / .92);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 rgb(0 9 30 / .5);
}

/* ---- phone: section titles hold one row -----------------------------
   The rail headings share their row with the scroll arrows, so a title
   that fits the page still wraps inside what is left of it. The ramp is
   given a much lower floor for phones, and the plate's own padding comes
   in with it, which between them keeps the rail headings on one line.  */
@media (max-width: 640px) {
  .section-head h2 { font-size: clamp(1rem, .62rem + 1.75vw, 1.45rem); }
  #games .section-head h2,
  #crash-games .section-head h2,
  #live-casino .section-head h2 { padding: .14em .75rem .2em .55rem; }
  #games .section-head h2::after,
  #crash-games .section-head h2::after,
  #live-casino .section-head h2::after { width: 1.3rem; }
  .info-block-title { font-size: clamp(1.05rem, .7rem + 1.6vw, 1.5rem); }
  .info-block-subtitle { font-size: clamp(.95rem, .72rem + 1vw, 1.25rem); }
}