/* =====================================================================================================
   VELA · STYLE C — shared sheet for the sub-pages (games.html = Casino / Slot / Fishing / Arcade, promos, vip, help)
   Added 2026-10-13. Loaded AFTER luxe88-shared.css, only by pages whose <body> has data-style="c".
   Part 1 is copied from the homepage's <style id="vela-style-c"> block (tokens, header, nav, language switcher,
   auth buttons, drawer, games grid, footer + provider logo marquee, bottom nav) so the chrome is identical.
   Part 2 styles the sub-page bodies. Presentation only — no copy, link, handler or logic lives here.
   ===================================================================================================== */
/* accent / brand variables = the homepage's muted gold (luxe88-shared.css still carries the old bright gold + teal) */
:root{ --brand:#D6B46A; --brand-600:#B8964F; --brand-rgb:214 180 106; --brand-600-rgb:184 150 79;
       --accent:#D6B46A; --accent-600:#B8964F; --on-accent:#15120B; --accent-rgb:214 180 106; --accent-600-rgb:184 150 79; }

/* ============================== PART 1 — from the homepage ============================== */
:root{
  --c-bg:#101216; --c-s1:#171A20; --c-s2:#1E222A; --c-s3:#262B34;
  --c-line:rgba(255,255,255,.07); --c-line-2:rgba(255,255,255,.12);
  --c-text:#F5F6F7; --c-text-2:#9CA3AF; --c-text-3:#6B7280;
  --c-accent:#D6B46A; --c-accent-hi:#E2C381; --c-accent-soft:rgba(214,180,106,.12); --c-on-accent:#15120B;
  --c-r-lg:20px; --c-ease:cubic-bezier(.2,.8,.2,1); --c-fast:.18s;
  --c-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --c-display:'Manrope','Inter',system-ui,sans-serif;
}
html{ background:var(--c-bg); }
body{ background:var(--c-bg); color:var(--c-text); font-family:var(--c-sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.font-display{ font-family:var(--c-display); }
::selection{ background:rgba(214,180,106,.3); color:#fff; }
::-webkit-scrollbar-track{ background:var(--c-bg); } ::-webkit-scrollbar-thumb{ background:#2A2F38; }
.hero-glow{ background:none; }
.dark-gradient{ background:var(--c-s1); }
.skeleton{ background:linear-gradient(90deg,#171A20 0%,#21252D 50%,#171A20 100%); background-size:900px 100%; }
.text-gradient,.gold-text{ background:none; color:var(--c-accent); -webkit-text-fill-color:currentColor; }
.vc-ic{ width:1.1rem; height:1.1rem; flex-shrink:0; display:inline-block; vertical-align:middle; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible{ outline:2px solid rgba(214,180,106,.75); outline-offset:2px; border-radius:10px; }

/* ---------- Buttons ---------- */
.gold-gradient{ background:var(--c-accent); color:var(--c-on-accent); }
a.gold-gradient,button.gold-gradient{ transition:background-color var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease); }
a.gold-gradient:hover,button.gold-gradient:hover{ background:var(--c-accent-hi); }
a.gold-gradient:active,button.gold-gradient:active{ transform:scale(.98); }
.brand-gradient{ background:var(--c-s2); color:var(--c-text) !important; border:1px solid var(--c-line-2); }
.vc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:3rem; padding:0 1.35rem; border-radius:12px;
  font-size:.95rem; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  transition:background-color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease), color var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease); }
@media (min-width:640px){ .vc-btn{ height:3.25rem; padding:0 1.6rem; } }
.vc-btn:active{ transform:scale(.98); }
.vc-btn .vc-arrow{ width:1rem; height:1rem; transition:transform var(--c-fast) var(--c-ease); }
.vc-btn:hover .vc-arrow{ transform:translateX(2px); }
.vc-btn-secondary{ background:var(--c-s1); border:1px solid var(--c-line-2); color:var(--c-text); }
.vc-btn-secondary:hover{ background:var(--c-s2); border-color:rgba(255,255,255,.2); }

/* ---------- Header ---------- */
#vc-header{ background:rgba(16,18,22,.8); border-bottom-color:var(--c-line) !important; -webkit-backdrop-filter:saturate(140%) blur(16px); backdrop-filter:saturate(140%) blur(16px); }
@media (min-width:1024px){ #vc-header > div{ height:4.5rem; } }
.vc-mark{ display:grid; place-items:center; width:2rem; height:2rem; flex-shrink:0; border-radius:9px; background:var(--c-accent); color:var(--c-on-accent); }
.vc-mark svg{ width:1.05rem; height:1.05rem; }
#brand-wordmark{ font-family:var(--c-display); font-weight:800; font-size:1.15rem; letter-spacing:.04em; color:var(--c-text); }
@media (min-width:640px){ #brand-wordmark{ font-size:1.25rem; } }
#brand-mark{ gap:.6rem; }
/* header logo image: fixed height, width follows the artwork's own ratio (3.72:1) — never stretched */
#brand-mark .vc-logo{ display:block; height:1.75rem; width:auto; max-width:100%; object-fit:contain; }
@media (min-width:640px){ #brand-mark .vc-logo{ height:2rem; } }
@media (min-width:1024px){ #brand-mark .vc-logo{ height:2.25rem; } }
#vc-header .lang-btn{ font-size:.75rem; font-weight:600; color:var(--c-text-2); border-radius:8px; }
#vc-header .lang-btn:hover{ color:var(--c-text); background:rgba(255,255,255,.05); }
.vc-menu-btn{ color:var(--c-text); border-radius:10px !important; } .vc-menu-btn svg{ width:1.3rem; height:1.3rem; }
#nav-desktop{ margin-left:1.5rem; gap:.15rem; }
#nav-desktop > a, #nav-desktop .nav-cat > a{ position:relative; display:inline-flex; align-items:center; height:2.4rem; padding:0 .8rem; border-radius:10px;
  font-size:.9rem; font-weight:500; color:var(--c-text-2); transition:color var(--c-fast), background-color var(--c-fast); }
#nav-desktop > a:hover, #nav-desktop .nav-cat:hover > a{ color:var(--c-text); background:rgba(255,255,255,.045); }
#nav-desktop a[aria-current="page"]{ color:var(--c-text) !important; font-weight:600; }
#nav-desktop a[aria-current="page"]::after{ content:''; position:absolute; left:50%; bottom:-1rem; width:1.25rem; height:2px; border-radius:2px; transform:translateX(-50%); background:var(--c-accent); }
.nav-drop{ padding-top:10px; }
.nav-drop-grid{ border-radius:16px; border:1px solid var(--c-line-2); background:var(--c-s1); box-shadow:0 24px 48px -12px rgba(0,0,0,.6); }
.nav-drop-grid > p{ color:var(--c-text-3) !important; letter-spacing:.04em !important; }
.nav-prov{ border-radius:10px; transition:background-color var(--c-fast); } .nav-prov:hover{ background:var(--c-s2); }
.nav-prov-badge{ background:var(--c-accent-soft); color:var(--c-accent); }
.nav-prov-soon-tag{ color:var(--c-text-3); }
#auth-slot{ gap:.5rem; }
/* language switcher — sits between the navigation and Sign in / Register */
.vc-lang{ position:relative; }
.vc-lang-btn{ display:inline-flex; align-items:center; gap:.35rem; height:2.5rem; padding:0 .6rem; border-radius:10px; border:1px solid transparent;
  color:var(--c-text-2); font-size:.85rem; font-weight:600; white-space:nowrap; transition:color var(--c-fast), background-color var(--c-fast), border-color var(--c-fast); }
.vc-lang-btn:hover, .vc-lang-btn[aria-expanded="true"]{ color:var(--c-text); background:rgba(255,255,255,.05); }
.vc-lang-btn .vc-globe{ width:1.05rem; height:1.05rem; flex-shrink:0; }
.vc-lang-btn .vc-lang-chev{ width:.8rem; height:.8rem; flex-shrink:0; opacity:.75; transition:transform var(--c-fast) var(--c-ease); }
.vc-lang-btn[aria-expanded="true"] .vc-lang-chev{ transform:rotate(180deg); }
.vc-lang-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:9.5rem; padding:.35rem; border-radius:12px;
  background:var(--c-s1); border:1px solid var(--c-line-2); box-shadow:0 18px 40px -16px rgba(0,0,0,.7); }
.vc-lang-menu[hidden]{ display:none; }
.vc-lang-opt{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .7rem; border-radius:8px;
  font-size:.875rem; font-weight:500; color:var(--c-text-2); text-align:left; transition:background-color var(--c-fast), color var(--c-fast); }
.vc-lang-opt:hover, .vc-lang-opt:focus-visible{ background:var(--c-s2); color:var(--c-text); }
.vc-lang-opt[aria-selected="true"]{ color:var(--c-text); font-weight:600; }
.vc-lang-opt .vc-check{ width:.95rem; height:.95rem; color:var(--c-accent); visibility:hidden; }
.vc-lang-opt[aria-selected="true"] .vc-check{ visibility:visible; }
@media (max-width:639.98px){ .vc-lang-btn{ height:2.3rem; min-height:36px; padding:0 .45rem; gap:.25rem; font-size:.8rem; } }
@media (max-width:379.98px){ .vc-lang-btn .vc-lang-chev{ display:none; } }
#auth-slot > button[onclick*="opAuth.open('login')"]{ height:2.5rem; padding:0 1rem; border-radius:10px; background:transparent; border:1px solid var(--c-line-2);
  color:var(--c-text); font-size:.875rem; font-weight:600; transition:background-color var(--c-fast), border-color var(--c-fast); }
#auth-slot > button[onclick*="opAuth.open('login')"]:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); }
#auth-slot > button[onclick*="opAuth.open('register')"]{ height:2.5rem; padding:0 1.1rem; border-radius:10px; font-size:.875rem; font-weight:600; }
@media (max-width:639.98px){
  #auth-slot > button[onclick*="opAuth.open('login')"], #auth-slot > button[onclick*="opAuth.open('register')"]{ height:2.3rem; min-height:36px; padding:0 .85rem; font-size:.82rem; }
}
#menu > div:last-child{ background:var(--c-s1); border-right:1px solid var(--c-line); }
#menu nav a, #menu nav button{ font-size:.95rem; padding:.7rem .85rem; border-radius:10px; }
.vc-drawer-brand{ font-family:var(--c-display); font-weight:800 !important; letter-spacing:.04em; }

/* ---------- Section headings ---------- */
.vc-h{ font-family:var(--c-display) !important; font-weight:700 !important; font-size:1.5rem !important; letter-spacing:-.02em; line-height:1.2; color:var(--c-text); }
@media (min-width:1024px){ .vc-h{ font-size:1.75rem !important; } }
.vc-sub{ color:var(--c-text-2) !important; font-size:.9rem !important; line-height:1.5; }
#slotapps > div > a, #home-leaderboards > div > a{ font-size:.875rem; font-weight:500; color:var(--c-text-2); transition:color var(--c-fast); }
#slotapps > div > a:hover, #home-leaderboards > div > a:hover{ color:var(--c-text); }

/* ---------- Games: tabs, search, empty state ---------- */
#games > div:first-child{ border-bottom:0 !important; padding-bottom:0 !important; margin-bottom:1.25rem !important; }
.vc-seg{ display:inline-flex; gap:.25rem; padding:.25rem; border-radius:12px; background:var(--c-s1); border:1px solid var(--c-line); }
#games .game-tab{ font-family:var(--c-sans) !important; font-size:.9rem !important; font-weight:600 !important; height:2.25rem; padding:0 1.05rem !important;
  border-radius:9px; border:0 !important; color:var(--c-text-2) !important; transition:background-color var(--c-fast), color var(--c-fast); }
#games .game-tab:hover{ color:var(--c-text) !important; }
#games .game-tab.border-gold{ background:var(--c-s3); color:var(--c-text) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35); }
#game-search{ height:2.5rem; width:16rem; border-radius:10px; background:var(--c-s1); border:1px solid var(--c-line-2); color:var(--c-text); font-size:.875rem;
  transition:border-color var(--c-fast), box-shadow var(--c-fast), background-color var(--c-fast); }
#game-search:hover{ border-color:rgba(255,255,255,.2); }
#game-search:focus{ background:var(--c-s2); border-color:rgba(214,180,106,.6); box-shadow:0 0 0 4px rgba(214,180,106,.12); }
#game-search::placeholder{ color:var(--c-text-3); }
.vc-search-ic{ width:1rem; height:1rem; display:block; color:var(--c-text-3); }
#games-grid > .col-span-full.border-dashed, #ext-providers .border-dashed, body .mcat-soon{ border:1px solid var(--c-line) !important; border-radius:var(--c-r-lg) !important; background:var(--c-s1) !important; }
#games-grid > .col-span-full.border-dashed{ padding:3.5rem 1.5rem !important; }
#games-grid > .col-span-full > .text-4xl{ font-size:0 !important; width:3rem; height:3rem; border-radius:14px; background-color:var(--c-s2); border:1px solid var(--c-line-2);
  background-repeat:no-repeat; background-position:center; background-size:1.35rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
#games-grid > .col-span-full p.font-semibold{ margin-top:1rem; font-size:1.05rem; font-weight:600; color:var(--c-text); }
#games-grid > .col-span-full p.text-sm{ color:var(--c-text-2) !important; }
#hot-row > p{ width:100%; padding:1.4rem 1rem !important; border-radius:16px; background:var(--c-s1); border:1px solid var(--c-line); text-align:center; color:var(--c-text-2) !important; }
.game-card [role="button"]{ border-radius:14px !important; border-color:var(--c-line) !important; background:var(--c-s1) !important; box-shadow:none !important;
  transition:transform var(--c-fast) var(--c-ease), border-color var(--c-fast) !important; }
.game-card:hover [role="button"]{ border-color:rgba(255,255,255,.2) !important; transform:translateY(-2px); }

/* ---------- Footer ---------- */
/* ---------- Provider logo marquee (top of footer) ---------- */
footer .vc-prov-marquee{ position:relative; overflow:hidden; margin:0 -1.5rem 2rem; padding:.25rem 0 1.75rem; border-bottom:1px solid var(--c-line);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); }
footer .vc-pm-track{ display:flex; width:max-content; animation:vc-pm-scroll 60s linear infinite; }
footer .vc-pm-set{ display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem; margin:0; list-style:none; }
footer .vc-pm-set img{ display:block; height:46px; width:auto; max-width:none; user-select:none; -webkit-user-drag:none; }
footer .vc-prov-marquee:hover .vc-pm-track, footer .vc-prov-marquee:focus-within .vc-pm-track{ animation-play-state:paused; }
@keyframes vc-pm-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (min-width:1024px){ footer .vc-prov-marquee{ margin:0 0 2.5rem; padding-bottom:2.25rem; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
  footer .vc-pm-set{ gap:3.5rem; padding-right:3.5rem; } footer .vc-pm-set img{ height:54px; } }
@media (prefers-reduced-motion:reduce){ footer .vc-pm-track{ animation:none; } footer .vc-pm-set[aria-hidden]{ display:none; }
  footer .vc-prov-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; } }
body > footer, #app-footer > footer{ background:var(--c-bg) !important; border-top-color:var(--c-line) !important; }
footer .vc-foot-brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--c-display); font-weight:800; font-size:1.15rem; letter-spacing:.04em; color:var(--c-text); }
footer .vc-foot-logo{ display:block; height:2.25rem; width:auto; max-width:100%; object-fit:contain; }   /* same image as the header logo (2026-10-13) */
footer .vc-foot-brand + p{ color:var(--c-text-2) !important; line-height:1.6; }
footer h4{ font-size:.8rem !important; font-weight:600 !important; color:var(--c-text) !important; margin-bottom:.9rem !important; }
footer ul{ color:var(--c-text-2) !important; }
footer ul a, footer ul button{ transition:color var(--c-fast); }
footer ul a:hover, footer ul button:hover{ color:var(--c-text) !important; }
footer .border-t{ border-color:var(--c-line) !important; }
.vc-rg{ border-color:var(--c-line-2) !important; background:var(--c-s1) !important; border-radius:999px !important; padding:.4rem .9rem .4rem .45rem !important; color:var(--c-text-2) !important; }
.vc-rg > span:first-child{ color:var(--c-text) !important; background:var(--c-s3); padding:.1rem .45rem; border-radius:999px; font-size:.7rem; }

