/* Spinanga Casino — theme for the monobrand template */

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

  /* ---- Spinanga's own ramp, read off the lobby stylesheet -------------
     neutral is a teal scale, not a grey one; brand is the mint the lobby
     accents with; gold carries every call to action.                    */
  --stb-neutral-950: 0 28 44;
  --stb-neutral-900: 0 38 49;
  --stb-neutral-850: 9 45 57;
  --stb-neutral-800: 0 57 65;
  --stb-neutral-750: 0 54 62;
  --stb-neutral-700: 0 65 72;
  --stb-neutral-600: 0 78 86;
  --stb-neutral-550: 0 81 81;
  --stb-neutral-500: 0 97 101;
  --stb-neutral-400: 15 114 124;
  --stb-neutral-300: 38 145 156;
  --stb-neutral-200: 116 176 178;
  --stb-neutral-150: 174 216 216;
  --stb-neutral-100: 203 236 235;
  --stb-neutral-50: 232 255 254;
  --stb-white: 224 255 247;
  --stb-black: 0 27 42;

  --stb-brand-500: 0 255 191;
  --stb-brand-600: 0 208 156;
  --stb-brand-700: 0 160 120;
  --stb-brand-200: 128 255 223;
  --stb-brand-150: 160 255 231;

  --stb-gold-100: 255 230 0;
  --stb-gold-500: 255 184 0;
  --stb-gold-300: 255 171 73;
  --stb-gold-200: 255 195 125;
  --stb-gold-600: 202 109 0;
  --stb-gold-700: 182 65 0;

  --stb-blue-500: 0 224 212;
  --stb-blue-600: 0 175 166;
  --stb-blue-700: 0 130 122;

  --stb-red-500: 255 90 54;
  --stb-green-500: 112 176 31;

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-950));
  /* the teal the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #09534d;
  /* the shared stop list both hero scrims run, each in its own direction:
     a short solid lip, then an eased ramp to nothing */
  --hero-fade:
    rgb(var(--stb-neutral-950)) 0%,
    rgb(var(--stb-neutral-950)) 20%,
    rgb(var(--stb-neutral-950) / .96) 30%,
    rgb(var(--stb-neutral-950) / .84) 40%,
    rgb(var(--stb-neutral-950) / .68) 50%,
    rgb(var(--stb-neutral-950) / .5) 60%,
    rgb(var(--stb-neutral-950) / .32) 70%,
    rgb(var(--stb-neutral-950) / .16) 80%,
    rgb(var(--stb-neutral-950) / .04) 90%,
    rgb(var(--stb-neutral-950) / 0) 100%;
  --bg-top: rgb(var(--stb-neutral-900));
  --bg-elevated: rgb(var(--stb-neutral-800));
  --surface: rgb(var(--stb-neutral-900));
  --surface-2: rgb(var(--stb-neutral-800));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-750));

  --text: rgb(var(--stb-neutral-50));
  /* the lobby's own text-secondary is a deep teal that only works on labels,
     so running copy takes text-tertiary and labels take the deep one */
  --text-muted: rgb(var(--stb-neutral-200));
  /* the lobby's own text-secondary (neutral-400) lands at 3.1:1 on this
     background, which fails AA for the fine print it carries here, so the
     faint role takes the next step up the same ramp */
  --text-faint: rgb(var(--stb-neutral-300));

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

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

  --glow-a: rgba(0, 224, 212, .08);
  --glow-b: rgba(255, 184, 0, .07);
  /* the header keeps the teal band the app strip used to carry, rebuilt on
     the real ramp now that the strip is gone */
  --header-bg: linear-gradient(180deg, rgb(var(--stb-neutral-500)) 0%, rgb(var(--stb-neutral-700)) 55%, rgb(var(--stb-neutral-800)) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-800));
  --band-bg: linear-gradient(to bottom, rgba(0, 38, 49, .75), rgba(0, 38, 49, .5) 60%, rgba(0, 38, 49, .75));
  --scrim-top: linear-gradient(to bottom, rgba(0, 28, 44, .7), transparent);
  --overlay: rgb(3 25 28 / .9);

  --win: rgb(var(--stb-brand-500));
  --win-glow: rgba(0, 255, 191, .4);
  --tint-accent: rgba(255, 171, 73, .12);
  --accent-glow: rgba(255, 171, 73, .3);
  --cta-glow: rgba(255, 184, 0, .22);
  --subtle-fill: rgba(224, 255, 247, .04);
  --subtle-fill-2: rgba(224, 255, 247, .08);
  /* the marks are black-on-transparent, so they are flattened to white
     rather than greyed the way they were against the light lobby */
  --provider-filter: brightness(0) invert(1);
  --provider-blend: normal;

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

  /* ---- type: Oswald sets every heading and button, Inter the copy ------ */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 700;
  --display-track: 0;
  --display-case: uppercase;
  --btn-weight: 700;
  --btn-track: 0;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the hard step under every pill, and how far it sinks when pressed */
  --btn-shadow-height: 4px;
  --btn-active-transform: 3px;
  --btn-label: rgb(var(--stb-gold-300));
  --nav-weight: 700;
  --nav-track: .03em;
  --nav-case: uppercase;
  --hero-stroke: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.brand-logo {
  height: 52px;
  width: auto;
}

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

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

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

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

