/* Bizzo Casino — theme for the monobrand template (ro-RO)
   Palette, type and component recipes read off bizzocasino.com:
   body #2b1234, nav #41294a, card #452d4f, accent #fdcd0a,
   the call to action a green plate #bcff50 -> #08b83a on #24112c text,
   everything set in Poppins. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/poppins-400-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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/poppins-400-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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/poppins-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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/poppins-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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-600-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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-600-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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/poppins-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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/poppins-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: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/poppins-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: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/poppins-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;
}

: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;

  /* ---- Bizzo's own ramp -------------------------------------------------
     The neutral is a plum scale struck off the lobby's own #2b1234 canvas.
     Its four darkest steps are the four surfaces the live site actually
     ships — body #2b1234, panel #3c2944, nav #41294a, game card #452d4f —
     so a component that asks for "surface" lands on a real Bizzo colour
     rather than an interpolated one. Above that the steps run out to the
     site's two text greys, #ba9cb4 and #f8e1f3.                          */
  --stb-neutral-950: 36 17 44;    /* #24112c  deepest: table heads, plates */
  --stb-neutral-900: 43 18 52;    /* #2b1234  body                          */
  --stb-neutral-850: 50 24 60;    /* #32183c  header band                   */
  --stb-neutral-800: 60 41 68;    /* #3c2944  dropdowns, inputs             */
  --stb-neutral-750: 65 41 74;    /* #41294a  nav elements                  */
  --stb-neutral-700: 69 45 79;    /* #452d4f  game-card info strip          */
  --stb-neutral-600: 86 58 96;    /* #563a60  borders                       */
  --stb-neutral-550: 99 69 110;
  --stb-neutral-500: 122 84 134;
  --stb-neutral-400: 154 115 164;
  --stb-neutral-350: 169 139 164;
  --stb-neutral-300: 186 156 180; /* #ba9cb4  body copy                     */
  --stb-neutral-200: 211 188 208;
  --stb-neutral-150: 228 207 224;
  --stb-neutral-100: 248 225 243; /* #f8e1f3  bright copy                   */
  --stb-neutral-50: 255 250 243;  /* #fffaf3  white                         */
  --stb-white: 255 250 243;
  --stb-black: 26 10 32;

  /* gold read off the lobby: #fdcd0a is the active colour that marks every
     heading, price and link; #ffb800 the accent under it; #cb7529 the
     wordmark's own bevel shadow. Text on gold is the body plum. */
  --stb-gold-100: 255 232 160;
  --stb-gold-200: 253 224 54;     /* #fde036 */
  --stb-gold-300: 253 205 10;     /* #fdcd0a  mainActiveColor */
  --stb-gold-500: 255 184 0;      /* #ffb800  accentMain      */
  --stb-gold-600: 203 117 41;     /* #cb7529  logo bevel      */
  --stb-gold-700: 36 17 44;       /* #24112c  label on gold   */

  /* "brand" is the green plate every Bizzo call to action is painted on:
     a vertical #bcff50 -> #08b83a, inverted on hover. */
  --stb-brand-500: 188 255 80;    /* #bcff50 */
  --stb-brand-600: 8 184 58;      /* #08b83a */
  --stb-brand-700: 6 143 45;
  --stb-brand-200: 215 255 154;
  --stb-brand-150: 232 255 198;

  /* the nav glyphs take the active gold, the way the lobby filters its own
     menu icons to it */
  --stb-blue-500: 253 205 10;
  --stb-blue-600: 255 184 0;
  --stb-blue-700: 203 117 41;

  --stb-red-500: 254 81 81;       /* #fe5151  live / 18+ */
  --stb-green-500: 15 168 16;     /* #0fa810  success    */

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-900));
  /* the plum the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #2b1234;
  /* 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%;
  /* 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 plum beside
     it. The left runs further: that is the side the copy sits on, so it
     doubles as the headline's ground. */
  --hero-side:
    rgb(var(--stb-neutral-900)) 0%,
    rgb(var(--stb-neutral-900)) 14%,
    rgb(var(--stb-neutral-900) / .94) 22%,
    rgb(var(--stb-neutral-900) / .8) 30%,
    rgb(var(--stb-neutral-900) / .6) 38%,
    rgb(var(--stb-neutral-900) / .38) 46%,
    rgb(var(--stb-neutral-900) / .2) 54%,
    rgb(var(--stb-neutral-900) / .08) 62%,
    rgb(var(--stb-neutral-900) / 0) 72%;
  --hero-side-soft:
    rgb(var(--stb-neutral-900) / .85) 0%,
    rgb(var(--stb-neutral-900) / .6) 4%,
    rgb(var(--stb-neutral-900) / .34) 9%,
    rgb(var(--stb-neutral-900) / .16) 14%,
    rgb(var(--stb-neutral-900) / .05) 19%,
    rgb(var(--stb-neutral-900) / 0) 24%;
  --bg-top: rgb(var(--stb-neutral-950));
  --bg-elevated: rgb(var(--stb-neutral-750));
  --surface: rgb(var(--stb-neutral-700));
  --surface-2: rgb(var(--stb-neutral-750));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-800));

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

  /* links and accents are the lobby's active gold */
  --gold: rgb(var(--stb-gold-300));
  --gold-2: rgb(var(--stb-gold-200));
  --green: rgb(var(--stb-gold-300));

  --grad-gold: linear-gradient(180deg, rgb(var(--stb-gold-200)) 0%, rgb(var(--stb-gold-500)) 100%);
  /* the lobby's call-to-action plate, and the hover that flips it */
  --grad-mint: linear-gradient(to bottom, rgb(var(--stb-brand-500)), rgb(var(--stb-brand-600)));
  --grad-mint-hover: linear-gradient(to bottom, rgb(var(--stb-brand-600)), rgb(var(--stb-brand-500)));
  --grad-teal: linear-gradient(180deg, rgb(var(--stb-neutral-750)) 0%, rgb(var(--stb-neutral-800)) 100%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(253, 205, 10, .05);
  --glow-b: rgba(255, 149, 236, .06);
  /* the header keeps a plum band a step up from the canvas */
  --header-bg: linear-gradient(180deg, rgb(var(--stb-neutral-850)) 0%, rgb(var(--stb-neutral-900)) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-850));
  --band-bg: linear-gradient(to top, rgb(var(--stb-neutral-950)), rgb(var(--stb-neutral-950) / .55));
  --scrim-top: linear-gradient(to bottom, rgb(var(--stb-neutral-950) / .7), transparent);
  --overlay: rgb(43 18 52 / .94);

  --win: rgb(var(--stb-gold-300));
  --win-glow: rgba(253, 205, 10, .4);
  --tint-accent: rgba(253, 205, 10, .12);
  --accent-glow: rgba(253, 205, 10, .32);
  --cta-glow: rgba(188, 255, 80, .26);
  --subtle-fill: rgba(248, 225, 243, .05);
  --subtle-fill-2: rgba(248, 225, 243, .1);
  /* 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 rounds tight - 5px on controls, 8px on cards --- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-btn: 5px;
  --radius-pill: 9999px;
  --radius-thumb: 5px;

  /* ---- type: Poppins throughout, the way the lobby sets it -------------
     Bizzo runs one family at five weights: 900 and 700 carry the display
     lines, 600 the buttons and badges, 500 the nav, 400 the body. Nothing
     is set in caps except the footer menu and the eyebrows.            */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 700;
  --display-track: -.01em;
  --display-case: none;
  --btn-weight: 600;
  --btn-track: 0;
  --btn-case: none;
  --btn-shadow: none;
  /* the lobby's buttons sit flat: no hard step, just a short press */
  --btn-shadow-height: 0px;
  --btn-active-transform: 1px;
  --btn-label: rgb(var(--stb-neutral-50));
  --nav-weight: 500;
  --nav-track: 0;
  --nav-case: none;
  --hero-stroke: 0;

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

