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

@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('/assets/fonts/sofia-sans-condensed-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('/assets/fonts/sofia-sans-condensed-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('/assets/fonts/sofia-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('/assets/fonts/sofia-sans-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --scheme: light;

  --bg: #e8f0fb;
  /* the blue the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #3fb0fc;
  --bg-top: #dbe8f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f7fe;
  --border: #d3e2f5;
  --border-soft: #e6eefb;

  --text: #10294a;
  --text-muted: #3d5b82;
  --text-faint: #7d94b4;

  --gold: #2e8bf3;
  --gold-2: #1f6fd0;
  --green: #f8456b;

  --grad-gold: linear-gradient(180deg, #ff7a94, #f8456b 52%, #e02449);
  --on-accent: #ffffff;

  --glow-a: rgba(46, 139, 243, .10);
  --glow-b: rgba(255, 196, 61, .10);
  --header-bg: #ffffff;
  --nav-panel-bg: #ffffff;
  --band-bg: linear-gradient(to bottom, rgba(219, 232, 249, .75), rgba(219, 232, 249, .5) 60%, rgba(219, 232, 249, .75));
  --scrim-top: linear-gradient(to bottom, rgba(219, 232, 249, .7), transparent);
  --overlay: rgba(16, 41, 74, .55);

  --win: #2bae5f;
  --win-glow: rgba(43, 174, 95, .45);
  --tint-accent: rgba(46, 139, 243, .12);
  --accent-glow: rgba(46, 139, 243, .3);
  --cta-glow: rgba(248, 69, 107, .18);
  --subtle-fill: rgba(16, 41, 74, .03);
  --subtle-fill-2: rgba(16, 41, 74, .06);
  --provider-filter: grayscale(1);
  --provider-blend: normal;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-btn: 9999px;
  --radius-pill: 9999px;

  --font-display: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --font-body: "Sofia Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 800;
  --display-track: 0;
  --display-case: uppercase;
  --btn-weight: 900;
  --btn-track: 0;
  --btn-case: uppercase;
  --btn-shadow: 0 4px 12px rgba(248, 69, 107, .32);
  /* red accent ramp, sampled off the live lobby's register button */
  --stb-red-550: 232 41 73;
  --stb-fuchsia-650: 194 47 135;
  --stb-yellow-400: 249 178 55;
  --stb-white: 255 255 255;
  /* rim stops, read off the 1px border rows of the live buttons */
  --stb-red-350: 248 153 124;
  --stb-fuchsia-750: 184 79 150;
  --stb-blue-250: 100 207 247;
  --stb-blue-400: 67 188 244;
  --stb-blue-700: 41 89 209;
  --stb-blue-750: 84 111 202;
  --stb-orange-300: 255 208 137;
  --stb-orange-500: 251 171 58;
  --stb-orange-700: 239 122 18;
  --stb-orange-800: 192 95 8;
  --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 10px 30px -12px rgba(16, 41, 74, .18);
}

*, *::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);
}

.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);
  box-shadow: var(--btn-shadow);
}
.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: .85rem 2.8rem; font-size: var(--fs-7); }

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

.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;
}
.hero h1 .grad-text { font-weight: 900; }
.hero-subtext { display: inline-block; font-size: .55em; position: relative; top: -.6em; }

/* ---- the notched blue plate -----------------------------------------
   Three slices butted edge to edge always showed their joins, so the end
   caps are painted ON TOP of the body and the body runs 3px in under each
   of them, so no join is ever on show. The body slice is cut from the same
   flattened columns the caps end on, so the ramp carries straight through. */
.hero-label,
.promo-card h3 {
  --plate-cap: 21px;
  --plate-lap: 1px;
  padding: .3em calc(var(--plate-cap) + .15em) .34em;
  background:
    url("/assets/welcome-bonus-plate-left.webp") left top / var(--plate-cap) 100% no-repeat,
    url("/assets/welcome-bonus-plate-right.webp") right top / var(--plate-cap) 100% no-repeat,
    url("/assets/welcome-bonus-plate-mid.webp") calc(var(--plate-cap) - var(--plate-lap)) top / calc(100% - 2 * var(--plate-cap) + 2 * var(--plate-lap)) 100% no-repeat;
}


/* the welcome-bonus line rides the notched blue plate */
.hero-label {
  display: inline-block;
  text-transform: none;
  font-size: .72em;
  line-height: 1;
}


@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);
  border: 1px solid var(--border);
  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-md);
  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;
}

.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(--text-muted);
  background: transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel-arrow:hover { border-color: var(--gold-2); color: var(--gold-2); }

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

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

/* light lobby: cards lift with shadow instead of a drawn border */
.site-header { box-shadow: 0 2px 12px rgba(16, 41, 74, .08); }

.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(16, 41, 74, .07);
}
.pg-card:hover { border-color: var(--gold); box-shadow: 0 8px 22px rgba(16, 41, 74, .14); }

