
/* ============================================================
   01 · TOKENS
   ============================================================ */
:root{
  /* ============================================================
     v2 — DARK THEME
     Token semantics are inverted:
       --ink  was navy text;     now WHITE  (used as "text" / "fg")
       --paper was white bg;     now DARK NAVY (used as "background" / "surface")
     Components that genuinely need the original NAVY value (logo mark,
     navy buttons, etc.) reference --brand-navy explicitly.
     ============================================================ */
  --font:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ink:#FFFFFF;
  --ink-2:#E1E1F2;
  --ink-soft:#8688B8;
  --ink-deep:#FFFFFF;
  /* surface hierarchy mirrors light theme: --paper is the elevated surface
     (slightly lighter dark), --paper-2 is the body background (darkest),
     --paper-3 is the hover/raised step.
     Light:  --paper=#FFF (cards) > --paper-2=#F6F6FB (body)
     Dark:   --paper=#15154A (cards/header) > --paper-2=#0A0A2E (body) */
  --paper:#15154A;
  --paper-2:#0A0A2E;
  --paper-3:#1F1F5F;
  /* raised chrome (sticky header + footer) — one step lighter than the
     sidebar (#0A0A2E) so the two nav surfaces read as distinct, not blended */
  --nav-surface:#12123A;
  --rule:rgba(255,255,255,.08);
  --rule-2:rgba(255,255,255,.16);
  --brand-navy:#15155E;
  --brand-navy-2:#2A2A8A;
  --brand-navy-deep:#0E0E45;

  /* palette — tiers */
  --red:#ED1B2E;
  --red-deep:#C8001A;
  --red-tint:#FFE8EB;
  --magenta:#E6007E;
  --magenta-tint:#FFE2F1;
  --yellow:#FFCC00;
  --yellow-tint:#FFF4C4;
  --yellow-deep:#E0B100;
  --cyan:#00C4D2;
  --cyan-tint:#C9F3F6;
  --cyan-deep:#00A0AC;
  --purple:#7C1FBE;
  --purple-tint:#EDD8FA;
  --purple-deep:#5E1591;
  --green:#0BA15C;
  --green-tint:#D9F3E5;

  /* radii */
  --r-pill:999px;
  --r-blob:32px;
  --r-card:22px;
  --r-tile:16px;
  --r-sm:10px;

  /* shadows — dark theme uses heavier blacks + subtle yellow glow accents */
  --shadow-sm:0 1px 0 var(--rule);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.65);
  --shadow-press:0 8px 0 -2px rgba(0,0,0,.45);

  /* layout — fluid via clamp() */
  --sidebar-w:280px;
  --sidebar-w-collapsed:80px;
  --header-h:72px;
  --gutter:clamp(16px, 2.4vw, 28px);
  --section-gap:clamp(20px, 2.4vw, 28px);

  /* fluid type scale */
  --fs-display:clamp(32px, 4.4vw, 46px);
  --fs-h2:clamp(22px, 2.4vw, 30px);
  --fs-h3:clamp(18px, 1.9vw, 22px);
  --fs-h4:clamp(14px, 1.2vw, 15px);
  --fs-body:14px;
  --fs-sm:13px;
  --fs-xs:12px;
  --fs-eb:11px;

  /* 8-point sparkle (sharper, premium) */
  --spark: polygon(50% 0%, 53.5% 46.5%, 100% 50%, 53.5% 53.5%, 50% 100%, 46.5% 53.5%, 0% 50%, 46.5% 46.5%);

  /* easings */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ============================================================
   02 · RESET / BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:#030418;
  font-size:var(--fs-body);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* clip (not hidden): hidden would promote overflow-y to auto, making <body>
     a scroll container and breaking the sticky header. clip avoids that. */
  overflow-x:clip;
}
button,input{font-family:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%;height:auto;display:block}

/* Local flat icon system for primary navigation. Keeps the side rail and
   mobile sticky nav quiet, consistent, and independent from hosted icons. */
.np-icon-sprite{
  position:absolute;width:0;height:0;overflow:hidden;
}
.np-icon{
  width:1em;height:1em;display:block;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.np-icon .np-fill{fill:currentColor;stroke:none}
.np-icon--solid{fill:currentColor;stroke:none}
.np-icon--live{width:1.12em;height:1.12em}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px;border-radius:6px}
::selection{background:var(--ink);color:#fff}

/* hide scrollbars on snap rails */
.scroll-rail{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.scroll-rail::-webkit-scrollbar{display:none}

/* ============================================================
   03 · LAYOUT SHELL
   ============================================================ */
.layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .3s var(--ease-out);
}
/* COLLAPSED — sidebar shrinks to a mini icon dock (80px). Sidebar stays
   visible at all times; only the header toggle button changes icon. */
.layout.collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}

/* scrim — appears behind drawer on tablet/mobile */
.scrim{
  position:fixed;inset:0;
  background:rgba(14,14,69,.55);
  backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease-out), visibility .25s;
  z-index:90;
}
.layout.drawer-open .scrim{opacity:1;visibility:visible}

/* ============================================================
   04 · SIDEBAR
   ============================================================ */
.sidebar{
  background:var(--ink);
  color:#fff;
  position:sticky;top:0;                  /* full-height rail — runs from the very top */
  height:100vh;
  overflow-y:auto;
  display:flex;flex-direction:column;
  flex-shrink:0;
  scrollbar-width:thin;
  z-index:60;                             /* sit above the fixed full-page .pv7-bg (z-index:0) in every state — collapsed had 60/80, expanded fell back to auto and got covered */
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.sidebar > *{flex-shrink:0}
/* inner scroll wrapper. On desktop it's transparent (display:contents) so the rail
   scrolls exactly as before; on mobile it becomes the scroll container, letting the
   rail itself stay overflow:visible so the close handle can overhang the edge. */
.sb-scroll{display:contents}
.sb-scroll > *{flex-shrink:0}

/* logo block at top of sidebar */
.logo-block{
  height:var(--header-h);
  padding:0 22px;
  display:flex;align-items:center;gap:9px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo-mark{
  width:36px;height:36px;border-radius:9px;background:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 12px -4px rgba(237,27,46,.5);
}
.logo-mark .star{
  width:88%;height:88%;background:#fff;
  clip-path:var(--spark);
}
.logo-text{
  font-weight:900;font-size:22px;letter-spacing:-.025em;line-height:1;color:#fff;
  overflow:hidden;
}
.logo-text .dot{color:var(--yellow)}
.logo-text small{
  display:block;font-weight:800;font-size:9.5px;letter-spacing:.22em;
  color:rgba(255,255,255,.5);margin-top:5px;text-transform:uppercase;
}
.collapsed .logo-block{padding:0;justify-content:center}
.collapsed .sidebar .logo-text{display:none}
.collapsed .logo-block .logo-mark{display:none}

/* MARKET SWITCH — Casino / Sports as a full-width glass pill, an exact sibling
   of the Light/Dark theme toggle (.sb-theme): same translucent container, pill
   radius, inset highlight, and 3D emoji glyphs. The active tab gets a brighter
   white fill. Hidden when the rail is collapsed. */
.sb-market{
  display:flex;gap:3px;
  margin:13px 22px 8px;
  padding:3px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.sb-market-tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;border-radius:var(--r-pill);
  background:transparent;border:0;cursor:pointer;text-decoration:none;
  font-weight:800;font-size:13px;letter-spacing:.02em;
  color:rgba(255,255,255,.62);white-space:nowrap;
  transition:background .15s, color .15s;
}
/* flat icons — the same local glyphs that sit next to the Casino / Sports nav links */
.sb-market-tab .np-icon{width:18px;height:18px;color:rgba(255,255,255,.55);transition:color .15s;flex-shrink:0}
/* optical correction — the round basketball reads small next to the slot machine */
.sb-market-tab[data-vert="sports"] .np-icon{width:19px;height:19px}
.sb-market-tab:hover{color:#fff}
.sb-market-tab:hover .np-icon{color:#fff}
.sb-market-tab.active{
  background:rgba(255,255,255,.10);color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.sb-market-tab.active .np-icon{color:var(--yellow)}
.collapsed .sb-market{display:none}

/* RETRACT / EXPAND HANDLE — a circular control (CoinCasino pattern). Fixed so
   the rail's own overflow can't clip it; its left tracks the rail width and
   animates on collapse. EXPANDED: a navy disc riding the rail / content border,
   further DOWN. COLLAPSED: the same circle seated INSIDE the rail at the top.
   NOTE: --ink resolves to #fff at this scope, so the fill is set with the
   explicit brand navy (the rail itself paints with --brand-navy-deep). */
.fold-edge{
  position:fixed;top:19px;left:calc(var(--sidebar-w) - 17px);z-index:85;  /* top:19 → 34px circle centered on y=36, the header logo + market-toggle line. above the rail (z-index:80) so it shows when seated inside it */
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  /* same glass treatment as the header pills and the sidebar Light/Dark toggle:
     0.12 white hairline + inset top-highlight / bottom-shadow rim. Keeps a navy
     fill (unlike the transparent header pills) because it floats over the content
     area at the rail edge and needs to stay legible; the soft drop shadow lifts it. */
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%), var(--brand-navy);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 8px -3px rgba(0,0,0,.4);
  color:#fff;cursor:pointer;
  transition:left .3s var(--ease-out), top .3s var(--ease-out), background .15s, transform .15s;
}
.fold-edge:hover{background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%), var(--brand-navy)}
.fold-edge svg{width:16px;height:16px;transition:transform .2s}
/* COLLAPSED — same circle, seated inside the rail (centered), aligned on the
   logo's horizontal line: 34px circle centered in the 72px header band → top 19,
   center y=36 (matches the header logo and the market switch). */
.collapsed .fold-edge{
  top:19px;left:calc((var(--sidebar-w-collapsed) - 34px) / 2);
  transform:none;
}
.collapsed .fold-edge svg{transform:rotate(180deg)}
/* collapsed: market gone — clear the expand handle, then a touch more so the
   icon column sits slightly lower (combined with .nav's 30px margin-top). */
.collapsed .nav{padding-top:46px}

/* close drawer button (mobile only) — same circular glass handle as the desktop
   retract control. A CHILD of the drawer, absolutely positioned so it HALF-OVERHANGS
   the right edge (17px in / 17px out); because it's part of the rail it slides in/out
   WITH the drawer as one unit (no separate fade). Sits below the full-width toggle.
   Exact position is set in the mobile media query. */
.drawer-close{
  display:none;
  position:absolute;z-index:6;
  width:34px;height:34px;border-radius:50%;
  align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%), var(--brand-navy);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 8px -3px rgba(0,0,0,.4);
  color:#fff;
  transition:background .15s;
}
.drawer-close:hover{background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%), var(--brand-navy)}
.drawer-close svg{width:15px;height:15px}

/* nav sections + items */
.nav-section{
  padding:22px 22px 10px;
  font-size:10.5px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:10px;
}
.nav-section .line{flex:1;height:1px;background:rgba(255,255,255,.1)}
.nav-section:first-of-type{padding-top:18px}
.collapsed .nav-section{padding:18px 12px 8px;justify-content:center;font-size:0;gap:0}
.collapsed .nav-section span:not(.line){display:none}
.collapsed .nav-section .line{flex:none;width:28px;display:block}

.nav{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.nav-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 14px;border-radius:12px;
  font-weight:800;font-size:14px;color:rgba(255,255,255,.9);cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
  white-space:nowrap;
}
.collapsed .nav-item{justify-content:center;padding:13px 0;gap:0;position:relative}
.collapsed .nav-item .ni-label, .collapsed .nav-item .caret{display:none}
.collapsed .nav-item .badge,
.collapsed .nav-item .dot-badge{
  position:absolute;top:5px;right:12px;
  padding:1px 5px;font-size:9px;letter-spacing:0;
}
.collapsed .nav-item .dot-badge::before{display:none}
.nav-item .ni-ico{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav-item .ni-ico svg{width:20px;height:20px;font-size:20px}
.nav-item .ni-ico .np-icon--live{width:22px;height:22px}
.nav-item .ni-label{flex:1}
.nav-item .badge{
  background:var(--red);color:#fff;
  padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:900;letter-spacing:.04em;
}
.nav-item .dot-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--magenta);color:#fff;
  padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:900;letter-spacing:.04em;
  line-height:1;
}
.nav-item .dot-badge::before{
  content:'';
  width:5px;height:5px;border-radius:50%;background:#fff;
  flex-shrink:0;
}
.nav-item .caret{color:rgba(255,255,255,.5);width:16px;height:16px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.ni-ico.c-red,.ni-ico.c-yellow,.ni-ico.c-magenta,
.ni-ico.c-cyan,.ni-ico.c-purple,.ni-ico.c-green,.ni-ico.c-navy{color:rgba(255,255,255,.6)}
.nav-item:hover .ni-ico{color:#fff}
.nav-item.active .ni-ico.c-red    {color:var(--red)}
.nav-item.active .ni-ico.c-yellow {color:var(--yellow)}
.nav-item.active .ni-ico.c-magenta{color:var(--magenta)}
.nav-item.active .ni-ico.c-cyan   {color:var(--cyan)}
.nav-item.active .ni-ico.c-purple {color:var(--purple)}
.nav-item.active .ni-ico.c-green  {color:var(--green)}
.nav-item.active{
  background:var(--paper);color:var(--ink);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.4);
}
.nav-item.active .badge{background:var(--red)}

/* sidebar promo tiles */
.sb-promo{
  margin:18px 16px 6px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.sb-tile{
  border-radius:12px;padding:14px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:84px;
  background:rgba(255,255,255,.06);color:#fff;
  text-align:center;
  transition:background .15s, transform .15s;
}
.sb-tile .lbl{line-height:1.2}
.sb-tile:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.sb-tile .ic{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.sb-tile .ic svg{width:18px;height:18px;font-size:18px}
.sb-tile .lbl{font-size:10.5px;font-weight:900;line-height:1.15;letter-spacing:.01em;color:#fff}
.sb-tile.t-red    .ic{background:var(--red)}
.sb-tile.t-magenta .ic{background:var(--magenta)}
.sb-tile.t-purple  .ic{background:var(--purple)}
.sb-tile.t-yellow  .ic{background:var(--yellow);color:var(--ink)}
.sb-tile.t-cyan    .ic{background:var(--cyan);color:var(--ink)}
.sb-tile.t-navy    .ic{background:rgba(255,255,255,.16)}
.sb-tile.t-green   .ic{background:var(--green)}

.sb-trail{
  margin:10px 16px 6px;
  border-radius:14px;padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
  transition:background .15s, transform .15s;
}
.sb-trail:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.sb-trail .eb{font-size:9.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.sb-trail h5{margin:0;font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--yellow)}
.sb-trail p{margin:6px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.7);text-transform:uppercase;line-height:1.3}
.collapsed .sb-promo,.collapsed .sb-trail{display:none}

.sidebar-foot{
  margin-top:auto;
  padding:24px 22px 22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:14px;
}
.sidebar-foot .install{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);
  transition:background .15s;
}
.sidebar-foot .install:hover{background:rgba(255,255,255,.1)}
.sidebar-foot .install .ic{
  width:30px;height:30px;border-radius:8px;background:var(--magenta);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar-foot .install svg{width:16px;height:16px;color:#fff}
.sidebar-foot .install .txt{display:flex;flex-direction:column;overflow:hidden}
.sidebar-foot .install b{font-size:13px;font-weight:900;color:#fff;white-space:nowrap}
.sidebar-foot .install span{font-size:10.5px;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.collapsed .sidebar-foot{padding:16px 14px}
.collapsed .sidebar-foot .install{padding:10px 0;justify-content:center}
.collapsed .sidebar-foot .install .txt{display:none}

/* ============================================================
   05 · RIGHT COLUMN + HEADER
   ============================================================ */
.right-col{display:flex;flex-direction:column;min-width:0}

.header{
  /* top:-2px overshoot: a translucent + backdrop-blur sticky bar can leak a
     1-2px hairline of content above it on hi-dpi screens; nudging up hides the
     fragile blurred edge above the viewport (content is centred, so no clip) */
  position:sticky;top:-4px;z-index:50;
  height:calc(var(--header-h) + 4px);
  /* float over the hero: pull self out of flow so the scene rises behind it */
  margin-bottom:calc(-1 * var(--header-h) - 4px);
  background:transparent;
  box-shadow:none;
  display:flex;align-items:center;gap:16px;
  padding:4px var(--gutter) 0;
  transition:background .25s var(--ease-out), box-shadow .25s, backdrop-filter .25s;
}
/* legibility scrim while transparent — dark at the very top, fading to nothing */
.header::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,25,.82) 0%, rgba(5,7,25,.46) 52%, rgba(5,7,25,0) 100%);
  transition:opacity .25s var(--ease-out);
}
/* once scrolled past the hero, the header becomes a solid bar so it stays
   readable over the game grid */
.header.is-solid{
  /* frosted liquid glass once scrolled — matches the mobile bottom nav, a touch
     more opaque for legibility over bright game thumbnails scrolling beneath */
  background:rgba(10,10,46,.62);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 24px -10px rgba(0,0,0,.55);
}
.header.is-solid::before{opacity:0}

/* hamburger / fold button */
.fold-btn,.hamburger{
  width:44px;height:44px;border-radius:12px;
  background:var(--paper-2);border:1px solid var(--rule);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .15s, transform .15s;
  flex-shrink:0;
}
.fold-btn:hover,.hamburger:hover{background:var(--paper-3)}
.fold-btn svg,.hamburger svg{width:18px;height:18px}
.collapsed .header .fold-btn{display:none}
.hamburger{display:none}

/* header logo */
.header-logo{display:none;align-items:center;gap:9px;min-width:0}
.header-logo-img{height:clamp(40px, 5vw, 60px);width:auto;display:block}  /* full wordmark logo — a touch bigger than the old crown due to its stacked orientation */
.header-logo .logo-mark{
  width:34px;height:34px;background:transparent;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  filter:drop-shadow(0 2px 5px rgba(255,170,0,.35));
}
.header-logo .logo-mark svg{width:100%;height:100%;display:block}
.header-logo .logo-mark .star{width:88%;height:88%;background:#fff;clip-path:var(--spark)}
.header-logo .logo-text{
  font-weight:900;font-size:22px;letter-spacing:-.025em;line-height:1;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-logo .logo-text .dot{color:var(--red)}
.header-logo .logo-text small{display:block;font-weight:800;font-size:9.5px;letter-spacing:.22em;color:var(--ink-soft);margin-top:5px;text-transform:uppercase}
.collapsed .header-logo{display:flex}

/* header horizontal nav — centered between logo and the right controls.
   Flows as a flex child (flex:1) rather than absolute-centred, so it can never
   overlap the right-side controls when the sidebar expands and narrows the column. */
.header-nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
/* The header nav only shows when it actually fits without crowding the logo or
   the right-side controls:
   - below 1180px even the collapsed (mini) layout is too tight → hide;
   - when the sidebar is EXPANDED it eats ~280px, so below 1400px → hide (the
     expanded sidebar already provides full labelled navigation).
   Above those thresholds it stays, flex-centred between logo and controls. */
@media (max-width: 1180px){
  .header-nav{ display:none; }
}
@media (max-width: 1400px){
  .layout:not(.collapsed) .header-nav{ display:none; }
}
.header-nav .hn-link{
  position:relative;display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:10px;
  font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1;
  color:rgba(255,255,255,.72);white-space:nowrap;
  transition:color .15s, background .15s;
}
.header-nav .hn-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.header-nav .hn-link.is-active{color:#fff}
.header-nav .hn-link.is-active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;
  border-radius:3px;background:var(--yellow);
  box-shadow:0 0 10px rgba(255,204,0,.55);
}

/* product / vertical switcher — Casino vs Sports — sits in the header
   between the logo cluster and the right-side controls. Always visible. */
.vert-switch{
  display:inline-flex;align-items:center;
  height:44px;padding:3px;gap:3px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-pill);
  flex-shrink:0;
}
.vs-item{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 16px;border-radius:var(--r-pill);
  background:transparent;border:0;
  font-weight:900;font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
}
.vs-item svg{width:16px;height:16px;font-size:16px;color:var(--ink-soft);transition:color .15s;flex-shrink:0}
/* optical correction — round/sparse icons read smaller than rectangular ones
   at the same bounding box, so nudge the basketball up ~12% to match the
   visual weight of the slot machine */
.vs-item .np-icon--sports{width:18px;height:18px;font-size:18px}
.vs-item:hover{color:var(--ink)}
.vs-item:hover svg{color:var(--ink)}
.vs-item.active{background:var(--ink);color:#fff}
.vs-item.active svg{color:var(--yellow)}

.header-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang{
  height:44px;padding:0 16px;border-radius:var(--r-pill);
  background:transparent;border:1.5px solid var(--rule);
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;font-size:12.5px;color:var(--ink);
  transition:background .15s;
}
.lang:hover{background:var(--paper-2)}
.lang svg{width:16px;height:16px;opacity:.7;flex-shrink:0}
.login{
  height:44px;padding:0 24px;border-radius:var(--r-pill);
  background:transparent;border:1.5px solid var(--ink);
  font-weight:900;font-size:14px;color:var(--ink);
  white-space:nowrap;transition:background .15s;
  display:inline-flex;align-items:center;justify-content:center;
}
.login:hover{background:var(--paper-2)}
.signup{
  height:44px;padding:0 28px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;
  font-weight:900;font-size:14px;white-space:nowrap;
  box-shadow:0 8px 0 -2px rgba(21,21,94,.22);
  transition:transform .15s, background .15s, box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;
}
.signup:hover{transform:translateY(-1px);background:var(--ink-2)}
.signup:active{transform:translateY(2px);box-shadow:0 4px 0 -2px rgba(21,21,94,.22)}
/* default: text label visible, icon hidden */
.login .ico,.signup .ico{display:none}

/* ============================================================
   06 · MAIN
   ============================================================ */
.main{padding:24px var(--gutter) 24px;min-width:0;flex:1}
.main-inner{max-width:1480px;margin:0 auto;display:flex;flex-direction:column;gap:var(--section-gap)}

/* ============================================================
   07 · HERO CAROUSEL
   ============================================================ */
/* carousel hero sits below the floating header (no full-bleed art behind the
   header here, so push the cards clear of it) */
.hero{position:relative; padding-top:calc(var(--header-h) + 8px)}
.hero-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 32px) / 3);
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding:0;
  padding-bottom:4px;
}
.hero-card{
  scroll-snap-align:start;
  border-radius:var(--r-card);
  padding:30px;
  position:relative;overflow:hidden;
  min-height:380px;
  display:flex;flex-direction:column;
  isolation:isolate;
  container-type:inline-size;        /* fonts scale to CARD width, not viewport */
}
/* 6 core brand hero tones — no variants, no off-system colors */
.hero-card.c-red    {background:var(--red);color:#fff}
.hero-card.c-yellow {background:var(--yellow);color:var(--ink)}
.hero-card.c-purple {background:var(--purple);color:#fff}
.hero-card.c-cyan   {background:var(--cyan);color:var(--ink)}
.hero-card.c-magenta{background:var(--magenta);color:#fff}
.hero-card.c-navy   {background:var(--ink);color:#fff}

.hero-card > *{position:relative;z-index:3}
/* enforce text column — text spans LEFT 60%, mascot zone is RIGHT 40% */
.hero-card .hc-eb,
.hero-card h2,
.hero-card .bonus,
.hero-card .ctas{max-width:60%}
.hero-card .hc-eb{
  align-self:flex-start;                                  /* hard-anchor to card's left edge */
  font-size:clamp(11px, 2.1cqw, 13.5px);                   /* small refined supporting label — doesn't compete with H2 */
  font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);
  white-space:nowrap;
}
.hero-card.c-yellow .hc-eb,
.hero-card.c-cyan .hc-eb{color:var(--ink)}
/* NO dash before the eyebrow — clean uppercase label only */
.hero-card h2{
  margin:clamp(18px, 3cqw, 24px) 0 clamp(14px, 2.6cqw, 20px);
  /* H2 floor raised so headlines stay COMMANDING at every card width,
     not just wide cards. Container query still grows it on bigger cards. */
  font-size:clamp(50px, 10cqw, 56px);
  font-weight:900;line-height:.96;letter-spacing:-.025em;
  text-wrap:pretty;
}
/* accent color on the big pct number — picks a contrasting brand tier */
.hero-card .pct           {color:var(--yellow)}
.hero-card.c-yellow .pct  {color:var(--red)}
.hero-card.c-cyan .pct    {color:var(--red)}
.hero-card.c-magenta .pct {color:var(--yellow)}
.hero-card.c-purple .pct  {color:var(--yellow)}
.hero-card.c-navy .pct    {color:var(--yellow)}
.hero-card .bonus{
  margin:0;
  font-size:clamp(17px, 3.6cqw, 22px);       /* floor raised — body copy stays readable everywhere */
  line-height:1.5;font-weight:600;
  color:inherit;opacity:.95;
}
.hero-card.c-yellow .bonus,
.hero-card.c-cyan .bonus{color:var(--ink-2);opacity:1}
.hero-card .ctas{
  margin-top:clamp(28px, 5.5cqw, 36px);
  align-self:flex-start;
  display:inline-flex;align-items:center;
  z-index:5;position:relative;
}
.hero-card .cta{
  display:inline-flex;align-items:center;gap:14px;
  height:clamp(60px, 13cqw, 68px);                 /* floor raised — chunky pill at every card width */
  padding:0 clamp(30px, 6cqw, 40px);
  border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-weight:900;
  font-size:clamp(16px, 3.2cqw, 18px);
  letter-spacing:-.005em;
  white-space:nowrap;
  box-shadow:0 8px 0 -2px rgba(0,0,0,.18);
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.hero-card .cta:hover{transform:translateY(-2px);box-shadow:0 10px 0 -2px rgba(0,0,0,.20)}
.hero-card .cta:active{transform:translateY(2px);box-shadow:0 4px 0 -2px rgba(0,0,0,.18)}
.hero-card.c-yellow .cta,
.hero-card.c-cyan .cta{background:var(--ink);color:#fff;box-shadow:0 8px 0 -2px rgba(21,21,94,.28)}
.hero-card.c-yellow .cta:hover,
.hero-card.c-cyan .cta:hover{box-shadow:0 10px 0 -2px rgba(21,21,94,.32)}
.hero-card .cta svg{width:clamp(17px, 3cqw, 20px);height:clamp(17px, 3cqw, 20px);flex-shrink:0}

/* ===== MASCOT — single uniform rule =====
   Right 40% of card, full card height. Text owns left 60%.
   object-fit:cover scales the character to fill the zone completely;
   object-position:left bottom keeps the character's LEFT side and
   bottom visible, cropping more aggressively from the right when
   the image is wider than the 40% zone. When swapping in other
   characters, design them so their right side is the expendable part.
*/
.hero-card .mascot{
  position:absolute;pointer-events:none;z-index:2;
  right:0;top:0;bottom:0;
  width:40%;height:100%;
  object-fit:cover;
  object-position:left bottom;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.32));
  /* `border-radius` clips the image pixels but NOT the filter:drop-shadow
     output (which is rendered in its own pass and bleeds past the curve).
     `clip-path` is applied after the filter pass, so it clips the image
     AND the shadow into the same rounded silhouette as the card itself. */
  clip-path:inset(0 0 0 0 round 0 var(--r-card) var(--r-card) 0);
}

/* hero controls (arrows + dots) */
.hero-controls{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:14px;
}
.hero-arrow{
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--rule);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
  flex-shrink:0;
}
.hero-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-1px)}
.hero-arrow:disabled{opacity:.35;cursor:not-allowed;transform:none}
.hero-arrow svg{width:16px;height:16px}
.hero-dots{
  display:flex;align-items:center;gap:7px;
  padding:0 4px;
}
.hero-dots .d{
  width:8px;height:8px;border-radius:50%;background:var(--rule-2);
  transition:background .2s var(--ease-out), width .25s var(--ease-out);
  cursor:pointer;border:0;padding:0;
}
.hero-dots .d:hover{background:var(--ink-soft)}
.hero-dots .d.active{background:var(--ink);width:24px;border-radius:4px}

/* progress bar under active hero (auto-rotate indicator) */
.hero-progress{
  position:absolute;bottom:0;left:0;height:3px;
  background:linear-gradient(90deg, var(--magenta), var(--yellow));
  width:0%;
  transition:width 6s linear;
  z-index:5;border-radius:0 0 0 var(--r-card);
}
.hero-card.is-active .hero-progress{width:100%}

/* ============================================================
   08 · CATEGORY TABS + SEARCH
   ============================================================ */
.cat-wrap{position:relative;margin-top:8px}
.cat-wrap::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:60px;pointer-events:none;
  /* right-edge scroll fade — must match the page background (#030418), not
     --paper-2 (#0A0A2E), or it paints a lighter patch on the dark body */
  background:linear-gradient(90deg, rgba(3,4,24,0), #030418);
}
.cat-tabs{
  display:flex;gap:6px;align-items:center;
  overflow-x:auto;
  /* y-padding is for the :hover translateY lift room; x-padding-left stays at 0
     so the first tab aligns flush-left with the dropdown / search / title below */
  padding:2px 60px 2px 0;
}
.cat-tab{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 18px;border-radius:var(--r-pill);
  font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;
  background:var(--paper);border:1px solid var(--rule);
  transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.cat-tab svg{width:16px;height:16px;color:var(--ink-soft)}
.cat-tab:hover{background:var(--paper-3);transform:translateY(-1px)}
.cat-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-tab.active svg{color:var(--yellow)}

/* lobby search row — provider dropdown + search pill, side by side */
.lobby-search{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2.4fr);
  gap:14px;
  margin-top:14px;
}
.provider-dd{position:relative}
.provider-select{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  height:56px;padding:0 18px 0 20px;
  font-weight:800;font-size:14px;color:var(--ink);
  box-shadow:0 1px 0 var(--rule);
  cursor:pointer;text-align:left;
  transition:border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
.provider-select:hover{background:var(--paper-2);border-color:var(--rule-2);transform:translateY(-1px)}
.provider-select:focus-visible,
.provider-select[aria-expanded="true"]{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(21,21,94,.08);
}
.provider-select .ps-ico{width:18px;height:18px;color:var(--ink-soft);flex-shrink:0}
.provider-select .ps-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.provider-select .ps-count{
  font-size:11px;font-weight:900;letter-spacing:.04em;
  color:var(--ink-soft);background:var(--paper-2);
  padding:4px 9px;border-radius:var(--r-pill);
  flex-shrink:0;
}
.provider-select .ps-chev{width:16px;height:16px;color:var(--ink-soft);flex-shrink:0;transition:transform .15s}
.provider-select[aria-expanded="true"] .ps-chev{transform:rotate(180deg);color:var(--ink)}

/* provider dropdown panel */
.provider-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);
  padding:6px;
  max-height:360px;overflow-y:auto;
  z-index:30;
  animation:ddPop .14s var(--ease-out);
}
@keyframes ddPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.provider-panel[hidden]{display:none}
.provider-divider{height:1px;background:var(--rule);margin:4px 6px}
.provider-opt{
  display:flex;align-items:center;gap:10px;
  width:100%;height:40px;padding:0 14px;
  border-radius:10px;background:transparent;border:0;
  font-weight:700;font-size:13.5px;color:var(--ink-2);
  text-align:left;cursor:pointer;
  transition:background .12s, color .12s;
}
.provider-opt .opt-count{
  margin-left:auto;
  font-size:11px;font-weight:900;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.provider-opt:hover{background:var(--paper-2);color:var(--ink)}
.provider-opt.selected{background:var(--ink);color:#fff}
.provider-opt.selected .opt-count{color:rgba(255,255,255,.6)}

.big-search-wrap{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:5px 5px 5px 20px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 0 var(--rule);
  transition:border-color .15s, box-shadow .15s;
}
.big-search-wrap:focus-within{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(21,21,94,.08);
}
.big-search-wrap .icon{
  width:18px;height:18px;color:var(--ink-soft);flex-shrink:0;
}
.big-search-wrap input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:14px;font-weight:600;color:var(--ink);height:42px;
  min-width:0;
}
.big-search-wrap input::placeholder{color:var(--ink-soft);font-weight:500}
.big-search-wrap .kbd{
  font-size:11px;font-weight:800;color:var(--ink-soft);
  background:var(--paper-2);padding:5px 9px;border-radius:7px;letter-spacing:.04em;
  flex-shrink:0;
}
.big-search-wrap .filter-btn{
  height:36px;padding:0 18px;border-radius:var(--r-card);
  background:var(--ink);color:#fff;
  font-weight:900;font-size:12.5px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  transition:background .15s;
}
.big-search-wrap .filter-btn svg{width:13px;height:13px}
.big-search-wrap .filter-btn:hover{background:var(--ink-2)}

/* ============================================================
   08b · LOBBY GAMES GRID — active result set, smaller landscape cards
   ============================================================ */
.lobby-games{margin-top:22px}
.lg-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:14px;
}
.lg-title{
  margin:0;font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--ink);
}
.lg-meta{
  font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:5px 10px;border-radius:var(--r-pill);
  background:var(--paper-2);
}
.lg-more{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:7px;
  font-weight:900;font-size:12.5px;color:var(--ink);
  cursor:pointer;
  transition:color .15s, gap .15s;
}
.lg-more svg{width:14px;height:14px;flex-shrink:0}
.lg-more:hover{color:var(--red);gap:10px}

