/* Header = the in-game scoreboard card on its side. 1 card pixel = 2px. Selectors carry .sb-nav.nav so they outrank
   the old header rules that still live in network.css / store-polish.css. */
.sb-nav.nav,.sb-nav.nav.scrolled{position:sticky;top:0;z-index:100;padding:0 32px;background:#f7f6f8f2;border:0;backdrop-filter:blur(12px)}
.sb-nav.nav .sb,.sb-nav.nav.scrolled .sb{--pt:26px;position:relative;display:block;width:100%;max-width:1180px;min-height:0;margin:0 auto;padding:var(--pt) 0 18px;gap:0;border:0;border-radius:0;background:none;box-shadow:none}
.sb-nav.nav .sb-card{position:relative;display:flex;align-items:stretch;height:34px;border:2px solid #211A29;background:#fff}
/* stepped corners like the in-game card: the outer corner pixel is cut, the inner one is ink */
.sb-nav.nav .sb-card::before{content:'';position:absolute;inset:-2px;z-index:4;pointer-events:none;
  background:linear-gradient(#f7f6f8,#f7f6f8) 0 0/2px 2px no-repeat,linear-gradient(#f7f6f8,#f7f6f8) 100% 0/2px 2px no-repeat,
             linear-gradient(#f7f6f8,#f7f6f8) 0 100%/2px 2px no-repeat,linear-gradient(#f7f6f8,#f7f6f8) 100% 100%/2px 2px no-repeat,
             linear-gradient(#211A29,#211A29) 2px 2px/2px 2px no-repeat,linear-gradient(#211A29,#211A29) calc(100% - 2px) 2px/2px 2px no-repeat,
             linear-gradient(#211A29,#211A29) 2px calc(100% - 2px)/2px 2px no-repeat,linear-gradient(#211A29,#211A29) calc(100% - 2px) calc(100% - 2px)/2px 2px no-repeat}
.sb-nav.nav .sb::before{content:'';display:block;position:absolute;left:4px;right:4px;top:calc(var(--pt) + 34px);width:auto;height:2px;background:#211a2946;box-shadow:0 2px 0 #211a2923;pointer-events:none}
.sb-nav.nav .sb::after{content:none}
.sb-nav.nav .sb-t{display:block;flex:none;margin-top:8px}
.sb-nav.nav .sb-band{position:relative;display:flex;flex:none;align-items:flex-start;gap:0;width:228px;padding:0 0 0 12px;background:#FF57A4;box-shadow:inset 0 2px 0 #FF80B8;text-decoration:none}
.sb-nav.nav .sb-cloud{position:absolute;z-index:5;left:180px;top:calc(var(--pt) - 14px);pointer-events:none}
.sb-nav.nav .sb-bolt{animation:sb-flash 5s steps(1,end) infinite}
@keyframes sb-flash{0%,86%,90%,94%,100%{fill:#fff}88%,92%{fill:#FFE24A}}
.sb-nav.nav .sb-row.nav-links{position:static;display:flex;flex:1 1 auto;flex-direction:row;align-items:flex-start;gap:0;min-width:0;margin:0;padding:0 0 0 12px;border:0;background:#fff;box-shadow:none}
.sb-nav.nav .sb-row>a:not(.sb-entry){position:relative;display:block;width:auto;height:30px;margin:0;padding:0 11px;color:#736779;font-size:0;line-height:0;text-decoration:none;text-align:left}
.sb-nav.nav .sb-row a::after{content:none;display:none}
.sb-nav.nav .sb-row>a:not(.sb-entry):hover,.sb-nav.nav .sb-row>a[aria-current]{color:#211A29}
.sb-nav.nav .sb-row>a[aria-current]::before{content:'';position:absolute;left:calc(50% - 3px);bottom:2px;width:6px;height:2px;background:#FF57A4}
.sb-nav.nav .sb-sep{position:relative;flex:none;width:2px;height:14px;margin:8px 0 0 auto;background:#D0CDD2}
.sb-nav.nav .sb-sep::after{content:'';position:absolute;left:0;top:calc(50% - 2px);width:2px;height:4px;background:#FF57A4}
.sb-nav.nav .sb-card .sb-entry{display:flex;flex:none;align-items:flex-start;width:auto;height:30px;min-height:0;margin:0;padding:0 16px;border:0;border-radius:0;background:#fff;box-shadow:none;color:#211A29;font-size:0;line-height:0;text-decoration:none;cursor:pointer;transform:none}
.sb-nav.nav .sb-card .sb-entry:hover{background:#fff;color:#FF57A4;border:0;box-shadow:none;transform:none}
.sb-nav.nav .sb-card .sb-foot{position:relative;display:flex;flex:none;align-items:flex-start;gap:8px;width:auto;height:30px;min-height:0;margin:0;padding:0 16px;border:0;border-radius:0;background:#FF57A4;box-shadow:inset 2px 0 0 #211A29,inset 0 2px 0 #FF80B8;color:#fff;font-size:0;line-height:0;text-decoration:none;cursor:pointer;overflow:hidden;transform:none}
.sb-nav.nav .sb-card .sb-foot.has-items{color:#fff;border:0}
.sb-nav.nav .sb-card .sb-foot::after{content:'';display:block;position:absolute;top:0;bottom:0;left:-14px;right:auto;width:10px;height:auto;background:#ffffff59;opacity:1;transform:none;animation:sb-sheen 6s steps(12,end) infinite;pointer-events:none}
@keyframes sb-sheen{0%,62%{transform:translateX(0)}92%,100%{transform:translateX(260px)}}
.sb-nav.nav .sb-card .sb-foot:hover{background:#FF80B8;color:#fff;border:0;transform:none}
.sb-nav.nav .sb-count{position:static;display:flex;gap:2px;min-width:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#211A29;font-size:0;transform:none}
.sb-nav.nav .sb-count[hidden],.sb-nav.nav .sb-card .sb-menu,.sb-nav.nav .sb-short,.sb-nav.nav .sb-close,.sb-nav.nav .sb-dropfoot{display:none}
.sb-nav.nav :is(a,button):focus-visible{outline:2px solid #211A29;outline-offset:-5px}
@media(prefers-reduced-motion:reduce){.sb-nav.nav .sb-bolt,.sb-nav.nav .sb-card .sb-foot::after{animation:none!important}}
body.motion-paused .sb-nav.nav .sb-bolt,body.motion-paused .sb-nav.nav .sb-card .sb-foot::after{animation:none!important}
@media(max-width:1210px){.sb-nav.nav .sb-long{display:none}.sb-nav.nav .sb-short{display:block}.sb-nav.nav .sb-row>a:not(.sb-entry){padding:0 9px}}
@media(max-width:1000px){
  .sb-nav.nav,.sb-nav.nav.scrolled{padding:0 12px}
  .sb-nav.nav .sb-band{width:auto;flex:1 1 auto;padding-left:8px}
  .sb-nav.nav .sb-cloud{left:172px}
  .sb-nav.nav .sb-card .sb-menu{display:flex;color:#736779;box-shadow:inset 2px 0 0 #D0CDD2}
  .sb-nav.nav .sb-row.nav-links{display:none}
  /* open: the card unfolds its rows under the band, like the sidebar in game */
  .sb-nav.nav[data-menu-open] .sb-row.nav-links{display:flex;position:absolute;z-index:6;left:-2px;right:-2px;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 0;border:2px solid #211A29;border-top:0;background:#fff;box-shadow:0 2px 0 #211a2946,0 4px 0 #211a2923}
  .sb-nav.nav[data-menu-open] .sb-row>a:not(.sb-entry),.sb-nav.nav[data-menu-open] .sb-row .sb-entry{display:flex;align-items:center;width:auto;height:42px;padding:0 14px}
  .sb-nav.nav[data-menu-open] .sb-row .sb-t{margin-top:0}
  .sb-nav.nav[data-menu-open] .sb-row>a[aria-current]::before{left:4px;bottom:calc(50% - 3px);width:2px;height:6px}
  .sb-nav.nav[data-menu-open] .sb-sep{width:auto;height:2px;margin:6px 12px}
  .sb-nav.nav[data-menu-open] .sb-sep::after{left:calc(50% - 2px);top:0;width:4px;height:2px}
  .sb-nav.nav[data-menu-open] .sb-row .sb-long{display:block}.sb-nav.nav[data-menu-open] .sb-row .sb-short{display:none}
  .sb-nav.nav[data-menu-open] .sb-dropfoot{display:flex;justify-content:center;align-items:center;height:30px;margin-top:6px;background:#FF57A4;box-shadow:inset 0 2px 0 #D0CDD2;color:#fff}
  .sb-nav.nav[data-menu-open] .sb-open{display:none}.sb-nav.nav[data-menu-open] .sb-close{display:block}
  .sb-nav.nav[data-menu-open] .sb::before{display:none}
}
@media(max-width:480px){.sb-nav.nav .sb-card .sb-menu,.sb-nav.nav .sb-card .sb-foot{padding:0 11px}.sb-nav.nav .sb-cloud{left:162px}}
@media(max-width:380px){.sb-nav.nav .sb-card .sb-menu,.sb-nav.nav .sb-card .sb-foot{padding:0 8px}.sb-nav.nav .sb-band{padding-left:6px}.sb-nav.nav .sb-cloud{left:154px}}
@media(max-width:720px){.sb-nav.nav .sb,.sb-nav.nav.scrolled .sb{--pt:20px;padding-bottom:12px}}
.sb-nav.nav .sr-only{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}