*, *::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, .hero-headline {
  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);
}

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

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

.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 {
    /* The artwork is 920x518, so 1.78:1 against a banner nearer 2.8:1.
       Covering it meant scaling to the banner's width and throwing away
       a third of the picture's height, which pushed the figures right up
       against the viewer. Sizing by height instead pulls them back to a
       readable distance and leaves bare wine at the left — which is where
       the copy sits, so the headline gains a plain ground at the same
       time. The two scrims below close the seam where the picture ends. */
    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%, auto 118%;
    background-position: left center, right center, right center;
    background-repeat: no-repeat;
    /* the banner keeps growing with the viewport so the picture holds its
       scale rather than being cropped harder on every wider screen */
    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 .hero-headline {
  font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem);
  max-width: 760px;
  /* the bonus plate is no longer the page heading, so it keeps the margin
     box a h1 used to get from the UA sheet rather than a div's none */
  margin-block: .67em;
  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 .hero-headline .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 the old template shipped were not a matched set: the middle was
   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 .hero-headline .hero-label {
  /* the same correction the buttons carry: Luckiest Guy's cap band rides
     high in its line box, which left the label about .3em above the
     middle of the plate. The bottom padding empties into the top, so the
     plate grows barely a pixel while the label drops onto its centre. */
  padding: .48em 1.45em .02em;
  /* 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: .5em;
  line-height: 1.2;
}
.hero .hero-headline .hero-label {
  color: rgb(var(--stb-gold-100));
  -webkit-text-fill-color: rgb(var(--stb-gold-100));
  text-shadow: 0 2px 0 rgba(26, 0, 30, .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(25, 3, 7, .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 .hero-headline { font-size: 42px; }

  .hero .hero-headline { 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: -2.55rem; }

/* the hero's red CTA breathes, the way the jackpot button does */
/* the pulse is on the plate layer, not the button, so the label stays put */
.hero .hero-cta .btn-primary::before {
  animation: hero-cta-pulse 1.9s ease-in-out infinite;
}
.hero .hero-cta .btn-primary:hover::before,
.hero .hero-cta .btn-primary:active::before { animation-play-state: paused; }
/* The scale is back: it was dropped while the plate was a nine-slice,
   because scaling resampled it and lit up every slice join. The plate is
   one stretched image now, so a scale just resamples the whole thing
   evenly and there is nothing to come apart. The glow rides along with
   it, which reads from further away than the size change alone. */
@keyframes hero-cta-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(130, 255, 120, 0));
  }
  50% {
    transform: scale(1.055);
    filter: drop-shadow(0 0 12px rgba(130, 255, 120, .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.018); }
}
@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); }

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

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

  .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 .hero-headline { 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 .hero-headline .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(26, 0, 30, .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 .hero-headline,
.hero .hero-headline .hero-subtext,
.hero-lead { color: #ffffff; text-shadow: 0 2px 10px rgba(25, 3, 7, .6); }
.hero .hero-headline .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(255, 233, 176, .5);
  color: rgb(var(--stb-gold-700));
  background: var(--grad-gold);
  text-shadow: 0 2px 0 rgba(92, 46, 0, .25);
  box-shadow: 0 2px #ffe9b0 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-gold-700));
}
.btn-primary:hover {
  text-shadow: none;
  background: linear-gradient(180deg, rgb(var(--stb-gold-100)) 0%, rgb(var(--stb-gold-300)) 100%);
}
.btn-primary:active {
  background: var(--grad-gold);
  box-shadow: 0 1px #ffe9b0 inset, 0 1px rgb(var(--stb-gold-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(181, 117, 129, .45);
  color: var(--btn-label);
  background: var(--grad-teal);
  text-shadow: 0 2px 0 rgba(17, 0, 0, .3);
  box-shadow: 0 2px #8a4152 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(181, 117, 129, .3);
  background: linear-gradient(180deg, rgb(var(--stb-neutral-300)) 0%, rgb(var(--stb-neutral-600)) 100%);
  box-shadow: 0 2px #8a4152 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-800));
}
.btn-ghost:active {
  color: rgb(var(--stb-gold-200) / .8);
  background: var(--grad-teal);
  box-shadow: 0 1px #4e1a24 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(255, 238, 196, .5);
  color: rgb(var(--stb-neutral-600));
  background: var(--grad-mint);
  text-shadow: 0 2px 0 rgba(92, 46, 0, .22);
  box-shadow: 0 2px #ffeec4 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-400));
}
.btn-mint:active {
  box-shadow: 0 1px #ffeec4 inset, 0 1px rgb(var(--stb-neutral-400));
  transform: translateY(var(--btn-active-transform));
}

/* ---- the cast plaques the old template shipped -----------------------
   Three finished button faces: a coloured well sunk inside a gold rail
   that flares at the corners. They go on as border-images with `fill`,
   so one file covers every label length — the rail holds its shape and
   only the well stretches.

   Slice and border-width have to keep one ratio per plate, or the rail
   thickens as it turns a corner. Each block below states the plate's own
   slice in source pixels and then sets border-width to that same set
   times a single scale, so there is one number to move.               */
/* every plate shares this much: the CSS pill underneath is cleared away
   so only the artwork shows, and the press becomes a sink plus a dip in
   brightness, since there is no longer a hard step to fall onto */
.btn-primary,
.header-actions .btn {
  background: none;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover,
.header-actions .btn:hover { filter: brightness(1.08); background: none; }
.btn-primary:active,
.header-actions .btn:active {
  background: none;
  box-shadow: none;
  filter: brightness(.95);
  transform: translateY(var(--btn-active-transform));
}

/* ---- the green plate: every call to action --------------------------
   Drawn as one stretched image rather than a nine-slice.

   The slicing is what put the joins in it. The plate's top and bottom
   rails are not flat: the gold runs a continuous horizontal gradient
   from each flared corner towards the middle — reading across the source
   at y=20 it climbs 30, 39, 50, 65, 82, 94, 100, 107 and on. A nine-slice
   cuts that ramp at the slice line, holds one column, and stretches it
   across the whole middle, so the modelled corners ended up butted
   against a flat band of gold. That is the seam, and no slice width
   fixes it, because the artwork has no flat strip to repeat.

   Stretching the whole plate keeps the ramp continuous end to end, which
   is the one way it stays a single object. The cost is that the corner
   flares widen with the button; the padding below is what keeps that in
   proportion, by holding every button near the plate's own aspect.    */
.btn-primary {
  --btn-active-transform: 2px;
  position: relative;
  border: 0;
  background: none;
  /* The sides clear the corner flares, which are a quarter of the plate's
     width each; the top and bottom clear the rails, the bottom one being
     the deeper of the two. On top of that the label needs the .5em drop
     it needed before — Luckiest Guy reserves descender room it barely
     uses, so its cap band sits high in the line box. All in em, so the
     plate keeps its proportions at every button size.                  */
  padding: 1.05em 2.5em .75em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 48, 0, .6);
}

/* The plate rides on its own layer, behind the label. That is what lets
   the CTA breathe without the type breathing with it: a scale on the
   button itself resamples the glyphs every frame and the label visibly
   shivers. Scaling this instead leaves the text on the pixel grid. */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grad-mint);
}
.btn-primary.btn-lg { --btn-active-transform: 3px; }
.btn-primary.btn-sm { --btn-active-transform: 1px; padding: .95em 2.2em .7em; }

