/* Malina Casino — theme for the monobrand template (pl-PL)
   Palette, type and component recipes read off the live Malina lobby:
   body #200922, header #2d0d30, panel #361039, card #3f1b44,
   the call to action a flat green plate #55b400 with a white label,
   the jackpot label a #fcf315 -> #fb9c0c yellow, the decor a berry
   magenta #770051 / #4d0035, everything set in Open Sans. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/open-sans-var-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: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/open-sans-var-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;

  /* ---- Malina's own ramp ------------------------------------------------
     The neutral is the lobby's plum scale, lifted straight off its design
     tokens. The darkest steps are surfaces the live site actually ships —
     body #200922 (bg-primary), header #2d0d30, panel #361039 (bg-secondary,
     and the browser theme colour), card #3f1b44 (bg-tertiary) — so a
     component that asks for "surface" lands on a real Malina colour rather
     than an interpolated one. Above that the steps climb through the
     lobby's muted mauves to its two copy tones, #a392ac and #efefef.    */
  --stb-neutral-950: 25 3 27;     /* #19031b  deepest: table heads, plates */
  --stb-neutral-900: 32 9 34;     /* #200922  body        (bg-primary)     */
  --stb-neutral-850: 45 13 48;    /* #2d0d30  header band                  */
  --stb-neutral-800: 54 16 57;    /* #361039  panels, inputs (bg-secondary)*/
  --stb-neutral-750: 63 27 68;    /* #3f1b44  nav elements  (bg-tertiary)  */
  --stb-neutral-700: 69 40 74;    /* #45284a  game-card info strip         */
  --stb-neutral-600: 83 46 88;    /* #532e58  borders                      */
  --stb-neutral-550: 100 52 106;  /* #64346a  secondary stroke             */
  --stb-neutral-500: 110 67 124;  /* #6e437c                               */
  --stb-neutral-400: 136 123 143; /* #887b8f  secondary copy               */
  --stb-neutral-350: 155 136 166; /* #9b88a6                               */
  --stb-neutral-300: 163 146 172; /* #a392ac  fine print  (6.4:1 on body)  */
  --stb-neutral-200: 193 180 201; /* #c1b4c9  body copy                    */
  --stb-neutral-150: 203 188 213; /* #cbbcd5                               */
  --stb-neutral-100: 239 239 239; /* #efefef  bright copy  (text-primary)  */
  --stb-neutral-50: 255 255 255;  /* #ffffff                               */
  --stb-white: 255 255 255;
  --stb-black: 25 3 27;

  /* the lobby's yellow: #ffee5a is the jackpot label and the colour that
     marks every heading accent, amount and link; #fcf315 -> #fb9c0c is its
     own gradient-yellow; text on yellow is the panel plum #361039. */
  --stb-gold-100: 244 230 181;    /* #f4e6b5 */
  --stb-gold-200: 252 243 21;     /* #fcf315  gradient head */
  --stb-gold-300: 255 238 90;     /* #ffee5a  label-jackpot / active */
  --stb-gold-500: 255 184 0;      /* #ffb800  warning accent */
  --stb-gold-600: 251 156 12;     /* #fb9c0c  gradient foot  */
  --stb-gold-700: 54 16 57;       /* #361039  label on yellow */

  /* "brand" is the green plate every Malina call to action is painted on.
     It sits flat — #55b400 at rest, #62d000 on hover, #428d00 pressed —
     and always carries a white label, never a dark one. */
  --stb-brand-500: 98 208 0;      /* #62d000  hover   */
  --stb-brand-600: 85 180 0;      /* #55b400  at rest */
  --stb-brand-700: 66 141 0;      /* #428d00  pressed */
  --stb-brand-200: 168 230 110;
  --stb-brand-150: 205 243 175;

  /* the berry magenta the lobby paints its promo covers, sidebar tiles and
     label underlays with — the raspberry out of the wordmark itself */
  --stb-berry-900: 52 0 36;       /* #340024 */
  --stb-berry-800: 67 0 46;       /* #43002e */
  --stb-berry-700: 77 0 53;       /* #4d0035 */
  --stb-berry-600: 97 0 67;       /* #610043 */
  --stb-berry-500: 119 0 81;      /* #770051 */
  --stb-berry-400: 142 46 111;    /* #8e2e6f  label-exclusive */
  --stb-berry-300: 235 107 151;   /* #eb6b97 */

  /* the nav glyphs take the active yellow, the way the lobby filters its
     own menu icons to it */
  --stb-blue-500: 255 238 90;
  --stb-blue-600: 255 184 0;
  --stb-blue-700: 251 156 12;

  --stb-red-500: 251 80 79;       /* #fb504f  live / 18+ */
  --stb-green-500: 11 174 86;     /* #0bae56  success / "nowe" */

  /* ---- 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: #200922;
  /* 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-800));
  --surface-2: rgb(var(--stb-neutral-750));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-750));

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

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

  /* Malina's own gradient-yellow, verbatim */
  --grad-gold: linear-gradient(180deg, rgb(var(--stb-gold-200)) 0%, rgb(var(--stb-gold-600)) 100%);
  /* the lobby's call to action: a flat green plate, lighter on hover */
  --grad-mint: rgb(var(--stb-brand-600));
  --grad-mint-hover: rgb(var(--stb-brand-500));
  --grad-teal: linear-gradient(180deg, rgb(var(--stb-neutral-750)) 0%, rgb(var(--stb-neutral-800)) 100%);
  /* the berry plate the lobby lays under its promo covers and labels */
  --grad-berry: linear-gradient(180deg, rgb(var(--stb-berry-700)) 0%, rgb(var(--stb-berry-900)) 100%);
  --berry: rgb(var(--stb-berry-500));
  --berry-deep: rgb(var(--stb-berry-700));
  --on-accent: rgb(var(--stb-gold-700));
  --on-cta: rgb(var(--stb-white));

  --glow-a: rgba(119, 0, 81, .2);
  --glow-b: rgba(142, 46, 111, .14);
  /* 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(32 9 34 / .96);

  --win: rgb(var(--stb-gold-300));
  --win-glow: rgba(255, 238, 90, .4);
  --tint-accent: rgba(255, 238, 90, .12);
  --accent-glow: rgba(255, 238, 90, .32);
  --cta-glow: rgba(85, 180, 0, .3);
  --subtle-fill: rgba(255, 255, 255, .05);
  --subtle-fill-2: rgba(255, 255, 255, .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: Malina barely rounds at all. Its thumbnails and shop cards
     are 2px, its cookie actions 4px, its tournament cards square. Keeping
     those numbers is most of what makes the lobby read as Malina rather
     than as a generic dark casino skin.                                */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-btn: 2px;
  --radius-pill: 9999px;
  --radius-thumb: 2px;

  /* ---- type: Open Sans throughout, the way the lobby sets it -----------
     Malina runs one variable family, 400-800. 800 and 700 carry the
     display lines, 700 the buttons — which are set in caps, the lobby's
     one piece of shouting — 600 the nav, 400 the body.                 */
  --font-display: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 800;
  --display-track: -.005em;
  --display-case: none;
  --btn-weight: 700;
  --btn-track: .02em;
  --btn-case: uppercase;
  --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-white));
  --nav-weight: 600;
  --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 24px 0 rgba(25, 3, 27, .9);
}

