:root{
  --ink:#0E1419;
  --surface:#161E25;
  --surface-raised:#1E2731;
  --border:#2A343D;
  --text:#ECF1F4;
  --muted:#8C99A4;
  --muted-2:#5F6B75;
  --win:#3FC48C;
  --stake:#E2536A;
  --accent:#E8843A;
  --font-display:'Bricolage Grotesque', 'Archivo', sans-serif;
  --font-body:'Archivo', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body{ height:100%; }
body{
  margin:0; background:var(--ink); color:var(--text); font-family:var(--font-body); line-height:1.45;
  display:flex; flex-direction:column; min-height:100%;
}
h1,h2,h3,.brand{ font-family:var(--font-display); text-wrap:balance; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px clamp(16px,4vw,32px); background:rgba(14,20,25,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:9px; font-size:21px; font-weight:700; color:var(--text); min-height:36px; }
.brand img{ height:34px; max-width:170px; width:auto; object-fit:contain; display:block; }
.brand.has-logo .ring{ display:none; }
.brand.no-name .brand-name{ display:none; }
.brand-name{ white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px){ .brand img{ height:28px; max-width:140px; } .brand{ font-size:18px; } .brand-name{ max-width:150px; } }
.brand .ring{ width:24px; height:24px; border-radius:50%; border:3px solid var(--accent); border-top-color:transparent; transform:rotate(45deg); }
nav.primary{ display:flex; gap:2px; font-size:14px; font-weight:600; }
nav.primary button{ background:transparent; border:none; color:var(--muted); padding:9px 13px; border-radius:8px; font:inherit; font-weight:600; }
nav.primary button.active{ color:var(--text); background:var(--surface); }
nav.primary button:hover:not(.active){ color:var(--text); }
.header-right{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.wallet-chip{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); padding:7px 12px; border-radius:20px; font-size:13px; color:var(--muted); }
.btn{ border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--text); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.btn:hover{ border-color:var(--accent); }

/* ---------- social icons (header + footer) ---------- */
.social-row{ display:flex; gap:8px; }
.social-link{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--muted); transition:.15s; }
.social-link:hover{ color:var(--text); border-color:var(--accent); }

/* ---------- language switcher ---------- */
.lang-switch{ position:relative; }
#lang-trigger{ display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:7px 10px; color:var(--text); font-size:12.5px; font-weight:600; }
#lang-trigger .chev{ opacity:.6; transform:rotate(-90deg); }
.lang-panel{
  list-style:none; margin:0; padding:6px; position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:150px;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 32px -10px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:60;
}
.lang-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.lang-panel li{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text); }
.lang-panel li:hover{ background:var(--surface); }
.lang-panel li svg{ border-radius:2px; flex:none; }
.lang-panel li[aria-selected="true"]{ color:var(--accent); }