/* the two header plates are plain pills, so a single 30x40 slice out of
   the 199x80 plate serves every cap — again on whole pixels */
.header-actions .btn {
  --btn-active-transform: 1px;
  border-width: 13px 17px;
  padding: .1rem .15rem;
  font-size: var(--fs-4);
  letter-spacing: 0;
}
/* The two header pills used to be PNG plates, and each carried a hard
   dark shadow a pixel under its label to seat it on the artwork. Those
   plates are gone, but this rule outranked the Bizzo overlay's
   `text-shadow: none` — .header-actions .btn-primary is (0,2,0) against
   a bare .btn-primary — so the shadow survived. On the flat green pill
   it read as a second copy of the word offset by a pixel: dark text
   with a dark ghost under it. Removed outright; the pills take their
   colour from the overlay. */

/* The register pill used to be a purple plate restated under
   .site-header.is-stuck. That stuck selector outranked the phone metrics,
   so the pill grew the moment the header pinned. The plates are gone, so
   the whole group goes with them and the button keeps one size. */


/* ---- 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 frame that wraps every game tile ---------------------------
   The old template shipped this as one 842x1242 plate: a rounded rail with a hollow
   middle. It goes on as a border-image rather than as corner sprites, so
   one file closes the frame at any tile size.

   The numbers have to agree or the rail changes thickness as it turns a
   corner: the source corner box is 120px (the arc runs to x=100, plus a
   little air), so border-width is 120 x the scale we want. At 30px that
   is .25, which renders the plate's own 42px rail at a shade over 10px.
   Keep the pair in step if either is touched.                          */
.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: 30px solid transparent;
  /* no `fill`: the middle slice stays out, so the artwork shows through */
}
.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-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(230, 178, 80, .45);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(230, 178, 80, .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(25, 3, 7, .75), 0 0 14px rgba(255, 217, 94, .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 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-inline: 11.5cqw;
  font-size: 6.2cqw;
  /* the block padding is the plate's, not this panel's: the well sits
     high in the artwork, so the label only lands in it on the same
     asymmetric pair every other green button uses. Sizing this side in
     cqw was what pushed the label off centre here. */
  padding-block: 1.05em .75em;
}
.jackpot-panel .jackpot-cta::before {
  animation: jackpot-pulse 1.9s ease-in-out infinite;
}
/* same pair as hero-cta-pulse above */
@keyframes jackpot-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(130, 255, 120, 0));
  }
  50% {
    transform: scale(1.055);
    filter: drop-shadow(0 0 12px rgba(130, 255, 120, .5));
  }
}
.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, and trimmed again so the
       picture gives the wins strip below it more of the first screen */
    min-height: clamp(296px, 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: .35rem;
    padding: .75rem .85rem 0;
  }
  .wins-panel-title { font-size: var(--fs-4); }
  .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: .7rem;
    padding: .75rem .9rem;
    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: 78px; height: 62px; border-radius: var(--radius-md); }
  .win-card-info { gap: 2px; }
  .win-card-player { font-size: var(--fs-3); line-height: 1.2; }
  .win-card-game { font-size: var(--fs-4); line-height: 1.2; max-width: 156px; }
  .win-card-amount { font-size: var(--fs-5); line-height: 1.2; }

  /* 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: .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 less the crop below, so the skirt always begins exactly
       where the picture is cut — change either without the banner following
       and the skirt, which is pinned to the floor, eats into the artwork. */
    --hero-drop: 30px;
    --hero-skirt: 90px;
    /* how much of the picture's foot is given up to shorten the banner. The
       bottom of the artwork is bare stage, so the crop costs no subject —
       the skirt simply starts that much higher up the square. */
    --hero-crop: 8vw;
    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-crop) + 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.375rem;
  }
  /* the top fade runs long here because it has a seam to hide as well as an
     edge to soften — the picture starts a drop below the banner's own top */
  .hero::before { height: clamp(112px, 13vw, 180px); }
  /* 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 sit shorter here: the plate's cap is already 13px of the
     height, so the padding only has to clear the type */
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    border-width: 10px 14px;
    padding: .06rem .1rem;
    font-size: var(--fs-3);
  }
  /* 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; }
.footer-brand .brand-logo { height: 40px; }
.cta-band-logo { height: 44px; width: 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. Luckiest Guy ships one weight, so the 700 the template
   asked for would only be synthesised into a smear, and the face is drawn
   as capitals already — the extra tracking stops them touching.        */
.btn {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .03em;
}

/* the nav runs on the same face and needs the same correction */
.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-weight: 400; }

/* the wordmark keeps the display face, but Luckiest Guy has one weight,
   so the 800 the template asked for would only be synthesised */
.brand { font-family: var(--font-display); font-weight: 400; }

/* same for the headings, and for the bonus figure inside the hero h1:
   Luckiest Guy is already heavy, and it sets loose by design, so the
   tight tracking Oswald needed at that size closes its letters up */
h1, h2, h3, h4, .hero-headline { font-weight: var(--display-weight); line-height: 1.25; }
.hero .hero-headline .grad-text { font-weight: var(--display-weight); letter-spacing: 0; }

/* the face carries a tall cap height and deep descenders, so the label
   plate and the stacked hero lines need the room — but not as much as the
   stock leading gave them, which pushed the block off the plate */
.hero .hero-headline { line-height: 1.2; }

/* ---- the banner's own three colours ----------------------------------
   Read off the lobby banner: the bonus figure is white, the type plate
   carries amber rather than cream, and the button label is gold.       */

/* the figure: white, over the warm hard drop the face is drawn for */
.hero .hero-headline .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 amber */
.promo-card h3,
.hero .hero-headline .hero-label {
  color: rgb(var(--stb-gold-500));
  -webkit-text-fill-color: rgb(var(--stb-gold-500));
}

/* The button label is gold on green, which is 1.6:1 on its own — in the
   lobby it is the dark rim around each letter that does the separating,
   not the fill, so the rim is built here rather than left to the colour.
   Four offset shadows draw it, and the fifth sits the letters on the
   well. Keep the rim if the fill is ever retuned.                      */
/* The gold-on-green label needed a four-way dark rim to separate it from
   the plate. Bizzo sets dark text on that plate instead, which separates
   on its own, so the rim is gone — it only ever thickened the glyphs. */