*, *::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;
  /* the scrim that fades the artwork into the page under the header.
     Cut by a third, so more of the picture's top survives. */
  height: clamp(48px, 5.3vw, 77px);
  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; }
  /* the old banner put its subject on the right and pulled the copy off
     centre to clear it; the Malina artwork stands the offer on a podium
     in the middle, so the shift is gone */
}

.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 Malina 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: a label
   with a ghost of itself 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: 28px;
    --hero-skirt: 18px;
    /* 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: -20vw;
    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(75px, 8.7vw, 120px); }
  /* 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. Malina sets a white label 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(73px, 20vw, 113px); }

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


/* ======================================================================
   MALINA BRAND OVERLAY
   Everything below restates, in Malina'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);
  /* was a hardcoded 600, which quietly outranked --btn-weight and made
     the token dead. The weight belongs to the token so one line moves
     every button face at once. */
  font-weight: var(--btn-weight);
  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 ----------------------------------------------------------
   Malina 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 Malina 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-left: 0` here was meant to undo the negative shift the old
     artwork needed, but .hero-inner IS the .wrap, and .wrap centres
     itself with `margin-inline: auto`. Setting only the left margin left
     `margin-right: auto` standing, so the 1180px block stopped being
     centred and sat flush against the viewport's left edge — the copy
     landed 50px left of the podium it is supposed to stand on. The
     centring has to be restored on both sides, not cancelled on one. */
  .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: 35px; }
  .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 Polish 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 white on green once the header pins.
   At 13.6px, 600 weight and Polish 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); }
}

/* ======================================================================
   MALINA — the lobby's own furniture
   The ramp above already carries Malina's surfaces, its yellow and its
   2px radii everywhere the template asks for a token. What is left are
   the places the old skin made a structural choice that Malina does not
   share: a gold call to action where Malina paints a flat green one, a
   gold rail on the secondary where Malina sinks a plum well, and the
   berry magenta the lobby lays under its promo covers and labels.
   ====================================================================== */

/* ---- the call to action ----------------------------------------------
   Malina's `.button--primary` is a flat #55b400 plate with a 1px stroke
   of its own colour, a WHITE label in caps, and 2px corners. It lightens
   to #62d000 on hover and sinks to #428d00 when pressed — no gradient,
   no bevel, no drop step. */
.btn-primary,
.btn-primary:hover,
.btn-primary:active {
  color: var(--on-cta);
  -webkit-text-fill-color: var(--on-cta);
  text-shadow: none;
  border: 0;
  box-shadow: none;
}
.btn-primary::before { background: rgb(var(--stb-brand-600)); }
.btn-primary:hover::before { background: rgb(var(--stb-brand-500)); }
.btn-primary:active::before { background: rgb(var(--stb-brand-700)); }

/* ---- the secondary ----------------------------------------------------
   `.button--secondary`: a plum well #502c56 inside a 1px #64346a stroke,
   label in the lobby's bright neutral. It lifts a step on hover rather
   than flipping to a fill. */
.btn-ghost,
.header-actions .btn-ghost {
  border: 1px solid rgb(var(--stb-neutral-550));
  background: rgb(80 44 86);
  color: rgb(var(--stb-neutral-100));
  -webkit-text-fill-color: rgb(var(--stb-neutral-100));
  text-shadow: none;
  box-shadow: none;
}
.btn-ghost:hover,
.header-actions .btn-ghost:hover {
  background: rgb(86 35 92);
  border-color: rgb(var(--stb-neutral-500));
  color: var(--on-cta);
  -webkit-text-fill-color: var(--on-cta);
}
.btn-ghost:active,
.header-actions .btn-ghost:active {
  background: rgb(62 19 67);
  border-color: rgb(83 46 88);
  color: var(--on-cta);
  -webkit-text-fill-color: var(--on-cta);
}

/* the outline face and "pokaż więcej" take the same well, so the lobby
   never shows two different secondary shapes on one screen */
.btn-outline,
.show-more-btn {
  border: 1px solid rgb(var(--stb-neutral-550));
  background: rgb(80 44 86);
  color: rgb(var(--stb-neutral-100));
}
.btn-outline:hover,
.show-more-btn:hover {
  background: rgb(86 35 92);
  border-color: rgb(var(--stb-neutral-500));
  color: var(--on-cta);
}

/* ---- display type -----------------------------------------------------
   The old face carried a warm brown bevel under the hero figure, drawn
   for a gold wordmark. Malina's drop is its own near-black plum. */
.grad-text { text-shadow: 0 2px 14px rgba(25, 3, 27, .7); }
.hero .hero-headline,
.hero .hero-headline .hero-subtext,
.hero-lead { text-shadow: 0 2px 12px rgba(25, 3, 27, .72); }
.hero .hero-headline .grad-text,
.cta-band h2 .grad-text {
  text-shadow: 0 2px 14px rgba(25, 3, 27, .78), 0 2px 0 rgba(25, 3, 27, .55);
}

/* ---- labels on tiles --------------------------------------------------
   Malina plates its thumbnail labels, square, 2px: the jackpot label is
   #ffee5a with the panel plum on it, "nowe" is #0bae56 with white, and
   the exclusive label is the berry #8e2e6f with white. */
.pg-badge,
.jp-tier {
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .03em;
}
.pg-badge-hot { background: rgb(var(--stb-gold-300)); color: var(--on-accent); }
.pg-badge-new { background: rgb(var(--stb-green-500)); color: var(--on-cta); }
.pg-badge-excl { background: rgb(var(--stb-berry-400)); color: var(--on-cta); }
.jp-tier-mega { background: rgb(var(--stb-gold-300)); color: var(--on-accent); }
.jp-tier-major { background: rgb(var(--stb-berry-400)); color: var(--on-cta); }
.jp-tier-minor { background: rgb(var(--stb-green-500)); color: var(--on-cta); }

/* ---- promo covers -----------------------------------------------------
   The lobby's promo cards are not plum panels: they are berry plates,
   #340024 rising to #4d0035 on hover, which is what carries the
   raspberry through the page. The bonus name keeps the yellow hairline
   it already had, which now reads against the berry rather than beside
   another plum. */
.promo-card {
  background: var(--grad-berry);
  border: 1px solid rgb(var(--stb-berry-600));
}
.promo-card:hover {
  background: linear-gradient(180deg, rgb(var(--stb-berry-600)) 0%, rgb(var(--stb-berry-800)) 100%);
  border-color: rgb(var(--stb-berry-500));
  box-shadow: 0 8px 24px rgba(25, 3, 27, .5);
}
.promo-card-featured {
  background: linear-gradient(180deg, rgb(var(--stb-berry-500)) 0%, rgb(var(--stb-berry-800)) 100%);
  border-color: var(--gold);
}
.promo-tag {
  background: rgb(var(--stb-gold-300));
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.promo-card p:not(.promo-value) { color: rgb(var(--stb-neutral-150)); }

/* ---- the berry rule ---------------------------------------------------
   A short magenta-to-yellow rule the lobby runs under its section heads,
   which is the one piece of decor that makes a plain text section read
   as part of the Malina lobby rather than as a generic dark page. */
.eyebrow { position: relative; display: inline-block; padding-bottom: .4rem; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4rem;
  height: 2px;
  background: linear-gradient(to right, rgb(var(--stb-berry-300)), rgb(var(--stb-gold-300)));
}

/* the data panels keep the berry at their leading edge, the way the
   lobby marks its own info blocks */
.info-block {
  border-left: 3px solid rgb(var(--stb-berry-500));
}

/* ---- header -----------------------------------------------------------
   A solid plum band with a hairline under it, and the lens/pill row
   sitting on #2d0d30 rather than on a gradient that fades into the page. */
.site-header { border-bottom: 1px solid rgb(var(--stb-berry-700)); }

/* ---- footer -----------------------------------------------------------
   The footer carries the same berry hairline, so the page closes on the
   colour it opened with. */
.site-footer { border-top: 2px solid rgb(var(--stb-berry-700)); }

/* Four bonus cards read as a block, not as a row of three with an orphan
   underneath, so the grid stops at two columns. */
@media (min-width: 980px) {
  .promo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The phone header's register pill switches to the green plate once the
   header pins. That stuck rule still painted the label in --on-accent,
   the dark plum Malina reserves for text on YELLOW; on the green plate
   the lobby's label is white. Same specificity as the rule above, so it
   wins here on source order and nowhere else. */
@media (max-width: 860px) {
  .site-header.is-stuck .header-actions .btn-primary {
    color: var(--on-cta);
    -webkit-text-fill-color: var(--on-cta);
  }
}

/* A list inside a data panel is followed by a line of prose often enough
   (the bonus conditions close on a pointer to the full rules) that it
   needs the same air under it the panel's paragraphs already carry. */
.info-block > .info-list { margin-bottom: 1.25rem; }
.info-block > .info-list:last-child { margin-bottom: 0; }

/* ======================================================================
   RHYTHM AND THE TWO RAILS IN THE PAYMENTS SECTION
   ====================================================================== */

/* ---- vertical rhythm --------------------------------------------------
   The section padding was clamp(3.5rem, 6vw, 6.5rem), applied top AND
   bottom, so two stacked sections put 208px of nothing between their
   contents on a desktop — and the game rails, which carry no closing
   prose, ended on all of it at once. Both sides come down to roughly a
   third of that. The gap is still a clear break between bands; it is no
   longer a screenful. The phone tier below already ran tighter numbers
   and is left alone. */
.section { padding-block: clamp(1.6rem, 2.6vw, 2.6rem); }
.section-head { margin-bottom: clamp(1rem, 1.8vw, 1.5rem); }

/* the jackpot panel is its own object and was riding on the same top
   padding as a text section, which doubled the air above it */
.jp-section { padding-block: clamp(1.2rem, 2vw, 2rem); }

/* a rail that ends on a grid of tiles needs no closing air of its own —
   the next band's padding and its change of ground do that work */
#gry, #kasyno-na-zywo, #gry-natychmiastowe { padding-bottom: clamp(1.2rem, 2vw, 1.9rem); }

/* ---- the payments rails ----------------------------------------------
   "Metody płatności" only said again what the section heading above it
   already said, so the caption is gone and that rail keeps its arrows
   alone, pushed to the end of the row. The provider rail underneath
   keeps its own caption, since nothing else on the page names it. */
.providers-carousel-head-bare { justify-content: flex-end; margin-bottom: .6rem; }
.providers-carousel + .providers-carousel { margin-top: 1.75rem; }

/* The live and instant rails carry six tiles against the lobby grid's
   five columns, so each ended on a single orphan on its own row — three
   of them in a row now that the rails sit together. Those two rails get
   a sixth column at the width where the grid is five, so each reads as
   one complete line. "Top gry" keeps five: ten tiles make two full rows
   there already. */
@media (min-width: 980px) {
  #kasyno-na-zywo .pg-grid,
  #gry-natychmiastowe .pg-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---- heading scale ----------------------------------------------------
   The section H2 ran clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) — 38px on a
   desktop, which was larger than the page's own H1 (the intro card tops
   out at 2.05rem/33px). So every section heading outshouted the title of
   the page and, with the rails now stacked together, the run of them
   read as a column of banners.

   The H2 drops to a 28px ceiling, which puts the scale back in order:
   H1 33 > H2 28 > H3 21.6 (--fs-7). The banner H2 keeps a little more
   size than a section head, since it is a display line rather than a
   label, but it comes down from 42px to 32px so it no longer beats the
   H1 either. */
.section-head h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.cta-band h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); }

/* ---- the "last updated" line -----------------------------------------
   Centred, on one row with a calendar glyph, and the date itself set in
   the bright copy colour at 700 so the eye lands on it rather than on
   the sentence around it. The icon takes the yellow the page uses for
   every other small mark. */
.updated-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  flex-wrap: wrap;
}
.updated-icon { flex-shrink: 0; color: var(--gold); }
.updated-text time { color: var(--text); font-weight: 700; }

/* ---- table head -------------------------------------------------------
   The header row was painted in --stb-neutral-950, a near-black that sat
   a shade darker than the first data row and read as a gap rather than
   as a head. It takes the berry instead — the colour the promo covers
   and the panel rules already use — with a rule under it and the same
   vertical padding as a data row, so the table opens on a band. */
.summary-table thead th,
.limits-table thead th {
  padding-block: .9rem;
  background: rgb(var(--stb-berry-800));
  color: var(--gold);
  border-bottom: 1px solid rgb(var(--stb-berry-600));
}

/* ---- data panels ------------------------------------------------------
   `.info-block` arrived carrying a divider treatment — a hairline across
   the top plus a big padding-top — and the Malina pass then hung a berry
   bar down its left edge. The two do not combine: with no padding inside
   the block, the bar and the hairline met in a bare L with the copy
   jammed against it, which is what "Warunki bonusu powitalnego" was
   showing.

   The divider goes and the block becomes what it always read as — a
   panel. The berry keeps the leading edge, the rest is the section's own
   surface, and the content finally sits inside it. */
.info-block {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.15rem, 2.2vw, 1.6rem);
  border-top: none;
  border-left: 3px solid rgb(var(--stb-berry-500));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgb(var(--stb-neutral-800) / .55);
}
.info-block-title { margin-bottom: .9rem; }
/* the table brings its own frame, so it needs no gap above it inside the
   panel beyond the title's own */
.info-block .summary-table-wrap { margin-top: 1rem; }

/* With Płatności now on the narrow column the two rails wrap at four
   across, so seven payment marks and fourteen providers each end on a
   short row. The wrapped rows centre, which reads as a deliberate block
   rather than as a row that ran out. */
@media (min-width: 861px) {
  .providers-carousel-track { justify-content: center; }
}

/* ---- data panels on a phone ------------------------------------------
   The brand table was scrolling sideways at 390px. Everything between
   the viewport edge and the text was taking a cut: 40px of page gutter,
   36px of panel padding, the 3px berry edge, the wrapper's own hairline
   and then 83px of cell padding across the two columns — which left the
   values about 90px to sit in, so the table ran past its wrapper and the
   head read "SZCZ".

   The berry edge comes off altogether (the panel's ground already marks
   it out), the panel padding and the cell padding both come down, and
   the type steps down one notch. The table then fits the column with no
   sideways scroll. */
.info-block {
  border-left: 0;
  border-radius: var(--radius-lg);
}

@media (max-width: 860px) {
  .info-block { padding: 1rem .8rem; }
  .info-block .summary-table-wrap { margin-top: .8rem; }
  .summary-table { font-size: var(--fs-3); }
  .summary-table td { padding: .7rem .7rem; }
  .summary-table thead th { padding: .6rem .7rem; }
  .summary-table td:first-child { width: 44%; }
}

/* ---- the closing band repeats the hero's offer ------------------------
   The band used to run the whole offer as one grad-text line under a
   plain "Bonus powitalny". It now carries the hero's own three-part
   figure — gold label over a fading hairline, the amount in white, the
   spins as a smaller line tucked under it — so the page opens and closes
   on the same object, just at a smaller size. */
.cta-band h2 .hero-label {
  display: inline-block;
  position: relative;
  top: 0;
  padding: 0 0 .32em;
  font-size: .5em;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  text-shadow: none;
}
.cta-band h2 .hero-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}
.cta-band h2 .grad-text {
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: none;
}
.cta-band h2 .hero-subtext {
  display: inline-block;
  position: relative;
  top: -.35em;
  font-size: .55em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(25, 3, 27, .72);
}
/* the subtext is lifted off its own baseline, so the heading needs less
   room under it before the button */
.cta-band h2 { margin-bottom: .15rem; }

/* ---- menu button: bars only ------------------------------------------
   The toggle carried a small search lens in its bottom-right corner, and
   the three bars tapered (26/20/13px) to leave room for it. With the
   lens gone the taper had nothing to defer to and read as a mistake, so
   the bars go back to one width, centred in the button. */
.nav-toggle::before,
.nav-toggle::after { display: none; }
.nav-toggle-bar { left: 11px; }
.nav-toggle-bar:nth-child(1),
.nav-toggle-bar:nth-child(2),
.nav-toggle-bar:nth-child(3) { width: 24px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { width: 24px; }


/* The closing band is the page's last pitch, so its figure carries more
   size than a section head — close to the hero's own. */
.cta-band h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.9rem); }

/* the rest of the button faces carried their own hardcoded weights, so
   they moved with nothing. They follow the token too — except the phone
   header pill, which was deliberately dropped to 500 because Polish
   diacritics clot at 13.6px; it takes a smaller step instead. */
.show-more-btn,
.jp-card .jp-card-cta { font-weight: var(--btn-weight); }
.pg-play { font-weight: 700; }
@media (max-width: 860px) {
  .header-actions .btn-primary { font-weight: 700; }
}

/* ---- the sticky bar sits lower ---------------------------------------
   60px for a 25px glyph over a 13px label left about 18px of slack doing
   nothing. The bar comes down to 52px and the room comes out of the
   spacing — the gap between glyph and label and the label's own leading
   — so the icons keep their size. The raised bonus plate gives back the
   same 4px it would otherwise have gained, so it still breaks the bar's
   top edge by the same amount as before. */
@media (max-width: 860px) {
  .bottom-nav { height: 52px; }
  .bottom-nav-item { gap: .08rem; }
  .bottom-nav-item > span { line-height: 1.05; }
  .bottom-nav-plate { margin-top: -13px; }
}