.main-nav {
  display: none;
}

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

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

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

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

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

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

.nav-actions {
  display: none;
}

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

/* From the tablet breakpoint up the artwork spans the full banner: sized to
   the height it leaves a strip of bare teal on the left, since the picture is
   2.67:1 against a banner nearer 3.6:1. Covering trades that for a vertical
   crop, and anchoring the top spends the whole crop on the foreground — which
   drops the figures as far down the banner as the artwork allows. */
@media (min-width: 861px) {
  .hero {
    background-size: cover;
    background-position: center top;
    /* the banner has to keep growing with the viewport, or covering a fixed
       390px would scale the picture further on every wider screen and crop
       the figures off at the shoulders. tracking the width holds the crop at
       roughly a quarter of the artwork from 1280 up. */
    min-height: clamp(390px, 27vw, 520px);
  }
}

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

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

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

/* ---- the notched plate under every bonus-type title ------------------
   A three-slice label: the two end caps are square, so sizing them by
   height alone keeps their notches true at any text size, and the tiling
   middle runs the full width underneath them. The hero line is the one
   exception — it sits bare on the artwork, see below.                  */
.promo-card h3 {
  padding: .2em 1.45em .26em;
  background:
    url("/assets/label-special-left.svg")   left   top / auto 100% no-repeat,
    url("/assets/label-special-right.svg")  right  top / auto 100% no-repeat,
    url("/assets/label-special-center.svg") center top / auto 100% repeat-x;
}


/* the welcome-bonus line carries no plate: it is the mint gradient itself,
   poured through the glyphs. the leading is loose enough that the accents
   stay inside the painted box, or their tips would clip away to nothing,
   and the drop-shadow stands in for text-shadow, which a transparent fill
   would let straight through. */