/* ---------- Mobile bottom navigation ---------- */
#op-bottom-nav{ background:rgba(16,18,22,.9) !important; border-top-color:var(--c-line) !important; -webkit-backdrop-filter:saturate(140%) blur(16px); backdrop-filter:saturate(140%) blur(16px); }
#op-bottom-nav a{ font-weight:500; }
#op-bottom-nav .vc-ic{ width:1.35rem; height:1.35rem; }
#op-bottom-nav #nav-rewards > span:first-child{ box-shadow:0 0 0 4px var(--c-bg) !important; }


/* ============================== PART 2 — sub-page bodies ============================== */
#vc-header .vc-lang{ margin-left:auto; }
.nav-drop-grid{ background:var(--c-s1); border-color:var(--c-line-2); }
.nav-prov-badge{ background:var(--c-accent-soft) !important; color:var(--c-accent) !important; }
#menu .bg-gold\/10{ background:var(--c-accent-soft) !important; }

/* page heading: line-icon tile + title (Manrope), muted subtitle */
.vc-page-head{ display:flex; align-items:center; gap:.85rem; }
.vc-page-ic, .vc-tile-ic{ display:grid; place-items:center; flex-shrink:0; width:2.75rem; height:2.75rem; border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line-2); color:var(--c-accent); }
.vc-page-ic svg, .vc-tile-ic svg{ width:1.3rem; height:1.3rem; }
.vc-tile-ic.vc-lg{ width:3.25rem; height:3.25rem; border-radius:16px; margin:0 auto; } .vc-tile-ic.vc-lg svg{ width:1.5rem; height:1.5rem; }
.vc-tile-ic.vc-sm{ width:2.4rem; height:2.4rem; border-radius:12px; } .vc-tile-ic.vc-sm svg{ width:1.15rem; height:1.15rem; }
body[data-style="c"] main h1.font-display{ font-family:var(--c-display); font-size:1.85rem !important; font-weight:700 !important; letter-spacing:-.025em; line-height:1.15; color:var(--c-text); }
@media (min-width:640px){ body[data-style="c"] main h1.font-display{ font-size:2.25rem !important; } }
body[data-style="c"] main h1.font-display + p, body[data-style="c"] .vc-page-head + p{ color:var(--c-text-2) !important; font-size:.95rem; line-height:1.55; }
body[data-style="c"] main h2.font-display, body[data-style="c"] main h3.font-display{ font-family:var(--c-display); font-weight:700 !important; letter-spacing:-.02em; color:var(--c-text); }
body[data-style="c"] main{ padding-top:1.75rem; }
@media (min-width:1024px){ body[data-style="c"] main{ padding-top:2.5rem; } }

/* surfaces: graphite cards, hairline borders, no glow */
body[data-style="c"] main .rounded-2xl.border-border, body[data-style="c"] main .rounded-xl.border-border{ border-color:var(--c-line) !important; }
body[data-style="c"] main .bg-card{ background-color:var(--c-s1) !important; }
body[data-style="c"] main .rounded-2xl{ border-radius:var(--c-r-lg) !important; }
body[data-style="c"] main .border-dashed{ border-style:solid !important; border-color:var(--c-line) !important; background:var(--c-s1) !important; }
body[data-style="c"] .card-hover{ transition:transform var(--c-fast) var(--c-ease), border-color var(--c-fast), background-color var(--c-fast) !important; }
body[data-style="c"] .card-hover:hover{ transform:translateY(-2px); box-shadow:none !important; border-color:var(--c-line-2) !important; background:var(--c-s2) !important; }
body[data-style="c"] main .bg-secondary\/40, body[data-style="c"] main .bg-secondary\/30, body[data-style="c"] main .bg-card\/40, body[data-style="c"] main .bg-card\/60{ background:var(--c-s1) !important; border-color:var(--c-line) !important; }
/* gold-tinted gradient panels → flat graphite with a fine gold edge */
body[data-style="c"] main .bg-gradient-to-br.from-gold\/10{ background:var(--c-s1) !important; border-color:rgba(214,180,106,.28) !important; }
body[data-style="c"] main .border-gold\/25.bg-gold\/5{ background:var(--c-accent-soft) !important; border-color:rgba(214,180,106,.24) !important; }
/* buttons inside pages */
body[data-style="c"] main button.gold-gradient, body[data-style="c"] main a.gold-gradient{ border-radius:10px !important; font-weight:600 !important; }
body[data-style="c"] main button.border-border, body[data-style="c"] main a.border-border{ border-radius:10px !important; border-color:var(--c-line-2) !important; background:var(--c-s1) !important; transition:background-color var(--c-fast), border-color var(--c-fast); }
body[data-style="c"] main button.border-border:hover, body[data-style="c"] main a.border-border:hover{ background:var(--c-s2) !important; border-color:rgba(255,255,255,.22) !important; }
body[data-style="c"] main .text-gold{ color:var(--c-accent) !important; }
body[data-style="c"] .bg-gold\/15{ background:var(--c-accent-soft) !important; }

