:root{--bg:#070812;--panel:rgba(255,255,255,.06);--panel2:rgba(255,255,255,.09);--text:#f3f4f8;--muted:rgba(255,255,255,.72);--line:rgba(255,255,255,.10);--gold:#f6d26b;--pink:#ff4fd8;--cyan:#35d4ff;--good:#4cffb4;--bad:#ff5c7a;--shadow:0 18px 60px rgba(0,0,0,.45);--r:18px}
*{box-sizing:border-box}html,body{height:100%}

/* Keep scrollbar space stable (prevents layout shift when locking scroll) */
html{overflow-y:scroll;scrollbar-gutter:stable}

body{margin:0;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:radial-gradient(900px 600px at 20% 10%, rgba(255,79,216,.14), transparent 55%),radial-gradient(900px 700px at 80% 20%, rgba(53,212,255,.12), transparent 55%),radial-gradient(1200px 900px at 50% 100%, rgba(246,210,107,.10), transparent 55%),var(--bg);overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px}
a{color:inherit;text-decoration:none}.sep{display:inline-block;width:12px}b{font-weight:800}

.topbar{position:sticky;top:0;z-index:9999;background:rgba(7,8,18,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.06em}
.logo-dot{width:14px;height:14px;border-radius:99px;background:linear-gradient(135deg,var(--pink),var(--cyan));box-shadow:0 0 18px rgba(255,79,216,.35)}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.user-chip{opacity:.9;border:1px solid var(--line);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.04)}
.pill{padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);transition:.18s transform,.18s background,.18s border}
.pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.pill.ghost{background:transparent}
.pill.danger{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.12)}
.pill.danger:hover{background:rgba(255,92,122,.18)}
.pill.good{border-color:rgba(76,255,180,.35);background:rgba(76,255,180,.10)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.grid2{grid-template-columns:1fr}}

.card{border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));border-radius:var(--r);box-shadow:var(--shadow);padding:16px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:-2px;background:radial-gradient(600px 240px at var(--mx,30%) var(--my,0%), rgba(255,79,216,.20), transparent 60%);pointer-events:none;opacity:.9}
.card h2{margin:0 0 6px 0;font-size:18px}
.kicker{opacity:.85;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.hr{height:1px;background:var(--line);margin:12px 0}

.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.badge{font-size:12px;opacity:.9;border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04)}

.countdown{font-weight:900;font-size:22px;letter-spacing:.06em}
.countdown.pulse{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

.nums{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.num{min-width:78px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18);font-weight:900;letter-spacing:.18em;text-align:center;position:relative}
.num.big{font-size:26px;min-width:110px}
.num.spin{animation:spinFlash .55s ease-in-out}
@keyframes spinFlash{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-2px) scale(1.05)}100%{transform:translateY(0) scale(1)}}

.specials{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill-mini{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:800;letter-spacing:.12em;font-size:12px}

.form{display:flex;gap:10px;flex-wrap:wrap}
.input{padding:12px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--text);outline:none}
.input:focus{border-color:rgba(53,212,255,.45);box-shadow:0 0 0 2px rgba(53,212,255,.14)}

.btn{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg, rgba(255,79,216,.22), rgba(53,212,255,.18));color:var(--text);font-weight:900;cursor:pointer;transition:.18s transform,.18s filter}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
.table th{opacity:.85;font-weight:900}
.right{text-align:right}
.muted{opacity:.75}
.good{color:var(--good)}
.bad{color:var(--bad)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(0,0,0,.65);border:1px solid var(--line);padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.18s opacity,.18s transform;z-index:99}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

.footer{margin-top:26px;border-top:1px solid var(--line);background:rgba(0,0,0,.18)}
.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 16px}
.foot-title{font-weight:900;margin-bottom:6px}
.foot-links{display:flex;gap:12px;flex-wrap:wrap}
.foot-links a{opacity:.92;border-bottom:1px dashed rgba(255,255,255,.30)}
.foot-note{opacity:.7;font-size:12px;margin-top:8px}
.foot-right{display:flex;align-items:center;gap:10px;opacity:.75}
.spark{width:10px;height:10px;border-radius:99px;background:linear-gradient(135deg,var(--gold),var(--pink));box-shadow:0 0 18px rgba(246,210,107,.35)}