.lg-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
}
.lg-card{
  position:relative;
  aspect-ratio:1.6/1;
  border-radius:var(--r-tile);
  overflow:hidden;
  background:var(--paper-2);
  cursor:pointer;
  transition:transform .18s var(--ease-out), box-shadow .18s;
}
.lg-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.lg-img{width:100%;height:100%;object-fit:cover;display:block}

.lg-tag{
  position:absolute;top:8px;left:8px;z-index:2;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:#fff;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.25);
}
.lg-tag.t-yellow {background:var(--yellow); color:var(--ink)}
.lg-tag.t-red    {background:var(--red);    color:#fff}
.lg-tag.t-magenta{background:var(--magenta); color:#fff}
.lg-tag.t-cyan   {background:var(--cyan);   color:var(--ink)}

/* lg-card uses the shared .game-overlay pattern (fav · play · demo · title · publisher).
   These overrides tune the sizes down for the smaller landscape card. The g-title is
   single-line clamped here (the card is too small for 2 lines without clipping the publisher). */
.lg-card .game-overlay{padding:8px 10px}
.lg-card .game-overlay .fav{width:26px;height:26px;top:8px;right:8px}
.lg-card .game-overlay .fav svg{width:12px;height:12px}
.lg-card .game-overlay .g-mid{gap:4px;padding:0 6px}
.lg-card .game-overlay .g-play{width:40px;height:40px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -2px 5px rgba(150,95,0,.32), 0 6px 14px -4px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.12), 0 0 18px -6px rgba(255,204,0,.6);margin-bottom:0}
.lg-card .game-overlay .g-play svg{width:19px;height:19px;margin-left:2px}
.lg-card .game-overlay .g-demo{font-size:10.5px;text-underline-offset:2px}
.lg-card .game-overlay .g-title{
  font-size:11.5px;line-height:1.15;margin-top:0;
  -webkit-line-clamp:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  width:100%;
}
.lg-card .game-overlay .g-bot{font-size:9.5px;letter-spacing:.06em;margin-top:0}

/* empty-state shown when the live search has no matches */
.lg-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:48px 24px;
  border:1px dashed var(--rule);border-radius:var(--r-card);
  background:var(--paper);text-align:center;
}
.lg-empty[hidden]{display:none}
.lg-empty svg{width:32px;height:32px;color:var(--ink-soft);margin-bottom:4px}
.lg-empty-title{font-size:15px;font-weight:900;color:var(--ink)}
.lg-empty-sub{font-size:12.5px;font-weight:600;color:var(--ink-soft)}

/* "Load more" button — pill, hairline, navy ink */
.lg-load{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:auto;min-height:46px;margin:14px auto 0;padding:0 30px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),linear-gradient(180deg,#FFE588 0%,#FFCC00 52%,#E2A600 100%);
  border:1px solid rgba(255,236,150,.65);
  border-radius:var(--r-pill);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 14px rgba(160,98,0,.3), 0 10px 22px -10px rgba(255,204,0,.6);
  font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:#101049;cursor:pointer;
  transition:transform .15s, filter .15s;
}
.lg-load:hover{transform:translateY(-2px);filter:saturate(1.05) brightness(1.03)}
.lg-load:active{transform:translateY(1px)}
.lg-load .lg-ico{display:inline-flex;width:.95em;height:.95em}
.lg-load .lg-ico svg{width:100%;height:100%}
.lobby-games{text-align:center}
.lg-load-meta{font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(16,16,73,.65)}

/* ============================================================
   09 · SECTION HEADS
   ============================================================ */
.sec{display:flex;flex-direction:column;gap:16px}
.sec-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sec-head .ico{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  flex-shrink:0;
}
.sec-head .ico.t-red{background:var(--red)}
.sec-head .ico.t-yellow{background:var(--yellow);color:var(--ink)}
.sec-head .ico.t-cyan{background:var(--cyan);color:var(--ink)}
.sec-head .ico.t-magenta{background:var(--magenta)}
.sec-head .ico.t-purple{background:var(--purple)}
.sec-head .ico.t-navy{background:var(--ink)}
.sec-head .ico.t-green{background:var(--green)}
.sec-head .ico svg{width:26px;height:26px;font-size:26px}
.sec-head h3{margin:0;font-size:var(--fs-h3);font-weight:900;letter-spacing:-.01em}
/* generic LIVE pill — reusable wherever a "live status" signal is needed */
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--red);color:#fff;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  flex-shrink:0;
}
.live-pill .lp-dot{
  width:6px;height:6px;border-radius:50%;background:#fff;
  animation:pulseDot 1.5s infinite;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
}
/* desktop-only LIVE pill modifier — hidden on mobile */
@media (max-width: 767px){
  .live-pill--desktop{display:none}
}
.sec-head .more{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  font-weight:800;font-size:13px;color:var(--ink);cursor:pointer;
}
.sec-head .more:hover{color:var(--yellow)}
.sec-head .more .count{
  background:var(--ink);color:#fff;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:900;
}
.sec-head .nav-arrows{display:flex;gap:6px;margin-left:14px}
.sec-head .nav-arrows button{
  width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .15s, color .15s, border-color .15s, transform .15s, opacity .2s;
}
.sec-head .nav-arrows button:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-1px)}
.sec-head .nav-arrows button:disabled{opacity:.35;cursor:not-allowed;transform:none}
.sec-head .nav-arrows svg{width:14px;height:14px}

/* ============================================================
   10 · GAME ROW CAROUSEL (scroll-snap)
   ============================================================ */
.row-wrap{position:relative}
.row-wrap::before,
.row-wrap::after{
  content:'';position:absolute;top:0;bottom:8px;width:32px;
  pointer-events:none;z-index:2;
  transition:opacity .2s;
}
.row-wrap::before{left:-4px;background:linear-gradient(90deg, #030418, rgba(3,4,24,0));opacity:0}
.row-wrap::after{right:-4px;background:linear-gradient(-90deg, #030418, rgba(3,4,24,0));opacity:1}
.row-wrap.at-start::before{opacity:0}
.row-wrap.at-end::after{opacity:0}
.row-wrap:not(.at-start)::before{opacity:1}

.game-row, .rtp-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 72px) / 7);
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 4px 8px;
}

/* originals row — 4 visible on desktop, larger cards */
.originals{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 42px) / 4);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 4px 8px;
}
.orig-card{
  scroll-snap-align:start;
  aspect-ratio:1.6/1;border-radius:var(--r-card);
  color:#fff;position:relative;overflow:hidden;cursor:pointer;
  background:var(--ink);                  /* fallback if image fails */
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.orig-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.orig-card .badge{
  position:absolute;top:14px;right:14px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px);
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  z-index:5;
}

/* ============================================================
   GAME TILES — image-first, hover reveals all details
   Used by: New Releases, Bonus Buy, Live RTP rows
   ============================================================ */
