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

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

  /* ---- Casinia's own ramp ----------------------------------------------
     Neutral is the lobby's pine scale, struck off its #031a16 canvas: the
     dark half is the --stb-green-* family, the light half the --stb-gray-*
     one, which is the same hue bleached rather than a true grey. Every
     step below is a value the lobby itself ships, so the two sites tint
     identically. Gold is the single accent; the lobby has no second hue. */
  --stb-neutral-950: 3 26 22;      /* green-1000 — the canvas            */
  --stb-neutral-900: 0 33 27;      /* green-900  — cards                 */
  --stb-neutral-850: 0 41 33;      /* green-800                          */
  --stb-neutral-800: 0 51 42;      /* green-700  — raised surfaces       */
  --stb-neutral-750: 22 49 42;     /* green-600  — the hairline border   */
  --stb-neutral-700: 0 61 49;      /* green-750                          */
  --stb-neutral-600: 0 73 59;      /* green-500  — borders               */
  --stb-neutral-550: 35 72 64;     /* the lighter stop of gradient-green-400 */
  --stb-neutral-500: 51 71 66;     /* the category-card rail             */
  --stb-neutral-400: 91 105 101;   /* gray-900 — the lobby's body colour */
  --stb-neutral-300: 121 143 137;  /* gray-600 — fine print, 5.2:1 on bg */
  --stb-neutral-200: 155 176 171;  /* gray-500 — secondary copy          */
  --stb-neutral-150: 209 224 220;  /* gray-400                           */
  --stb-neutral-100: 233 242 240;  /* gray-300                           */
  --stb-neutral-50: 239 249 247;   /* gray-200 — primary copy            */
  --stb-white: 255 247 227;        /* white-900 — the lobby's warm white */
  --stb-black: 0 0 0;

  /* gold read off the lobby's --stb-gradient-gold and its gold token:
     cream highlight, the #e5a749 brand gold, down to a burnt core */
  --stb-gold-100: 255 225 117;     /* #ffe175 — the gradient's highlight */
  --stb-gold-200: 241 211 99;      /* #f1d363                            */
  --stb-gold-300: 229 167 73;      /* #e5a749 — --stb-gold, the accent   */
  --stb-gold-500: 173 126 55;      /* bronth-800 — the button rails      */
  --stb-gold-600: 142 80 11;       /* #8e500b — the gradient's foot      */
  --stb-gold-700: 77 33 0;         /* red-700 — the shadow under gold    */

  /* "brand" is the lobby's lime-to-teal win ramp: it marks wins and the
     live jackpot, and nothing else */
  --stb-brand-500: 146 234 59;     /* green-300 — #92ea3b                */
  --stb-brand-600: 98 191 67;      /* #62bf43                            */
  --stb-brand-700: 17 166 141;     /* #11a68d                            */
  --stb-brand-200: 178 240 120;
  --stb-brand-150: 209 246 170;

  /* the lobby paints its accent links in gold too, so "blue" is gold */
  --stb-blue-500: 229 167 73;
  --stb-blue-600: 200 143 58;
  --stb-blue-700: 160 112 40;

  --stb-red-500: 255 53 26;        /* red-1000                           */
  --stb-green-500: 0 161 118;      /* --stb-green                        */

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

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

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

  /* the lobby's own --stb-gradient-gold, stop for stop */
  --grad-gold: linear-gradient(360deg, #8e500b 0%, #ffe175 71.35%, #f1d363 100%);
  /* and its win ramp, --stb-gradient-green-300 */
  --grad-mint: linear-gradient(270deg, #93eb3b .01%, #62bf43 20.67%, #11a68d 100%);
  /* --stb-gradient-green-400, the lobby's quiet panel fill */
  --grad-teal: linear-gradient(251.88deg, #234840 0%, #17332d 101.58%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(0, 161, 118, .07);
  --glow-b: rgba(229, 167, 73, .06);
  /* the header keeps the lobby's #002b23 band above the canvas */
  --header-bg: linear-gradient(180deg, rgb(0 43 35) 0%, rgb(0 38 31) 55%, rgb(0 33 27) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-850));
  --band-bg: linear-gradient(to bottom, rgba(0, 33, 27, .75), rgba(0, 33, 27, .5) 60%, rgba(0, 33, 27, .75));
  --scrim-top: linear-gradient(to bottom, rgba(3, 26, 22, .7), transparent);
  --overlay: rgb(3 26 22 / .94);

  --win: rgb(var(--stb-brand-500));
  --win-glow: rgba(146, 234, 59, .4);
  --tint-accent: rgba(229, 167, 73, .12);
  --accent-glow: rgba(229, 167, 73, .3);
  --cta-glow: rgba(0, 161, 118, .26);
  --subtle-fill: rgba(239, 249, 247, .04);
  --subtle-fill-2: rgba(239, 249, 247, .08);
  /* the marks are black-on-transparent, so they are flattened to white
     rather than greyed the way they were against a light lobby */
  --provider-filter: brightness(0) invert(1);
  --provider-blend: normal;

  /* ---- radii: the lobby is cut square. Its one rounded thing is the game
     thumbnail, at --stb-thumbnail-border-radius: 4px, and that is the
     whole budget — the plates and panels keep their corners.           */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-btn: 0px;
  --radius-pill: 9999px;
  --radius-thumb: 4px;

  /* ---- type -------------------------------------------------------------
     The lobby runs two faces: Beaufortforlol for every title and button
     label, Apercu for everything else. Both are licensed, so the nearest
     free cuts stand in — Cinzel for the flared display caps, Inter for
     the grotesque. The roles, cases and tracking are the lobby's own:
     titles and labels are uppercase, labels at .04em.                   */
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 600;
  --display-track: .02em;
  --display-case: uppercase;
  --btn-weight: 700;
  --btn-track: .04em;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the plates carry their own moulding, so there is no hard step to sink
     onto — the press is a short dip instead */
  --btn-shadow-height: 0px;
  --btn-active-transform: 1px;
  --btn-label: rgb(var(--stb-white));
  /* the lobby's nav runs on Apercu, not the display face */
  --nav-weight: 600;
  --nav-track: .04em;
  --nav-case: uppercase;
  --hero-stroke: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.wins-section {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  background: var(--band-bg);
  box-shadow: inset 0 12px 24px -12px rgba(0, 0, 0, .5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-2);
  letter-spacing: var(--nav-track);
  text-transform: var(--nav-case);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-side ul a:hover { color: var(--text); }

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

.main-nav {
  display: none;
}

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

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

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

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

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

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

.nav-actions {
  display: none;
}

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cta-band-logo {
  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 h1 { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-cta { justify-content: center; margin-inline: auto; max-width: none; }
}

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

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

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

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

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

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

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

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

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

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

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

/* ---- buttons: the lobby's cast plates --------------------------------
   Casinia does not draw its buttons in CSS. Each one is a three-part
   plate — a moulded left cap, a stretched middle, a moulded right cap —
   laid on as three background layers, which is why the gold corner
   brackets hold their shape at every label length while only the well
   between them stretches.

   The middle is listed first, so it paints *over* the caps, and it is
   laid out to tuck exactly --cap-tuck under each one: far enough that no
   seam shows, not so far that it covers the bracket the cap is there to
   draw. Two numbers run it, and only --cap changes between size steps,
   because the brackets are drawn to scale with the plate's height.

   The artwork is 74px tall at 1x, so every step below downsamples it;
   the @2x files come along for the ride through image-set.            */
.btn {
  --cap: 19px;
  --cap-tuck: 2px;
  --plate-stroke: rgb(0 0 0 / .3);

  min-height: 42px;
  /* the label clears both brackets, and rides 3px high: the plate's
     bottom rail is drawn deeper than its top one, so centring on the box
     leaves the type looking low in the well */
  padding: 0 calc(var(--cap) + .6rem) 3px;
  border: 0;
  border-radius: var(--radius-btn);
  line-height: 1.2;
  letter-spacing: var(--btn-track);
  /* the plate itself is a layer of its own; see the note below */
  position: relative;
  background: none;
  box-shadow: none;
  /* the lobby's own 1px letter-stroke, which is what separates the label
     from the lit middle of the well — not the fill colour */
  text-shadow:
    -.5px -.5px 0 var(--plate-stroke),
    .5px -.5px 0 var(--plate-stroke),
    -.5px .5px 0 var(--plate-stroke),
    .5px .5px 0 var(--plate-stroke),
    0 2px 2px var(--plate-stroke);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: none; filter: brightness(1.08); }
.btn:active { filter: brightness(.95); transform: translateY(var(--btn-active-transform)); }

/* ---- the plate layer -------------------------------------------------
   The plate rides behind the label rather than on the button itself.
   That is what lets a CTA breathe without the type breathing with it: a
   scale on the button resamples the glyphs every frame and the label
   visibly shivers, where scaling this leaves the text on the pixel grid.
   Both pulse animations drive this layer for exactly that reason. */
.btn-primary::before,
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: calc(var(--cap) - var(--cap-tuck)) center, left center, right 0 center;
  background-size:
    calc(100% - (var(--cap) - var(--cap-tuck)) * 2) 100%,
    var(--cap) 100%,
    var(--cap) 100%;
}

/* the green plate: every call to action — register, claim, play */
.btn-primary { color: rgb(var(--stb-white)); }
.btn-primary::before {
  background-image:
    image-set(url("/assets/primary-center.325cf6deb31cc916.png") 1x, url("/assets/primary-center@2x.a660d8e943f6aeb3.png") 2x),
    image-set(url("/assets/primary-left.cb14a0528dcb5c83.png") 1x, url("/assets/primary-left@2x.47546361ff99a73a.png") 2x),
    image-set(url("/assets/primary-right.c83dfc5586fc8a42.png") 1x, url("/assets/primary-right@2x.b092bb023fe7cf84.png") 2x);
}

/* the bronze plate: log in, and anything that sits beside a green CTA */
.btn-ghost { color: rgb(var(--stb-white)); }
.btn-ghost::before {
  background-image:
    image-set(url("/assets/secondary-center.68505bb4387ae3ac.png") 1x, url("/assets/secondary-center@2x.d64c002f425d70b1.png") 2x),
    image-set(url("/assets/secondary-left.b78af9a9ef20698c.png") 1x, url("/assets/secondary-left@2x.b943779077b81ff9.png") 2x),
    image-set(url("/assets/secondary-right.e9cc2ed76db88e6e.png") 1x, url("/assets/secondary-right@2x.15f4d5221dbf4dde.png") 2x);
}
.btn-ghost:hover { color: rgb(var(--stb-white)); }

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

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

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

/* ---- the three size steps the lobby ships ----------------------------
   The bracket is drawn to the plate's height, so each step moves --cap
   and the height together and the tuck takes care of itself. */
.btn-sm {
  --cap: 17px;
  min-height: 38px;
  font-size: var(--fs-3);
}
.btn-lg {
  --cap: 25px;
  min-height: 54px;
  font-size: var(--fs-6);
  --btn-active-transform: 2px;
}
.btn-outline.btn-sm, .btn-outline.btn-lg,
.btn-mint.btn-sm, .btn-mint.btn-lg { --cap: 0px; }

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

/* ---- the header's register button ------------------------------------
   The lobby keeps this one on the bronze plate for as long as the
   banner's own call to action is still on screen, and swaps it to green
   the moment that scrolls away — so only ever one green button is in
   view at a time. Log in keeps the bronze plate throughout. The class is
   set from the CTA's visibility in script.js, not from scroll depth. */
.header-actions .btn-primary::before {
  background-image:
    image-set(url("/assets/secondary-center.68505bb4387ae3ac.png") 1x, url("/assets/secondary-center@2x.d64c002f425d70b1.png") 2x),
    image-set(url("/assets/secondary-left.b78af9a9ef20698c.png") 1x, url("/assets/secondary-left@2x.b943779077b81ff9.png") 2x),
    image-set(url("/assets/secondary-right.e9cc2ed76db88e6e.png") 1x, url("/assets/secondary-right@2x.15f4d5221dbf4dde.png") 2x);
}
.site-header.is-cta-passed .header-actions .btn-primary::before {
  background-image:
    image-set(url("/assets/primary-center.325cf6deb31cc916.png") 1x, url("/assets/primary-center@2x.a660d8e943f6aeb3.png") 2x),
    image-set(url("/assets/primary-left.cb14a0528dcb5c83.png") 1x, url("/assets/primary-left@2x.47546361ff99a73a.png") 2x),
    image-set(url("/assets/primary-right.c83dfc5586fc8a42.png") 1x, url("/assets/primary-right@2x.b092bb023fe7cf84.png") 2x);
}



/* ---- 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 lobby's own .border-vector: a 100x100 SVG whose corners are cut
   back in a concave arc, laid on as a border-image so one file closes
   the frame at any tile size. Slice and border-width are the lobby's —
   20 / 17px on desktop, 13 / 13px on the phone, where the arc is drawn
   shallower so it still reads at thumbnail size.

   It sits quiet until the tile is hovered: the rail is gray-900 at rest
   and the bronze only comes up under the pointer, which is how the
   lobby keeps a wall of tiles from turning into a wall of gold. No
   `fill` on the slice, so the middle stays out and the artwork shows. */
.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: 13px solid transparent;
  border-image: url("/assets/border-vector-new-mobile.8039bf61a32598fd.svg") 13 stretch;
  transition: border-image-source var(--dur) var(--ease);
}
.pg-card:hover::after {
  border-image-source: url("/assets/border-vector-new-mobile-hover.f4387a4e42327e30.svg");
}
@media (min-width: 780px) {
  .pg-card::after {
    border-width: 17px;
    border-image: url("/assets/border-vector-new.de2bd93de641b2de.svg") 20 stretch;
  }
  .pg-card:hover::after {
    border-image-source: url("/assets/border-vector-new-hover.223c06c475e092b4.svg");
  }
}
.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(229, 167, 73, .45);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(229, 167, 73, .16), 0 6px 18px rgba(0, 0, 0, .45);
  container-type: inline-size;
}

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

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

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

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

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

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

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

  /* recent wins: one continuous strip, entries split by hairlines */
  .wins-section {
    padding: 0;
    background: var(--surface);
    border-block: 1px solid var(--border-soft);
    box-shadow: none;
  }
  .wins-wrap { width: 100%; }
  .wins-panel {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* keep the label, drop the arrows — the strip advances on its own */
  .wins-panel-head {
    margin-bottom: .5rem;
    padding: .9rem 1rem 0;
  }
  .wins-panel-title { font-size: var(--fs-5); }
  .wins-live { font-size: var(--fs-3); }
  .wins-nav { display: none; }
  .wins-carousel-wrap { gap: 0; overflow: hidden; }
  .wins-track { gap: 0; scroll-snap-type: x mandatory; }
  .win-card { scroll-snap-align: start; }
  .win-card {
    position: relative;
    width: auto;
    gap: .7rem;
    padding: .8rem 1rem;
    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: 60px; border-radius: var(--radius-sm); }
  .win-card-info { gap: 2px; }
  .win-card-player { font-size: var(--fs-2); line-height: 1.25; }
  .win-card-game { font-size: var(--fs-3); line-height: 1.25; max-width: 158px; }
  .win-card-amount { font-size: var(--fs-5); line-height: 1.25; }

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

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

/* ---- phone header: lens left, mark centred, both pills on their own row */
@media (max-width: 860px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    gap: .75rem;
    row-gap: .65rem;
    padding-block: .6rem;
  }
  .nav-side-left { display: none; }
  .brand { margin-inline: auto; }
  .nav-toggle { position: absolute; top: 12px; left: .75rem; }
  /* same inner padding as a lobby card */
  .intro-note-card { padding: .55rem; }
  .nav-side-right { width: 100%; margin-left: 0; }
  .header-actions { width: 100%; gap: .5rem; }
  /* The pills share the row, so they sit shorter and on the smallest cap
     the plate still models. They also drop a type step: the display face
     sets wide, and at fs-3 the two labels together no longer fit a phone
     row — "Registrácia" alone would push past the right edge. */
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    --cap: 14px;
    min-height: 34px;
    padding: 0 calc(var(--cap) + .2rem) 2px;
    font-size: var(--fs-2);
  }
  /* 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: 40px; width: auto; }
.footer-brand .brand-logo { height: 34px; }
.cta-band-logo { height: 40px; 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 — uppercase, bold, on the lobby's own .04em.        */
.btn {
  font-family: var(--font-display);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-track);
}

/* the nav does not: the lobby sets it in the UI face, which is the one
   that still holds its counters at 13px */
.nav-side ul a,
.main-nav ul a,
.nav-actions a {
  font-family: var(--font-ui);
  font-weight: var(--nav-weight);
}

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

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

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

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

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

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

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

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

  /* the green plate is the phone banner's one call to action, so it goes
     up to the large step: --cap and the height move together and the
     cap-based padding re-clears the brackets on its own */
  .btn-primary,
  .btn-primary.btn-lg { --cap: 25px; min-height: 54px; font-size: var(--fs-6); }

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

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