/* ---- 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(16, 41, 74, .07);
}
.promo-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(16, 41, 74, .14);
}
.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 {
  /* narrower caps than the hero label, so the plate hugs the short heading */
  --plate-cap: 12px;
  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(16, 41, 74, .18);
  font-size: var(--fs-1);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* nav glyphs are the brand's warm yellow, not the dark-theme gold gradient */
.nav-icon [fill="currentColor"] { fill: #f0a21e; }
.nav-icon [stroke="currentColor"] { stroke: #f0a21e; }

/* log in is the blue pill, register the pink one */
.btn-ghost {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #57a8f7, #2e8bf3 52%, #1f6fd0);
  box-shadow: 0 4px 12px rgba(46, 139, 243, .28);
}
.btn-ghost:hover { color: #fff; border-color: transparent; filter: brightness(1.06); }

.btn-outline, .show-more-btn { border-color: var(--border); }
.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(16, 41, 74, .4); }
.hero h1 .grad-text { color: #ffd84d; }

/* ---- pill buttons, rebuilt to the lobby's own recipe ------------------
   The fill paints on padding-box and a second gradient paints on border-box
   behind a transparent border, which is how the lobby draws its gradient
   rim. Two inset whites give the glass edge, and ::before is the short
   blurred shine bar that sits under the label.                          */
.btn-primary,
.btn-ghost {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}
.btn-primary::before,
.btn-ghost::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 8px;
  right: 8px;
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(180deg, rgb(var(--stb-white)) 0%, rgb(var(--stb-white) / 0) 100%);
  filter: blur(.5px);
  opacity: .62;
  pointer-events: none;
}

.btn-primary {
  background:
    radial-gradient(
      70.02% 45.42% at 50% 0%,
      rgb(var(--stb-yellow-400)) 0%,
      rgb(var(--stb-white) / 0) 100%
    ) padding-box,
    linear-gradient(180deg, rgb(var(--stb-red-550)) 0%, rgb(var(--stb-fuchsia-650)) 100%) padding-box,
    linear-gradient(180deg, rgb(var(--stb-red-350)) 0%, rgb(var(--stb-fuchsia-750)) 100%) border-box;
  box-shadow:
    0 1px 2px 0 rgb(var(--stb-white) / .9) inset,
    0 -2px 2px 0 rgb(var(--stb-white) / .35) inset,
    0 2px 6px 0 rgb(var(--stb-fuchsia-650) / .45);
}

.btn-ghost {
  background:
    linear-gradient(180deg, rgb(var(--stb-blue-400)) 0%, rgb(var(--stb-blue-700)) 100%) padding-box,
    linear-gradient(180deg, rgb(var(--stb-blue-250)) 0%, rgb(var(--stb-blue-750)) 100%) border-box;
  box-shadow:
    0 1px 2px 0 rgb(var(--stb-white) / .9) inset,
    0 -2px 2px 0 rgb(var(--stb-white) / .35) inset,
    0 2px 6px 0 rgb(var(--stb-blue-700) / .45);
}

/* the glint the lobby paints at the left end of every pill: the primary one
   is the yellow-cored sparkle, the blue one the plain white sparkle. Both
   ride behind the label, and both dim while the button is held down.     */
.btn-primary { --btn-decor: url("/assets/button-main-decor.svg"); }
.btn-ghost { --btn-decor: url("/assets/button-decor.svg"); }

.btn-primary::after,
.btn-ghost::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 21%;
  bottom: 21%;
  left: .3rem;
  aspect-ratio: 28 / 35;
  background: var(--btn-decor) no-repeat center / contain;
  opacity: var(--btn-decor-opacity, 1);
  pointer-events: none;
}

.btn-primary:hover,
.btn-ghost:hover { color: #fff; filter: brightness(1.05); }
.btn-primary:active,
.btn-ghost:active {
  --btn-decor-opacity: .5;
  transform: translateY(2px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .28) inset;
}

/* the two header pills stay compact next to the wordmark */
/* the lobby sets its button labels larger and untracked — a condensed face
   needs the size, and the extra letter-spacing is what made ours read wrong */
.header-actions .btn {
  padding: .46rem .85rem;
  font-size: var(--fs-4);
  letter-spacing: 0;
}

/* registration is the orange action, same build as the red one */
.btn-primary[data-cta-section="header-signup"],
.btn-primary[data-cta-section="nav-signup"] {
  background:
    radial-gradient(
      70.02% 45.42% at 50% 0%,
      rgb(var(--stb-yellow-400)) 0%,
      rgb(var(--stb-white) / 0) 100%
    ) padding-box,
    linear-gradient(180deg, rgb(var(--stb-orange-500)) 0%, rgb(var(--stb-orange-700)) 100%) padding-box,
    linear-gradient(180deg, rgb(var(--stb-orange-300)) 0%, rgb(var(--stb-orange-800)) 100%) border-box;
  box-shadow:
    0 1px 2px 0 rgb(var(--stb-white) / .9) inset,
    0 -2px 2px 0 rgb(var(--stb-white) / .35) inset,
    0 2px 6px 0 rgb(var(--stb-orange-700) / .45);
}

/* scrolled far enough that the header is pinned: registration turns red */
.site-header.is-stuck .btn-primary[data-cta-section="header-signup"],
.site-header.is-stuck .btn-primary[data-cta-section="nav-signup"] {
  background:
    radial-gradient(
      70.02% 45.42% at 50% 0%,
      rgb(var(--stb-yellow-400)) 0%,
      rgb(var(--stb-white) / 0) 100%
    ) padding-box,
    linear-gradient(180deg, rgb(var(--stb-red-550)) 0%, rgb(var(--stb-fuchsia-650)) 100%) padding-box,
    linear-gradient(180deg, rgb(var(--stb-red-350)) 0%, rgb(var(--stb-fuchsia-750)) 100%) border-box;
  box-shadow:
    0 1px 2px 0 rgb(var(--stb-white) / .9) inset,
    0 -2px 2px 0 rgb(var(--stb-white) / .35) inset,
    0 2px 6px 0 rgb(var(--stb-fuchsia-650) / .45);
}

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

/* ---- app banner above the hero --------------------------------------- */
.app-banner {
  position: relative;
  background: linear-gradient(180deg, #3f9bfb 0%, #1f7ae4 55%, #1769cc 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 41, 74, .18);
}
.app-banner[hidden] { display: none; }

.app-banner-inner {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem 0;
}

.app-banner-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.app-banner-copy { min-width: 0; margin-right: auto; }
.app-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
/* the selling point: stays on phones even when the detail line is dropped */
.app-banner-bonus {
  margin: .12rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3);
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #ffd84d;
}

.app-banner-text {
  margin: .1rem 0 0;
  font-size: var(--fs-3);
  line-height: 1.3;
  color: rgba(255, 255, 255, .82);
}

.app-banner-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.4rem;
  border-radius: 9999px;
  background: #fff;
  color: #1769cc;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.app-banner-cta:hover { transform: translateY(-1px); filter: brightness(.97); }
.app-banner-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }

.app-banner-close {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: .8;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.app-banner-close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.app-banner-close::before,
.app-banner-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}
.app-banner-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.app-banner-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 560px) {
  .app-banner-text { display: none; }
  .app-banner-bonus { font-size: var(--fs-1); }
  .app-banner-cta { padding: .55rem 1.05rem; font-size: var(--fs-3); }
}