/* ---- Games page (Casino / Slot / Fishing / Arcade) ---- */
#gp-tabs [role="group"]{ gap:.35rem !important; padding:.35rem !important; border-radius:14px !important; background:var(--c-s1) !important; border:1px solid var(--c-line) !important; }
#gp-tabs [role="group"] > button{ min-height:2.5rem; padding:.45rem .95rem !important; border-radius:10px !important; border:1px solid transparent !important; background:transparent !important;
  color:var(--c-text-2) !important; font-size:.875rem !important; font-weight:600 !important; box-shadow:none !important; transition:color var(--c-fast), background-color var(--c-fast), border-color var(--c-fast); }
#gp-tabs [role="group"] > button:hover{ color:var(--c-text) !important; background:rgba(255,255,255,.045) !important; }
#gp-tabs [role="group"] > button[aria-pressed="true"]{ background:var(--c-accent-soft) !important; border-color:rgba(214,180,106,.42) !important; color:var(--c-accent-hi) !important; }
#gp-tabs .bg-prosper{ background:var(--c-accent-soft) !important; color:var(--c-accent) !important; }
#gp-tabs .vc-pdot{ display:inline-block; width:.5rem; height:.5rem; border-radius:999px; flex-shrink:0; }
#gp-tabs .gp-ic img{ width:1.35rem !important; height:1.35rem !important; }
#pg-search{ height:2.5rem; border-radius:10px !important; background:var(--c-s1) !important; border:1px solid var(--c-line-2) !important; color:var(--c-text); font-size:.875rem;
  transition:border-color var(--c-fast), box-shadow var(--c-fast), background-color var(--c-fast); }
#pg-search:hover{ border-color:rgba(255,255,255,.2) !important; }
#pg-search:focus{ background:var(--c-s2) !important; border-color:rgba(214,180,106,.6) !important; box-shadow:0 0 0 4px rgba(214,180,106,.12); outline:none; }
#pg-search::placeholder{ color:var(--c-text-3); }
.vc-search-ic{ width:1rem; height:1rem; display:block; color:var(--c-text-3); }
#gp-body h2 .text-white\/40{ color:var(--c-text-3) !important; font-weight:600; }
.game-card p.text-\[13px\]{ color:var(--c-text); font-weight:600; }
.game-card p.text-\[10px\]{ color:var(--c-text-2) !important; }
.game-card .gold-gradient{ box-shadow:none !important; }

/* ---- Promos ---- */
#promos-grid > .rounded-2xl{ background:var(--c-s1) !important; border-color:var(--c-line) !important; }
#promos-grid > .rounded-2xl:hover{ background:var(--c-s1) !important; }
#promos-grid h3:hover{ color:var(--c-accent-hi) !important; }
body[data-page="promos"] main > p.rounded-xl{ border-radius:14px !important; color:var(--c-text-3) !important; }
#promo-modal > .relative{ background:var(--c-s1) !important; border-color:var(--c-line-2) !important; border-radius:var(--c-r-lg) !important; }

/* ---- VIP page (VIP redesign V9a, 2026-10-22: the design team's latest VIP page, ported by hand from its look, never its code;
   docs/design-notes/vip-redesign-plan.md V9 and frontend-handover-1020-plan.md §3 "The VIP page"). Every rule works for any
   number of levels; a level's colour is the server's (--vv-c, set only to a hex colour), never one taken from the level's place
   in the list; a trophy shows only when the level names one (vip.html VV_TROPHIES). ---- */
#vip-body.vv{ display:block; }
.vv-sec{ margin-top:2rem; } .vv-sec:first-child{ margin-top:0; }
.vv-h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.15rem .75rem; margin:0 0 .75rem; }
.vv-h h2{ font-family:var(--c-display); font-size:1.05rem; font-weight:700; letter-spacing:.01em; color:var(--c-text); }
.vv-h p{ font-size:.78rem; color:var(--c-text-3); }
.vv-card{ border-radius:20px; border:1px solid var(--c-line); background:var(--c-s1); }
.vv-note{ font-size:.875rem; line-height:1.55; color:var(--c-text-2); }
.vv-note-sm{ font-size:.78rem; line-height:1.5; color:var(--c-text-3); }
/* a level's picture: its trophy, else its badge (icon or initial in its colour); no level, the crown in grey */
.vv-art{ --vv-c:#D6B46A; display:grid; place-items:center; flex-shrink:0; width:3rem; height:3rem; }
.vv-art[hidden]{ display:none !important; }
.vv-art img{ display:block; width:100%; height:100%; max-width:none; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.vv-trophy img{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.vv-badge{ border-radius:14px; border:1px solid color-mix(in srgb, var(--vv-c) 45%, transparent); background:color-mix(in srgb, var(--vv-c) 12%, transparent);
  color:var(--vv-c); font-family:var(--c-display); font-size:1.25rem; font-weight:800; line-height:1; }
.vv-emb{ border-radius:14px; border:1px solid var(--c-line-2); color:var(--c-text-3); }
.vv-emb svg{ width:55%; height:55%; }
.vv-art-xl{ width:84px; height:84px; } .vv-art-xl.vv-badge, .vv-art-xl.vv-emb{ border-radius:20px; font-size:2.1rem; }
.vv-art-md{ width:3.5rem; height:3.5rem; } .vv-art-md.vv-badge{ border-radius:16px; font-size:1.5rem; }
.vv-art-sm{ width:1.6rem; height:1.6rem; } .vv-art-sm.vv-badge{ border-radius:8px; font-size:.8rem; }
/* 1. My VIP Status: the picture and the level, then the progress across the card */
.vv-status{ --vv-c:#D6B46A; position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.25rem 1.5rem; align-items:center; padding:1.4rem 1.5rem;
  border-color:color-mix(in srgb, var(--vv-c) 28%, transparent);
  background:radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--vv-c) 13%, transparent), transparent 60%), var(--c-s1); }