.hero-label {
  display: inline-block;
  text-transform: none;
  font-size: .5em;
  line-height: 1.2;
}
.hero h1 .hero-label {
  padding: 0;
  background: linear-gradient(180deg, #c7ffeb, #6cffca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  /* two shadows, not one: the tight dark pass cuts the mint away from the
     fruit it lands on at phone widths, the soft pass gives it depth */
  filter: drop-shadow(0 1px 1px rgba(0, 20, 16, .6))
          drop-shadow(0 2px 10px rgba(2, 25, 41, .55));
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.footer-brand .brand-logo {
  height: 44px;
}

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

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

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

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

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

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

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

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

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

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav-side ul { display: none; }

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

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

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

  .header-actions .btn { display: none; }
}

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

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

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

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

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

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

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

/* the kind of bonus rides the same notched plate as the hero label */
.promo-card h3 {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: var(--fs-5);
  line-height: 1;
  text-transform: none;
  color: #fff;
}

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

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

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

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

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

/* the gold action: every lobby CTA, register, claim, play */
.btn-primary {
  border: 1px solid rgba(255, 242, 166, .5);
  color: rgb(var(--stb-gold-700));
  background: var(--grad-gold);
  text-shadow: 0 2px 0 rgba(159, 52, 0, .2);
  box-shadow: 0 2px #fff2a6 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 #fff2a6 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(17, 134, 125, .5);
  color: var(--btn-label);
  background: var(--grad-teal);
  text-shadow: 0 2px 0 rgba(17, 0, 0, .3);
  box-shadow: 0 2px #00766f 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(17, 134, 125, .3);
  background: linear-gradient(180deg, rgb(var(--stb-neutral-300)) 0%, rgb(var(--stb-neutral-600)) 100%);
  box-shadow: 0 2px #00766f 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 #003f3b 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(119, 255, 221, .5);
  color: rgb(var(--stb-neutral-600));
  background: var(--grad-mint);
  text-shadow: 0 2px 0 rgba(0, 78, 78, .2);
  box-shadow: 0 2px #7fd inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-400));
}
.btn-mint:active {
  box-shadow: 0 1px #9dffe6 inset, 0 1px rgb(var(--stb-neutral-400));
  transform: translateY(var(--btn-active-transform));
}

/* ---- the gold CTA's dressing ----------------------------------------
   Two ribbons tuck behind the pill and show only where they overhang its
   ends, and two sparkles straddle the top and bottom edges. Both ride on
   their own boxes, grown past the pill so nothing clips. Sized in em, so
   the whole set scales with whatever size the button is set at.        */
.btn-primary:not(.btn-sm) { position: relative; }

.btn-primary:not(.btn-sm)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -.8em;
  right: -.8em;
  height: 1.42em;
  /* the ribbons hang a touch below the pill's centre line */
  transform: translateY(calc(-50% + .13em));
  pointer-events: none;
  background:
    url("/assets/button-atom-left.svg")  left  center / auto 100% no-repeat,
    url("/assets/button-atom-right.svg") right center / auto 100% no-repeat;
}

.btn-primary:not(.btn-sm)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -.5em -.3em;
  pointer-events: none;
  background:
    url("/assets/button-star.svg") left 88% top .344em / auto .357em no-repeat,
    url("/assets/button-star.svg") left 10% bottom .23em / auto .74em no-repeat;
}

/* pressing the pill carries its dressing down with it */
.btn-primary:not(.btn-sm):active::before,
.btn-primary:not(.btn-sm):active::after { transform: translateY(var(--btn-active-transform)); }
.btn-primary:not(.btn-sm):active::before { transform: translateY(calc(-50% + .13em + var(--btn-active-transform))); }

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

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

/* registration is the gold action, log in the teal one — the lobby does not
   repaint either of them when the header pins, so neither do we */
.btn-primary[data-cta-section="header-signup"],
.btn-primary[data-cta-section="nav-signup"],
.site-header.is-stuck .btn-primary[data-cta-section="header-signup"],
.site-header.is-stuck .btn-primary[data-cta-section="nav-signup"] {
  border: 1px solid rgba(255, 242, 166, .5);
  color: rgb(var(--stb-gold-700));
  background: var(--grad-gold);
  box-shadow: 0 2px #fff2a6 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-gold-700));
}


/* ---- 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 carved frame that wraps every game tile ---------------------
   Four corner castings pinned to the tile's corners, and four 3px rims
   tiling the runs between them, so the frame closes at any tile size. The
   set ships a left and a bottom rim only; right and top are those two
   mirrored into their own files.                                       */
.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;
  background:
    url("/assets/thumb-top-left.svg")     left  top    / 75px 54px no-repeat,
    url("/assets/thumb-top-right.svg")    right top    / 65px 55px no-repeat,
    url("/assets/thumb-bottom-left.svg")  left  bottom / 49px 32px no-repeat,
    url("/assets/thumb-bottom-right.svg") right bottom / 49px 32px no-repeat,
    url("/assets/thumb-left.svg")         left  top    / 3px 136px repeat-y,
    url("/assets/thumb-right.svg")        right top    / 3px 136px repeat-y,
    url("/assets/thumb-top.svg")          left  top    / 54px 3px repeat-x,
    url("/assets/thumb-bottom.svg")       left  bottom / 54px 3px repeat-x;
}
.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(0, 224, 212, .45);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 224, 212, .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(2, 25, 41, .7), 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 `.btn-primary:not(.btn-sm)`, which
   claims position: relative for the button's drawn ornaments */
