/* ============================================================================
   luxe88-shared.css — theme + chrome styles shared by every page (home lobby +
   games / promos / vip / help). Extracted verbatim from luxe88-sea.html so all
   pages look identical. White-label by overriding the four --brand* vars below
   (or set BRAND_COLOR in the operator .env — luxe88-shared.js applies it live).
   ============================================================================ */

/* Brand palette — override these four to white-label; every brand colour derives from them. */
:root{ --brand:#00E5A8; --brand-600:#00b386; --brand-rgb:0 229 168; --brand-600-rgb:0 179 134;
       /* Accent ("gold") palette — promoted to variables so it is themeable per operator. Values = the previous
          hardcoded hex, so the default look renders identically. rgb-channel forms back the Tailwind `gold`/`on-accent` tokens. */
       --accent:#F5C451; --accent-600:#D4A017; --on-accent:#3a2700; --accent-rgb:245 196 81; --accent-600-rgb:212 160 23; }
/* Proportional mobile scaling — identical to the lobby (luxe88-sea.html). Ties the root font-size to viewport
   width so the whole mobile layout scales as one unit (rem-based Tailwind sizing becomes a constant fraction of
   the screen) instead of reflowing. Anchored ~400px = today's 16px baseline; clamped 12–20px. Desktop (≥1024px)
   keeps the browser-default 16px root — untouched. Media queries still fire at true pixel widths (no reflow).
   Cap 20px: typical phones (≤430px) are below the cap (unaffected); it tames the 450–1023px over-zoom so the
   sticky header/banner don't balloon (a mobile layout stretched toward tablet width). */
@media (max-width:1023.98px){ :root{ font-size:clamp(12px, calc(100vw / 25), 20px); } }
body{ background:#0B0F19; color:#fff; font-family:'Inter',sans-serif; }
.font-display{ font-family:'Sora',sans-serif; }
.brand-gradient{ background:linear-gradient(135deg,var(--brand) 0%,var(--brand-600) 100%); }
.gold-gradient{ background:linear-gradient(135deg,var(--accent) 0%,var(--accent-600) 100%); }
.dark-gradient{ background:linear-gradient(180deg,#131A26 0%,#0B0F19 100%); }
.text-gradient{ background:linear-gradient(135deg,var(--brand),#7dffdc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-text{ background:linear-gradient(135deg,#FBE08A,var(--accent-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-glow{ background:radial-gradient(60% 60% at 50% 0%, rgba(245,196,81,.14) 0%, rgba(11,15,25,0) 70%); }
::-webkit-scrollbar{ width:10px; height:8px; } ::-webkit-scrollbar-track{ background:#0B0F19; } ::-webkit-scrollbar-thumb{ background:#1E293B; border-radius:9999px; }
.no-bar::-webkit-scrollbar{ display:none; } .no-bar{ -ms-overflow-style:none; scrollbar-width:none; }
.card-hover{ transition:transform .25s ease, box-shadow .25s; } .card-hover:hover{ transform:translateY(-4px); box-shadow:0 12px 34px -14px rgba(0,0,0,.7); }
details>summary{ list-style:none; cursor:pointer; } details>summary::-webkit-details-marker{ display:none; } details[open] .chev{ transform:rotate(180deg); }
/* skeleton shimmer for loading states */
@keyframes shimmer{ 0%{ background-position:-450px 0 } 100%{ background-position:450px 0 } }
.skeleton{ background:linear-gradient(90deg,#131A26 0%,#1c2738 50%,#131A26 100%); background-size:900px 100%; animation:shimmer 1.4s linear infinite; }
/* broken-image fallback: a tile that fails to load shows a slot icon instead of a blank box */
.img-fallback{ background:linear-gradient(180deg,#1b2536,#0B0F19); } .img-fallback::after{ content:'🎰'; position:absolute; inset:0; display:grid; place-items:center; font-size:2rem; opacity:.45; } .img-fallback.gf-live::after{ content:'🎴'; } .img-fallback.gf-table::after{ content:'🃏'; } .img-fallback.gf-poker::after{ content:'♠'; } .img-fallback.gf-fishing::after{ content:'🎣'; } .img-fallback.gf-arcade::after{ content:'🕹'; } .img-fallback.gf-crash::after{ content:'🚀'; } .img-fallback.gf-bingo::after{ content:'🎱'; }
/* visible keyboard focus ring */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
/* MOBILE ZOOM FIX: iOS auto-zooms focused controls with font-size < 16px. */
@media (max-width:640px){ input,select,textarea{ font-size:16px !important; } }
/* offset anchor jumps so section headings clear the sticky header */
html{ scroll-padding-top:5rem; overflow-x:clip; }
/* Featured Promos — FULL-BLEED edge-to-edge hero: break #promo-hero out of the centered <main>. */
#promo-hero{ width:100vw; margin-inline:calc(50% - 50vw); margin-top:-1.25rem; }
#promo-hero #ph-track > div, #promo-hero > section{ border-radius:0; border-left-width:0; border-right-width:0; }
/* UNIFIED page: logged-in personalisation blocks are hidden; wallet actions live in the header. */
.auth-in{ display:none !important; }
.ext-fade{ animation:extFade .4s ease both; } @keyframes extFade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .animate-marqueeSlow,.animate-floaty,.animate-pulse,.skeleton,.ext-fade{ animation:none !important; } html,.scroll-smooth{ scroll-behavior:auto !important; } }
.no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
#account-modal [id^="acc-tab-"]{ flex:0 0 auto; }
html.profile-open, body.profile-open{ overflow:hidden; }
/* Header category mega-menu (Casino/Slot/Fishing/Arcade → provider dropdown) */
.nav-cat{ position:relative; }
.nav-drop{ position:absolute; left:0; top:100%; z-index:60; display:none; padding-top:10px; }
.nav-cat:hover .nav-drop, .nav-cat:focus-within .nav-drop{ display:block; }
.nav-drop-grid{ display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:8px; min-width:492px; padding:12px; border-radius:16px; border:1px solid #1E293B; background:#0F1522; box-shadow:0 24px 60px -12px rgba(0,0,0,.75); }
/* Frameless provider items: a logo (or the name when no logo yet) — no card box. Applies to all 4 category dropdowns. */
.nav-prov{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:0; background:transparent; font-size:13px; font-weight:600; color:#fff; transition:background .18s; }
.nav-prov:hover{ background:rgba(255,255,255,.06); }
.nav-prov-nm{ flex:1; min-width:0; white-space:nowrap; }   /* provider name — shown when there's no logo, and as the fallback if a logo fails to load */
.nav-prov.has-logo .nav-prov-nm{ display:none; }           /* a wordmark logo already carries the name */
.nav-prov-soon{ cursor:default; }
.nav-prov-soon .nav-prov-nm{ color:rgba(255,255,255,.55); } /* dim only the name to signal coming-soon; a logo stays crisp */
/* Frameless provider logo (e.g. Dream Gaming). Markup carries an onerror that reverts to the name, so a missing file never shows a broken image. */
.nav-prov-logo{ height:30px; width:auto; max-width:150px; object-fit:contain; display:block; margin-right:auto; border-radius:6px; }
.nav-prov-badge{ border-radius:999px; background:#E11D48; padding:1px 7px; font-size:10px; font-weight:800; color:#fff; }
.nav-prov-soon-tag{ border-radius:999px; padding:1px 7px; font-size:10px; font-weight:700; color:rgba(255,255,255,.45); }

/* Sub-page header on a phone while logged in: the balance box + bell + avatar leave the wordmark no room, so it collapsed
   to an ellipsis (13px at 375, gone at 320). Keep the logo mark, drop the text. The lobby is unaffected: it hides the
   balance box on mobile instead and never loads this sheet. :has() = Safari 15.4+ / Chrome 105+; older browsers keep the
   old truncation. */
@media (max-width:639.98px) { header:has(#bal) #brand-mark > span:last-child { display:none; } }
/* …and below 360px even the logo mark no longer fits beside the balance box + eye + bell + avatar (it overlapped the box);
   the bottom nav keeps Home one tap away, so drop the whole mark there. */
@media (max-width:359.98px) { header:has(#bal) #brand-mark { display:none; } }
/* ---------- Mobile side menu: logo + EN / ZH language switcher (2026-10-13) ---------- */
#menu .vc-drawer-logo{ display:block; height:2rem; width:auto; max-width:100%; object-fit:contain; }
#menu .vc-drawer-home{ display:inline-block; border-radius:8px; }
#menu .vc-drawer-lang{ display:flex; align-items:center; gap:.2rem; margin-top:.75rem; padding:.85rem .85rem 0; border-top:1px solid rgba(255,255,255,.07); }
#menu .vc-dl-ic{ width:1.05rem; height:1.05rem; flex-shrink:0; margin-right:.45rem; color:#6B7280; }
#menu .vc-dl-opt{ min-width:2.6rem; height:2.25rem; padding:0 .6rem; border-radius:9px; font-size:.9rem; font-weight:600; letter-spacing:.04em; color:#6B7280; background:transparent;
  transition:color .18s, background-color .18s; }
#menu .vc-dl-opt:hover{ color:#9CA3AF; background:rgba(255,255,255,.04); }
#menu .vc-dl-opt[aria-pressed="true"]{ color:#D6B46A; background:rgba(214,180,106,.12); }
#menu .vc-dl-sep{ color:rgba(255,255,255,.18); font-size:.85rem; }
/* ---------- Provider dropdowns (Casino / Slot / Fishing / Arcade) — Style C compact cards (2026-10-13) ----------
   2-column grid of small graphite cards; each logo centred over a very soft glow in its provider's colour (--pg, picked
   from the logo file below); Soon / Hot as a small top-right pill; champagne-gold edge + slight lift in brightness on hover. */
.nav-drop .nav-drop-grid{ grid-template-columns:repeat(2, 13.5rem); gap:8px; min-width:0; padding:12px; border-radius:16px;
  background:#171A20; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 48px -12px rgba(0,0,0,.6); }
.nav-drop .nav-drop-grid > p{ margin:0 0 2px; padding:2px 4px 4px; }
.nav-drop .nav-prov{ --pg:214 180 106; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; height:4.5rem; padding:.6rem 1rem;
  border-radius:12px; background:#1E222A; border:1px solid rgba(255,255,255,.06); overflow:hidden;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.nav-drop .nav-prov::before{ content:''; position:absolute; z-index:-1; left:50%; top:50%; width:72%; height:78%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(closest-side, rgb(var(--pg) / .2), rgb(var(--pg) / 0)); transition:opacity .25s ease; opacity:.85; pointer-events:none; }
.nav-drop .nav-prov:hover, .nav-drop .nav-prov:focus-visible{ background:#252A33; border-color:rgba(214,180,106,.5); box-shadow:0 0 0 1px rgba(214,180,106,.12); }
.nav-drop .nav-prov:hover::before, .nav-drop .nav-prov:focus-visible::before{ opacity:1; }
/* logos: centred, one optical size (the 600×240 files all carry similar transparent margins) */
.nav-drop .nav-prov-logo{ display:block; height:3rem; width:auto; max-width:9.5rem; margin:0; border-radius:0; padding:0; background:none; object-fit:contain; }
.nav-drop .nav-prov-nm{ flex:0 1 auto; text-align:center; font-size:.85rem; font-weight:600; color:#F5F6F7; }
/* badges — small pills, top-right */
.nav-drop .nav-prov .nav-prov-badge, .nav-drop .nav-prov .nav-prov-soon-tag{ position:absolute; top:6px; right:6px; z-index:1; padding:1px 6px; border-radius:999px;
  font-size:9px !important; font-weight:700; letter-spacing:.03em; line-height:1.5; }
.nav-drop .nav-prov .nav-prov-badge{ background:rgba(214,180,106,.16) !important; color:#E2C381 !important; border:1px solid rgba(214,180,106,.35); }
.nav-drop .nav-prov .nav-prov-soon-tag{ background:rgba(16,18,22,.7); color:#9CA3AF; border:1px solid rgba(255,255,255,.1); }
.nav-drop .nav-prov-soon{ cursor:default; }
/* soft brand colours behind each logo */
.nav-drop .nav-prov:has(img[src*="/dream-gaming."]){ --pg:214 170 80; }
.nav-drop .nav-prov:has(img[src*="/sa-gaming."]){ --pg:200 160 105; }
.nav-drop .nav-prov:has(img[src*="/sexy-casino."]){ --pg:236 72 153; }
.nav-drop .nav-prov:has(img[src*="/pragmatic-play."]){ --pg:245 140 30; }
.nav-drop .nav-prov:has(img[src*="/live22."]){ --pg:80 150 255; }
.nav-drop .nav-prov:has(img[src*="/jili."]){ --pg:235 180 50; }
.nav-drop .nav-prov:has(img[src*="/joker-gaming."]){ --pg:215 195 125; }
.nav-drop .nav-prov:has(img[src*="/playtech."]){ --pg:120 160 255; }
.nav-drop .nav-prov:has(img[src*="/microgaming."]){ --pg:40 190 140; }
/* Playtech's official artwork is dark navy: instead of a light tile, a fine light outline + soft blue halo around its own shapes
   (drop-shadow follows the logo's outline; the pixels and colours of the logo are not changed). */
.nav-drop .nav-prov-logo[src*="/playtech."]{ filter:drop-shadow(0 0 .6px rgba(255,255,255,.95)) drop-shadow(0 0 .6px rgba(255,255,255,.8)) drop-shadow(0 0 7px rgba(150,180,255,.4)); }
/* optical balance — thin or wide artworks get a touch more height, bold ones a touch less, so all read the same size */
.nav-drop .nav-prov-logo[src*="/microgaming."]{ height:3.6rem; max-width:10.5rem; }
.nav-drop .nav-prov-logo[src*="/sa-gaming."], .nav-drop .nav-prov-logo[src*="/playtech."]{ height:3.3rem; max-width:10rem; }
.nav-drop .nav-prov-logo[src*="/pragmatic-play."], .nav-drop .nav-prov-logo[src*="/sexy-casino."]{ height:2.85rem; }
/* Dropdown cards with the provider COVER photo (2026-10-13 evening): the same full-colour covers as the homepage
   (assets/providers/covers/, which already carry the logo — so no extra logo on top), object-fit:cover in a 2:1 card,
   a soft bottom gradient for the provider name, Soon / Hot top-right, subtle gold border on hover. The separate logo stays
   only as the fallback if a cover fails to load. */
.nav-drop .nav-prov.has-cover{ height:7.25rem; padding:0; align-items:flex-end; justify-content:flex-start; background:#1E222A; border-color:rgba(255,255,255,.08); }
.nav-drop .nav-prov.has-cover::before{ display:none; }
.nav-drop .nav-prov.has-cover::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,14,0), rgba(10,11,14,.7)); }
.nav-drop .nav-prov-cover{ position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.nav-drop .nav-prov.has-cover .nav-prov-logo{ display:none; }
.nav-drop .nav-prov.has-cover .nav-prov-nm{ display:block; position:relative; z-index:1; margin:0 0 .45rem .65rem; text-align:left; font-size:.78rem; font-weight:700;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.6); }
/* badges on photo covers: darker frosted pill so Soon / Hot stay readable on busy artwork */
.nav-drop .nav-prov.has-cover .nav-prov-soon-tag{ background:rgba(10,11,14,.78); color:#D1D5DB; border-color:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.nav-drop .nav-prov.has-cover .nav-prov-badge{ background:rgba(10,11,14,.78) !important; color:#E2C381 !important; border-color:rgba(214,180,106,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.nav-drop .nav-prov.has-cover:hover, .nav-drop .nav-prov.has-cover:focus-visible{ background:#1E222A; border-color:rgba(214,180,106,.65); box-shadow:0 0 0 1px rgba(214,180,106,.18); }
/* Dropdowns list up to 8 providers + "View all" (the full list is on the category page). Name-only cards (providers
   without artwork) use the same card height as the cover cards. */
.nav-drop .nav-prov:not(.has-cover){ height:7.25rem; }
/* Header category dropdowns (2026-10-13 night): hover OR click, one shared state in the header script — never two at once */
/* Desktop header dropdown open → soft blur + light dim behind it (2026-10-13 night). The overlay sits just under the
   sticky header (z-40), so the header and its dropdown stay sharp; a click on it closes the dropdown. Desktop only. */
#vc-nav-scrim{ display:none; }
@media (min-width:1024px){
  #vc-nav-scrim{ display:block; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.15); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s; }
  html.vc-nav-open #vc-nav-scrim{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s ease, visibility 0s; }
}
@media (prefers-reduced-motion:reduce){ #vc-nav-scrim{ transition:none !important; } }
html.vc-navjs .nav-cat .nav-drop{ display:none; }          /* the script owns open/closed: one dropdown at a time */
html.vc-navjs .nav-cat.vc-open .nav-drop{ display:block; }
.nav-cat > a{ cursor:pointer; }
.nav-drop .nav-viewall{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:.35rem; height:2.4rem; border-radius:10px;
  font-size:.82rem; font-weight:600; color:#E2C381; background:rgba(214,180,106,.07); border:1px solid rgba(214,180,106,.25); transition:background-color .25s ease, border-color .25s ease; }
.nav-drop .nav-viewall:hover, .nav-drop .nav-viewall:focus-visible{ background:rgba(214,180,106,.13); border-color:rgba(214,180,106,.5); }
@media (prefers-reduced-motion:reduce){ .nav-drop .nav-prov, .nav-drop .nav-prov::before{ transition:none; } }
/* ---------- FIRE HOT badge (2026-10-14, v2): small pill top-right; flame sways + flickers, warm aura pulses, a soft highlight
   sweeps across, tiny embers rise now and then; a touch stronger while the card is hovered. CSS + one tiny inline SVG only.
   Perf pass (2026-10-14): same look, but every moving part now animates only transform/opacity, so the GPU moves it without
   repainting the page — aura = a pre-drawn glow fading in/out (::after), sheen = a highlight strip sliding (.vc-hot-sheen),
   flame = two small SVGs (outer sways, inner flickers) instead of animating the SVG paths. ---------- */
.vc-hot{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:2px; padding:2px 7px 2px 4px; border-radius:999px; white-space:nowrap;
  font-size:9.5px; font-weight:800; line-height:1.25; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-shadow:0 1px 1px rgba(120,25,0,.4);
  background:linear-gradient(135deg,#FFB347 0%,#FF7A2E 46%,#EE3A3C 100%); border:1px solid rgba(255,206,150,.6);
  box-shadow:0 0 5px 0 rgba(255,110,40,.4), 0 2px 8px -2px rgba(200,40,20,.5), inset 0 1px 0 rgba(255,255,255,.32); }
.vc-hot.vc-hot-abs{ position:absolute; top:6px; right:6px; z-index:3; }
/* aura: the bright end of the old pulse, faded in and out */
.vc-hot::after{ content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:-1;
  box-shadow:0 0 11px 2px rgba(255,120,40,.4), 0 2px 10px -2px rgba(220,50,20,.25); opacity:0; animation:vcHotAura 2.4s ease-in-out infinite; }
/* sheen: a soft light strip that slides across the pill now and then */
.vc-hot-sheen{ position:absolute; inset:0; z-index:1; border-radius:inherit; overflow:hidden; pointer-events:none; }
.vc-hot-sheen::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:78%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay; transform:translateX(-253%); animation:vcHotSheen 3.6s ease-in-out infinite; }
.vc-hot-txt{ position:relative; z-index:2; }
.vc-hot-fire{ position:relative; z-index:2; display:inline-block; width:11px; height:12px; flex-shrink:0; }
.vc-fo, .vc-fi{ position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
.vc-hot-fire .vc-fo{ filter:drop-shadow(0 0 2px rgba(255,236,170,.95)) drop-shadow(0 0 4px rgba(255,160,60,.7)); }
.vc-fo{ transform-origin:50% 88%; animation:vcFlameSway 1.7s ease-in-out infinite; }
.vc-fi{ transform-origin:50% 82%; opacity:.95; animation:vcFlameFlicker .9s ease-in-out infinite; }
.vc-fl-out{ fill:#FFE7A8; }
.vc-fl-in{ fill:#FFFFFF; }
.vc-ember{ position:absolute; left:4px; bottom:8px; width:2px; height:2px; border-radius:50%; background:#FFE3A1; box-shadow:0 0 3px 1px rgba(255,170,70,.9); opacity:0; pointer-events:none;
  animation:vcEmber 3.2s ease-out infinite; }
.vc-ember:nth-of-type(2){ left:7px; animation-delay:1.1s; animation-duration:3.8s; --dx:3px; }
.vc-ember:nth-of-type(3){ left:2px; animation-delay:2.3s; animation-duration:4.4s; --dx:-3px; }
/* hovered card: a little more fire */
:is(.provtile, .nav-prov, .gp-prov):hover .vc-hot, .vc-hot:hover{ filter:saturate(1.15) brightness(1.06); }
:is(.provtile, .nav-prov, .gp-prov):hover .vc-hot::after, .vc-hot:hover::after{ animation-duration:1.4s; }
:is(.provtile, .nav-prov, .gp-prov):hover .vc-fo, .vc-hot:hover .vc-fo{ animation-duration:1.05s; }
:is(.provtile, .nav-prov, .gp-prov):hover .vc-fi, .vc-hot:hover .vc-fi{ animation-duration:.55s; }
@keyframes vcFlameSway{ 0%,100%{ transform:rotate(-4deg) scale(1,1); } 25%{ transform:rotate(3deg) scale(1.05,.95) skewX(-3deg); } 50%{ transform:rotate(-2deg) scale(.96,1.07); } 75%{ transform:rotate(4deg) scale(1.03,.98) skewX(3deg); } }
@keyframes vcFlameFlicker{ 0%,100%{ transform:scale(1,1); opacity:.95; } 30%{ transform:scale(.9,1.12); opacity:.8; } 55%{ transform:scale(1.06,.9); opacity:1; } 80%{ transform:scale(.95,1.05); opacity:.85; } }
@keyframes vcHotAura{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
@keyframes vcHotSheen{ 0%,55%{ transform:translateX(-253%); } 100%{ transform:translateX(281%); } }
@keyframes vcEmber{ 0%{ opacity:0; transform:translate(0,0) scale(1); } 6%{ opacity:1; } 30%{ opacity:.9; transform:translate(var(--dx,1px),-9px) scale(.8); } 42%{ opacity:0; transform:translate(calc(var(--dx,1px) * 1.6),-14px) scale(.4); } 100%{ opacity:0; transform:translate(0,-14px) scale(.4); } }
/* Pause (2026-10-14 perf): off-screen badges/marquee (.vc-anim-off, set by a tiny observer script) and everything behind an
   open header dropdown stop animating — the blurred page behind the dropdown no longer has to be redrawn every frame. */
.vc-anim-off, .vc-anim-off *, .vc-anim-off::after, .vc-anim-off *::before,
html.vc-nav-open :is(.vc-hot, .vc-ps-hotgames, .vc-prov-marquee), html.vc-nav-open :is(.vc-hot, .vc-ps-hotgames, .vc-prov-marquee) *,
html.vc-nav-open .vc-hot::after, html.vc-nav-open .vc-hot *::before{ animation-play-state:paused !important; }
html.vc-nav-open .nav-cat.vc-open :is(.vc-hot, .vc-hot *), html.vc-nav-open .nav-cat.vc-open .vc-hot::after, html.vc-nav-open .nav-cat.vc-open .vc-hot *::before{ animation-play-state:running !important; }
@media (prefers-reduced-motion:reduce){ .vc-hot::after, .vc-hot-sheen::before, .vc-fo, .vc-fi{ animation:none !important; } .vc-ember{ display:none !important; } }
/* ---------- Header "Games" menu (2026-10-14): one Games item replaces the Casino/Slot/Fishing/Arcade provider dropdowns.
   2x2 compact landscape category cards: dark VELA card, soft category tint, large line icon, name + one-line hint, gold
   border on hover. Optional photo per category via window.VELA_CAT_IMAGES (none yet — no suitable category art exists). */
.nav-drop .nav-gcat-grid{ display:grid; grid-template-columns:repeat(2, 15rem); gap:10px; padding:12px; border-radius:16px;
  border:1px solid var(--c-line-2, #262B34); background:var(--c-s1, #14171C); box-shadow:0 24px 48px -12px rgba(0,0,0,.6); }
.nav-gcat{ --cg:214 180 106; position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; height:6.75rem; padding:.8rem .9rem;
  border-radius:12px; border:1px solid rgba(255,255,255,.08); text-decoration:none;
  background:radial-gradient(120% 150% at 100% 0%, rgb(var(--cg) / .2), rgb(var(--cg) / 0) 58%), linear-gradient(150deg,#21252D 0%,#16191F 60%,#111317 100%);
  transition:border-color .15s ease, box-shadow .15s ease; }
.nav-gcat[data-cat="slot"]{ --cg:236 128 72; } .nav-gcat[data-cat="fishing"]{ --cg:72 168 220; } .nav-gcat[data-cat="arcade"]{ --cg:162 124 240; }
.nav-gcat-ic{ position:absolute; z-index:-1; right:-.35rem; top:50%; width:5.6rem; height:5.6rem; color:rgb(var(--cg) / .45); pointer-events:none;
  transform:translateY(-50%) rotate(-8deg); transition:transform .25s ease, color .25s ease; }
.nav-gcat-ic svg{ display:block; width:100% !important; height:100% !important; stroke-width:1.15; }
.nav-gcat-img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.nav-gcat.has-img::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,11,14,0) 35%, rgba(10,11,14,.82) 100%); }
.nav-gcat.has-img .nav-gcat-ic{ display:none; }
.nav-gcat-tx{ display:block; min-width:0; }
.nav-gcat-nm{ display:block; font-family:var(--c-display, inherit); font-size:1rem; font-weight:700; line-height:1.2; color:#F5F6F7; letter-spacing:-.01em; }
.nav-gcat-sub{ display:block; margin-top:2px; font-size:.72rem; line-height:1.3; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-gcat:hover, .nav-gcat:focus-visible{ border-color:rgba(214,180,106,.6); box-shadow:0 0 0 1px rgba(214,180,106,.18), 0 10px 24px -14px rgba(214,180,106,.5); outline:none; }
.nav-gcat:hover .nav-gcat-ic, .nav-gcat:focus-visible .nav-gcat-ic{ transform:translateY(-50%) rotate(-8deg) scale(1.08); color:rgb(var(--cg) / .7); }
.nav-gcat:hover .nav-gcat-img{ transform:scale(1.04); }
.nav-gcat[aria-current="page"]{ border-color:rgba(214,180,106,.85); }
@media (prefers-reduced-motion:reduce){ .nav-gcat, .nav-gcat-ic, .nav-gcat-img{ transition:none !important; } }
/* Live Casino hover video (2026-10-14): fades in over the static card on mouse hover; anchored to the bottom so the Kling AI
   watermark (bottom-right) stays visible; the dark overlay is weighted to the left (behind the title), not over the watermark. */
.nav-gcat-vid{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 100%; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.nav-gcat.has-video::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:linear-gradient(100deg, rgba(10,11,14,.86) 0%, rgba(10,11,14,.55) 42%, rgba(10,11,14,.12) 75%, rgba(10,11,14,0) 100%); }
.nav-gcat.vid-on .nav-gcat-vid, .nav-gcat.vid-on::after{ opacity:1; }
/* Category photos (2026-10-14): the photo is the static card; a hover video sits above it (z -1) and below the overlay. On a
   card with both, the image's bottom shade shows at rest and switches to the left-weighted video shade while the video plays. */
.nav-gcat.has-img .nav-gcat-vid{ z-index:-1; }
/* Arcade hover video (2026-10-14) is a PORTRAIT clip (368x448): cover keeps a landscape strip — anchored low (88%) so the
   chicken and the multiplier tiles are what shows in the card. */
.nav-gcat[data-cat="arcade"] .nav-gcat-vid{ object-position:50% 88%; }
/* Slot hover video (2026-10-14): near-square clip (610x512) → cover keeps the middle band (the reels + Zeus wild). */
.nav-gcat[data-cat="slot"] .nav-gcat-vid{ object-position:50% 45%; }
/* Fishing hover video (2026-10-14): 384x186 clip, close to the card shape — centred. */
.nav-gcat[data-cat="fishing"] .nav-gcat-vid{ object-position:50% 50%; }
.nav-gcat.has-img.has-video::after{ opacity:1; background:linear-gradient(180deg, rgba(10,11,14,0) 35%, rgba(10,11,14,.82) 100%); }
.nav-gcat.has-img::after, .nav-gcat.has-img.has-video::after{ background:linear-gradient(180deg, rgba(10,11,14,0) 28%, rgba(10,11,14,.88) 100%); }
.nav-gcat.has-img .nav-gcat-nm, .nav-gcat.has-img .nav-gcat-sub{ text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.6); }
.nav-gcat.has-img .nav-gcat-sub{ color:rgba(255,255,255,.82); }
.nav-gcat.has-img.has-video.vid-on::after{ background:linear-gradient(100deg, rgba(10,11,14,.86) 0%, rgba(10,11,14,.55) 42%, rgba(10,11,14,.12) 75%, rgba(10,11,14,0) 100%); }
.nav-gcat.vid-on .nav-gcat-ic{ opacity:0; }
.nav-gcat-ic{ transition:transform .25s ease, color .25s ease, opacity .2s ease; }
@media (prefers-reduced-motion:reduce){ .nav-gcat-vid, .nav-gcat.has-video::after{ transition:none !important; } }