/* ============================================================
   DONUTGAMBLE — exclusive black & gold
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:          #050506;
  --bg-2:        #08080b;
  --bg-3:        #0c0c11;
  --panel:       rgba(255,255,255,.022);
  --panel-2:     rgba(255,255,255,.04);
  --line:        rgba(216,176,96,.13);
  --line-soft:   rgba(255,255,255,.055);
  --line-strong: rgba(216,176,96,.32);

  --gold-100: #fff6d8;
  --gold-200: #f6e2a4;
  --gold-300: #e8c66a;
  --gold-400: #d1a33f;
  --gold-500: #ad7f22;
  --gold-600: #7d5a14;

  --grad-gold: linear-gradient(135deg,#fff3c4 0%,#e8c66a 26%,#c9982f 58%,#f2dfa0 82%,#b8891f 100%);
  --grad-gold-soft: linear-gradient(135deg,rgba(255,243,196,.16),rgba(201,152,47,.06));

  --text:  #ece7dc;
  --text-2:#a6a094;
  --text-3:#6f6a5f;

  --green:#5fd39a;
  --red:  #e2645f;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --rail-w: 232px;
  --chat-w: 320px;
  --top-h:  68px;

  --shadow-1: 0 2px 10px rgba(0,0,0,.5);
  --shadow-2: 0 18px 50px -12px rgba(0,0,0,.85);
  --shadow-gold: 0 10px 34px -10px rgba(209,163,63,.45);

  --ease: cubic-bezier(.22,.8,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--top-h) + 22px); }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 620px at 78% -12%, rgba(209,163,63,.085), transparent 62%),
    radial-gradient(900px 520px at 6% 4%, rgba(120,90,200,.045), transparent 60%),
    linear-gradient(180deg,#07070a 0%, var(--bg) 48%, #030304 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr) var(--chat-w);
  grid-template-rows:var(--top-h) 1fr;
  grid-template-areas:"top top top" "rail main chat";
}

/* ---------- texture ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.aura{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aura span{ position:absolute; border-radius:50%; filter:blur(120px); }
.aura-a{ width:620px; height:620px; top:-260px; right:-140px; background:rgba(209,163,63,.11); animation:float 22s var(--ease) infinite alternate; }
.aura-b{ width:520px; height:520px; bottom:-240px; left:14%; background:rgba(209,163,63,.05); animation:float 28s var(--ease) infinite alternate-reverse; }
@keyframes float{ to{ transform:translate3d(-60px,50px,0) scale(1.12); } }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(216,176,96,.16); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(216,176,96,.34); background-clip:content-box; }

/* ---------- helpers ---------- */
svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
[data-icon]{ display:inline-flex; width:1em; height:1em; flex:0 0 auto; }
[data-icon] svg{ width:100%; height:100%; }
.amt{
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:800; letter-spacing:.2px;
}
.tdot{
  width:6px; height:6px; border-radius:50%; background:var(--green); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(95,211,154,.55); animation:pulse 2.4s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(95,211,154,0); } 100%{ box-shadow:0 0 0 0 rgba(95,211,154,0); } }