.jackpot-panel .jackpot-cta {
  position: absolute;
  /* the margins do the centring, so the button keeps its place whatever
     width the label ends up at */
  left: 3%;
  right: 0;
  bottom: 8.8%;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
  /* the viewport-based pair is the fallback: where container units are
     missing the cqw declarations drop and the button would otherwise
     collapse to the plain .btn size */
  padding: clamp(.55rem, 4.2vw, 1.15rem) clamp(1.5rem, 11.5vw, 3.1rem);
  font-size: clamp(.95rem, 6.2vw, 1.6rem);
  padding: 4.2cqw 11.5cqw;
  font-size: 6.2cqw;
  animation: jackpot-pulse 1.9s ease-in-out infinite;
}
@keyframes jackpot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
.jackpot-panel .jackpot-cta:hover { animation-play-state: paused; transform: translateY(-2px); }
.jackpot-panel .jackpot-cta:active { animation-play-state: paused; transform: translateY(1px); }

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

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

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

  /* recent wins: one continuous strip, entries split by hairlines */
  .wins-section {
    padding: 0;
    background: var(--surface);
    border-block: 1px solid var(--border-soft);
    box-shadow: none;
  }
  .wins-wrap { width: 100%; }
  .wins-panel {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* keep the label, drop the arrows — the strip advances on its own */
  .wins-panel-head {
    margin-bottom: .2rem;
    padding: .5rem .75rem 0;
  }
  .wins-panel-title { font-size: var(--fs-2); }
  .wins-live { font-size: var(--fs-1); }
  .wins-nav { display: none; }
  .wins-carousel-wrap { gap: 0; overflow: hidden; }
  .wins-track { gap: 0; scroll-snap-type: x mandatory; }
  .win-card { scroll-snap-align: start; }
  .win-card {
    position: relative;
    width: auto;
    gap: .4rem;
    padding: .46rem .7rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .win-card + .win-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 56%;
    background: var(--border);
  }
  .win-card-thumb { width: 48px; height: 37px; border-radius: var(--radius-sm); }
  .win-card-info { gap: 0; }
  .win-card-player { font-size: var(--fs-1); line-height: 1.2; }
  .win-card-game { font-size: var(--fs-1); line-height: 1.2; max-width: 106px; }
  .win-card-amount { font-size: var(--fs-2); 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, so the skirt always begins exactly where the picture ends
       — drop it without the banner growing to match and the skirt, which is
       pinned to the floor, would ride up over the artwork. */
    --hero-drop: 36px;
    --hero-skirt: 72px;
    align-items: flex-end;
    background-image:
      linear-gradient(var(--bg), var(--bg)),
      url("assets/hero-bg-mobile.webp");
    background-position: center bottom, center var(--hero-drop);
    background-size: 100% var(--hero-skirt), 100% auto;
    min-height: calc(100vw + var(--hero-drop) + var(--hero-skirt));
    /* the copy is bottom-anchored, so the bottom padding is what holds it off
       the floor. It is shorter than the skirt on purpose: the block settles
       low on the carved plate and its last line hangs a little past the
       picture's edge, which is why the skirt was lengthened to make room */
    padding: 1.25rem 0 1.375rem;
  }
  /* the top fade runs long here because it has a seam to hide as well as an
     edge to soften — the picture starts a drop below the banner's own top */
  .hero::before { height: clamp(112px, 13vw, 180px); }
  /* the fade stops where the picture does, so it hands over to the skirt at
     full strength: run to the banner's floor instead and its solid stretch —
     a fifth of its height — would be far shorter than the skirt, leaving the
     teal lit up underneath it */
  .hero::after {
    bottom: var(--hero-skirt);
    height: clamp(90px, 26vw, 120px);
  }
}

/* ---- phone header: lens left, mark centred, both pills on their own row */
@media (max-width: 860px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    gap: .75rem;
    row-gap: .65rem;
    padding-block: .6rem;
  }
  .nav-side-left { display: none; }
  .brand { margin-inline: auto; }
  .nav-toggle { position: absolute; top: 12px; left: .75rem; }
  /* same inner padding as a lobby card */
  .intro-note-card { padding: .55rem; }
  .nav-side-right { width: 100%; margin-left: 0; }
  .header-actions { width: 100%; gap: .5rem; }
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    padding: .5rem .8rem;
    font-size: var(--fs-4);
  }
  /* 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; }