/* =========================================================
   LE888 — Information Showroom  (v2 — visual-rich)
   style.css  (shared across all pages)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ---------- Theme tokens ---------- */
:root {
  --bg:        #050506;
  --bg-2:      #090A0D;
  --card:      #101114;
  --card-2:    #14161A;
  --card-3:    #1A1C20;
  --glass:     rgba(9, 10, 13, 0.80);

  --orange:    #FF8A1F;
  --orange-2:  #FF6A00;
  --gold:      #F6B44B;

  --text:      #FFFFFF;
  --muted:     #A1A1AA;
  --muted-2:   #71717A;

  --border:        rgba(255, 138, 31, 0.18);
  --border-strong: rgba(255, 138, 31, 0.30);
  --line:          rgba(255, 255, 255, 0.06);
  --glow:          0 0 20px rgba(255, 138, 31, 0.18);
  --glow-soft:     0 0 12px rgba(255, 138, 31, 0.10);

  --grad-orange: linear-gradient(135deg, #ffa23d 0%, #ff6a00 100%);
  --grad-gold:   linear-gradient(135deg, #ffe39c 0%, #ff8a1e 100%);
  --grad-fire:   radial-gradient(120% 120% at 75% 30%, rgba(255,138,30,.35), rgba(255,106,0,.10) 40%, transparent 70%);

  --rail-w:    94px;
  --drawer-w:  306px;
  --topbar-h:  72px;
  --radius:    18px;
  --radius-sm: 12px;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(900px 520px at 82% -8%, rgba(255,138,31,.05), transparent 60%),
    radial-gradient(720px 520px at -10% 110%, rgba(255,138,31,.035), transparent 60%);
  background-attachment: fixed;
}

h1,h2,h3,h4 { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 30px; }
.section { padding: 46px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 11px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; font-size: .92rem;
  letter-spacing: .02em;
  transition: transform .2s, box-shadow .25s, filter .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-orange); color: #1a0e00; box-shadow: var(--glow-soft); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow); filter: brightness(1.05); }
.btn-ghost { background: rgba(255,138,30,.06); border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--glow-soft); }
.btn-sm { padding: 8px 16px; font-size: .8rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.btn-wa { background: linear-gradient(135deg,#25d366,#0f8f48); color:#04230f; }
.btn-tg { background: linear-gradient(135deg,#34b7f1,#1576b8); color:#021726; }
.btn-wa:hover,.btn-tg:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-outline { background: rgba(255,255,255,.02); border:1px solid var(--line); color: var(--text); padding:10px 18px; border-radius:11px; }
.btn-outline:hover { border-color: var(--border-strong); box-shadow: var(--glow-soft); }
.btn-outline .ico { width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,138,30,.14);color:var(--orange); }
.btn-outline .ico svg { width:12px;height:12px; }

/* badges */
.badge-hot,.badge-new {
  font-family:'Inter';font-size:.58rem;font-weight:800;letter-spacing:.06em;
  padding:3px 7px;border-radius:5px;margin-left:auto;
}
.badge-hot { background: var(--grad-orange); color:#210f00; }
.badge-new { background: linear-gradient(135deg,#ff4d4d,#c01010); color:#fff; }

/* ---------- Logo placeholder ---------- */
.logo { display:inline-flex;align-items:center;gap:1px;font-family:'Inter';font-weight:800;font-size:1.5rem;letter-spacing:.01em;user-select:none; }
.logo .le { color:#fff; }
.logo .num { color: var(--orange); text-shadow:0 0 14px rgba(255,138,30,.55); }
.logo.boxed { padding:8px 14px;border-radius:12px;background:linear-gradient(180deg,#141319,#0c0c10);border:1.5px solid var(--border-strong);box-shadow:var(--glow-soft);font-size:1.15rem; }
.logo.sm { font-size:1.25rem; }

/* ---------- Image placeholders ---------- */
.ph {
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(45deg, rgba(255,138,30,.05) 0 12px, transparent 12px 24px),
    linear-gradient(135deg,#1a1a22,#0f0f14);
  border:1px dashed var(--border-strong);
  color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:14px;overflow:hidden;
}
.ph::after { content:'';position:absolute;inset:0;background: var(--grad-fire);pointer-events:none; }
.ph .ph-label { position:relative;z-index:1; }

/* =========================================================
   RAIL — collapsed icon+label sidebar (desktop)
   ========================================================= */
.rail {
  position:fixed;top:0;left:0;width:var(--rail-w);height:100vh;z-index:60;
  background:linear-gradient(180deg,#0b0b0e,#080809);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:2px;
}
.rail-ham { width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;background: var(--grad-orange);color:#1a0e00;box-shadow:var(--glow-soft);margin-bottom:8px; }
.rail-ham svg { width:22px;height:22px; }
.rail-item { width:100%;padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--muted);transition:color .2s,background .2s;border-left:2px solid transparent; }
.rail-item svg { width:22px;height:22px; }
.rail-item span { font-family:'Inter';font-size:.6rem;font-weight:600;letter-spacing:.02em; }
.rail-item:hover { color:var(--orange);background:rgba(255,138,30,.06); }
.rail-item.active { color:var(--orange);background:rgba(255,138,30,.10);border-left-color:var(--orange); }
.rail-item.plinko { color:var(--gold); }
.rail-spacer { flex:1; }
.rail-collapse { color:var(--orange);font-size:1.1rem;font-weight:800;padding:10px;letter-spacing:-2px; }

/* =========================================================
   DRAWER (expanded panel) + overlay
   ========================================================= */
.drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.64);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .28s;z-index:90; }
.drawer-overlay.show { opacity:1;visibility:visible; }
.drawer { position:fixed;top:0;left:0;width:var(--drawer-w);max-width:330px;height:100vh;z-index:100;background:linear-gradient(180deg,#101016,#0a0a0e);border-right:1px solid var(--border-strong);box-shadow:8px 0 44px rgba(0,0,0,.6);transform:translateX(-105%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer-top { display:flex;align-items:center;justify-content:space-between;padding:18px 18px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:linear-gradient(180deg,#101016,#0e0e13);z-index:2; }
.drawer-close { width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--muted);border:1px solid var(--line); }
.drawer-close:hover { color:var(--orange);border-color:var(--border-strong); }
.drawer-close svg { width:20px;height:20px; }
.drawer-body { padding:14px 14px 10px;flex:1; }
.drawer-section { margin-bottom:16px; }
.drawer-section .label { font-family:'Inter';font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:6px 6px 10px; }
.drawer-link { display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--text);font-size:.9rem;font-weight:500;transition:background .18s,transform .15s;border:1px solid transparent;width:100%; }
.drawer-link .di { width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,138,30,.08);color:var(--orange); }
.drawer-link .di svg { width:17px;height:17px; }
.drawer-link:hover { background:rgba(255,138,30,.07);border-color:var(--border);transform:translateX(2px); }
.drawer-link .live-dot { width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:var(--glow-soft);margin-left:auto; }
.drawer-foot { border-top:1px solid var(--line);padding:14px 18px 20px;font-size:.74rem;color:var(--muted);display:flex;flex-direction:column;gap:7px; }
.drawer-foot .line { display:flex;align-items:center;gap:8px; }
.drawer-foot .dot { width:7px;height:7px;border-radius:50%;background:#36d96b;box-shadow:0 0 8px #36d96b; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar { position:sticky;top:0;z-index:50;height:var(--topbar-h);display:flex;align-items:center;gap:20px;padding:0 28px;background:var(--glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--line); }
.topbar .mobile-ham { width:42px;height:42px;display:none;align-items:center;justify-content:center;border-radius:11px;color:var(--orange);border:1px solid var(--border); }
.topbar .mobile-ham svg { width:22px;height:22px; }
.top-nav { display:flex;align-items:center;gap:2px;margin:0 auto; }
.top-nav > a, .top-nav > .has-dd > a { position:relative;font-family:'Inter';font-size:.92rem;font-weight:600;color:var(--muted);padding:10px 16px;border-radius:9px;transition:color .18s;display:inline-flex;align-items:center;gap:5px; }
.top-nav a:hover { color:var(--text); }
.top-nav a.active { color:var(--orange); }
.top-nav a.active::after { content:'';position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:2px;background:var(--grad-orange);box-shadow:var(--glow-soft); }
.has-dd { position:relative; }
.has-dd .caret { width:12px;height:12px; }
.dropdown { position:absolute;top:100%;left:0;min-width:180px;padding:8px;background:var(--card-2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:5; }
.has-dd:hover .dropdown { opacity:1;visibility:visible;transform:translateY(4px); }
.dropdown a { display:block;padding:9px 12px;border-radius:8px;font-size:.86rem;color:var(--muted);font-family:'Inter'; }
.dropdown a:hover { background:rgba(255,138,30,.08);color:var(--text); }
.top-actions { display:flex;align-items:center;gap:10px; }

/* =========================================================
   LAYOUT
   ========================================================= */
.layout { margin-left:var(--rail-w);min-height:100vh;display:flex;flex-direction:column; }
main { flex:1; }
.section-bar { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px; }
.section-bar h2 { font-size:clamp(1.2rem,2.4vw,1.7rem);text-transform:uppercase;letter-spacing:.01em; }
.section-bar .eyebrow { display:block;font-family:'Inter';font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:6px; }
.link-more { font-family:'Inter';font-size:.82rem;font-weight:700;color:var(--orange);display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
.link-more:hover { filter:brightness(1.15); }

/* =========================================================
   HERO BANNER
   ========================================================= */
.hero { padding:28px 0 8px; }
.hero-banner { position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow),var(--glow-soft);background:linear-gradient(110deg,#0b0b0e 0%,#121118 46%,#1a120c 100%);min-height:420px;display:flex;align-items:center; }
.hero-banner::before { content:'';position:absolute;inset:0;background: radial-gradient(90% 120% at 78% 38%, rgba(255,138,30,.30), transparent 58%);pointer-events:none; }
.hero-embers { position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 70% 30%, rgba(255,180,90,.7), transparent),radial-gradient(2px 2px at 82% 60%, rgba(255,150,60,.6), transparent),radial-gradient(1.5px 1.5px at 60% 75%, rgba(255,200,120,.6), transparent),radial-gradient(1.5px 1.5px at 90% 20%, rgba(255,170,80,.5), transparent); }
.hero-grid { position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;width:100%;padding:42px 46px; }
.offer-pill { display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,138,30,.10);border:1px solid var(--border-strong);color:var(--gold);font-family:'Inter';font-size:.72rem;font-weight:800;letter-spacing:.14em;box-shadow:var(--glow-soft);margin-bottom:18px; }
.hero-100 { font-family:'Inter';font-weight:800;font-size:clamp(3rem,8vw,5.6rem);line-height:.9;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5); }
.hero-title { font-family:'Inter';font-weight:800;font-size:clamp(2rem,5.6vw,4rem);line-height:.95;margin-bottom:16px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent; }
.hero-sub { color:#d6d6dd;font-size:1.05rem;max-width:440px;margin-bottom:6px; }
.hero-sub .hl { color:var(--orange);font-weight:800; }
.hero-cta { margin-top:22px;display:flex;gap:12px;flex-wrap:wrap; }
.hero-media { position:relative; }
.hero-media .ph { aspect-ratio:1/1;width:100%;border-style:solid;border-color:var(--border);background:linear-gradient(135deg,#1d140c,#120d10);box-shadow:var(--glow); }
.hero-arrow { position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);border:1px solid var(--line);color:#fff; }
.hero-arrow:hover { border-color:var(--border-strong);color:var(--orange); }
.hero-arrow svg { width:20px;height:20px; }
.carousel-dots { position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px; }
.carousel-dots .dot { width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.25);transition:.2s; }
.carousel-dots .dot.active { width:22px;background:var(--grad-orange);box-shadow:var(--glow-soft); }

/* =========================================================
   TOP PROMOTIONS
   ========================================================= */
.promo-row { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.promo-card { display:flex;gap:14px;align-items:center;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);transition:transform .25s,box-shadow .25s,border-color .25s; }
.promo-card:hover { transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow),var(--shadow); }
.promo-art { flex:0 0 86px;height:86px; }
.promo-art.ph { border-radius:12px; }
.promo-info { display:flex;flex-direction:column;gap:3px;min-width:0; }
.promo-info h4 { font-size:1rem;text-transform:uppercase;letter-spacing:.01em;display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.promo-info h4 .accent { color:var(--orange); }
.promo-info p { color:var(--muted);font-size:.8rem; }
.promo-info .btn { align-self:flex-start;margin-top:6px;background:rgba(255,138,30,.08);border:1px solid var(--border);color:var(--orange);padding:6px 14px;border-radius:8px;font-size:.76rem; }
.promo-info .btn:hover { background:var(--grad-orange);color:#1a0e00;border-color:transparent; }

/* =========================================================
   PLINKO + HOT GAMES ROW
   ========================================================= */
.feature-row { display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:stretch; }
.plinko-band { position:relative;border-radius:var(--radius);overflow:hidden;background:radial-gradient(120% 120% at 70% 50%, rgba(255,138,30,.16), transparent 60%), var(--card);border:1px solid var(--border);padding:26px;display:flex;gap:20px;align-items:center;flex-wrap:wrap; }
.plinko-band .pb-left { flex:1;min-width:200px; }
.plinko-band h2 { font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase; }
.plinko-band p { color:var(--muted);font-size:.9rem;margin:8px 0 16px;max-width:240px; }
.plinko-band .pb-right { display:flex;gap:16px;align-items:center;flex-wrap:wrap; }
.peg-pyramid { display:flex;flex-direction:column;gap:9px;padding:6px 0; }
.peg-pyramid .prow { display:flex;justify-content:center;gap:11px; }
.peg-pyramid .peg { width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#ff9a3d);box-shadow:0 0 6px rgba(255,138,30,.6); }
.mult-boxes { display:flex;gap:7px;flex-wrap:wrap;max-width:230px; }
.mult { font-family:'Inter';font-weight:800;font-size:.82rem;padding:10px 12px;border-radius:9px;min-width:54px;text-align:center;background:linear-gradient(180deg,#1b1b22,#121218);border:1px solid var(--line);border-top:2px solid var(--orange);color:#fff; }
.mult.c1 { border-top-color:#ff8a1e;color:var(--orange); }
.mult.c2 { border-top-color:#ffd24d; }
.mult.c3 { border-top-color:#36d96b; }
.mult.c4 { border-top-color:#34b7f1; }
.mult.c5 { border-top-color:#b89bff; }
.mult.c6 { border-top-color:#ff6a6a; }
.mult.c7 { border-top-color:#ff3d6e; }
.hotgames-box { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px; }
.hotgames-box .hg-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.hotgames-box .hg-head h3 { font-size:1.05rem;text-transform:uppercase; }
.hg-row { display:grid;grid-template-columns:repeat(5,1fr);gap:9px; }
.game-thumb { display:flex;flex-direction:column;gap:6px;transition:transform .2s; }
.game-thumb:hover { transform:translateY(-4px); }
.thumb-art { aspect-ratio:3/4;border-radius:11px; }
.thumb-art.ph { border-radius:11px; }
.game-thumb:hover .thumb-art { box-shadow:var(--glow);border-color:var(--border-strong); }
.thumb-name { font-size:.7rem;color:var(--muted);text-align:center;font-weight:600;line-height:1.2; }

/* =========================================================
   PROVIDERS STRIP
   ========================================================= */
.providers { display:flex;gap:10px;flex-wrap:wrap; }
.prov-pill { flex:1;min-width:120px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,#141319,#0e0e12);border:1px solid var(--line);color:var(--muted);font-family:'Inter';font-weight:700;font-size:.78rem;letter-spacing:.04em;transition:.2s;text-align:center;padding:8px; }
.prov-pill:hover { border-color:var(--border-strong);box-shadow:var(--glow-soft);color:var(--text); }
.prov-pill.more { color:var(--orange);border-color:var(--border); }

/* =========================================================
   GENERIC CARD (inner pages)
   ========================================================= */
.grid { display:grid;gap:18px; }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s; }
.card:hover { transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow),var(--shadow); }
.card .ph { border-radius:0;border-left:0;border-right:0;border-top:0; }
.card-body { padding:15px 16px 16px;display:flex;flex-direction:column;flex:1;gap:8px; }
.card-body h3 { font-size:1.02rem;display:flex;align-items:center;flex-wrap:wrap;gap:6px;text-transform:uppercase;letter-spacing:.01em; }
.card-body .desc { color:var(--muted);font-size:.85rem;flex:1; }
.card-body .meta { color:var(--muted-2);font-size:.78rem; }
.card-body .cond { font-size:.76rem;color:var(--gold);background:rgba(255,138,30,.06);border:1px solid var(--border);border-radius:8px;padding:7px 10px; }
.card-body .btn { margin-top:4px;align-self:flex-start; }

/* page head */
.page-head { padding:40px 0 6px;text-align:center; }
.page-head .eyebrow { font-family:'Inter';font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:10px; }
.page-head h1 { font-size:clamp(1.9rem,4.4vw,3rem);text-transform:uppercase; }
.page-head p { color:var(--muted);margin-top:12px;max-width:600px;margin-inline:auto; }

/* CTA band */
.cta-band { background:linear-gradient(135deg,rgba(255,138,30,.12),rgba(255,106,0,.04));border:1px solid var(--border-strong);border-radius:var(--radius);padding:34px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;box-shadow:var(--glow-soft); }
.cta-band h2 { font-size:clamp(1.3rem,2.6vw,1.8rem);text-transform:uppercase; }
.cta-band p { color:var(--muted);margin-top:6px; }
.cta-band .actions { display:flex;gap:12px;flex-wrap:wrap; }

/* VIP */
.vip-card { text-align:center;align-items:center;padding-top:22px; }
.vip-card .tier-name { font-family:'Inter';font-weight:800;font-size:1.3rem;margin:12px 0 4px; }
.tier-bronze{color:#cd9b6a;}.tier-silver{color:#cfd3da;}.tier-gold{color:#ffcf6b;}.tier-platinum{color:#8fd3ff;}.tier-diamond{color:#b89bff;}.tier-elite{color:#ff8a1e;}
.vip-card .tier-dep { color:var(--muted);font-size:.84rem;margin-bottom:10px; }
.vip-card ul.benefits { text-align:left;width:100%;margin-top:6px;display:flex;flex-direction:column;gap:6px; }
.vip-card ul.benefits li { font-size:.85rem;color:var(--muted);padding-left:18px;position:relative; }
.vip-card ul.benefits li::before { content:'✦';position:absolute;left:0;color:var(--orange); }
.benefit-list { display:grid;grid-template-columns:repeat(5,1fr);gap:14px; }
.benefit { text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:22px 14px;transition:.2s; }
.benefit:hover { border-color:var(--border-strong);box-shadow:var(--glow-soft);transform:translateY(-3px); }
.benefit .ico { width:46px;height:46px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--orange);background:rgba(255,138,30,.1);border:1px solid var(--border); }
.benefit .ico svg { width:24px;height:24px; }
.benefit h4 { font-size:.9rem;text-transform:uppercase; }

/* contact */
.contact-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.contact-card { text-align:center;align-items:center;padding:26px 20px; }
.contact-card .ico { width:54px;height:54px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--orange);background:rgba(255,138,30,.1);border:1px solid var(--border-strong);box-shadow:var(--glow-soft); }
.contact-card .ico svg { width:26px;height:26px; }
.contact-card h3 { font-size:1.05rem; }
.contact-card p { color:var(--muted);font-size:.85rem;margin:6px 0 14px; }

/* filters / faq */
.filters { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px; }
.filter-btn { padding:9px 18px;border-radius:999px;font-family:'Inter';font-size:.82rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--border);transition:.2s; }
.filter-btn:hover { color:var(--text);border-color:var(--border-strong); }
.filter-btn.active { background:var(--grad-orange);color:#1a0e00;border-color:transparent;box-shadow:var(--glow-soft); }
.fade-hide { display:none !important; }
.faq { display:flex;flex-direction:column;gap:12px;max-width:760px; }
.faq-item { background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden; }
.faq-q { width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;font-family:'Inter';font-weight:700;font-size:.95rem;text-align:left; }
.faq-q .icon { flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--orange);border:1px solid var(--border);transition:transform .25s;font-size:1.2rem;line-height:1; }
.faq-item.open .faq-q .icon { transform:rotate(45deg);background:rgba(255,138,30,.1); }
.faq-a { max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;color:var(--muted);font-size:.9rem;padding:0 18px; }
.faq-item.open .faq-a { max-height:240px;padding:0 18px 18px; }

/* =========================================================
   PLINKO FAB + MODAL
   ========================================================= */
.plinko-fab { position:fixed;right:22px;bottom:26px;z-index:70;width:60px;height:60px;border-radius:50%;background:var(--grad-orange);display:flex;align-items:center;justify-content:center;box-shadow:var(--glow),0 10px 24px rgba(0,0,0,.5);color:#1a0e00;animation:floaty 3s ease-in-out infinite; }
.plinko-fab svg { width:28px;height:28px; }
.plinko-fab:hover { filter:brightness(1.08);transform:scale(1.05); }
@keyframes floaty { 0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);} }
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(4px);z-index:110;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s; }
.modal-overlay.show { opacity:1;visibility:visible; }
.modal { width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#141319,#0d0d12);border:1.5px solid var(--border-strong);border-radius:20px;box-shadow:var(--glow),var(--shadow);transform:translateY(16px) scale(.98);transition:transform .28s cubic-bezier(.4,0,.2,1); }
.modal-overlay.show .modal { transform:translateY(0) scale(1); }
.modal-head { display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#141319;z-index:2; }
.modal-head h3 { font-size:1.15rem; } .modal-head h3 .accent { color:var(--orange); }
.modal-close { width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--muted);border:1px solid var(--line); }
.modal-close:hover { color:var(--orange);border-color:var(--border-strong); }
.modal-close svg { width:20px;height:20px; }
.modal-body { padding:20px; }
.plinko-board { position:relative;background:radial-gradient(circle at 50% 0%,#1d1d26,#0e0e13);border:1px solid var(--border);border-radius:14px;padding:20px 14px 14px;margin-bottom:16px; }
.plinko-ball { position:absolute;top:8px;left:50%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#ffcf6b);box-shadow:0 0 12px var(--gold);transform:translateX(-50%);opacity:0; }
.plinko-ball.drop { animation:drop 1.1s cubic-bezier(.5,0,.6,1) forwards; }
@keyframes drop { 0%{opacity:1;top:8px;}100%{opacity:1;top:calc(100% - 58px);} }
.modal .peg-pyramid { margin-bottom:14px; }
.prize-boxes { display:grid;grid-template-columns:repeat(7,1fr);gap:6px; }
.prize-box { text-align:center;font-family:'Inter';font-size:.74rem;font-weight:800;padding:12px 4px;border-radius:9px;background:linear-gradient(180deg,#1b1b22,#121218);border:1px solid var(--line);border-top:2px solid var(--orange);color:#fff;transition:.2s; }
.prize-box.lit { color:#1a0e00;background:var(--grad-orange);border-color:transparent;box-shadow:var(--glow);transform:translateY(-2px); }
.plinko-result { text-align:center;margin:16px 0;padding:14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,138,30,.05);min-height:56px;display:flex;align-items:center;justify-content:center; }
.plinko-result .label { color:var(--muted);font-size:.85rem; }
.plinko-result .value { font-family:'Inter';font-weight:800;font-size:1.3rem;color:var(--orange);text-shadow:var(--glow-soft); }
.plinko-note { font-size:.76rem;color:var(--muted-2);text-align:center;margin:12px 0 16px; }
.plinko-contacts { display:flex;gap:12px; } .plinko-contacts .btn { flex:1; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(255,138,30,.03));padding:40px 0 30px;margin-top:24px; }
.footer-grid { display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between; }
.footer .brand-col { max-width:330px; }
.footer .brand-col p { color:var(--muted);font-size:.85rem;margin-top:14px; }
.footer .foot-links { display:flex;gap:50px;flex-wrap:wrap; }
.footer .foot-links .col h5 { font-family:'Inter';font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:12px; }
.footer .foot-links .col a { display:block;color:var(--muted);font-size:.86rem;padding:4px 0; }
.footer .foot-links .col a:hover { color:var(--text); }
.foot-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:14px; }
.foot-tags span { font-size:.72rem;color:var(--muted);padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02); }
.footer-bottom { margin-top:28px;padding-top:20px;border-top:1px solid var(--line);text-align:center;color:var(--muted-2);font-size:.78rem; }

/* entrance anim */
.reveal { opacity:0;transform:translateY(18px);animation:reveal .7s ease forwards; }
@keyframes reveal { to { opacity:1;transform:translateY(0);} }
.d1{animation-delay:.05s;}.d2{animation-delay:.13s;}.d3{animation-delay:.21s;}.d4{animation-delay:.29s;}.d5{animation-delay:.37s;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:1200px){ .container{padding:0 42px;} }
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .promo-row{grid-template-columns:repeat(2,1fr);}
  .benefit-list{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:899px){
  .rail{display:none;}
  .layout{margin-left:0;}
  .top-nav,.top-actions .desk-only{display:none;}
  .topbar .mobile-ham{display:flex;}
  .topbar{gap:12px;padding:0 16px;}
  .top-actions{margin-left:auto;}
  .hero-grid{grid-template-columns:1fr;padding:30px 26px;}
  .hero-media{order:-1;}
  .hero-media .ph{aspect-ratio:16/10;}
  .feature-row{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .benefit-list{grid-template-columns:repeat(3,1fr);}
  .cta-band{flex-direction:column;align-items:flex-start;}
}
@media (max-width:600px){
  .container{padding:0 15px;}
  .section{padding:34px 0;}
  .promo-row,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .hg-row{grid-template-columns:repeat(3,1fr);}
  .benefit-list{grid-template-columns:repeat(2,1fr);}
  .vip .grid-3{grid-template-columns:1fr;}
  .drawer{width:82%;max-width:330px;}
  .hero-banner{min-height:0;}
  .hero-100{font-size:clamp(2.6rem,16vw,3.6rem);}
  .hero-cta{width:100%;} .hero-cta .btn{flex:1;}
  .plinko-band{flex-direction:column;align-items:flex-start;}
  .plinko-band .pb-right{width:100%;justify-content:space-between;}
  .mult-boxes{max-width:none;}
  .providers{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .prov-pill{flex:0 0 130px;scroll-snap-align:start;}
  .modal-overlay{padding:16px;align-items:center;}
  .modal{max-width:100%;max-height:88vh;height:auto;border-radius:18px;}
  .prize-boxes{grid-template-columns:repeat(4,1fr);}
  .plinko-contacts{flex-direction:column;}
  .plinko-fab{right:16px;bottom:18px;width:54px;height:54px;}
  .footer-grid{flex-direction:column;} .footer .foot-links{gap:32px;}
  .cta-band .actions{width:100%;flex-direction:column;} .cta-band .actions .btn{width:100%;}
}
@media (max-width:380px){ .hg-row{grid-template-columns:repeat(2,1fr);} .benefit-list{grid-template-columns:1fr;} }
.providers::-webkit-scrollbar{height:6px;} .providers::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;}
.mobile-only{display:none;}
@media (max-width:899px){ .mobile-only{display:inline-flex;} }


/* =========================================================
   ====  HOMEPAGE v3 REFINEMENTS (index.html)  ====
   Clearly separated. These rules come last so they refine
   the shared base styles above for the homepage.
   ========================================================= */

/* ---- 1. Custom scrollbars (kill the ugly white bar) ---- */
html { scrollbar-width: thin; scrollbar-color: var(--orange-2) #0c0c0f; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0c0f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9a3d, #ff6a00);
  border-radius: 999px; border: 2px solid #0c0c0f;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffae5c, #ff7a14); }

.drawer { scrollbar-width: thin; scrollbar-color: var(--orange-2) transparent; }
.drawer::-webkit-scrollbar { width: 7px; }
.drawer::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.drawer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--orange), var(--orange-2));
  border-radius: 999px;
}

/* ---- 2. Premium RAIL (closed sidebar) with icon tiles ---- */
.rail {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,138,30,.10), transparent 60%),
    linear-gradient(180deg, #100b08 0%, #0a0808 55%, #070707 100%);
  border-right: 1px solid rgba(255,138,30,.28);
  box-shadow: 2px 0 24px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,138,30,.10);
  gap: 4px; padding: 14px 0;
}
.rail-item { gap: 6px; border-left: none; }
.rail-item .rtile {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: linear-gradient(180deg, #1b1410, #121012);
  border: 1px solid rgba(255,255,255,.05);
  color: var(--orange);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
.rail-item svg { width: 20px; height: 20px; }
.rail-item span { color: var(--muted); transition: color .2s; }
.rail-item:hover { background: transparent; }
.rail-item:hover .rtile {
  border-color: var(--border-strong);
  box-shadow: var(--glow-soft);
  transform: translateY(-1px);
  background: linear-gradient(180deg, #241810, #161113);
}
.rail-item:hover span { color: var(--text); }
.rail-item.active { background: transparent; }
.rail-item.active .rtile {
  border-color: var(--orange);
  background: linear-gradient(180deg, rgba(255,138,30,.22), rgba(255,106,0,.10));
  box-shadow: var(--glow-soft);
}
.rail-item.active span { color: var(--orange); }
.rail-ham { border-radius: 14px; }

/* ---- 3. Premium DRAWER (open sidebar) ---- */
.drawer {
  background:
    radial-gradient(90% 40% at 0% 0%, rgba(255,138,30,.10), transparent 55%),
    linear-gradient(180deg, #130d09 0%, #0c0a0b 60%, #08080a 100%);
  border-right: 1px solid rgba(255,138,30,.34);
  box-shadow: 10px 0 50px rgba(0,0,0,.7), inset -1px 0 0 rgba(255,138,30,.14);
  backdrop-filter: blur(6px);
}
.drawer-top { background: linear-gradient(180deg, rgba(19,13,9,.96), rgba(14,11,12,.9)); backdrop-filter: blur(6px); }
.drawer-link .di {
  background: linear-gradient(180deg, #1b1410, #121012);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.drawer-link:hover { background: linear-gradient(90deg, rgba(255,138,30,.12), rgba(255,138,30,.02)); }
.drawer-link:hover .di { border-color: var(--border-strong); box-shadow: var(--glow-soft); }

/* ---- 4. Premium image placeholder (NO dashed border) ---- */
.media {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 72% 26%, rgba(255,138,30,.30), transparent 58%),
    linear-gradient(150deg, #2a1808 0%, #1a1210 46%, #100c10 100%);
  box-shadow: inset 0 0 46px rgba(255,138,30,.12), 0 0 0 1px rgba(255,138,30,.18), 0 0 22px rgba(255,138,30,.10);
  color: #c9b49a; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .05em;
}
.media .ph-label { position: relative; z-index: 1; opacity: .85; }
.media::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 80%, rgba(255,106,0,.14), transparent 60%);
}

/* ---- 5. HERO refinements (cinematic, not too tall) ---- */
.hero { padding: 26px 0 6px; }
.hero-banner { min-height: 0; }
.hero-grid { padding: 40px 44px; gap: 30px; align-items: center; }
.hero-title { margin-bottom: 14px; }
.hero-sub { margin-bottom: 18px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.hero-pills span {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gold); padding: 7px 13px; border-radius: 999px;
  background: rgba(255,138,30,.08); border: 1px solid var(--border);
}
.hero-media .media.hero-img { aspect-ratio: 4/3; width: 100%; box-shadow: inset 0 0 0 1px rgba(255,138,31,.16); }

/* ---- 6. TOP PROMOTIONS — single frame, no inner box ---- */
.promo-row { grid-template-columns: repeat(4, 1fr); }
.promo-v3 {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.promo-v3:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--glow), var(--shadow); }
.promo-v3 .promo-img { flex: 0 0 96px; height: 96px; border-radius: 12px; }
.promo-v3-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.promo-v3-info h3 { font-size: .98rem; text-transform: uppercase; letter-spacing: .01em; }
.promo-v3-info p { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.promo-v3-info .btn { align-self: flex-start; margin-top: 4px; }

/* ---- 7. PLINKO feature (image placeholder, no CSS board) ---- */
.plinko-feature {
  display: grid; grid-template-columns: .9fr 1.25fr; gap: 26px; align-items: center;
  background: radial-gradient(120% 120% at 80% 50%, rgba(255,138,30,.10), transparent 60%), var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 30px;
}
.plinko-feature .pf-text h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); text-transform: uppercase; }
.plinko-feature .pf-text p { color: var(--muted); font-size: .95rem; margin: 10px 0 20px; max-width: 320px; }
.plinko-feature .pf-img { aspect-ratio: 16/8; width: 100%; }

/* ---- 8. GAME CATEGORIES ---- */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cat-card {
  display: flex; flex-direction: column; gap: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cat-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--glow), var(--shadow); }
.cat-card .cat-img { aspect-ratio: 4/3; width: 100%; border-radius: 0; box-shadow: inset 0 0 40px rgba(255,138,30,.12); }
.cat-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cat-body h3 { font-size: 1rem; text-transform: uppercase; }

/* ---- 9. PLINKO modal v3 (image only, no board) ---- */
.plinko-stage { aspect-ratio: 16/10; width: 100%; margin-bottom: 16px; }
.media.running { animation: stagePulse 1.4s ease; }
@keyframes stagePulse {
  0%, 100% { box-shadow: inset 0 0 46px rgba(255,138,30,.12), 0 0 0 1px rgba(255,138,30,.18); }
  50% { box-shadow: inset 0 0 70px rgba(255,138,30,.45), 0 0 34px rgba(255,138,30,.55), 0 0 0 1px var(--orange); }
}

/* ---- 10. Homepage responsive (360 / 390 / 430 / 768 / 1024 / 1440) ---- */
@media (max-width: 1100px) {
  .promo-row { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .plinko-feature { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .plinko-feature .pf-img { order: -1; aspect-ratio: 16/9; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero-grid { padding: 26px 22px; gap: 22px; }
  .hero-media .media.hero-img { aspect-ratio: 16/10; }
  .promo-row { grid-template-columns: 1fr; }
  /* promo cards: image on top, text below */
  .promo-v3 { flex-direction: column; align-items: stretch; }
  .promo-v3 .promo-img { flex: none; width: 100%; height: auto; aspect-ratio: 16/9; }
  .promo-v3-info { gap: 6px; }
  .cat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .hero-100 { font-size: clamp(2.4rem, 18vw, 3.4rem); }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; }
}


/* =========================================================
   ====  COLOR SYSTEM v4 (index.html)  ====
   Premium dark app look. Orange = ACCENT ONLY.
   No orange/brown surfaces, cards, or placeholders.
   This block is last so it overrides the styles above.
   ========================================================= */

/* ---- Placeholders: dark graphite, NOT orange/brown ---- */
.media {
  background: linear-gradient(150deg, #151C26 0%, #0F141C 55%, #0B0F15 100%);
  box-shadow: inset 0 0 0 1px rgba(255,138,31,.16);
  color: var(--muted);
}
.media::before { display: none; }          /* remove orange glow wash */
.media .ph-label { color: var(--muted); opacity: .9; }
.media.hero-img,
.cat-card .cat-img,
.plinko-feature .pf-img,
.plinko-stage,
.promo-v3 .promo-img {
  box-shadow: inset 0 0 0 1px rgba(255,138,31,.16);   /* thin muted orange edge only */
}

/* ---- Sidebar (rail): black/charcoal, thin orange edge ---- */
.rail {
  background: linear-gradient(180deg, #0A0C11 0%, #07090D 100%);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 22px rgba(0,0,0,.55);
}
.rail-item .rtile {
  background: #121722;                       /* dark grey tile, not orange */
  border: 1px solid rgba(255,255,255,.06);
  color: var(--muted);                       /* soft grey inactive icon */
  box-shadow: none;
}
.rail-item span { color: var(--muted-2); }
.rail-item:hover .rtile {
  border-color: var(--border-strong);
  box-shadow: var(--glow-soft);              /* soft glow on hover only */
  background: #151C26;
  color: #cfd3da;
  transform: translateY(-1px);
}
.rail-item:hover span { color: var(--text); }
.rail-item.active .rtile {
  background: rgba(255,138,31,.10);
  border-color: var(--orange);
  color: var(--orange);                      /* active = orange icon + border */
  box-shadow: var(--glow-soft);
}
.rail-item.active span { color: var(--orange); }

/* ---- Drawer: dark charcoal, thin orange edge, grey icon tiles ---- */
.drawer {
  background: linear-gradient(180deg, #0C0F15 0%, #08090D 100%);
  border-right: 1px solid var(--border);
  box-shadow: 10px 0 46px rgba(0,0,0,.65);
}
.drawer-top { background: #0C0F15; }
.drawer-link .di {
  background: #121722;
  border: 1px solid rgba(255,255,255,.06);
  color: var(--muted);                       /* soft grey icons */
  box-shadow: none;
}
.drawer-link:hover { background: rgba(255,255,255,.04); }
.drawer-link:hover .di { border-color: var(--border-strong); color: var(--orange); box-shadow: none; }

/* ---- Hero: dark gradient, glow only near border/CTA ---- */
.hero-banner {
  background: linear-gradient(160deg, #10141C 0%, #0B0E14 55%, #090B10 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero-banner::before {
  background: radial-gradient(60% 70% at 18% 92%, rgba(255,138,31,.14), transparent 60%); /* soft glow near CTA */
}
.hero-embers { display: none; }              /* remove orange ember dots */
.hero-title {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--orange);                      /* brand highlight only, not a wash */
}
.offer-pill { background: rgba(255,138,31,.07); color: var(--gold); }
.hero-pills span { background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #cfd3da; }

/* ---- Top promotions: dark card, single thin orange frame ---- */
.promo-v3 { background: var(--card); border: 1px solid var(--border); }
.promo-v3:hover { border-color: var(--border-strong); box-shadow: var(--glow); }

/* ---- Plinko feature: dark charcoal, no orange wash ---- */
.plinko-feature {
  background: var(--card);
  border: 1px solid var(--border);
}
.plinko-feature .pf-text p { color: var(--muted); }

/* ---- Game category cards: dark graphite ---- */
.cat-card { background: var(--card); border: 1px solid var(--border); }
.cat-card:hover { border-color: var(--border-strong); box-shadow: var(--glow); }

/* ---- Providers: dark pills, thin line ---- */
.prov-pill { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.prov-pill:hover { border-color: var(--border-strong); box-shadow: var(--glow-soft); color: var(--text); }

/* ---- Contact CTA: subtle, not a bright orange panel ---- */
.cta-band {
  background: linear-gradient(135deg, #131A24, #0E131B);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* ---- Top nav: dark, orange only on hover/active ---- */
.topbar { background: var(--glass); border-bottom: 1px solid var(--line); }
.btn-ghost { background: rgba(255,255,255,.03); border: 1px solid var(--border); }

/* ---- Plinko modal: dark surface ---- */
.modal { background: linear-gradient(180deg, #121722, #0C0F15); border: 1px solid var(--border-strong); }
.modal-head { background: #121722; }
.plinko-result { background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.media.running {
  animation: stagePulseV4 1.4s ease;
}
@keyframes stagePulseV4 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,138,31,.16); }
  50% { box-shadow: inset 0 0 0 1px var(--orange), 0 0 22px rgba(255,138,31,.30); }
}

/* ---- Footer: keep flat dark ---- */
.footer { background: linear-gradient(180deg, transparent, rgba(255,255,255,.015)); }


/* =========================================================
   ====  HOMEPAGE v5 (index.html)  ====
   Compact image-only banner + Inter typography polish.
   Last block — overrides above.
   ========================================================= */

/* ---- Typography: clean, rounded, app-like (Inter) ---- */
body { font-weight: 400; letter-spacing: 0; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.section-bar h2, .page-head h1, .cat-body h3, .promo-v3-info h3,
.card-body h3, .plinko-feature .pf-text h2 { text-transform: none; }   /* drop shouty all-caps tracking */
.section-bar h2 { letter-spacing: -0.01em; }
.top-nav > a, .top-nav > .has-dd > a { font-weight: 600; letter-spacing: 0; }
.btn { font-weight: 700; letter-spacing: 0; }
.drawer-section .label, .section-bar .eyebrow, .page-head .eyebrow {
  letter-spacing: 0.10em;   /* small labels: gentle tracking only */
}

/* ---- Main banner: compact, wide, image-only ---- */
.hero { padding: 22px 0 6px; }
.banner { width: 100%; }
.banner-img {
  width: 100%;
  aspect-ratio: 3 / 1;          /* wide promo-banner feel (ECLBET-like) */
  max-height: 340px;
  border-radius: 18px;
}

/* tablet */
@media (max-width: 899px) {
  .banner-img { aspect-ratio: 2.4 / 1; max-height: 280px; }
}
/* mobile */
@media (max-width: 600px) {
  .hero { padding: 16px 0 4px; }
  .banner-img { aspect-ratio: 16 / 9; max-height: 220px; }
}
@media (max-width: 430px) {
  .banner-img { aspect-ratio: 16 / 9; max-height: 200px; }
}


/* =========================================================
   ====  HOMEPAGE v6 (index.html)  ====
   Stake / ECLBET dark-teal app look:
   logo-only header, matte sidebar, 5-image banner slider.
   Last block — overrides above.
   ========================================================= */

/* ---- Header: logo left (aligned to content), contacts right ---- */
.topbar {
  height: 74px;
  padding: 0;
  background: #101820;
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: 14px;
  height: 100%;
}
.header-logo {
  font-size: 1.5rem; line-height: 1; padding: 6px 2px;
  min-width: 110px;            /* Stake-like logo footprint */
}
.header-logo .num { text-shadow: 0 0 12px rgba(255,138,31,.45); }  /* soft glow only */
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-outline { background: #131C26; border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--border-strong); box-shadow: var(--glow-soft); }
.btn-outline .lbl { display: inline; }

/* ---- Sidebar (rail): matte dark teal/charcoal ---- */
.rail {
  background: #101820;
  border-right: 1px solid rgba(255,255,255,.05);   /* subtle, not orange */
  box-shadow: 2px 0 18px rgba(0,0,0,.45);
}
.rail-item .rtile {
  background: #1F3340;                              /* dark blue-charcoal box */
  border: 1px solid rgba(255,255,255,.05);
  color: #8FA3B1;                                   /* soft grey icon */
}
.rail-item span { color: #8FA3B1; }
.rail-item:hover .rtile { background: #263F4D; border-color: rgba(255,255,255,.10); color: #D8E1E8; box-shadow: none; }
.rail-item:hover span { color: #D8E1E8; }
.rail-item.active .rtile { background: rgba(255,138,31,.12); border-color: var(--orange); color: var(--orange); box-shadow: none; }
.rail-item.active span { color: var(--orange); }
.rail-ham { box-shadow: none; }

/* ---- Drawer: matte dark teal/charcoal ---- */
.drawer {
  background: #101820;
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 10px 0 46px rgba(0,0,0,.6);
}
.drawer-top { background: #101820; border-bottom: 1px solid rgba(255,255,255,.06); }
.drawer-link { color: #D8E1E8; }
.drawer-link .di { background: #1F3340; border: 1px solid rgba(255,255,255,.05); color: #8FA3B1; }
.drawer-link:hover { background: #182530; }
.drawer-link:hover .di { background: #263F4D; border-color: rgba(255,255,255,.10); color: var(--orange); }
.drawer-section .label { color: var(--orange); }
.drawer-foot { color: #8FA3B1; border-top: 1px solid rgba(255,255,255,.06); }

/* custom thin scrollbar (dark track, muted orange thumb) */
.drawer::-webkit-scrollbar { width: 7px; }
.drawer::-webkit-scrollbar-track { background: #0c1218; }
.drawer::-webkit-scrollbar-thumb { background: rgba(255,138,31,.45); border-radius: 999px; }
.drawer { scrollbar-width: thin; scrollbar-color: rgba(255,138,31,.45) #0c1218; }

/* ---- Cards: align to palette ---- */
.promo-v3, .cat-card, .plinko-feature, .hotgames-box { background: var(--card); }
.cta-band { background: linear-gradient(135deg, #131A24, #0E131B); }

/* =========================================================
   MAIN BANNER SLIDER (5 images, image-only, compact)
   ========================================================= */
.slider { position: relative; border-radius: 18px; overflow: hidden; }
.slides {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.slide { min-width: 100%; }
.banner-img {
  width: 100%;
  aspect-ratio: 1140 / 360;     /* compact, ECLBET-like */
  max-height: 380px;
  border-radius: 0;             /* slider already rounds the outer frame */
  box-shadow: inset 0 0 0 1px rgba(255,138,31,.14);
}
/* arrows */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,12,17,.55); border: 1px solid rgba(255,255,255,.10); color: #fff;
  backdrop-filter: blur(4px); transition: background .2s, border-color .2s, opacity .2s; opacity: 0;
}
.slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: rgba(255,138,31,.85); border-color: transparent; color: #11151b; }
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow.prev { left: 14px; }
.slider-arrow.next { right: 14px; }
/* dots */
.slider-dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 8px;
}
.slider-dots .dot {
  width: 8px; height: 8px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.30); border: none; transition: width .25s, background .25s;
}
.slider-dots .dot.active { width: 24px; background: var(--orange); }

/* ---- Banner responsive ---- */
@media (max-width: 899px) {
  .banner-img { aspect-ratio: 16 / 6.5; max-height: 300px; }
  .slider-arrow { opacity: 1; width: 36px; height: 36px; }
}
@media (max-width: 600px) {
  .banner-img { aspect-ratio: 16 / 9; max-height: 230px; }
  .slider { border-radius: 14px; }
  .slider-arrow { display: none; }   /* swipe instead on mobile */
}

/* ---- Header responsive ---- */
@media (max-width: 899px) {
  .mobile-ham { display: flex; }
  .topbar { height: 64px; }
  .header-logo { min-width: 0; font-size: 1.35rem; }
}
@media (max-width: 600px) {
  .btn-outline .lbl { display: none; }       /* icon-only contact buttons */
  .btn-outline { padding: 10px; }
}
@media (max-width: 430px) {
  .btn-outline.tg { display: none; }          /* hide Telegram on very small screens */
}


/* =========================================================
   ====  INNER PAGES v7 — match index design  ====
   Makes .media placeholders sit flush in cards on the
   promotions / games / vip pages. (index unaffected.)
   ========================================================= */
.card .media { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,138,31,.10); }
.card-media { width: 100%; aspect-ratio: 16 / 9; }
.vip-badge { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; }
.contact-card .media { display: none; } /* contact cards use icons, not media */


/* =========================================================
   ====  NEUTRAL THEME v8 — Black / Graphite / Orange  ====
   Removes ALL blue/teal undertones from earlier blocks.
   Adds real logo image sizing. Last block — overrides above.
   ========================================================= */

/* ---- Real logo image (replaces text/CSS logo) ---- */
.logo { padding: 0; gap: 0; }
.site-logo-img {
  display: block; object-fit: contain; width: auto; height: auto;
  max-width: 130px; max-height: 48px;     /* desktop header */
}
.drawer-top .site-logo-img { max-width: 120px; max-height: 44px; }
.footer .site-logo-img { max-width: 110px; max-height: 42px; }

/* ---- Header: neutral black charcoal ---- */
.topbar { background: #090A0D; }
.btn-outline { background: #14161A; border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--border-strong); }

/* ---- Sidebar (rail): matte black / graphite ---- */
.rail { background: #08090B; border-right: 1px solid var(--line); }
.rail-item .rtile { background: #14161A; border: 1px solid var(--line); color: var(--muted); }
.rail-item span { color: var(--muted); }
.rail-item:hover .rtile { background: #1A1C20; border-color: rgba(255,255,255,.10); color: #E5E7EB; }
.rail-item:hover span { color: #E5E7EB; }
.rail-item.active .rtile { background: var(--accent-soft, rgba(255,138,31,.12)); border-color: var(--orange); color: var(--orange); }
.rail-item.active span { color: var(--orange); }

/* ---- Drawer: matte black / graphite ---- */
.drawer { background: #08090B; border-right: 1px solid var(--line); }
.drawer-top { background: #08090B; border-bottom: 1px solid var(--line); }
.drawer-link { color: #E5E7EB; }
.drawer-link .di { background: #14161A; border: 1px solid var(--line); color: var(--muted); }
.drawer-link:hover { background: #1A1C20; }
.drawer-link:hover .di { background: #1A1C20; border-color: rgba(255,255,255,.10); color: var(--orange); }
.drawer-foot { color: var(--muted); border-top: 1px solid var(--line); }
.drawer::-webkit-scrollbar-track { background: #08090B; }
.drawer::-webkit-scrollbar-thumb { background: rgba(255,138,31,.45); border-radius: 999px; }
.drawer { scrollbar-color: rgba(255,138,31,.45) #08090B; }

/* ---- Placeholders: black / dark-grey gradient (no blue) ---- */
.media {
  background: linear-gradient(135deg, #0D0F12 0%, #14161A 100%);
  box-shadow: inset 0 0 0 1px rgba(255,138,31,.14);
  color: var(--muted-2);
}
.media .ph-label { color: var(--muted-2); opacity: .95; }

/* ---- Cards: graphite, soft orange border, neutral hover ---- */
.card, .promo-v3, .cat-card, .plinko-feature, .hotgames-box { background: var(--card); border: 1px solid var(--border); }
.card:hover, .promo-v3:hover, .cat-card:hover {
  background: #15171B; border-color: rgba(255,138,31,.35); box-shadow: 0 14px 30px rgba(0,0,0,.45);
}

/* ---- Contact CTA: neutral graphite (no blue) ---- */
.cta-band { background: linear-gradient(135deg, #14161A, #0E0F12); border: 1px solid var(--border); }

/* ---- Plinko modal + popup: neutral surfaces ---- */
.modal { background: linear-gradient(180deg, #101114, #0A0B0E); border: 1px solid var(--border-strong); }
.modal-head { background: #101114; }
.plinko-result { background: rgba(255,255,255,.03); border: 1px solid var(--line); }

/* ---- Floating Plinko button: clean orange, light glow ---- */
.plinko-fab { box-shadow: var(--glow-soft), 0 8px 20px rgba(0,0,0,.5); }

/* ---- Slider arrow hover text on neutral ---- */
.slider-arrow:hover { background: rgba(255,138,31,.85); color: #11130f; }


/* =========================================================
   ====  HOMEPAGE v9 (index.html)  ====
   Quick-action tiles + clearer graphite layer separation.
   Last block — overrides above.
   ========================================================= */

/* ---- Layer separation: header / sidebar / cards distinct ---- */
.topbar { background: #151719; border-bottom: 1px solid rgba(255,255,255,.08); height: 76px; }
.rail { background: #111316; border-right: 1px solid rgba(255,255,255,.08); }
.rail-item .rtile { background: #1A1D21; border: 1px solid rgba(255,255,255,.06); color: #A1A1AA; }
.rail-item span { color: #A1A1AA; }
.rail-item:hover .rtile { background: #23272D; border-color: rgba(255,255,255,.10); color: #FFFFFF; }
.rail-item:hover span { color: #FFFFFF; }
.rail-item.active .rtile { background: #1A1D21; border-color: #FF8A1F; color: #FF8A1F; }
.rail-item.active span { color: #FF8A1F; }

.drawer { background: #111316; border-right: 1px solid rgba(255,255,255,.08); }
.drawer-top { background: #111316; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-link .di { background: #1A1D21; border: 1px solid rgba(255,255,255,.06); color: #A1A1AA; }
.drawer-link:hover { background: #1A1D21; }
.drawer-link:hover .di { background: #23272D; border-color: rgba(255,255,255,.10); color: #FF8A1F; }
.drawer::-webkit-scrollbar-track { background: #111316; }
.drawer::-webkit-scrollbar-thumb { background: rgba(255,138,31,.35); border-radius: 999px; }
.drawer { scrollbar-color: rgba(255,138,31,.35) #111316; }

/* cards sit darker than header/sidebar for depth */
.card, .promo-v3, .cat-card, .plinko-feature, .hotgames-box { background: #101114; border: 1px solid rgba(255,255,255,.06); }
.card:hover, .promo-v3:hover, .cat-card:hover { background: #15171B; border-color: rgba(255,138,31,.32); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.cta-band { background: linear-gradient(135deg, #15171B, #101114); border: 1px solid rgba(255,255,255,.07); }
.btn-outline { background: #1A1D21; border: 1px solid rgba(255,255,255,.08); }
.btn-outline:hover { border-color: var(--border-strong); }

/* (4 coloured quick-action tiles removed — replaced by Follow Us in sidebar) */

/* header height on mobile */
@media (max-width: 899px) { .topbar { height: 64px; } }


/* =========================================================
   ====  HOMEPAGE v10 (index.html)  ====
   Square mobile banner + mobile 6-shortcut grid + info modals.
   Last block — overrides above.
   ========================================================= */

/* ---- Mobile order: square banner ---- */
@media (max-width: 600px) {
  .banner-img { aspect-ratio: 1 / 1; max-height: none; }
  .slider { border-radius: 16px; }
  .slider-arrow { display: flex; opacity: .85; width: 34px; height: 34px; }  /* light arrows on mobile */
}

/* ---- 6 shortcut icons (mobile only, 3 per row) ---- */
.shortcuts-section { padding: 6px 0 4px; display: none; }
.shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shortcut {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 8px; border-radius: 14px; cursor: pointer; text-align: center;
  background: #1A1D21; border: 1px solid rgba(255,255,255,.06); color: #fff;
  transition: background .18s, border-color .18s, transform .15s;
}
.shortcut:active { transform: scale(.97); }
.shortcut:hover { background: #23272D; border-color: var(--le-orange, #FF8A1F); }
.sc-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--le-orange, #FF8A1F); }
.sc-ico svg { width: 26px; height: 26px; }
.sc-label { font-family: 'Inter', system-ui, sans-serif; font-size: .78rem; font-weight: 600; color: #D6D6DA; }
.shortcut:hover .sc-label { color: #fff; }

/* show shortcut grid only on mobile/small-tablet; sidebar covers desktop */
@media (max-width: 899px) { .shortcuts-section { display: block; } }
@media (max-width: 360px) { .shortcuts { grid-template-columns: repeat(3, 1fr); gap: 8px; } .shortcut { padding: 13px 6px; } }

/* ---- Info modals (Deposit / Withdrawal) ---- */
.info-steps { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; padding: 0; counter-reset: step; list-style: none; }
.info-steps li {
  position: relative; padding: 12px 14px 12px 46px; border-radius: 12px;
  background: #15171B; border: 1px solid rgba(255,255,255,.06);
  color: #D6D6DA; font-size: .9rem; line-height: 1.45;
}
.info-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: .8rem;
  color: #1a0e00; background: linear-gradient(135deg, #FFB14A, #FF7A00);
}


/* =========================================================
   ====  HOMEPAGE v11 (index.html)  ====
   Mobile peek carousel + active glow + Follow Us buttons.
   Last block — overrides above.
   ========================================================= */

/* ---- Dots now sit BELOW the slider ---- */
.banner-wrap { width: 100%; }
.slider-dots {
  position: static; transform: none;
  display: flex; justify-content: center; gap: 8px; margin-top: 14px;
}
.slider-dots .dot { width: 8px; height: 8px; border-radius: 999px; background: #3a3d42; border: none; cursor: pointer; transition: width .25s, background .25s; }
.slider-dots .dot.active { width: 24px; background: var(--le-orange, #FF8A1F); }

/* ---- Desktop: one wide banner, no peek, clean active border ---- */
.slide { transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s; }
.slide.is-active .banner-img { box-shadow: inset 0 0 0 1px rgba(255,138,31,.30); }

/* ---- Mobile: center + side-peek carousel ---- */
@media (max-width: 600px) {
  .slider { overflow: hidden; border-radius: 0; background: transparent; box-shadow: none; }
  .slides { gap: 0; }
  .slide { flex: 0 0 80%; padding: 0 0; }       /* 80% center, ~10% peek each side */
  .slide .banner-img {
    aspect-ratio: 1 / 1; max-height: none; border-radius: 17px; overflow: hidden;
    transform: scale(.9); opacity: .6;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s, box-shadow .4s;
    box-shadow: none;
  }
  .slide.is-active .banner-img {
    transform: scale(1); opacity: 1;
    box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 22px rgba(255,138,31,.22);
  }
  /* arrows: dark translucent circles over the sides */
  .slider-arrow { display: flex; opacity: 1; width: 34px; height: 34px; background: rgba(8,9,11,.6); border: 1px solid rgba(255,255,255,.12); }
  .slider-arrow.prev { left: 6px; }
  .slider-arrow.next { right: 6px; }
}

/* ---- Follow Us social buttons (opened sidebar) ---- */
.social-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 48px; padding: 0 14px; margin-bottom: 10px;
  border-radius: 14px; color: #fff;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .16s ease, filter .18s ease;
}
.social-btn:last-child { margin-bottom: 0; }
.social-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.social-btn:active { transform: translateY(0); filter: brightness(.95); }
.social-btn .sb-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.social-btn .sb-ico svg { width: 22px; height: 22px; }
.sb-fb { background: linear-gradient(135deg, #1877F2, #0F5FD1); }
.sb-tg { background: linear-gradient(135deg, #2AABEE, #168AC0); }


/* =========================================================
   ====  HOMEPAGE v12 (index.html)  ====
   Carousel peek fix + mobile Top Promotions scroller + VIP Rank.
   Last block — overrides above.
   ========================================================= */

/* ---- VIP RANK section ---- */
.vip-rank-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.vip-rank-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 12px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.vip-rank-card:hover { transform: translateY(-4px); border-color: rgba(255,138,31,.35); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.vr-badge { width: 60px; height: 60px; border-radius: 50%; flex: none; }
.vr-name { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 1rem; }
.vr-benefit { color: var(--muted); font-size: .77rem; line-height: 1.4; flex: 1; min-height: 32px; }
.vip-rank-card .btn { margin-top: 2px; }
.vr-name.bronze   { color: #CD9B6A; }
.vr-name.silver   { color: #CFD3DA; }
.vr-name.gold     { color: #FFCF6B; }
.vr-name.platinum { color: #E5E7EB; }
.vr-name.diamond  { color: #F6B44B; }
.vr-name.elite    { color: #FF8A1F; }

@media (max-width: 1100px) { .vip-rank-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- MOBILE ---- */
@media (max-width: 600px) {

  /* (1) Banner carousel peek fix:
     base .slide had min-width:100% which blocked the 82% peek width. */
  .slides { gap: 12px; }
  .slide { min-width: 0; flex: 0 0 82%; }

  /* (2) Top Promotions: compact horizontal cards, scroll-snap */
  .promo-row {
    display: flex; grid-template-columns: none;
    overflow-x: auto; gap: 12px; padding: 2px 0 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .promo-row::-webkit-scrollbar { height: 0; }
  .promo-v3 {
    flex-direction: row; align-items: stretch;
    flex: 0 0 86%; min-width: 300px; max-width: 330px; min-height: 150px;
    scroll-snap-align: start;
  }
  .promo-v3 .promo-img { flex: 0 0 112px; width: 112px; height: auto; align-self: stretch; aspect-ratio: auto; border-radius: 12px; }
  .promo-v3-info { justify-content: center; }

  /* (3) VIP Rank: horizontal scroll carousel of small cards */
  .vip-rank-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; gap: 12px; padding-bottom: 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .vip-rank-grid::-webkit-scrollbar { height: 0; }
  .vip-rank-card { flex: 0 0 162px; min-width: 162px; scroll-snap-align: start; }
}


/* =========================================================
   ====  SIDEBAR v13 — drawer menu active state  ====
   ========================================================= */
.drawer-link.active { color: var(--orange); background: rgba(255,138,31,.08); border-color: var(--border); }
.drawer-link.active .di { color: var(--orange); border-color: var(--border-strong); }


/* =========================================================
   ====  BANNER REAL IMAGES (index.html)  ====
   A slide with a real photo: image fills the slide shape
   (wide on PC, square on mobile) via object-fit: cover.
   ========================================================= */
.banner-img.has-img { background: none; box-shadow: none; padding: 0; border: none; }
.banner-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; }
/* keep the active-slide frame visible around a real image */
.slide.is-active .banner-img.has-img { box-shadow: inset 0 0 0 1px rgba(255,138,31,.30); }
@media (max-width: 600px) {
  .slide.is-active .banner-img.has-img { box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 22px rgba(255,138,31,.22); }
}


/* =========================================================
   ====  BANNER <picture> sizing (PC vs mobile swap)  ====
   ========================================================= */
.banner-img.has-img picture { display: block; width: 100%; height: 100%; }
.banner-img.has-img picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; }


/* =========================================================
   ====  MOBILE HEADER — centered logo (PC unchanged)  ====
   ========================================================= */
@media (max-width: 899px) {
  .topbar-inner { position: relative; }
  .header-logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}


/* =========================================================
   ====  PROMOTIONS PAGE v14 — Stake-style promo library  ====
   ========================================================= */
.promo-top { padding: 34px 0 0; }
.promo-page-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 18px; }

/* category filter bar */
.promo-filter {
  display: flex; width: fit-content; max-width: 100%; gap: 6px; padding: 6px;
  background: #0D0F12; border: 1px solid var(--line); border-radius: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.promo-filter::-webkit-scrollbar { height: 0; }
.pf-tab {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: .86rem;
  color: var(--muted); white-space: nowrap; transition: color .18s, background .18s;
}
.pf-tab:hover { color: #fff; }
.pf-tab.active { background: #1A1D21; color: var(--orange); }

/* promo grid + tiles */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; margin-top: 20px; }
.promo-tile {
  display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.promo-tile:hover { transform: translateY(-4px); border-color: rgba(255,138,31,.35); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.pt-img { height: 150px; border-radius: 0; }
.pt-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pt-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-desc { color: var(--muted); font-size: .8rem; flex: 1; }
.pt-btn { align-self: flex-start; margin-top: 2px; }
.promo-grid .hide { display: none; }

/* badges */
.promo-badge { font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: 3px 7px; border-radius: 5px; text-transform: uppercase; background: rgba(255,138,31,.14); color: var(--orange); }
.promo-badge.hot { background: linear-gradient(135deg, #FFA23D, #FF6A00); color: #1a0e00; }
.promo-badge.new { background: linear-gradient(135deg, #FF4D4D, #C01010); color: #fff; }

/* promo modal */
.pm-img { height: 170px; border-radius: 12px; margin-bottom: 14px; }
.pm-badges { display: flex; gap: 6px; margin-bottom: 16px; }
.pm-section { margin-bottom: 14px; }
.pm-section h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--orange); margin-bottom: 5px; }
.pm-section p { color: #D6D6DA; font-size: .9rem; line-height: 1.5; }
.pm-section ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pm-section ul li { color: var(--muted); font-size: .86rem; padding-left: 16px; position: relative; line-height: 1.45; }
.pm-section ul li::before { content: '•'; position: absolute; left: 2px; color: var(--orange); }

/* responsive */
/* responsive — auto-fill handles column count; force single column on phones */
@media (max-width: 600px)  {
  .promo-top { padding: 22px 0 0; }
  .promo-grid { grid-template-columns: 1fr; }
  .pt-img { height: 150px; }
}


/* =========================================================
   ====  PLINKO GAME v15 — interactive controlled drop  ====
   ========================================================= */
.plinko-modal { max-width: 460px; }

.plinko-board {
  position: relative; width: 100%; aspect-ratio: 5 / 6; margin: 0 auto 14px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #18151F 0%, #0C0D11 55%, #08090C 100%);
  border: 1px solid rgba(255,138,31,.35);
  box-shadow: inset 0 0 50px rgba(0,0,0,.6), 0 0 24px rgba(255,138,31,.12);
}

/* pegs */
.plinko-pegs { position: absolute; inset: 0; }
.plinko-peg {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #FFC98A 55%, #FF8A1F 100%);
  box-shadow: 0 0 6px rgba(255,160,60,.7), 0 0 12px rgba(255,138,31,.35);
}

/* ball */
.plinko-ball {
  position: absolute; left: 50%; top: 3%; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 4; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #FFF4D6, #FFD479 45%, #FF9A1F 100%);
  box-shadow: 0 0 10px rgba(255,196,90,.95), 0 0 22px rgba(255,138,31,.7), 0 0 36px rgba(255,138,31,.35);
}

/* prize slots */
.plinko-slots { position: absolute; left: 0; right: 0; bottom: 0; height: 19%; display: flex; gap: 3px; padding: 0 4px 5px; }
.plinko-slot {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px 8px 9px 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  border: 1px solid var(--gc); border-top-width: 2px;
  box-shadow: inset 0 -8px 14px -8px var(--gc);
  transition: transform .15s, box-shadow .25s, background .25s;
}
.plinko-slot span {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: .9rem;
  color: #fff; text-shadow: 0 0 8px var(--gc);
}
.plinko-slot.win {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 35%, transparent), rgba(0,0,0,.2));
  box-shadow: 0 0 16px var(--gc), inset 0 0 14px -4px var(--gc);
  animation: plinkoWin .5s ease;
}
.plinko-slot.win span { transform: scale(1.18); }
@keyframes plinkoWin {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* result + button */
.plinko-result {
  text-align: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 700;
  font-size: 1rem; color: var(--text); padding: 10px; margin-bottom: 12px;
  background: #15171B; border: 1px solid var(--line); border-radius: 12px;
}
.plinko-result strong { color: var(--orange); font-size: 1.15rem; }
.plinko-drop { font-size: 1rem; }
.plinko-drop:disabled { opacity: .6; cursor: default; }

@media (max-width: 600px) {
  .plinko-board { aspect-ratio: 5 / 6; }
  .plinko-ball { width: 15px; height: 15px; }
  .plinko-peg { width: 6px; height: 6px; }
  .plinko-slot span { font-size: .78rem; }
}


/* =========================================================
   ====  PLINKO v16 — premium casino machine  ====
   (overrides the v15 board/ball/slot/result rules)
   ========================================================= */
.plinko-modal { max-width: 470px; }

/* board = coordinate layer (transparent); machine = trapezoid body */
.plinko-board {
  position: relative; width: 100%; aspect-ratio: 1 / 1.12; margin: 0 auto 14px;
  background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.plinko-machine {
  position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(9% 0, 91% 0, 100% 80%, 100% 100%, 0 100%, 0 80%);
  background: linear-gradient(180deg, rgba(255,138,31,.6), rgba(255,138,31,.16) 32%, rgba(255,138,31,.08));
  filter: drop-shadow(0 0 18px rgba(255,138,31,.22));
}
.plinko-machine::after {
  content: ""; position: absolute; inset: 2px;
  clip-path: polygon(9% 0, 91% 0, 100% 80%, 100% 100%, 0 100%, 0 80%);
  background:
    radial-gradient(135% 75% at 50% -8%, #21232C 0%, #15161C 46%, #0A0B0F 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.05);
}
/* top drop chute */
.plinko-chute {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 16%; height: 4%; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #2a2d36, #15161c);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.6), 0 0 10px rgba(255,138,31,.25);
}

/* pegs */
.plinko-pegs { position: absolute; inset: 0; z-index: 2; }
.plinko-peg {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #FFD9A6 50%, #FF8A1F 100%);
  box-shadow: 0 0 5px rgba(255,170,70,.65), 0 0 10px rgba(255,138,31,.3);
}

/* ball + trail */
.plinko-ball {
  position: absolute; left: 50%; top: 3%; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 5; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #FFF6DC, #FFD479 45%, #FF9A1F 100%);
  box-shadow: 0 0 10px rgba(255,200,100,.95), 0 0 22px rgba(255,138,31,.7), 0 0 40px rgba(255,138,31,.35);
}
.plinko-trail {
  position: absolute; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%);
  z-index: 4; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,140,.75), rgba(255,138,31,0) 65%);
  animation: trailFade .48s ease forwards;
}
@keyframes trailFade { from { opacity: .7; } to { opacity: 0; transform: translate(-50%, -50%) scale(.35); } }

/* landing sparkle */
.plinko-spark { position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; opacity: 0; }
.plinko-spark::before, .plinko-spark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,160,.95) 0%, rgba(255,138,31,.5) 35%, rgba(255,138,31,0) 70%);
}
.plinko-spark::after {
  background:
    conic-gradient(from 0deg, rgba(255,220,150,0) 0deg, rgba(255,220,150,.9) 12deg, rgba(255,220,150,0) 24deg,
    rgba(255,220,150,0) 90deg, rgba(255,220,150,.9) 102deg, rgba(255,220,150,0) 114deg,
    rgba(255,220,150,0) 180deg, rgba(255,220,150,.9) 192deg, rgba(255,220,150,0) 204deg,
    rgba(255,220,150,0) 270deg, rgba(255,220,150,.9) 282deg, rgba(255,220,150,0) 294deg);
}
.plinko-spark.go { animation: sparkBurst .6s ease-out; }
@keyframes sparkBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(40deg); }
}

/* 3D prize pockets */
.plinko-slots { position: absolute; left: 0; right: 0; bottom: 0; height: 21%; display: flex; gap: 4px; padding: 0 6px 6px; z-index: 3; }
.plinko-slot {
  flex: 1 1 0; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  border-radius: 6px 6px 11px 11px;
  background: linear-gradient(180deg, #1b1d24 0%, #0d0e12 100%);
  border: 1px solid color-mix(in srgb, var(--gc) 55%, #262932);
  border-top: 2px solid var(--gc);
  box-shadow: inset 0 7px 11px -7px rgba(255,255,255,.14), inset 0 -12px 16px -9px var(--gc), 0 0 0 1px rgba(0,0,0,.4);
}
.plinko-slot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.09), transparent); }
.plinko-slot span { position: relative; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: .92rem; color: #fff; text-shadow: 0 0 8px var(--gc); }
.plinko-slot.win { animation: plinkoWin .55s ease; }
.plinko-slot.win::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 20px var(--gc), inset 0 0 18px -2px var(--gc); }
@keyframes plinkoWin {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(3px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
/* special 88 jackpot */
.plinko-slot.jackpot {
  border-top-color: #FFCB4D;
  background: linear-gradient(180deg, #2c2213 0%, #120c05 100%);
  box-shadow: inset 0 7px 11px -7px rgba(255,235,180,.3), inset 0 -16px 20px -9px #FFB01F, 0 0 16px rgba(255,176,31,.55);
}
.plinko-slot.jackpot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 14px -3px rgba(255,200,90,.7); animation: jackpotPulse 2.2s ease-in-out infinite; }
.plinko-slot.jackpot span { font-size: 1.06rem; color: #FFE0A0; text-shadow: 0 0 10px #FFB01F; }
@keyframes jackpotPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* status / result box */
.plinko-status { text-align: center; background: #15171B; border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; margin-bottom: 12px; }
.ps-main { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--text); letter-spacing: .01em; line-height: 1.35; }
.ps-main .ps-num { display: inline-block; margin-left: 7px; font-size: 1.5rem; font-weight: 800; color: var(--orange); text-shadow: 0 0 12px rgba(255,138,31,.5); vertical-align: -3px; }
.ps-sub { margin-top: 5px; font-size: .8rem; color: var(--muted); min-height: 1em; }

/* button */
.plinko-drop-btn { font-size: 1rem; letter-spacing: .02em; }
.plinko-drop-btn:disabled { opacity: .65; cursor: not-allowed; filter: grayscale(.15); }

/* tighter on mobile (reduce height) */
@media (max-width: 600px) {
  .plinko-modal { max-width: none; }
  .plinko-board { aspect-ratio: 1 / 1.04; }
  .plinko-ball { width: 15px; height: 15px; }
  .plinko-peg { width: 5px; height: 5px; }
  .plinko-status { padding: 11px 10px; margin-bottom: 10px; }
  .ps-main { font-size: .95rem; }
  .ps-main .ps-num { font-size: 1.3rem; }
  .plinko-slot span { font-size: .8rem; }
  .plinko-slot.jackpot span { font-size: .92rem; }
}


/* =========================================================
   ====  PLINKO v17 — persisted daily result display  ====
   ========================================================= */
.plinko-result-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: .9rem; color: var(--muted); }
.plinko-result-number {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 2.5rem; line-height: 1.05;
  margin: 3px 0; color: #FFB44B; text-shadow: 0 0 18px rgba(255,138,31,.5); letter-spacing: .01em;
}
.ps-sub .ps-contact { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted-2); }
@media (max-width: 600px) { .plinko-result-number { font-size: 2rem; } }


/* =========================================================
   ====  PLINKO FAB — real image button  ====
   ========================================================= */
.plinko-fab { overflow: hidden; padding: 0; border-radius: 16px; }
.plinko-fab .fab-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }

/* dismissible wrap + corner close button */
.plinko-fab-wrap { position: fixed; right: 22px; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 70; }
.plinko-fab-wrap .plinko-fab { position: relative; right: auto; bottom: auto; z-index: auto; width: 72px; height: 72px; }
.plinko-fab-close {
  position: absolute; top: -7px; right: -7px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #15171B; color: #fff; border: 1px solid var(--border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,.55); cursor: pointer; transition: background .15s, color .15s;
}
.plinko-fab-close svg { width: 12px; height: 12px; }
.plinko-fab-close:hover { background: #23272D; color: var(--orange); }
@media (max-width: 600px) {
  .plinko-fab-wrap { right: 14px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .plinko-fab-wrap .plinko-fab { width: 76px; height: 76px; }
}


/* =========================================================
   ====  PROMO DETAIL MODAL v18 — premium casino popup  ====
   ========================================================= */
.promo-modal2 {
  max-width: 760px;
  border: 1px solid rgba(255,138,31,.35);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,138,31,.13), transparent 38%),
    linear-gradient(180deg, #111318, #090A0D);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 26px rgba(255,138,31,.12);
}

/* hero image placeholder */
.promo-modal-hero { margin-bottom: 16px; }
.promo-modal-img {
  position: relative; height: 200px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,138,31,.32);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,138,31,.10), transparent 55%),
    linear-gradient(180deg, #15171C, #0C0D11);
  box-shadow: inset 0 0 40px rgba(0,0,0,.55), 0 0 16px rgba(255,138,31,.10);
}
.promo-modal-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45));
  pointer-events: none;
}
.promo-modal-img .ph-label { position: relative; z-index: 1; }
.promo-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* badges row */
.promo-modal2 .pm-badges { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* info cards grid */
.pm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.pm-card-wide { grid-column: 1 / -1; }
.pm-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  background: #12151A; border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.pm-card:hover { border-color: rgba(255,138,31,.35); background: #171A20; box-shadow: 0 0 18px rgba(255,138,31,.10); }
.pm-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); background: rgba(255,138,31,.12);
  border: 1px solid rgba(255,138,31,.30); box-shadow: 0 0 12px rgba(255,138,31,.12);
}
.pm-ico svg { width: 19px; height: 19px; }
.pm-c-text { min-width: 0; }
.pm-c-label { font-family: 'Inter', system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.pm-c-main { font-family: 'Inter', system-ui, sans-serif; font-size: .98rem; font-weight: 600; color: #fff; line-height: 1.4; }
.pm-c-notes { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.pm-c-notes li { position: relative; padding-left: 16px; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.pm-c-notes li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

/* action buttons */
.pm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm-btn { display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 14px; font-weight: 700; font-size: 1rem; }
.pm-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* responsive */
@media (max-width: 600px) {
  .promo-modal2 { border-radius: 20px; }
  .promo-modal-img { height: 150px; }
  .pm-cards { grid-template-columns: 1fr; }
  .pm-card-wide { grid-column: auto; }
  .pm-actions { grid-template-columns: 1fr 1fr; }
  .pm-btn { height: 48px; font-size: .92rem; }
}


/* promo tile real image fill */
.pt-img img, .pt-photo { width: 100%; height: 100%; object-fit: cover; display: block; }


/* =========================================================
   ====  PROMO IMAGE RATIO v19 — match 1200x480 (2.5:1)  ====
   so object-fit:cover shows the full art with no side crop
   ========================================================= */
.pt-img { height: auto; aspect-ratio: 5 / 2; }
.promo-modal-img { height: auto; aspect-ratio: 5 / 2; }
@media (max-width: 600px) {
  .pt-img { height: auto; aspect-ratio: 5 / 2; }
  .promo-modal-img { height: auto; aspect-ratio: 5 / 2; }
}


/* homepage Top Promotions square image fill */
.promo-img img, .promo-photo { width: 100%; height: 100%; object-fit: cover; display: block; }


/* =========================================================
   ====  HOMEPAGE PLINKO FEATURE CARD v20  ====
   ========================================================= */
.plinko-feature2 {
  display: grid; grid-template-columns: 40% 60%; gap: 24px; align-items: center;
  background: linear-gradient(180deg, #101114, #0B0C0F);
  border: 1px solid rgba(255,138,31,.25); border-radius: 22px;
  padding: 26px; min-height: 320px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.4);
  transition: border-color .25s, box-shadow .25s;
}
.plinko-feature2:hover { border-color: rgba(255,138,31,.40); box-shadow: inset 0 0 40px rgba(0,0,0,.4), 0 0 26px rgba(255,138,31,.10); }

.pf2-content { display: flex; flex-direction: column; gap: 12px; }
.pf2-kicker {
  align-self: flex-start; font-family: 'Inter', system-ui, sans-serif;
  font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--orange); background: rgba(255,138,31,.12);
  border: 1px solid rgba(255,138,31,.30); padding: 4px 11px; border-radius: 999px;
}
.pf2-title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.1; }
.pf2-desc { color: var(--muted); font-size: .95rem; }
.pf2-meta { font-size: .8rem; color: var(--muted-2); }
.pf2-prizes { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; }
.pf2-prizes span {
  min-width: 34px; text-align: center; padding: 6px 10px; border-radius: 9px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: .85rem;
  color: #fff; background: #15171B; border: 1px solid var(--line);
}
.pf2-prizes .jackpot {
  color: #FFD98A; border-color: rgba(255,176,31,.6);
  background: linear-gradient(180deg, #241C0F, #15110A); box-shadow: 0 0 12px rgba(255,176,31,.30);
}
.pf2-btn { align-self: flex-start; margin-top: 4px; }

.pf2-preview { height: 100%; }
.pf2-media {
  width: 100%; height: 100%; min-height: 248px; border-radius: 16px;
  border: 1px solid rgba(255,138,31,.25);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,138,31,.09), transparent 55%),
    linear-gradient(180deg, #15171C, #0C0D11);
  box-shadow: inset 0 0 36px rgba(0,0,0,.5);
}
.pf2-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }

@media (max-width: 860px) {
  .plinko-feature2 { grid-template-columns: 1fr; min-height: 0; padding: 18px; gap: 16px; }
  .pf2-preview { order: -1; }                 /* image on top */
  .pf2-media { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .pf2-btn { align-self: stretch; text-align: center; }
}


/* =========================================================
   ====  HOMEPAGE PLINKO FEATURE v21 — CSS machine preview  ====
   ========================================================= */
.plinko-feature2 {
  grid-template-columns: 40% 60%;
  background: linear-gradient(135deg, #101114, #070708);
  border: 1px solid rgba(255,138,31,.28);
  border-radius: 24px; padding: 36px; min-height: 384px;
}
.pf2-accent { color: var(--orange); }
.pf2-btn { min-width: 170px; }

/* right preview — fake premium Plinko machine */
.pf2-preview { height: 100%; }
.pf2-board {
  position: relative; height: 100%; min-height: 312px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,138,31,.32);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,138,31,.14), transparent 55%),
    linear-gradient(180deg, #15171C, #0A0B0E);
  box-shadow: inset 0 0 55px rgba(0,0,0,.6), 0 0 22px rgba(255,138,31,.08);
  display: flex; align-items: flex-end; justify-content: center;
}
/* trapezoid machine face with peg-dot grid */
.pf2-face {
  position: absolute; left: 9%; right: 9%; top: 26%; bottom: 26%;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(255,206,140,.5) 1.4px, transparent 1.9px) 0 0 / 26px 24px,
    linear-gradient(180deg, rgba(255,138,31,.06), transparent 70%);
  border-top: 2px solid rgba(255,138,31,.45);
}
.pf2-logo {
  position: absolute; top: 12%; left: 0; right: 0; text-align: center; z-index: 3;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 900; letter-spacing: .34em;
  font-size: 1.5rem; color: #FFB44B; text-shadow: 0 0 18px rgba(255,138,31,.55);
}
.pf2-ball {
  position: absolute; top: 23%; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF4D6, #FFD479 45%, #FF9A1F 100%);
  box-shadow: 0 0 10px rgba(255,196,90,.9), 0 0 20px rgba(255,138,31,.6);
}
.pf2-slots { position: relative; z-index: 3; display: flex; gap: 5px; width: 84%; margin-bottom: 16px; }
.pf2-slots span {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 6px 6px 9px 9px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: .8rem; color: #fff;
  background: linear-gradient(180deg, #1b1d24, #0e0f13);
  border: 1px solid color-mix(in srgb, var(--gc) 55%, #262932); border-top: 2px solid var(--gc);
  box-shadow: inset 0 -10px 14px -9px var(--gc); text-shadow: 0 0 7px var(--gc);
}
.pf2-slots .j {
  background: linear-gradient(180deg, #2c2213, #120c05); border-top-color: #FFCB4D;
  color: #FFE0A0; box-shadow: inset 0 -14px 18px -9px #FFB01F, 0 0 14px rgba(255,176,31,.5);
}

@media (max-width: 860px) {
  .plinko-feature2 { grid-template-columns: 1fr; min-height: 0; padding: 18px; gap: 16px; }
  .pf2-preview { order: -1; }
  .pf2-board { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .pf2-logo { font-size: 1.25rem; }
  .pf2-btn { width: 100%; align-self: stretch; }
}


/* =========================================================
   ====  HOMEPAGE PLINKO v22 — image area + premium chips  ====
   (right side is an IMAGE FRAME only; no CSS board)
   ========================================================= */
/* right: image preview frame (or clean fallback) */
.pf2-img {
  width: 100%; height: 100%; min-height: 312px; object-fit: cover; display: block;
  border-radius: 18px; border: 1px solid rgba(255,138,31,.30);
  box-shadow: inset 0 0 30px rgba(0,0,0,.4), 0 0 18px rgba(255,138,31,.08);
}
.pf2-ph {
  display: none; width: 100%; height: 100%; min-height: 312px;
  align-items: center; justify-content: center; border-radius: 18px;
  color: var(--muted-2); font-size: .9rem; letter-spacing: .02em;
  border: 1px solid rgba(255,138,31,.30);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,138,31,.07), transparent 55%),
    linear-gradient(180deg, #15171C, #0C0D11);
  box-shadow: inset 0 0 30px rgba(0,0,0,.45);
}

/* left: premium prize chips */
.pf2-chip {
  position: relative; min-width: 38px; text-align: center; padding: 8px 11px; border-radius: 11px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: .86rem; color: #fff;
  background: linear-gradient(180deg, #1c1f26, #0e0f13);
  border: 1px solid color-mix(in srgb, var(--cg) 45%, #2a2d36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 12px -8px var(--cg),
    0 4px 10px rgba(0,0,0,.4),
    0 0 10px -2px var(--cg);
  text-shadow: 0 0 8px var(--cg);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pf2-chip:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 12px -8px var(--cg),
    0 9px 18px rgba(0,0,0,.5),
    0 0 16px -1px var(--cg);
}
.pf2-chip.c-red    { --cg: #FF5A3C; }
.pf2-chip.c-purple { --cg: #7B8CFF; }
.pf2-chip.c-violet { --cg: #9B6BFF; }
.pf2-chip.c-green  { --cg: #36E07F; }
.pf2-chip.c-cyan   { --cg: #2FD0FF; }
.pf2-chip.c-jackpot {
  --cg: #FFB01F; color: #FFE0A0; border-color: #FFCB4D;
  background: linear-gradient(180deg, #2C2213, #120C05);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,.15),
    inset 0 -10px 14px -8px #FFB01F,
    0 4px 12px rgba(0,0,0,.45),
    0 0 16px rgba(255,176,31,.5);
}

@media (max-width: 860px) {
  .pf2-img, .pf2-ph { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
}


/* =========================================================
   ====  HOMEPAGE PLINKO v23 — mobile: image without frame  ====
   ========================================================= */
@media (max-width: 860px) {
  .pf2-img {
    border: none; box-shadow: none; border-radius: 12px; background: transparent;
    object-fit: contain; aspect-ratio: auto; height: auto; min-height: 0; width: 100%;
  }
}


/* =========================================================
   ====  HOMEPAGE PLINKO v24 — larger left content on PC  ====
   ========================================================= */
@media (min-width: 861px) {
  .pf2-content { gap: 16px; }
  .pf2-kicker  { font-size: .72rem; padding: 5px 13px; }
  .pf2-title   { font-size: clamp(2rem, 3vw, 2.6rem); }
  .pf2-desc    { font-size: 1.1rem; }
  .pf2-meta    { font-size: .92rem; }
  .pf2-prizes  { gap: 9px; margin: 4px 0 6px; }
  .pf2-chip    { min-width: 46px; padding: 11px 14px; font-size: 1.02rem; border-radius: 13px; }
  .pf2-btn     { min-width: 190px; padding: 14px 28px; font-size: 1.05rem; }
}


/* =========================================================
   ====  VIP TIER NAME COLOURS v25 — match promo image  ====
   (applies to index .vr-name and vip.html .tier-name)
   ========================================================= */
.vr-name.bronze,   .tier-name.tier-bronze   { color: #E0913F; }  /* copper */
.vr-name.silver,   .tier-name.tier-silver   { color: #CBD2DB; }  /* silver */
.vr-name.gold,     .tier-name.tier-gold     { color: #FFC845; }  /* gold */
.vr-name.platinum, .tier-name.tier-platinum { color: #C49BFF; }  /* purple */
.vr-name.diamond,  .tier-name.tier-diamond  { color: #A2DCFF; }  /* icy blue */
.vr-name.elite,    .tier-name.tier-elite    { color: #FFC845; }  /* gold */
.vr-name, .tier-name { text-shadow: 0 0 14px color-mix(in srgb, currentColor 40%, transparent); }


/* =========================================================
   ====  VIP PAGE v26 — calculator / ladder / cards / modal  ====
   ========================================================= */
.vip-hero { text-align: center; padding: 40px 0 14px; }
.vip-kicker { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); background: rgba(255,138,31,.12); border: 1px solid rgba(255,138,31,.3); padding: 5px 13px; border-radius: 999px; margin-bottom: 12px; }
.vip-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
.vip-hero p { color: var(--muted); margin-top: 8px; }

/* calculator */
.vip-calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch;
  background: linear-gradient(135deg, #101114, #0a0b0e); border: 1px solid rgba(255,138,31,.25);
  border-radius: 22px; padding: 24px;
}
.vc-left h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; }
.vc-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 8px; letter-spacing: .02em; }
.vc-input { display: flex; align-items: stretch; background: #15171B; border: 1px solid var(--border-strong); border-radius: 13px; overflow: hidden; }
.vc-prefix { display: flex; align-items: center; padding: 0 14px; font-weight: 800; color: var(--orange); background: rgba(255,138,31,.08); border-right: 1px solid var(--line); }
.vc-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 1.2rem; font-weight: 700; padding: 14px 16px; }
.vc-input input::-webkit-outer-spin-button, .vc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vc-input input[type=number] { -moz-appearance: textfield; }
.vc-input:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,138,31,.12); }
.vc-hint { margin-top: 10px; font-size: .82rem; color: var(--muted-2); }

.vc-right { background: #101114; border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vc-badge { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 10px; position: relative; overflow: hidden; }
.vc-rank { font-size: 1.25rem; font-weight: 800; }
.vc-range { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.vc-progresswrap { width: 100%; margin-top: 14px; }
.vc-progress { width: 100%; height: 10px; border-radius: 999px; background: #1d2026; overflow: hidden; border: 1px solid var(--line); }
.vc-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--orange); transition: width .35s cubic-bezier(.4,0,.2,1), background .35s; }
.vc-progress-text { margin-top: 8px; font-size: .85rem; font-weight: 700; color: #fff; }
.vc-need { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* rank ladder */
.vip-ladder { display: flex; gap: 6px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.vip-ladder::-webkit-scrollbar { height: 0; }
.vl-step { flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: #101114; border: 1px solid var(--line); }
.vl-dot { width: 14px; height: 14px; border-radius: 50%; background: #2a2d36; border: 1px solid rgba(255,255,255,.1); }
.vl-name { font-size: .78rem; font-weight: 700; color: var(--muted-2); }
.vl-step.done .vl-dot    { background: var(--c); }
.vl-step.done .vl-name   { color: #fff; }
.vl-step.current { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); background: #14161a; }
.vl-step.current .vl-dot { background: var(--c); box-shadow: 0 0 10px var(--c); }
.vl-step.current .vl-name{ color: var(--c); }
.vl-step.next { border-color: rgba(255,138,31,.4); }
.vl-step.next .vl-name { color: var(--orange); }

/* tier cards */
.vip-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vip-tier-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 20px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.vip-tier-card:hover { transform: translateY(-4px); border-color: rgba(255,138,31,.35); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.vt-badge { width: 76px; height: 76px; border-radius: 50%; position: relative; overflow: hidden; margin-bottom: 4px; }
.vt-name { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.vt-range { font-size: .85rem; color: var(--muted); }
.vt-reward { font-size: .82rem; color: var(--muted-2); }
.vt-reward strong { color: #fff; }
.vt-btn { margin-top: 8px; }

/* badge image fill + placeholder */
.vbadge-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbadge-ph { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; letter-spacing: .04em; color: var(--muted-2); }
.media .ph-label { font-size: .6rem; }
.vc-badge .ph-label, .vt-badge .ph-label, .vm-badge .ph-label { font-size: .62rem; }

/* benefits row */
.vip-benefit-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.vbenefit { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s; }
.vbenefit:hover { border-color: rgba(255,138,31,.3); }
.vb-ico { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--orange); background: rgba(255,138,31,.12); border: 1px solid rgba(255,138,31,.3); }
.vb-ico svg { width: 20px; height: 20px; }
.vb-t { font-size: .85rem; font-weight: 700; }

/* CTA */
.vip-cta { text-align: center; background: linear-gradient(135deg, #101114, #0a0b0e); border: 1px solid rgba(255,138,31,.25); border-radius: 20px; padding: 28px 22px; }
.vip-cta h2 { font-size: 1.4rem; font-weight: 800; }
.vip-cta p { color: var(--muted); margin: 6px 0 16px; }
.vip-cta-btns { display: flex; gap: 12px; justify-content: center; }
.vip-cta-btns .btn { min-width: 150px; height: 48px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* benefit modal */
.vip-modal { max-width: 520px; }
.vm-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vm-badge { width: 70px; height: 70px; border-radius: 50%; position: relative; overflow: hidden; flex: 0 0 auto; }
.vm-range { font-size: .9rem; color: var(--muted); }
.vm-reward { margin-top: 6px; }
.vm-reward span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--orange); }
.vm-reward strong { font-size: 1.2rem; color: #fff; }
.vm-sec { margin-bottom: 14px; }
.vm-sec h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--orange); margin-bottom: 6px; }
.vm-sec p { color: #D6D6DA; font-size: .9rem; }
.vm-sec ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vm-sec ul li { position: relative; padding-left: 16px; font-size: .88rem; color: var(--muted); }
.vm-sec ul li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

/* responsive */
@media (max-width: 900px) { .vip-benefit-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .vip-tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .vip-calc { grid-template-columns: 1fr; padding: 18px; }
  .vip-benefit-row { grid-template-columns: repeat(2, 1fr); }
  .vl-step { min-width: 84px; }
  .vip-cta-btns { flex-direction: column; }
  .vip-cta-btns .btn { width: 100%; }
}
@media (max-width: 380px) { .vip-tier-grid { grid-template-columns: 1fr; } }


/* =========================================================
   ====  VIP CALCULATOR v27 — dynamic theme + mobile fix  ====
   ========================================================= */
/* prevent any horizontal overflow site-wide */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* dynamic result-card rank theme */
.vip-result--none     { --rank-color: #6B7280; }
.vip-result--bronze   { --rank-color: #CD7F32; }
.vip-result--silver   { --rank-color: #B0B8C4; }
.vip-result--gold     { --rank-color: #D4AF37; }
.vip-result--platinum { --rank-color: #D8DDE5; }
.vip-result--diamond  { --rank-color: #90D5F0; }
.vip-result--elite    { --rank-color: #DDA0D8; }

.vip-result-card {
  --rank-color: #6B7280;
  border: 1px solid color-mix(in srgb, var(--rank-color), transparent 55%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--rank-color), transparent 84%), transparent 46%),
    linear-gradient(180deg, #111318, #08090B);
  transition: border-color .3s, background .3s;
}
.vip-result-card .vc-rank { color: var(--rank-color); transition: color .3s; }
.vip-result-card .vc-progress span { background: var(--rank-color); }
.vip-result-card .vc-badge {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rank-color), transparent 45%),
              0 0 16px color-mix(in srgb, var(--rank-color), transparent 72%);
}

/* calculator layout: controlled width, no overflow */
.vip-calc { max-width: 1180px; margin: 0 auto; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); }
.vc-left, .vc-right { min-width: 0; }
.vc-input { min-width: 0; }
.vc-input input { min-width: 0; width: 100%; }

@media (max-width: 900px) {
  .vip-calc { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .vip-calc { padding: 20px; border-radius: 20px; gap: 18px; }
  .vc-right { width: 100%; padding: 18px; }
  .vip-hero { padding: 42px 18px 24px; text-align: center; }
  .vip-hero h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; max-width: 100%; }
  .vip-hero p { font-size: 15px; max-width: 320px; margin-left: auto; margin-right: auto; }
  .vc-input input { font-size: 16px; }   /* >=16px stops iOS zoom */
  .vc-prefix { padding: 0 14px; }
}
@media (max-width: 420px) {
  .vip-calc { padding: 16px; }
  .vc-right { padding: 16px; }
}


/* =========================================================
   ====  VIP RANK LADDER v28 — per-rank themes + auto-scroll ====
   ========================================================= */
.vip-rank-ladder-scroll {
  width: 100%;
  margin-top: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.vip-rank-ladder-scroll::-webkit-scrollbar { height: 0; }
.vip-rank-ladder { display: flex; gap: 10px; min-width: max-content; }

.vip-ladder-item {
  --rank-color: #FF8A1F;
  flex: 0 0 auto;
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.04), transparent 45%),
    #111318;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease, opacity .25s ease;
}
.vip-ladder-item--bronze   { --rank-color: #CD7F32; }
.vip-ladder-item--silver   { --rank-color: #B0B8C4; }
.vip-ladder-item--gold     { --rank-color: #D4AF37; }
.vip-ladder-item--platinum { --rank-color: #D8DDE5; }
.vip-ladder-item--diamond  { --rank-color: #90D5F0; }
.vip-ladder-item--elite    { --rank-color: #DDA0D8; }

.vip-ladder-dot {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--rank-color); opacity: .5; margin: 0 auto 8px;
  transition: opacity .25s, box-shadow .25s;
}
.vip-ladder-name {
  display: block; font-weight: 800; font-size: .85rem;
  color: color-mix(in srgb, var(--rank-color), #6B7280 55%);
  transition: color .25s;
}

/* completed (ranks already passed) */
.vip-ladder-item.is-completed { border-color: color-mix(in srgb, var(--rank-color), transparent 65%); }
.vip-ladder-item.is-completed .vip-ladder-dot { opacity: .9; }
.vip-ladder-item.is-completed .vip-ladder-name { color: #E6E6EA; }

/* current rank — strongest accent */
.vip-ladder-item.is-current {
  border-color: var(--rank-color);
  background:
    radial-gradient(circle at top center, color-mix(in srgb, var(--rank-color), transparent 78%), transparent 55%),
    #12151A;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rank-color), transparent 50%),
              0 0 22px color-mix(in srgb, var(--rank-color), transparent 70%);
  transform: translateY(-2px);
}
.vip-ladder-item.is-current .vip-ladder-dot { opacity: 1; box-shadow: 0 0 14px var(--rank-color); }
.vip-ladder-item.is-current .vip-ladder-name { color: var(--rank-color); }

/* next goal (No Rank → Bronze) */
.vip-ladder-item.is-next {
  border-color: color-mix(in srgb, var(--rank-color), transparent 45%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rank-color), transparent 78%);
}
.vip-ladder-item.is-next .vip-ladder-dot { opacity: .85; }
.vip-ladder-item.is-next .vip-ladder-name { color: color-mix(in srgb, var(--rank-color), white 10%); }

/* future locked */
.vip-ladder-item.is-locked { opacity: .65; }
.vip-ladder-item.is-locked .vip-ladder-dot { opacity: .35; }

/* desktop: fill the row evenly (no awkward empty gap, no scroll) */
@media (min-width: 769px) {
  .vip-rank-ladder { width: 100%; }
  .vip-ladder-item { flex: 1 1 0; min-width: 0; }
}

/* mobile: keep it scrollable, tiles not too small */
@media (max-width: 768px) {
  .vip-rank-ladder-scroll { padding-bottom: 4px; }
  .vip-ladder-item { min-width: 96px; padding: 12px 10px; }
  .vip-ladder-name { font-size: 13px; }
}
@media (max-width: 420px) {
  .vip-ladder-item { min-width: 92px; }
}


/* =========================================================
   ====  VIP TIERS v29 — premium membership cards  ====
   ========================================================= */
.vtc-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.vtc-kicker {
  display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange);
  background: rgba(255,138,31,.12); border: 1px solid rgba(255,138,31,.3);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 4px;
}
.vtc-sub { color: var(--muted); font-size: .9rem; }

.vip-tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.vip-tier-card {
  --rank-color: #FF8A1F;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 26px 20px 22px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rank-color), transparent 88%), transparent 60%),
    linear-gradient(180deg, #121419, #0a0b0e);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.4);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.vip-tier-card--bronze   { --rank-color: #CD7F32; }
.vip-tier-card--silver   { --rank-color: #B0B8C4; }
.vip-tier-card--gold     { --rank-color: #D4AF37; }
.vip-tier-card--platinum { --rank-color: #D8DDE5; }
.vip-tier-card--diamond  { --rank-color: #90D5F0; }
.vip-tier-card--elite    { --rank-color: #DDA0D8; }

/* 1. top accent line */
.vtc-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--rank-color), transparent);
}

/* CURRENT RANK pill (hidden until current tier) */
.vtc-pill {
  position: absolute; top: 12px; right: 12px; display: none;
  font-size: .56rem; font-weight: 800; letter-spacing: .07em;
  padding: 4px 9px; border-radius: 999px; color: #0a0b0e; background: var(--rank-color);
}
.vip-tier-card.is-current-tier .vtc-pill { display: inline-block; }

/* 2. badge area with rank halo */
.vtc-badge {
  position: relative; width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.vtc-badge::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--rank-color), transparent 60%), transparent 70%);
  filter: blur(7px);
}
.vtc-badge .vbadge-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.vtc-badge .vbadge-ph {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 18px;
  align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; letter-spacing: .04em; color: var(--rank-color);
  background: linear-gradient(180deg, #15171c, #0d0e12);
  border: 1px solid color-mix(in srgb, var(--rank-color), transparent 55%);
}

/* 3-5. text */
.vtc-name  { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; color: var(--rank-color); }
.vtc-range { font-size: .85rem; color: var(--muted); }
.vtc-reward { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 1px; }
.vtc-reward-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); }
.vtc-reward-amt   { font-size: 1.15rem; font-weight: 800; color: var(--rank-color); }

/* 6. rank-colored button */
.vtc-btn {
  margin-top: 12px; width: 100%; max-width: 210px; height: 42px;
  border-radius: 11px; font-family: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  color: var(--rank-color); background: transparent;
  border: 1px solid color-mix(in srgb, var(--rank-color), transparent 50%);
  transition: background .2s, color .2s, border-color .2s;
}
.vtc-btn:hover {
  background: color-mix(in srgb, var(--rank-color), transparent 84%);
  color: #fff; border-color: var(--rank-color);
}

/* hover lift */
.vip-tier-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rank-color), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(0,0,0,.5);
}

/* current rank card */
.vip-tier-card.is-current-tier {
  border-color: var(--rank-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rank-color), transparent 55%),
              0 14px 30px rgba(0,0,0,.5),
              0 0 26px color-mix(in srgb, var(--rank-color), transparent 80%);
}

/* responsive */
@media (max-width: 860px) {
  .vip-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 768px) {
  .vip-tier-card { padding: 22px 16px 18px; }
  .vtc-badge { width: 104px; height: 104px; }
}
@media (max-width: 430px) {
  .vip-tier-grid { grid-template-columns: 1fr; }
  .vtc-badge { width: 112px; height: 112px; }
}


/* =========================================================
   ====  VIP TIERS v30 — compact, 6-in-a-row on desktop  ====
   ========================================================= */
.vip-tier-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

.vip-tier-card {
  min-height: 0;
  padding: 18px;
  border-radius: 18px;
  gap: 8px;
}
.vtc-accent { height: 2px; }

.vtc-pill { top: 10px; right: 10px; font-size: .5rem; padding: 3px 7px; letter-spacing: .05em; }

.vtc-badge { width: 92px; height: 92px; margin-bottom: 2px; }
.vtc-badge::before { inset: 6px; filter: blur(6px); }

.vtc-name  { font-size: 16px; letter-spacing: .02em; }
.vtc-range { font-size: 13px; }
.vtc-reward { margin: 4px 0 0; }
.vtc-reward-label { font-size: 10px; letter-spacing: .07em; }
.vtc-reward-amt   { font-size: 16px; }

.vtc-btn {
  height: 40px; width: 100%; max-width: none;
  margin-top: auto; border-radius: 12px; font-size: .82rem;
}

/* responsive */
@media (max-width: 1200px) {
  .vip-tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 768px) {
  .vip-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vip-tier-card { padding: 16px; }
  .vtc-badge { width: 86px; height: 86px; }
}
@media (max-width: 430px) {
  .vip-tier-grid { grid-template-columns: 1fr; }
  .vtc-badge { width: 100px; height: 100px; }
}


/* =========================================================
   ====  VIP RESULT CARD v31 — make rank color obvious  ====
   ========================================================= */
.vip-result-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--rank-color), transparent 32%);
  background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--rank-color), transparent 58%), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--rank-color), transparent 88%), transparent 48%),
    linear-gradient(180deg, #111318, #08090B);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--rank-color), transparent 84%),
    0 0 26px color-mix(in srgb, var(--rank-color), transparent 74%);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
/* glowing rank-colored accent bar across the top */
.vip-result-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--rank-color), transparent);
}
.vip-result-card .vc-rank {
  color: var(--rank-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--rank-color), transparent 60%);
}
.vip-result-card .vc-range {
  color: color-mix(in srgb, var(--rank-color), #A1A1AA 50%);
}
.vip-result-card .vc-progress {
  border-color: color-mix(in srgb, var(--rank-color), transparent 70%);
}
.vip-result-card .vc-progress span {
  background: var(--rank-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rank-color), transparent 50%);
}
.vip-result-card .vc-progress-text {
  color: color-mix(in srgb, var(--rank-color), white 16%);
}
.vip-result-card .vc-badge {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--rank-color), transparent 28%),
    0 0 24px color-mix(in srgb, var(--rank-color), transparent 58%);
}


/* =========================================================
   ====  VIP RESULT CARD v32 — FIX: rank color was being
   overridden by the base .vip-result-card --rank-color.
   Higher-specificity rules so the rank theme actually wins.
   ========================================================= */
.vip-result-card.vip-result--none     { --rank-color: #6B7280; }
.vip-result-card.vip-result--bronze   { --rank-color: #CD7F32; }
.vip-result-card.vip-result--silver   { --rank-color: #B0B8C4; }
.vip-result-card.vip-result--gold     { --rank-color: #D4AF37; }
.vip-result-card.vip-result--platinum { --rank-color: #D8DDE5; }
.vip-result-card.vip-result--diamond  { --rank-color: #90D5F0; }
.vip-result-card.vip-result--elite    { --rank-color: #DDA0D8; }


/* =========================================================
   ====  VIP PAGE v33 — premium balance pass  ====
   (fill calculator, stronger result theme, bigger badges,
    tighter tier cards, subtle graphite separation)
   ========================================================= */

/* --- (1)(2) calculator left fills its height + info cards --- */
.vc-left { display: flex; flex-direction: column; }
.vc-info-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: auto; padding-top: 20px;
}
.vc-info {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: 13px;
  background: linear-gradient(180deg, #131519, #0c0d11);
  border: 1px solid var(--line);
}
.vc-info-ico {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); background: rgba(255,138,31,.1);
  border: 1px solid rgba(255,138,31,.25);
}
.vc-info-ico svg { width: 18px; height: 18px; }
.vc-info-title { font-size: .84rem; font-weight: 700; color: #fff; }
.vc-info-sub   { font-size: .7rem; color: var(--muted-2); margin-top: 1px; }

/* --- (3) result card: push rank color harder --- */
.vip-result-card {
  border: 2px solid color-mix(in srgb, var(--rank-color), transparent 24%);
  box-shadow:
    inset 0 0 42px color-mix(in srgb, var(--rank-color), transparent 80%),
    0 0 32px color-mix(in srgb, var(--rank-color), transparent 66%);
}
.vip-result-card .vc-rank {
  font-size: 1.4rem;
  text-shadow: 0 0 22px color-mix(in srgb, var(--rank-color), transparent 48%);
}
.vip-result-card .vc-badge {
  box-shadow:
    inset 0 0 0 2.5px color-mix(in srgb, var(--rank-color), transparent 18%),
    0 0 32px color-mix(in srgb, var(--rank-color), transparent 46%);
}
.vip-result-card .vc-progress {
  height: 12px;
  border-color: color-mix(in srgb, var(--rank-color), transparent 58%);
}
.vip-result-card .vc-progress span {
  box-shadow: 0 0 16px color-mix(in srgb, var(--rank-color), transparent 38%);
}

/* --- (4)(5) tier cards: bigger dominant badge, tighter spacing --- */
.vip-tier-card { gap: 6px; }
.vtc-badge { width: 112px; height: 112px; margin-bottom: 0; }
.vtc-badge::before {
  inset: 4px; filter: blur(8px);
  background: radial-gradient(circle, color-mix(in srgb, var(--rank-color), transparent 52%), transparent 72%);
}
.vtc-name  { margin-top: 2px; }
.vtc-reward { margin: 3px 0 0; }
.vtc-btn { margin-top: 14px; }

/* --- (6) subtle graphite separation between VIP sections --- */
.section:has(.vip-calc),
.section:has(.vip-tier-grid),
.section:has(.vip-benefit-row),
.section:has(.vip-cta) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 26%),
    linear-gradient(180deg, #0a0b0e, #070809);
}
.section:has(.vip-tier-grid),
.section:has(.vip-benefit-row),
.section:has(.vip-cta) {
  border-top: 1px solid rgba(255,255,255,.05);
}

/* responsive: keep badge prominent, no shrink of cards */
@media (max-width: 768px) {
  .vtc-badge { width: 104px; height: 104px; }
}
@media (max-width: 600px) {
  .vc-info-row { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .vtc-badge { width: 120px; height: 120px; }
}


/* =========================================================
   ====  VIP TIERS v34 — 2 cards per row on mobile  ====
   ========================================================= */
@media (max-width: 430px) {
  .vip-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vip-tier-card { padding: 16px 12px; }
  .vtc-badge { width: 84px; height: 84px; }
  .vtc-name  { font-size: 15px; }
  .vtc-range { font-size: 12px; }
  .vtc-reward-amt { font-size: 15px; }
  .vtc-btn { height: 38px; font-size: .78rem; }
}
@media (max-width: 340px) {
  .vtc-badge { width: 74px; height: 74px; }
}


/* =========================================================
   ====  HOMEPAGE VIP RANK v35 — badge + name only  ====
   ========================================================= */
.home-vip-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

.home-vip-card {
  --rank-color: #FF8A1F;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 14px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(180deg, #121419, #0b0c0f);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-vip-card--bronze   { --rank-color: #CD7F32; }
.home-vip-card--silver   { --rank-color: #B0B8C4; }
.home-vip-card--gold     { --rank-color: #D4AF37; }
.home-vip-card--platinum { --rank-color: #D8DDE5; }
.home-vip-card--diamond  { --rank-color: #90D5F0; }
.home-vip-card--elite    { --rank-color: #DDA0D8; }

.home-vip-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rank-color), transparent 55%);
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}

.home-vip-badge-wrap { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.home-vip-badge { width: 100%; height: 100%; object-fit: contain; }
.home-vip-ph {
  display: none; width: 100%; height: 100%; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rank-color);
  background: linear-gradient(180deg, #15171c, #0d0e12);
  border: 1px solid color-mix(in srgb, var(--rank-color), transparent 55%);
}
.home-vip-name { font-size: .92rem; font-weight: 800; letter-spacing: .02em; color: var(--rank-color); }

/* mobile: horizontal scroll row, compact, no wrap */
@media (max-width: 768px) {
  .home-vip-grid {
    display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
  }
  .home-vip-grid::-webkit-scrollbar { height: 0; }
  .home-vip-card { flex: 0 0 auto; width: 116px; padding: 16px 12px; }
  .home-vip-badge-wrap { width: 72px; height: 72px; }
  .home-vip-name { white-space: nowrap; }
}


/* =========================================================
   ====  VIP BADGES v36 — landscape membership-card frames ====
   (badge images are now wide cards, not circles/squares)
   ========================================================= */

/* shared: card images fill a 1.586:1 frame, rounded, no distortion */
.vbadge-img { object-fit: cover !important; }

/* --- VIP page: tier card badge --- */
.vtc-badge {
  width: 100%; height: auto; max-width: none;
  aspect-ratio: 1.586 / 1;
  border-radius: 12px; overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.vtc-badge::before { content: none; }            /* drop the old round halo */
.vtc-badge .vbadge-img { width: 100%; height: 100%; border-radius: 12px; }
.vtc-badge .vbadge-ph  { border-radius: 12px; }

/* soft rank glow behind the whole tier card instead of a circle halo */
.vip-tier-card::after {
  content: ""; position: absolute; left: 50%; top: 64px; transform: translateX(-50%);
  width: 80%; height: 60px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--rank-color), transparent 70%), transparent 70%);
  filter: blur(16px);
}
.vip-tier-card > * { position: relative; z-index: 1; }

/* --- VIP page: result card badge --- */
.vc-badge {
  width: 100%; max-width: 260px; height: auto;
  aspect-ratio: 1.586 / 1; border-radius: 12px; overflow: hidden;
}
.vc-badge .vbadge-img { border-radius: 12px; }
.vc-badge .ph-label,
.vm-badge .ph-label {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.vip-result-card .vc-badge {
  box-shadow: 0 0 28px color-mix(in srgb, var(--rank-color), transparent 55%);
}

/* --- VIP page: benefit modal badge (now full-width card on top) --- */
.vm-top { flex-direction: column; align-items: stretch; gap: 12px; }
.vm-badge {
  width: 100%; height: auto; aspect-ratio: 1.586 / 1;
  border-radius: 12px; overflow: hidden;
}
.vm-badge .vbadge-img { border-radius: 12px; }

/* --- Homepage: VIP rank cards --- */
.home-vip-badge-wrap {
  width: 100%; height: auto; aspect-ratio: 1.586 / 1;
  border-radius: 10px; overflow: hidden;
}
.home-vip-ph { border-radius: 10px; }
@media (max-width: 768px) {
  .home-vip-card { width: 168px; }          /* wider so the card image is legible */
  .home-vip-badge-wrap { width: 100%; height: auto; }
}

/* =========================================================
   ====  VIP BADGES v38 — hide placeholder rank words  ====
   The card image is the visual now; the BRONZE/SILVER/...
   text only appears via the onerror fallback if an image
   is genuinely missing, never on top of a loaded card.
   ========================================================= */
.vc-badge .vbadge-ph,
.vm-badge .vbadge-ph,
.vtc-badge .vbadge-ph,
.home-vip-badge-wrap .vbadge-ph { display: none; }


/* =========================================================
   ====  VIP MODAL v40 — Weekly Reward + Birthday Bonus  ====
   ========================================================= */
.vm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.vm-stats .vm-reward {
  margin-top: 0; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #131519, #0c0d11);
  border: 1px solid var(--line);
}
@media (max-width: 380px) { .vm-stats { grid-template-columns: 1fr; } }


/* =========================================================
   ====  VIP INFO CARDS v41 — per-rank stat values  ====
   ========================================================= */
.vc-info-val { font-size: .95rem; font-weight: 800; color: var(--orange); margin-top: 1px; }


/* =========================================================
   ====  GAME PROVIDERS v42 — logo images (text fallback) ====
   ========================================================= */
.prov-pill { display: inline-flex; align-items: center; justify-content: center; }
.prov-logo { height: 30px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.prov-name { display: none; }   /* shown only if the logo image is missing */


/* =========================================================
   ====  SINGAPORE PAYMENT METHODS v43 — SVG wordmarks  ====
   ========================================================= */
.pay-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }

.pay-card {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 14px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #121419, #0c0d11);
  border: 1px solid rgba(255,255,255,.08);
  color: #cdcdd2;                                   /* logo colour (white/grey) */
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.pay-card:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, #15171c, #0e0f13);
  transform: translateY(-2px);
}
.pay-logo {
  height: 24px; width: auto; max-width: 100%; display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));   /* subtle grey shadow */
}
.pay-logo text { font-family: 'Inter', system-ui, sans-serif; fill: currentColor; }

/* mobile: horizontal scroll row, compact, no page overflow */
@media (max-width: 768px) {
  .pay-grid {
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
  }
  .pay-grid::-webkit-scrollbar { height: 0; }
  .pay-card { flex: 0 0 auto; width: 124px; }
}


/* =========================================================
   ====  PAYMENT METHODS v44 — real logos on white chips ====
   ========================================================= */
.pay-card { padding: 12px; }
.pay-chip {
  width: 100%; min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 9px 12px; border-radius: 10px;
  background: #f4f5f7;
  transition: background .2s ease;
}
.pay-card:hover .pay-chip { background: #ffffff; }
.pay-logo {
  max-height: 30px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; display: block; filter: none;
}


/* =========================================================
   ====  PAYMENT METHODS v45 — no dark frame, larger chip ====
   ========================================================= */
.pay-card {
  padding: 0;                       /* drop the graphite frame */
  background: none;
  border: 0;
  min-height: 0;
  border-radius: 12px;
}
.pay-card:hover { background: none; border: 0; transform: translateY(-2px); }

.pay-chip {
  min-height: 60px;                 /* bigger */
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.pay-logo { max-height: 38px; }     /* larger logos */

@media (max-width: 768px) {
  .pay-card { width: 150px; }
  .pay-chip { min-height: 54px; }
  .pay-logo { max-height: 34px; }
}


/* =========================================================
   ====  PAYMENT METHODS v46 — slightly smaller  ====
   ========================================================= */
.pay-chip { min-height: 50px; padding: 10px 14px; }
.pay-logo { max-height: 32px; }

@media (max-width: 768px) {
  .pay-card { width: 132px; }
  .pay-chip { min-height: 46px; }
  .pay-logo { max-height: 29px; }
}


/* =========================================================
   ====  HOMEPAGE VIP RANK v47 — frameless, hover on image ====
   ========================================================= */
.home-vip-card {
  background: none; border: 0; padding: 0; box-shadow: none;
}
.home-vip-card:hover {
  background: none; border: 0; box-shadow: none; transform: none;
}
.home-vip-badge-wrap {
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-vip-card:hover .home-vip-badge-wrap {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(0,0,0,.5);
}


/* =========================================================
   ====  HOMEPAGE VIP RANK v48 — force-remove frame  ====
   ========================================================= */
.home-vip-card,
.home-vip-card:hover {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.home-vip-card:hover .home-vip-badge-wrap {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.5) !important;
}


/* =========================================================
   ====  HOMEPAGE VIP RANK v49 — hide orange scrollbar +
         more gap between cards (mobile)
   ========================================================= */
@media (max-width: 768px) {
  .home-vip-grid {
    gap: 22px;                       /* more space between cards */
    scrollbar-width: none;           /* Firefox: no orange bar */
    -ms-overflow-style: none;        /* old Edge */
  }
  .home-vip-grid::-webkit-scrollbar { display: none; height: 0; width: 0; }  /* WebKit/Chrome/Safari */
}


/* =========================================================
   ====  HOMEPAGE VIP RANK v50 — hide rank name labels  ====
   (the card image already shows the rank name)
   ========================================================= */
.home-vip-name { display: none; }


/* =========================================================
   ====  PAYMENT METHODS v51 — softer grey, smaller, premium ====
   ========================================================= */
.pay-grid { gap: 14px; }

.pay-chip {
  min-height: 44px;                       /* smaller */
  padding: 8px 14px;
  border-radius: 15px;
  background: linear-gradient(180deg, #f0f0f0, #dcdcdc);  /* soft grey, not pure white */
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 3px 10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.pay-card:hover .pay-chip {
  background: linear-gradient(180deg, #f6f6f6, #e2e2e2);  /* gentle lift, still not pure white */
}
.pay-logo { max-height: 28px; }

@media (max-width: 768px) {
  .pay-card { width: 124px; }
  .pay-chip { min-height: 42px; padding: 7px 12px; }
  .pay-logo { max-height: 26px; }
}


/* =========================================================
   ====  PAYMENT METHODS v53 — CSS infinite marquee  ====
   auto-slide, seamless loop, no manual scroll / touch
   ========================================================= */
.pay-marquee {
  width: 100%;
  overflow: hidden;                 /* no scrollbar, not manually scrollable */
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.pay-track {
  display: flex;
  width: max-content;
  user-select: none;
  pointer-events: none;             /* no touch / drag interaction */
  animation: pay-marquee 38s linear infinite;
}
/* override old grid/scroll sizing; spacing via margin for a seamless -50% loop */
.pay-marquee .pay-card {
  width: auto !important;
  flex: 0 0 auto;
  margin: 0 8px;
  padding: 0;
}
.pay-marquee .pay-chip { width: 150px; min-height: 46px; }
.pay-marquee .pay-logo { max-height: 28px; }

@keyframes pay-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* exactly one full set */
}

/* mobile: slightly smaller tiles, still auto-sliding */
@media (max-width: 768px) {
  .pay-marquee .pay-card { margin: 0 6px; }
  .pay-marquee .pay-chip { width: 116px; min-height: 40px; padding: 7px 12px; }
  .pay-marquee .pay-logo { max-height: 24px; }
}

/* accessibility: stop motion if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pay-track { animation: none; }
}


/* =========================================================
   ====  PAYMENT METHODS v53 — seamless CSS marquee  ====
   Non-interactive auto-slide; duplicated set loops with no jump.
   ========================================================= */
.pay-marquee {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;          /* lets the page scroll vertically; no horizontal interaction */
}
.pay-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  pointer-events: none;         /* no manual scroll / drag / swipe / hover */
  will-change: transform;
  animation: pay-marquee 34s linear infinite;
}
/* uniform card+margin so translateX(-50%) lands exactly on the duplicate = seamless */
.pay-marquee .pay-card {
  flex: 0 0 auto;
  width: 150px;
  margin-right: 14px;
  padding: 0;
}
@keyframes pay-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* mobile: slightly smaller tiles, still seamless, no page overflow */
@media (max-width: 768px) {
  .pay-marquee .pay-card { width: 118px; margin-right: 12px; }
  .pay-chip { min-height: 40px; padding: 7px 11px; }
  .pay-logo { max-height: 24px; }
}

/* accessibility: stop motion if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pay-track { animation: none; }
}


/* =========================================================
   ====  STICKY HEADER v54  ====
   overflow-x:hidden on html/body was creating a scroll
   container that broke position:sticky. "clip" blocks the
   same sideways overflow WITHOUT breaking sticky.
   ========================================================= */
html, body { overflow-x: clip; }
.topbar { position: sticky; top: 0; z-index: 60; }

/* =========================================================
   ====  GAME CARD IMAGES v56 — fit tile (was zoomed crop) ====
   The <img> had no object-fit, so the browser showed the
   center of the full-size image (looked zoomed/cut). Scale
   it to fill the tile cleanly instead.
   ========================================================= */
.game-card .card-media { aspect-ratio: 16 / 9; }
.game-img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* =========================================================
   ====  GAMES PAGE v55 — space below filter tabs  ====
   ========================================================= */
.game-tabs { margin-bottom: 26px; }
@media (max-width: 600px) { .game-tabs { margin-bottom: 20px; } }


/* =========================================================
   ====  GAME CARD v57 — hide name placeholder by default ====
   The .game-ph label was showing beside the loaded image
   (clipped text on the right). Hide it; the img onerror
   fallback re-shows it only when an image is missing.
   ========================================================= */
.game-ph { display: none; }
.game-card .card-media .game-img { position: relative; z-index: 1; }


/* =========================================================
   ====  GAME PLAY BUTTON + DOWNLOAD MODAL v58  ====
   ========================================================= */
.game-card { cursor: pointer; }
.game-card .card-body { gap: 8px; }
.game-play { align-self: flex-start; margin-top: 2px; }

.game-modal { max-width: 460px; }
.gm-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.gm-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border-radius: 12px;
  background: #15171B; border: 1px solid var(--line);
  transition: border-color .18s, background .18s, transform .12s;
}
.gm-link:hover { border-color: rgba(255,138,31,.4); background: #1A1D21; transform: translateY(-1px); }
.gm-link-label { font-weight: 700; color: #fff; font-size: .92rem; }
.gm-link-host { font-size: .82rem; color: var(--orange); word-break: break-all; text-align: right; }
.gm-empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 8px 0 4px; }


/* =========================================================
   ====  GAME PLAY BUTTON v59 — bottom-right of tile  ====
   ========================================================= */
.game-card .card-body { flex: 1; }
.game-play { align-self: flex-end; margin-top: auto; }


/* =========================================================
   ====  GAME PLAY BUTTON v60 — force bottom-right  ====
   ========================================================= */
.game-card .card-body .game-play {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-top: auto !important;
}


/* =========================================================
   ====  GAME CARD v61 — name + Play Now on same row  ====
   ========================================================= */
.game-card .card-body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.game-card .card-body h3 {
  font-size: .82rem !important;     /* slightly smaller name */
  margin: 0;
  line-height: 1.2;
}
.game-card .card-body .game-play {
  align-self: auto !important;
  margin: 0 0 0 auto !important;    /* keep button on the right */
  flex: 0 0 auto;
  white-space: nowrap;
}


/* =========================================================
   ====  VIP TIERS v62 — whole card clickable  ====
   ========================================================= */
.vip-tier-card { cursor: pointer; }


/* =========================================================
   ====  PROMO MODAL v63 — "View VIP Rank" link  ====
   ========================================================= */
.pm-link-li::before { display: none !important; }
.pm-link-li { padding-left: 0 !important; margin-top: 4px; }
.pm-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--orange); font-weight: 800; font-size: .9rem;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255,138,31,.10); border: 1px solid rgba(255,138,31,.32);
  transition: background .18s, border-color .18s;
}
.pm-link:hover { background: rgba(255,138,31,.18); border-color: var(--orange); }

/* =========================================================
   ====  v64 — CATEGORIZED FAQ (faq.html)  ====
   ========================================================= */
.faq { max-width: 840px; }
.faq-cat { margin-top: 30px; }
.faq-cat:first-child { margin-top: 4px; }
.faq-cat-title {
  font-size: 1.02rem; font-weight: 800; color: var(--orange);
  letter-spacing: .02em; text-transform: uppercase;
  margin: 0 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  max-width: 840px;
}
/* allow longer multi-sentence answers to expand fully */
.faq-item.open .faq-a { max-height: 600px; }


/* =========================================================
   ====  v65 — FAQ CATEGORY SIDEBAR (faq.html)  ====
   ========================================================= */
.faq-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 38px;
  align-items: start;
}
.faq-side { position: sticky; top: 92px; }
.faq-side-label {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; margin: 0 0 14px; padding-left: 8px;
}
.faq-cats { display: flex; flex-direction: column; gap: 6px; }
.faq-cat-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 12px;
  padding: 12px 14px; color: var(--muted);
  font-weight: 700; font-size: .95rem; font-family: inherit; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.faq-cat-btn:hover { background: rgba(255,255,255,.04); color: #fff; }
.faq-cat-btn .fc-ico { width: 22px; height: 22px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: currentColor; }
.faq-cat-btn .fc-ico svg { width: 19px; height: 19px; }
.faq-cat-btn .fc-name { flex: 1 1 auto; }
.faq-cat-btn .fc-count {
  flex: 0 0 auto; font-size: .76rem; font-weight: 800;
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: var(--muted);
}
.faq-cat-btn.active {
  background: linear-gradient(90deg, rgba(246,180,75,.16), rgba(255,138,31,.04));
  border-color: rgba(246,180,75,.42);
  color: var(--gold);
}
.faq-cat-btn.active .fc-count { background: rgba(246,180,75,.22); color: var(--gold); }

/* content side fills the column */
.faq-main .faq { max-width: 100%; }
.faq-main .faq-cat-title { max-width: 100%; }
.faq-main .faq-cat { margin-top: 0; }

@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; gap: 18px; }
  .faq-side { position: static; }
  .faq-side-label { padding-left: 2px; margin-bottom: 10px; }
  .faq-cats { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
  .faq-cats::-webkit-scrollbar { display: none; }
  .faq-cat-btn { width: auto; flex: 0 0 auto; padding: 9px 13px; }
  .faq-cat-btn .fc-name { flex: 0 0 auto; }
}


/* =========================================================
   ====  v66 — DEPOSIT / WITHDRAWAL INFO POPUPS  ====
   ========================================================= */
.di-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.di-top { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.di-top-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,138,31,.12); color: var(--orange); }
.di-top-ico svg { width: 20px; height: 20px; }
.di-top-label { font-size: .72rem; color: var(--muted); font-weight: 600; line-height: 1.1; }
.di-top-val { font-size: 1.02rem; font-weight: 800; color: #fff; margin-top: 3px; }

.di-block { margin-bottom: 16px; }
.di-block-label { font-size: .73rem; letter-spacing: .04em; text-transform: uppercase; color: var(--orange); font-weight: 800; margin-bottom: 9px; display: block; }
.di-methods { display: flex; flex-wrap: wrap; gap: 7px; }
.di-chip { font-size: .82rem; font-weight: 700; color: #e9e9ee; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; }

.di-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.di-check.col1 { grid-template-columns: 1fr; }
.di-check li { position: relative; padding-left: 25px; font-size: .9rem; color: #e9e9ee; line-height: 1.35; }
.di-check li::before { content: ''; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 5px; background: rgba(255,138,31,.14); border: 1px solid rgba(255,138,31,.42); }
.di-check li::after { content: ''; position: absolute; left: 5.5px; top: 4.5px; width: 4px; height: 8px; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.di-tmpl { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-bottom: 16px; }
.di-tmpl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.di-tmpl-top .di-block-label { margin-bottom: 0; }
.di-tmpl-text { white-space: pre-line; font-family: inherit; font-size: .86rem; color: #cfcfd6; line-height: 1.55; margin: 0; }
.di-copy { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: .78rem; font-weight: 800; color: var(--orange); background: rgba(255,138,31,.10); border: 1px solid rgba(255,138,31,.34); border-radius: 9px; padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: background .16s, color .16s, border-color .16s; }
.di-copy:hover { background: rgba(255,138,31,.18); }
.di-copy.copied { color: #34d27b; border-color: rgba(52,210,123,.5); background: rgba(52,210,123,.12); }

.di-note { display: flex; gap: 10px; align-items: flex-start; background: rgba(246,180,75,.08); border: 1px solid rgba(246,180,75,.28); border-radius: 12px; padding: 11px 13px; margin-bottom: 18px; font-size: .86rem; color: #e9e1cf; line-height: 1.4; }
.di-note-ico { color: var(--gold); flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.di-note-ico svg { width: 18px; height: 18px; }
.di-note strong { color: #fff; display: block; margin-bottom: 2px; font-size: .84rem; }

.di-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.di-actions .di-btn { width: 100%; }

@media (max-width: 430px) {
  .di-tops { grid-template-columns: 1fr; }
  .di-check { grid-template-columns: 1fr; }
  .di-actions { grid-template-columns: 1fr; }
}