.only-mobile{ display:none !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border:0; border-radius:var(--r);
  font:inherit; font-weight:650; font-size:13.5px; letter-spacing:.2px;
  cursor:pointer; white-space:nowrap; overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.btn svg{ width:16px; height:16px; stroke-width:2.1; }
.btn:active{ transform:translateY(1px) scale(.985); }

.btn-gold{ color:#1a1206; background:var(--grad-gold); background-size:200% 200%; box-shadow:var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-gold::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.62) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .75s var(--ease);
}
.btn-gold:hover{ transform:translateY(-1.5px); box-shadow:0 16px 40px -10px rgba(209,163,63,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-gold:hover::after{ transform:translateX(120%); }

.btn-ghost{
  color:var(--gold-200); background:rgba(255,255,255,.03);
  border:1px solid var(--line); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(216,176,96,.09); border-color:var(--line-strong); color:var(--gold-100); }

.btn-lg{ height:50px; padding:0 26px; font-size:14.5px; border-radius:var(--r-lg); }
.btn-sm{ height:34px; padding:0 14px; font-size:12.5px; border-radius:11px; }
.btn-block{ width:100%; }

.icon-btn{
  display:inline-grid; place-items:center; width:38px; height:38px; padding:8px;
  color:var(--text-2); background:rgba(255,255,255,.035); border:1px solid var(--line-soft);
  border-radius:11px; cursor:pointer; transition:.2s var(--ease);
}
.icon-btn:hover{ color:var(--gold-200); border-color:var(--line-strong); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  grid-area:top; position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:18px; padding:0 20px;
  background:rgba(6,6,9,.78); backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 18px 40px -30px #000;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,176,96,.45) 22%,rgba(216,176,96,.45) 78%,transparent);
  opacity:.55;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand-mark{ width:36px; height:36px; display:block; position:relative; }
.brand-mark.sm{ width:30px; height:30px; }
.brand-mark .ring{ stroke:url(#g); stroke:var(--gold-300); stroke-width:4.4; opacity:.92; }
.brand-mark .hole{ fill:var(--bg); stroke:none; }
.brand-mark .ring-dash{
  stroke:var(--gold-100); stroke-width:4.4; stroke-dasharray:14 86; opacity:.9;
  transform-origin:center; animation:spin 6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.brand-text strong{
  display:block; font-family:'Cinzel',Georgia,serif; font-weight:700;
  font-size:16.5px; letter-spacing:1.6px; line-height:1.1; color:var(--text);
}
.brand-text strong em{
  font-style:normal; background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text small{ display:block; font-size:9.5px; letter-spacing:1.9px; text-transform:uppercase; color:var(--text-3); }

.top-stats{ display:flex; gap:8px; margin-left:16px; }
.tstat{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:11px;
}
.tstat b{ font-size:13px; font-weight:700; color:var(--gold-200); font-variant-numeric:tabular-nums; }
.tstat i{ font-style:normal; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); }

.top-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }

.balance-chip{
  display:flex; align-items:center; gap:10px; height:40px; padding:0 15px 0 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer; color:inherit; font:inherit;
  transition:.2s var(--ease);
}
.balance-chip:hover{ border-color:var(--line-strong); background:rgba(216,176,96,.07); }
.lock-ico{ width:15px; height:15px; color:var(--gold-400); stroke-width:1.8; }
.bal{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; }
.bal em{ font-style:normal; font-weight:750; font-size:13.5px; color:var(--text); font-variant-numeric:tabular-nums; }
.bal i{ font-style:normal; font-size:9.5px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text-3); }

.avatar{
  display:grid; place-items:center; width:40px; height:40px; padding:9px;
  color:var(--text-2); background:var(--panel); border:1px solid var(--line-soft);
  border-radius:50%; cursor:pointer; transition:.2s var(--ease);
}
.avatar:hover{ color:var(--gold-200); border-color:var(--line-strong); }

/* ============================================================
   LEFT RAIL
   ============================================================ */
.rail{
  grid-area:rail; position:sticky; top:var(--top-h); z-index:40;
  height:calc(100vh - var(--top-h)); overflow-y:auto;
  border-right:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.017),transparent 40%);
  backdrop-filter:blur(8px);
}
.rail-inner{ display:flex; flex-direction:column; gap:22px; padding:20px 14px 26px; min-height:100%; }
.rail-group{ display:flex; flex-direction:column; gap:3px; }
.rail-label{ padding:0 12px 7px; font-size:9.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-3); }

.rail-item{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:9.5px 12px; border-radius:11px; text-decoration:none;
  color:var(--text-2); font-size:13.2px; font-weight:550;
  transition:.18s var(--ease);
}
.rail-item .ri-ico{ width:17px; height:17px; color:var(--text-3); transition:.18s var(--ease); }
.rail-item:hover{ color:var(--text); background:rgba(255,255,255,.035); }
.rail-item:hover .ri-ico{ color:var(--gold-300); }
.rail-item.is-active{ color:var(--gold-100); background:var(--grad-gold-soft); }
.rail-item.is-active .ri-ico{ color:var(--gold-300); }
.rail-item.is-active::before{
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--grad-gold);
  box-shadow:0 0 12px rgba(232,198,106,.7);
}

.rail-cta{
  position:relative; margin-top:auto; padding:18px 16px 16px; overflow:hidden;
  background:linear-gradient(165deg,rgba(216,176,96,.1),rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.rc-ring{
  position:absolute; top:-58px; right:-58px; width:140px; height:140px; border-radius:50%;
  border:1px solid rgba(232,198,106,.22); box-shadow:inset 0 0 40px rgba(232,198,106,.12);
}
.rail-cta strong{ display:block; font-family:'Cinzel',Georgia,serif; font-size:14.5px; letter-spacing:.6px; color:var(--gold-100); }
.rail-cta p{ margin:5px 0 13px; font-size:11.8px; line-height:1.5; color:var(--text-3); }

.rail-scrim{ display:none; }

/* ============================================================
   MAIN
   ============================================================ */
.main{ grid-area:main; position:relative; z-index:2; min-width:0; padding:26px 30px 0; }

/* ---------- HERO ---------- */
.hero{
  position:relative; display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,.98fr);
  gap:26px; align-items:center;
  padding:46px 44px; margin-bottom:22px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(140deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 46%,rgba(216,176,96,.05) 100%);
  box-shadow:var(--shadow-2);
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 320px at 82% 14%, rgba(232,198,106,.16), transparent 66%),
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(232,198,106,.022) 34px 35px);
}
.hero::before{
  content:""; position:absolute; inset:0; border-radius:var(--r-xl); padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,243,196,.45),transparent 36%,transparent 64%,rgba(201,152,47,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.hero-inner{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; height:29px; padding:0 14px;
  background:rgba(216,176,96,.1); border:1px solid var(--line-strong); border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold-200);
}
.eb-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-300); box-shadow:0 0 9px var(--gold-300); }

