:root{
  --bg:#070d1c;
  --bg2:#050912;
  --text:#eef2ff;
  --muted:#9aa8c7;
  --gold:#c89b3c;
  --gold2:#f5d77a;
  --gold-glow:rgba(245,215,122,.45);
  --card:#0f1b36;
  --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
}

/* ===== RESET ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -10%, #152657 0%, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2) 70%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== TOP BAR ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,#0e1a38,#090f22);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.icon-btn{
  background:none;border:0;color:#fff;
  font-size:22px;cursor:pointer
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#fff3b0,var(--gold2),var(--gold));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 12px 30px var(--gold-glow);
}
.brand-title{font-weight:900;font-size:14px}
.brand-sub{font-size:11px;color:var(--muted)}
.top-actions{margin-left:auto;display:flex;gap:8px}

/* ===== BUTTONS ===== */
.btn{
  padding:8px 14px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.5px;
  border:0;cursor:pointer;
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
}
.btn-gold{
  background:linear-gradient(180deg,#fff1b3,var(--gold2),var(--gold));
  color:#1a1203;
  box-shadow:
    0 10px 22px rgba(200,155,60,.35),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ===== PROVIDER NAV ===== */
.nav{
  display:flex;gap:14px;
  padding:10px 12px;
  overflow-x:auto;
  backdrop-filter: blur(8px);
  background:rgba(10,16,35,.85);
}
.nav-item{
  white-space:nowrap;
  font-weight:800;
  position:relative;
  color:var(--muted);
}
.nav-item.active{
  color:#fff;
}
.nav-item.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
}

/* ===== SLIDER ===== */
.slider{
  position:relative;
  padding:14px;
}
.slides{
  height:180px;
  border-radius:18px;
  display:flex;align-items:center;
  padding:20px;
  background:
    radial-gradient(400px 200px at 80% 20%, rgba(245,215,122,.25), transparent 60%),
    linear-gradient(135deg,#2b1b63,#0d1e46);
  box-shadow:0 22px 55px rgba(0,0,0,.55);
}
.slide-title{font-size:20px;font-weight:900}
.slide-sub{
  color:var(--gold2);
  text-shadow:0 4px 18px rgba(245,215,122,.45);
}
.slide-btn{
  position:absolute;top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  border:0;color:#fff;
  width:34px;height:34px;
  border-radius:10px;
}
.slide-btn.left{left:6px}
.slide-btn.right{right:6px}

/* ===== NOTICE ===== */
.advisory{
  margin:12px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(200,155,60,.15);
  border:1px solid rgba(245,215,122,.35);
  color:#fff3b0;
}

/* ===== TABS ===== */
.tabs{
  display:flex;gap:10px;
  padding:10px 12px;
  overflow-x:auto;
}
.tab{
  padding:8px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
  font-weight:900;
  color:var(--muted);
}
.tab.active{
  color:#fff;
  background:
    linear-gradient(180deg,rgba(245,215,122,.22),rgba(200,155,60,.18));
  border-color:rgba(245,215,122,.55);
  box-shadow:0 8px 20px rgba(245,215,122,.25);
}

/* ===== GAME GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
  padding:14px;
}
.card{
  background:linear-gradient(180deg,#13255a,#0c1733);
  border-radius:18px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transition:.25s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 26px 60px rgba(0,0,0,.75),
    0 0 0 1px rgba(245,215,122,.35);
}
.card-thumb{
  height:120px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
}
.card-title{
  padding:10px;
  font-size:13px;
  font-weight:800;
}

/* ===== DRAWER ===== */
.drawer{
  position:fixed;top:0;left:0;
  width:260px;height:100%;
  transform:translateX(-100%);
  background:rgba(10,16,35,.95);
  backdrop-filter: blur(12px);
  box-shadow:12px 0 40px rgba(0,0,0,.7);
  z-index:30;
  transition:.3s ease;
}
.drawer.open{transform:none}
.drawer-head{
  display:flex;justify-content:space-between;
  padding:14px;
  border-bottom:1px solid var(--border);
}
.drawer a{
  display:block;
  padding:14px;
  border-bottom:1px solid var(--border);
}
.backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:none;z-index:25;
}
.backdrop.show{display:block}