.game{
  scroll-snap-align:start;
  border-radius:var(--r-tile);
  position:relative;overflow:hidden;cursor:pointer;
  aspect-ratio:.78/1;
  background:var(--ink);                      /* fallback while image loads */
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.game:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* image fills any card edge-to-edge */
.game-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* tag pill — always visible top-left of game tiles */
.game .tag{
  position:absolute;top:10px;left:10px;z-index:6;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--ink);
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.game .tag.hot{background:var(--red)}
.game .tag.new{background:var(--magenta)}
.game .tag.exc{background:var(--purple)}
.game .tag.buy{background:var(--ink);color:var(--yellow)}

/* RTP pill — always visible top-left on RTP cards.
   Uses --yellow + navy text because RTP % is an amount-style indicator
   (yellow is the brand "amount counter" colour). */
.rtp-card .rtp-pct{
  position:absolute;top:10px;left:10px;z-index:6;
  background:var(--yellow);color:var(--brand-navy);
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:900;
  display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.rtp-card .rtp-pct svg{width:11px;height:11px}

/* hover-reveal overlay (works for .game and .orig-card) */
.game-overlay{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;
  padding:12px;
  background:linear-gradient(180deg, rgba(14,14,69,.55) 0%, rgba(14,14,69,.45) 40%, rgba(14,14,69,.85) 100%);
  opacity:0;
  transition:opacity .2s var(--ease-out);
}
.game:hover .game-overlay,
.game:focus-within .game-overlay,
.orig-card:hover .game-overlay,
.orig-card:focus-within .game-overlay,
.lg-card:hover .game-overlay,
.lg-card:focus-within .game-overlay{opacity:1}

/* HEART — absolute top-right, doesn't compete with the always-visible tag at top-left */
.game-overlay .fav{
  position:absolute;top:12px;right:12px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .15s, color .15s, transform .15s;
}
.game-overlay .fav:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}
.game-overlay .fav.on{background:var(--red);color:#fff}
.game-overlay .fav svg{width:14px;height:14px}

/* CENTER STACK — play button → Demo link → game title */
.game-overlay .g-mid{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  padding:0 8px;
}
.game-overlay .g-play{
  width:54px;height:54px;border-radius:50%;
  /* glossy brand-gold play button with a navy triangle — mirrors the Sign Up
     button, ties to the crown / 450% gold, and leaves red for the main CTA */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #FFE588 0%, #FFCC00 52%, #E2A600 100%);
  color:#1F44CC;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -3px 7px rgba(150,95,0,.35),
    0 8px 18px -4px rgba(0,0,0,.5),
    0 0 0 5px rgba(255,255,255,.12),
    0 0 22px -6px rgba(255,204,0,.6);
  transition:transform .15s var(--ease-out), box-shadow .15s;
  margin-bottom:2px;
}
.game-overlay .g-play:hover{
  transform:scale(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -3px 7px rgba(150,95,0,.35),
    0 10px 24px -4px rgba(0,0,0,.55),
    0 0 0 5px rgba(255,255,255,.2),
    0 0 28px -4px rgba(255,204,0,.78);
}
.game-overlay .g-play:active{transform:scale(.98)}
.game-overlay .g-play svg{width:28px;height:28px;margin-left:3px}

.game-overlay .g-demo{
  color:var(--yellow);font-weight:900;font-size:13px;letter-spacing:.04em;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.game-overlay .g-demo:hover{color:#fff}

/* TITLE — sits between Demo link and provider, spotlight position */
.game-overlay .g-title{
  text-align:center;
  color:#fff;font-size:14px;font-weight:900;line-height:1.15;letter-spacing:-.005em;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:2px;
}

/* PROVIDER — bottom-center */
.game-overlay .g-bot{
  text-align:center;
  color:rgba(255,255,255,.85);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* originals get a slightly larger play button + title since the card is bigger */
.orig-card .game-overlay .g-title{font-size:clamp(18px, 2vw, 24px);line-height:1.05;margin-top:4px}
.orig-card .game-overlay .g-play{width:64px;height:64px}
.orig-card .game-overlay .g-play svg{width:32px;height:32px;margin-left:3px}
.rtp-card .fav{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s, transform .15s}
.rtp-card .fav:hover{background:rgba(0,0,0,.55);transform:scale(1.08)}
.rtp-card .fav svg{width:14px;height:14px}

/* ============================================================
   11 · DAILY PROMO
   ============================================================ */
.daily{
  background:var(--ink);color:#fff;
  border-radius:var(--r-card);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.daily-main{
  display:grid;
  grid-template-columns:auto 1fr auto auto;   /* mascot | text | countdown | CTA */
  align-items:center;gap:28px;
  padding:22px 32px 22px 24px;
  min-height:140px;
}
/* diamond mascot — dedicated LEFT column, contained height, no overlap */
.daily .daily-mascot{
  position:relative;
  height:170px;width:auto;
  object-fit:contain;object-position:center center;
  pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
  align-self:center;
}

/* live ticker — scrolling recent winners */
.live-ticker{
  display:flex;align-items:center;gap:14px;
  padding:10px 24px;
  background:rgba(0,0,0,.28);
  border-top:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  font-size:12.5px;
}
.lt-label{
  display:inline-flex;align-items:center;gap:7px;
  flex-shrink:0;
  font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);
}
.lt-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
  animation:pulseDot 1.5s infinite;
  box-shadow:0 0 0 3px rgba(237,27,46,.25);
}
.lt-rail{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.lt-track{
  display:inline-flex;align-items:center;
  gap:40px;
  white-space:nowrap;
  animation:tickerScroll 50s linear infinite;
  will-change:transform;
}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
.lt-track:hover{animation-play-state:paused}
.lt-item{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.85);font-weight:700}
.lt-item .pl{color:#fff;font-weight:900}
.lt-item .won{opacity:.6}
.lt-item .amt{color:var(--yellow);font-weight:900;font-variant-numeric:tabular-nums}
.lt-item .on{opacity:.55}
.lt-item .gm{
  color:var(--yellow);font-weight:800;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
  transition:color .15s;
}
.lt-item .gm:hover{color:#fff}
@media (prefers-reduced-motion: reduce){
  .lt-track{animation:none}
}
.daily .d-left{position:relative;z-index:2;min-width:0}
.daily .d-left .lbl{font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px;display:block}
/* LIVE pill — anchored to the card's top-right corner */
.daily > .live-pill{
  position:absolute;
  top:18px;right:22px;
  z-index:6;
}
.daily .d-left h3{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.02em;line-height:1}
.daily .d-left p{margin:6px 0 0;font-size:14px;font-weight:600;opacity:.85;max-width:540px}
.daily .d-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px}
.daily .d-center .hurry{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.daily .d-time{display:flex;gap:8px}
.daily .d-time .u{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.1);border-radius:10px;padding:8px 14px;min-width:54px}
.daily .d-time .n{font-size:24px;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.daily .d-time .s{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-top:2px}
.daily .d-cta{position:relative;z-index:2}
.daily .d-cta button{
  height:52px;padding:0 28px;border-radius:var(--r-pill);
  background:var(--red);color:#fff;font-weight:900;font-size:14px;
  box-shadow:0 6px 0 -2px rgba(200,0,26,.32);
  transition:transform .15s, box-shadow .15s;
}
.daily .d-cta button:hover{transform:translateY(-1px)}
.daily .d-cta button:active{transform:translateY(2px);box-shadow:0 3px 0 -2px rgba(200,0,26,.32)}

/* ============================================================
   12 · NATIONAL TOURNAMENT — featured monthly branded event
   ============================================================ */
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.3)}}

.np-tournament{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  background:var(--paper);                              /* light brand canvas — no gradient */
  border:1px solid var(--rule);
  color:var(--ink);
  padding:22px 28px 22px 30px;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:24px;
  min-height:360px;
  isolation:isolate;
}

/* lion mascot — position adapts to sidebar state so it stays visually balanced
   inside the info column whether the side nav is open (narrower card) or
   collapsed (wider card). */
.np-tournament .npt-mascot{
  position:absolute;pointer-events:none;z-index:1;
  height:100%;width:auto;
  left:47%;top:0;bottom:0;             /* sidebar OPEN — wider info column space, lion sits at 47% */
  transform:translateX(-50%);
  object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 18px 28px rgba(21,21,94,.22));
}
.collapsed .np-tournament .npt-mascot{
  left:42%;                             /* sidebar COLLAPSED — card is wider, lion shifts left to compensate */
}

.npt-info{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  min-width:0;
}
.npt-info > *{position:relative;z-index:2}
/* full-width separator line sits BEHIND the lion */
.npt-info > .npt-divider{display:none}
.npt-status{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.npt-pill{
  background:var(--yellow);color:var(--ink);            /* yellow highlight — same on either theme */
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:900;letter-spacing:.14em;
}
.npt-dates{color:var(--ink-soft);font-weight:800}
.npt-title{
  margin:0;
  font-size:clamp(20px, 2.2vw, 30px);font-weight:900;letter-spacing:-.025em;line-height:1;
  color:var(--ink);
  text-wrap:balance;
}
.npt-title .npt-sub{color:var(--red);font-weight:900}   /* red brand voice accent on light */
.npt-prize{display:flex;flex-direction:column;gap:5px}
.npt-prize .lbl{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.npt-prize .val{
  font-size:clamp(24px, 2.6vw, 33px);font-weight:900;letter-spacing:-.025em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}

/* countdown — paper-2 blocks with hairline borders */
.npt-countdown{display:flex;gap:8px}
.npt-countdown .u{
  display:flex;flex-direction:column;align-items:center;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:12px;padding:9px 11px;
  min-width:52px;
}
.npt-countdown .n{
  font-size:clamp(17px, 2vw, 22px);font-weight:900;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.npt-countdown .s{
  font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:3px;
}

/* conditions row — separator is a separate .npt-divider element above */
.npt-conditions{
  display:flex;gap:20px;flex-wrap:wrap;
}
.npt-conditions .cond{display:flex;flex-direction:column;gap:3px}
.npt-conditions .cond .lbl{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.npt-conditions .cond .val{font-size:14px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}

/* primary CTA — navy filled on light bg (high contrast) */
.npt-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  height:44px;padding:0 26px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;
  font-weight:900;font-size:15px;letter-spacing:-.005em;
  border:0;cursor:pointer;white-space:nowrap;
  box-shadow:0 8px 0 -2px rgba(21,21,94,.25);
  transition:transform .15s var(--ease-out), box-shadow .15s, background .15s;
}
.npt-cta:hover{transform:translateY(-2px);box-shadow:0 10px 0 -2px rgba(21,21,94,.28);background:var(--ink-2)}
.npt-cta:active{transform:translateY(2px);box-shadow:0 4px 0 -2px rgba(21,21,94,.25)}
.npt-cta svg{width:16px;height:16px}
/* mobile-only CTA — hidden by default, shown after leaderboard on stacked layouts */
.npt-cta-mobile{display:none}

/* RIGHT: leaderboard panel — light theme */
.npt-leaderboard{
  position:relative;z-index:3;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:18px;
  padding:14px 14px 11px;
  display:flex;flex-direction:column;gap:7px;
}
.npt-lb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px 9px;
  border-bottom:1px solid var(--rule);
}
.npt-lb-head h4{
  margin:0;font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.npt-live-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--red);color:#fff;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
.npt-live-tag::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#fff;
  animation:pulseDot 1.5s infinite;
}
.npt-lb-cols{
  display:grid;
  grid-template-columns:36px 1fr 80px 80px;
  gap:10px;
  padding:4px 14px;
  font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.npt-lb-cols .num{text-align:right}
.npt-lb-rows{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:5px;
  max-height:240px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:2px;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  transition:scrollbar-color .18s ease;
}
.npt-lb-rows.is-scrolling{scrollbar-color:rgba(255,255,255,.32) transparent}
.npt-lb-rows::-webkit-scrollbar{width:6px}
.npt-lb-rows::-webkit-scrollbar-track{background:transparent}
.npt-lb-rows::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.npt-lb-rows.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}
.npt-lb-rows li{
  display:grid;
  grid-template-columns:36px 1fr 80px 80px;
  gap:10px;align-items:center;
  min-height:44px;
  padding:8px 14px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:12px;
  font-size:12.5px;font-weight:800;
  transition:background .15s, border-color .15s;
}
.npt-lb-rows li:hover{background:var(--paper-3);border-color:var(--rule-2)}
.npt-lb-rows .rank{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-size:11px;font-weight:900;
  background:var(--paper-3);color:var(--ink-soft);
}
.npt-lb-rows .r1 .rank{background:var(--yellow);color:var(--ink);box-shadow:0 0 0 2px rgba(255,204,0,.25)}
.npt-lb-rows .r2 .rank{background:#D6D6D6;color:var(--ink)}
.npt-lb-rows .r3 .rank{background:#C8843B;color:#fff}
.npt-lb-rows .player{color:var(--ink);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npt-lb-rows .points{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.npt-lb-rows .prize{text-align:right;color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums}
/* ============================================================
   12B · LATEST WINS — v3 BRIGHT: pastel gradient board with
   white-glass cards on top + dark navy ticker for contrast
   ============================================================ */
.np-wins-board{
  position:relative;
  border-radius:var(--r-card);
  background:var(--paper);                    /* brand canvas — clean white */
  border:1px solid var(--rule);
  padding:20px;
  isolation:isolate;
  overflow:hidden;
}

.np-wins-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  position:relative;
  z-index:2;
}

/* card on white — brand pattern: paper-2 surface with hairline border */
.np-glass-card{
  position:relative;overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:18px;
  padding:24px 26px;
  color:var(--ink);
  min-height:200px;
  display:flex;flex-direction:column;
  transition:background .15s, transform .15s var(--ease-out), box-shadow .2s, border-color .15s;
}
.np-glass-card:hover{
  background:var(--paper-3);
  border-color:var(--rule-2);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -10px rgba(21,21,94,.18);
}

/* diamond mascot — bottom-right watermark; very subtle on light cards */
.ngc-mascot{
  position:absolute;
  right:-12%;bottom:-10%;
  height:88%;width:auto;
  object-fit:contain;
  z-index:1;
  opacity:.32;
  filter:drop-shadow(0 6px 14px rgba(21,21,94,.18));
  pointer-events:none;
}
.np-glass-card:nth-child(1) .ngc-mascot{
  right:-7%;
  bottom:-18%;
  height:105%;
  opacity:.38;
}
.np-glass-card:nth-child(2) .ngc-mascot{
  right:-5%;
  bottom:-24%;
  height:96%;
  opacity:.26;
  transform:rotate(10deg);
}
.np-glass-card:nth-child(3) .ngc-mascot{
  right:-12%;
  bottom:-10%;
  height:88%;
  opacity:.32;
}
.np-glass-card::after{
  content:'';
  position:absolute;
  right:-40px;
  top:-42px;
  width:132px;
  height:132px;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,204,0,.18), transparent 62%);
}
.np-glass-card:nth-child(2)::after{background:radial-gradient(circle, rgba(237,27,46,.16), transparent 62%)}
.np-glass-card:nth-child(3)::after{background:radial-gradient(circle, rgba(0,196,210,.14), transparent 62%)}

.ngc-label{
  position:relative;z-index:2;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.ngc-value{
  position:relative;z-index:2;
  margin:10px 0 auto;
  font-size:clamp(28px, 3.2cqw, 42px);
  font-weight:900;letter-spacing:-.025em;line-height:1;
  color:var(--ink);                                  /* dark navy on light glass — premium */
  font-variant-numeric:tabular-nums;
}
.ngc-meta{
  position:relative;z-index:2;
  margin-top:14px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  line-height:1.4;
}
.ngc-pl{color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums}
.ngc-game{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ngc-game:hover{color:var(--ink)}

.ngc-cta{
  position:relative;z-index:2;
  align-self:flex-start;
  margin-top:14px;
  display:inline-flex;align-items:center;gap:10px;
  height:44px;padding:0 22px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;                  /* dark CTA on white glass — high contrast */
  font-weight:900;font-size:13px;
  border:0;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 0 -2px rgba(21,21,94,.25);
  transition:transform .15s var(--ease-out), box-shadow .15s;
}
.ngc-cta:hover{transform:translateY(-1px);box-shadow:0 8px 0 -2px rgba(21,21,94,.28);background:var(--ink-2)}
.ngc-cta:active{transform:translateY(2px);box-shadow:0 3px 0 -2px rgba(21,21,94,.25)}
.ngc-cta svg{width:13px;height:13px}

/* NAVY ticker strip — flat dark, contrasts the pastel section bg */
.np-wins-ticker{
  position:relative;z-index:2;
  margin-top:14px;
  background:var(--ink);                     /* flat — no gradient */
  border:0;
  border-radius:14px;
  padding:10px 18px;
}

/* responsive */
@media (max-width: 1023px){
  .np-wins-grid{grid-template-columns:1fr 1fr;gap:12px}
  .np-glass-card{min-height:0;padding:22px 24px}
  .np-glass-card:nth-child(3){grid-column:1 / -1}      /* span full width on 3rd row */
}
@media (max-width: 567px){
  .np-wins-board{padding:14px}
  .np-wins-grid{grid-template-columns:1fr}
  .np-glass-card:nth-child(3){grid-column:auto}
  .ngc-value{font-size:32px}
}

/* ============================================================
   12C · LATEST WINS v2 (archived) — unified block layout
   ============================================================ */
/* ============================================================
   12D · LATEST WINS v1 (archived) — 3 stat cards on different colors
   ============================================================ */
.np-wins{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  background:linear-gradient(135deg, #1F1F75, var(--ink-deep));
  color:#fff;
  padding:36px 40px;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  min-height:340px;
  isolation:isolate;
}

/* diamond mascot — right side, large, bleeds off right edge */
.np-wins .npw-mascot{
  position:absolute;pointer-events:none;z-index:1;
  right:-8%;top:50%;transform:translateY(-50%);
  height:120%;width:auto;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
}

.npw-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:24px;
  max-width:65%;
}

/* HERO: Total Jackpot */
.npw-hero{display:flex;flex-direction:column;gap:8px}
.npw-eb{
  font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);
}
.npw-hero-value{
  font-size:clamp(40px, 5vw, 60px);
  font-weight:900;letter-spacing:-.025em;line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}

/* SECONDARY: 2-up stats grid with divider above */
.npw-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.15);
}
.npw-stat{display:flex;flex-direction:column;gap:4px}
.npw-stat-label{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.npw-stat-value{
  font-size:clamp(24px, 2.6vw, 32px);
  font-weight:900;letter-spacing:-.02em;line-height:1;
  color:var(--yellow);
  font-variant-numeric:tabular-nums;
  margin:4px 0 2px;
}
.npw-stat-meta{
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7);line-height:1.4;
}
.npw-pl{color:#fff;font-weight:900;font-variant-numeric:tabular-nums}
.npw-game{color:var(--yellow);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.npw-game:hover{color:#fff}

/* CTA — same pillow-press treatment as the rest of the site */
.npw-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 28px;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);
  font-weight:900;font-size:14px;
  border:0;cursor:pointer;white-space:nowrap;
  box-shadow:0 7px 0 -2px rgba(0,0,0,.22);
  transition:transform .15s var(--ease-out), box-shadow .15s;
}
.npw-cta:hover{transform:translateY(-1px);box-shadow:0 9px 0 -2px rgba(0,0,0,.25)}
.npw-cta:active{transform:translateY(2px);box-shadow:0 4px 0 -2px rgba(0,0,0,.22)}
.npw-cta svg{width:14px;height:14px}

/* tablet — stack the supporting stats, mascot fades to corner */
@media (max-width: 1023px){
  .np-wins{padding:28px;min-height:0}
  .npw-content{max-width:100%}
  .np-wins .npw-mascot{
    right:-22%;height:90%;opacity:.35;
  }
  .npw-stats{gap:16px}
}
@media (max-width: 567px){
  .npw-stats{grid-template-columns:1fr;gap:14px;padding-top:16px}
}

/* ============================================================
   12C · LATEST WINS v1 (archived) — 3 stat cards
   CSS kept dormant; uncomment HTML to restore.
   ============================================================ */
.win-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;     /* equal width across all 3 */
  gap:16px;
}
.win-card{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  padding:26px 28px;
  color:#fff;
  min-height:200px;
  display:flex;flex-direction:column;
  isolation:isolate;
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.win-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* 4 brand colors total — Red / Navy / Magenta cards + Purple ticker below */
.win-jackpot{background:linear-gradient(135deg, var(--red),     var(--red-deep))}
.win-month  {background:var(--ink)}
.win-daily  {background:linear-gradient(135deg, var(--magenta), #B5005F)}

.wc-label{
  font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);
  position:relative;z-index:2;
}
.win-jackpot .wc-label{color:#fff;opacity:.9}
.wc-value{
  margin:10px 0 auto;
  font-size:clamp(32px, 4vw, 50px);
  font-weight:900;letter-spacing:-.025em;line-height:1;
  color:var(--yellow);
  font-variant-numeric:tabular-nums;
  position:relative;z-index:2;
}
.win-jackpot .wc-value{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}

.wc-meta{
  position:relative;z-index:2;
  margin-top:14px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7);
  line-height:1.4;
}
.wc-player{color:#fff;font-weight:900;font-variant-numeric:tabular-nums}
.wc-game{color:var(--yellow);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wc-game:hover{color:#fff}

.wc-cta{
  align-self:flex-start;
  margin-top:14px;
  display:inline-flex;align-items:center;gap:10px;
  height:44px;padding:0 22px;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);
  font-weight:900;font-size:13px;
  border:0;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 0 -2px rgba(0,0,0,.22);
  transition:transform .15s var(--ease-out), box-shadow .15s;
  position:relative;z-index:2;
}
.wc-cta:hover{transform:translateY(-1px);box-shadow:0 8px 0 -2px rgba(0,0,0,.25)}
.wc-cta:active{transform:translateY(2px);box-shadow:0 3px 0 -2px rgba(0,0,0,.22)}
.wc-cta svg{width:13px;height:13px}

/* diamond mascot — shifted down (crown visible at top) + pushed right (clears text) */
.win-card .wc-mascot{
  position:absolute;pointer-events:none;z-index:1;
  right:-25%;top:55%;transform:translateY(-50%);
  height:96%;width:auto;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.4));
}

/* live winners ticker — navy (matches the dashboard's workhorse backdrop;
   the shape difference vs card 2 gives it its own visual identity) */
.win-ticker{
  background:linear-gradient(135deg, var(--ink), var(--ink-deep));
  color:#fff;
  border-radius:var(--r-card);
  border-top:0;
  margin-top:0;
}

/* tablet + mobile — stack stat cards */
@media (max-width: 1023px){
  .win-stats{grid-template-columns:1fr;gap:12px}
  .win-card{min-height:0;padding:22px 24px}
  .wc-value{font-size:clamp(32px, 8vw, 44px)}
}

/* ============================================================
   13 · LIVE BETS — bright glass-on-tinted-gradient activity feed
   ============================================================ */
.lb-board{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  background:var(--paper);                    /* brand canvas — clean white */
  border:1px solid var(--rule);
  padding:14px;
  isolation:isolate;
}
/* LIVE pill anchored to the board's top-right corner */
.lb-board .lb-live{
  position:absolute;
  top:14px;right:14px;
  z-index:5;
}

/* 3 tabs along the top */
.lb-tabs{
  display:flex;gap:6px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-pill);
  padding:4px;
  width:fit-content;
  margin-bottom:10px;
}
.lb-tab{
  height:34px;padding:0 16px;border-radius:var(--r-pill);
  background:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:900;font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-soft);
  border:0;cursor:pointer;white-space:nowrap;
  transition:background .15s, color .15s;
}
.lb-tab .np-icon{width:14px;height:14px;opacity:.72}
.lb-tab.on .np-icon{opacity:1}
.lb-tab:hover{color:var(--ink)}
.lb-tab.on{background:var(--ink);color:#fff;box-shadow:0 4px 12px -4px rgba(21,21,94,.35)}

/* scrollable rows wrapper */
.lb-scroll{
  overflow:auto;
  max-height:356px;
  padding-right:2px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  transition:scrollbar-color .18s ease;
}
.lb-scroll.is-scrolling{scrollbar-color:rgba(255,255,255,.32) transparent}
.lb-scroll::-webkit-scrollbar{width:6px;height:6px}
.lb-scroll::-webkit-scrollbar-track{background:transparent}
.lb-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.lb-scroll.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}

/* table — each row is its own white-glass card */
.lb-table{
  width:100%;border-collapse:separate;border-spacing:0 5px;
  min-width:680px;
}
.lb-table th{
  text-align:left;
  font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:4px 14px 7px;
  background:transparent;
}
.lb-table th.num{text-align:right}

.lb-table td{
  padding:12px 14px;
  font-size:13px;font-weight:700;color:var(--ink);
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:background .15s, border-color .15s;
}
.lb-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.lb-table td:first-child{
  border-left:1px solid var(--rule);
  border-top-left-radius:12px;border-bottom-left-radius:12px;
}
.lb-table td:last-child{
  border-right:1px solid var(--rule);
  border-top-right-radius:12px;border-bottom-right-radius:12px;
  font-weight:900;
}
.lb-table tr:hover td{background:var(--paper-3);border-color:var(--rule-2)}

/* game cell: image thumbnail + name */
.lb-game{display:inline-flex;align-items:center;gap:10px}
.lb-game .thm{
  width:28px;height:28px;border-radius:7px;
  background:var(--paper-2);
  overflow:hidden;flex-shrink:0;
}
.lb-game .thm img{width:100%;height:100%;object-fit:cover;display:block}
.lb-game .nm{font-weight:900;color:var(--ink);cursor:pointer}
.lb-game .nm:hover{color:var(--red)}

.lb-time{color:var(--ink-soft);font-weight:700;font-variant-numeric:tabular-nums}
.lb-user{color:var(--ink-soft);font-weight:800;font-variant-numeric:tabular-nums}

/* multiplier styling — red brand accent if winning, ink-soft if x0 */
.lb-mult{color:var(--red);font-weight:900}
.lb-mult.zero{color:var(--ink-soft);font-weight:700}

/* payout styling — red coin if won, neutral if lost */
.lb-pay{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;font-weight:900}
.lb-pay.zero{color:var(--ink-soft);font-weight:700}
.lb-pay .coin{
  width:18px;height:18px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;
}
.lb-pay.zero .coin{background:var(--rule-2);color:var(--ink-soft)}

/* ============================================================
   14 · ABOUT
   ============================================================ */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:36px 4px;align-items:stretch}
.about .left{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.about h2{margin:0 0 14px;font-size:var(--fs-h2);font-weight:900;letter-spacing:-.02em;line-height:1.05}
.about p{margin:0 0 14px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.about p:last-child{margin-bottom:0}
.about a{color:var(--red);font-weight:800;border-bottom:1.5px solid var(--red)}
.about .facts{display:flex;flex-direction:column;gap:14px}
.fact{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:flex-start;padding:18px;border-radius:var(--r-tile);background:var(--paper);border:1px solid var(--rule);transition:transform .2s, border-color .2s}
.fact:hover{transform:translateY(-2px);border-color:var(--rule-2)}
.fact .ico{width:48px;height:48px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fact .ico svg{width:22px;height:22px}
.fact .ico.t-red{background:var(--red)}
.fact .ico.t-cyan{background:var(--cyan);color:var(--ink)}
.fact .ico.t-purple{background:var(--purple)}
.fact .ico.t-yellow{background:var(--yellow);color:var(--ink)}
.fact .ico.t-magenta{background:var(--magenta)}
.fact .ico.t-ink,
.fact .ico.t-navy{background:var(--ink)}
.fact .ico.t-green{background:var(--green)}
.fact .ico svg{width:24px;height:24px;font-size:24px}
.fact h4{margin:0 0 4px;font-size:15px;font-weight:900;color:var(--ink)}
.fact p{margin:0;font-size:13px;color:var(--ink-soft);font-weight:600;line-height:1.45}

/* ============================================================
   15 · BENEFIT CARDS
   ============================================================ */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit{
  border-radius:var(--r-card);
  padding:24px 28px 24px 26px;
  position:relative;overflow:hidden;
  min-height:220px;
  display:flex;flex-direction:column;
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.benefit:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.benefit > *{position:relative;z-index:2}
.benefit.b-yellow{background:var(--yellow);color:var(--ink)}
.benefit.b-cyan  {background:var(--cyan);color:var(--ink)}
.benefit.b-purple{background:var(--purple);color:#fff}
.benefit .b-eb{
  font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  opacity:.85;
}
.benefit h3{
  margin:10px 0 10px;font-size:clamp(20px,2vw,24px);font-weight:900;letter-spacing:-.02em;line-height:1.04;
  max-width:84%;text-wrap:balance;
}
.benefit .body{
  margin:0;font-size:13.5px;line-height:1.45;font-weight:600;opacity:.9;
  max-width:88%;
}
.benefit .b-foot{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:relative;z-index:3;
}
.benefit .b-cta{
  display:inline-flex;align-items:center;gap:10px;
  height:42px;padding:0 20px;border-radius:var(--r-pill);
  font-weight:900;font-size:13px;white-space:nowrap;
  box-shadow:0 5px 0 -1px rgba(0,0,0,.16);
  transition:transform .15s, box-shadow .15s;
}
.benefit .b-cta:hover{transform:translateY(-1px)}
.benefit .b-cta:active{transform:translateY(2px);box-shadow:0 2px 0 -1px rgba(0,0,0,.16)}
.benefit .b-cta svg{width:14px;height:14px;flex-shrink:0}
.benefit.b-yellow .b-cta{background:var(--ink);color:#fff}
.benefit.b-cyan   .b-cta{background:var(--ink);color:#fff}
.benefit.b-purple .b-cta{background:#fff;color:var(--ink);box-shadow:0 5px 0 -1px rgba(0,0,0,.25)}
.benefit .b-meta{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;text-align:right;
}
.benefit .spark{clip-path:var(--spark);pointer-events:none;position:absolute;z-index:1}
.benefit.b-yellow .spark.bs1{background:var(--red);width:220px;height:220px;right:-40px;top:-40px;opacity:.95}
.benefit.b-yellow .spark.bs2{background:var(--ink);width:130px;height:130px;right:36px;bottom:-40px;opacity:.95}
.benefit.b-cyan .spark.bs1  {background:var(--ink);width:220px;height:220px;right:-40px;top:-40px;opacity:.95}
.benefit.b-cyan .spark.bs2  {background:var(--red);width:110px;height:110px;right:30px;bottom:-26px;opacity:.95}
.benefit.b-purple .spark.bs1{background:var(--yellow);width:220px;height:220px;right:-40px;top:-40px;opacity:.95}
.benefit.b-purple .spark.bs2{background:var(--magenta);width:110px;height:110px;right:34px;bottom:-20px;opacity:.95}
.benefit .mascot{display:none}

/* ============================================================
   16 · FOOTER
   ============================================================ */
.footer{margin-top:12px;padding:40px 0 32px;background:var(--paper);position:relative;z-index:1}
.foot-inner{max-width:1480px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:280px repeat(5,1fr);gap:40px;align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:14px}
.foot-brand .small-logo{display:flex;align-items:center;gap:10px}
.foot-brand .small-logo .lm{width:34px;height:34px;border-radius:10px;background:var(--red);display:flex;align-items:center;justify-content:center}
.foot-brand .small-logo .lm .s{width:20px;height:20px;background:#fff;clip-path:var(--spark)}
.foot-brand .small-logo .word{font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.foot-brand .small-logo .word .dot{color:var(--red)}
.foot-brand .copy{font-size:12px;color:var(--ink-soft);font-weight:600;line-height:1.5}
.foot-brand .socials{display:flex;gap:10px;margin-top:6px}
.foot-brand .socials a{width:38px;height:38px;border-radius:10px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s, color .15s}
.foot-brand .socials a:hover{background:var(--ink);color:#fff}
.foot-brand .socials svg{width:16px;height:16px}
/* trust marks (18+ / VPN / Curaçao seal) now sit directly below the footer logo */
.foot-brand .badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.foot-brand .badges .b{
  height:38px;min-height:38px;box-sizing:border-box;
  padding:0 14px;border-radius:10px;
  background:var(--paper-2);
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:var(--ink);
}
.foot-brand .badges .b.age{background:var(--yellow);color:var(--brand-navy)}
.foot-brand .badges .b.vpn svg{width:14px;height:14px;flex-shrink:0;color:var(--red)}
.foot-brand .badges .b.seal{background:transparent;padding:0;height:38px;min-height:38px;overflow:hidden;border-radius:8px}
.foot-brand .badges .b.seal img{height:100%;width:auto;display:block}
.foot-col h5{margin:0 0 14px;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:13px;color:var(--ink-2);font-weight:600;transition:color .15s}
.foot-col a:hover{color:var(--yellow)}
.foot-bot{
  max-width:1480px;margin:28px auto 0;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:stretch;gap:18px;
}
.foot-bot .legal{font-size:11px;line-height:1.6;color:var(--ink-soft);font-weight:600;flex:1;min-width:300px}
.foot-bot .legal b{color:var(--ink);font-weight:900}
.foot-bot .badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot-bot .badges .b{
  height:38px;min-height:38px;box-sizing:border-box;
  padding:0 14px;border-radius:10px;
  background:var(--paper-2);
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:var(--ink);
}
.foot-bot .badges .b.age{background:var(--ink);color:#fff;font-size:13px;letter-spacing:.04em}
/* VPN Friendly chip — shield icon + label, same paper-2 pill */
.foot-bot .badges .b.vpn svg{width:14px;height:14px;flex-shrink:0;color:var(--red)}
/* Curaçao Gaming Authority seal — keep its native green block, no chip background */
.foot-bot .badges .b.seal{background:transparent;padding:0;height:38px;min-height:38px;overflow:hidden;border-radius:8px}
.foot-bot .badges .b.seal img{height:100%;width:auto;display:block}

/* ============================================================
   17 · FLOATING FAB PAIR — Live Chat (right) + Daily Bonus Map (left)
   Matched dark-glass pills on the same horizontal baseline. The colored
   mascot halo does all the brand work — yellow=reward, cyan=support.
   ============================================================ */
/* TEMP: hidden for now (not deleted) — remove this rule to bring them back */
.chat,
.bonus-map{display:none !important}
.chat{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:12px;
  height:48px;padding:0 56px 0 18px;     /* mascot overflows on the RIGHT */
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    var(--brand-navy-deep);
  box-shadow:
    0 12px 28px -8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  transition:transform .2s var(--ease-out), box-shadow .2s, background .2s;
}
.chat:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 34px -8px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03)),
    var(--brand-navy-deep);
}
.chat:active{transform:translateY(0)}

/* mascot — vivid cyan halo on the RIGHT edge (mirror of bonus-map's left) */
.chat .ch-mascot{
  position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.50), transparent 65%),
    linear-gradient(135deg, var(--cyan) 0%, #008B95 100%);
  box-shadow:
    0 6px 16px -4px rgba(0,196,210,.55),
    inset 0 -2px 0 rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.40);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease-out);
}
.chat:hover .ch-mascot{transform:translateY(-50%) rotate(8deg) scale(1.05)}
.chat .ch-mascot img{
  width:38px;height:38px;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.30));
}

/* two-line text — crisp, no shadow blur */
.chat .ch-text{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:3px;line-height:1;text-align:right;
}
.chat .ch-eb{
  font:800 9px/1 var(--font);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);
}
.chat .ch-title{
  font:800 13.5px/1 var(--font);
  letter-spacing:-.005em;color:#fff;
  white-space:nowrap;
}

/* DAILY BONUS MAP — left-side mirror of .chat. Same dark-glass DNA;
   only the mascot halo colour changes (gold=reward). */
.bonus-map{
  position:fixed;
  left:calc(var(--sidebar-w) + 24px);
  bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:12px;
  height:48px;padding:0 18px 0 56px;     /* mascot overflows on the LEFT */
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    var(--brand-navy-deep);
  box-shadow:
    0 12px 28px -8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  transition:transform .2s var(--ease-out), box-shadow .2s, background .2s;
}
.bonus-map:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 34px -8px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03)),
    var(--brand-navy-deep);
}
.bonus-map:active{transform:translateY(0)}

/* mascot — vivid gold halo on the LEFT edge */
.bonus-map .bm-mascot{
  position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.50), transparent 65%),
    linear-gradient(135deg, var(--yellow) 0%, #FFB300 100%);
  box-shadow:
    0 6px 16px -4px rgba(255,204,0,.55),
    inset 0 -2px 0 rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.40);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease-out);
}
.bonus-map:hover .bm-mascot{transform:translateY(-50%) rotate(-8deg) scale(1.05)}
.bonus-map .bm-mascot img{
  width:42px;height:42px;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.30));
}