.auth-card{max-width:520px;margin:10px auto}
.error{border:1px solid rgba(255,92,122,.35);background:rgba(255,92,122,.10);padding:10px 12px;border-radius:14px;margin:10px 0}
.success{border:1px solid rgba(76,255,180,.35);background:rgba(76,255,180,.08);padding:10px 12px;border-radius:14px;margin:10px 0}
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:780px){.subgrid{grid-template-columns:1fr}}

/* =========================================================
   Mobile Hamburger Menu (Xianxia style, CLEAN)
========================================================= */

/* If JS sets --sbw, this prevents any jump when locking */
body.nav-open{overflow:hidden;padding-right:var(--sbw,0px)}

/* Stop topbar pseudo overlay stealing clicks */
.topbar *::before,.topbar *::after,.wrap::before,.wrap::after{pointer-events:none !important}

/* Hamburger button (id + class supported) */
#hamburgerBtn,.hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  position:relative;
  z-index:1000000;
  pointer-events:auto;
}
#hamburgerBtn span,.hamburger span{
  display:block;width:18px;height:2px;border-radius:99px;
  background:rgba(255,255,255,.92);
  transition:transform .18s ease,opacity .18s ease;
}
body.nav-open #hamburgerBtn span:nth-child(1),
body.nav-open .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open #hamburgerBtn span:nth-child(2),
body.nav-open .hamburger span:nth-child(2){opacity:0}
body.nav-open #hamburgerBtn span:nth-child(3),
body.nav-open .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile: show burger, hide desktop nav */
@media (max-width:860px){
  .nav.nav-desktop{display:none}
  #hamburgerBtn,.hamburger{display:inline-flex}
  .topbar-inner{gap:10px}
}

/* Backdrop */
#mnavBackdrop,.mnav-backdrop{
  position:fixed; inset:0;
  z-index:99990;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  pointer-events:none; /* closed: don't block clicks */
}
body.nav-open #mnavBackdrop,
body.nav-open .mnav-backdrop{pointer-events:auto}
#mnavBackdrop[hidden],.mnav-backdrop[hidden]{display:none !important}

/* Drawer (fixed right) */
#mobileNav,.mnav{
  position:fixed; top:0; right:0;
  height:100%;
  width:min(86vw,360px);
  z-index:99999;
  background:#0b1220;
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-28px 0 90px rgba(0,0,0,.85);
  transform:translateX(110%);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.nav-open #mobileNav,
body.nav-open .mnav{transform:translateX(0)}
@media (max-width:420px){#mobileNav,.mnav{width:100vw}}

/* Header: sticky glass */
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  position:sticky; top:0; z-index:3;
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.mnav-title{font-weight:900;letter-spacing:.06em}
.mnav-close{width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}

/* Body: scroll area (leave room for footer) */
.mnav-body{
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 12px 110px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Buttons + user chip (xianxia panel) */
.mnav-link,.mnav-user{
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,26,43,.92);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 14px 40px rgba(0,0,0,.40);
}
.mnav-link:hover{filter:brightness(1.06)}
.mnav-link.danger{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.16)}

/* Divider (optional) */
.mnav-hr{height:1px;background:rgba(255,255,255,.08);margin:6px 4px}

/* Footer: sticky bottom action area (requires .mnav-footer wrapper) */
.mnav-footer{
  position:sticky;
  bottom:0;
  z-index:4;
  padding:12px;
  background:rgba(11,18,32,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mnav-footer .mnav-link,
.mnav-footer .mnav-user{margin:0}

/* Inputs inside menu (if you render forms inside drawer later) */
#mobileNav input,#mobileNav select,#mobileNav textarea,
.mnav input,.mnav select,.mnav textarea{
  background:rgba(0,0,0,.36) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}


/* =========================
   Slot machine
========================= */
.slot-wrap{position:relative}
.slot-machine{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  padding:18px 10px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:16px;
  box-shadow: var(--shadow);
}
.slot-reel{
  width:86px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  user-select:none;
}
.slot-reel.slot-spin{
  animation: slotWobble .12s infinite linear;
}
@keyframes slotWobble{
  0%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}
.slot-history{display:flex;flex-direction:column;gap:10px}
.slot-row{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}
.slot-mini{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12)}
.slot-meta{display:flex;flex-direction:column;gap:2px;flex:1}
@media(max-width:420px){
  .slot-reel{width:74px;height:74px;font-size:40px}
}