/* ---- lobby card badge sits astride the top edge ---------------------- */
.pg-card { position: relative; }
.pg-badge {
  top: 0;
  left: 50%;
  right: auto;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(16, 41, 74, .18);
}

/* ---- 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(16, 41, 74, .08);
}
.carousel-arrow:hover { border-color: var(--gold); color: var(--gold); }

/* ---- 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: clamp(.9rem, 2.4vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(16, 41, 74, .07);
}
.intro-note-title {
  margin: 0 0 .7rem;
  font-size: clamp(1.45rem, 1.15rem + 1.25vw, 2.05rem);
  color: var(--text);
}
.intro-note-card > .intro-note-text + .intro-note-text { margin-top: .7rem; }
.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;
  /* framed like the hero banner */
  border: 2px solid #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(46, 139, 243, .16), 0 4px 14px rgba(16, 41, 74, .1);
  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(58, 18, 118, .6), 0 0 14px rgba(255, 214, 120, .4);
}
.jackpot-amount.is-ticking { transform: translateY(-50%) scale(1.03); }

/* scoped so a later .btn rule cannot take the positioning back */
.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: framed like a lobby chip */
  .hero {
    width: min(100% - 1.5rem, var(--container));
    /* same breathing room above and below as at the sides */
    margin: .75rem auto;
    border: 2px solid #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(46, 139, 243, .16), 0 4px 14px rgba(16, 41, 74, .1);
    /* a third shorter than the stock banner */
    min-height: clamp(295px, 55vw, 335px);
    padding: 2.4rem 0 1.5rem;
    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-6); }
  .wins-live { font-size: var(--fs-2); }
  .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: .6rem;
    padding: .6rem .85rem;
    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: 92px; height: 72px; border-radius: var(--radius-md); }
  .win-card-info { gap: 2px; }
  .win-card-player { font-size: var(--fs-4); line-height: 1.2; }
  .win-card-game { font-size: var(--fs-5); line-height: 1.25; max-width: 176px; }
  .win-card-amount { font-size: var(--fs-7); 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 portrait with clear blue beneath the fruit, so the
     picture rides high in the chip and the bonus copy reads under it */
  .hero {
    align-items: flex-end;
    background-image: url("assets/hero-bg-mobile.webp");
    background-position: center 22%;
    background-size: 100% auto;
    min-height: clamp(360px, 70vw, 412px);
    padding: 1.25rem 0 1.5rem;
  }
}

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