/* ---- 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 { height: 60px; }

  /* the phone banner runs taller than the desktop one relative to its
     width, so the top scrim is given more room than either the desktop
     value or the stock clamp floor — it has to carry the artwork into
     the header across a deeper stretch of picture */
  .hero::before { height: clamp(110px, 30vw, 170px); }

  /* the green plate still steps down from the desktop size, but not as
     far as it did — the padding is in em, so the type size carries the
     whole plate up with it */
  .btn-primary,
  .btn-primary.btn-lg { padding: 1.05em 2.4em .8em; 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 .hero-headline .hero-label { top: -.06em; }
}


/* ---- ES build: page H1 inside the intro card -------------------------
   The hero keeps the bonus figure as its display line, so the document's
   H1 sits in the intro card under the wins strip, where the brand and the
   locale read as one sentence. */
.intro-note-title {
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.05rem);
  color: var(--text);
  margin-bottom: .85rem;
  /* ranged left, like the copy under it — centred it read as a banner
     line rather than the opening of the text block it heads */
  text-align: left;
}
.intro-note-text + .intro-note-text { margin-top: .7rem; }

/* ---- multi-column data tables (payments, VIP limits) -----------------
   The brand table is a label/value pair, so its base rules pin the first
   cell to 40% and right-align the last. A real grid of figures needs
   neither, and its columns must not wrap mid-figure. */
.summary-table.data-table td:first-child {
  width: auto;
  color: var(--text);
  font-weight: 700;
}
.summary-table.data-table td:last-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
}
.summary-table.data-table td { white-space: nowrap; }
.summary-table.data-table thead th:last-child { text-align: left; }
.table-note {
  margin-top: .8rem;
  font-size: var(--fs-2);
  color: var(--text-faint);
}

/* the second promo group carries its own heading, a step down from the
   section title and set off from the grid above it */
.promo-subhead {
  font-size: var(--fs-7);
  margin: clamp(2.25rem, 4vw, 3rem) 0 1rem;
}


/* ======================================================================
   BIZZO BRAND OVERLAY
   Everything below restates, in Bizzo's own recipe, the handful of looks
   the template had drawn for a different lobby: the plate-based buttons,
   the carved tile frame and the notched label plate. The rules sit last
   so they win on source order, which keeps the layout layer above them
   untouched.
   ====================================================================== */

/* ---- type roles ------------------------------------------------------
   One family now, so the display/ui split is a weight split instead: the
   lobby sets headings at 700, buttons and badges at 600, nav at 500. */
.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.brand { font-family: var(--font-ui); font-weight: 700; }
.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-weight: 500; text-transform: none; letter-spacing: 0; }
h1, h2, h3, h4, .hero-headline {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
}
.hero .hero-headline .grad-text { font-weight: 900; letter-spacing: -.025em; }
.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); }

/* ---- buttons ---------------------------------------------------------
   `.app-button` on the live site: 5px radius, 50px tall, 14px/600, and
   three faces. The default is the green plate, drawn as a vertical
   #bcff50 -> #08b83a that simply flips on hover; the outline is a 1px
   gold rail that fills gold on hover; the dark label #24112c is shared.
   The plate rides on its own ::before layer, which is what lets the hero
   and jackpot CTAs pulse without the label shivering with them.      */
.btn {
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  padding: .85rem 1.9rem;
  font-size: var(--fs-4);
  line-height: 1.2;
  box-shadow: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { transform: none; }
.btn:active { transform: translateY(var(--btn-active-transform)); }

.btn-primary {
  position: relative;
  z-index: 0;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
  padding: .85rem 1.9rem;
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
  text-shadow: none;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-btn);
  background: var(--grad-mint);
  transition: background var(--dur) var(--ease);
}
.btn-primary:hover { filter: none; background: none; }
.btn-primary:hover::before { background: var(--grad-mint-hover); }
.btn-primary:active { filter: none; background: none; box-shadow: none; }

/* log in, and anything that sits beside a green CTA: the gold rail */
.btn-ghost,
.header-actions .btn-ghost {
  border: 1px solid var(--gold);
  border-image: none;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  text-shadow: none;
  box-shadow: none;
  padding: .85rem 1.9rem;
}
.btn-ghost:hover,
.header-actions .btn-ghost:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
}

.btn-outline,
.show-more-btn {
  border: 1px solid var(--gold);
  border-radius: var(--radius-btn);
  background: none;
  color: var(--gold);
  box-shadow: none;
}
.btn-outline:hover,
.show-more-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

.btn-sm { padding: .5rem 1.1rem; font-size: var(--fs-3); }
.btn-lg { padding: 1rem 2.4rem; font-size: var(--fs-6); }
.btn-primary.btn-sm { padding: .5rem 1.1rem; }
.btn-primary.btn-lg { padding: 1rem 2.4rem; }

/* the two header pills are plain buttons here, not plates */
.header-actions .btn {
  border-width: 1px;
  border-radius: var(--radius-btn);
  padding: .55rem 1.15rem;
  font-size: var(--fs-3);
  letter-spacing: 0;
}
.header-actions .btn-primary { padding: .55rem 1.15rem; }

/* ---- header ----------------------------------------------------------
   The lobby's header furniture is a row of 45px plum discs on
   --navElements #41294a that turn gold on hover. */