main{ flex:1; }
.view{ display:none; }
.view.active{ display:block; animation:enter .35s ease both; }
@keyframes enter{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

.wrap{ max-width:1360px; margin:0 auto; padding:22px clamp(16px,4vw,32px) 60px; }

/* ---------- banner carousel ---------- */
.banner-carousel{ position:relative; border-radius:16px; overflow:hidden; margin-bottom:30px; aspect-ratio:21/6; border:1px solid var(--border); background:var(--surface); }
@media (max-width:640px){ .banner-carousel{ aspect-ratio:4/3; } }
.banner-track{ display:flex; height:100%; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.banner-slide{
  flex:0 0 100%; height:100%; position:relative; display:block; color:var(--text);
  background:radial-gradient(120% 160% at 88% 8%, color-mix(in srgb, var(--banner-from) 32%, transparent), transparent 55%),
             linear-gradient(135deg, var(--surface-raised), var(--surface));
}
.banner-slide .art{ position:absolute; inset:0; color:var(--banner-from); }
.banner-slide .caption{ position:absolute; inset-inline-start:0; bottom:0; padding:clamp(18px,4vw,40px); max-width:62%; display:flex; flex-direction:column; gap:6px; }
.banner-slide .eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700; color:var(--banner-from); }
.banner-slide .btitle{ font-family:var(--font-display); font-size:clamp(18px,3vw,28px); font-weight:700; }
.banner-slide .bbody{ font-size:13px; color:var(--muted); display:none; }
@media (min-width:640px){ .banner-slide .bbody{ display:block; } }
.banner-slide .bcta{ margin-top:6px; align-self:flex-start; }
.banner-arrow{
  position:absolute; top:50%; translate:0 -50%; width:34px; height:34px; border-radius:50%; z-index:5;
  background:rgba(10,14,18,.55); border:1px solid var(--border); color:#fff; display:flex; align-items:center; justify-content:center;
}
.banner-arrow.prev{ inset-inline-start:12px; }
.banner-arrow.next{ inset-inline-end:12px; transform:translateY(-50%) scaleX(-1); }
[dir="rtl"] .banner-arrow.prev svg{ transform:scaleX(-1); }
[dir="rtl"] .banner-arrow.next svg{ transform:scaleX(1); }
@media (max-width:560px){ .banner-arrow{ display:none; } }
.banner-dots{ position:absolute; bottom:14px; inset-inline-start:50%; translate:-50% 0; display:flex; gap:6px; z-index:5; }
.banner-dots button{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; }
.banner-dots button.active{ background:#fff; width:18px; border-radius:4px; transition:width .2s; }

/* ---------- quick nav ---------- */
.quick-nav{ display:flex; gap:10px; overflow-x:auto; margin-bottom:32px; padding-bottom:2px; }
.quick-nav-item{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:none; width:84px; padding:14px 8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--muted); font-size:11.5px; font-weight:600; text-align:center; transition:border-color .15s,transform .15s,color .15s; }
.quick-nav-item:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-2px); }
.qn-icon{ position:relative; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(232,132,58,.14); color:var(--accent); transition:background .15s,color .15s; }
.qn-icon svg{ width:22px; height:22px; }
.quick-nav-item:hover .qn-icon{ background:var(--accent); color:#1a1206; }
.live-dot{ position:absolute; top:4px; inset-inline-end:4px; width:7px; height:7px; border-radius:50%; background:var(--stake); box-shadow:0 0 0 2px var(--surface); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h2{ font-size:18px; margin:0; }
.section-head .see-all{ font-size:12.5px; color:var(--muted); font-weight:600; }

/* ---------- filters ---------- */
.filter-bar{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.chip-row, .provider-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.chip{ flex:none; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--muted); transition:background .15s,color .15s,border-color .15s; }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.chip .n{ opacity:.65; font-size:11px; margin-inline-start:4px; }
.chip{ display:inline-flex; align-items:center; gap:6px; }
.chip svg{ width:14px; height:14px; flex:none; opacity:.85; }
.chip.chip-label svg{ color:var(--stake); }
.chip.chip-label[data-label="new"] svg{ color:var(--accent); }
.chip.active svg{ color:inherit; opacity:1; }
.prov-chip{ flex:none; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:600; color:var(--muted); transition:border-color .15s,background .15s; }
.prov-chip img{ height:16px; width:auto; max-width:54px; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.75; transition:.15s; }
.prov-chip.active, .prov-chip:hover{ border-color:var(--accent); color:var(--text); }
.prov-chip.active img, .prov-chip:hover img{ filter:none; opacity:1; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 12px; max-width:320px; }
.search-box input{ background:transparent; border:none; outline:none; color:var(--text); font:inherit; width:100%; }
.search-box svg{ flex:none; opacity:.5; }

/* ---------- game grid ---------- */
.game-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; transition:opacity .15s ease; }
.game-grid.grid-swapping{ opacity:0; }
@media (max-width:480px){ .game-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } }
@media (min-width:1600px){ .game-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } }
.game-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 10px 24px -12px rgba(0,0,0,.5); }
/* artwork: one 4:3 box for every card; whole image shown over a blurred copy of itself */
.game-card .art{ aspect-ratio:4/3; position:relative; background:var(--surface-raised); overflow:hidden; isolation:isolate; }
.game-card .art img{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .35s ease; }
.game-card .art .art-bg{ object-fit:cover; transform:scale(1.3); filter:blur(18px) saturate(1.25); opacity:0; z-index:0; }
.game-card .art .art-img{ object-fit:contain; z-index:1; image-rendering:auto; }
.game-card .art .art-img.snap{ object-fit:cover; }
.game-card .art .art-img.loaded{ opacity:1; }
.game-card .art .art-bg.loaded{ opacity:.9; }
.game-card .art::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.14), transparent 28%, transparent 72%, rgba(0,0,0,.18)); }
@media (max-width:600px){ .game-card .art .art-bg{ filter:blur(12px) saturate(1.2); } }
.game-card .art.img-failed::before{
  content:attr(data-fallback); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:42px; font-weight:700; color:var(--muted-2);
  background:linear-gradient(160deg, var(--surface-raised), var(--surface));
}
/* card badges: hot / new / popular from platform-wide play, jackpot from the catalogue */
.game-card .tags{ position:absolute; top:7px; inset-inline:7px; display:flex; justify-content:space-between; align-items:flex-start; gap:4px; z-index:3; pointer-events:none; }
.tag{ display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; padding:3px 6px; border-radius:5px; text-transform:uppercase; letter-spacing:.04em; line-height:1; white-space:nowrap; }
.tag svg{ width:10px; height:10px; flex:none; }
.tag-hot{ background:var(--stake); color:#fff; }
.tag-new{ background:var(--accent); color:#1a1206; }
.tag-popular{ background:rgba(14,20,25,.72); color:var(--text); border:1px solid var(--border); backdrop-filter:blur(4px); }
.tag-jackpot{ background:var(--win); color:#08241a; margin-inline-start:auto; }
.game-card .play{ position:absolute; z-index:3; inset:auto 8px 8px 8px; background:var(--accent); color:#1a1206; text-align:center; padding:8px; border-radius:8px; font-weight:700; font-size:12px; opacity:0; transform:translateY(6px); transition:.15s; }
.game-card:hover .play{ opacity:1; transform:none; }
.game-info{ padding:9px 11px 11px; }
.game-info .name{ font-size:12.5px; font-weight:700; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-info .prov{ font-size:11px; color:var(--muted-2); }

.skeleton{ background:linear-gradient(100deg, var(--surface) 30%, var(--surface-raised) 50%, var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.skel-card{ aspect-ratio:1/1; border-radius:12px; }
.scroll-sentinel{ height:1px; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); grid-column:1/-1; }

/* ---------- sport view ----------
   Tried making this container much taller than the viewport so our page
   scroll could carry straight through into the widget and out to our
   footer (avoiding a second, separate scrollbar inside the iframe).
   Reverted: Betby's widget appears to size its real UI relative to the
   iframe's own internal viewport height (vh units inside an iframe are
   relative to the iframe element's own height, not the browser window) —
   inflating the iframe to 2400px made it render completely blank at every
   scroll position, confirmed by direct testing. A working widget with its
   own scrollbar is better than a broken one, so this stays viewport-boxed
   until/unless Betby exposes a real height-reporting API (they currently
   send nothing via postMessage — also confirmed by testing). */
/* Sport / Live Sport take the whole viewport below our (measured) header —
   the betslip lives at the bottom of the widget and must never need a scroll.
   --header-h is set from header.site's real height in router.js. */
.sport-frame-wrap{ position:relative; height:calc(100vh - var(--header-h, 63px)); height:calc(100dvh - var(--header-h, 63px)); }
body.sport-fullscreen footer{ display:none; }
body.sport-fullscreen main{ overflow:hidden; }
.sport-frame-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.frame-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); background:var(--ink); font-size:13px; }
.sport-preview-catcher{ position:absolute; inset:0; z-index:5; pointer-events:none; }
/* Sits exactly over BetBy's betslip action zone (PLACE BET / quick bet), which
   is fixed at the bottom-right of the widget on desktop and a bottom bar on
   mobile — everything else in the iframe stays fully interactive. */
.sport-betslip-guard{ position:absolute; right:16px; bottom:16px; width:324px; height:114px; pointer-events:auto; cursor:pointer; }
[dir="rtl"] .sport-betslip-guard{ right:auto; left:16px; }
/* Classic layout: the betslip is a permanent full-height right column. The
   16px insets keep the iframe's own scrollbar strips (right edge, bottom edge)
   out of the guard so scrolling never triggers the login prompt. */
.sport-preview-catcher.layout-classic .sport-betslip-guard{ top:0; bottom:16px; height:auto; width:304px; }
[dir="rtl"] .sport-preview-catcher.layout-classic .sport-betslip-guard{ right:auto; left:16px; }
/* Phones: every BetBy layout collapses the betslip into a bottom bar. */
@media (max-width:760px){
  /* BetBy mobile: a 48px collapsed BETSLIP bar pinned to the iframe bottom (no
     scrollbar on touch, so no inset needed). Tapping it = wanting to bet. */
  .sport-betslip-guard, .sport-preview-catcher.layout-classic .sport-betslip-guard{ top:auto; bottom:0; left:0; right:0; width:auto; height:48px; }
}
.spinner{ width:28px; height:28px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite; }

/* Footer stays in normal flow below the widget (not hidden): once its own
   internal scroll reaches bottom, the browser's native scroll-chaining
   carries the same wheel/trackpad gesture on to our page automatically —
   confirmed working — smoothly revealing the real footer, no extra JS or
   custom scroll logic needed. What made this look broken before wasn't
   the footer's presence, it was a duplicate-iframe bug (fixed separately)
   that doubled the page's real height. */
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:760px){
}

/* ---------- game view (replaces modal) ---------- */
.game-view-wrap{ padding-top:56px; }

/* Lives outside .view on purpose: any ancestor with an active CSS `animation`
   touching `transform` (our `.view.active{ animation:enter }`) becomes a
   containing block for position:fixed descendants, which would pin this
   button to the animated section instead of the real viewport. Keeping it
   as a body-level sibling avoids that trap entirely. */
.back-to-lobby{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  background:rgba(22,30,37,.9); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:50%; color:var(--text);
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 76px); inset-inline-start:clamp(16px,4vw,32px); z-index:45;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.back-to-lobby[hidden]{ display:none; }
.back-to-lobby .chevron{ transition:transform .15s; }
[dir="rtl"] .back-to-lobby .chevron{ transform:scaleX(-1); }
.back-to-lobby span{ display:none; }
.game-title{ font-size:20px; margin:0 0 14px; }
.game-frame-wrap{
  position:relative; height:min(80vh,780px); height:min(80dvh,780px);
  border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--surface); margin-bottom:34px;
}
.game-frame-wrap iframe{ width:100%; height:100%; border:0; touch-action:manipulation; }

/* Mobile game mode: whenever a game is open on a phone-sized screen, in
   either orientation, it takes the whole screen (edge to edge, up to the
   browser's own url bar — not the hidden-chrome Fullscreen API, just a
   full-height layout) with only the floating back button and expand
   button on top. Browsing (related games etc.) happens after backing out,
   the same way a native casino app's game screen works. Two separate media
   conditions because a landscape phone is *wide* (fails max-width) while a
   portrait phone is *narrow* (fails max-height) — no single query catches
   both, this pair reliably does. */
@media (max-width:760px), (orientation:landscape) and (max-height:520px){
  body:has(#view-game.active) header.site{ display:none; }
  .game-view-wrap{ padding:0; }
  .game-title, .game-view-wrap .section-head, .game-view-wrap #related-grid{ display:none; }
  .game-frame-wrap{
    height:100vh; height:100dvh;
    margin:0; border-radius:0; border:0;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .back-to-lobby{
    top:calc(env(safe-area-inset-top, 0px) + 10px); inset-inline-start:12px;
  }
  .fullscreen-toggle{ top:calc(env(safe-area-inset-top, 0px) + 10px); }
}

.fullscreen-toggle{
  position:absolute; top:10px; inset-inline-end:10px; z-index:10; width:34px; height:34px; border-radius:8px;
  background:rgba(10,14,18,.6); border:1px solid var(--border); color:#fff; display:flex; align-items:center; justify-content:center;
}

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--border); padding:26px clamp(16px,4vw,32px) 40px; }
.footer-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.pay-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pay-tag{ font-size:11.5px; border:1px solid var(--border); border-radius:6px; padding:5px 10px; color:var(--muted); }
.pay-logo{ object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.8; }
.footer-legal{ display:flex; gap:16px; font-size:12px; color:var(--muted); }
.footer-legal a:hover{ color:var(--text); }
.footer-brand{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--border); }
.fb-brand{ display:inline-flex; align-items:center; }
.fb-logo{ display:block; max-height:28px; width:auto; max-width:160px; object-fit:contain; }
.fb-name{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--text); }
.fb-copy{ font-size:12px; color:var(--muted-2); }

