/* ซาหวาน888 Play Clone skin — money-site brand: black + Caishen gold/red.
   Tokens mirror sites/sawan888/lib/tokens.ts. Fonts: Mitr/Sarabun (NO Kanit). */
:root{
  --bg:#0c0d08; --bg-2:#12130c; --panel:#16130a; --panel-2:#1f1a0c;
  --line:rgba(160,116,48,.38);
  --gold:#f0b749; --gold-2:#a07430;
  --red:#a00e1f;  --red-2:#6b0712;
  --ink:#fafaf6;  --ink-muted:#c9a96e;
}

/* Fonts — override Kanit/Prompt → Mitr (display) + Sarabun (body). DESIGN.md hard rule. */
html,body,button,input,select,textarea{ font-family:"Sarabun","Noto Sans Thai",system-ui,sans-serif !important; }
.logo,.section-title,.btn-gold,.btn-red,.card-badge,h1,h2,h3,h4{ font-family:"Mitr","Sarabun",sans-serif !important; }

html,body{ background:#0c0d08 !important; color:var(--ink) !important; }
/* BOSS DIRECTION: silver-gold marble background */
body{ background:
  url("bg-ls.jpg") center top / cover no-repeat fixed,
  #0c0d08 !important; }

/* BOSS: black header with gold border (was gold) */
.topbar{ background:linear-gradient(180deg,#16130a,#0c0d08) !important; border-bottom:1px solid var(--line) !important; box-shadow:0 2px 10px rgba(0,0,0,.5) !important; }
.topbar a,.topbar span{ color:var(--gold) !important; font-weight:600; }
/* Ticker/marquee: dark pill + light text so it's readable on the gold header */
.marquee{ background:var(--marquee-bg,rgba(0,0,0,.55)) !important; border:1px solid rgba(0,0,0,.25) !important; color:var(--marquee-ink,#ffe6a8) !important; }
.marquee span{ color:var(--marquee-ink,#ffe6a8) !important; }

/* ── Top-nav promo pills (match supplier: dark tiles + 3D icon + gold label) ── */
.cta{ display:flex !important; align-items:center; gap:8px; }
.promo-pills{ display:flex; gap:6px; margin-right:6px; }
.ppill{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px;
  width:60px; min-height:56px; padding:6px 4px; border-radius:12px;
  background:linear-gradient(180deg,#26221a,#0d0b07); border:1.5px solid var(--gold);
  box-shadow:0 3px 7px rgba(0,0,0,.5); text-decoration:none; }
.ppill:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.ppill .pp-ic{ font-size:20px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ppill .pp-lb{ font-family:'Sarabun',sans-serif; font-size:10px; font-weight:600; color:#ffe6a8; white-space:nowrap; }
.ppill.vip{ background:linear-gradient(180deg,#4a0d12,#1a0206); }
.ppill.vip .pp-lb{ color:#ffd24a; }
/* 3D brushed login / register buttons (silver + gold like supplier) */
.btn-login3d{ background:linear-gradient(180deg,#16130a,#0c0d08) !important; color:var(--gold) !important;
  border:1.5px solid var(--gold-2) !important; box-shadow:0 3px 10px rgba(0,0,0,.45) !important; font-weight:700 !important; }
.btn-reg3d{ background:linear-gradient(180deg,#f0b749,#a07430) !important; color:#1a1206 !important;
  border:1px solid #ffe27a !important; box-shadow:0 3px 0 #6a4810, 0 5px 12px rgba(0,0,0,.35) !important; font-weight:700 !important; }
.btn-login3d:hover,.btn-reg3d:hover{ filter:brightness(1.06); }
@media (max-width:1100px){ .promo-pills{ display:none; } }

/* ── Partner provider strip (gold bar, scrolling wordmarks) ── */
.partner-strip{ overflow:hidden; background:linear-gradient(180deg,#f4c94c,#c9992a); border-block:2px solid #8a6410; padding:14px 0; }
.partner-track{ display:inline-flex; gap:44px; white-space:nowrap; animation:partner 32s linear infinite; will-change:transform; }
.partner-track span{ font-family:'Mitr',serif; font-weight:700; font-size:19px; letter-spacing:.5px;
  color:#5a4405; text-shadow:0 1px 0 rgba(255,255,255,.4); opacity:.85; }
@keyframes partner{ to{ transform:translateX(-50%); } }
/* ── LINE float button (bottom-left, green) ── */
.line-float{ position:fixed; left:16px; bottom:88px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:#06c755; display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.5); border:2px solid #fff; }
.line-float span{ color:#fff; font-family:'Mitr',sans-serif; font-weight:700; font-size:13px; }
.line-float:hover{ filter:brightness(1.08); transform:scale(1.05); }
.logo img{ filter:none !important; }

.topnav{ background:var(--panel) !important; border-bottom:1px solid var(--line) !important; }
.topnav a{ color:var(--ink-muted) !important; font-weight:600; }
.topnav a:hover,.topnav a.active{ color:var(--gold) !important; }

.marquee{ background:rgba(212,175,55,.10) !important; color:var(--gold) !important; border-color:var(--line) !important; }
.marquee span{ color:var(--gold) !important; }

.btn-gold{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; color:#1a1206 !important; border:1px solid var(--gold) !important; box-shadow:0 2px 0 rgba(0,0,0,.25) !important; text-shadow:none !important; }
.btn-red{ background:linear-gradient(180deg,var(--red),var(--red-2)) !important; color:#fff !important; border:1.5px solid var(--gold) !important; box-shadow:0 2px 0 rgba(0,0,0,.25) !important; }
.btn-red:hover,.btn-gold:hover{ filter:brightness(1.07); }

/* ── Sidebar: dark rounded-square tiles w/ gold border + gold line-icons (match supplier) ── */
.sidebar{ background:transparent !important; }
.cat{ background:linear-gradient(180deg,#201d16,#0e0c08) !important; border:2px solid var(--gold) !important;
  border-radius:16px !important; padding:13px 4px 10px !important; margin-bottom:12px !important;
  box-shadow:0 3px 9px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important; color:var(--gold) !important; }
.cat:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.cat-icon{ background:none !important; border:none !important; box-shadow:none !important; width:auto !important; height:auto !important; font-size:0 !important; }
.cat-icon svg{ width:40px; height:40px; display:block; margin:0 auto; }
.cat-icon svg *{ stroke:var(--gold); }
.cat-label{ color:var(--gold) !important; font-weight:600 !important; font-family:'Mitr',sans-serif !important; }
/* active = brushed-silver tile */
.cat.active{ background:linear-gradient(180deg,#f4f4f4,#c2c2c2) !important; border-color:var(--gold) !important;
  box-shadow:0 3px 9px rgba(0,0,0,.55) !important; }
.cat.active .cat-icon svg *{ stroke:#a9791a; }
.cat.active .cat-label{ color:#5a4405 !important; }

.hero{ background:transparent !important; border:none !important; }
.hero-slide{ padding:0 !important; background:transparent !important; }
.hero-dots button{ background:var(--line) !important; }
.hero-dots button.active{ background:var(--gold) !important; }

.section-title{ color:var(--gold) !important; }
.section-title::before{ background:linear-gradient(var(--gold-2),var(--red)) !important; }
.see-all{ color:var(--ink-muted) !important; }
.see-all:hover{ color:var(--gold) !important; }

.card{ background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:0 2px 8px rgba(0,0,0,.4) !important; }
.card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.55) !important; transform:translateY(-3px); border-color:var(--gold) !important; }
.card-art{ background:linear-gradient(135deg,var(--cardA,#2a0a0e),var(--cardB,#16120a)) !important; }
.card-label{ color:var(--ink) !important; background:var(--panel) !important; }
.card-label small{ color:var(--ink-muted) !important; }
.card-badge{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; color:#1a1206 !important; }
.card-play{ background:rgba(160,14,31,.92) !important; color:#fff !important; }

.quick-item{ background:var(--panel) !important; border:1px solid var(--line) !important; color:var(--ink) !important; }
.quick-item:hover{ background:rgba(212,175,55,.08) !important; }
.quick-item strong{ color:var(--gold) !important; }

.seo{ background:var(--bg-2) !important; border:1px solid var(--line) !important; color:var(--ink) !important; }
.seo h2{ color:var(--gold) !important; }
.seo p{ color:var(--ink-muted) !important; }

.trust-block{ background:var(--bg-2) !important; border-color:var(--line) !important; color:var(--ink) !important; }
.trust-block h4{ color:var(--gold) !important; }
.trust-block a{ color:var(--gold) !important; }

.footer{ background:#0c0a06 !important; color:var(--ink-muted) !important; border-top:2px solid var(--gold) !important; }
.footer h4{ color:var(--gold) !important; }
.footer a{ color:var(--ink-muted) !important; }
.footer a:hover{ color:var(--gold) !important; }

/* ── Menu bar — proper nav look (pills + icons + login button) ── */
.topnav{ justify-content:center !important; align-items:center; max-width:1400px; margin:0 auto !important; gap:4px !important; padding:8px 16px !important; }
.topnav a{ display:inline-flex !important; align-items:center; gap:7px; padding:9px 16px !important; border-radius:10px !important; border-bottom:0 !important; color:var(--ink) !important; font-weight:600; }
.topnav a:hover{ background:rgba(212,175,55,.12) !important; color:var(--gold) !important; border-bottom:0 !important; }
.topnav a.active{ background:rgba(212,175,55,.16) !important; color:var(--gold) !important; }
.topnav .mi{ font-size:15px; line-height:1; filter:saturate(.9); }
.topnav a.nav-login{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; color:#1a1206 !important; font-weight:700; box-shadow:0 2px 0 rgba(0,0,0,.25); }
.topnav a.nav-login:hover{ filter:brightness(1.07); color:#1a1206 !important; background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; }

/* ── Brand logo overlay removed (operator test) — tile art stands alone ── */

/* ── Hero banner slides: uniform size (your art ≈16:9), cover-fit ── */
.hero-slide img{ aspect-ratio:16/9 !important; object-fit:cover !important; height:auto !important; }

/* ── Mobile bottom tab bar (jaosua-style, raised center logo) ── */
.m-tabbar{ display:none; }
@media (max-width:760px){
  .m-tabbar{ display:grid; grid-template-columns:1fr 1fr 84px 1fr 1fr; align-items:end; gap:2px;
    position:fixed; left:0; right:0; bottom:0; z-index:90; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#a00e1f,#6b0712); border-top:2px solid var(--gold);
    border-radius:20px 20px 0 0; box-shadow:0 -4px 18px rgba(0,0,0,.55); }
  .m-tab{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#f7e9c8 !important;
    font-size:11px; font-weight:600; text-align:center; line-height:1.1; padding-bottom:2px; }
  .m-ic{ font-size:21px; line-height:1; }
  .m-line{ width:30px; height:30px; border-radius:50%; background:#06c755; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .m-center{ position:relative; }
  .m-center .m-logo{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
    width:74px; height:74px; border-radius:50%; border:3px solid #f4c94c;
    background:#12100a url("logo-circle.png") 8% center / 560% no-repeat;
    box-shadow:0 0 14px rgba(212,175,55,.7), 0 4px 10px rgba(0,0,0,.5); }
  body{ padding-bottom:78px !important; }
  .lz-bottom, .footer{ margin-bottom:0; }
}

/* Keep banners full (no side cut) but a sensible height */
.hero-slide img{ max-height:300px !important; width:100% !important; height:auto !important; object-fit:contain !important; }
.hero{ background:transparent !important; }

/* FINAL override: keep ticker readable regardless of earlier duplicate rules */
.marquee{ background:var(--marquee-bg,rgba(0,0,0,.6)) !important; color:var(--marquee-ink,#ffe6a8) !important; border:1px solid rgba(0,0,0,.3) !important; }
.marquee span{ color:var(--marquee-ink,#ffe6a8) !important; }

/* ═══ MOBILE FIXES — match supplier wallet (left rail, no text-nav, gold bottom bar) ═══ */
@media (max-width:768px){
  .topnav{ display:none !important; }                         /* hide cluttered text nav (use bottom bar) */
  .shell{ grid-template-columns:70px 1fr !important; }        /* keep LEFT rail like supplier */
  .sidebar{ display:flex !important; flex-direction:column !important; overflow:visible !important;
    position:sticky !important; top:0 !important; height:auto !important; padding:8px 5px !important; }
  .cat{ flex-direction:column !important; width:100% !important; padding:9px 2px 7px !important;
    margin-bottom:9px !important; border-radius:13px !important; }
  .cat-icon{ width:auto !important; height:auto !important; }
  .cat-icon svg{ width:26px !important; height:26px !important; }
  .cat-label{ font-size:9px !important; }
  .quick{ grid-template-columns:repeat(4,1fr) !important; gap:6px !important; }
  .quick-item{ flex-direction:column !important; text-align:center !important; gap:4px !important; padding:9px 3px !important; }
  .quick-item .quick-text span{ display:none !important; }     /* hide sub-text, keep label */
  .quick-item .quick-text strong{ font-size:10px !important; }
  .quick-item .quick-icon{ font-size:22px !important; }
  .hero-slide img{ max-height:180px !important; }
  .grid{ grid-template-columns:1fr 1fr !important; }           /* 2-col games beside rail */
  .cta .promo-pills{ display:none !important; }
}
/* Gold bottom tab bar to match supplier (was red) */
@media (max-width:760px){
  .m-tabbar{ background:linear-gradient(180deg,#f4c94c,#c9992a) !important; border-top:2px solid #8a6410 !important; }
  .m-tab{ color:#3a2c05 !important; }
}