.hero-title{
  margin:20px 0 0; font-family:'Cinzel',Georgia,serif; font-weight:700;
  font-size:clamp(34px,4.1vw,54px); line-height:1.06; letter-spacing:-.4px;
}
.hero-title .line{ display:block; }
.hero-title .gold{
  background:var(--grad-gold); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s linear infinite;
  filter:drop-shadow(0 4px 26px rgba(209,163,63,.28));
}
@keyframes shimmer{ to{ background-position:220% center; } }

.hero-sub{ max-width:52ch; margin:16px 0 0; font-size:14.5px; line-height:1.68; color:var(--text-2); }
.hero-sub b{ color:var(--text); font-weight:650; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:20px; margin:26px 0 0; padding:0; list-style:none; }
.hero-trust li{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-3); }
.hero-trust li span{ width:14px; height:14px; color:var(--gold-400); }

/* hero card */
.hero-card{
  position:relative; padding:16px; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:rgba(8,8,11,.6); backdrop-filter:blur(16px); box-shadow:var(--shadow-1);
}
.hc-head{ display:flex; align-items:center; gap:9px; padding:2px 4px 13px; border-bottom:1px solid var(--line-soft); }
.hc-live{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--green); }
.hc-title{ font-size:11.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--text-3); margin-left:auto; }