.site-header { box-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.nav-toggle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle:hover .nav-toggle-bar { background: var(--gold); }
.nav-toggle::before { right: 9px; bottom: 9px; }
.nav-toggle::after { right: 6px; bottom: 7px; }
.nav-toggle-bar:nth-child(1) { width: 22px; top: 15px; left: 11px; }
.nav-toggle-bar:nth-child(2) { width: 17px; top: 21px; left: 11px; }
.nav-toggle-bar:nth-child(3) { width: 11px; top: 27px; left: 11px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 21px; width: 22px; }

.carousel-arrow {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: none;
}
.carousel-arrow:hover { background: var(--surface-2); color: var(--gold); border: 0; }

/* ---- game tiles ------------------------------------------------------
   The live tile is two stacked blocks, not a framed card: the art with a
   5px top radius, and under it a #452d4f strip carrying the title and,
   in gold, the provider. The carved rail the template drew around it is
   dropped outright. */
.pg-card::after { content: none; }
.pg-card {
  background: none;
  padding: 0;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: visible;
  box-shadow: none;
}
.pg-card:hover { transform: translateY(-3px); box-shadow: none; }
.pg-thumb {
  width: 100%;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
}
.pg-info {
  width: 100%;
  min-height: 68px;
  justify-content: center;
  gap: .15rem;
  padding: .75rem .6rem;
  background: var(--surface);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
}
.pg-title { font-size: var(--fs-4); font-weight: 600; }
.pg-provider { color: var(--gold); font-size: var(--fs-2); }
/* the tile's own call to action is the green plate, like everything else */
.pg-play {
  background: var(--grad-mint);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: var(--radius-btn);
}

/* badges stack down from the tile's top-right corner */
.pg-badge {
  top: 6px;
  right: 6px;
  left: auto;
  transform: none;
  border: 0;
  border-radius: var(--radius-btn);
  padding: .18rem .5rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.pg-badge-hot { background: var(--grad-gold); color: var(--on-accent); }
.pg-badge-live { background: rgb(var(--stb-red-500)); color: #fff; }
.pg-badge-new { background: var(--grad-mint); color: var(--on-accent); }

/* ---- labels ----------------------------------------------------------
   Bizzo does not plate its labels: the banner's kicker is gold caps over
   a hairline that fades out at both ends, which is the --mainPageBanner
   pair on the live site. The same treatment names the bonus on a promo
   card, so hero and cards read as one label style. */
.promo-card h3,
.hero .hero-headline .hero-label {
  padding: 0 0 .32em;
  background: none;
  clip-path: none;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  text-shadow: none;
  position: relative;
}
.promo-card h3::after,
.hero .hero-headline .hero-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}
.hero .hero-headline .hero-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  filter: none;
  top: 0;
}
.promo-card h3 {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* the hero figure stays white over the artwork, with a plum drop rather
   than the warm one the old face was drawn for */
.hero .hero-headline,
.hero .hero-headline .hero-subtext,
.hero-lead { color: #fff; text-shadow: 0 2px 12px rgba(36, 17, 44, .7); }
.hero .hero-headline .grad-text,
.cta-band h2 .grad-text {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 14px rgba(36, 17, 44, .75), 0 2px 0 rgba(36, 17, 44, .5);
}
.grad-text { text-shadow: 0 2px 14px rgba(36, 17, 44, .7); }

/* ---- promo cards -----------------------------------------------------
   A plum panel on the card surface with a gold rail when it is the
   featured one, and the kind-of-bonus chip in gold at the top right. */
.promo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.promo-card:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .42); }
.promo-card-featured { border-color: var(--gold); }
.promo-tag {
  border-radius: var(--radius-btn);
  background: var(--grad-gold);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: none;
}
.promo-value { color: var(--gold); }

/* ---- panels, tables, faq --------------------------------------------- */
.pg-card,
.fact-item,
.step-card,
.faq-item,
.win-card,
.wins-panel,
.provider-item,
.limits-table-wrap,
.summary-table-wrap,
.content-screenshot { box-shadow: none; }
.wins-panel,
.faq-item,
.provider-item,
.summary-table-wrap,
.limits-table-wrap,
.intro-note-card,
.content-screenshot {
  border-radius: var(--radius-md);
  box-shadow: none;
}
/* the live site's text pages: gold heads on #24112c, body #ba9cb4 on a
   translucent plum, hairlines in the body colour */
.summary-table thead th,
.limits-table thead th {
  background: rgb(var(--stb-neutral-950));
  color: var(--gold);
}
.summary-table td,
.limits-table td { color: var(--text-faint); }
.summary-table tbody tr,
.limits-table tbody tr { background: rgb(var(--stb-neutral-900) / .6); }
.info-list li::before { background: var(--gold); }
.faq-item summary::after { border-color: var(--gold); }
.nav-icon [fill="currentColor"] { fill: var(--gold); }
.nav-icon [stroke="currentColor"] { stroke: var(--gold); }

/* ---- footer ----------------------------------------------------------
   The live footer separates its menu with 2px gold rules, floats a gold
   hairline over the payment row and sets 18+ as a red disc. */
.site-footer { border-top: 1px solid var(--border-soft); }
.footer-col h3 { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.footer-col ul a { color: var(--text-faint); }
.footer-col ul a:hover { color: var(--gold); }
.age-badge {
  background: rgb(var(--stb-red-500));
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-3);
}
.license-badge { color: var(--text-faint); }
.license-badge svg { color: var(--gold); }
.footer-bottom { position: relative; }
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}

/* ---- the brand mark is a vector now ---------------------------------- */
.brand-logo { height: 48px; width: auto; }
.footer-brand .brand-logo { height: 44px; }
.cta-band-logo { height: 48px; width: auto; }

/* ---- phone ------------------------------------------------------------ */
@media (max-width: 860px) {
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    border-width: 1px;
    padding: .5rem .8rem;
    font-size: var(--fs-3);
  }
  .header-actions .btn-primary { padding: .5rem .8rem; }
  .btn-primary,
  .btn-primary.btn-lg { padding: .85rem 1.8rem; font-size: var(--fs-5); }
  .brand-logo { height: 52px; }
  .hero .hero-headline .hero-label { top: 0; }
}

/* ---- corrections after review against the live lobby ------------------ */

/* the rail labels are gold, upright: the lobby sets no italic anywhere */
.providers-carousel-title {
  font-style: normal;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
}

/* on a promo card the title is the light line and the figure the gold one,
   so the two do not compete. The hairline stays a hero-banner device. */
.promo-card h3 {
  padding: 0;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  font-size: var(--fs-5);
}
.promo-card h3::after { content: none; }
.promo-value {
  color: var(--gold);
  font-weight: 700;
}

/* the welcome package is four tiers, so the row holds four across rather
   than breaking three-and-one */
@media (min-width: 980px) {
  #promotions .promo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* promo cards: the bonus figure wraps to a different depth on each tier, so
   the button is pushed to the floor of the card rather than left to float
   under whatever the copy ended at */
.promo-card {
  display: flex;
  flex-direction: column;
}
.promo-card .btn { margin-top: auto; }
/* the copy that follows the tier grid needs the section's own rhythm back:
   .grid carries no bottom margin of its own */
.promo-grid { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* ======================================================================
   MOBILE BOTTOM NAV
   The phone layout gets the lobby's own tab bar: five targets pinned to
   the floor, with the bonus CTA raised on a green plate in the middle.
   It is CSS only — the four links are anchors into the page and the
   middle one is an ordinary CTA button, so it picks up the same
   /api/cta/go wiring as every other button on the page.
   ====================================================================== */

.bottom-nav { display: none; }

@media (max-width: 860px) {
  /* the bar is fixed, so the document needs a floor of its own or the
     footer's last line sits under it */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* above the header (100) so the slide-in menu panel, which lives
       inside it, cannot cover the bar */
    z-index: 150;
    height: 60px;
    padding: 0 .35rem env(safe-area-inset-bottom);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .35);
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 0 .1rem;
    color: var(--text-faint);
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    transition: color var(--dur) var(--ease);
  }
  .bottom-nav-item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-item .nav-icon { width: 25px; height: 25px; }
  /* the header glyphs are pinned to gold; down here they have to follow
     the item's own state instead */
  .bottom-nav .nav-icon [fill="currentColor"] { fill: currentColor; }
  .bottom-nav .nav-icon [stroke="currentColor"] { stroke: currentColor; }
  .bottom-nav-item:hover,
  .bottom-nav-item:active { color: var(--gold); }

  /* the middle target is the page's call to action, so it takes the same
     green plate every other CTA does and breathes the way the hero one
     does */
  .bottom-nav-play { color: var(--gold); }
  .bottom-nav-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -17px;
    border-radius: var(--radius-md);
    background: var(--grad-mint);
    color: var(--on-accent);
    border: 2px solid var(--surface-2);
    animation: bottom-nav-play-pulse 2s ease-in-out infinite;
  }
  .bottom-nav-plate .nav-icon { width: 24px; height: 24px; }
  .bottom-nav-play:hover .bottom-nav-plate,
  .bottom-nav-play:active .bottom-nav-plate { animation-play-state: paused; }

  @keyframes bottom-nav-play-pulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(130, 255, 120, 0));
    }
    50% {
      transform: scale(1.07);
      filter: drop-shadow(0 0 10px rgba(130, 255, 120, .55));
    }
  }

  /* the slide-in menu runs to the floor, so its last link would otherwise
     end up behind the bar */
  .main-nav { padding-bottom: calc(60px + 2rem + env(safe-area-inset-bottom)); }
}