/* two-line text — crisp, no shadow blur */
.bonus-map .bm-text{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;line-height:1;text-align:left;
}
.bonus-map .bm-eb{
  font:800 9px/1 var(--font);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);
}
.bonus-map .bm-title{
  font:800 13.5px/1 var(--font);
  letter-spacing:-.005em;color:#fff;
  white-space:nowrap;
}

/* collapsed sidebar — slide button left to match new gutter */
body:has(.layout.collapsed) .bonus-map{
  left:calc(var(--sidebar-w-collapsed) + 24px);
}

/* ============================================================
   17b · MOBILE BOTTOM NAV
   Hidden on desktop. At ≤1023px collects Menu, Bonuses, Casino,
   Sports, Chat into a sticky bottom rail.
   ============================================================ */
.mb-nav{display:none}
.mb-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:transparent;border:0;cursor:pointer;
  padding:8px 4px 6px;min-width:0;
  font-weight:900;font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-soft);
  transition:color .15s;
  position:relative;
}
.mb-ico{
  width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  transition:background .15s, color .15s, transform .15s;
}
.mb-ico svg{width:20px;height:20px;font-size:20px}
.mb-ico .np-icon--live{width:22px;height:22px}
.mb-label{line-height:1}
.mb-item:hover{color:var(--ink)}
.mb-item:hover .mb-ico{color:var(--ink)}
/* active (current vertical / current screen) */
.mb-item.active{color:var(--ink)}
.mb-item.active .mb-ico{background:var(--ink);color:#fff}
.mb-item.active .mb-ico svg{color:var(--yellow)}

/* ============================================================
   18 · RESPONSIVE — desktop-first cascade down
   ============================================================ */

/* Large desktop ≤ 1399px — tighten game rows, hero becomes 2-up
   so 13–15" laptops get proper breathing room for label + lion + body. */
@media (max-width: 1399px){
  .game-row, .rtp-row{grid-auto-columns:calc((100% - 60px) / 6)}
  .hero-track{grid-auto-columns:calc((100% - 16px) / 2)}
  .lg-grid{grid-template-columns:repeat(5, minmax(0, 1fr))}
}

/* Medium desktop ≤ 1199px — reduce sidebar slightly */
@media (max-width: 1199px){
  :root{--sidebar-w:248px;--header-h:78px}
  .game-row, .rtp-row{grid-auto-columns:calc((100% - 48px) / 5)}
  .originals{grid-auto-columns:calc((100% - 28px) / 3)}
  .hero-track{grid-auto-columns:calc((100% - 16px) / 2)}
  .hero-card{padding:26px;min-height:360px}
  .lg-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
}

/* Tablet ≤ 1023px — sidebar becomes drawer */
@media (max-width: 1023px){
  :root{--header-h:68px;--gutter:18px;--section-gap:22px}
  .header-nav{display:none}
  .layout{grid-template-columns:1fr}
  .layout.collapsed{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;height:100dvh;
    width:300px;max-width:88vw;
    transform:translateX(-105%);
    transition:transform .3s var(--ease-out);
    z-index:100;
    box-shadow:0 0 60px rgba(0,0,0,.3);
    overflow:visible;            /* let the close handle overhang the edge */
  }
  /* the drawer's content scrolls in here; the rail frame stays put so the
     overhanging close handle isn't clipped */
  .sb-scroll{
    display:flex;flex-direction:column;
    flex:1 1 auto;min-height:0;
    width:100%;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    /* hide the scrollbar on the touch drawer so it never paints over the
       overhanging close handle (issue: thin bar covered the button mid-scroll) */
    scrollbar-width:none;
  }
  .sb-scroll::-webkit-scrollbar{width:0;height:0;display:none}
  .layout.drawer-open .sidebar{transform:translateX(0)}
  .layout.collapsed .sidebar{
    /* on tablet, "collapsed" === closed drawer; expand fully when opened */
    width:300px;
  }
  /* mobile drawer: no logo, no auth buttons — just the full-width market switch
     + nav, switch at the very top (the old empty top band is gone). */
  .sb-market{margin:16px 22px 8px}
  .fold-edge{display:none}
  .collapsed .nav{padding-top:0}
  .collapsed .nav-section{padding:22px 22px 10px;justify-content:flex-start;font-size:10.5px;gap:10px}
  .collapsed .nav-section span:not(.line){display:inline}
  .collapsed .nav-section .line{flex:1;width:auto}
  .collapsed .nav-item{justify-content:flex-start;padding:13px 14px;gap:14px}
  .collapsed .nav-item .ni-label, .collapsed .nav-item .caret{display:flex}
  .collapsed .nav-item .badge, .collapsed .nav-item .dot-badge{position:static;padding:2px 8px;font-size:10px;letter-spacing:.04em}
  .collapsed .nav-item .dot-badge{padding:2px 9px 2px 14px}
  .collapsed .nav-item .dot-badge::before{display:block}
  .collapsed .sb-promo, .collapsed .sb-trail{display:grid}
  .collapsed .sb-trail{display:block}
  .collapsed .sidebar-foot{padding:24px 22px 22px}
  .collapsed .sidebar-foot .install{padding:10px 14px;justify-content:flex-start}
  .collapsed .sidebar-foot .install .txt{display:flex}

  /* close handle: pinned to the drawer frame, half-overhanging the right edge
     (right:-17 → 17 in / 17 out), dropped below the toggle line. As a drawer child
     it slides in/out with the rail — no separate animation. */
  .drawer-close{
    display:flex;
    top:22px;right:-17px;   /* center the 34px handle on y=39 — the drawer's Casino/Sports market-toggle line */
    opacity:0;visibility:hidden;
    transition:opacity .22s var(--ease-out),visibility .22s var(--ease-out),background .2s var(--ease-out);
  }
  /* reveal the overhanging handle only once the drawer is open, otherwise its
     17px overhang pokes past the off-screen rail and shows a sliver at the
     viewport's left edge */
  .layout.drawer-open .drawer-close{opacity:1;visibility:visible}
  /* hamburger lives in the bottom nav on mobile, not the header */
  .hamburger{display:none}
  .header .fold-btn{display:none}
  .header-logo{display:flex}
  /* vert-switch lives in the bottom nav on mobile, not the header */
  .header .vert-switch{display:none}
  /* chat FAB sits above the bottom nav on mobile */
  .chat{bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  /* bonus map button — sidebar collapses to a drawer on mobile (no horizontal
     footprint), so the button can sit flush to the left gutter; also lifts
     above the bottom nav */
  .bonus-map{left:16px;bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  /* override the body:has(.collapsed) rule on mobile */
  body:has(.layout.collapsed) .bonus-map{left:16px}

  /* SHOW the mobile bottom nav */
  .mb-nav{
    display:flex;align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--paper);
    border-top:1px solid var(--rule);
    box-shadow:0 -6px 20px -10px rgba(21,21,94,.12);
    padding:0 4px;
    padding-bottom:env(safe-area-inset-bottom, 0);
    height:calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* leave room for the bottom nav so the last section isn't covered
     (env() falls back to 0 when unsupported, so 64px is the floor) */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}

  /* hero — 2 cards visible */
  .hero-track{grid-auto-columns:calc((100% - 16px) / 2)}

  /* game rows — 4-5 visible */
  .game-row, .rtp-row{grid-auto-columns:calc((100% - 36px) / 4)}
  .originals{grid-auto-columns:calc((100% - 14px) / 2)}

  /* National Tournament — stack to single column at tablet */
  /* National Tournament — tighter stacked layout on tablet/mobile */
  .np-tournament{
    grid-template-columns:1fr;
    gap:16px;padding:20px;min-height:0;
  }
  .np-tournament::before{
    background-position:72% bottom;
    opacity:.55;
  }
  .np-tournament::after{
    background:
      linear-gradient(180deg, rgba(10,10,46,.96) 0%, rgba(10,10,46,.92) 48%, rgba(10,10,46,.70) 100%),
      radial-gradient(circle at 76% 66%, rgba(230,0,126,.18), transparent 42%),
      radial-gradient(circle at 64% 82%, rgba(0,196,210,.14), transparent 38%);
  }
  /* lion hidden completely on mobile — section reads as pure data dashboard */
  .np-tournament .npt-mascot{display:none}
  /* center all info rows on mobile so the text block balances the full-width countdown ticker below */
  .npt-info{gap:14px;text-align:center;align-items:center}
  .npt-info .npt-status{justify-content:center}
  .npt-info .npt-prize{align-items:center}
  .npt-title,
  .npt-prize .val,
  .npt-conditions .cond .val{
    text-shadow:0 2px 12px rgba(0,0,0,.45);
  }
  .npt-countdown .u{
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(12px) saturate(1.25);
    -webkit-backdrop-filter:blur(12px) saturate(1.25);
    border-color:rgba(255,255,255,.14);
  }
  /* conditions span full width, evenly distributed, content centered to match the countdown rhythm */
  .npt-conditions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    width:100%;
  }
  .npt-conditions .cond{align-items:center;text-align:center}
  .npt-conditions .cond .lbl{font-size:11px}
  .npt-conditions .cond .val{font-size:17px}
  /* hide the in-info CTA on mobile — moves to after leaderboard */
  .npt-info .npt-cta{display:none}
  /* mobile CTA shows after leaderboard, full-width pill */
  .npt-cta-mobile{
    display:inline-flex;
    align-self:stretch;
    justify-content:center;
    width:100%;
  }
  /* leaderboard tightening — only 3 rows visible on stacked layouts */
  .npt-leaderboard{
    width:100%;
    max-height:none;
    padding:14px 14px 10px;
    gap:8px;
    background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  }
  .npt-lb-rows{max-height:142px}

  /* about flips */
  .about{grid-template-columns:1fr;gap:32px;padding:24px 4px}

  /* benefits collapse to 2 → 1 */
  .benefits{grid-template-columns:repeat(2, 1fr)}
  .benefits .benefit:last-child{grid-column:span 2}

  /* daily/network tournament strip — stack content; mascot becomes a
     faded BG watermark behind the text on tablet & mobile */
  .daily-main{
    grid-template-columns:1fr;
    gap:18px;padding:32px 24px;text-align:center;
  }
  .daily .daily-mascot{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%, -50%);
    height:80%;width:auto;
    max-width:80%;
    object-fit:contain;
    margin:0;
    opacity:.18;
    z-index:0;
    pointer-events:none;
  }
  .daily .d-left,
  .daily .d-center,
  .daily .d-cta{position:relative;z-index:2}
  .daily .d-left p{margin-left:auto;margin-right:auto}
  .daily .d-cta{display:flex;justify-content:center}
  .live-ticker{padding:10px 18px;font-size:12px}

  /* footer cols */
  .foot-inner{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1}

  /* header right — compact lang */
  .lang{padding:0 12px;font-size:11.5px}
  /* hide only the dropdown chevron (direct-child svg), NOT the nested flag svg
     — ':last-of-type' was matching the flag too since it's the only svg in its span */
  .lang > svg{display:none}
}

/* Mobile ≤ 767px */
@media (max-width: 767px){
  :root{--gutter:14px;--section-gap:18px;--header-h:64px}
  .header{padding:4px 14px 0;gap:10px}

  /* product switcher — tighter on mobile, still labelled */
  .vert-switch{height:40px;padding:2px;gap:2px}
  .vs-item{height:34px;padding:0 12px;font-size:12.5px;gap:6px}
  .vs-item svg{width:14px;height:14px;font-size:14px}
  /* same optical-correction bump on mobile */
  .vs-item .np-icon--sports{width:16px;height:16px;font-size:16px}

  /* mobile header buttons — login + signup become circular icon-only */
  .lang{height:40px;padding:0 12px}
  /* flag stays visible on mobile (chevron is hidden via `.lang > svg` above) */
  .login,.signup{
    width:40px;height:40px;padding:0;
    border-radius:50%;
  }
  /* offset "pillow-press" shadow distorts circular silhouettes — replace
     with subtle ambient shadow on primary, none on secondary */
  .login{box-shadow:none}
  .signup{box-shadow:0 6px 14px -6px rgba(21,21,94,.45)}
  .login .label,.signup .label{display:none}
  .login .ico,.signup .ico{display:block;width:18px;height:18px}
  .hamburger,.fold-btn{width:40px;height:40px}
  .header-logo .logo-mark{width:33px;height:33px}
  .header-logo .logo-mark .star{width:88%;height:88%}
  .header-logo .logo-text{font-size:18px}
  .header-logo .logo-text small{display:none}

  /* main */
  .main{padding:18px 14px 80px}

  /* hero — 1 card visible (true mobile carousel) */
  .hero-track{grid-auto-columns:100%;gap:12px}
  .hero-card{padding:22px 22px;min-height:280px}
  /* mobile type uses tighter caps so offer copy does not clip on 568-767px widths. */
  .hero-card .hc-eb{font-size:11px;letter-spacing:.14em}
  .hero-card h2{font-size:clamp(34px, 8cqw, 44px);line-height:1.02;margin:8px 0 10px}
  .hero-card .bonus{font-size:14.5px;line-height:1.38}
  .hero-card .cta{height:46px;padding:0 22px;font-size:14px}
  .hero-card.has-art{background-position:var(--hero-mobile-pos, 76% center)}
  /* mobile mascot — 40% width (same split as desktop), more right-side cropping */
  .hero-card .mascot{right:0;top:0;bottom:0;width:40%;height:100%}
  .hero-card .hc-eb,
  .hero-card h2,
  .hero-card .bonus,
  .hero-card .ctas{max-width:60%}

  /* game rows — ~2.7 visible (peek of next card on the right) */
  .game-row, .rtp-row{grid-auto-columns:36%}
  .originals{grid-auto-columns:calc((100% - 12px) / 2)}
  .orig-card{padding:18px;aspect-ratio:1.5/1}
  .orig-card .name{font-size:24px}
  .orig-card .badge{top:14px;right:14px;padding:4px 10px;font-size:9px}

  /* section heads — better wrap */
  .sec-head .more{order:3;width:100%;margin-left:0;justify-content:flex-end}
  .sec-head .nav-arrows{margin-left:auto;order:2}

  /* category tabs — full-bleed scroll */
  .cat-wrap{margin-left:-14px;margin-right:-14px}
  .cat-tabs{padding-left:14px;padding-right:74px}
  .cat-wrap::after{width:50px}
  .cat-tab{height:40px;padding:0 16px;font-size:13px}

  /* search row — stack the provider dropdown above the search pill on mobile */
  .lobby-search{grid-template-columns:1fr;gap:10px;margin-top:12px}
  .provider-select{height:48px;font-size:13.5px;padding:0 14px 0 16px;gap:10px}
  .provider-select .ps-count{display:none}
  .big-search-wrap{padding:4px 4px 4px 16px}
  .big-search-wrap input{height:40px;font-size:14px}
  .big-search-wrap .kbd{display:none}
  .big-search-wrap .filter-btn{height:34px;padding:0 14px;font-size:12px}

  /* lobby games grid — fewer cards on mobile */
  .lobby-games{margin-top:18px}
  .lg-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px}
  .lg-title{font-size:16px}
  .lg-meta{font-size:9.5px;padding:4px 8px}
  .lg-more{font-size:11.5px}
  .lg-card .game-overlay .g-play{width:38px;height:38px}
  .lg-card .game-overlay .g-play svg{width:18px;height:18px}
  .lg-load{height:44px;font-size:12.5px;margin-top:12px}

  /* National Tournament — mobile, bigger to fill the card horizontally */
  .np-tournament{padding:22px;gap:18px}
  .np-tournament::before{
    background-position:76% bottom;
    opacity:.46;
  }
  .np-tournament::after{
    background:
      linear-gradient(180deg, rgba(10,10,46,.98) 0%, rgba(10,10,46,.94) 52%, rgba(10,10,46,.74) 100%),
      radial-gradient(circle at 80% 72%, rgba(230,0,126,.14), transparent 46%),
      radial-gradient(circle at 58% 88%, rgba(0,196,210,.12), transparent 42%);
  }
  .npt-title{font-size:38px}     /* bigger; "Crown Cup · June" fits on one line at common mobile widths */
  .npt-prize .val{font-size:46px}                    /* bumped from 36 */
  .npt-countdown{gap:8px}
  .npt-countdown .u{padding:14px 12px;flex:1;min-width:0}   /* boxes expand to fill row */
  .npt-countdown .n{font-size:28px}                  /* bumped from 20 */
  .npt-countdown .s{font-size:10px;margin-top:5px}
  .npt-conditions{gap:18px}
  .npt-conditions .cond .val{font-size:15px}
  .npt-cta{height:54px;padding:0 28px;font-size:15px}
  .npt-mascot{right:-25%;height:60%;opacity:.35}
  .npt-leaderboard{padding:14px}
  .npt-lb-rows li{min-height:44px;font-size:12px;padding:8px 10px;grid-template-columns:28px 1fr 70px 70px}
  .npt-lb-cols{grid-template-columns:28px 1fr 70px 70px;padding:4px 10px}
  .npt-lb-rows .rank{width:22px;height:22px;font-size:10px}

  /* daily/network tournament — mobile (mascot stays as BG watermark from 1023 rule) */
  .daily-main{padding:28px 18px}
  .daily .d-time .u{padding:6px 8px;min-width:44px}
  .live-ticker{padding:9px 14px;font-size:11.5px}
  .lt-track{gap:28px;animation-duration:42s}
  .daily .d-time .n{font-size:20px}

  /* about stats */
  .about{padding:18px 4px;gap:24px}
  .fact{padding:14px;grid-template-columns:44px 1fr;gap:12px}
  .fact .ico{width:40px;height:40px}
  .fact .ico svg{width:18px;height:18px}

  /* benefits — single col */
  .benefits{grid-template-columns:1fr;gap:12px}
  .benefits .benefit:last-child{grid-column:auto}
  .benefit{padding:22px 24px;min-height:200px}

  /* live bets — compact on mobile */
  .lb-board{padding:14px}
  .lb-tab{padding:0 12px;font-size:11.5px;height:32px;gap:6px}
  .lb-tab .np-icon{width:13px;height:13px}
  .lb-table th,.lb-table td{padding:12px 14px;font-size:13px}
  .lb-table th{font-size:9.5px}
  .lb-game .thm{width:28px;height:28px}

  /* footer */
  .foot-inner{grid-template-columns:1fr 1fr 1fr;gap:28px 16px;padding:0 14px}
  .foot-brand{grid-column:1 / -1}
  /* stack legal copy above the trust-mark badges so the paragraph reads at full width
     instead of getting choked into a sliver by the badge row */
  .foot-bot{padding:0 14px;gap:18px;flex-direction:column;align-items:stretch}
  .foot-bot .legal{flex:0 0 auto;min-width:0;width:100%;font-size:10.5px}
  /* badges fill the row width — 18+ keeps its natural size, VPN expands to fill, seal sits at the right.
     all three locked to identical 44px height via min-height + height so flex doesn't shrink any of them. */
  .foot-bot .badges{width:100%;justify-content:space-between;gap:10px;flex-wrap:nowrap;align-items:stretch}
  .foot-bot .badges .b{height:44px;min-height:44px;padding:0 14px;font-size:12px}
  .foot-bot .badges .b.age{flex:0 0 auto;min-width:60px;justify-content:center;font-size:16px}
  .foot-bot .badges .b.vpn{flex:1 1 auto;justify-content:center;font-size:12.5px}
  .foot-bot .badges .b.vpn svg{width:16px;height:16px}
  .foot-bot .badges .b.seal{flex:0 0 auto;height:44px;min-height:44px}

  /* FABs collapse to a single CTA-style disc — the outer pill goes fully
     transparent and the mascot disc IS the button, styled like the site's
     CTAs: accent-tinted solid stacked "ledge" + soft ambient float + a
     press-down on tap. */
  .chat,.bonus-map{
    width:56px;height:56px;padding:0;
    bottom:calc(80px + env(safe-area-inset-bottom, 0px));
    border-radius:50%;justify-content:center;
    background:none;border:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .chat{right:16px}
  .bonus-map{left:16px}
  .chat .ch-mascot,.bonus-map .bm-mascot{position:static;transform:none;width:56px;height:56px}
  .chat .ch-mascot img{width:40px;height:40px}
  .bonus-map .bm-mascot img{width:44px;height:44px}
  /* Refined coin: soft *blurred* insets read as a smoothly rounded dome
     (no hard band = no protruding-rim look). Hairline ring crisps the edge,
     ambient drop lifts it off the page. */
  .chat .ch-mascot{
    box-shadow:
      inset 0 3px 4px -2px rgba(255,255,255,.55),  /* soft top sheen */
      inset 0 -7px 9px -6px rgba(0,0,0,.22),        /* soft bottom shade */
      0 0 0 1px rgba(0,0,0,.05),                    /* crisp edge ring */
      0 10px 22px -8px rgba(0,0,0,.45);             /* ambient float */
    transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
  }
  .bonus-map .bm-mascot{
    box-shadow:
      inset 0 3px 4px -2px rgba(255,255,255,.55),
      inset 0 -7px 9px -6px rgba(0,0,0,.22),
      0 0 0 1px rgba(0,0,0,.05),
      0 10px 22px -8px rgba(0,0,0,.45);
    transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
  }
  .chat:hover .ch-mascot{transform:translateY(-1px) rotate(8deg) scale(1.04)}
  .bonus-map:hover .bm-mascot{transform:translateY(-1px) rotate(-8deg) scale(1.04)}
  .chat:active .ch-mascot{
    transform:translateY(2px);
    box-shadow:inset 0 3px 4px -2px rgba(255,255,255,.55), inset 0 -7px 9px -6px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05), 0 6px 14px -8px rgba(0,0,0,.4);
  }
  .bonus-map:active .bm-mascot{
    transform:translateY(2px);
    box-shadow:inset 0 3px 4px -2px rgba(255,255,255,.55), inset 0 -7px 9px -6px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05), 0 6px 14px -8px rgba(0,0,0,.4);
  }
  .chat .ch-text,.bonus-map .bm-text{display:none}

  /* hide hero arrows on mobile (rely on swipe + dots) */
  .hero-controls .hero-arrow{display:none}

  /* row gradient fades shrink */
  .row-wrap::before,.row-wrap::after{width:20px}
}