.hc-list{ list-style:none; margin:0; padding:9px 0 0; display:flex; flex-direction:column; gap:1px; }
.hc-list li{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:9px; transition:background .2s; }
.hc-list li:hover{ background:rgba(255,255,255,.03); }
.hc-rank{ width:17px; font-size:10.5px; font-weight:800; color:var(--text-3); font-variant-numeric:tabular-nums; }
.hc-rank.top{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hc-face{
  width:26px; height:26px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  font-size:11px; font-weight:800; color:#150e04; background:var(--grad-gold);
}
.hc-meta{ min-width:0; }
.hc-meta b{ display:block; font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hc-meta span{ font-size:10.5px; color:var(--text-3); }
.hc-amt{ margin-left:auto; font-size:12.8px; font-weight:750; color:var(--green); font-variant-numeric:tabular-nums; }

.hc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:11px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:11px; color:var(--text-3);
}
.hc-foot b{ color:var(--gold-200); }
.hc-verify{ color:var(--gold-300); cursor:pointer; font-weight:600; }
.hc-verify:hover{ color:var(--gold-100); }

/* ---------- TICKER ---------- */
.ticker{
  position:relative; overflow:hidden; height:46px; margin-bottom:22px;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:rgba(255,255,255,.018);
}
.ticker-track{ display:flex; align-items:center; gap:10px; height:100%; width:max-content; padding-left:14px; animation:slide 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.tk{
  display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px;
  border:1px solid var(--line-soft); border-radius:99px; background:rgba(255,255,255,.025);
  font-size:11.5px; color:var(--text-2); white-space:nowrap;
}
.tk i{ width:12px; height:12px; color:var(--gold-400); font-style:normal; display:inline-flex; }
.tk b{ color:var(--text); font-weight:600; }
.tk .win{ color:var(--green); font-weight:750; font-variant-numeric:tabular-nums; }
.ticker-fade{ position:absolute; top:0; bottom:0; width:70px; pointer-events:none; z-index:2; }
.ticker-fade.left{ left:0; background:linear-gradient(90deg,#08080b,transparent); }
.ticker-fade.right{ right:0; background:linear-gradient(270deg,#08080b,transparent); }

/* ---------- NOTICE ---------- */
.notice{
  display:flex; align-items:center; gap:14px; padding:15px 20px; margin-bottom:34px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(100deg,rgba(216,176,96,.085),rgba(255,255,255,.012));
}
.notice-ico{ width:19px; height:19px; color:var(--gold-300); flex:0 0 auto; }
.notice p{ margin:0; font-size:13px; color:var(--text-2); }
.notice p b{ color:var(--text); font-weight:650; }
.notice .btn{ margin-left:auto; flex:0 0 auto; }

/* ---------- SECTIONS ---------- */
.section{ margin-bottom:42px; }
.sec-head{ display:flex; align-items:flex-end; gap:16px; margin-bottom:17px; }
.sec-head h2{
  display:flex; align-items:center; gap:10px; margin:0;
  font-family:'Cinzel',Georgia,serif; font-size:21px; font-weight:700; letter-spacing:.4px; color:var(--text);
}
.sec-head h2 span{ width:18px; height:18px; color:var(--gold-300); }
.sec-head p{ margin:5px 0 0; font-size:12.5px; color:var(--text-3); }
.sec-count{
  display:inline-flex; align-items:center; gap:7px; margin-left:auto; padding:5px 12px;
  border:1px solid var(--line-soft); border-radius:99px;
  font-size:10.5px; font-weight:650; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-3);
  white-space:nowrap;
}

/* ---------- GAME GRID ---------- */
.game-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(188px,1fr)); gap:14px; }

.game{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:17px 16px 15px; overflow:hidden; cursor:pointer; text-align:left;
  color:inherit; font:inherit;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.game::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s var(--ease);
  background:radial-gradient(330px 190px at 50% -20%, rgba(232,198,106,.18), transparent 70%);
}
.game::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1px; opacity:0;
  background:linear-gradient(150deg,rgba(255,243,196,.75),rgba(201,152,47,.18) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .3s var(--ease); pointer-events:none;
}
.game:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(232,198,106,.1); }
.game:hover::before,.game:hover::after{ opacity:1; }
.game:hover .g-lock{ opacity:1; transform:translateY(0) scale(1); }
.game:hover .g-ico{ color:var(--gold-200); transform:translateY(-2px) scale(1.04); }
.game:hover .g-ico-glow{ opacity:1; }
.game:active{ transform:translateY(-1px) scale(.988); }

.g-top{ display:flex; align-items:flex-start; gap:10px; position:relative; z-index:2; }
.g-ico-wrap{ position:relative; width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; }
.g-ico-glow{
  position:absolute; inset:0; border-radius:14px; opacity:.55; transition:opacity .3s var(--ease);
  background:radial-gradient(circle at 50% 45%, rgba(232,198,106,.3), transparent 68%);
  filter:blur(6px);
}
.g-ico{
  position:relative; width:46px; height:46px; padding:10px; color:var(--gold-300);
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(160deg,rgba(232,198,106,.14),rgba(255,255,255,.02));
  transition:.3s var(--ease);
}
.g-ico svg{ stroke-width:1.55; }

.g-tag{
  margin-left:auto; padding:3.5px 8px; border-radius:6px;
  font-size:9px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
}
.g-tag.hot{ color:#2a1508; background:linear-gradient(135deg,#ffd27a,#e08b2f); }
.g-tag.new{ color:#04150d; background:linear-gradient(135deg,#8ff0c0,#3fbf86); }
.g-tag.vip{ color:#1a1206; background:var(--grad-gold); }
.g-tag.beta{ color:var(--text-2); background:rgba(255,255,255,.07); border:1px solid var(--line-soft); }

.g-body{ position:relative; z-index:2; }
.g-name{ display:block; font-family:'Cinzel',Georgia,serif; font-size:15px; font-weight:600; letter-spacing:.5px; color:var(--text); }
.g-desc{ display:block; margin-top:3px; font-size:11.5px; line-height:1.45; color:var(--text-3); }

.g-foot{
  position:relative; z-index:2; display:flex; align-items:center; gap:9px;
  padding-top:11px; border-top:1px solid var(--line-soft);
}
.g-players{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.g-edge{ margin-left:auto; font-size:10.5px; font-weight:650; color:var(--gold-400); letter-spacing:.3px; }

.g-lock{
  position:absolute; top:13px; right:13px; z-index:3;
  display:grid; place-items:center; width:26px; height:26px; padding:6px;
  color:var(--gold-200); background:rgba(10,8,4,.75); border:1px solid var(--line-strong);
  border-radius:8px; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-5px) scale(.9); transition:.26s var(--ease);
}

/* ---------- LIVE BETS TABLE ---------- */
.table-wrap{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:rgba(255,255,255,.016);
}
.bets{ width:100%; border-collapse:collapse; font-size:12.8px; }
.bets th{
  padding:12px 18px; text-align:left; font-size:10px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--text-3); border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);
}
.bets td{ padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.028); color:var(--text-2); }
.bets tr:last-child td{ border-bottom:0; }
.bets .num{ text-align:right; font-variant-numeric:tabular-nums; }
.bets tbody tr{ animation:rowIn .45s var(--ease) both; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(-7px); } }
.bt-game{ display:flex; align-items:center; gap:9px; color:var(--text); font-weight:550; }
.bt-game span{ width:15px; height:15px; color:var(--gold-400); }
.bt-user{ color:var(--text); }
.bt-mult{ font-weight:700; color:var(--gold-200); }
.bt-pay.up{ color:var(--green); font-weight:700; }
.bt-pay.down{ color:var(--red); font-weight:700; }

.bets-lock{
  position:absolute; inset:auto 0 0 0; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:14px;
  height:96px; padding:0 20px;
  background:linear-gradient(180deg,rgba(5,5,6,0),rgba(5,5,6,.93) 52%);
}
.bets-lock span[data-icon]{ width:16px; height:16px; color:var(--gold-300); }
.bets-lock p{ margin:0; font-size:12.5px; color:var(--text-2); }
.bets-lock p b{ color:var(--gold-200); }

/* ---------- STEPS ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:14px; margin:0; padding:0; list-style:none; counter-reset:s; }
.steps li{
  position:relative; padding:24px 20px 20px; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.step-n{
  display:block; font-family:'Cinzel',Georgia,serif; font-size:30px; font-weight:700; line-height:1;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.85;
}
.steps h3{ margin:12px 0 6px; font-size:14.5px; font-weight:650; color:var(--text); }
.steps p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--text-3); }
.steps code{
  padding:2px 7px; border-radius:6px; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:11.5px; color:var(--gold-200); background:rgba(216,176,96,.1); border:1px solid var(--line);
}

/* ---------- FOOTER ---------- */
.footer{ margin-top:16px; padding:34px 0 40px; border-top:1px solid var(--line-soft); }
.foot-brand{ display:flex; align-items:flex-start; gap:13px; max-width:430px; }
.foot-brand strong{ font-family:'Cinzel',Georgia,serif; font-size:14.5px; letter-spacing:1.4px; }
.foot-brand strong em{ font-style:normal; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot-brand p{ margin:6px 0 0; font-size:11.8px; line-height:1.6; color:var(--text-3); }

.foot-cols{ display:flex; flex-wrap:wrap; gap:46px; margin:26px 0 24px; }
.foot-cols div{ display:flex; flex-direction:column; gap:7px; }
.foot-cols span{ font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-3); margin-bottom:2px; }
.foot-cols a{ font-size:12.5px; color:var(--text-2); text-decoration:none; transition:color .18s; }
.foot-cols a:hover{ color:var(--gold-200); }

.foot-legal{ margin:0; padding-top:20px; border-top:1px solid rgba(255,255,255,.035); font-size:11px; line-height:1.65; color:var(--text-3); max-width:80ch; }

/* ============================================================
   CHAT
   ============================================================ */
.chat{
  grid-area:chat; position:sticky; top:var(--top-h); z-index:45;
  display:flex; flex-direction:column; height:calc(100vh - var(--top-h));
  border-left:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.017),transparent 30%);
  backdrop-filter:blur(8px);
}
.chat-head{ display:flex; align-items:center; gap:10px; padding:15px 16px 13px; border-bottom:1px solid var(--line-soft); }
.ch-title{ display:flex; align-items:center; gap:8px; font-family:'Cinzel',Georgia,serif; font-size:13.5px; font-weight:600; letter-spacing:.9px; color:var(--text); }
.ch-title span{ width:15px; height:15px; color:var(--gold-300); }
.ch-online{ display:flex; align-items:center; gap:6px; margin-left:auto; font-size:11px; color:var(--text-3); }
.ch-online b{ color:var(--green); font-weight:650; font-variant-numeric:tabular-nums; }

