/* ============================================================================
   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; }
html.home-popup-open, body.home-popup-open{ overflow:hidden; }
.home-popup-card{ width:min(500px, calc(100vw - 48px), calc(80vh - 102px)); border-radius:18px; overflow:hidden; border:1px solid rgba(245,196,81,.22); background:#0f172a; box-shadow:0 28px 80px rgba(0,0,0,.58); }
.home-popup-stage{ position:relative; aspect-ratio:4/5; background:#090d16; }
.home-popup-stage img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-popup-tab{ min-width:0; flex:1; padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); background:#161d2a; color:rgba(255,255,255,.70); font-size:13px; font-weight:700; text-align:center; }
.home-popup-tab.active{ background:linear-gradient(135deg,var(--accent),var(--accent-600)); color:var(--on-accent); }
.home-popup-arrow{ position:absolute; top:50%; transform:translateY(-50%); display:grid; height:42px; width:42px; place-items:center; border-radius:999px; background:rgba(0,0,0,.45); color:white; font-size:28px; line-height:1; }
.home-popup-arrow:hover{ background:rgba(0,0,0,.7); }
/* 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; } }