/* ---- phone game tiles: the title rides on the artwork ----------------
   On the rail there is no room for a caption block under each tile, so
   the info strip comes off the flow and sits on the picture instead,
   over a scrim that keeps it readable on a light slot. The provider line
   is dropped at this size — the title is what the thumb is missing.
   The cards also sat too close together: the gap opens up and the inner
   padding the rail still carried is taken off, so the artwork reaches
   the tile's own edge the way it does on desktop.                     */
@media (max-width: 860px) {
  .pg-grid {
    gap: .85rem;
    padding: 1rem .1rem .5rem;
  }
  /* .pg-grid .pg-card outranks the plain .pg-card above, so the reset has
     to be restated at the same weight */
  .pg-grid .pg-card {
    flex: 0 0 142px;
    padding: 0;
    gap: 0;
  }
  .pg-thumb {
    width: 100%;
    border-radius: var(--radius-md);
  }
  .pg-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    min-height: 0;
    gap: 0;
    padding: 1.75rem .45rem .5rem;
    background: linear-gradient(
      to top,
      rgb(var(--stb-neutral-950) / .94) 30%,
      rgb(var(--stb-neutral-950) / .7) 60%,
      rgb(var(--stb-neutral-950) / 0)
    );
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    /* the whole tile is one button, so the caption must not eat the tap */
    pointer-events: none;
  }
  .pg-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-2);
    line-height: 1.25;
    color: var(--text);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
  }
  .pg-provider { display: none; }
}

/* the jackpot plaque's button was sized for the old plate artwork, whose
   label sat high in a tall well. The flat Bizzo button centres its own
   label, so the asymmetric block padding comes off and the whole thing
   steps down to sit inside the plaque rather than spanning it */
@media (max-width: 860px) {
  .jackpot-panel .jackpot-cta {
    padding-inline: 8.5cqw;
    padding-block: .72em;
    font-size: 5cqw;
  }
}

/* a slot's own logo often lands exactly where the caption does, so the
   scrim starts earlier and ends darker than a plain fade would */
@media (max-width: 860px) {
  .pg-info {
    background: linear-gradient(
      to top,
      rgb(var(--stb-neutral-950)) 0%,
      rgb(var(--stb-neutral-950) / .92) 45%,
      rgb(var(--stb-neutral-950) / .6) 75%,
      rgb(var(--stb-neutral-950) / 0) 100%
    );
  }
}

/* ---- the bar arrives on the first scroll ------------------------------
   At the very top of the page the hero CTA is already on screen and the
   bar would only cover artwork, so it waits off the floor and slides up
   once the page starts moving. script.js flips .is-visible with a little
   hysteresis, so a scroll that stalls on the threshold cannot flutter
   the bar. It stays translated rather than display:none, or there would
   be nothing to animate.                                              */
@media (max-width: 860px) {
  .bottom-nav {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform .3s var(--ease),
      opacity .3s var(--ease);
    will-change: transform;
  }
  .bottom-nav.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---- anchor targets clear the sticky header --------------------------
   Only #support carried a scroll offset, so every other menu link parked
   its section's top edge at y=0 — under the header. The phone header is
   the worse case: it is two rows there, because the log-in and register
   pills sit on their own line under the wordmark.

   The offset is not hardcoded: script.js measures the header and writes
   --scroll-offset, so the two rows, one row and any future change to the
   header all land correctly. The value below is the desktop fallback for
   a page where the script has not run yet.                            */
:root { --scroll-offset: 88px; }

#main,
main section[id],
main [id^="despre"],
main [id^="payments"] {
  scroll-margin-top: var(--scroll-offset);
}
/* the one target that already had its own value defers to the measured one */
#support { scroll-margin-top: var(--scroll-offset); }

/* ---- hero: picture at its own size, copy on the centre line -----------
   The desktop banner used to size the artwork by height (auto 118%),
   which upscaled a 920x518 picture past its native resolution and then
   cropped it. It now runs at its natural size, so nothing is resampled
   and nothing is cut.

   With the scaling gone the copy comes off the left edge and onto the
   banner's centre line, the way the phone layout already sets it. The
   left scrim is what used to give the headline its ground, so a centred
   wash is added under the copy to keep it legible where the stage is
   brightest.                                                          */
@media (min-width: 861px) {
  .hero {
    background-size: 100% 100%, 100% 100%, auto;
  }
}

@media (min-width: 641px) {
  /* margin-inline, not margin-left: 0. The old layout pulled the copy off
     the left edge with a negative margin, and zeroing just that side
     killed the `auto` .wrap relies on — the box then kept its 1180px
     width, took all 260px of slack on the right and sat 130px left of
     the viewport's centre. Everything inside it was centred correctly,
     which is why it still looked deliberate. */
  .hero-inner {
    margin-inline: auto;
    text-align: center;
  }
  .hero .hero-headline { margin-inline: auto; }
  .hero .hero-cta { justify-content: center; margin-inline: auto; }
}

/* ---- phone: the kicker reads as a sentence, not a label ---------------
   Caps plus tracking made "Bonus de bun venit" a label; at this size it
   is the first line of the offer, so it loses the caps and takes the
   weight instead. The button also sat too close under the freespins
   line — that line is lifted .6em off its own baseline, and the negative
   margin that closed the gap it leaves behind was tuned for the desktop
   type size, so it over-closed here.                                  */
@media (max-width: 860px) {
  .hero .hero-headline .hero-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
  }
  .hero .hero-cta { margin-top: -1.65rem; }
}

/* ---- hero, sized to the artwork itself -------------------------------
   The banner art is drawn for this layout: 1194x360 with the rhino at
   one end, the wolf at the other and an empty stage between them, which
   is where the bonus block now sits.

   So the banner takes the picture's own height rather than a clamp of
   its own, and the picture is centred at natural size. Nothing is
   resampled and nothing is cropped at or above the artwork's width;
   below it the crop is symmetric, so the empty middle the copy needs
   survives at every width.

   The two side washes melt the picture's left and right edges into the
   page on screens wider than the art, and both run the short ramp now:
   the long one existed to build a ground for left-aligned copy, which
   the artwork supplies by itself.                                     */
@media (min-width: 861px) {
  .hero {
    min-height: 360px;
    background-image:
      linear-gradient(to right, var(--hero-side-soft)),
      linear-gradient(to left, var(--hero-side-soft)),
      url("assets/hero-bg-extended.webp");
    background-size: 100% 100%, 100% 100%, auto;
    background-position: left center, right center, center center;
    background-repeat: no-repeat;
  }
  /* the top and bottom fades were a share of a banner half again as tall;
     at 360px the old pair covered seven tenths of the picture */
  .hero::before { height: 52px; }
  .hero::after { height: 68px; }
}

/* ---- header between the phone layout and a roomy desktop -------------
   The two-row phone header stops at 860px, but the single row does not
   actually fit until about 1150: with five nav items at 1.75rem apart
   and two pills beside them, the pills ran over "Asistență clienți" on
   a 980-1100px laptop. Nothing wraps in that row, so the collision is
   silent — it just overlaps.

   Everything in the row gives a little between those two points rather
   than one thing giving a lot, so the nav keeps its five labels. The
   upper bound is measured, not guessed: at 1151px the full-size row
   still overlapped by 12px, so the tier runs to 1210.                 */
