/* ═══════════════════════════════════════════════════════════════════════
   Mognota — "Arcade" left sidebar (shared by Games hub, Home, Friends, Notifications,
   Profile, League, Support, Learn More, Settings)

   Each page carries its own copy of the old sidebar styles; this file is loaded
   after them and restyles it once for all pages: colourful icon tiles (one colour
   per destination, like the game tiles), soft pill rows, gold ring on the active
   page. Markup is untouched — items are recognised by their link / id.
   Dark by default, light under <html data-theme="light">.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme] body .hub-sidebar{
  background:#0a0a0d;border-right:1px solid rgba(255,255,255,.08);box-shadow:none;
  padding:18px 0 28px;gap:4px;
  --sbn-ink:#e8e8ec;--sbn-dim:#9aa6c4;--sbn-hover:rgba(255,255,255,.06);--sbn-line:rgba(255,255,255,.08);
}
html[data-theme="light"] body .hub-sidebar{
  background:#ffffff;border-right-color:rgba(30,40,80,.1);box-shadow:2px 0 24px rgba(30,40,80,.06);
  --sbn-ink:#14182b;--sbn-dim:#5b6580;--sbn-hover:rgba(30,40,80,.05);--sbn-line:rgba(30,40,80,.1);
}

/* one colour pair per destination */
html[data-theme] body .hub-sidebar .sb-nav-item{--nv1:#475569;--nv2:#0f172a}
html[data-theme] body .hub-sidebar .sb-nav-item[href="home.html"]{--nv1:#2f6bff;--nv2:#0b1b52}
html[data-theme] body .hub-sidebar .sb-nav-item[href="index.html"],
html[data-theme] body .hub-sidebar #sb-games-btn{--nv1:#ea580c;--nv2:#431407}
html[data-theme] body .hub-sidebar .sb-nav-item[href="friends.html"]{--nv1:#7a4dff;--nv2:#1c1050}
html[data-theme] body .hub-sidebar .sb-nav-item[href="notifications.html"]{--nv1:#db2777;--nv2:#500724}
html[data-theme] body .hub-sidebar .sb-nav-item[href="profile.html"],
html[data-theme] body .hub-sidebar #sb-profile-btn{--nv1:#0f9d8f;--nv2:#042f2e}
html[data-theme] body .hub-sidebar .sb-nav-item[href="league.html"]{--nv1:#d9a406;--nv2:#422006}
html[data-theme] body .hub-sidebar .sb-nav-item[href="support.html"]{--nv1:#0891b2;--nv2:#083344}
html[data-theme] body .hub-sidebar .sb-nav-item[href="learn-more.html"]{--nv1:#16a34a;--nv2:#052e16}
html[data-theme] body .hub-sidebar .sb-nav-item[href="settings.html"]{--nv1:#64748b;--nv2:#1e293b}

html[data-theme] body .hub-sidebar .sb-nav-item{
  margin:0 10px;padding:7px 12px 7px 7px;gap:12px;border:0;border-radius:16px;color:var(--sbn-dim);
}
html[data-theme] body .hub-sidebar .sb-nav-item:hover{background:var(--sbn-hover);color:var(--sbn-ink)}
html[data-theme] body .hub-sidebar .sb-nav-item.active{
  background:rgba(212,160,23,.14);color:var(--sbn-ink);box-shadow:inset 0 0 0 1.5px rgba(212,160,23,.6);
}
html[data-theme="light"] body .hub-sidebar .sb-nav-item.active{background:rgba(212,160,23,.16)}
html[data-theme] body .hub-sidebar .sb-nav-icon,
html[data-theme] body .hub-sidebar .sb-nav-item:hover .sb-nav-icon,
html[data-theme] body .hub-sidebar .sb-nav-item.active .sb-nav-icon{
  width:36px;height:36px;border-radius:12px;font-size:17px;color:#fff;
  background:linear-gradient(150deg,var(--nv1),var(--nv2));
  box-shadow:0 5px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.3);
}
html[data-theme="light"] body .hub-sidebar .sb-nav-icon,
html[data-theme="light"] body .hub-sidebar .sb-nav-item:hover .sb-nav-icon,
html[data-theme="light"] body .hub-sidebar .sb-nav-item.active .sb-nav-icon{box-shadow:0 5px 10px rgba(30,40,80,.22),inset 0 1px 0 rgba(255,255,255,.35)}
html[data-theme] body .hub-sidebar .sb-nav-label,
html[data-theme] body .hub-sidebar .sb-nav-item.active .sb-nav-label{
  font:800 13px Inter,sans-serif;letter-spacing:0;text-transform:none;color:inherit;
}

/* logo block, divider, online counter */
html[data-theme] body .hub-sidebar .sb-logo{border-bottom-color:var(--sbn-line)}
html[data-theme] body .hub-sidebar .sb-logo-name{color:var(--sbn-ink)}
html[data-theme] body .hub-sidebar .sb-divider{background:var(--sbn-line)}
html[data-theme] body .hub-sidebar .sb-online{margin:auto 14px 0;padding:10px 14px;flex-direction:row;justify-content:center;gap:8px;border-radius:99px;background:var(--sbn-hover)}
html[data-theme] body .hub-sidebar .sb-online-dot{background:#3ecf63;box-shadow:0 0 0 3px rgba(62,207,99,.2)}
html[data-theme] body .hub-sidebar .sb-online-num{color:var(--sbn-ink);font-size:13px;font-weight:800}
html[data-theme] body .hub-sidebar .sb-online-lbl{color:var(--sbn-dim);font-size:10px;letter-spacing:.06em}