.rain-bar{
  display:flex; align-items:center; gap:11px; margin:12px 13px; padding:11px 13px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(120deg,rgba(216,176,96,.12),rgba(255,255,255,.015));
  transition:.2s var(--ease);
}
.rain-bar:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.rb-ico{ width:19px; height:19px; color:var(--gold-300); flex:0 0 auto; }
.rb-body{ display:flex; flex-direction:column; line-height:1.28; min-width:0; }
.rb-body b{ font-size:12.5px; color:var(--gold-100); font-weight:650; }
.rb-body span{ font-size:10.8px; color:var(--text-3); }
.rb-body em{ font-style:normal; color:var(--gold-300); font-weight:650; font-variant-numeric:tabular-nums; }
.rb-lock{ width:14px; height:14px; margin-left:auto; color:var(--text-3); flex:0 0 auto; }

.chat-log{ flex:1; overflow-y:auto; padding:6px 13px 12px; display:flex; flex-direction:column; gap:11px; }
.msg{ display:flex; gap:9px; animation:msgIn .4s var(--ease) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } }
.msg-face{
  width:26px; height:26px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  font-size:11px; font-weight:800; color:#150e04;
}
.msg-body{ min-width:0; }
.msg-head{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.msg-user{ font-size:11.8px; font-weight:650; color:var(--text); }
.msg-badge{ padding:1.5px 5px; border-radius:4px; font-size:8.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.msg-badge.vip{ color:#1a1206; background:var(--grad-gold); }
.msg-badge.mod{ color:#04150d; background:linear-gradient(135deg,#8ff0c0,#3fbf86); }
.msg-badge.whale{ color:#0a1424; background:linear-gradient(135deg,#a9d2ff,#5f9ee0); }
.msg-text{ font-size:12.3px; line-height:1.5; color:var(--text-2); word-wrap:break-word; }
.msg-text .hl{ color:var(--gold-200); font-weight:600; }

.chat-input{
  display:flex; align-items:center; gap:9px; margin:0 13px 14px; padding:11px 13px; cursor:pointer;
  border:1px solid var(--line-soft); border-radius:var(--r); background:rgba(255,255,255,.028);
  transition:.2s var(--ease);
}
.chat-input:hover{ border-color:var(--line-strong); background:rgba(216,176,96,.055); }
.chat-input span[data-icon]{ width:14px; height:14px; color:var(--text-3); flex:0 0 auto; }
.ci-text{ flex:1; font-size:12.3px; color:var(--text-3); }
.ci-send{ color:var(--gold-400) !important; }

.chat-fab{
  position:fixed; right:18px; bottom:18px; z-index:55;
  display:none; place-items:center; width:52px; height:52px; padding:15px;
  color:#1a1206; background:var(--grad-gold); border:0; border-radius:50%;
  box-shadow:var(--shadow-gold); cursor:pointer;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-root{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; }
.modal-root[hidden]{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:rgba(2,2,3,.82); backdrop-filter:blur(9px); animation:fade .28s var(--ease); }
@keyframes fade{ from{ opacity:0; } }

.modal{
  position:relative; width:100%; max-height:calc(100vh - 44px); overflow-y:auto;
  padding:34px 32px 30px; border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(165deg,#111015 0%,#09090c 52%,#0d0b08 100%);
  box-shadow:var(--shadow-2), 0 0 0 1px rgba(232,198,106,.07), inset 0 1px 0 rgba(255,255,255,.05);
  animation:pop .38s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.96); } }
.modal::before{
  content:""; position:absolute; inset:0; border-radius:var(--r-xl); padding:1px; pointer-events:none;
  background:linear-gradient(150deg,rgba(255,243,196,.55),transparent 30%,transparent 70%,rgba(201,152,47,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.modal-lock{ max-width:460px; text-align:center; }
.modal-dep{ max-width:520px; }

.modal-x{
  position:absolute; top:15px; right:15px; z-index:4;
  display:grid; place-items:center; width:32px; height:32px; padding:8px;
  color:var(--text-3); background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  border-radius:9px; cursor:pointer; transition:.2s var(--ease);
}
.modal-x:hover{ color:var(--text); background:rgba(255,255,255,.08); }

/* ---------- locked modal ---------- */
.lock-crest{ position:relative; width:84px; height:84px; margin:4px auto 20px; display:grid; place-items:center; }
.lc-glow{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,rgba(232,198,106,.3),transparent 66%);
  animation:breathe 3.4s var(--ease) infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.18); opacity:.65; } }
.lc-lock{
  position:relative; width:42px; height:42px; padding:0; color:var(--gold-200);
  stroke-width:1.5; filter:drop-shadow(0 4px 14px rgba(232,198,106,.45));
}
.lock-crest::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(232,198,106,.3);
  box-shadow:inset 0 0 26px rgba(232,198,106,.14);
}

.lock-game{
  display:inline-block; margin-bottom:10px; padding:4px 12px;
  border:1px solid var(--line); border-radius:99px; background:rgba(216,176,96,.09);
  font-size:10px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; color:var(--gold-200);
}
.modal-lock h2{
  margin:0 0 12px; font-family:'Cinzel',Georgia,serif; font-size:25px; font-weight:700;
  line-height:1.28; letter-spacing:.2px; color:var(--text);
}
.lock-copy{ margin:0 0 22px; font-size:14px; line-height:1.68; color:var(--text-2); }
.lock-copy b{ color:var(--gold-200); font-weight:650; }

.lock-meter{ margin:0 0 22px; }
.lm-track{ height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.lm-fill{
  width:3%; height:100%; border-radius:99px; background:var(--grad-gold);
  box-shadow:0 0 14px rgba(232,198,106,.55);
  animation:meter 1.5s var(--ease) both;
}
@keyframes meter{ from{ width:0; } }
.lm-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--text-3); }
.lm-labels b{ color:var(--text-2); }

.modal-actions{ display:flex; flex-direction:column; gap:9px; }

/* ---------- deposit modal ---------- */
.dep-head{ margin-bottom:22px; padding-right:34px; }
.dep-badge{
  display:inline-block; margin-bottom:11px; padding:4px 11px;
  border:1px solid var(--line); border-radius:99px; background:rgba(216,176,96,.09);
  font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-200);
}
.dep-head h2{ margin:0 0 8px; font-family:'Cinzel',Georgia,serif; font-size:29px; font-weight:700; letter-spacing:.4px; color:var(--text); }
.dep-head p{ margin:0; font-size:13px; line-height:1.62; color:var(--text-2); }

.field{ display:block; margin-bottom:18px; }
.field-label{ display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--text-3); }
.field-label em{ font-style:normal; color:var(--gold-400); letter-spacing:.8px; }
.field-box{
  display:flex; align-items:center; gap:10px; height:46px; padding:0 14px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:rgba(255,255,255,.028);
  transition:.2s var(--ease);
}
.field-box:focus-within{ border-color:var(--line-strong); background:rgba(216,176,96,.05); box-shadow:0 0 0 3px rgba(216,176,96,.07); }
.fb-ico{ width:15px; height:15px; color:var(--text-3); flex:0 0 auto; }
.field-box input{
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font:inherit; font-size:14px; font-weight:550; color:var(--text);
}
.field-box input::placeholder{ color:var(--text-3); font-weight:400; }
.field-hint{ display:block; margin-top:7px; font-size:11px; color:var(--text-3); }
.field-hint.err{ color:var(--red); }

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  height:34px; padding:0 15px; border:1px solid var(--line-soft); border-radius:10px;
  background:rgba(255,255,255,.028); color:var(--text-2);
  font:inherit; font-size:12.5px; font-weight:650; cursor:pointer;
  transition:.18s var(--ease);
}
.chip:hover{ color:var(--gold-200); border-color:var(--line-strong); }
.chip.is-active{
  color:#1a1206; background:var(--grad-gold); border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(209,163,63,.7);
}