@media (min-width: 861px) and (max-width: 1320px) {
  .header-inner { gap: 1rem; }
  .nav-side { gap: .75rem; }
  .nav-side ul { gap: 1rem; }
  .nav-side ul a { font-size: var(--fs-3); gap: .3rem; }
  .nav-icon { width: 15px; height: 15px; }
  .header-actions { gap: .4rem; }
  .header-actions .btn { padding: .5rem .85rem; font-size: var(--fs-2); }
  .header-actions .btn-primary { padding: .5rem .85rem; }
  .app-dl { width: 36px; height: 36px; }
  .app-dl-icon { width: 12px; height: 12px; }
  .app-dl-mark { font-size: .5rem; }
}

/* Below about 1010px even the tightened row runs out: five labels, a
   wordmark and two pills simply do not fit. The glyphs go rather than a
   nav item, since the labels are what carry the meaning. */
@media (min-width: 861px) and (max-width: 1100px) {
  .header-inner { gap: .75rem; }
  .nav-side { gap: .6rem; }
  .nav-side ul { gap: .6rem; }
  .nav-side ul a { gap: 0; font-size: var(--fs-2); }
  .nav-side ul a .nav-icon { display: none; }
  .header-actions { gap: .3rem; }
  .header-actions .btn { padding: .45rem .65rem; }
  .header-actions .btn-primary { padding: .45rem .65rem; }
  .app-dl { width: 34px; height: 34px; }
  .app-dl-icon { width: 11px; height: 11px; }
  .app-dl-mark { font-size: .47rem; }
  /* 4px of clearance at 861 is not margin enough for a longer label in a
     future translation, so the wordmark gives a little too */
  .brand-logo { height: 40px; }
}

/* ---- phone header pills ----------------------------------------------
   At the top of the page both pills are gold rails, so the header reads
   as one quiet row sitting over the banner artwork — where the hero
   already carries the green call to action a few lines below. The
   register pill lights up green only once the header pins, where it has
   a flat plum band behind it and becomes the page's standing CTA.

   Only colour changes across that line, never a metric: the border keeps
   its 1px and the padding is untouched, so the pill cannot resize on
   scroll the way it used to.                                          */
@media (max-width: 860px) {
  .header-actions .btn-primary {
    border: 1px solid var(--gold);
    color: var(--gold);
    -webkit-text-fill-color: var(--gold);
    /* No transition on this swap, deliberately. -webkit-text-fill-color
       is not an animatable property, so it snapped to the dark label the
       instant the header pinned while the plate and the border were
       still fading in behind it — for a quarter of a second the pill was
       dark text on a dark ground, and scrolling back and forth across
       the threshold made the label look like it was smearing. The state
       now changes in one frame. */
    transition: none;
  }
  .header-actions .btn-primary::before {
    opacity: 0;
    transition: none;
  }
  .site-header.is-stuck .header-actions .btn-primary {
    border-color: transparent;
    color: var(--on-accent);
    -webkit-text-fill-color: var(--on-accent);
  }
  .site-header.is-stuck .header-actions .btn-primary::before { opacity: 1; }
}

/* ---- app download ----------------------------------------------------
   One of the lobby's round header controls: a 45px plum disc that turns
   gold on hover. On the phone it is pulled out of the action row and
   pinned to the right edge, mirroring the menu button on the left so the
   wordmark sits centred between two identical discs. */
.app-dl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--gold);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.app-dl:hover { background: var(--gold); color: var(--on-accent); }
/* a glyph of a phone read as anything but an app, so the control says the
   word instead — "APP" carries in Romanian and needs no legend */
.app-dl-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.app-dl-mark {
  font-family: var(--font-ui);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

@media (max-width: 860px) {
  .app-dl {
    position: absolute;
    top: 12px;
    right: .75rem;
    width: 45px;
    height: 45px;
  }
  .app-dl-icon { width: 16px; height: 16px; }
  .app-dl-mark { font-size: .62rem; }
}

/* ======================================================================
   JACKPOT
   The old block was a phone-only plaque built around one piece of
   artwork, with the figure absolutely positioned into a well drawn in
   the picture. It is now a real section on every breakpoint: a wordmark,
   the combined pool, and the three games carrying it, each with its own
   live figure. The mark is regenerated in the house palette — gold over
   a dark rim, with the logo's stars — so nothing is left of the old
   lobby's plate.

   script.js ticks anything with [data-jackpot], so the pool and the
   three cards all move on their own. Their start values sum to the pool.
   ====================================================================== */

.jp-section { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

.jp-head {
  text-align: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
}
.jp-title { margin: 0; line-height: 0; }
.jp-mark {
  width: min(320px, 70vw);
  height: auto;
  margin-inline: auto;
}
.jp-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  margin-top: .85rem;
}
.jp-total-label {
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.jp-total-amount {
  font-family: var(--font-ui);
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
  text-shadow: 0 2px 16px rgba(253, 205, 10, .28);
  transition: transform .11s var(--ease);
}

/* three across at every width: stacked full-width, each card read as one
   big panel, which is not what a jackpot rail is */
.jp-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.4rem, 1.4vw, 1rem);
}

.jp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jp-card:hover { transform: translateY(-3px); border-color: var(--gold); }

.jp-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.jp-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* the tier chip names which pool the game feeds */
.jp-tier {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: .18rem .55rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.jp-tier-mega { background: var(--grad-gold); }
.jp-tier-major { background: var(--grad-mint); }
.jp-tier-minor { background: rgb(var(--stb-neutral-100)); }

.jp-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
  padding: .85rem .7rem 1rem;
  text-align: center;
}
.jp-card-amount {
  font-family: var(--font-ui);
  font-size: var(--fs-7);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gold);
  transition: transform .11s var(--ease);
}
.jp-card-title {
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.jp-card-provider { font-size: var(--fs-2); color: var(--text-faint); }

/* the ticker flags each figure as it lands; a scale is enough, and it
   must not inherit the old plaque's translate */
.jp-total-amount.is-ticking,
.jp-card-amount.is-ticking { transform: scale(1.025); }

.jp-section .jp-cta { margin-top: clamp(1.4rem, 3vw, 2.1rem); }

/* The register pill's label is dark plum on green once the header pins.
   At 13.6px, 600 weight and Romanian diacritics that combination clots —
   the strokes thicken into each other and the whole pill reads as a dark
   smear. Dropping a weight and opening the tracking a hair separates the
   letters again; the colour stays, since it clears 6.6:1 on the plate. */
@media (max-width: 860px) {
  .header-actions .btn-primary {
    font-weight: 500;
    letter-spacing: .015em;
  }
}

/* ---- jackpot: one panel, three small cards in a row -------------------
   The mark, the pool and the three games are one object, so they sit in
   a single plum panel with a gold rim rather than floating loose on the
   page. The three cards stay in a row at every width — stacked they each
   read as a full panel of their own, which is not what a jackpot rail
   is — so everything inside them is sized against the viewport.       */
.jp-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(1.1rem, 2.6vw, 2rem) clamp(.7rem, 2.2vw, 1.9rem) clamp(1.2rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, rgb(var(--stb-neutral-800)), rgb(var(--stb-neutral-900)) 70%);
  border: 1px solid rgb(var(--stb-gold-300) / .35);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
/* a gold wash behind the wordmark, so the panel lights from its own top */
.jp-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, rgba(253, 205, 10, .13), transparent 70%);
}

