/* ============================================================
   VANTA ROOBET REDESIGN — playful, vibrant, premium
   Loaded LAST. Overrides the visual layer onto existing HTML.
   Targets real classes: .topbar .brand .desktop-nav .balance-chip
   .side-rail .railbtn .app-shell .page-shell etc.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --rb-bg:#161230; --rb-bg2:#1e1840; --rb-card:#231c4d; --rb-card2:#2a2158;
  --rb-purple:#7c5cff; --rb-purple-lite:#9d84ff; --rb-teal:#2fe6c8;
  --rb-pink:#ff5c9d; --rb-yellow:#ffd84d; --rb-orange:#ff8a5c;
  --rb-text:#ffffff; --rb-dim:#a99fd4; --rb-line:rgba(255,255,255,.08);
  --rb-radius:20px; --rb-radius-lg:28px;
}

/* ---- base ---- */
body{
  background:var(--rb-bg) !important;
  font-family:'Nunito',system-ui,sans-serif !important;
  color:var(--rb-text) !important;
}
body::before{content:"";position:fixed;width:500px;height:500px;border-radius:50%;
  background:var(--rb-purple);filter:blur(140px);opacity:.35;top:-160px;left:-120px;z-index:0;pointer-events:none}
body::after{content:"";position:fixed;width:420px;height:420px;border-radius:50%;
  background:var(--rb-teal);filter:blur(140px);opacity:.2;top:180px;right:-160px;z-index:0;pointer-events:none}
.app-shell,.page-shell,.page-content{position:relative;z-index:1}

/* ---- TOP BAR ---- */
.topbar{
  background:rgba(30,24,64,.7) !important;backdrop-filter:blur(20px) !important;
  border-bottom:1px solid var(--rb-line) !important;padding:14px 26px !important;
}
.brand{font-family:'Nunito' !important;font-weight:900 !important;font-size:23px !important;letter-spacing:-.5px !important}
.brand span{background:var(--rb-teal) !important;color:#0a2820 !important;border-radius:10px !important;
  width:34px !important;height:34px !important;display:grid !important;place-items:center !important;box-shadow:0 6px 16px rgba(47,230,200,.4)}