.paybox{
  margin:4px 0 18px; padding:15px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(216,176,96,.085),rgba(255,255,255,.012));
}
.pb-top{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.pb-label{ font-size:10.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--gold-200); }
.pb-bot{ display:flex; align-items:center; gap:6px; margin-left:auto; font-size:10.5px; color:var(--text-3); }
.pb-bot b{ color:var(--text-2); }

.pb-cmd{ display:flex; align-items:center; gap:10px; padding:5px 5px 5px 15px; border:1px solid var(--line-soft); border-radius:var(--r); background:rgba(0,0,0,.42); }
.pb-cmd code{
  flex:1; min-width:0; overflow-x:auto; white-space:nowrap;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:15.5px; font-weight:600; letter-spacing:.3px; color:var(--gold-100);
}
.pb-cmd code::-webkit-scrollbar{ height:0; }

.btn-copy{
  position:relative; flex:0 0 auto; height:38px; padding:0 15px; border-radius:11px;
  color:#1a1206; background:var(--grad-gold); border:0; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700;
  box-shadow:0 6px 18px -8px rgba(209,163,63,.7);
  transition:.2s var(--ease);
}
.btn-copy:hover{ transform:translateY(-1px); }
.btn-copy span{ display:inline-flex; align-items:center; gap:7px; transition:opacity .2s, transform .25s var(--ease); }
.btn-copy svg{ width:15px; height:15px; stroke-width:2.2; }
.btn-copy .cp-done{ position:absolute; inset:0; display:inline-flex; align-items:center; justify-content:center; gap:7px; opacity:0; transform:translateY(7px); }
.btn-copy.is-done .cp-idle{ opacity:0; transform:translateY(-7px); }
.btn-copy.is-done .cp-done{ opacity:1; transform:translateY(0); }