.toast{ position:fixed; bottom:20px; inset-inline-start:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-raised); border:1px solid var(--border); padding:11px 18px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:200; }
[dir="rtl"] .toast{ transform:translateX(50%) translateY(20px); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
[dir="rtl"] .toast.show{ transform:translateX(50%) translateY(0); }

::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; }

@media (max-width:760px){
  header.site{ gap:10px; }
  nav.primary{ order:3; width:100%; overflow-x:auto; padding-bottom:2px; }
  nav.primary button{ flex:none; }
  #header-social{ display:none; }
  .header-right{ gap:8px; }
  .wallet-chip{ display:none; }
}

/* ---------- player auth modal ---------- */
.auth-overlay{ position:fixed; inset:0; background:rgba(6,9,12,.72); display:flex; align-items:center; justify-content:center; z-index:300; }
.auth-overlay[hidden]{ display:none; }
.auth-modal{ position:relative; width:340px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px 22px 22px; }
.auth-close{ position:absolute; top:12px; inset-inline-end:14px; background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.auth-close:hover{ color:var(--text); }
/* legal popup (Terms / Privacy) — reuses the auth modal shell, wider and scrollable */
body.modal-open{ overflow:hidden; }
.legal-modal{ width:760px; max-height:min(86vh, 900px); display:flex; flex-direction:column; padding:26px 4px 8px 26px; }
.legal-title{ margin:0 32px 12px 0; font-size:21px; }
.legal-body{ overflow-y:auto; padding:0 22px 18px 0; font-size:14px; line-height:1.65; color:var(--muted); overscroll-behavior:contain; }
.legal-body h1{ font-size:20px; margin:18px 0 8px; color:var(--text); } .legal-body h2{ font-size:16.5px; margin:20px 0 6px; color:var(--text); } .legal-body h3, .legal-body h4{ font-size:14.5px; margin:16px 0 4px; color:var(--text); }
.legal-body p, .legal-body li{ margin:0 0 10px; } .legal-body ul, .legal-body ol{ padding-inline-start:20px; } .legal-body a{ color:var(--accent); text-decoration:underline; }
.legal-body[dir="rtl"]{ text-align:right; }
.legal-loading{ height:120px; border-radius:10px; background:linear-gradient(100deg, var(--surface) 30%, var(--surface-raised) 50%, var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@media (max-width:600px){ .legal-modal{ max-height:92vh; padding:22px 2px 6px 18px; } .legal-title{ font-size:18px; } .legal-body{ padding-right:14px; } }
.auth-prompt{ background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text); font-size:13px; padding:9px 12px; border-radius:8px; margin-bottom:14px; }
.auth-prompt[hidden]{ display:none; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:18px; }
.auth-tab{ flex:1; background:none; border:1px solid var(--border); border-radius:8px; padding:9px; color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; }
[hidden].auth-tab{ display:none; }
.auth-tab.active{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-form[hidden]{ display:none; }
.auth-form label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.auth-form input{ background:var(--ink); border:1px solid var(--border); border-radius:8px; padding:10px 11px; color:var(--text); font:inherit; font-size:14px; }
.auth-form input:focus{ outline:none; border-color:var(--accent); }
.auth-form button[type=submit]{ margin-top:4px; }
.auth-error{ color:var(--stake); font-size:12.5px; min-height:0; }
.cf-turnstile:empty{ display:none; }
.cf-turnstile{ min-height:65px; }
.auth-error:empty{ display:none; }

/* ---------- wallet chip (balance) ---------- */
.wallet-chip{ flex-direction:column; align-items:flex-end; gap:0; line-height:1.15; padding:5px 12px; }
.wallet-chip[hidden]{ display:none; }
.wallet-chip .wc-name{ font-size:11px; color:var(--muted); }
.wallet-chip .wc-balance{ font-size:13.5px; font-weight:700; color:var(--text); }
.wallet-chip:hover{ border-color:var(--accent); }
.wallet-deposit[hidden]{ display:none; }
.auth-hint{ text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted-2); }
@media (max-width:760px){
  .wallet-chip{ display:flex; }
  .wallet-deposit{ padding:8px 11px; font-size:12.5px; }
}

/* ---------- uploaded banners ---------- */
.banner-slide.custom{ background:var(--surface); }
.banner-slide.custom picture, .banner-slide.custom img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.banner-slide.custom .caption{ text-shadow:0 2px 12px rgba(0,0,0,.7); }
.banner-slide.custom .btitle{ color:#fff; }
.banner-slide.custom .bbody{ color:rgba(255,255,255,.85); }

/* ---------- account pages ---------- */
.account-wrap{ max-width:860px; }
.account-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.account-head .eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700; color:var(--accent); }
.account-name{ font-size:26px; margin:4px 0 0; }
.account-sub{ font-size:12.5px; color:var(--muted); }
.account-balance{ display:flex; flex-direction:column; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 18px; }
.account-balance .label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.account-balance .value{ font-size:26px; font-weight:700; }
.account-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.account-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-bottom:28px; }
.account-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.account-card[hidden]{ display:none; }
.account-card .card-title{ font-family:var(--font-display); font-weight:700; margin-bottom:8px; }
.bonus-line{ font-size:13.5px; }
.bonus-bar{ height:6px; border-radius:3px; background:var(--ink); margin:10px 0 8px; overflow:hidden; }
.bonus-fill{ height:100%; background:var(--win); border-radius:3px; transition:width .3s; }
.bonus-meta{ font-size:12px; color:var(--muted); }
.history{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.history:empty{ display:none; }
.hist-row{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:11px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
.hist-row:last-child{ border-bottom:0; }
.hist-label{ font-weight:600; font-size:13.5px; }
.hist-sub{ font-size:11.5px; color:var(--muted); }
.hist-amount{ font-weight:700; font-size:13.5px; }
.hist-amount.pos{ color:var(--win); }
.hist-amount.neg{ color:var(--stake); }
.hist-after{ font-size:12px; color:var(--muted); min-width:90px; text-align:end; }
@media (max-width:560px){ .hist-after{ display:none; } }
.history-more{ margin-top:14px; }
.history-more[hidden]{ display:none; }
.back-link{ display:inline-block; color:var(--accent); font-weight:600; font-size:13px; margin-bottom:10px; }
.account-intro{ color:var(--muted); font-size:14px; max-width:60ch; }
.bonus-lock{ background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; }
.bonus-lock[hidden]{ display:none; }
.pm-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.pm-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.pm-item summary{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; font-weight:700; list-style:none; }
.pm-item summary::-webkit-details-marker{ display:none; }
.pm-item summary::after{ content:''; margin-inline-start:auto; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
.pm-item[open] summary::after{ transform:rotate(-135deg); }
.pm-item summary img{ max-width:64px; max-height:24px; object-fit:contain; background:#fff; border-radius:4px; padding:2px 4px; }
.pm-details{ padding:0 18px 16px; color:var(--muted); font-size:14px; line-height:1.6; }
.pm-details p{ margin:0 0 10px; }
.pm-details strong{ color:var(--text); }
.pm-details code{ font-family:var(--font-mono); background:var(--ink); padding:1px 6px; border-radius:4px; color:var(--text); }
.pm-details a{ color:var(--accent); }

/* ---------- player requests ---------- */
.req-form{ margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; }
.req-form[hidden]{ display:none; }
.req-form h2{ font-size:17px; margin:0 0 4px; }
.req-form .account-intro{ margin:0 0 12px; font-size:13px; }
.req-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.req-grid label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.req-grid label.wide{ grid-column:1/-1; }
.req-grid input, .req-grid select{ background:var(--ink); border:1px solid var(--border); border-radius:8px; padding:10px 11px; color:var(--text); font:inherit; font-size:14px; }
.req-grid input:focus, .req-grid select:focus{ outline:none; border-color:var(--accent); }
@media (max-width:560px){ .req-grid{ grid-template-columns:1fr; } }
.req-head{ margin-top:26px; }
.req-head[hidden]{ display:none; }
.req-row{ grid-template-columns:1fr auto auto; }
.req-status{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 8px; border-radius:6px; border:1px solid var(--border); color:var(--muted); }
.req-status.approved{ color:var(--win); border-color:color-mix(in srgb, var(--win) 40%, transparent); }
.req-status.rejected{ color:var(--stake); border-color:color-mix(in srgb, var(--stake) 40%, transparent); }
.req-status.pending{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.req-note{ color:var(--stake); }