/* Small mobile ≤ 479px — explicit floor matches the container-query floors */
@media (max-width: 479px){
  /* Landscape hero on phones — fixed short height, CTA pinned to the card
     bottom, bonus capped to 2 lines so no slide overflows the shorter card. */
  .hero-card{min-height:0;height:280px}
  .hero-card .hc-eb{font-size:11px;letter-spacing:.14em}
  .hero-card h2{font-size:30px;margin:4px 0 8px;line-height:1.05}
  .hero-card .bonus{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-card .ctas{margin-top:auto}
  .hero-card .cta{height:44px;padding:0 22px;font-size:14px}
  .hero-card .cta svg{width:15px;height:15px}

  /* product switcher — icon-only at smallest mobile to spare header width */
  .vert-switch .vs-label{display:none}
  .vert-switch .vs-item{padding:0 10px;gap:0}

  /* game rows — ~2.2 visible (peek of next card on the right) */
  .game-row, .rtp-row{grid-auto-columns:44%}
  .originals{grid-auto-columns:88%}

  /* live bets — hide Time + Bet columns on small mobile to fit */
  .lb-table th:nth-child(2),.lb-table td:nth-child(2),
  .lb-table th:nth-child(4),.lb-table td:nth-child(4){display:none}

  /* footer — 2 columns of links below the brand block (which still spans full width via the 768px rule) */
  .foot-inner{grid-template-columns:1fr 1fr 1fr;gap:22px 12px}
  .foot-col{padding-bottom:0;border-bottom:0}

  /* daily/network tournament — small mobile (slightly less opacity on smaller screen) */
  .daily .daily-mascot{opacity:.14}
  .daily .d-time{flex-wrap:wrap;justify-content:center;gap:6px}
  .daily .d-time .u{padding:6px 8px;min-width:42px}
  .daily .d-time .n{font-size:18px}
  .daily .d-cta button{height:46px;padding:0 22px;font-size:13px}

  /* sec head h3 */
  .sec-head h3{font-size:17px}
  .sec-head .ico{width:32px;height:32px}
  .sec-head .ico svg{width:20px;height:20px}

  /* about facts */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-progress{transition:none !important}
}

/* Print */
@media print{
  .sidebar,.chat,.bonus-map,.hero-controls,.nav-arrows,.fold-btn,.hamburger,.scrim{display:none !important}
  .layout{grid-template-columns:1fr}
  body{background:#fff}
}

/* ============================================================
   ▼▼▼ DARK THEME (v2) OVERRIDES ▼▼▼
   Components below were authored against the light theme where
   navy on white was the standout treatment. In dark we flip those
   to white/yellow on navy so they keep the same hierarchy.
   ============================================================ */

/* logo mark — stays red+sparkle, no change needed */
/* logo wordmark — color was --ink (now white); the red dot stays brand red */
.header-logo .logo-text small{color:rgba(255,255,255,.55)}

/* hamburger / fold buttons — flip backgrounds, hairline border */
.fold-btn,.hamburger{background:rgba(255,255,255,.06);border-color:var(--rule)}
.fold-btn:hover,.hamburger:hover{background:rgba(255,255,255,.1)}

/* lang pill — outline becomes hairline white */
.lang{border-color:var(--rule-2)}
.lang:hover{background:rgba(255,255,255,.06)}

/* login — outline button, glass-family hover */
.login{
  border:1px solid rgba(255,255,255,.32) !important;
  color:#fff !important;
  background:transparent !important;
  box-shadow:none !important;
}
.login:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.5) !important;
  transform:translateY(-1px);
}

/* PRIMARY CTAs — unified treatment for v2.
   Replaces the light-theme pillow-press shadow (which renders as a hard
   brown band on dark) with: a top-to-bottom yellow gradient + crisp top
   inset highlight + bottom inset shadow + a soft yellow glow underneath.
   Hover brightens the gradient and deepens the glow with a 1px lift;
   active settles back into the surface with a tighter glow. */
.signup,
.filter-btn,
.ngc-cta,
.npt-cta,
.benefit .b-cta{
  background:linear-gradient(180deg, #FFD93D 0%, #FFC400 100%) !important;
  color:var(--brand-navy) !important;
  border:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(140,90,0,.18),
    0 4px 16px -4px rgba(255,204,0,.42) !important;
  transition:background .15s, box-shadow .2s, transform .15s !important;
}
.signup:hover,
.filter-btn:hover,
.ngc-cta:hover,
.npt-cta:hover,
.benefit .b-cta:hover{
  background:linear-gradient(180deg, #FFE368 0%, #FFD000 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(140,90,0,.18),
    0 8px 24px -4px rgba(255,204,0,.55) !important;
  transform:translateY(-1px);
}
.signup:active,
.filter-btn:active,
.ngc-cta:active,
.npt-cta:active,
.benefit .b-cta:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 2px 8px -2px rgba(255,204,0,.3) !important;
}

/* Hero card CTAs (Get Bonus) — white LIQUID GLASS pill + navy text.
   Same glass-family vocabulary as the search row, vert-switch, etc.:
   translucent white gradient + hairline + backdrop-blur + inset top
   highlight + bottom inner shadow + soft outer drop. Stays in v2's
   design language while being neutral enough to not compete with the
   yellow Sign Up CTA. */
.hero-card .cta,
.hero-card.c-red .cta,
.hero-card.c-yellow .cta,
.hero-card.c-cyan .cta,
.hero-card.c-magenta .cta,
.hero-card.c-purple .cta,
.hero-card.c-navy .cta{
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 100%) !important;
  color:var(--brand-navy) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 4px 16px -4px rgba(0,0,0,.4) !important;
  transition:background .15s, box-shadow .2s, transform .15s !important;
}
.hero-card .cta:hover{
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 100%) !important;
  border-color:rgba(255,255,255,.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 8px 22px -4px rgba(0,0,0,.5) !important;
  transform:translateY(-1px);
}
.hero-card .cta:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 6px -2px rgba(0,0,0,.3) !important;
}

/* vert switch (Casino/Sports) — matches the .sb-theme toggle:
   inactive items are transparent; active gets a brighter rgba(white) fill
   with inset highlight, no yellow. */
.vs-item.active{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12) !important;
}
/* active icon = yellow — matches the brand's universal active accent
   (sidebar nav-item.active, cat-tab.active, light-theme Casino tab) */
.vs-item.active svg{color:var(--yellow) !important}

/* sidebar — its own surface on --brand-navy-deep (#0E0E45), a dim navy already
   used elsewhere on the page (component gradients / focus rings). It sits
   BETWEEN the page (--paper-2 #0A0A2E, darker) and the header/footer (--paper
   #15154A, lighter): darker than the header so the rail can't fuse with the
   header/footer chrome, yet a touch lighter/bluer than the canvas so it doesn't
   read as flat. Inset tiles/buttons stay on --paper-2 so they read as recessed. */
.sidebar{background:#0A0A2E;box-shadow:6px 0 18px -8px rgba(0,0,0,.55)}
.logo-block{background:#0A0A2E;border-bottom-color:var(--rule)}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{background:rgba(255,255,255,.05);color:#fff;box-shadow:none}
.nav-item.active .ni-ico{background:transparent;color:var(--yellow)}
.nav-item.active .ni-ico[class*="c-"]{color:var(--yellow)}
.sb-tile{background:var(--paper-2);border:1px solid var(--rule)}
.sb-promo h4{color:var(--ink)}

/* sidebar foot (Get the app) */
.sidebar-foot .install{background:var(--paper-2);border:1px solid var(--rule)}

/* === SIDEBAR — EXPANDABLE SUB NAV (Casino, Sports, Promotions) ========
   When parent .nav-item.is-open, parent + sub-panel render as ONE
   continuous liquid-glass frame: shared gradient bg, hairline border
   around the entire unit, no visible seam where they meet. */
.nav-sub{
  display:none;
  flex-direction:column;
  margin:0 0 8px;
  padding:6px;
}
.nav-item.is-open{
  /* solid navy raised panel (lighter than the #0A0A2E rail) so the open group
     reads as one contained block, not flat translucent gray */
  background:linear-gradient(180deg, #1b1b50 0%, #15153f 100%) !important;
  border:1px solid rgba(255,255,255,.14);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 16px -8px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav-item.is-open + .nav-sub{
  display:flex;
  background:linear-gradient(180deg, #15153f 0%, #111034 100%);
  border:1px solid rgba(255,255,255,.14);
  border-top:0;
  border-radius:0 0 12px 12px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 8px 22px -8px rgba(0,0,0,.45);
}
.nav-item.js-toggle-sub .caret{
  margin-left:auto;flex-shrink:0;
  transition:transform .2s var(--ease-out);
}
.nav-item.js-toggle-sub.is-open .caret{transform:rotate(90deg)}
.nav-sub-item{
  display:flex;align-items:center;
  padding:9px 14px;
  border-radius:8px;
  font-size:13px;font-weight:700;
  color:rgba(255,255,255,.7);
  cursor:pointer;
  transition:background .12s, color .12s;
}
.nav-sub-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sub-item.active{color:var(--yellow)}
/* "View All" footer link */
.nav-sub-more{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px 6px;
  margin-top:2px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  cursor:pointer;
  transition:color .12s;
}
.nav-sub-more::before{
  content:'\2022\2022\2022';                  /* ••• three dots */
  letter-spacing:1px;color:rgba(255,255,255,.5);
  font-size:13px;
}
.nav-sub-more:hover{color:#fff}
.nav-sub-more:hover::before{color:#fff}
/* hide entirely in collapsed sidebar (icons only) */
.collapsed .nav-sub{display:none !important}

/* === SIDEBAR — AUTH BUTTONS ============================================ */
.sb-auth{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:14px 22px 4px;
}
.sb-sign-in,
.sb-sign-up{
  display:flex;align-items:center;justify-content:center;
  height:44px;border-radius:var(--r-pill);
  font-weight:900;font-size:13.5px;letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s, box-shadow .2s, transform .15s, border-color .15s;
}
.sb-sign-in{
  /* liquid-glass pill — translucent white tint on the dark sidebar, hairline
     edge, inset top-light + bottom-shadow, soft drop. Same vocabulary as the
     search bar, lb-tabs, cat-tab chips. */
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 4px 12px -4px rgba(0,0,0,.35);
}
.sb-sign-in:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%);
  border-color:rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 6px 16px -4px rgba(0,0,0,.45);
  transform:translateY(-1px);
}
.sb-sign-up{
  background:linear-gradient(180deg, #FFD93D 0%, #FFC400 100%);
  color:var(--brand-navy);
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(140,90,0,.18),
    0 4px 14px -4px rgba(255,204,0,.4);
}
.sb-sign-up:hover{
  background:linear-gradient(180deg, #FFE368 0%, #FFD000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 6px 18px -4px rgba(255,204,0,.55);
  transform:translateY(-1px);
}
.collapsed .sb-auth{display:none}

/* === SIDEBAR — ENGAGEMENT GRID — quieter than full saturated tiles.
   The chip background becomes a UNIFORM dark glass (matching the rest of
   the sidebar chrome), and the icon glyph alone carries the tier color.
   Result: each tile keeps its color identity via the icon, but the 6
   colored squares no longer create a wall of saturation that competes
   with the Create Account CTA above. */
.sb-tile .ic{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.sb-tile .ic svg{width:20px;height:20px;font-size:20px}
/* tier color now lives in the icon's color, not the chip's background */
.sb-tile.t-red .ic     svg{color:var(--red)}
.sb-tile.t-magenta .ic svg{color:var(--magenta)}
.sb-tile.t-purple .ic  svg{color:var(--purple)}
.sb-tile.t-cyan .ic    svg{color:var(--cyan)}
.sb-tile.t-navy .ic    svg{color:rgba(255,255,255,.82)}

/* === SIDEBAR — WELCOME BONUS CARD =====================================
   Uses the same dark-navy gradient as the hero cards above-the-fold —
   reads as a "mini hero" in the sidebar without introducing a new
   color combination that doesn't exist elsewhere on the page. */
.sb-bonus{
  display:flex;align-items:center;gap:10px;
  margin:6px 22px;
  padding:14px;
  border-radius:var(--r-card);
  /* distinct branded card — lifted off the #0A0A2E rail + gold hairline/glow
     so the conversion card pops instead of fading into the dark */
  background:linear-gradient(135deg, #242468 0%, #15153f 100%);
  border:1px solid rgba(245,206,112,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 18px -6px rgba(0,0,0,.55),
    0 0 22px -8px rgba(245,206,112,.34);
  cursor:pointer;
  transition:transform .15s, box-shadow .2s;
}
.sb-bonus:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 22px -6px rgba(0,0,0,.6);
}
.sb-bonus-img{
  width:64px;height:64px;object-fit:contain;object-position:center;
  flex-shrink:0;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.38));
}
.sb-bonus-text{min-width:0;flex:1}
.sb-bonus-eb{
  font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:3px;
}
.sb-bonus-amount{
  font-size:16px;font-weight:900;letter-spacing:-.01em;color:var(--yellow);
  line-height:1.1;
}
.sb-bonus-plus{
  display:block;font-size:11px;font-weight:800;color:#fff;letter-spacing:0;
  margin-top:2px;
}
.sb-bonus-meta{
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55);
  margin-top:4px;
}
.collapsed .sb-bonus{display:none}

/* === SIDEBAR — LIGHT/DARK THEME TOGGLE ================================ */
.sb-theme{
  display:flex;gap:3px;
  margin:6px 22px;
  padding:3px;
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.sb-theme-opt{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:36px;border-radius:var(--r-pill);
  font-weight:800;font-size:12px;letter-spacing:.04em;
  color:rgba(255,255,255,.6);
  cursor:pointer;
  transition:color .15s, background .15s;
}
.sb-theme-opt .np-icon{width:18px;height:18px;flex-shrink:0;stroke-width:2.25}
.sb-theme-opt:hover{color:#fff}
.sb-theme-opt.is-on{
  background:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.collapsed .sb-theme{display:none}

/* favourite heart on game cards — yellow brand accent (was red) */
.game-overlay .fav.on{background:var(--yellow) !important;color:var(--brand-navy) !important}

/* Hero carousel — remove the chunky 44px arrow buttons that were
   creating dead space between the hero and the cat-tab row below.
   Dots stay (swipe + auto-rotate still work). Margin tightens too. */
.hero-controls .hero-arrow{display:none !important}
.hero-controls{margin-top:8px !important}

/* "View all" section links — append a right-arrow glyph after the text
   (or after the count badge when present). Inherits currentColor via mask. */
.sec-head .more::after{
  content:'';
  display:inline-block;
  width:16px;height:16px;
  margin-left:2px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
}

/* Yellow accents (was red) for win-related highlights:
   - game name links in Latest Wins cards
   - multiplier in live bets table
   - coin badge background on payout cell */
.ngc-game{color:var(--yellow) !important;text-decoration-color:var(--yellow) !important}
.ngc-game:hover{color:#fff !important}
.lb-mult{color:var(--yellow) !important}
.lb-pay .coin{background:var(--yellow) !important;color:var(--brand-navy) !important}

/* === SIDEBAR — TOOLTIPS when collapsed ================================
   Show the nav item's name as a floating tooltip on hover when the
   sidebar is in icons-only mode. data-tooltip attribute on each nav-item
   carries the label text. */
.collapsed .nav-item{position:relative}
.collapsed .nav-item::after{
  content:attr(data-tooltip);
  position:absolute;
  left:100%;top:50%;
  transform:translateY(-50%) translateX(10px);
  background:#15154A;
  color:#fff;
  padding:6px 12px;border-radius:8px;
  font-size:12px;font-weight:800;letter-spacing:.01em;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;visibility:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:120;
}
.collapsed .nav-item:hover::after{
  opacity:1;visibility:visible;
  transform:translateY(-50%) translateX(14px);
}

/* DESKTOP STRUCTURE:
   - Header spans full width at the top and always shows the logo (full view).
   - Sidebar lives below the header: open (full nav) | collapsed (mini-icon dock).
   - The collapse toggle + Casino/Sports market switch live at the TOP of the
     side panel (CoinCasino-style), not in the header.
   - The sidebar logo-block is hidden on desktop (the header carries the logo);
     it reappears only as the brand row in the mobile drawer. */
@media (min-width: 1024px){
  .header-logo{display:flex !important}
  .sidebar .logo-block{display:none}     /* no logo in sidebar — header carries it */
  .header{padding:4px var(--gutter) 0}   /* match the body content gutter so the logo + Sign Up edges align with the page column */
}

/* Final brand lockup: gold crown mark + wordmark in the header. Footer
   small-logo placeholder mark stays hidden. */
.foot-brand .small-logo .lm{display:none !important}
.header-logo .logo-text,
.foot-brand .small-logo .word{text-transform:none}

/* Sidebar — auth buttons aligned with the top of the hero cards
   (which start at .main's 24px top padding). */
.sb-auth{padding-top:24px}
/* breathing room below the market switch — tightened so the icon list sits
   closer to the toggle (gap ≈ 22px: 8px market margin + 14px here). */
.nav{margin-top:14px}

/* Subtle brand-tinted chips ONLY on the four product nav items when
   sidebar is collapsed — Casino (red), Sports (cyan), Live Casino
   (magenta), Promotions (purple). Targeted via data-tooltip attribute
   so the other items (Shop, Tournaments, etc.) keep the neutral glass. */
.collapsed .nav-item[data-tooltip="Casino"] .ni-ico{
  background:linear-gradient(135deg, rgba(237,27,46,.20) 0%, rgba(237,27,46,.06) 100%) !important;
  border-color:rgba(237,27,46,.32) !important;
}
.collapsed .nav-item[data-tooltip="Casino"] .ni-ico .np-icon{color:var(--red)}

.collapsed .nav-item[data-tooltip="Sports"] .ni-ico{
  background:linear-gradient(135deg, rgba(0,196,210,.20) 0%, rgba(0,196,210,.06) 100%) !important;
  border-color:rgba(0,196,210,.32) !important;
}
.collapsed .nav-item[data-tooltip="Sports"] .ni-ico .np-icon{color:var(--cyan)}

.collapsed .nav-item[data-tooltip="Live Casino"] .ni-ico{
  background:linear-gradient(135deg, rgba(230,0,126,.20) 0%, rgba(230,0,126,.06) 100%) !important;
  border-color:rgba(230,0,126,.32) !important;
}
.collapsed .nav-item[data-tooltip="Live Casino"] .ni-ico .np-icon{color:var(--magenta)}

.collapsed .nav-item[data-tooltip="Promotions"] .ni-ico{
  background:linear-gradient(135deg, rgba(124,31,190,.22) 0%, rgba(124,31,190,.06) 100%) !important;
  border-color:rgba(124,31,190,.35) !important;
}
.collapsed .nav-item[data-tooltip="Promotions"] .ni-ico .np-icon{color:var(--purple)}

/* Toggle icon flips when sidebar is collapsed (chevron points the other way) */
body:has(.layout.collapsed) .fold-restore svg{transform:rotate(180deg)}

/* COLLAPSED — sidebar becomes a mini icon dock (80px wide). Icons sit in
   liquid-glass frames; tooltips appear on hover; everything else hides. */
.collapsed .sidebar{overflow:visible;z-index:60}
.collapsed .sb-auth,
.collapsed .sb-promo,
.collapsed .sb-bonus,
.collapsed .sb-theme,
.collapsed .sb-lang,
.collapsed .nav-sub{display:none !important}
.collapsed .nav-item{padding:8px 0;background:transparent !important;border:0;justify-content:center;gap:0}
.collapsed .nav-item .ni-label,
.collapsed .nav-item .caret,
.collapsed .nav-item .dot-badge,
.collapsed .nav-item .badge{display:none}
.collapsed .nav-item .ni-ico{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 8px -3px rgba(0,0,0,.4);
  transition:background .15s, border-color .15s, transform .15s;
}
.collapsed .nav-item .ni-ico svg{width:26px;height:26px;font-size:26px}
.collapsed .nav-item .ni-ico .np-icon--live{width:28px;height:28px}
.collapsed .nav-item:hover .ni-ico{
  background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
}

/* Tooltips on hover — show the nav-item's label when sidebar is collapsed.
   z-index is high (200) to escape header (50) and any hero stacking
   contexts. Layout + sidebar set to overflow:visible so the tooltip
   can render past the sidebar's right edge. */
.collapsed{overflow:visible}
.collapsed .sidebar{overflow:visible;z-index:80}
.collapsed .nav,
.collapsed .nav-item{position:relative;overflow:visible}
.collapsed .nav-item::after{
  content:attr(data-tooltip);
  position:absolute;left:100%;top:50%;
  transform:translateY(-50%) translateX(10px);
  background:#15154A;color:#fff;
  padding:7px 14px;border-radius:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.01em;
  white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 22px -6px rgba(0,0,0,.6);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:200;
}
.collapsed .nav-item:hover::after{
  opacity:1;visibility:visible;
  transform:translateY(-50%) translateX(14px);
}

/* Header toggle — always visible on desktop. Chevron flips 180° when
   collapsed so the same button reads as "retract" or "expand" depending
   on state. */
.fold-restore{
  display:inline-flex;
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.12);
  transition:background .15s, border-color .15s;
}
.fold-restore:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);
  border-color:rgba(255,255,255,.22);
}
.fold-restore svg{width:18px;height:18px;transition:transform .2s}
.layout.collapsed ~ * .fold-restore svg,
body:has(.layout.collapsed) .fold-restore svg{transform:rotate(180deg)}
/* mobile drawer uses .hamburger / drawer-close instead */
@media (max-width: 1023px){.fold-restore{display:none}}
.collapsed .nav-item{padding:8px 0}
.collapsed .nav-item:hover{background:transparent}
.collapsed .nav-item .ni-ico{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 8px -3px rgba(0,0,0,.4);
  transition:background .15s, border-color .15s, transform .15s;
}
.collapsed .nav-item .ni-ico svg{width:26px;height:26px;font-size:26px}
.collapsed .nav-item .ni-ico .np-icon--live{width:28px;height:28px}
.collapsed .nav-item:hover .ni-ico{
  background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
}

/* Live Casino "86" live pill — red with blinking white dot */
.nav-item .dot-badge.dot-badge--live{
  background:var(--red) !important;
  color:#fff;
}
.nav-item .dot-badge.dot-badge--live::before{
  animation:pulseDot 1.5s infinite;
}

/* === SIDEBAR — LANGUAGE SELECTOR ====================================== */
.sb-lang{
  display:flex;align-items:center;gap:10px;
  margin:6px 22px 18px;
  padding:0 16px;height:44px;
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  color:#fff;font-weight:800;font-size:13px;letter-spacing:.01em;
  cursor:pointer;width:calc(100% - 44px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.12);
  transition:background .15s, border-color .15s;
}
/* only the LABEL span fills remaining space — flag span stays its natural size */
.sb-lang .sb-lang-label{flex:1;text-align:left}
.sb-lang-chev{width:16px;height:16px;color:rgba(255,255,255,.5);flex-shrink:0}
.sb-lang:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  border-color:rgba(255,255,255,.20);
}
.collapsed .sb-lang{display:none}

/* trigger flag — circular local SVG flag
   once a language is picked. Same 18px footprint so the pill geometry never
   shifts when the icon swaps. flex:0 0 20px locks the wrapper to a perfect
   circle so it can never get stretched by a sibling flex:1 rule. */
.sb-lang-flag{
  flex:0 0 20px;
  width:20px;height:20px;border-radius:50%;
  overflow:hidden;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
}
.flag-svg{width:100%;height:100%;display:block}

/* === LANGUAGE PICKER POPOVER ============================================
   Glass-dark sheet anchored to .sb-lang, opens upward with a tail. Holds a
   4-col grid of circle-flag picker tiles. */
.sb-lang-wrap{position:relative}

.lang-pop{
  position:absolute;
  bottom:calc(100% + 14px);left:22px;right:22px;
  padding:16px 14px 14px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%),
    var(--brand-navy-deep);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 24px 48px -12px rgba(0,0,0,.65),
    0 6px 16px -4px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);
  z-index:120;
  opacity:0;transform:translateY(6px) scale(.98);transform-origin:50% 100%;
  pointer-events:none;
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.lang-pop.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* downward tail pointing at the trigger pill */
.lang-pop::after{
  content:'';position:absolute;left:50%;top:100%;
  width:14px;height:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%),
    var(--brand-navy-deep);
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  transform:translate(-50%,-50%) rotate(45deg);
}

.lang-pop-head{
  font:800 9.5px/1 var(--font);
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:0 4px 10px;
}

.lang-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}

.lang-opt{
  position:relative;
  width:100%;aspect-ratio:1;max-width:48px;margin:0 auto;
  border-radius:50%;
  background:transparent;border:none;padding:0;
  cursor:pointer;
  display:block;
  transition:transform .18s var(--ease-out);
}
.lang-opt-img{
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  display:block;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 4px 10px -2px rgba(0,0,0,.45);
  transition:box-shadow .18s, transform .18s var(--ease-out);
}
.lang-opt-img .flag-svg{width:100%;height:100%}
.lang-opt:hover{transform:translateY(-2px)}
.lang-opt:hover .lang-opt-img{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.30),
    0 6px 14px -2px rgba(0,0,0,.55);
}

/* selected — yellow ring around the flag + check badge bottom-right */
.lang-opt.is-on .lang-opt-img{
  box-shadow:
    0 0 0 2px var(--yellow),
    0 0 0 4px rgba(255,204,0,.20),
    0 6px 14px -2px rgba(255,204,0,.35);
}
.lang-opt .lang-check{
  position:absolute;right:-2px;bottom:-2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--yellow);color:var(--brand-navy);
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 0 2px var(--brand-navy-deep);
}
.lang-opt.is-on .lang-check{display:flex}
.lang-opt .lang-check svg{width:11px;height:11px}

/* mobile — when sidebar is a drawer, popover becomes a centered card */
@media (max-width:1023px){
  .lang-pop{left:14px;right:14px;bottom:calc(100% + 12px)}
}

/* === HEADER LANG PILL — flag swap-in + downward popover anchor ============
   Keeps the existing .lang pill styling 100% intact; only adds the flag
   circle (replaces the globe SVG, same 16px footprint = no geometry shift). */
.lang-wrap{position:relative;display:inline-block}

.lang .lang-flag{
  width:18px;height:18px;border-radius:50%;
  overflow:hidden;flex-shrink:0;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
}
.lang .lang-flag .flag-svg{width:100%;height:100%}

/* downward variant of the popover — anchored under the trigger, tail on top */
.lang-pop--down{
  top:calc(100% + 12px);bottom:auto;
  left:auto;right:0;       /* right-align under the header button */
  width:280px;             /* fixed width (header has no constraining wrap) */
  transform-origin:100% 0;
  transform:translateY(-6px) scale(.98);
}
.lang-pop--down.is-open{transform:translateY(0) scale(1)}
.lang-pop--down::after{display:none}  /* header dropdown: no pointer tail — clean floating card */

/* mobile — header pill stays visible (just compacted) but the lang-wrap
   has login + signup buttons after it, so right:0 anchored to the wrap
   pushes the popover off-screen left. Switch to position:fixed anchored
   to the viewport top-right corner. Tail removed (would float disconnected). */
@media (max-width:1023px){
  .lang-pop--down{
    position:fixed;
    top:calc(var(--header-h) + 8px);
    right:14px;left:auto;bottom:auto;
    width:min(300px, calc(100vw - 28px));
    transform-origin:100% 0;
  }
  .lang-pop--down::after{display:none}
}

/* === SIDEBAR — SOCIAL ICONS ============================================
   Horizontal row of small glass-tile icon buttons. Sits between the nav
   and the welcome-bonus promo. `justify-content: space-between` spreads
   the 5 icons edge-to-edge so the row aligns in width with the welcome
   bonus card below (both use the same 22px side margin on the sidebar). */
.sb-socials{
  display:flex;justify-content:space-between;gap:8px;
  margin:12px 22px 14px;
  padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.sb-soc{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.12);
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.sb-soc:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 100%);
  border-color:rgba(255,255,255,.22);
  color:#fff;
  transform:translateY(-1px);
}
.sb-soc svg{width:16px;height:16px}
.collapsed .sb-socials{display:none}