.jp-section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.jp-head { margin-bottom: clamp(1rem, 2.4vw, 1.75rem); }

.jp-card-body {
  gap: .05rem;
  padding: clamp(.45rem, 1.4vw, .85rem) clamp(.3rem, 1vw, .7rem) clamp(.55rem, 1.5vw, 1rem);
}
.jp-card-amount { font-size: clamp(.74rem, 2.45vw, 1.35rem); }
.jp-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(.62rem, 1.95vw, .95rem);
}
.jp-card-provider { font-size: clamp(.55rem, 1.55vw, .78rem); }
.jp-tier {
  top: 5px;
  left: 5px;
  padding: .1rem .36rem;
  font-size: clamp(.5rem, 1.5vw, .7rem);
  letter-spacing: .04em;
}
.jp-card-thumb { aspect-ratio: 4 / 3; }

/* On a 1180px panel three cards split to ~370px each, which makes them
   feature tiles rather than a jackpot rail. The row is capped and
   centred so the cards stay small at every width, with the mark and the
   pool above them carrying the panel's width instead. */
.jp-grid {
  max-width: 720px;
  margin-inline: auto;
}

/* ---- jackpot cards: each carries its own call to action ---------------
   The card used to be one big button, so it could not hold another one.
   It is an <article> now and the CTA sits inside it, which is also what
   lets each button breathe on its own: the plate layer runs the hero's
   pulse, staggered across the three so they do not throb in unison.

   The cards also had room to spare under the figure, so the thumb keeps
   its ratio while the body opens up and the amount — the one number
   anybody reads here — takes the space that was going spare.          */
.jp-card { cursor: default; }

.jp-card-body {
  gap: .1rem;
  padding: clamp(.55rem, 1.6vw, .95rem) clamp(.3rem, 1vw, .7rem) clamp(.6rem, 1.6vw, 1rem);
}
.jp-card-amount {
  font-size: clamp(.85rem, 3.05vw, 1.6rem);
  line-height: 1.15;
}
.jp-card-title { font-size: clamp(.64rem, 2.05vw, 1rem); }

.jp-card .jp-card-cta {
  width: 100%;
  margin-top: clamp(.45rem, 1.3vw, .7rem);
  padding: clamp(.36rem, 1.1vw, .55rem) clamp(.35rem, 1.3vw, 1rem);
  font-size: clamp(.64rem, 1.95vw, .9rem);
  font-weight: 600;
  letter-spacing: 0;
}
.jp-card-cta::before { animation: hero-cta-pulse 1.9s ease-in-out infinite; }
.jp-card:nth-child(2) .jp-card-cta::before { animation-delay: .22s; }
.jp-card:nth-child(3) .jp-card-cta::before { animation-delay: .44s; }
.jp-card-cta:hover::before,
.jp-card-cta:active::before { animation-play-state: paused; }

/* "Mega Moolah" is one line and the other two titles are two, so the
   buttons sat at three different heights. The body takes the slack and
   the button is pushed to the floor of the card; the provider line keeps
   a minimum gap above it for the case where the card is already full. */
.jp-card-body { flex: 1 1 auto; }
.jp-card-provider { margin-bottom: clamp(.45rem, 1.3vw, .7rem); }
.jp-card .jp-card-cta { margin-top: auto; }

/* the wordmark PNG carries its own bottom margin, so the pool label only
   needs a hair of space under it */
.jp-total { margin-top: .2rem; }

/* on a roomy header the APP disc sat right against the last nav label;
   only applied where there is width to spare, so the tightened tiers
   below 1150 are untouched */
@media (min-width: 1151px) {
  .app-dl { margin-left: .5rem; }
}

/* Nothing in the header may sit on its own composited layer: the sticky
   band moves on every scroll frame, and a promoted layer is rasterised
   once and then resampled at fractional offsets, which softens the type
   — worst on the green pill, where dark text sits on a light plate. The
   pills keep their press transform; they just no longer ask for a layer
   up front. */
.site-header,
.site-header::before,
.header-actions .btn,
.header-actions .btn::before {
  will-change: auto;
  backdrop-filter: none;
}
.header-actions .btn { transform: none; }
.header-actions .btn:active { transform: translateY(var(--btn-active-transform)); }

/* ---- phone tiles: less crop on the artwork ---------------------------
   The source art is 300x225, so the desktop tile's 4:3 box shows it one
   to one. The phone rail asked for a 3:4 portrait box instead, and
   object-fit: cover made up the difference by scaling the picture up
   until it filled the taller box — about 45% of the width fell off the
   sides and the game's wordmark came out oversized. A square box cuts
   that enlargement roughly in half while keeping the rail's upright
   proportions. */
@media (max-width: 860px) {
  .pg-thumb { aspect-ratio: 1 / 1; }
}


/* ---- phone tiles: taller, caption still on the artwork ---------------
   Back to the overlay: the title sits on the picture over its scrim, and
   the provider stays hidden. The tiles are simply taller than the square
   box they had, which is what puts clearance between the game's own
   wordmark — centred by object-fit: cover — and the band at the foot. */
@media (max-width: 860px) {
  .pg-grid .pg-card { flex: 0 0 152px; }
  .pg-thumb {
    aspect-ratio: 7 / 8;
    border-radius: var(--radius-md);
  }
  .pg-card { padding-bottom: 0; background: none; }
  .pg-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    justify-content: flex-end;
    padding: 1.75rem .45rem .5rem;
    background: linear-gradient(
      to top,
      rgb(var(--stb-neutral-950)) 0%,
      rgb(var(--stb-neutral-950) / .92) 45%,
      rgb(var(--stb-neutral-950) / .6) 75%,
      rgb(var(--stb-neutral-950) / 0) 100%
    );
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .pg-title { text-shadow: 0 1px 4px rgba(0, 0, 0, .85); }
}

/* ---- phone rhythm ----------------------------------------------------
   The section padding was a clamp whose floor (3.5rem) is what the phone
   always lands on, so every section was separated by 112px of nothing —
   on a 390px screen that is most of a scroll. The whole vertical rhythm
   steps down here: section padding, the gap under a section head, and
   the space between body paragraphs, which carried desktop-sized leading
   between them too. */
@media (max-width: 860px) {
  .section { padding-block: clamp(1.5rem, 4.5vw, 2.4rem); }
  .section-head { margin-bottom: clamp(.9rem, 3vw, 1.4rem); }
  .overview-lead { margin-bottom: clamp(.85rem, 2.6vw, 1.25rem); }
  .info-block { margin-top: clamp(1.1rem, 3.5vw, 1.75rem); }
  .info-block > p { margin-bottom: .85rem; }
  .intro-note { padding-top: clamp(.75rem, 2.5vw, 1.25rem); }
  .promo-subhead { margin: clamp(1.4rem, 4vw, 2rem) 0 .7rem; }
  .content-screenshot { margin-block: clamp(1rem, 3vw, 1.5rem); }
  .updated-section { padding-block: clamp(1rem, 3vw, 1.5rem); }
}