.pb-note{ margin:11px 0 0; font-size:11px; line-height:1.55; color:var(--text-3); }
.pb-note b{ color:var(--gold-200); }

.dep-status{
  display:flex; align-items:center; gap:13px; padding:13px 15px; margin-bottom:18px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:rgba(255,255,255,.022);
  transition:.3s var(--ease);
}
.ds-spin{
  width:17px; height:17px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(232,198,106,.22); border-top-color:var(--gold-300);
  animation:spin 1s linear infinite;
}
.ds-body{ display:flex; flex-direction:column; line-height:1.4; }
.ds-body b{ font-size:12.5px; font-weight:650; color:var(--text); }
.ds-body span{ font-size:11.3px; color:var(--text-3); }
.dep-status[data-state="checking"]{ border-color:var(--line-strong); background:rgba(216,176,96,.06); }
.dep-status[data-state="none"]{ border-color:rgba(226,100,95,.3); background:rgba(226,100,95,.06); }
.dep-status[data-state="none"] .ds-spin{ border-color:rgba(226,100,95,.3); border-top-color:var(--red); animation:none; }

.dep-foot{ display:flex; flex-wrap:wrap; gap:16px; margin:18px 0 0; padding:15px 0 0; list-style:none; border-top:1px solid var(--line-soft); }
.dep-foot li{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-3); }
.dep-foot li span{ width:13px; height:13px; color:var(--gold-400); }