/* category tabs — clear, category-first 3D symbols. */
.cat-tabs{
  gap:8px;padding:6px 0;
  align-items:flex-start;
  justify-content:center;     /* center the row under the search/dropdown below */
}
.cat-tab{
  flex-direction:column;align-items:center;gap:10px;
  height:auto;padding:8px 6px;min-width:88px;
  background:transparent;border:0;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  color:rgba(255,255,255,.7);
  white-space:nowrap;cursor:pointer;
  text-decoration:none;                 /* Slots cat-tab is now an <a> → no underline */
  transition:color .15s, transform .15s;
}
.cat-tab .cat-ico{
  width:60px;height:60px;padding:7px;box-sizing:content-box;
  object-fit:contain;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 8px -3px rgba(0,0,0,.35);
  transition:background .15s, border-color .15s, box-shadow .2s, transform .15s;
}
/* CRITICAL: override the original light-theme rules that set the PARENT
   .cat-tab background to var(--ink)/var(--paper-3). In dark mode --ink
   flips to white, so without these overrides the active/hovered tab
   ended up with a white blob behind its label — the "ellipse" you saw. */
.cat-tab:hover{color:#fff;background:transparent;transform:none;border:0}
.cat-tab:hover .cat-ico{
  background:linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 100%);
  border-color:rgba(255,255,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 8px -3px rgba(0,0,0,.35);
  transform:translateY(-1px);
}
.cat-tab.active{color:#fff;background:transparent;border:0}
.cat-tab.active .cat-ico{
  background:linear-gradient(135deg, rgba(255,217,61,.98) 0%, rgba(255,184,0,.92) 100%);
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(180,120,0,.3),
    0 2px 8px -3px rgba(0,0,0,.35);
}

/* mobile — keep glass discs, shrink, allow horizontal scroll.
   padding-left:14px compensates for .cat-wrap's -14px margin so the
   first chip aligns with the dropdown + search row at the container edge. */
@media (max-width: 768px){
  .cat-tabs{gap:6px;padding:6px 60px 6px 14px;justify-content:flex-start}
  .cat-tab{min-width:70px;padding:6px 4px;font-size:10px;gap:6px}
  .cat-tab .cat-ico{width:44px;height:44px;padding:6px}
}

/* LIQUID GLASS treatment for the framed utility surfaces — same vocab
   as the cat-tab chips, scaled down (.06 → .02 gradient) since these
   are large containers and would be too bright at chip opacity. */
.provider-select,
.big-search-wrap,
.lb-board,
.np-wins-ticker,
.lg-empty{
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 18px -6px rgba(0,0,0,.4) !important;
}
.provider-select:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 6px 20px -6px rgba(0,0,0,.5) !important;
}
.big-search-wrap:focus-within{
  border-color:var(--yellow) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 3px rgba(255,204,0,.18),
    0 4px 18px -6px rgba(0,0,0,.4) !important;
}

/* Smaller utility chips — same glass family, tighter shadows */
.provider-select .ps-count,
.big-search-wrap .kbd,
.lg-meta{
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

/* Provider panel (dropdown popover) — keep as opaque-ish so menu text
   stays crisp; use a subtle glass tint that's more readable than the
   pure-transparent treatment used on the larger frames above. */
.provider-panel{
  background:rgba(15,15,70,.92) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
}
.provider-opt:hover{background:rgba(255,255,255,.06)}
.provider-opt.selected{background:var(--yellow);color:var(--brand-navy)}
.provider-opt.selected .opt-count{color:rgba(21,21,94,.55)}
.big-search-wrap .filter-btn{background:var(--yellow);color:var(--brand-navy)}
.big-search-wrap .filter-btn:hover{background:#FFD93D}

/* lobby game cards — kept solid (the game image fills them, glass
   behind would be invisible/wasted) */
.lg-card{background:var(--paper-2)}

/* Load more — match radius of search/dropdown above (was full pill) */
/* lg-load is a gold pill now — radius override removed */

/* Language pill — small chrome glass */
.lang{
  /* dark frosted glass so the pill stays opaque over the transparent header
     (the hero scene was showing through the old near-clear fill) */
  background:linear-gradient(180deg, rgba(13,15,42,.80) 0%, rgba(8,10,32,.68) 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 6px -2px rgba(0,0,0,.3) !important;
}
.lang:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%) !important;
  border-color:rgba(255,255,255,.20) !important;
}

/* Casino/Sports vert switch — header chrome glass (was a dark inset hole) */
.vert-switch{
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

/* About-section fact icon chips — keep the colored chip but add a glass
   top-highlight + soft drop-shadow so each chip reads as a polished disc
   in the same family as the cat-tab chips. Card body itself stays opaque
   to keep the long body copy readable. */
.fact .ico{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 10px -3px rgba(0,0,0,.45);
}

/* Live bets toggle — proper liquid-glass: stronger frost on the container,
   more visible inactive text, brighter active pill with sculpted highlight
   for depth. Matches the leaderboard plate vocabulary. */
.lb-tabs{
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 4px 14px -6px rgba(0,0,0,.40) !important;
}
.lb-tab{color:rgba(255,255,255,.65) !important}
.lb-tab:hover{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}
.lb-tab.on{
  background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 12px -4px rgba(0,0,0,.40) !important;
}

/* Carousel arrows (hero + section row) — chrome glass family */
.hero-arrow,
.sec-head .nav-arrows button{
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 8px -3px rgba(0,0,0,.35) !important;
}
.hero-arrow:hover,
.sec-head .nav-arrows button:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
  transform:translateY(-1px);
}

/* Section header icons — same glass-disc polish applied to fact icons
   in the about cards. Colored chip stays, gains top highlight + soft drop. */
.sec-head .ico{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 10px -3px rgba(0,0,0,.45);
}

/* hero cards — DARK NAVY w/ GOLD accent for ALL variants
   (instead of 6 different brand-colored cards) */
.hero-card,
.hero-card.c-red,
.hero-card.c-yellow,
.hero-card.c-purple,
.hero-card.c-cyan,
.hero-card.c-magenta,
.hero-card.c-navy{
  background:linear-gradient(135deg, #16164A 0%, #0A0A2E 100%);
  color:#fff;
  border:0;
  box-shadow:none;
}
.hero-card .hc-eb,
.hero-card.c-yellow .hc-eb,
.hero-card.c-cyan .hc-eb{color:var(--yellow)}
.hero-card .pct,
.hero-card.c-yellow .pct,
.hero-card.c-cyan .pct,
.hero-card.c-magenta .pct,
.hero-card.c-purple .pct,
.hero-card.c-navy .pct{color:var(--yellow)}
.hero-card .bonus,
.hero-card.c-yellow .bonus,
.hero-card.c-cyan .bonus{color:rgba(255,255,255,.85);opacity:1}
.hero-card,
.hero-card.has-art{border-radius:var(--r-card)}
.hero-card.has-art{overflow:hidden}
.hero-card::before,
.hero-card::after,
.hero-card.has-art::before,
.hero-card.has-art::after{border-radius:inherit}
/* UK-flavoured campaign graphics: no logo marks or monograms, just brand
   geometry, coin energy, and soft national red/blue movement. */
.hero-card::before{
  content:'';
  position:absolute;
  inset:-36% -18% auto 38%;
  height:150%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 38%, rgba(255,204,0,.28) 0 0, rgba(255,204,0,.20) 0 3px, transparent 4px),
    radial-gradient(circle at 52% 60%, rgba(255,255,255,.20) 0 0, rgba(255,255,255,.14) 0 2px, transparent 3px),
    linear-gradient(116deg, transparent 0 28%, rgba(237,27,46,.72) 29% 34%, transparent 35% 45%, rgba(42,42,138,.72) 46% 52%, transparent 53% 100%);
  opacity:.72;
  transform:rotate(-7deg);
  mix-blend-mode:screen;
}
.hero-card::after{
  content:'';
  position:absolute;
  right:28%;
  bottom:-42px;
  width:170px;
  height:170px;
  border-radius:50%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(255,204,0,.70) 47% 50%, transparent 51%),
    conic-gradient(from -20deg, transparent 0 18%, rgba(255,204,0,.46) 19% 24%, transparent 25% 42%, rgba(237,27,46,.34) 43% 48%, transparent 49% 100%);
  opacity:.55;
  filter:blur(.1px);
}
.hero-card.c-yellow::before,
.hero-card.c-cyan::before{opacity:.82}
.hero-card.c-purple::before{
  background:
    radial-gradient(circle at 68% 42%, rgba(255,204,0,.28) 0 0, rgba(255,204,0,.20) 0 3px, transparent 4px),
    linear-gradient(116deg, transparent 0 30%, rgba(237,27,46,.68) 31% 36%, transparent 37% 47%, rgba(0,196,210,.58) 48% 54%, transparent 55% 100%);
}
.hero-card.has-art{
  background-image:var(--hero-art);
  background-size:cover;
  background-position:var(--hero-pos, center);
  background-repeat:no-repeat;
  border:0;
  box-shadow:none;
}
.hero-card.has-art::before{
  inset:0;
  height:auto;
  z-index:1;
  opacity:1;
  transform:none;
  mix-blend-mode:normal;
  background:
    linear-gradient(90deg, rgba(11,12,48,.98) 0%, rgba(11,12,48,.94) 40%, rgba(11,12,48,.46) 58%, rgba(11,12,48,0) 100%);
}
.hero-card.has-art::after{
  content:none;
  display:none;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 73% 52%, rgba(var(--hero-accent-rgb, 255,204,0), .32), transparent 34%),
    radial-gradient(circle at 42% 90%, rgba(var(--hero-accent-rgb, 255,204,0), .18), transparent 28%),
    linear-gradient(90deg, rgba(var(--hero-accent-rgb, 255,204,0), .12), transparent 42%);
  mix-blend-mode:screen;
}
.hero-card.has-art .hc-eb{color:var(--cyan)}
.hero-card.has-art .mascot{display:none}
.hero-card.has-art .hc-eb,
.hero-card.has-art h2,
.hero-card.has-art .bonus,
.hero-card.has-art .ctas{max-width:58%}
@media (max-width: 767px){
  .hero-card.has-art{background-position:var(--hero-mobile-pos, 76% center)}
  .hero-card.has-art .hc-eb,
  .hero-card.has-art h2,
  .hero-card.has-art .bonus,
  .hero-card.has-art .ctas{max-width:60%}
  .hero-card.has-art h2{font-size:clamp(34px, 8cqw, 44px)}
}
/* hero CTAs now use the unified yellow CTA treatment defined earlier
   in this dark-overrides block (no white bg, no pillow-press shadow) */