.brand b{color:#fff !important}
.brand strong{color:var(--rb-teal) !important;font-weight:900 !important}

/* nav links → pill buttons */
.desktop-nav a{
  padding:10px 18px !important;border-radius:14px !important;color:var(--rb-dim) !important;
  font-weight:800 !important;font-size:15px !important;transition:.2s !important;border:0 !important;
}
.desktop-nav a:hover{background:var(--rb-card) !important;color:#fff !important}
.desktop-nav a.active,.desktop-nav a[class*="active"]{
  background:var(--rb-purple) !important;color:#fff !important;
  box-shadow:0 8px 20px rgba(124,92,255,.4) !important;
}
.nav-dot{background:var(--rb-pink) !important;color:#fff !important;border-radius:20px !important;
  font-weight:900 !important;padding:2px 7px !important;font-size:11px !important;margin-left:6px}

/* balance chip */
.balance-chip{
  background:var(--rb-card) !important;border:1px solid var(--rb-line) !important;
  border-radius:16px !important;padding:9px 18px !important;
}
.balance-chip small{color:var(--rb-dim) !important;font-weight:800 !important;font-size:10px !important;text-transform:uppercase;letter-spacing:.5px}
.balance-chip b{color:var(--rb-teal) !important;font-size:16px !important;font-weight:900 !important}

/* buttons */
.primary-btn,.login-btn[type="submit"]{
  background:linear-gradient(135deg,var(--rb-teal),#25c9ad) !important;color:#0a2820 !important;
  border:0 !important;border-radius:14px !important;font-weight:900 !important;padding:11px 22px !important;
  box-shadow:0 8px 20px rgba(47,230,200,.35) !important;transition:.2s !important;
}
.primary-btn:hover,.login-btn[type="submit"]:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px rgba(47,230,200,.5) !important}
.login-btn{color:var(--rb-dim) !important;font-weight:800 !important;border-radius:14px !important;transition:.2s}
.login-btn:hover{color:#fff !important}
.account-btn{
  background:linear-gradient(135deg,var(--rb-purple),var(--rb-pink)) !important;color:#fff !important;
  border-radius:14px !important;font-weight:900 !important;border:0 !important;width:42px;height:42px;
  box-shadow:0 6px 16px rgba(124,92,255,.35)}
.icon-btn{background:var(--rb-card) !important;border:1px solid var(--rb-line) !important;
  border-radius:14px !important;color:var(--rb-dim) !important;width:42px;height:42px;transition:.2s}
.icon-btn:hover{color:#fff !important;border-color:var(--rb-purple) !important}

/* ---- SIDE RAIL ---- */
.side-rail{background:rgba(30,24,64,.5) !important;border-right:1px solid var(--rb-line) !important;backdrop-filter:blur(10px)}
.railbtn{
  color:var(--rb-dim) !important;border-radius:16px !important;font-weight:800 !important;
  font-size:11px !important;gap:5px !important;transition:.2s !important;margin:3px 0;padding:12px 4px !important;
}
.railbtn span{font-size:22px !important}
.railbtn:hover{background:var(--rb-card) !important;color:#fff !important}
.railbtn.active,.railbtn[class*="active"]{
  background:var(--rb-purple) !important;color:#fff !important;box-shadow:0 6px 16px rgba(124,92,255,.35) !important}

/* ---- CARDS / SURFACES (broad) ---- */
.card,.tile,.panel,.surface,[class*="card"],[class*="panel"]{
  border-radius:var(--rb-radius) !important;
}

/* ---- GAME CARDS / COVERS ---- */
[class*="game-card"],[class*="gamecard"],.game-tile,.lobby-game,[class*="game"] [class*="cover"]{
  border-radius:var(--rb-radius) !important;overflow:hidden !important;transition:.25s !important;
}
[class*="game-card"]:hover,[class*="gamecard"]:hover,.game-tile:hover,.lobby-game:hover{
  transform:translateY(-6px) scale(1.03) !important;
}

/* ---- HERO / CAMPAIGN BANNERS ---- */
.campaign-banners,[class*="hero"],[class*="banner"]{border-radius:var(--rb-radius-lg) !important}
.campaign-banner{
  border-radius:var(--rb-radius-lg) !important;overflow:hidden !important;transition:.25s !important;
}
.campaign-banner:hover{transform:translateY(-4px) !important}

/* ---- BUTTONS everywhere ---- */
.btn,.btn-blue,.btn-line,button[class*="btn"]{border-radius:14px !important;font-weight:800 !important;font-family:'Nunito' !important}
.btn-blue{background:linear-gradient(135deg,var(--rb-purple),var(--rb-purple-lite)) !important;border:0 !important;
  box-shadow:0 8px 20px rgba(124,92,255,.35) !important}
.btn-blue:hover{transform:translateY(-2px) !important}

/* ---- SECTION HEADS ---- */
[class*="sec-head"] h2,.section-title,h2.hk{font-family:'Nunito' !important;font-weight:900 !important}

/* ---- headings use Nunito ---- */
h1,h2,h3,h4,.hk,[class*="title"]{font-family:'Nunito' !important;font-weight:900 !important;letter-spacing:-.3px}

/* ---- inputs ---- */
input,select,textarea{border-radius:14px !important;font-family:'Nunito' !important}
input:focus,select:focus{border-color:var(--rb-purple) !important;outline:none !important}

/* ---- flash messages ---- */
.skin-flash{border-radius:16px !important;font-weight:800 !important;font-family:'Nunito' !important}
.skin-flash.ok{background:rgba(47,230,200,.15) !important;color:var(--rb-teal) !important;border:1px solid rgba(47,230,200,.3) !important}

/* ---- mobile nav ---- */
.mobile-nav{background:rgba(30,24,64,.9) !important;backdrop-filter:blur(20px) !important;border-top:1px solid var(--rb-line) !important}
.mobile-nav a{color:var(--rb-dim) !important;font-weight:800 !important;font-size:11px}
.mobile-nav a.active,.mobile-nav a[class*="active"]{color:var(--rb-teal) !important}

/* ---- scrollbar ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--rb-bg)}
::-webkit-scrollbar-thumb{background:var(--rb-card2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--rb-purple)}