.vv-st-who{ min-width:0; display:grid; gap:.3rem; }
.vv-st-l{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-3); }
.vv-st-n{ font-family:var(--c-display); font-size:1.6rem; font-weight:800; line-height:1.15; color:#fff; overflow-wrap:anywhere; }
.vv-st-n.vv-tinted{ color:var(--vv-c); }
.vv-st-big{ font-family:var(--c-display); font-size:1.15rem; font-weight:700; color:var(--c-text); }
.vv-st-how{ font-size:.85rem; line-height:1.5; color:var(--c-text-2); }
.vv-st-top{ font-size:.85rem; font-weight:600; line-height:1.5; color:var(--c-accent); }
.vv-st-prog{ grid-column:1 / -1; display:grid; gap:.55rem; padding-top:1.1rem; border-top:1px solid var(--c-line); }
.vv-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25rem .75rem; font-size:.85rem; color:var(--c-text-2); }
.vv-row b{ font-family:var(--c-display); font-size:1rem; font-weight:800; color:var(--c-accent-hi); font-variant-numeric:tabular-nums; }
.vv-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.vv-bar span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#B8924A,#E2C381); }
.vv-amt{ color:var(--c-text); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vv-next{ display:inline-flex; align-items:center; gap:.45rem; min-width:0; } .vv-next b{ font-family:inherit; font-size:.9rem; font-weight:700; color:#fff; overflow-wrap:anywhere; }
.vv-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.vv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:max(2.5rem, 44px); padding:0 1.1rem; border-radius:12px;
  border:1px solid var(--c-line-2); background:rgba(255,255,255,.04); color:#fff; font-size:.875rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vv-btn-gold{ border-color:transparent; background:linear-gradient(135deg,#E2C68A,#C9A35A); color:#1a1205; }
.vv-btn[disabled]{ opacity:.55; cursor:default; }
/* 2. Rewards to claim */
.vv-rewards{ display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
@media (min-width:640px){ .vv-rewards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.vv-reward{ --vv-c:#D6B46A; display:flex; flex-direction:column; gap:.55rem; min-width:0; padding:1.1rem 1.2rem; }
.vv-reward-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; min-width:0; }
.vv-reward-t{ flex:1 1 7rem; min-width:0; }   /* a narrow card puts the state under the name instead of breaking the name */
.vv-reward-k{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); }
.vv-reward-n{ font-family:var(--c-display); font-weight:700; color:#fff; overflow-wrap:anywhere; }
.vv-reward-a{ font-family:var(--c-display); font-size:1.5rem; font-weight:800; color:#F1DDA8; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vv-state{ flex-shrink:0; border-radius:999px; padding:.2rem .65rem; font-size:.75rem; font-weight:700; white-space:nowrap; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
.vv-state-claimable{ background:rgba(52,168,110,.16); color:#7fd8a8; }
.vv-state-held{ background:rgba(214,180,106,.14); color:#E2C381; }
.vv-say{ margin-bottom:.75rem; padding:.65rem .85rem; border-radius:12px; border:1px solid var(--c-line-2); background:rgba(255,255,255,.04); font-size:.85rem; line-height:1.5; color:var(--c-text); }
.vv-say-ok{ border-color:rgba(52,168,110,.4); background:rgba(52,168,110,.08); color:#a7e6c4; }
.vv-say-no{ border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.06); color:#fca5a5; }
.vv-warn{ display:grid; gap:.25rem; margin-bottom:.75rem; padding:.65rem .85rem; border-radius:12px; border:1px solid rgba(214,180,106,.4); background:rgba(214,180,106,.1); }
.vv-warn-p{ font-size:.8125rem; font-weight:600; line-height:1.5; color:#E2C68A; }
/* V9b: a rebate statement's week or month, and the tables of rates and parts (a statement's six parts, Your rebate, VIP
   Privileges); a table wider than its card scrolls sideways inside it, never the page */
.vv-reward-p{ font-size:.78rem; color:var(--c-text-3); font-variant-numeric:tabular-nums; }
.vv-tbl-wrap{ max-width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.vv-tbl{ width:100%; border-collapse:collapse; font-size:.8125rem; font-variant-numeric:tabular-nums; }
.vv-tbl th, .vv-tbl td{ padding:.45rem .5rem; border-top:1px solid var(--c-line); text-align:right; white-space:nowrap; }
.vv-tbl thead th{ border-top:0; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); white-space:normal; }
.vv-tbl th:first-child{ padding-left:0; text-align:left; }
.vv-tbl td:last-child, .vv-tbl th:last-child{ padding-right:0; }
.vv-tbl tbody th{ font-weight:600; color:var(--c-text-2); white-space:normal; }
.vv-tbl-sub{ display:block; margin-top:.1rem; font-size:.72rem; font-weight:500; color:var(--c-text-3); white-space:nowrap; }
.vv-tbl td{ color:var(--c-text); font-weight:600; }
.vv-rebate{ --vv-c:#D6B46A; display:grid; gap:.55rem; padding:.5rem 1.25rem 1.1rem; }
.vv-sub{ margin-top:.75rem; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-3); }
/* 3. VIP Level Progression: a row of every level, scrolling sideways when there are many; hidden on phones (the design), where
   My VIP Status shows the progress and VIP Privileges every level */
.vv-ladder{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(7.25rem, 1fr); gap:.5rem; margin:0; padding:1.1rem 1rem 1rem; list-style:none; overflow-x:auto; scrollbar-width:thin; }
.vv-lv{ --vv-c:#D6B46A; position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:0; padding:.9rem .4rem .8rem; border-radius:14px; border:1px solid transparent; text-align:center; }
.vv-lv.is-cur{ border-color:color-mix(in srgb, var(--vv-c) 45%, transparent); background:color-mix(in srgb, var(--vv-c) 8%, transparent); }
.vv-lv-n{ font-family:var(--c-display); font-size:.95rem; font-weight:700; color:#fff; overflow-wrap:anywhere; }
.vv-lv-r{ font-size:.8rem; color:var(--c-text-2); font-variant-numeric:tabular-nums; } .vv-lv-r.is-soft{ color:var(--c-text-3); }
.vv-tag{ display:inline-block; padding:.08rem .45rem; border-radius:999px; font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--c-on-accent); background:var(--c-accent); }
.vv-lv .vv-tag{ position:absolute; top:-.55rem; left:50%; transform:translateX(-50%); white-space:nowrap; }
@media (max-width:767.98px){ .vv-sec-ladder{ display:none; } }
/* 4. VIP Privileges, one level at a time (the card clips its tab bar to its rounded corners) */
.vv-priv{ overflow:hidden; }
.vv-tabs{ display:flex; gap:.35rem; padding:.75rem; border-bottom:1px solid var(--c-line); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vv-tabs::-webkit-scrollbar{ display:none; }
.vv-tab{ --vv-c:#D6B46A; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:0 .85rem; border-radius:12px;
  border:1px solid transparent; background:none; color:var(--c-text-2); font-size:.88rem; font-weight:600; cursor:pointer; transition:color var(--c-fast), background var(--c-fast), border-color var(--c-fast); }
@media (min-width:768px){ .vv-tab{ flex:1 0 auto; } }
.vv-tab.is-on{ color:#F1DDA8; border-color:rgba(214,180,106,.4); background:rgba(214,180,106,.09); }
.vv-tab i{ width:6px; height:6px; border-radius:50%; background:var(--c-accent); }
.vv-panel{ padding:.25rem 1.25rem 1.1rem; }
.vv-panel-h{ --vv-c:#D6B46A; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.9rem 0 .35rem; font-family:var(--c-display); font-weight:700; color:#fff; overflow-wrap:anywhere; }
.vv-dl{ margin:0 0 .4rem; }
.vv-dl > div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem 1rem; padding:.55rem 0; border-top:1px solid var(--c-line); font-size:.9rem; }
.vv-dl > div:first-child{ border-top:0; }
.vv-dl dt{ color:var(--c-text-2); } .vv-dl dd{ min-width:0; margin:0; color:var(--c-text); font-weight:600; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
/* 5. History */
.vv-hist{ list-style:none; margin:0; padding:.35rem 1.1rem; }
.vv-hist li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .75rem; padding:.65rem 0; border-top:1px solid var(--c-line); font-size:.875rem; }
.vv-hist li:first-child{ border-top:0; }
.vv-hist-w{ color:var(--c-text); font-weight:600; }
.vv-hist-l{ flex:1 1 8rem; min-width:0; color:var(--c-text-2); overflow-wrap:anywhere; }
.vv-hist-d{ margin-left:auto; color:var(--c-text-3); font-size:.78rem; font-variant-numeric:tabular-nums; }
/* 6. The VIP terms, an accordion (collapsed) */
.vv-acc-h{ margin:0; }
.vv-acc-b{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding:0 1.25rem; border:0; border-radius:20px; background:none; cursor:pointer;
  font-family:var(--c-display); font-size:1rem; font-weight:700; color:var(--c-text); text-align:left; }
.vv-acc-b svg{ width:18px; height:18px; flex-shrink:0; color:var(--c-text-3); transition:transform var(--c-fast); }
.vv-acc-b[aria-expanded="true"] svg{ transform:rotate(180deg); }
.vv-acc-p{ padding:0 1.25rem 1.1rem; border-top:1px solid var(--c-line); }
.vv-acc-p p{ margin-top:.75rem; font-size:.88rem; line-height:1.6; color:var(--c-text-2); white-space:pre-line; overflow-wrap:anywhere; }
/* the guest view */
.vv-guest{ padding:2rem 1.5rem; text-align:center; border-color:rgba(214,180,106,.22); }
.vv-guest .vc-tile-ic{ margin:0 auto; }
.vv-guest-kinds:not(:empty){ margin-top:2rem; }
.vv-kinds{ display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
@media (min-width:640px){ .vv-kinds{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.vv-kind{ display:grid; gap:.5rem; justify-items:center; padding:1.1rem 1.2rem; text-align:center; }
.vv-kind-t{ font-family:var(--c-display); font-weight:700; color:var(--c-text); }
.vv-btn:focus-visible, .vv-tab:focus-visible, .vv-acc-b:focus-visible{ outline:2px solid rgba(214,180,106,.85); outline-offset:2px; }
/* The hover look only where a pointer can hover, so it never sticks after a tap. */
@media (hover:hover) and (pointer:fine){ .vv-btn:hover{ border-color:rgba(214,180,106,.55); } .vv-btn-gold:hover{ filter:brightness(1.05); } .vv-tab:hover{ color:var(--c-text); } }
@media (max-width:767.98px){ .vv-status{ padding:1.15rem; gap:1rem; } .vv-art-xl{ width:64px; height:64px; } .vv-art-xl.vv-badge, .vv-art-xl.vv-emb{ font-size:1.6rem; } .vv-st-n{ font-size:1.35rem; } .vv-panel{ padding:.25rem 1rem 1rem; } }
@media (prefers-reduced-motion:reduce){ .vv-acc-b svg, .vv-tab{ transition:none; } }

/* ---- Help ---- */
body[data-page="help"] main section.rounded-2xl{ padding:1.5rem !important; }
@media (min-width:768px){ body[data-page="help"] main section.rounded-2xl{ padding:1.75rem 2rem !important; } }
body[data-page="help"] main section h2{ display:flex; align-items:center; gap:.75rem; font-size:1.35rem !important; }
@media (min-width:640px){ body[data-page="help"] main section h2{ font-size:1.5rem !important; } }
body[data-page="help"] main section ol, body[data-page="help"] main section ul{ color:var(--c-text-2) !important; line-height:1.6; }
body[data-page="help"] main section b.text-white{ color:var(--c-text) !important; font-weight:600; }
body[data-page="help"] .vc-qcard{ display:flex !important; align-items:center; gap:.85rem; }
body[data-page="help"] .vc-qcard p.font-semibold{ margin-top:0 !important; font-size:.92rem; color:var(--c-text); }
body[data-page="help"] .vc-qcard p.text-xs{ color:var(--c-text-2) !important; margin-top:.1rem; }
body[data-page="help"] #faq details{ background:var(--c-s1) !important; border-color:var(--c-line) !important; border-radius:14px !important; padding:1rem 1.15rem !important; transition:border-color var(--c-fast); }
body[data-page="help"] #faq details[open], body[data-page="help"] #faq details:hover{ border-color:var(--c-line-2) !important; }
body[data-page="help"] #faq summary{ font-size:.95rem; font-weight:600; color:var(--c-text); }
body[data-page="help"] #faq .chev{ color:var(--c-text-3); }
body[data-page="help"] #faq details p{ color:var(--c-text-2) !important; line-height:1.6; }
body[data-page="help"] #support{ background:var(--c-s1) !important; border-color:rgba(214,180,106,.28) !important; }
body[data-page="help"] #support a, body[data-page="help"] #support button{ border-radius:10px !important; }
body[data-page="help"] #support a.border-border{ background:var(--c-s2) !important; }
body[data-page="help"] #support .vc-ic{ width:1rem; height:1rem; }

@media (prefers-reduced-motion:reduce){ body[data-style="c"] .card-hover, #gp-tabs [role="group"] > button{ transition:none !important; transform:none !important; } }

/* ---- Games page — MOBILE provider filter as logo cards (2026-10-13). Phones and tablets (<1024px, wherever the ☰ menu is used); desktop keeps the pill row. ----
   Same logos, card style, brand glow and badges as the desktop dropdown; "All providers" is a compact full-width option on top. */
#gp-tabs .gp-logo, #gp-tabs .gp-cover{ display:none; }
#gp-tabs .gp-ic{ display:inline-flex; align-items:center; }
@media (max-width:1023.98px){
  #gp-tabs [role="group"]{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem !important; overflow:visible !important; padding:.5rem !important; }
  #gp-tabs [role="group"] > button.gp-all{ grid-column:1 / -1; justify-self:start; width:auto; justify-content:center; min-height:2.2rem !important; padding:.35rem 1rem !important; border-radius:999px !important;
    background:#1E222A !important; border:1px solid rgba(255,255,255,.06) !important; color:var(--c-text-2) !important; font-size:.85rem !important; }
  #gp-tabs [role="group"] > button.gp-prov{ --pg:214 180 106; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
    height:4.5rem; min-height:0 !important; padding:.5rem .75rem !important; border-radius:12px !important;
    background:#1E222A !important; border:1px solid rgba(255,255,255,.06) !important; color:var(--c-text) !important;
    transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  #gp-tabs [role="group"] > button.gp-prov::before{ content:''; position:absolute; z-index:-1; left:50%; top:50%; width:74%; height:80%; transform:translate(-50%,-50%);
    border-radius:50%; background:radial-gradient(closest-side, rgb(var(--pg) / .2), rgb(var(--pg) / 0)); opacity:.85; pointer-events:none; transition:opacity .25s ease; }
  #gp-tabs [role="group"] > button.gp-prov:active{ background:#252A33 !important; }
  /* selected = muted gold edge (also for "All providers") */
  #gp-tabs [role="group"] > button[aria-pressed="true"]{ background:#252A33 !important; border-color:rgba(214,180,106,.6) !important; box-shadow:0 0 0 1px rgba(214,180,106,.18) !important; color:var(--c-accent-hi) !important; }
  #gp-tabs [role="group"] > button.gp-prov[aria-pressed="true"]::before{ opacity:1; }
  /* logo cards: logo centred, name kept for screen readers only */
  #gp-tabs .gp-has-logo .gp-logo{ display:block; height:2.75rem; width:auto; max-width:100%; object-fit:contain; }
  #gp-tabs .gp-has-logo .gp-ic{ display:none; }
  #gp-tabs .gp-has-logo .gp-nm{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  #gp-tabs .gp-prov:not(.gp-has-logo) .gp-nm{ font-size:.85rem; font-weight:600; }
  #gp-tabs .gp-prov:not(.gp-has-logo) .gp-ic{ display:none; }
  #gp-tabs .gp-prov .gp-hot{ position:absolute; top:5px; right:5px; z-index:2; margin:0; }   /* HOT badge top-right on the mobile cards */
  /* new providers with a cover photo (2026-10-14): full-colour cover, soft bottom gradient, name bottom-left */
  #gp-tabs .gp-has-cover{ justify-content:flex-end !important; align-items:flex-start !important; padding:0 !important; }
  #gp-tabs .gp-has-cover::before{ display:none; }
  #gp-tabs .gp-has-cover .gp-cover{ display:block; position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
  #gp-tabs .gp-has-cover::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(10,11,14,0), rgba(10,11,14,.72)); }
  #gp-tabs .gp-has-cover .gp-nm{ position:relative; margin:0 0 .4rem .6rem; font-size:.78rem !important; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.85); }
  #gp-tabs .gp-has-cover .gp-tag:not(.bg-prosper){ background:rgba(10,11,14,.78) !important; color:#D1D5DB !important; }   /* name-only cards: no pill dot, just the name (2026-10-13 evening) */
  /* badges top-right */
  #gp-tabs .gp-prov .gp-tag{ position:absolute; top:5px; right:5px; margin:0 !important; padding:1px 6px !important; border-radius:999px; font-size:9px !important; font-weight:700; line-height:1.5; }
  #gp-tabs .gp-prov .gp-tag.bg-prosper{ background:rgba(214,180,106,.16) !important; color:#E2C381 !important; border:1px solid rgba(214,180,106,.35); }
  #gp-tabs .gp-prov .gp-tag:not(.bg-prosper){ background:rgba(16,18,22,.7); color:#9CA3AF !important; border:1px solid rgba(255,255,255,.1) !important; }
  /* brand glow per provider (same colours as the desktop dropdown) and optical size balance */
  #gp-tabs .gp-prov:has(img[src*="/dream-gaming."]){ --pg:214 170 80; }
  #gp-tabs .gp-prov:has(img[src*="/sa-gaming."]){ --pg:200 160 105; }
  #gp-tabs .gp-prov:has(img[src*="/sexy-casino."]){ --pg:236 72 153; }
  #gp-tabs .gp-prov:has(img[src*="/pragmatic-play."]){ --pg:245 140 30; }
  #gp-tabs .gp-prov:has(img[src*="/live22."]){ --pg:80 150 255; }
  #gp-tabs .gp-prov:has(img[src*="/jili."]){ --pg:235 180 50; }
  #gp-tabs .gp-prov:has(img[src*="/joker-gaming."]){ --pg:215 195 125; }
  #gp-tabs .gp-prov:has(img[src*="/playtech."]){ --pg:120 160 255; }
  #gp-tabs .gp-prov:has(img[src*="/microgaming."]){ --pg:40 190 140; }
  #gp-tabs .gp-logo[src*="/microgaming."]{ height:3.3rem; }
  #gp-tabs .gp-logo[src*="/sa-gaming."], #gp-tabs .gp-logo[src*="/playtech."]{ height:3.05rem; }
  #gp-tabs .gp-logo[src*="/pragmatic-play."], #gp-tabs .gp-logo[src*="/sexy-casino."]{ height:2.6rem; }
  #gp-tabs .gp-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)); }
}
@media (max-width:1023.98px) and (prefers-reduced-motion:reduce){ #gp-tabs [role="group"] > button.gp-prov, #gp-tabs [role="group"] > button.gp-prov::before{ transition:none; } }
#gp-tabs .gp-hot{ margin-left:.35rem; }   /* desktop pill: HOT sits after the name */

/* ---- Slot page: provider image-card GRID (2026-10-14 v2 — replaces the carousel) ---- */
.vc-ps-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; }
@media (min-width:640px){ .vc-ps-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:768px){ .vc-ps-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:.7rem; } }
@media (min-width:1024px){ .vc-ps-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:.75rem; } }
.vc-ps-card{ position:relative; isolation:isolate; display:block; width:100%; aspect-ratio:170 / 92; overflow:hidden; border-radius:12px;
  background:#1E222A; border:1px solid rgba(255,255,255,.08); box-shadow:0 6px 16px -10px rgba(0,0,0,.7); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color:transparent; }
.vc-ps-img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.vc-ps-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:40%; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(10,11,14,0), rgba(10,11,14,.45)); }
.vc-ps-nm{ display:none; }
.vc-ps-noimg{ background:var(--c-s1); border-color:var(--c-line-2); }
.vc-ps-noimg .vc-ps-nm{ display:grid; place-items:center; position:absolute; inset:0; padding:0 .6rem; text-align:center; font-family:var(--c-display); font-size:.9rem; font-weight:700; color:var(--c-text); }
.vc-ps-card:hover{ border-color:rgba(255,255,255,.22); }
.vc-ps-card:hover .vc-ps-img{ transform:scale(1.06); }
.vc-ps-card[aria-pressed="true"]{ border-color:rgba(214,180,106,.95); box-shadow:0 0 0 1px rgba(214,180,106,.45), 0 8px 22px -12px rgba(214,180,106,.55); }
.vc-ps-card .vc-hot.vc-hot-abs{ top:5px; right:5px; }
/* Popular Games card (was "HOT Games"): burgundy/black, warm glowing edge, live flame + embers — original fire design */
.vc-ps-hotgames{ display:flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid rgba(255,150,70,.6);
  background:radial-gradient(120% 140% at 30% 110%, rgba(255,110,40,.28), rgba(255,110,40,0) 55%), radial-gradient(90% 120% at 100% 0%, #4A1019 0%, rgba(74,16,25,0) 70%), linear-gradient(160deg,#2A0A10 0%,#140508 55%,#0B0B0D 100%);
  box-shadow:0 0 0 1px rgba(255,140,60,.18), 0 0 14px -2px rgba(255,110,40,.45); animation:vcPsHotGlow 2.6s ease-in-out infinite; }
.vc-ps-hotgames[aria-pressed="true"]{ border-color:rgba(255,196,110,.95); box-shadow:0 0 0 1px rgba(255,176,90,.55), 0 0 20px -2px rgba(255,120,40,.6); }
.vc-ps-flame{ position:relative; display:inline-block; width:22px; height:26px; flex-shrink:0; }
.vc-ps-flame .vc-fo{ filter:drop-shadow(0 0 3px rgba(255,170,70,.9)) drop-shadow(0 0 8px rgba(255,90,30,.6)); }
.vc-ps-flame .vc-fo{ transform-origin:50% 85%; } .vc-ps-flame .vc-fi{ transform-origin:50% 79%; opacity:1; }
.vc-ps-flame .vc-fl-out{ fill:#FF8A3D; }
.vc-ps-flame .vc-fl-in{ fill:#FFE29A; }
.vc-ps-flame .vc-ember{ left:9px; bottom:18px; width:2.5px; height:2.5px; }
.vc-ps-flame .vc-ember:nth-of-type(2){ left:14px; } .vc-ps-flame .vc-ember:nth-of-type(3){ left:5px; }
.vc-ps-hotlabel{ font-family:var(--c-display); font-size:1rem; font-weight:800; letter-spacing:.01em; white-space:nowrap;
  background:linear-gradient(180deg,#FFE7B0 0%,#FFB05A 55%,#FF7A3A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 1px 6px rgba(255,110,40,.35)); }
@keyframes vcPsHotGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,140,60,.18), 0 0 12px -2px rgba(255,110,40,.4); } 50%{ box-shadow:0 0 0 1px rgba(255,150,70,.3), 0 0 20px 0 rgba(255,110,40,.6); } }
@media (max-width:639.98px){ .vc-ps-hotlabel{ font-size:.9rem; } .vc-ps-flame{ width:19px; height:23px; } }
@media (prefers-reduced-motion:reduce){ .vc-ps-hotgames, .vc-ps-flame .vc-fo, .vc-ps-flame .vc-fi{ animation:none !important; } .vc-ps-flame .vc-ember{ display:none !important; } .vc-ps-img, .vc-ps-card{ transition:none !important; } }
/* Popular Games card background image (2026-10-14): popular.webp fills the card (cover, centred) under a soft dark
   centre so the label stays readable. Flame, embers, glow pulse, border and selected state above are unchanged. */
.vc-ps-hotgames{ background:radial-gradient(75% 70% at 50% 50%, rgba(12,4,6,.66) 0%, rgba(12,4,6,.42) 55%, rgba(12,4,6,.1) 100%),
  url('/assets/providers/covers/popular.webp') center / cover no-repeat, #140508; }
/* Phones (2-column grid): first 8 cards + "View All Providers ↓" / "Show Less ↑". Tablets and desktop: the limits below. */
.vc-ps-more{ display:none; }
@media (max-width:639.98px){
  .vc-ps:not(.vc-ps-open) .vc-ps-grid > .vc-ps-card:nth-child(n+9){ display:none; }
  .vc-ps-more{ display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:.75rem; padding:.6rem 1rem; border-radius:12px;
    border:1px solid rgba(214,180,106,.4); background:rgba(214,180,106,.06); color:#E2C68A; font-size:.875rem; font-weight:700; letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent; transition:background-color .15s ease, border-color .15s ease; }
  .vc-ps-more:active{ background:rgba(214,180,106,.14); border-color:rgba(214,180,106,.7); }
}
.vc-ps-more:focus-visible{ outline:2px solid rgba(214,180,106,.8); outline-offset:2px; }

/* ===== Provider grid limits (the design handover of 2026-10-20, H1): View All Providers / Show Less on every screen size.
   Phones (< 640 px): first 8 cards + the full-width "View All Providers ↓" button above (unchanged).
   Tablets (640–1023 px): first 8 cards. Desktop (1024 px +): first 12 (provider grid: 2 rows of 6 incl. Popular Games;
   Live Casino: 3 rows of 4). The button shows only when there are more cards than the limit (vc-ps-m: > 8, vc-ps-d: > 12);
   on tablets and desktop it is the same gold-outline button, centred, without arrows. */
.vc-psm-d{ display:none; }
@media (max-width:1023.98px){
  .vc-ps-m:not(.vc-ps-open) .vc-ps-grid > .vc-ps-card:nth-child(n+9),
  .vc-ps-m:not(.vc-ps-open) .vc-cc-grid > .vc-cc:nth-child(n+9){ display:none; }
}
@media (min-width:640px){
  .vc-psm-m{ display:none; } .vc-psm-d{ display:inline; }
  .vc-ps-more{ align-items:center; justify-content:center; min-width:15rem; min-height:44px; margin:1.1rem auto 0; padding:.6rem 1.5rem;
    border-radius:12px; border:1px solid rgba(214,180,106,.4); background:rgba(214,180,106,.06); color:#E2C68A; font-size:.875rem; font-weight:700;
    letter-spacing:.01em; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .15s ease, border-color .15s ease; }
  .vc-ps-more:active{ background:rgba(214,180,106,.14); border-color:rgba(214,180,106,.7); }
}
/* The hover colour only where a pointer can hover, so it never sticks after a tap on a tablet. */
@media (min-width:640px) and (hover:hover) and (pointer:fine){ .vc-ps-more:hover{ background:rgba(214,180,106,.13); border-color:rgba(214,180,106,.6); } }
@media (min-width:640px) and (max-width:1023.98px){ .vc-ps-m .vc-ps-more{ display:flex; } }
@media (min-width:1024px){
  .vc-ps-d:not(.vc-ps-open) .vc-ps-grid > .vc-ps-card:nth-child(n+13),
  .vc-ps-d:not(.vc-ps-open) .vc-cc-grid > .vc-cc:nth-child(n+13){ display:none; }
  .vc-ps-d .vc-ps-more{ display:flex; }
}


/* ---- Casino page: Live Casino provider cover grid (2026-10-14) — homepage-style 4:3 cards, click = enter that casino ---- */
.vc-cc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem; }
@media (min-width:640px){ .vc-cc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; } }
@media (min-width:1024px){ .vc-cc-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; } }
.vc-cc{ position:relative; isolation:isolate; display:block; width:100%; aspect-ratio:4 / 3; overflow:hidden; border-radius:16px; cursor:pointer;
  background:var(--c-s1); border:1px solid var(--c-line); box-shadow:0 10px 26px -18px rgba(0,0,0,.85);
  transition:border-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color:transparent; }
.vc-cc-img{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .25s ease; }
.vc-cc-nm{ position:absolute; left:.85rem; bottom:.7rem; right:3rem; z-index:1; text-align:left; font-family:var(--c-display); font-size:.95rem; font-weight:700;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-cc-noimg .vc-cc-nm{ top:0; bottom:0; left:0; right:0; display:grid; place-items:center; text-align:center; text-shadow:none; }
.vc-cc .vc-hot.vc-hot-abs{ top:8px; right:8px; }
@media (hover:hover) and (pointer:fine){
  .vc-cc:hover, .vc-cc:focus-visible{ border-color:rgba(214,180,106,.6); box-shadow:0 0 0 1px rgba(214,180,106,.22), 0 14px 30px -18px rgba(0,0,0,.85); }
  .vc-cc:hover .vc-cc-img, .vc-cc:focus-visible .vc-cc-img{ transform:scale(1.04); }
}
/* The chosen Live Casino card (review of 2026-10-15, D1): the same gold edge as a chosen Slot card, on every device; after the
   hover rule above so a pointer over it keeps it. */
.vc-cc[aria-pressed="true"]{ border-color:rgba(214,180,106,.95); box-shadow:0 0 0 1px rgba(214,180,106,.45), 0 8px 22px -12px rgba(214,180,106,.55); }
@media (max-width:639.98px){ .vc-cc{ border-radius:14px; } .vc-cc-nm{ left:.6rem; bottom:.5rem; font-size:.8rem; } }
@media (prefers-reduced-motion:reduce){ .vc-cc, .vc-cc-img{ transition:none !important; } .vc-cc:hover .vc-cc-img{ transform:none !important; } }
/* ---------- Layout-shift fix (2026-10-15) ----------
   1) The header is drawn by luxe88-shared.js after the page starts to paint: until #app-top exists, an empty block of the
      header's exact height (4rem + 1px border on phones/tablets, 4.5rem + 1px from 1024px) holds its place.
   2) Promos list: space of the final empty-state card is held while it loads.
   3) Games area placeholder (games.html): the final "Coming soon" card, invisible, on a skeleton tint. */
body[data-style="c"]:not(:has(> #app-top))::before{ content:''; display:block; height:calc(4rem + 1px); }
@media (min-width:1024px){ body[data-style="c"]:not(:has(> #app-top))::before{ height:calc(4.5rem + 1px); } }
#promos-grid:empty, #promos-grid > .vc-promos-wait{ min-height:13.65rem; }
@media (min-width:640px){ #promos-grid:empty, #promos-grid > .vc-promos-wait{ min-height:12.35rem; } }
#promos-grid > .vc-promos-wait{ display:flex; align-items:center; justify-content:center; }
.vc-gp-wait > *{ visibility:hidden; }

/* ===== H5 (2026-10-15): larger touch areas on phones and tablets (below 1024 px). =====
   Invisible only: each small control gets a transparent ::after "hit box" centred on it, at least 44 x 44 px where
   the space around it allows, and smaller where a neighbour is closer, so hit boxes never overlap. Nothing visible
   moves or changes size. Desktop (mouse) is untouched. */
@media (max-width: 1023.98px) {
  .vc-menu-btn, #brand-mark, #vc-lang-btn, header .h-9, .vc-drawer-home, #menu a.block, #menu .vc-dl-opt,
  .vc-viewall, a[href="#mcat-section"], #auth-switch, button[onclick^="opReset.open"], #faq summary,
  #support a[href="/"], footer ul a { position: relative; }
  /* header: menu (27x39), logo, language, Sign in / Register (36 px tall) → 44 px, inside the 64 px header */
  .vc-menu-btn::after, #brand-mark::after, #vc-lang-btn::after, header .h-9::after,
  /* side menu: logo, page links (41 px), EN / ZH (41x35) */
  .vc-drawer-home::after, #menu .vc-dl-opt::after,
  /* "View all N providers" (41 px), Hot Games "View all ›" (20 px), sign-in dialog links + close, help page */
  .vc-viewall::after, a[href="#mcat-section"]::after,
  #auth-modal button[aria-label="Close"]::after, #promo-modal button[aria-label="Close"]::after,
  #faq summary::after, #support a[href="/"]::after,
  /* banner arrows (33 px) */
  .vb-arrow::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  /* side-menu page links: the 41 px row plus the 4 px gap, so neighbouring links never share a hit box */
  #menu a.block::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(100% + .25rem); transform: translateY(-50%); }
  /* sign-in dialog text links ("Forgot password?", "Create an account"): wider, and as tall as the space between the
     password field, the Sign in button and the line below allows (about 34 px / 32 px) */
  #auth-switch::after, button[onclick^="opReset.open"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); transform: translate(-50%, -50%); }
  button[onclick^="opReset.open"]::after { height: calc(100% + 1.2rem); }
  #auth-switch::after { height: calc(100% + 1rem); }
  /* banner dots: the full gap above and below (about 39 px tall); their width stays the dot spacing, so the
     three dots never overlap each other or the banner. The visible dot is ::before and is unchanged. */
  .vb-dot { position: relative; }
  .vb-dot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(100% + 1.2rem); transform: translateY(-50%); }
  /* footer links: as wide as 44 px and as tall as the gap between rows allows (about 26 px), so rows don't overlap */
  footer ul a::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: calc(100% + .65rem); transform: translate(-50%, -50%);
  }
  /* The hit boxes switch on once the page has settled (html.vc-hit-on is set after load + fonts), so the header's
     own small load-time movement never drags these invisible boxes into the layout-shift score. */
  html:not(.vc-hit-on) :is(.vc-menu-btn, #brand-mark, #vc-lang-btn, header .h-9, .vc-drawer-home, #menu a.block, #menu .vc-dl-opt,
    .vc-viewall, a[href="#mcat-section"], #auth-switch, button[onclick^="opReset.open"], #auth-modal button[aria-label="Close"],
    #promo-modal button[aria-label="Close"], #faq summary, #support a[href="/"], .vb-arrow, .vb-dot, footer ul a)::after { display: none !important; }
}

/* ---------- Back button (the design handover of 2026-10-20, H1): phones + tablets only (< 1024 px), above the page title
   on the Games pages. Minimal: champagne-gold arrow + small label, no box, no border; the tap area is at least 44 x 44 px.
   The homepage carries the same rules in its own Style C block (backend/test-frontend-games-back.js pins the two). */
.vc-back{ display:none; }
@media (max-width:1023.98px){
  .vc-back{ display:inline-flex; align-items:center; gap:.45rem; min-width:44px; min-height:44px; margin:-.6rem 0 .1rem -.15rem; padding:0 .6rem 0 .15rem;
    background:none; border:0; color:rgba(255,255,255,.72); font-size:.875rem; font-weight:600; letter-spacing:.01em; cursor:pointer;
    -webkit-tap-highlight-color:transparent; transition:color .15s ease; }
  .vc-back svg{ width:1.1rem; height:1.1rem; flex-shrink:0; color:#D6B46A; }
  .vc-back:hover, .vc-back:active{ color:#fff; }
  .vc-back:focus-visible{ outline:2px solid rgba(214,180,106,.8); outline-offset:2px; border-radius:8px; }
}
/* ===== The header's profile menu (the design handover of 2026-10-20, H3): the button (avatar, username, chevron) and its
   menu. The same rules in vela-style-c.css and the homepage's Style C block (backend/test-frontend-profile-menu.js). ===== */
.vd-wrap{ position:relative; flex-shrink:0; }
.vd-btn{ display:flex; align-items:center; gap:.5rem; height:max(2.75rem, 44px); padding:0 .55rem 0 .3rem; border-radius:12px; border:1px solid var(--c-line-2, #2a2e36);
  background:var(--c-s1, #171A20); color:var(--c-text, #fff); font-size:.875rem; font-weight:600; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; -webkit-tap-highlight-color:transparent; }
.vd-btn[aria-expanded="true"], .vd-btn:active{ border-color:rgba(214,180,106,.55); background:rgba(214,180,106,.06); }
.vd-btn:focus-visible, .vd-item:focus-visible{ outline:2px solid rgba(214,180,106,.85); outline-offset:2px; }
.vd-av{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:999px; background:rgba(214,180,106,.14); color:#E2C68A; flex-shrink:0; }
.vd-av svg{ width:1.15rem; height:1.15rem; }
.vd-name{ max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-chev{ width:.95rem; height:.95rem; color:rgba(255,255,255,.55); transition:transform .15s ease; }
.vd-btn[aria-expanded="true"] .vd-chev{ transform:rotate(180deg); }
/* Vela's header also holds the balance box, + Deposit, the bell and the VIP chip, none of which shrink: below 1280 px the
   button is the avatar alone (44 px), and from 1280 px the name gives way (an ellipsis) before the logo does. */
@media (max-width:1279.98px){ .vd-name, .vd-chev{ display:none; } .vd-btn{ width:max(2.75rem, 44px); justify-content:center; padding:0; } }
@media (min-width:1280px){ #auth-slot{ flex-shrink:999; min-width:0; } .vd-wrap{ flex-shrink:1; min-width:5rem; } .vd-btn{ max-width:100%; } }
.vd-menu{ position:absolute; right:0; top:calc(100% + .4rem); z-index:80; width:16rem; padding:.4rem; border-radius:14px; border:1px solid var(--c-line-2, #2a2e36);
  background:#15181E; box-shadow:0 18px 40px -14px rgba(0,0,0,.8); max-height:calc(100vh - 5rem); max-height:calc(100dvh - 5rem); overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:.3rem; }
/* Never taller than the screen below the header (sticky on the homepage) and, under 1024 px, above the bottom bar and its
   raised Promos button; the rest scrolls inside the menu. */
@media (max-width:1023.98px){ .vd-menu{ max-height:calc(100vh - 8rem - 24px); max-height:calc(100dvh - 8rem - 24px); } }
.vd-menu[hidden]{ display:none; }
.vd-head{ padding:.6rem .65rem .7rem; border-bottom:1px solid var(--c-line, #22262d); margin-bottom:.3rem; }
.vd-head-name{ font-weight:700; font-size:.9rem; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-head-bal{ display:flex; justify-content:space-between; gap:.5rem; margin-top:.55rem; font-size:.75rem; color:rgba(255,255,255,.55); }
.vd-head-bal b{ color:#E2C68A; font-weight:700; }
.vd-item{ display:flex; align-items:center; gap:.65rem; width:100%; min-height:max(2.6rem, 44px); padding:0 .65rem; border-radius:9px; color:rgba(255,255,255,.82); font-size:.875rem; font-weight:500; text-align:left; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vd-item svg{ width:1.1rem; height:1.1rem; color:#D6B46A; flex-shrink:0; }
.vd-item:focus-visible, .vd-item:active{ background:rgba(255,255,255,.06); color:#fff; }
/* The hover look only where a pointer can hover, so it never sticks after a tap (the button would look open). */
@media (hover:hover) and (pointer:fine){ .vd-btn:hover{ border-color:rgba(214,180,106,.55); background:rgba(214,180,106,.06); } .vd-item:hover{ background:rgba(255,255,255,.06); color:#fff; } }
.vd-sep{ height:1px; margin:.3rem .2rem; background:var(--c-line, #22262d); }
.vd-out, .vd-out svg{ color:#F87171 !important; }
/* ===== My Account (the design handover of 2026-10-20, H4: wallet.html's user header and top cards; the design's .vd-card,
   .va-head and .va-ov-card). ===== */
.vd-card{ border-radius:20px; border:1px solid var(--c-line, #22262d); background:var(--c-s1, #171A20); padding:1.25rem; }
.va-head{ padding:1.1rem 1.25rem; background:radial-gradient(120% 160% at 100% 0%, rgba(214,180,106,.09) 0%, rgba(214,180,106,0) 55%), var(--c-s1, #171A20); }
.va-card{ padding:1.1rem 1.2rem; }
/* ===== My Profile (the design handover of 2026-10-20, H5a: wallet.html's #wa-profile; the design's profile overview, VIP
   card and account details, ported by hand). A VIP level's colour is the server's (the badge's --vp-c), for any number of
   levels, never one taken from the level's place in the list; a trophy shows only when the level names one. ===== */
.vp-prof{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.vd-av.vp-av-lg{ width:3.5rem; height:3.5rem; }
.vd-av.vp-av-lg svg{ width:1.9rem; height:1.9rem; }
.vp-prof-name{ font-family:var(--c-display, inherit); font-size:1.25rem; font-weight:800; color:#fff; overflow-wrap:anywhere; }
.vp-prof-mail{ margin-top:.15rem; font-size:.85rem; color:rgba(255,255,255,.6); overflow-wrap:anywhere; }
.vp-ov{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
@media (min-width:640px){ .vp-ov{ grid-template-columns:repeat(2, minmax(0,1fr)); } .vp-bal{ grid-column:1 / -1; } }
@media (min-width:1024px){ .vp-ov{ grid-template-columns:1.25fr 1fr 1fr; } .vp-bal{ grid-column:auto; } }
.vp-card{ display:flex; flex-direction:column; gap:.55rem; min-width:0; padding:1.1rem 1.2rem; }
.vp-l{ font-size:.75rem; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.6); }
.vp-v{ font-family:var(--c-display, inherit); font-size:1.5rem; font-weight:800; color:#F1DDA8; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vp-bal{ border-color:rgba(214,180,106,.3); background:radial-gradient(140% 160% at 100% 0%, rgba(214,180,106,.12) 0%, rgba(214,180,106,0) 60%), var(--c-s1, #171A20); }
.vp-act{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.vp-btn{ display:inline-flex; flex:1 1 7.5rem; align-items:center; justify-content:center; gap:.4rem; min-height:max(2.5rem, 44px); padding:0 1rem; border-radius:10px;
  border:1px solid var(--c-line-2, #2a2e36); background:rgba(255,255,255,.04); color:#fff; font-size:.875rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vp-btn svg{ width:1.05rem; height:1.05rem; flex-shrink:0; }
.vp-btn-gold{ border-color:transparent; background:linear-gradient(135deg,#E2C68A,#C9A35A); color:#1a1205; }
.vp-mid{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; min-height:7.5rem; padding:.35rem 0 .5rem; text-align:center; }
.vp-big{ font-family:var(--c-display, inherit); font-size:1.3rem; font-weight:700; line-height:1.15; color:#fff; overflow-wrap:anywhere; }
.vp-emb, .vp-badge, .vp-trophy{ display:grid; place-items:center; width:3.5rem; height:3.5rem; flex-shrink:0; }
.vp-emb{ border-radius:16px; border:1px solid var(--c-line-2, #2a2e36); color:rgba(255,255,255,.4); }
.vp-emb svg{ width:2rem; height:2rem; }
.vp-emb-cal{ border-color:rgba(214,180,106,.35); background:rgba(214,180,106,.07); color:#E2C68A; }
.vp-badge{ --vp-c:#E2C68A; border-radius:16px; border:1px solid color-mix(in srgb, var(--vp-c) 45%, transparent); background:color-mix(in srgb, var(--vp-c) 12%, transparent);
  color:var(--vp-c); font-family:var(--c-display, inherit); font-size:1.5rem; font-weight:800; line-height:1; }
.vp-trophy img{ display:block; width:56px; height:56px; max-width:none; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); user-select:none; -webkit-user-drag:none; }
.vp-sec{ padding:1.1rem 1.25rem; }
.vp-h{ margin-bottom:.75rem; font-family:var(--c-display, inherit); font-size:1rem; font-weight:700; color:#fff; }
.vp-dl > div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; padding:.65rem 0; border-top:1px solid var(--c-line, #22262d); }
.vp-dl > div:first-child{ border-top:0; padding-top:0; }
.vp-dl dt{ font-size:.85rem; color:rgba(255,255,255,.6); }
.vp-dl dd{ min-width:0; font-size:.875rem; font-weight:600; color:#fff; text-align:right; overflow-wrap:anywhere; }
.vp-note{ margin-top:.75rem; font-size:.75rem; color:rgba(255,255,255,.6); }
.vp-list{ padding:.35rem; }
.vp-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:max(2.75rem, 44px); padding:0 .85rem; border-radius:12px; color:#fff; font-size:.9rem; font-weight:600; }
.vp-row-ic{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:10px; background:rgba(214,180,106,.14); color:#E2C68A; flex-shrink:0; }
.vp-row-ic svg{ width:1.15rem; height:1.15rem; }
.vp-row-t{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.vp-go{ width:1rem; height:1rem; color:rgba(255,255,255,.4); flex-shrink:0; }
.vp-warn{ margin-bottom:.75rem; padding:.6rem .8rem; border-radius:12px; border:1px solid rgba(214,180,106,.4); background:rgba(214,180,106,.1); color:#E2C68A; font-size:.8125rem; font-weight:600; }
.vp-pw{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem .6rem .6rem .9rem; border-radius:12px; border:1px solid var(--c-line, #22262d); }
.vp-pw .vp-btn{ flex:0 0 auto; }
.vp-out{ display:flex; align-items:center; justify-content:center; width:100%; min-height:max(2.75rem, 44px); margin-top:.75rem; border-radius:12px; border:1px solid rgba(248,113,113,.4);
  background:rgba(248,113,113,.05); color:#F87171; font-size:.875rem; font-weight:700; cursor:pointer; }
.vp-btn:focus-visible, .vp-row:focus-visible, .vp-out:focus-visible{ outline:2px solid rgba(214,180,106,.85); outline-offset:2px; }
/* The hover look only where a pointer can hover, so it never sticks after a tap. */
@media (hover:hover) and (pointer:fine){ .vp-btn:hover{ border-color:rgba(214,180,106,.55); } .vp-btn-gold:hover{ filter:brightness(1.05); } .vp-row:hover{ background:rgba(255,255,255,.04); } .vp-out:hover{ background:rgba(248,113,113,.1); } }
/* ===== My Bonuses (the design handover of 2026-10-20, H6: wallet.html's #wa-bonuses; the design's bonus rows (its card, head,
   status badge and progress bar), ported by hand). The rows' figures use My Profile's .vp-dl; the Promos link is a .vp-btn. ===== */
.vmb-row{ display:flex; flex-direction:column; gap:.75rem; padding:1.1rem 1.25rem; }
/* A long name takes the whole line and its status goes below it (a phone); a short one shares the line with it. */
.vmb-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.5rem .75rem; }
.vmb-name{ flex:1 1 12rem; min-width:0; font-family:var(--c-display, inherit); font-size:1rem; font-weight:700; line-height:1.3; color:#fff; overflow-wrap:anywhere; }
.vmb-badge{ flex-shrink:0; border-radius:999px; padding:.2rem .65rem; font-size:.75rem; font-weight:700; white-space:nowrap; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
.vmb-badge.vmb-ok{ background:rgba(52,168,110,.16); color:#7fd8a8; }
.vmb-badge.vmb-wait{ background:rgba(214,180,106,.14); color:#E2C381; }
.vmb-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.vmb-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#D6B46A,#E2C381); }
.vmb-pct{ margin-top:-.4rem; font-size:.75rem; color:rgba(255,255,255,.6); text-align:right; font-variant-numeric:tabular-nums; }
/* The game types a claim counts, one chip each (no punctuation between them, so nothing English is left between translated words). */
.vmb-types{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; }
.vmb-types span{ border-radius:999px; padding:.1rem .55rem; font-size:.75rem; font-weight:600; white-space:nowrap; background:rgba(255,255,255,.08); color:#fff; }
.vmb-ended{ font-size:.8125rem; color:rgba(255,255,255,.6); }
.vmb-claim{ display:flex; padding:1rem 1.25rem; }
/* ===== The Updates page (the design handover of 2026-10-20, H8: updates.html and vela-updates.js). The design's look: a header
   card with the logo, a large spaced title and a line under it, Vela's own decorative V outline on its right (drawn, no
   words), an optional word-free picture behind it instead (the words stay typed on top, over a dark wash strong enough for a
   light picture: at least .8 under the words, .82 across a phone's width, the subtitle then in the bright text colour); a
   list of cards, each a 16:9 picture (or the drawn V mark) beside the date line, the title and the short description;
   ‹ Previous / Next ›; the article with its picture and its text. ===== */
.vup-head{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:150px; border-radius:20px; border:1px solid rgba(214,180,106,.22); background:radial-gradient(120% 140% at 100% 0%, rgba(214,180,106,.14), transparent 60%), var(--c-s1); }
.vup-head-art{ position:absolute; top:50%; right:clamp(-28px,2vw,40px); height:130%; width:auto; aspect-ratio:120/100; transform:translateY(-50%); color:rgba(214,180,106,.16); pointer-events:none; }
.vup-head-has-pic .vup-head-art{ display:none; }
.vup-head-pic{ position:absolute; inset:0; }
.vup-head-pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.vup-head.vup-head-has-pic::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,18,22,.9) 0%, rgba(16,18,22,.8) 60%, rgba(16,18,22,.5) 100%); }
.vup-head-in{ position:relative; z-index:1; padding:28px clamp(20px,5vw,48px); }
.vup-head-logo{ display:block; height:22px; width:auto; opacity:.9; }
.vup-head-t{ margin-top:14px; font-family:var(--c-display); font-weight:800; font-size:clamp(28px,5vw,44px); letter-spacing:.12em; line-height:1.05; text-transform:uppercase; color:var(--c-text); }
.vup-head-s{ margin-top:10px; max-width:40ch; font-size:clamp(13px,1.6vw,16px); line-height:1.5; color:var(--c-text-2); }
.vup-head-has-pic .vup-head-t, .vup-head-has-pic .vup-head-s{ text-shadow:0 1px 3px rgba(0,0,0,.55); }
.vup-head-has-pic .vup-head-s{ color:var(--c-text); }
.vup-root{ position:relative; margin-top:1.5rem; }
.vup-wait{ padding:2.5rem 0; text-align:center; font-size:.875rem; color:var(--c-text-3); }
.vup-list{ display:flex; flex-direction:column; gap:12px; }
.vup-item{ display:flex; gap:18px; align-items:stretch; padding:12px; border-radius:16px; border:1px solid var(--c-line); background:var(--c-s1); color:inherit; text-decoration:none; transition:border-color var(--c-fast), background-color var(--c-fast); }
.vup-item:hover{ border-color:rgba(214,180,106,.4); background:#1A1D24; }
.vup-item:focus-visible, .vup-pg:focus-visible, .vup-back:focus-visible, .vup-btn:focus-visible, .vup-link:focus-visible{ outline:2px solid rgba(214,180,106,.7); outline-offset:2px; }
.vup-th{ flex:0 0 220px; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--c-bg); }
.vup-th img, .vup-art-pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.vup-ph{ display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(135deg, var(--c-s2), #14171C); color:rgba(214,180,106,.55); }
.vup-ph svg{ width:30%; max-width:56px; height:auto; }
.vup-body{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:4px 4px 4px 0; }
.vup-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; color:var(--c-text-2); }
.vup-date, .vup-pg-of{ font-variant-numeric:tabular-nums; }
.vup-cat{ font-weight:600; color:var(--c-accent); }
.vup-imp{ border:1px solid rgba(214,180,106,.45); border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-accent-hi); }
.vup-title{ font-family:var(--c-display); font-size:17px; font-weight:700; line-height:1.3; color:var(--c-text); overflow-wrap:anywhere; }
.vup-sum{ font-size:14px; line-height:1.55; color:var(--c-text-2); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vup-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; font-size:13px; color:var(--c-text-2); }
.vup-pg{ display:inline-flex; align-items:center; gap:6px; min-height:2.5rem; padding:0 14px; border-radius:10px; border:1px solid var(--c-line-2); background:var(--c-s1); font-weight:600; color:var(--c-text); text-decoration:none; }
.vup-pg:hover{ border-color:rgba(214,180,106,.4); }
.vup-pg-off{ opacity:.4; }
.vup-empty{ padding:2.5rem 1.25rem; border-radius:16px; border:1px dashed var(--c-line-2); background:rgba(23,26,32,.4); text-align:center; }
.vup-empty-t{ font-weight:600; color:var(--c-text-2); }
.vup-btn{ margin-top:12px; min-height:2.5rem; padding:0 16px; border-radius:10px; border:1px solid var(--c-line-2); background:var(--c-s2); font-size:.875rem; font-weight:600; color:var(--c-text); }
.vup-back{ display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; font-size:14px; font-weight:600; color:var(--c-accent); text-decoration:none; }
.vup-back:hover{ color:var(--c-accent-hi); }
.vup-back-arrow, .vup-pg-arrow{ font-size:1.1em; line-height:1; }
.vup-art{ padding:clamp(18px,4vw,32px); border-radius:20px; border:1px solid var(--c-line); background:var(--c-s1); }
.vup-art-t{ margin-top:10px; font-family:var(--c-display); font-size:clamp(22px,3.4vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.02em; color:var(--c-text); overflow-wrap:anywhere; }
.vup-art-pic{ margin-top:16px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--c-bg); }
.vup-lead{ margin-top:16px; font-size:16px; line-height:1.6; color:var(--c-text); overflow-wrap:anywhere; }
.vup-body-text{ margin-top:12px; font-size:15px; line-height:1.7; color:rgba(245,246,247,.82); overflow-wrap:anywhere; }
.vup-p{ margin-top:12px; }
.vup-h{ margin-top:20px; font-family:var(--c-display); font-size:18px; font-weight:700; color:var(--c-text); }
.vup-ul{ margin-top:12px; padding-left:1.25rem; list-style:disc; }
.vup-ul li{ margin-top:4px; }
.vup-body-text strong{ font-weight:700; color:var(--c-text); }
.vup-body-text em{ font-style:italic; }
.vup-link{ color:var(--c-accent); text-decoration:underline; text-underline-offset:2px; }
.vup-link:hover{ color:var(--c-accent-hi); }
@media (max-width: 639.98px){
  .vup-head.vup-head-has-pic::after{ background:rgba(16,18,22,.82); }
  .vup-head-art{ height:115%; opacity:.75; }
  .vup-item{ flex-direction:column; gap:10px; }
  .vup-th{ flex:none; width:100%; }
  .vup-body{ padding:0 2px 2px; }
}

/* ===== The popup carousel (the design handover of 2026-10-20, H9: vela-popup.js). The design's look: the picture is the
   popup, with the close button, the arrows and the dots on it and the typed words over a dark wash (at least .8 under the
   words, so they stay readable over a light picture), then the category tabs (only with more than one category) and "Don't
   show again today" under it. Above every other layer of the page. The same rules in vela-style-c.css and the homepage's
   Style C block (backend/test-popup-carousel.js). ===== */
.vpp-ov{ position:fixed; inset:0; z-index:85; display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:rgba(5,6,8,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.vpp-card{ display:flex; flex-direction:column; align-items:center; color:var(--c-text, #F5F6F7);
  width:min(500px, calc(100vw - 32px), calc((100vh - 150px) * .8)); width:min(500px, calc(100vw - 32px), calc((100dvh - 150px) * .8)); }
.vpp-frame{ position:relative; width:100%; overflow:hidden; border-radius:14px; background:#0d0f13; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(214,180,106,.06); }
.vpp-stage{ position:relative; aspect-ratio:4 / 5; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.vpp-pic{ position:absolute; inset:0; display:block; color:inherit; text-decoration:none; }
.vpp-img{ display:block; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; }
a.vpp-pic:focus-visible{ outline:2px solid rgba(214,180,106,.85); outline-offset:-3px; }
.vpp-words{ position:absolute; left:0; right:0; bottom:0; padding:3.5rem 1.1rem 2.75rem; text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:linear-gradient(to top, rgba(5,6,8,.9) 0%, rgba(5,6,8,.82) 62%, rgba(5,6,8,0) 100%); }
.vpp-t{ font-family:var(--c-display, inherit); font-size:1.25rem; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:#F5F6F7; }
.vpp-s{ margin-top:.35rem; font-size:.9rem; line-height:1.5; color:#F5F6F7; }
.vpp-x, .vpp-arr{ position:absolute; z-index:2; display:grid; place-items:center; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(10,11,14,.6); color:#F5F6F7; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.vpp-x{ top:8px; right:8px; width:44px; height:44px; }
.vpp-arr{ top:50%; width:44px; height:44px; margin-top:-22px; }
.vpp-prev{ left:8px; }
.vpp-next{ right:8px; }
.vpp-x svg{ width:18px; height:18px; }
.vpp-arr svg{ width:20px; height:20px; }
.vpp-x[hidden], .vpp-arr[hidden], .vpp-dots[hidden], .vpp-tabs[hidden]{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .vpp-x:hover, .vpp-arr:hover{ border-color:rgba(214,180,106,.6); color:var(--c-accent, #D6B46A); } }
.vpp-x:focus-visible, .vpp-arr:focus-visible, .vpp-dot:focus-visible, .vpp-tab:focus-visible, .vpp-snooze input:focus-visible{ outline:2px solid rgba(214,180,106,.85); outline-offset:2px; }
.vpp-dots{ position:absolute; z-index:2; left:50%; bottom:6px; transform:translateX(-50%); display:flex; padding:0 4px; border-radius:999px; background:rgba(10,11,14,.45); }
.vpp-dot{ display:grid; place-items:center; width:26px; height:30px; padding:0; border:0; background:none; cursor:pointer; }
.vpp-dot::before{ content:""; width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.55); }
.vpp-dot[aria-current="true"]::before{ width:18px; background:var(--c-accent, #D6B46A); }
.vpp-tabs{ display:flex; width:100%; gap:6px; margin-top:10px; overflow-x:auto; }
.vpp-tab{ flex:1 0 auto; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(10,11,14,.6);
  color:rgba(245,246,247,.8); font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
.vpp-tab[aria-pressed="true"]{ background:var(--c-accent, #D6B46A); border-color:transparent; color:var(--c-on-accent, #1a1408); }
.vpp-snooze{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; min-height:44px; font-size:13px; font-weight:600; color:rgba(245,246,247,.85); cursor:pointer; }
.vpp-snooze input{ width:18px; height:18px; margin:0; accent-color:var(--c-accent, #D6B46A); }
/* ===== end of the popup carousel ===== */