/* ============================================================
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:#E6E2E1;
--ink-soft:#8C8584;
--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=#1B1819 (cards/header) > --paper-2=#161314 (body) */
--paper:#1B1819;
--paper-2:#161314;
--paper-3:#2A2627;
/* raised chrome (sticky header + footer) — one step lighter than the
sidebar (#161314) so the two nav surfaces read as distinct, not blended */
--nav-surface:#221E1F;
--rule:rgba(255,255,255,.08);
--rule-2:rgba(255,255,255,.16);
--brand-navy:#221E1F;
--brand-navy-2:#34302F;
--brand-navy-deep:#0E0C0C;
/* palette — tiers */
--red:#CB2126;
--red-deep:#AB1A1F;
--red-tint:#FFE8EB;
--magenta:#CB2126;
--magenta-tint:#FFE2F1;
--yellow:#CB2126;
--yellow-tint:#FFF4C4;
--yellow-deep:#AB1A1F;
--cyan:#CB2126;
--cyan-tint:#C9F3F6;
--cyan-deep:#00A0AC;
--purple:#34302F;
--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:#0E0C0C;
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
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(34,30,31,.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(203,33,38,.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(14,12,12,.82) 0%, rgba(14,12,12,.46) 52%, rgba(14,12,12,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(22,19,20,.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(30px, 3.6vw, 44px);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(203,33,38,.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(34,30,31,.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(34,30,31,.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(34,30,31,.28)}
.hero-card.c-yellow .cta:hover,
.hero-card.c-cyan .cta:hover{box-shadow:0 10px 0 -2px rgba(34,30,31,.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 (#0E0C0C), not
--paper-2 (#161314), or it paints a lighter patch on the dark body */
background:linear-gradient(90deg, rgba(14,12,12,0), #0E0C0C);
}
.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(34,30,31,.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(34,30,31,.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(34,30,31,.32), 0 6px 14px -4px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.12), 0 0 18px -6px rgba(203,33,38,.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,.30), rgba(255,255,255,0) 42%),linear-gradient(180deg,#E8373D 0%,#CB2126 50%,#9E161A 100%);
border:1px solid rgba(252,234,234,.65);
border-radius:var(--r-pill);
box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -6px 14px rgba(34,30,31,.3), 0 10px 22px -10px rgba(203,33,38,.6);
font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:#FFFFFF;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, #0E0C0C, rgba(14,12,12,0));opacity:0}
.row-wrap::after{right:-4px;background:linear-gradient(-90deg, #0E0C0C, rgba(14,12,12,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(34,30,31,.55) 0%, rgba(34,30,31,.45) 40%, rgba(34,30,31,.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, #E36669 0%, #CB2126 52%, #AB1A1F 100%);
color:#FFFFFF;
display:flex;align-items:center;justify-content:center;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.75),
inset 0 -3px 7px rgba(34,30,31,.35),
0 8px 18px -4px rgba(0,0,0,.5),
0 0 0 5px rgba(255,255,255,.12),
0 0 22px -6px rgba(203,33,38,.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(34,30,31,.35),
0 10px 24px -4px rgba(0,0,0,.55),
0 0 0 5px rgba(255,255,255,.2),
0 0 28px -4px rgba(203,33,38,.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(203,33,38,.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(34,30,31,.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(34,30,31,.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(34,30,31,.28);background:var(--ink-2)}
.npt-cta:active{transform:translateY(2px);box-shadow:0 4px 0 -2px rgba(34,30,31,.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(203,33,38,.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(34,30,31,.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(34,30,31,.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(203,33,38,.18), transparent 62%);
}
.np-glass-card:nth-child(2)::after{background:radial-gradient(circle, rgba(203,33,38,.16), transparent 62%)}
.np-glass-card:nth-child(3)::after{background:radial-gradient(circle, rgba(203,33,38,.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(34,30,31,.25);
transition:transform .15s var(--ease-out), box-shadow .15s;
}
.ngc-cta:hover{transform:translateY(-1px);box-shadow:0 8px 0 -2px rgba(34,30,31,.28);background:var(--ink-2)}
.ngc-cta:active{transform:translateY(2px);box-shadow:0 3px 0 -2px rgba(34,30,31,.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(34,30,31,.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)}
/* Antilles Remote Gaming Commission 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(203,33,38,.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%, #D83E43 100%);
box-shadow:
0 6px 16px -4px rgba(203,33,38,.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(34,30,31,.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(22,19,20,.96) 0%, rgba(22,19,20,.92) 48%, rgba(22,19,20,.70) 100%),
radial-gradient(circle at 76% 66%, rgba(203,33,38,.18), transparent 42%),
radial-gradient(circle at 64% 82%, rgba(203,33,38,.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(34,30,31,.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(22,19,20,.98) 0%, rgba(22,19,20,.94) 52%, rgba(22,19,20,.74) 100%),
radial-gradient(circle at 80% 72%, rgba(203,33,38,.14), transparent 46%),
radial-gradient(circle at 58% 88%, rgba(203,33,38,.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, #D83E43 0%, #CB2126 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(34,30,31,.18),
0 4px 16px -4px rgba(203,33,38,.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, #E36669 0%, #CB2126 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
inset 0 -1px 0 rgba(34,30,31,.18),
0 8px 24px -4px rgba(203,33,38,.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(203,33,38,.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 (#0E0C0C), a dim navy already
used elsewhere on the page (component gradients / focus rings). It sits
BETWEEN the page (--paper-2 #161314, darker) and the header/footer (--paper
#1B1819, 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:#161314;box-shadow:6px 0 18px -8px rgba(0,0,0,.55)}
.logo-block{background:#161314;border-bottom-color:var(--rule)}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{background:var(--yellow);color:var(--brand-navy)}
.nav-item.active .ni-ico{background:var(--brand-navy);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 #161314 rail) so the open group
reads as one contained block, not flat translucent gray */
background:linear-gradient(180deg, #34302F 0%, #1F1415 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, #1F1415 0%, #161314 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, #D83E43 0%, #CB2126 100%);
color:var(--brand-navy);
border:0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(34,30,31,.18),
0 4px 14px -4px rgba(203,33,38,.4);
}
.sb-sign-up:hover{
background:linear-gradient(180deg, #E36669 0%, #CB2126 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
0 6px 18px -4px rgba(203,33,38,.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 #161314 rail + gold hairline/glow
so the conversion card pops instead of fading into the dark */
background:linear-gradient(135deg, #341A1C 0%, #1F1415 100%);
border:1px solid rgba(203,33,38,.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(203,33,38,.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,") no-repeat center / contain;
mask:url("data:image/svg+xml;utf8,") 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:#1B1819;
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(203,33,38,.20) 0%, rgba(203,33,38,.06) 100%) !important;
border-color:rgba(203,33,38,.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(203,33,38,.20) 0%, rgba(203,33,38,.06) 100%) !important;
border-color:rgba(203,33,38,.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(203,33,38,.20) 0%, rgba(203,33,38,.06) 100%) !important;
border-color:rgba(203,33,38,.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(52,48,47,.22) 0%, rgba(52,48,47,.06) 100%) !important;
border-color:rgba(52,48,47,.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:#1B1819;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(203,33,38,.20),
0 6px 14px -2px rgba(203,33,38,.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 → 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(203,33,38,.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(34,30,31,.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(34,30,31,.55)}
.big-search-wrap .filter-btn{background:var(--yellow);color:var(--brand-navy)}
.big-search-wrap .filter-btn:hover{background:#D83E43}
/* 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(22,19,20,.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%, #161314 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(203,33,38,.28) 0 0, rgba(203,33,38,.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(203,33,38,.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(203,33,38,.70) 47% 50%, transparent 51%),
conic-gradient(from -20deg, transparent 0 18%, rgba(203,33,38,.46) 19% 24%, transparent 25% 42%, rgba(203,33,38,.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(203,33,38,.28) 0 0, rgba(203,33,38,.20) 0 3px, transparent 4px),
linear-gradient(116deg, transparent 0 30%, rgba(203,33,38,.68) 31% 36%, transparent 37% 47%, rgba(203,33,38,.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, 203,33,38), .32), transparent 34%),
radial-gradient(circle at 42% 90%, rgba(var(--hero-accent-rgb, 203,33,38), .18), transparent 28%),
linear-gradient(90deg, rgba(var(--hero-accent-rgb, 203,33,38), .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:#221E1F;
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(22,19,20,.94) 0%, rgba(22,19,20,.78) 36%, rgba(22,19,20,.36) 58%, rgba(22,19,20,.18) 100%),
radial-gradient(circle at 74% 50%, rgba(203,33,38,.22), transparent 34%),
radial-gradient(circle at 82% 32%, rgba(203,33,38,.18), transparent 30%),
radial-gradient(circle at 64% 72%, rgba(203,33,38,.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:#E36669}
.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:#221E1F;
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(22,19,20,.18) 0%, rgba(22,19,20,.44) 42%, rgba(22,19,20,.62) 100%),
radial-gradient(circle at 50% 52%, rgba(22,19,20,.34), transparent 42%),
radial-gradient(circle at 82% 18%, rgba(203,33,38,.08), transparent 32%),
radial-gradient(circle at 16% 22%, rgba(203,33,38,.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(203,33,38,.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(22,19,20,.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(203,33,38,.32)}
.ngc-cta:hover{background:#D83E43;box-shadow:0 8px 0 -2px rgba(203,33,38,.42)}
.ngc-cta:active{box-shadow:0 3px 0 -2px rgba(203,33,38,.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/magic-red-total-jackpot-bg.webp');
--win-pos:72% center;
--win-glow:203,33,38;
}
.np-wins-grid .np-glass-card:nth-child(2){
--win-bg:url('../assets-new/winner-bgs/winner-month-red-stage-bg-magic-red-v2-1774x887.webp');
--win-pos:76% center;
--win-glow:203,33,38;
}
.np-wins-grid .np-glass-card:nth-child(3){
--win-bg:url('../assets-new/winner-bgs/magic-red-top-daily-win-bg-v2.webp');
--win-pos:78% center;
--win-glow:203,33,38;
}
.np-wins-grid .np-glass-card::before{
content:'';
position:absolute;
inset:0;
z-index:0;
border-radius:inherit;
background:
linear-gradient(90deg, rgba(22,19,20,.88) 0%, rgba(22,19,20,.62) 48%, rgba(22,19,20,.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(22,19,20,.92) 0%, rgba(22,19,20,.80) 40%, rgba(22,19,20,.50) 70%, rgba(22,19,20,.34) 100%),
radial-gradient(circle at 84% 82%, rgba(203,33,38,.28), transparent 48%),
radial-gradient(circle at 38% 88%, rgba(203,33,38,.22), transparent 44%),
radial-gradient(circle at 48% 96%, rgba(203,33,38,.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:#221E1F;
}
.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(22,19,20,.36) 0%, rgba(22,19,20,.56) 44%, rgba(22,19,20,.72) 100%),
radial-gradient(circle at 50% 48%, rgba(22,19,20,.30), transparent 42%),
radial-gradient(circle at 84% 18%, rgba(203,33,38,.06), transparent 34%),
radial-gradient(circle at 12% 24%, rgba(203,33,38,.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:36px}}
/* 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,.30), rgba(255,255,255,0) 42%),
linear-gradient(180deg,#E8373D 0%,#CB2126 50%,#9E161A 100%) !important;
color:#FFFFFF !important;
border:1px solid rgba(252,234,234,.65) !important;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.28),
inset 0 -6px 14px rgba(34,30,31,.30),
0 12px 24px -12px rgba(203,33,38,.65),
0 0 22px -10px rgba(203,33,38,.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,.30), rgba(255,255,255,0) 42%),
linear-gradient(180deg,#E8373D 0%,#CB2126 50%,#9E161A 100%) !important;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.28),
inset 0 -6px 14px rgba(34,30,31,.30),
0 12px 24px -12px rgba(203,33,38,.65),
0 0 22px -10px rgba(203,33,38,.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,.30), rgba(255,255,255,0) 42%),
linear-gradient(180deg,#E8373D 0%,#CB2126 50%,#9E161A 100%) !important;
color:#FFFFFF !important;
border:1px solid rgba(252,234,234,.65) !important;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.28),
inset 0 -6px 14px rgba(34,30,31,.30),
0 12px 24px -12px rgba(203,33,38,.65),
0 0 22px -10px rgba(203,33,38,.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(242,166,168,.22) 0%, rgba(242,166,168,.06) 100%) !important;
border-color:rgba(242,166,168,.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:203,33,38;position:relative;overflow:hidden;isolation:isolate;border-radius:0;background:#0E0C0C;
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, #0E0C0C 0, #0E0C0C calc(50% - 914px), rgba(14,12,12,0) calc(50% - 730px)),
linear-gradient(270deg, #0E0C0C 0, #0E0C0C calc(50% - 914px), rgba(14,12,12,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(14,12,12,.82) 0%, rgba(14,12,12,.46) var(--header-h), rgba(14,12,12,0) calc(var(--header-h) + 84px)),
linear-gradient(90deg, rgba(14,12,12,.56) 0%, rgba(22,19,20,.24) 44%, rgba(14,12,12,0) 70%),
linear-gradient(270deg, rgba(14,12,12,.18) 0%, rgba(14,12,12,0) 14%),
linear-gradient(180deg, rgba(14,12,12,0) calc(100% - 130px), rgba(14,12,12,.45) calc(100% - 68px), rgba(14,12,12,.92) calc(100% - 16px), #0E0C0C 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(34,30,31,.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(22,19,20,.52) 0%, rgba(22,19,20,.38) 35%, rgba(14,12,12,.28) 70%, rgba(22,19,20,.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,rgba(255,255,255,.5) 0%,rgba(242,166,168,.42) 32%,rgba(227,102,105,.38) 66%,rgba(203,33,38,.28) 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(255,255,255,.42) 0%, rgba(255,255,255,.05) 13%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.05) 87%, rgba(203,33,38,.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:#FFFFFF;
background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%),linear-gradient(180deg,#E8373D 0%,#CB2126 50%,#9E161A 100%);
border:1px solid rgba(252,234,234,.65);
box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -6px 14px rgba(34,30,31,.3), 0 10px 22px -10px rgba(203,33,38,.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 #CB2126, var(--shadow-sm)}
.fx-purp{box-shadow:0 0 0 2.5px #34302F, var(--shadow-sm)}
.fx-cyanl{box-shadow:0 0 0 2.5px #CB2126, 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:#CB2126;color:#fff}
.fx-purp .fx-xbadge{background:#34302F;color:#fff}
.fx-cyanl .fx-xbadge{background:#CB2126;color:#FFFFFF}
.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:#FFFFFF;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:'';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(203,33,38,.25) 70%, #E36669 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(203,33,38,.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(52,48,47,.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(203,33,38,.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(255,255,255,0) 56%, rgba(255,255,255,.85) 68%, #F2A6A8 78%, #CB2126 86%, #AB1A1F 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(203,33,38,.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(22,19,20,.26) 0%, rgba(22,19,20,.16) 45%, rgba(14,12,12,.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(203,33,38,.32);
background:linear-gradient(118deg, rgba(22,19,20,.34) 0%, rgba(22,19,20,.22) 45%, rgba(14,12,12,.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(230,226,225,.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,203,33,38),.2), transparent 26%),
linear-gradient(118deg, rgba(22,19,20,.52) 0%, rgba(22,19,20,.38) 35%, rgba(14,12,12,.28) 70%, rgba(22,19,20,.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,rgba(255,255,255,.5) 0%,rgba(242,166,168,.42) 32%,rgba(227,102,105,.38) 66%,rgba(203,33,38,.28) 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(255,255,255,.42) 0%, rgba(255,255,255,.05) 13%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.05) 87%, rgba(203,33,38,.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:74px;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(34,30,31,.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:#FFFFFF;position:relative;overflow:hidden;border:1px solid rgba(252,234,234,.65);
background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%),linear-gradient(180deg,#E8373D 0%,#CB2126 50%,#9E161A 100%);
box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -6px 14px rgba(34,30,31,.3), 0 10px 22px -10px rgba(203,33,38,.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:74px}
.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:#0E0C0C}
.pvh-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#0E0C0C}
.pvh-video-m{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:none;background:#0E0C0C}
.pvh-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg, rgba(14,12,12,.55) 0%, rgba(14,12,12,.18) 26%, transparent 52%, rgba(14,12,12,.4) 84%, rgba(14,12,12,.92) 96%, #0E0C0C 100%),
linear-gradient(90deg, rgba(14,12,12,.45) 0%, rgba(14,12,12,.05) 45%, transparent 70%),
linear-gradient(rgba(14,12,12,.34), rgba(14,12,12,.34))}
.pvh-content{position:relative;z-index:2;min-height:inherit;
padding:calc(var(--header-h) + 40px) clamp(22px,3vw,40px) clamp(216px, calc(27vw - 9px), 355px);
display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left}
.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); the active page "Promotions" is the H1 (SEO) */
.pv7-crumb{font:700 13px/1.4 var(--font);color:rgba(255,255,255,.82);display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;max-width:880px;margin-inline:auto;
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{margin:0;font:inherit;color:inherit}
/* 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)}
/* H1 anchored to the BOTTOM of the video band, lifted up by a big padding-bottom so the video continues BELOW it.
The first card is then pulled up to overlap that lower video region (liquid-glass effect on the card's top).
Gap to the H1 = margin-top + padding-bottom = a CONSTANT, independent of viewport height -> the card can never overlap the H1 at any size. */
.pvh-content{padding:calc(var(--header-h) + 28px) 18px 285px;justify-content:flex-end}
.pv7-crumb{max-width:460px}
.main-inner.pv7-wrap{margin-top:-277px} /* -277 + 285 padding = constant 8px gap under the crumb; ~277px of video behind the card top */
/* 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{display:none}
.pvh-video-m{display:block;object-position:center 27%}
}
/* flat page base colour behind the cards (no photo, matches the rest of the site) */
.pv7-bg{background:#0E0C0C}
.pv7-bg::after{display:none}
/* readability: stronger dark halo on red eyebrow + bonus amounts */
.pv7-matrix .eb{text-shadow:0 1px 2px rgba(0,0,0,.95), 0 2px 12px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.7) !important}
.pv7-matrix .duo .v{text-shadow:0 1px 2px rgba(0,0,0,.95), 0 3px 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.65) !important}
/* ===== sidebar nav — match homepage (neutral default; red casino/hover/active; charcoal submenu) ===== */
.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) !important}
.nav-item[data-tooltip="Casino"] .ni-ico, .nav-item[data-tooltip="Casino"] .ni-ico .np-icon,
.nav-item:hover .ni-ico, .nav-item:hover .ni-ico .np-icon,
.nav-item.active .ni-ico, .nav-item.active .ni-ico .np-icon{color:var(--red) !important}
.collapsed .nav-item[data-tooltip] .ni-ico{background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%) !important; border-color:rgba(255,255,255,.14) !important}
.collapsed .nav-item[data-tooltip] .ni-ico .np-icon{color:rgba(255,255,255,.72) !important}
.collapsed .nav-item[data-tooltip="Casino"] .ni-ico .np-icon,
.collapsed .nav-item[data-tooltip]:hover .ni-ico .np-icon,
.collapsed .nav-item.active .ni-ico .np-icon{color:var(--red) !important}
.collapsed .nav-item[data-tooltip="Casino"] .ni-ico,
.collapsed .nav-item[data-tooltip]:hover .ni-ico,
.collapsed .nav-item.active .ni-ico{background:linear-gradient(135deg, rgba(203,33,38,.22) 0%, rgba(203,33,38,.06) 100%) !important; border-color:rgba(203,33,38,.42) !important}
/* submenu open-state — charcoal (match home, not navy) */
.nav-item.is-open{background:linear-gradient(180deg,#34302F 0%,#221E1F 100%) !important; border:1px solid rgba(255,255,255,.12) !important; border-bottom:0 !important}
.nav-item.is-open + .nav-sub{background:linear-gradient(180deg,#221E1F 0%,#161314 100%) !important; border:1px solid rgba(255,255,255,.12) !important; border-top:0 !important}
.nav-sub-item.active{color:#fff !important}
/* ===== Bottom promotions content (intro + FAQ), matched to the other pages ===== */
.promo-copy{padding:36px 4px 0;max-width:880px;margin:0 auto}
.promo-copy p:last-child{margin-bottom:0}
.promo-copy .pc-title{margin:0 0 12px;font-size:var(--fs-h2);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:#fff}
.promo-copy h2{margin:26px 0 10px;font-size:clamp(18px,1.9vw,23px);font-weight:800;letter-spacing:-.01em;line-height:1.2;color:#fff}
.promo-copy p{margin:0 0 14px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.75)}
.promo-copy .lead{font-size:16.5px;margin-bottom:18px}
.promo-copy a{color:var(--red);font-weight:800;border-bottom:1.5px solid var(--red)}
.faq-head h2{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.01em;line-height:1.1}
.faq{max-width:880px;margin:0 auto}