.hero-controls .hero-arrow{background:var(--paper-2);border-color:var(--rule);color:#fff}
.hero-controls .hero-arrow:hover{background:var(--paper-3)}
.hero-dot{background:rgba(255,255,255,.25)}
.hero-dot.is-active{background:var(--yellow)}

/* section heads — keep colored ico chips, ensure title color */
.sec-head h3{color:#fff}
.sec-head .more{color:#fff}
.sec-head .nav-arrows button{background:var(--paper-2);border-color:var(--rule);color:#fff}
.sec-head .nav-arrows button:hover{background:var(--yellow);color:var(--brand-navy);border-color:var(--yellow)}

/* originals + game tiles */
.orig-card{background:var(--paper-2)}
.game{background:var(--paper-2)}

/* fade gradients (row edges) reference paper-2 — they'll auto-pick dark, good */

/* RTP pill — was navy on white; keep navy chip on dark works (high contrast) */

/* National Tournament — image-backed dark tournament stage */
.np-tournament{
  background:#111149;
  color:#fff;
  min-height:440px;
  grid-template-columns:minmax(320px, .72fr) minmax(560px, 1fr);
  gap:clamp(24px, 3vw, 48px);
}
.np-tournament::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background-image:url('../assets-new/tournament-v2/tournament-royal-crown-cup-lion-medallion-zone.webp');
  background-size:126% auto;
  background-position:100% center;
  background-repeat:no-repeat;
}
.np-tournament::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg, rgba(10,10,46,.94) 0%, rgba(10,10,46,.78) 36%, rgba(10,10,46,.36) 58%, rgba(10,10,46,.18) 100%),
    radial-gradient(circle at 74% 50%, rgba(0,196,210,.22), transparent 34%),
    radial-gradient(circle at 82% 32%, rgba(230,0,126,.18), transparent 30%),
    radial-gradient(circle at 64% 72%, rgba(255,204,0,.14), transparent 28%);
}
.npt-title{color:#fff}
.npt-prize .val{color:#fff}
.npt-prize .lbl{color:rgba(255,255,255,.6)}
.npt-countdown .u{background:rgba(255,255,255,.06);border-color:var(--rule)}
.npt-countdown .n{color:#fff}
.npt-countdown .s{color:rgba(255,255,255,.55)}
.npt-divider{display:none!important}
.npt-conditions .cond .lbl{color:rgba(255,255,255,.55)}
.npt-conditions .cond .val{color:#fff}
.npt-cta{background:var(--yellow);color:var(--brand-navy)}
/* Tournament leaderboard — frosty liquid-glass plate that sits cleanly on
   top of the dark panel so the lion mascot reads as decor, not bleed-through. */
.npt-leaderboard{
  justify-self:end;
  align-self:center;
  width:min(100%, 540px);
  background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.065) 100%);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 12px 32px -12px rgba(0,0,0,.45);
}
.npt-lb-cols{color:rgba(255,255,255,.5)}
/* Rows — subtle white-tinted dark stripe (overrides base li{background:var(--paper)})
   so each row reads as a translucent bar on the frosted leaderboard plate. */
.np-tournament .npt-lb-rows li{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff;
}
.np-tournament .npt-lb-rows li:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.np-tournament .npt-lb-rows .player{color:#fff}
.np-tournament .npt-lb-rows .points{color:rgba(255,255,255,.55)}
.np-tournament .npt-lb-rows .prize{color:#fff}
.np-tournament .npt-lb-rows li:hover .player{color:#FFE368}
.np-tournament .npt-info{max-width:500px}

/* Daily promo (dark already) — stays as-is */

/* About section */
.about h2{color:#fff}
.about p{color:rgba(255,255,255,.75)}
.about a{color:var(--yellow);border-color:var(--yellow)}
.fact{background:var(--paper-2);border-color:var(--rule)}
.fact h4{color:#fff}
.fact p{color:rgba(255,255,255,.6)}

/* Live bets board */
.lb-board{
  background:#111149;
  border:1px solid rgba(255,255,255,.14);
  padding:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 50px -18px rgba(0,0,0,.62);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
.lb-board::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url('../assets-new/live-bets/live-bets-bg-v2-london-skyline-edges.webp') center top / 100% auto no-repeat;
  opacity:.74;
  filter:saturate(1.1) contrast(1.02) brightness(.92);
}
.lb-board::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,46,.18) 0%, rgba(10,10,46,.44) 42%, rgba(10,10,46,.62) 100%),
    radial-gradient(circle at 50% 52%, rgba(10,10,46,.34), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(0,196,210,.08), transparent 32%),
    radial-gradient(circle at 16% 22%, rgba(230,0,126,.07), transparent 30%);
}
.lb-board > *{position:relative;z-index:2}
.lb-board .lb-live{
  background:var(--red);
  color:#fff;
  box-shadow:0 0 22px rgba(237,27,46,.26);
}
.lb-tabs{
  margin:0 0 16px;
  padding:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.lb-tab{color:rgba(255,255,255,.62)}
.lb-tab:hover{color:#fff}
.lb-tab.on{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 20px -12px rgba(0,0,0,.5);
}
.lb-table{border-spacing:0 5px}
.lb-table th{
  color:rgba(255,255,255,.50);
  padding:5px 14px 6px;
}
.lb-table td{
  padding:8px 14px;
  font-size:12.5px;
  background:rgba(255,255,255,.075);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.lb-table td:first-child{
  border-left:1px solid rgba(255,255,255,.10);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}
.lb-table td:last-child{
  border-right:1px solid rgba(255,255,255,.10);
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}
.lb-table tr:hover td{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
}
.lb-game .nm{color:#fff}
.lb-game .nm:hover{color:var(--yellow)}
.lb-game .thm{
  width:26px;height:26px;
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.lb-time,.lb-user{color:rgba(255,255,255,.55)}
.lb-mult{color:var(--yellow)}
.lb-mult.zero{color:var(--yellow);font-weight:900}
.lb-pay{color:#fff}
.lb-pay.zero{color:rgba(255,255,255,.50)}
.lb-pay .coin{background:var(--yellow);color:var(--brand-navy)}
.lb-pay.zero .coin{background:var(--yellow);color:var(--brand-navy)}

/* Footer */
.footer{background:var(--nav-surface);border-color:var(--rule)}
.foot-brand .copy{color:rgba(255,255,255,.55)}
.foot-brand .socials a{background:var(--paper-2);color:#fff}
.foot-brand .socials a:hover{background:var(--yellow);color:var(--brand-navy)}
.foot-col h5{color:rgba(255,255,255,.45)}
.foot-col a{color:rgba(255,255,255,.7)}
.foot-bot{border-color:var(--rule)}
.foot-bot .legal{color:rgba(255,255,255,.55)}
.foot-bot .legal b{color:#fff}
.foot-bot .badges .b{background:var(--paper-2);color:#fff}
.foot-bot .badges .b.age{background:var(--yellow);color:var(--brand-navy)}

/* Mobile bottom nav */
/* Mobile bottom nav — LIQUID GLASS. Translucent dark navy background
   with strong backdrop blur + saturation, so content scrolling behind
   the bar bleeds through faintly and the nav reads as a frosted pane
   "lit" by whatever's underneath. Inset top highlight gives it the
   glass-edge feel; outer drop-shadow keeps it floating off the canvas. */
.mb-nav{
  background:rgba(10,10,46,.55) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 -8px 24px -10px rgba(0,0,0,.6) !important;
}
.mb-item{color:rgba(255,255,255,.55)}
.mb-item .mb-ico{color:rgba(255,255,255,.7)}
.mb-item:hover{color:#fff}
.mb-item:hover .mb-ico{color:#fff}
.mb-item.active{color:#fff}
.mb-item.active .mb-ico{background:var(--yellow);color:var(--brand-navy)}
.mb-item.active .mb-ico svg{color:var(--brand-navy)}

/* Misc inversions for things that used --ink as a background colour */
::selection{background:var(--yellow);color:var(--brand-navy)}
.hero-arrow:hover{background:var(--paper-3);color:#fff;border-color:var(--rule-2)}
.hero-dots .d.active{background:var(--yellow)}
.sec-head .more .count{background:var(--yellow);color:var(--brand-navy)}
/* yellow reserved for buttons + amount counters only — labels/pills/tags
   AND section / card icon chips use magenta (brand accent) instead */
.game .tag.buy{background:var(--magenta);color:#fff}
.lg-tag.t-yellow{background:var(--magenta) !important;color:#fff !important}
.npt-pill{background:var(--red) !important;color:#fff !important}
.sec-head .ico.t-yellow{background:var(--yellow) !important;color:var(--brand-navy) !important}
.fact .ico.t-yellow{background:var(--yellow) !important;color:var(--brand-navy) !important}  /* yellow chip with navy icon — high contrast, brand-aligned */
.orig-card,.game{background:var(--paper)}                  /* image-fallback bg */
.sec-head .ico.t-navy{background:var(--brand-navy);color:#fff}        /* preserve navy ico chip */
.fact .ico.t-navy{background:var(--brand-navy);color:#fff}            /* preserve navy fact chip — prevents white-on-white in dark mode */
.fact .ico.t-blue{background:var(--brand-navy-2);color:#fff}          /* 6th unique brand colour — brighter navy-blue, distinct from cyan + t-navy */
.sec-head .ico.t-blue{background:var(--brand-navy-2);color:#fff}      /* same shade available for section headings if needed */
.fact .ico.t-gray{background:var(--ink-soft);color:#fff}              /* neutral grey chip — uses the body-text grey for harmony */
.sec-head .ico.t-gray{background:var(--ink-soft);color:#fff}

/* Latest Wins — CTA on card 1 + ticker strip both used --ink as bg
   (which inverts to white in dark). Flip to readable variants. */
.ngc-cta{background:var(--yellow);color:var(--brand-navy);box-shadow:0 6px 0 -2px rgba(255,204,0,.32)}
.ngc-cta:hover{background:#FFD93D;box-shadow:0 8px 0 -2px rgba(255,204,0,.42)}
.ngc-cta:active{box-shadow:0 3px 0 -2px rgba(255,204,0,.28)}
.np-wins-ticker{background:var(--paper-2);border:1px solid var(--rule)}
.np-wins-ticker .lt-item{color:rgba(255,255,255,.8)}
.np-wins-ticker .lt-item .pl{color:#fff}
/* small focus ring (was navy outline) */
:focus-visible{outline-color:var(--yellow)}

/* ============================================================
   DARK GLASS POLISH — surfaces that shipped flat (no inset highlight /
   no lift shadow). Add the dark-glass vocabulary: subtle white inset
   top-highlight + dark inset bottom-shadow + soft drop, so they match
   the rest of the liquid-glass system (and the light-theme equivalents).
   ============================================================ */
/* Header Log In — glass pill matching the sidebar Log In treatment */
.login{
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 4px 12px -4px rgba(0,0,0,.45) !important;
}
.login:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 100%) !important;
  border-color:rgba(255,255,255,.26) !important;
  transform:translateY(-1px);
}
/* Latest Wins board — dark glass tray */
.np-wins-board{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 28px -10px rgba(0,0,0,.5) !important;
}
/* Latest Wins cards — dark glass with top highlight + lift */
.np-glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 22px -10px rgba(0,0,0,.5) !important;
}
.np-glass-card:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%) !important;
  border-color:rgba(255,255,255,.18) !important;
}
.np-wins-grid .np-glass-card:nth-child(1){
  --win-bg:url('../assets-new/winner-bgs/winner-total-jackpot-bg.webp');
  --win-pos:72% center;
  --win-glow:255,204,0;
}
.np-wins-grid .np-glass-card:nth-child(2){
  --win-bg:url('../assets-new/winner-bgs/winner-month-crown-bg.webp');
  --win-pos:76% center;
  --win-glow:230,0,126;
}
.np-wins-grid .np-glass-card:nth-child(3){
  --win-bg:url('../assets-new/winner-bgs/winner-daily-diamond-bg.webp');
  --win-pos:78% center;
  --win-glow:0,196,210;
}
.np-wins-grid .np-glass-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg, rgba(10,10,46,.88) 0%, rgba(10,10,46,.62) 48%, rgba(10,10,46,.18) 100%),
    var(--win-bg);
  background-size:cover;
  background-position:center, var(--win-pos);
  pointer-events:none;
}
.np-wins-grid .np-glass-card::after{
  z-index:1;
  background:radial-gradient(circle at 78% 22%, rgba(var(--win-glow), .22), transparent 56%);
}
.np-wins-grid .ngc-mascot{display:none}
/* Tournament panel — add inset top-highlight + soft lift (border already white) */
.np-tournament{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 36px -14px rgba(0,0,0,.55) !important;
}
.np-tournament .npt-info,
.np-tournament .npt-leaderboard,
.np-tournament .npt-cta-mobile{position:relative;z-index:3}
.np-tournament .npt-mascot{z-index:2}
@media (max-width: 1023px){
  .np-tournament{
    display:block;
    min-height:auto;
    padding-bottom:28px;
  }
  .np-tournament::before{
    background-size:auto 108%;
    background-position:62% center;
    opacity:1;
    filter:saturate(1.12) contrast(1.04);
  }
  .np-tournament::after{
    background:
      linear-gradient(180deg, rgba(10,10,46,.92) 0%, rgba(10,10,46,.80) 40%, rgba(10,10,46,.50) 70%, rgba(10,10,46,.34) 100%),
      radial-gradient(circle at 84% 82%, rgba(230,0,126,.28), transparent 48%),
      radial-gradient(circle at 38% 88%, rgba(0,196,210,.22), transparent 44%),
      radial-gradient(circle at 48% 96%, rgba(255,204,0,.16), transparent 32%);
  }
  .np-tournament .npt-info{
    max-width:none;
  }
  .npt-leaderboard{
    margin-top:22px;
    width:100%;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  }
}
@media (max-width: 767px){
  .npt-title{
    font-size:clamp(30px, 9vw, 42px);
    line-height:1.02;
  }
  .npt-prize .val{font-size:clamp(38px, 12vw, 46px)}
  .npt-countdown{gap:8px}
  .npt-countdown .u{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.16);
  }
  .npt-cta-mobile{
    margin-top:24px;
  }
  .lb-board{
    padding:12px 10px 14px;
    border-radius:18px;
    background:#111149;
  }
  .lb-board::before{
    background-size:auto 100%;
    background-position:78% top;
    opacity:.58;
    filter:saturate(1.04) contrast(1) brightness(.86);
  }
  .lb-board::after{
    background:
      linear-gradient(180deg, rgba(10,10,46,.36) 0%, rgba(10,10,46,.56) 44%, rgba(10,10,46,.72) 100%),
      radial-gradient(circle at 50% 48%, rgba(10,10,46,.30), transparent 42%),
      radial-gradient(circle at 84% 18%, rgba(0,196,210,.06), transparent 34%),
      radial-gradient(circle at 12% 24%, rgba(230,0,126,.05), transparent 32%);
  }
  .lb-tabs{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .lb-scroll{
    max-height:316px;
  }
  .lb-table{
    min-width:720px;
  }
  .lb-table td{
    padding:8px 10px;
    white-space:nowrap;
  }
}
/* About-us cards — dark glass */
.fact{
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 18px -8px rgba(0,0,0,.45) !important;
}
/* Footer badges — subtle dark glass chip */
.foot-bot .badges .b{
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px -3px rgba(0,0,0,.4) !important;
}
.foot-bot .badges .b.age{background:var(--yellow) !important;color:var(--brand-navy) !important;border:0 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5) !important}
.foot-bot .badges .b.seal{background:transparent !important;border:0 !important;box-shadow:none !important}

/* Touch/mobile: no hover state - game-card overlays stay hidden and non-interactive
   so tiles read as plain images (tapping does nothing for now). */
@media (hover: none){
  .game-overlay{opacity:0 !important;pointer-events:none !important}
}

/* Print override (dark body) */
@media print{ body{background:#fff} }

/* ============================================================
   HOME DARK — two-card landscape hero on desktop
   Default hero shows 3 cards side-by-side; on Home Dark we show
   TWO landscape-rectangular cards filling the row. The remaining
   cards in the 8-card carousel are reached via dots. Mobile keeps
   its existing 2-up layout untouched.

   Fonts are capped (the base hero uses container-query units, which
   would over-scale on the wider cards) and the lion mascot uses
   object-position:cover to show face + thumbs without cropping the head.
   ============================================================ */
@media (min-width: 1024px){
  /* TWO landscape cards filling the row, 16px gap */
  .hero-track{grid-auto-columns:calc((100% - 16px) / 2) !important}
  /* taller landscape cards give the integrated hero artwork enough room
     to read as a scene rather than a cropped banner stripe. */
  .hero-card{
    height:320px;min-height:320px;padding:26px 30px;
    overflow:visible;
  }
  /* type bumped a touch for better presence */
  .hero-card .hc-eb{font-size:12.5px;letter-spacing:.16em}
  /* H2 max TWO lines — overrides the base text-wrap:balance (which forces
     "Your Lucky Day" into 3 single-word lines). `pretty` allows natural
     wrapping; line-clamp:2 guarantees nothing ever spills to a 3rd line. */
  .hero-card h2{
    font-size:38px;margin:12px 0 12px;line-height:1.04;letter-spacing:-.018em;
    text-wrap:pretty;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hero-card .bonus{font-size:16px;line-height:1.42;margin:0}
  /* push CTA to the bottom of the card so the eyebrow's top-gap equals
     the CTA's bottom-gap (both = padding). Closes the dead space below. */
  .hero-card .ctas{margin-top:auto}
  .hero-card .cta{height:50px;padding:0 26px;font-size:15px;gap:8px}
  .hero-card .cta svg{width:15px;height:15px}
  /* keep text + ctas in the left half so the lion has room on the right */
  .hero-card .hc-eb,
  .hero-card h2,
  .hero-card .bonus,
  .hero-card .ctas{max-width:58%}
  /* mascot — 40% of card width, full card height; cropped to face+thumbs.
     clip-path matches the card's bottom-right corner radius so the heavy
     drop-shadow filter doesn't leak past the rounded edge. */
  .hero-card .mascot{
    width:40%;
    height:100%;
    top:0;bottom:0;right:0;
    object-fit:cover;
    object-position:right 38%;
    clip-path:inset(0 0 0 0 round 0 var(--r-card) var(--r-card) 0);
  }
}


/* mobile: maximize header logo within the 64px bar (4px top/bottom clearance) */
@media(max-width:767px){.header-logo-img{height:44px}}

/* mobile: language trigger = circular flag-only button (matches the round login/signup) */
@media(max-width:767px){
  .header .lang{width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:50%}
  .header .lang .lang-code{display:none}
  .header .lang > svg{display:none}
  .header .lang .lang-flag{width:22px;height:22px}
}

/* ============================================================
   UNIFIED GOLD BUTTONS — every yellow CTA adopts the hero CTA
   treatment (gradient, navy ink, gold border + glow). No sheen.
   Font case/size per-button unchanged.
   ============================================================ */
.signup, .sb-sign-up, .filter-btn, .ngc-cta, .npt-cta, .benefit .b-cta{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#FFE588 0%,#FFCC00 52%,#E2A600 100%) !important;
  color:#101049 !important;
  border:1px solid rgba(255,236,150,.65) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(160,98,0,.30),
    0 12px 24px -12px rgba(255,204,0,.65),
    0 0 22px -10px rgba(255,204,0,.5) !important;
}
.signup:hover, .sb-sign-up:hover, .filter-btn:hover, .ngc-cta:hover, .npt-cta:hover, .benefit .b-cta:hover{
  transform:translateY(-2px);
  filter:saturate(1.05) brightness(1.03);
  /* re-assert the base gold — an older hover rule swaps the gradient with !important */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#FFE588 0%,#FFCC00 52%,#E2A600 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(160,98,0,.30),
    0 12px 24px -12px rgba(255,204,0,.65),
    0 0 22px -10px rgba(255,204,0,.5) !important;
}
.signup:active, .sb-sign-up:active, .filter-btn:active, .ngc-cta:active, .npt-cta:active, .benefit .b-cta:active{
  transform:translateY(1px);
}

/* hero slider CTAs: white -> unified gold treatment (matches all yellow buttons).
   !important required: the dark-theme white-pill rule above also uses !important. */
.hero-card .ctas .cta,
.hero-card.has-art .ctas .cta{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#FFE588 0%,#FFCC00 52%,#E2A600 100%) !important;
  color:#101049 !important;
  border:1px solid rgba(255,236,150,.65) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(160,98,0,.30),
    0 12px 24px -12px rgba(255,204,0,.65),
    0 0 22px -10px rgba(255,204,0,.5) !important;
}
.hero-card .ctas .cta:hover,
.hero-card.has-art .ctas .cta:hover{
  transform:translateY(-2px);
  filter:saturate(1.05) brightness(1.03);
}
.hero-card .ctas .cta:active,
.hero-card.has-art .ctas .cta:active{transform:translateY(1px)}

/* optical: dark VPN pill reads smaller than the bright 18+/GCB blocks — +2px compensation */
.foot-brand .badges .b.vpn{height:40px;min-height:40px}

/* collapsed rail: clicking a nav icon toggles .is-open (submenu state), but subs
   never render collapsed — suppress its panel paint so clicks leave no "active" look.
   Hover styling untouched. */
.collapsed .nav-item.is-open{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}

/* collapsed: fold button sits inside the rail next to the glass chips — drop the
   opaque navy base so its fill matches them exactly (expanded keeps navy: it
   floats over scrolling page content and needs the backing) */
.collapsed .fold-edge{
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
}
.collapsed .fold-edge:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
}

/* collapsed chips: VIP Club (neon yellow) + Daily Bonus (neon blue) join the tinted family */
.collapsed .nav-item[data-tooltip="Daily Bonus"] .ni-ico{
  background:linear-gradient(135deg, rgba(44,89,255,.22) 0%, rgba(44,89,255,.06) 100%) !important;
  border-color:rgba(44,89,255,.40) !important;
}
.collapsed .nav-item[data-tooltip="Daily Bonus"] .ni-ico .np-icon{color:#5C85FF}

/* collapsed rail: compress ONLY as much as needed so all icons stay visible.
   Full 46px chips survive down to ~860px windows; size drops kick in late. */
@media (min-width:1024px) and (max-height:960px){
  .collapsed .nav-item{padding:10px 0}   /* chips stay 46px — trim air only */
}
@media (min-width:1024px) and (max-height:850px){
  .collapsed .nav-item{padding:8px 0}
  .collapsed .nav-item .ni-ico{width:42px;height:42px;border-radius:11px}
  .collapsed .nav-item .ni-ico svg{width:25px;height:25px;font-size:25px}
  .collapsed .nav-section{padding:10px 12px 5px}
}
@media (min-width:1024px) and (max-height:750px){
  .collapsed .nav-item{padding:6px 0}
  .collapsed .nav-item .ni-ico{width:38px;height:38px;border-radius:10px}
  .collapsed .nav-item .ni-ico svg{width:23px;height:23px;font-size:23px}
  .collapsed .nav{padding-top:34px}
}
@media (min-width:1024px) and (max-height:680px){
  .collapsed .nav-item{padding:4px 0}
  .collapsed .nav-item .ni-ico{width:34px;height:34px;border-radius:9px}
  .collapsed .nav-item .ni-ico svg{width:20px;height:20px;font-size:20px}
  .collapsed .nav-section{padding:6px 12px 3px}
}

/* EXPANDED sidebar: fit without scrolling at any desktop height (air first, sizes late) */
@media (min-width:1024px) and (max-height:920px){
  .sidebar .nav-item{padding:10px 14px}
  .sb-market{margin-top:8px}
  .layout:not(.collapsed) .fold-edge{top:14px}   /* keep handle centered on the market toggle */
  .sb-bonus{padding:10px 14px;margin:4px 22px}
  .sb-socials{margin:8px 22px 10px;padding-top:10px}
  .sb-lang{height:40px;margin-bottom:12px}
}
@media (min-width:1024px) and (max-height:820px){
  .sidebar .nav-item{padding:8px 14px}
  .sidebar .nav{margin-top:8px}
  .sb-bonus{padding:8px 12px;gap:8px}
  .sb-lang{height:38px;margin-bottom:10px}
}
@media (min-width:1024px) and (max-height:750px){
  .sb-socials{display:none}
}
@media (min-width:1024px) and (max-height:680px){
  .sidebar .nav-item{padding:6px 14px}
  .sb-lang{margin-bottom:6px}
  .sb-market{margin-top:6px;margin-bottom:5px}
  .layout:not(.collapsed) .fold-edge{top:12px}
}

/* collapsed rail: clear air between the expand handle and the first chip */
.collapsed .nav{padding-top:64px}
@media (min-width:1024px) and (max-height:750px){
  .collapsed .nav{padding-top:58px}
}

/* ============================================================
   HERO R1 — scene slider, gold display title on the scene,
   docked glass action bar. Cyan accent. Chevrons + counter nav.
   ============================================================ */
.k1{--acc:0,196,210;position:relative;overflow:hidden;isolation:isolate;border-radius:0;background:#070a26;
  height:clamp(396px,31vw,446px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.hero-k1{margin:calc(-1 * 24px) calc(-1 * var(--gutter)) -36px;padding-top:0}
.hero-k1 .k1{height:calc(clamp(396px,31vw,446px) + var(--header-h))}
.k1-arts .k1-art{position:absolute;inset:0;background-image:var(--art-d);background-size:auto;background-position:center center;opacity:0;
  transition:opacity .65s ease}
/* slider wider than the art's natural 1829px: never scale — instead a fade
   (collapses to nothing at normal widths) melts the art's left edge into the dark */
.k1-arts::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, #070a26 0, #070a26 calc(50% - 914px), rgba(7,10,38,0) calc(50% - 730px)),
  linear-gradient(270deg, #070a26 0, #070a26 calc(50% - 914px), rgba(7,10,38,0) calc(50% - 730px))}
.k1-arts .k1-art.on{opacity:1}
.k1-vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(180deg, rgba(5,7,29,.82) 0%, rgba(5,7,29,.46) var(--header-h), rgba(5,7,29,0) calc(var(--header-h) + 84px)),
  linear-gradient(90deg, rgba(4,6,25,.56) 0%, rgba(6,8,31,.24) 44%, rgba(5,7,25,0) 70%),
  linear-gradient(270deg, rgba(4,6,25,.18) 0%, rgba(4,6,25,0) 14%),
  linear-gradient(180deg, rgba(3,4,24,0) calc(100% - 130px), rgba(3,4,24,.45) calc(100% - 68px), rgba(3,4,24,.92) calc(100% - 16px), #030418 100%)}
/* shared type */
.k1-bline2{margin:0;font-size:clamp(12.5px,1vw,14px);font-weight:600;line-height:1.4;color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
.k1-pct{font-weight:1000;line-height:.9;letter-spacing:-.02em;font-size:clamp(58px,6vw,86px);color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.6)}
.k1-eb{margin:0;font-weight:900;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(13px,1.15vw,15px);color:var(--yellow);
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
.k1-duo{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.2vw,30px)}
.k1-duo:empty{display:none}
.k1-duo .seg{display:flex;flex-direction:column;gap:2px;align-items:center}
.k1-duo .k{font-size:clamp(12px,1.05vw,14px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.95);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.k1-duo .v{font-size:clamp(28px,2.8vw,38px);font-weight:1000;line-height:1.02;color:var(--yellow);text-shadow:0 2px 0 rgba(160,98,0,.3),0 6px 18px rgba(0,0,0,.5)}
.k1-duo .dvd{width:1.5px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent)}
.k1-left{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;flex:0 0 auto}
.k1-left .k1-eb{max-width:280px;text-wrap:balance;line-height:1.35}
.k1-left .k1-bline2{max-width:300px;text-align:center}
.k1-split{width:1.5px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.38),transparent)}
.k1-right{display:flex;flex-direction:column;gap:12px;align-items:center;flex:1;min-width:0}
.k1-right .k1-cta{width:100%;max-width:430px}
.k1-pays{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.5vw,20px)}
.k1-pays img{height:12px;width:auto;object-fit:contain;opacity:.88}
.k1-pays img:nth-child(3),.k1-pays img:nth-child(4){height:14px}
.k1-pays img:nth-child(6){height:10px}
/* docked bar — centered, thick, homepage double frame */
.k1-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:5;isolation:isolate;border-radius:20px;
  width:min(840px, calc(100% - 2 * var(--gutter)));
  padding:22px 34px;display:flex;align-items:center;gap:34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--acc),.2), transparent 26%),
    linear-gradient(118deg, rgba(40,45,90,.52) 0%, rgba(28,32,70,.38) 35%, rgba(18,21,52,.28) 70%, rgba(14,16,44,.22) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(1.12);backdrop-filter:blur(12px) saturate(1.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px -20px rgba(0,0,0,.85)}
.k1-bar::before{content:'';position:absolute;inset:0;z-index:4;border-radius:20px;padding:1.6px;pointer-events:none;
  background:linear-gradient(132deg,#11e8ff 0%,#2c59ff 18%,#6b2de6 56%,#ff29d1 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.k1-bar::after{content:'';position:absolute;inset:9px;z-index:4;border-radius:13px;padding:1.3px;pointer-events:none;
  background:linear-gradient(135deg, rgba(150,235,255,.42) 0%, rgba(190,214,238,.05) 13%, rgba(190,214,238,.03) 50%, rgba(190,214,238,.05) 87%, rgba(255,135,225,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.k1-bar > *{position:relative;z-index:5}
.k1-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:clamp(52px,4.2vw,58px);padding:0 36px;border-radius:999px;cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--font);font-weight:900;text-transform:uppercase;font-size:clamp(18px,1.7vw,23px);line-height:1;white-space:nowrap;color:#101049;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),linear-gradient(180deg,#FFE588 0%,#FFCC00 52%,#E2A600 100%);
  border:1px solid rgba(255,236,150,.65);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 14px rgba(160,98,0,.3), 0 10px 22px -10px rgba(255,204,0,.6);
  transition:transform .15s, filter .15s}
.k1-cta .lbl{position:relative;z-index:1}
.k1-cta::before{content:'';position:absolute;top:-34%;bottom:-34%;width:32%;left:-42%;transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);opacity:.62;animation:k1Sheen 3.2s ease-in-out infinite}
@keyframes k1Sheen{0%,58%{left:-42%}78%,100%{left:112%}}
.k1-cta:hover{transform:translateY(-2px);filter:saturate(1.05) brightness(1.03)}
.k1-cta:active{transform:translateY(1px)}
/* swap choreography */
.k1-bar > *{transition:opacity .35s ease, transform .35s ease}
.k1.swap .k1-bar > *{opacity:0;transform:translateY(10px)}
/* radio dots (original casino style) — pinned UNDER the promo box, tracking it */
.k1-dots{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;z-index:6}
.k1-dots .d{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);
  transition:background .2s, width .25s;cursor:pointer;border:0;padding:0}
.k1-dots .d:hover{background:rgba(255,255,255,.55)}
.k1-dots .d.active{background:var(--yellow);width:24px;border-radius:4px}
/* dots stay solid during the content swap */
.k1.swap .k1-bar > .k1-dots{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion: reduce){.k1-cta::before{animation:none}.k1-bar > *{transition:none}}
@media (max-width:1023px){
  .hero-k1{margin-bottom:-32px}
  .hero-k1 .k1{height:calc(430px + var(--header-h))}
  /* portrait art: slight over-zoom anchored to the bottom crops the dead sky above the subject */
  .k1-arts .k1-art{background-image:var(--art-m);background-size:auto 118%;background-position:center bottom}
  .k1-bar{left:12px;right:12px;width:auto;top:auto;transform:none;bottom:26px;flex-direction:column;justify-content:flex-start;gap:5px;
    padding:12px 16px 10px;text-align:center}
  .k1-left,.k1-right{display:contents}
  .k1-split{display:none}
  .k1-dots{top:calc(100% + 9px)}
  .k1-eb{order:1;font-size:11px}.k1-pct{order:2;font-size:35px}.k1-duo{order:3}.k1-bline2{order:4;font-size:12px;max-width:none}
  .k1-cta{order:5;min-height:38px;font-size:14px;width:100%;margin-top:4px}.k1-pays{order:6;gap:12px;margin-top:2px}
  .k1-duo .v{font-size:19px}.k1-duo .k{font-size:10px}
  .k1-pays img{height:11px}
  .k1-pays img:nth-child(3),.k1-pays img:nth-child(4){height:13px}
  .k1-pays img:nth-child(6){height:9px}
  .k1-pct{font-size:54px}
  .k1-duo .v{font-size:28px}
  .k1-cta{width:100%;min-height:46px;font-size:16px}
}
/* mobile: hide the provider dropdown + search bar to give the lobby more room (desktop keeps both) */
@media (max-width:767px){
  .provider-dd{display:none}
  .lobby-search{display:none}
  .lobby-games{margin-top:4px}
  /* search cat-tab reveals both bars, stacked */
  body.search-open .lobby-search{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
  body.search-open .provider-dd{display:block}
  body.search-open .lobby-games{margin-top:14px}
}
@media (min-width:768px){
  .lobby-search{margin-top:0}   /* labels -> search = 14px */
  body.search-folded .lobby-search{display:none}   /* lit icon clicked again -> fold, like mobile */
}

.k1-cta .ico{display:inline-flex;width:.95em;height:.95em;position:relative;z-index:1}
.k1-cta .ico svg{width:100%;height:100%}

/* ============================================================
   GAME TILE IDLE EFFECTS — applied by the fx applier at the end
   of the main script (2 per game row/section, varied positions)
   ============================================================ */
.fx-pulse .game-img,.fx-pulse .lg-img{animation:fxPulse 4.2s ease-in-out infinite}
@keyframes fxPulse{0%,72%,100%{transform:scale(1)}82%{transform:scale(1.055)}92%{transform:scale(1)}}
.fx-pulse::before,.fx-pulse::after{content:'';position:absolute;width:14px;height:14px;z-index:3;opacity:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,rgba(255,255,255,0) 60%),
    conic-gradient(from 0deg, transparent 0 40deg, rgba(255,255,255,.9) 45deg, transparent 50deg, transparent 130deg, rgba(255,255,255,.9) 135deg, transparent 140deg, transparent 220deg, rgba(255,255,255,.9) 225deg, transparent 230deg, transparent 310deg, rgba(255,255,255,.9) 315deg, transparent 320deg)}
.fx-pulse::before{top:26%;left:30%;animation:fxTwinkle 4.2s ease-in-out infinite}
.fx-pulse::after{top:52%;left:64%;width:10px;height:10px;animation:fxTwinkle 4.2s .25s ease-in-out infinite}
@keyframes fxTwinkle{0%,76%,98%,100%{opacity:0;transform:scale(.4) rotate(0deg)}84%{opacity:1;transform:scale(1.15) rotate(40deg)}90%{opacity:.4;transform:scale(.7) rotate(70deg)}}

.fx-shine::before{content:'';position:absolute;top:-40%;bottom:-40%;width:34%;left:-50%;z-index:3;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);animation:fxShine 5s ease-in-out infinite}
@keyframes fxShine{0%,62%{left:-50%}80%,100%{left:120%}}

.fx-excl{box-shadow:0 0 0 2.5px var(--yellow), var(--shadow-sm)}
.fx-pink{box-shadow:0 0 0 2.5px #E6007E, var(--shadow-sm)}
.fx-purp{box-shadow:0 0 0 2.5px #7C1FBE, var(--shadow-sm)}
.fx-cyanl{box-shadow:0 0 0 2.5px #00C4D2, var(--shadow-sm)}
.fx-excl,.fx-pink,.fx-purp,.fx-cyanl{overflow:visible}
.fx-excl .lg-img,.fx-excl .game-img,.fx-excl .game-overlay,
.fx-pink .lg-img,.fx-pink .game-img,.fx-pink .game-overlay,
.fx-purp .lg-img,.fx-purp .game-img,.fx-purp .game-overlay,
.fx-cyanl .lg-img,.fx-cyanl .game-img,.fx-cyanl .game-overlay{border-radius:var(--r-tile)}
.fx-lblrow{padding-top:16px !important;margin-top:-16px !important}
.fx-pink .fx-xbadge{background:#E6007E;color:#fff}
.fx-purp .fx-xbadge{background:#7C1FBE;color:#fff}
.fx-cyanl .fx-xbadge{background:#00C4D2;color:#101049}
.fx-pink::after,.fx-purp::after,.fx-cyanl::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
  background-size:240% 100%;background-position:130% 0;animation:fxFlipGloss 6s 1.2s ease-in-out infinite}
.fx-excl::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
  background-size:240% 100%;background-position:130% 0;animation:fxFlipGloss 6s 1.2s ease-in-out infinite}
.fx-xbadge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:#101049;border-radius:999px;
  font:900 10.5px var(--font);letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;white-space:nowrap;
  max-width:200px;overflow:hidden;animation:fxBadge 6s ease-in-out infinite}
.fx-xbadge svg{width:11px;height:11px;flex:none}
.fx-xbadge .lb{animation:fxBadgeLb 6s ease-in-out infinite}
@keyframes fxBadge{0%,38%{max-width:200px}50%,82%{max-width:33px}94%,100%{max-width:200px}}
@keyframes fxBadgeLb{0%,38%{opacity:1}48%,84%{opacity:0}96%,100%{opacity:1}}

.fx-foil::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg, transparent 30%, rgba(255,60,220,.55) 41%, rgba(80,255,255,.55) 50%, rgba(255,230,80,.5) 59%, transparent 70%);
  background-size:280% 280%;background-position:120% 120%;animation:fxFoil 6.5s ease-in-out infinite}
@keyframes fxFoil{0%,55%{background-position:120% 120%}85%,100%{background-position:-20% -20%}}

/* trace family: span injected by the applier */
.fxring{position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none}
.fxring::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
@property --t{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes fxTrace{0%{--t:0deg;opacity:0}8%{opacity:1}46%{--t:360deg;opacity:1}54%{--t:360deg;opacity:0}100%{--t:360deg;opacity:0}}
.fx-atrace .fxring::before{background:conic-gradient(from var(--t,0deg), transparent 0 55%, rgba(255,204,0,.25) 70%, #FFE588 88%, #fff 92%, transparent 100%);
  animation:fxTrace 6s ease-in-out infinite}
.fx-ptrace .fxring::before{background:conic-gradient(from var(--t,0deg), transparent 0 55%, rgba(230,0,126,.25) 70%, #FF5CA8 88%, #fff 92%, transparent 100%);
  animation:fxTrace 6s .4s ease-in-out infinite}
.fx-utrace .fxring::before{background:conic-gradient(from var(--t,0deg), transparent 0 55%, rgba(124,31,190,.3) 70%, #B05CFF 88%, #fff 92%, transparent 100%);
  animation:fxTrace 6s .8s ease-in-out infinite}
.fx-ctrace .fxring::before{background:conic-gradient(from var(--t,0deg), transparent 0 55%, rgba(0,196,210,.25) 70%, #5CE8F2 88%, #fff 92%, transparent 100%)}
.fx-ctrace .fxring::before{animation:fxTrace 6s 1.2s ease-in-out infinite}
.fx-ntrace .fxring::before{background:conic-gradient(from var(--t,0deg), transparent 0 50%, rgba(17,232,255,0) 56%, rgba(17,232,255,.85) 68%, #2c59ff 78%, #6b2de6 86%, #ff29d1 93%, transparent 100%);
  animation:fxTrace 6s 1s ease-in-out infinite}

.fx-flip{background:#0b0e2c}
.fx-flip .game-img,.fx-flip .lg-img{animation:fxFlip 5.4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes fxFlip{0%,70%,100%{transform:perspective(700px) rotateY(0)}78%{transform:perspective(700px) rotateY(14deg)}86%{transform:perspective(700px) rotateY(-6deg)}93%{transform:perspective(700px) rotateY(2deg)}}
.fx-flip::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
  background-size:240% 100%;background-position:130% 0;animation:fxFlipGloss 5.4s ease-in-out infinite}
@keyframes fxFlipGloss{0%,70%{background-position:130% 0}88%,100%{background-position:-40% 0}}

.fx-pop .game-img,.fx-pop .lg-img{animation:fxPop 5s ease-in-out infinite}
@keyframes fxPop{0%,66%,100%{filter:saturate(.92) brightness(.96)}78%{filter:saturate(1.45) brightness(1.12);transform:scale(1.025)}90%{filter:saturate(1) brightness(1);transform:scale(1)}}

.fx-bb .tag,.fx-bb .badge,.fx-bb .lg-tag{animation:fxBb 3.8s ease-in-out infinite;transform-origin:center bottom}
@keyframes fxBb{0%,78%,100%{transform:scale(1) rotate(0)}84%{transform:scale(1.18) rotate(-4deg)}90%{transform:scale(.96) rotate(3deg)}95%{transform:scale(1.05) rotate(0)}}

.fx-shake{background:#0b0e2c}
.fx-shake .game-img,.fx-shake .lg-img{animation:fxShake 5.2s ease-in-out infinite}
@keyframes fxShake{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-1.6deg)}91%{transform:rotate(1.4deg)}94%{transform:rotate(-.8deg)}97%{transform:rotate(.5deg)}}

.fx-lev .game-img,.fx-lev .lg-img{animation:fxLev 5.6s cubic-bezier(.34,1.4,.64,1) infinite}
@keyframes fxLev{0%,72%,100%{transform:translateY(0) scale(1)}80%{transform:translateY(-6px) scale(1.02)}92%{transform:translateY(0) scale(1)}}
.fx-lev{animation:fxLevGlow 5.6s cubic-bezier(.34,1.4,.64,1) infinite}
@keyframes fxLevGlow{0%,72%,100%{box-shadow:var(--shadow-sm)}80%{box-shadow:0 18px 30px -14px rgba(0,0,0,.85), 0 0 24px -8px rgba(255,204,0,.4)}92%{box-shadow:var(--shadow-sm)}}

@media (prefers-reduced-motion: reduce){
  [class*="fx-"],[class*="fx-"]::before,[class*="fx-"]::after,
  [class*="fx-"] .game-img,[class*="fx-"] .tag,[class*="fx-"] .badge,.fxring::before{animation:none !important}
}

/* ============================================================
   CASINO FAQ — page H1 + native accordions in the house glass
   ============================================================ */
.faq{margin-top:var(--section-gap)}
.faq-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.faq-ico{width:46px;height:46px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));border:1px solid var(--rule-2)}
.faq-ico .np-icon{width:24px;height:24px;color:var(--yellow)}
.faq-head h1{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.01em;line-height:1.1}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{border-radius:16px;border:1px solid rgba(255,255,255,.08);overflow:hidden;
  background:linear-gradient(118deg, rgba(40,45,90,.26) 0%, rgba(28,32,70,.16) 45%, rgba(18,21,52,.10) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);backdrop-filter:blur(10px) saturate(1.08);
  transition:border-color .2s, background .2s}
.faq-item:hover{border-color:rgba(255,255,255,.16)}
.faq-item[open]{border-color:rgba(255,204,0,.32);
  background:linear-gradient(118deg, rgba(40,45,90,.34) 0%, rgba(28,32,70,.22) 45%, rgba(18,21,52,.14) 100%)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 20px;font-weight:700;font-size:15.5px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--yellow)}
.fq-chev{width:10px;height:10px;flex:none;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .25s;margin-top:-4px}
.faq-item[open] .fq-chev{transform:rotate(225deg);margin-top:4px}
.faq-a{padding:0 20px 18px;max-width:860px}
.faq-a p{margin:0;font-size:14px;font-weight:500;line-height:1.65;color:var(--ink-soft)}
@media (max-width:767px){
  .faq-head h1{font-size:20px}
  .faq-item summary{font-size:15px;padding:14px 16px}
  .faq-a{padding:0 16px 16px}
}


/* ===================== PROMOTIONS v7 — exact mockup glass boxes over one page BG ===================== */
.pv7-bg{position:fixed;inset:0;z-index:0;background:#050714 url('../assets-new/promotions/promotions-bg.webp') center top / cover no-repeat}
.pv7-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,7,20,.42) 0%, rgba(5,7,20,.60) 50%, rgba(5,7,20,.78) 100%)}
.pv7-wrap{position:relative;z-index:1}
.pv7-head{padding-top:calc(var(--header-h) + clamp(150px,30vh,400px));text-align:center}
.pv7-h1{margin:0;font:1000 clamp(32px,4.4vw,50px)/1 var(--font);letter-spacing:-.025em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.6)}
.pv7-sub{margin:12px auto 0;font:600 clamp(14px,1.2vw,16px)/1.5 var(--font);color:rgba(225,225,242,.82);max-width:580px}

/* aligned asymmetric grid: 3 cols, A spans 2 / C spans 1, rows stretch to equal height */
.pv7-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,430px));justify-content:center;align-items:stretch;gap:20px;max-width:880px;margin:clamp(14px,1.8vw,24px) auto 0}

/* === box base — copied verbatim from _casino-v3-mockups.html, namespaced === */
.pv7-matrix .box{position:relative;isolation:isolate;border-radius:20px;color:#fff;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--acc,0,196,210),.2), transparent 26%),
    linear-gradient(118deg, rgba(40,45,90,.52) 0%, rgba(28,32,70,.38) 35%, rgba(18,21,52,.28) 70%, rgba(14,16,44,.22) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(1.12);backdrop-filter:blur(12px) saturate(1.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px -20px rgba(0,0,0,.85);
  transition:transform .2s var(--ease-out)}
.pv7-matrix .box:hover{transform:translateY(-3px)}
.pv7-matrix .box::before{content:'';position:absolute;inset:0;z-index:4;border-radius:20px;padding:1.6px;pointer-events:none;
  background:linear-gradient(132deg,#11e8ff 0%,#2c59ff 18%,#6b2de6 56%,#ff29d1 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.pv7-matrix .box::after{content:'';position:absolute;inset:9px;z-index:4;border-radius:13px;padding:1.3px;pointer-events:none;
  background:linear-gradient(135deg, rgba(150,235,255,.42) 0%, rgba(190,214,238,.05) 13%, rgba(190,214,238,.03) 50%, rgba(190,214,238,.05) 87%, rgba(255,135,225,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.pv7-matrix .box>*{position:relative;z-index:5}
.pv7-matrix .eb{margin:0;font-weight:900;letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:var(--yellow);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.pv7-matrix .pct{font-weight:1000;line-height:.9;letter-spacing:-.02em;font-size:84px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.6)}
.pv7-matrix .bline{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pv7-matrix .duo{display:flex;align-items:center;gap:24px}
.pv7-matrix .duo .seg{display:flex;flex-direction:column;gap:2px;align-items:center}
.pv7-matrix .duo .k{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.95)}
.pv7-matrix .duo .v{font-size:34px;font-weight:1000;line-height:1.02;color:var(--yellow);text-shadow:0 2px 0 rgba(160,98,0,.3),0 6px 18px rgba(0,0,0,.5)}
.pv7-matrix .duo .dvd{width:1.5px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent)}
.pv7-matrix .cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 38px;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-weight:900;text-transform:uppercase;font-size:21px;line-height:1;white-space:nowrap;color:#101049;position:relative;overflow:hidden;border:1px solid rgba(255,236,150,.65);
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),linear-gradient(180deg,#FFE588 0%,#FFCC00 52%,#E2A600 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 14px rgba(160,98,0,.3), 0 10px 22px -10px rgba(255,204,0,.6);
  transition:transform .15s, filter .15s}
.pv7-matrix .cta:hover{transform:translateY(-2px);filter:brightness(1.03)}
.pv7-matrix .cta:active{transform:translateY(1px)}
.pv7-matrix .cta .crown{display:inline-flex;width:.9em;height:.9em}
.pv7-matrix .cta .crown svg{width:100%;height:100%}
.pv7-matrix .pv7-end{display:flex;flex-direction:column;align-items:center;gap:11px}
/* "More info" link — replaces the payment strip, centered under the CTA */
.pv7-matrix .pv7-more{align-self:center;font:800 13px/1 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.78);text-decoration:none;white-space:nowrap;transition:color .15s}
.pv7-matrix .pv7-more::after{content:" \203A";font-size:15px;opacity:.8}
.pv7-matrix .pv7-more:hover{color:#fff}
.pv7-matrix .split{width:1.5px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.38),transparent)}

/* A — wide split */
.pv7-matrix .box.a{grid-column:span 2;padding:28px 40px;display:flex;align-items:center;gap:36px}
.pv7-matrix .box.a .colL{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center}
.pv7-matrix .box.a .colR{display:flex;flex-direction:column;gap:12px;align-items:center;flex:1}
.pv7-matrix .box.a .colR .cta{width:100%;max-width:480px}
/* C — vertical card */
.pv7-matrix .box.c{grid-column:span 1;padding:24px 30px 20px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;text-align:center}
.pv7-matrix .box.c .pct{font-size:74px}
.pv7-matrix .box.c .cta{width:100%;min-height:50px;font-size:18px}
.pv7-matrix .box.c .pays{gap:14px}
.pv7-matrix .box.c .pays img{height:12px}
.pv7-matrix .box.c .pays img:nth-child(3),.pv7-matrix .box.c .pays img:nth-child(4){height:14px}
.pv7-matrix .box.c .pays img:nth-child(6){height:10px}

/* E — single-row ribbon */
.pv7-matrix .box.e{grid-column:span 2;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.pv7-matrix .box.e .stackL{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.pv7-matrix .box.e .eb{font-size:12px}
.pv7-matrix .box.e .pct{font-size:58px}
.pv7-matrix .box.e .duo .v{font-size:28px}
.pv7-matrix .box.e .bline{display:none}
.pv7-matrix .box.e .cta{min-height:52px;font-size:18px;padding:0 32px}
.pv7-matrix .box.e .payswrap{display:flex;flex-direction:column;gap:8px;align-items:center}

/* responsive */
@media (max-width:760px){
  .pv7-bg{background-image:url('../assets-new/promotions/promotions-bg-mobile.webp')}
  .pv7-head{padding-top:calc(var(--header-h) + clamp(150px,22vh,300px))}/* keep mobile push at its good value; desktop goes further */
  .pv7-matrix{grid-template-columns:minmax(0,1fr);max-width:460px;gap:14px;margin-top:0}
  /* every card renders as one identical centered column (like A) */
  .pv7-matrix .box.a,.pv7-matrix .box.c,.pv7-matrix .box.e{grid-column:span 1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:16px 16px 14px;max-width:none}
  /* flatten the wrapper divs so all children stack directly + uniformly (specificity matches the desktop .box.a/.box.e rules so it wins) */
  .pv7-matrix .box.a .colL,.pv7-matrix .box.a .colR,
  .pv7-matrix .box.e .stackL,.pv7-matrix .box.e .payswrap,
  .pv7-matrix .box .pv7-end{display:contents}
  .pv7-matrix .split{display:none}
  /* uniform element sizing + ordering across all cards */
  .pv7-matrix .box .eb{order:1;font-size:13.5px;line-height:1.1;letter-spacing:.24em;margin:0 0 5px}
  .pv7-matrix .box .pct{order:2;font-size:clamp(60px,18vw,74px);line-height:.92;margin:0 0 5px}
  .pv7-matrix .box .bline{order:4;display:block;font-size:15px;font-weight:800;line-height:1.3;margin:0 0 12px;max-width:34ch}
  .pv7-matrix .box.e .bline{display:block}/* re-expose E description on mobile (beats desktop .box.e .bline display:none) */
  .pv7-matrix .box .duo{order:3;justify-content:center;gap:clamp(26px,3vw,40px);margin:0 0 10px}
  .pv7-matrix .box .duo .v{font-size:33px}.pv7-matrix .box .duo .k{font-size:12.5px}
  .pv7-matrix .box .cta{order:5;width:100%;max-width:none;min-height:56px;font-size:21px;margin-top:0}
  .pv7-matrix .box .pv7-more{order:6;margin-top:12px}
}
@media (prefers-reduced-motion: reduce){.pv7-matrix .box,.pv7-matrix .cta{transition:none}}


/* ===== full-bleed video hero at the top of the promotions page (homepage-style) ===== */
.promo-vhero{position:relative;isolation:isolate;overflow:hidden;z-index:1;
  margin:calc(-1 * 24px) calc(-1 * var(--gutter)) 0;   /* break out of .main padding -> edge to edge */
  min-height:clamp(620px,64vw,860px);background:#050719}
.pvh-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;
  /* fallback shown before the video paints / if it fails to load (desktop; mobile overridden below) */
  background:#050719 url('../assets-new/hero-london-sets/national-play-london-hero-14-greenwich-peninsula-cash-cannon-desktop.webp') center / cover no-repeat;
  filter:saturate(1.24) contrast(1.12) brightness(.72)}
.pvh-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,7,25,.32) 0%, rgba(5,7,25,.08) 32%, transparent 56%, rgba(3,4,24,.34) 86%, rgba(3,4,24,.82) 100%),
    linear-gradient(90deg, rgba(4,6,25,.34) 0%, rgba(5,7,25,.04) 42%, rgba(5,7,25,.18) 100%)}
.pvh-content{position:relative;z-index:2;min-height:inherit;
  padding:calc(var(--header-h) + 36px) clamp(22px,3vw,40px) clamp(178px,20vw,300px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.pvh-content .pv7-h1{margin:0}
.pvh-content .pv7-sub{margin:12px auto 0}
/* left-aligned breadcrumb, same recipe as the inner promo-item .crumb. */
.pv7-crumb{position:absolute;left:50%;bottom:clamp(252px, calc(27vw + 10px), 376px);transform:translateX(-50%);font:700 13px/1.4 var(--font);color:rgba(255,255,255,.82);display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:min(880px, calc(100% - 44px));max-width:880px;margin:0;
  text-shadow:1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, 0 1px 3px rgba(0,0,0,1), 0 3px 22px rgba(0,0,0,.95)}
.pv7-crumb a{text-decoration:none;color:rgba(255,255,255,.7)}
.pv7-crumb a:hover{color:#fff}
.pv7-crumb h1,
.pv7-crumb .crumb-cur{margin:0;font:inherit;color:inherit;display:inline}
.pv7-title-mark{display:grid;grid-template-columns:minmax(84px,1fr) 26px minmax(84px,1fr);align-items:center;gap:18px;width:min(560px,86%);margin:0 auto 10px}
.pv7-title-mark span{height:1px;background:linear-gradient(90deg, transparent, rgba(255,204,0,.76))}
.pv7-title-mark span:last-child{background:linear-gradient(90deg, rgba(255,204,0,.76), transparent)}
.pv7-title-mark svg{width:26px;height:26px;color:var(--yellow);filter:drop-shadow(0 2px 8px rgba(0,0,0,.72))}
.pv7-hero-title{margin:0;color:var(--yellow);font:1000 clamp(42px,4.15vw,70px)/.9 var(--font);letter-spacing:.055em;text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.94), 0 0 34px rgba(255,204,0,.18)}
.pv7-hero-sub{max-width:50ch;margin:14px auto 0;color:rgba(255,255,255,.84);font:700 clamp(15px,1.35vw,18px)/1.55 var(--font);letter-spacing:0;text-shadow:0 3px 18px rgba(0,0,0,.88)}
/* pull the cards up close under the centred H1 */
.main-inner.pv7-wrap{position:relative;z-index:3;margin-top:clamp(-364px,-27vw,-225px)}
@media(max-width:760px){
  .promo-vhero{margin:calc(-1 * 18px) -14px 0;min-height:clamp(560px,140vw,720px)}
  .pvh-content{padding:calc(var(--header-h) + 74px) 18px 190px;justify-content:center}
  .pv7-crumb{left:18px;right:18px;bottom:196px;transform:none;width:auto;max-width:none}
  .pv7-title-mark{grid-template-columns:minmax(42px,1fr) 24px minmax(42px,1fr);gap:12px;width:min(360px,86%);margin-bottom:13px}
  .pv7-title-mark svg{width:24px;height:24px}
  .pv7-hero-title{font-size:clamp(38px,11vw,50px);line-height:.96;max-width:100%}
  .pv7-hero-sub{max-width:31ch;margin-top:12px;font-size:clamp(13.5px,4vw,15px);line-height:1.48}
  .main-inner.pv7-wrap{margin-top:-178px}
  /* portrait video/still is taller than the hero band -> anchor to TOP so the upper part (cannon, fireworks) shows; the cards cover the lower part anyway */
  .pvh-video{object-position:center 27%;background-position:center 27%;
    background-image:url('../assets-new/hero-london-sets/national-play-london-hero-14-greenwich-peninsula-cash-cannon-mobile.webp')}
}
/* flat page base colour behind the cards (no photo, matches the rest of the site) */
.pv7-bg{background:#030418}
.pv7-bg::after{display:none}