/* ============================================================
   TOASTS
   ============================================================ */
.toasts{ position:fixed; right:20px; bottom:20px; z-index:120; display:flex; flex-direction:column-reverse; gap:9px; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:11px; max-width:330px; padding:12px 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(13,12,16,.96); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-2); font-size:12.8px; color:var(--text-2);
  animation:toastIn .38s var(--ease) both;
}
.toast.out{ animation:toastOut .3s var(--ease) both; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(28px); } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(28px); } }
.toast span[data-icon]{ width:16px; height:16px; color:var(--gold-300); flex:0 0 auto; }
.toast b{ color:var(--text); font-weight:650; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1400px){
  .top-stats .tstat:nth-child(3){ display:none; }
}
@media (max-width:1240px){
  body{ grid-template-columns:var(--rail-w) minmax(0,1fr); grid-template-areas:"top top" "rail main"; }
  .chat{ display:none; }
  .chat-fab{ display:grid !important; }
  .chat.is-open{
    display:flex; position:fixed; inset:var(--top-h) 0 0 auto; width:min(370px,90vw); z-index:70;
    background:#08080b; box-shadow:-24px 0 60px rgba(0,0,0,.7);
    animation:slideIn .32s var(--ease);
  }
  @keyframes slideIn{ from{ transform:translateX(100%); } }
  .chat.is-open .only-mobile{ display:grid !important; }
  .hero{ grid-template-columns:1fr; padding:40px 32px; }
}
@media (max-width:980px){
  .top-stats{ display:none; }
  .main{ padding:20px 20px 0; }
  .hero{ padding:34px 24px; }
  .notice{ flex-wrap:wrap; }
  .notice .btn{ margin-left:0; width:100%; }
}
@media (max-width:860px){
  body{ grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "main"; }
  .rail{
    position:fixed; top:var(--top-h); left:0; bottom:0; width:270px; z-index:80;
    background:#08080b; transform:translateX(-102%); transition:transform .3s var(--ease);
    box-shadow:24px 0 60px rgba(0,0,0,.7); height:auto;
  }
  .rail.is-open{ transform:none; }
  .rail-scrim{ display:block; position:fixed; inset:var(--top-h) 0 0; z-index:75; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
  .rail-scrim[hidden]{ display:none; }
  .topbar .only-mobile{ display:grid !important; }
  .brand-text small{ display:none; }
  .game-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
  .hero-title{ font-size:clamp(28px,8vw,40px); }
  .bets td:nth-child(4),.bets th:nth-child(4){ display:none; }
}
@media (max-width:560px){
  :root{ --top-h:60px; }
  .main{ padding:16px 14px 0; }
  .hero{ padding:28px 18px; border-radius:var(--r-lg); }
  .hero-actions .btn{ width:100%; }
  .modal{ padding:28px 20px 24px; }
  .dep-head h2{ font-size:24px; }
  .modal-lock h2{ font-size:21px; }
  .pb-cmd code{ font-size:13.5px; }
  .foot-cols{ gap:28px; }
  .bets td:nth-child(2),.bets th:nth-child(2){ display:none; }
  .balance-chip .bal i{ display:none; }
  .btn-gold span{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}