/* The store's sidebar (Game Night "SideNav", design-system/battlevs-design-system-latest, 7 Oct 2026): the store frame
   around every page that isn't a game board or an agents' page. Laptop: a 248px sidebar that collapses to a 76px
   labelled rail (remembered per browser). Phone: the ☰ button opens it as a drawer over a scrim. Tokens only. */
.sh{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--dur-base) var(--ease-in-out)}
.sh.is-collapsed{grid-template-columns:76px minmax(0,1fr)}
.sh-main{min-width:0}
.sh-side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-3) var(--space-3) var(--space-4);
  background:var(--bg-1);border-right:1px solid var(--line-1);z-index:30;font-family:var(--font-body)}
.sh-sidetop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:48px;padding:0 4px}
.sh-side .logo{display:inline-flex;align-items:center;gap:2px;font:900 22px/1 var(--font-display);letter-spacing:-.02em;color:var(--text-1);text-decoration:none}
.sh-side .logo .vs{display:inline-flex;align-items:center;justify-content:center;height:1.05em;padding:0 .18em;margin:0 .06em;background:var(--accent);color:var(--on-accent);font-size:.78em;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.sh-side .logo .tld{color:var(--text-2);font-weight:800}
.sh-close,.sh-menu{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:var(--radius-sm);border:2px solid var(--line-2);
  background:var(--bg-2);color:var(--text-1);font:700 13px/1 var(--font-body);cursor:pointer;box-shadow:0 3px 0 0 var(--line-1);white-space:nowrap}
.sh-close,.sh-menu{display:none}
/* collapse: the panel icon (its name is in its label and tooltip) */
.sh-collapse{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-2);cursor:pointer}
.sh-collapse:hover{background:var(--bg-2);color:var(--text-1)}
.sh-collapse .chev{transition:transform var(--dur-base) var(--ease-in-out);transform-origin:12.5px 10px}
.is-collapsed .sh-collapse .chev{transform:scaleX(-1)}
.sh-sec{display:grid;gap:2px}
.sh-cap{font-size:11px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:0 10px 4px}
.sh-item{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:var(--radius-sm);color:var(--text-1);text-decoration:none;font-size:15px;font-weight:600}
.sh-item .ic{width:24px;flex:none;text-align:center;font-size:17px;line-height:1}
.sh-item .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-item .tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:var(--radius-pill);background:var(--bg-3);color:var(--text-2)}
.sh-item .tag.new{background:var(--text-1);color:var(--bg-0)}
.sh-item:hover{background:var(--bg-2)}
.sh-item[aria-current="page"]{background:var(--bg-3)}
.sh-item[aria-current="page"]::after{content:"";position:absolute;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sh-item.is-soon{color:var(--text-2)}
.sh-item.hidden{display:none}
.sh-collapse:focus-visible,.sh-close:focus-visible,.sh-menu:focus-visible,.sh-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sh-promo{display:grid;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--bg-2);box-shadow:inset 0 0 0 2px var(--line-1)}
.sh-promo b{font:800 15px/19px var(--font-display)}
.sh-promo p{margin:0;font-size:13px;line-height:18px;color:var(--text-2)}
.sh-promo .btn{width:100%}
.sh-foot{margin-top:auto;font-size:12px;color:var(--text-2);padding:0 10px}

/* collapsed: a labelled rail (icons never replace text) */
@media (min-width:900px){
.is-collapsed .sh-side{padding:var(--space-3) 6px}
.is-collapsed .sh-sidetop{justify-content:center;flex-direction:column;padding:0;gap:8px}
.is-collapsed .sh-side .logo{font-size:0;gap:0}
.is-collapsed .sh-side .logo .vs{font-size:15px;height:26px;padding:0 7px;margin:0}
.is-collapsed .sh-cap{text-align:center;padding:6px 0 2px;font-size:9px;letter-spacing:.04em}
.is-collapsed .sh-item{flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;text-align:center}
.is-collapsed .sh-item .lb{font-size:0}
.is-collapsed .sh-item .lb::after{content:attr(data-short);font-size:10.5px;line-height:12px;font-weight:700;white-space:normal}
.is-collapsed .sh-item .tag,.is-collapsed .sh-promo p,.is-collapsed .sh-foot,.is-collapsed .sh-promo b{display:none}
.is-collapsed .sh-item[aria-current="page"]::after{right:6px;top:6px}
.is-collapsed .sh-promo{padding:0;background:none;box-shadow:none}
.is-collapsed .sh-promo .btn{min-height:52px;padding:4px;font-size:10.5px;line-height:12px;white-space:normal;flex-direction:column;gap:2px}

}
/* laptop: the sidebar has the logo, so the page's own top bar doesn't repeat it */
@media (min-width:900px){.sh .sh-main .bar .logo,.sh .sh-main .brand-top{display:none}.sh .sh-main .bar{justify-content:flex-end}}

/* phone: the ☰ button in the top bar opens the sidebar as a drawer over a scrim */
.sh-scrim{position:fixed;inset:0;background:var(--scrim);z-index:29}
@media (max-width:899px){
  .sh,.sh.is-collapsed{display:block}
  .sh-menu{display:inline-flex;justify-content:center;width:40px;min-height:40px;padding:0;font-size:20px}
  .sh-collapse{display:none}
  .sh-close{display:inline-flex}
  .sh-side{position:fixed;left:0;top:0;bottom:0;width:300px;max-width:86vw;height:auto;transform:translateX(-102%);transition:transform var(--dur-base) var(--ease-out);box-shadow:var(--shadow-pop);visibility:hidden}
  .sh.is-open .sh-side{transform:none;visibility:visible}
}
@media (prefers-reduced-motion:reduce){.sh,.sh-side{transition:none}}

/* pages without a top bar (Your stats, terms, privacy): a phone-only bar with Menu and the logo */
.sh-phonebar{display:none}
@media (max-width:899px){.sh-phonebar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) 0}
  .sh-phonebar .logo{display:inline-flex;align-items:center;gap:2px;font:900 22px/1 var(--font-display);letter-spacing:-.02em;color:var(--text-1);text-decoration:none}
  .sh-phonebar .logo .vs{display:inline-flex;align-items:center;justify-content:center;height:1.05em;padding:0 .18em;margin:0 .06em;background:var(--accent);color:var(--on-accent);font-size:.78em;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
  .sh-phonebar .logo .tld{color:var(--text-2);font-weight:800}}
/* phone: Games and Your stats live in the menu, so the top bar keeps just Menu, the logo and Discord */
@media (max-width:899px){.sh .bar{justify-content:flex-start;gap:var(--space-3)}.sh .bar nav{margin-left:auto}.sh .bar nav a:not(.discord-nav){display:none}}
.sh.is-open{overflow-x:hidden}html:has(.sh.is-open){overflow:hidden}