/* Shared club navigation: one scale, one active state, room for every destination. */
@media(min-width:651px){
 .club-header{min-height:90px;padding:16px 30px;gap:10px;flex-wrap:nowrap}
 .club-header .brand{font-size:32px;flex:none;margin-right:auto}
 .club-header .brand svg{width:36px;height:36px}
 .club-header nav{display:flex;align-items:center;gap:4px;margin:0 auto;padding:4px;border:1px solid var(--club-line);border-radius:20px;background:color-mix(in srgb,var(--surface) 65%,transparent)}
 .club-header nav button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:9px 13px;border-radius:15px;font-size:13px;font-weight:650;color:var(--sub);white-space:nowrap;transition:background .18s,color .18s,transform .18s}
 .club-header nav .nav-cat-icon{width:23px;height:23px;flex:none}
 .club-header nav button[data-screen=friends]{margin-left:9px}
 .club-header nav button[data-screen=friends]:before{content:'';position:absolute;left:-7px;top:11px;bottom:11px;width:1px;background:var(--club-line)}
 .club-header nav button:hover{color:var(--mint);background:color-mix(in srgb,var(--mint) 7%,transparent)}
 .club-header nav button.active{color:var(--mint);background:color-mix(in srgb,var(--mint) 13%,var(--surface));box-shadow:0 2px 5px #00000005}
 .club-header .header-settings,.club-header .help-top{display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--club-line);border-radius:15px;background:transparent;color:var(--sub);font-size:18px;transition:background .18s,color .18s,transform .18s}
 .club-header .header-settings:hover,.club-header .help-top:hover,.club-header .header-settings.active{color:var(--mint);background:color-mix(in srgb,var(--mint) 8%,var(--surface))}
 .club-header .user-pill{flex:none;min-height:54px;max-width:215px;gap:10px;padding:7px 12px;border-radius:18px;background:var(--surface);border-color:var(--club-line);box-shadow:none;transition:border-color .18s,transform .18s}
 .club-header .user-pill:hover,.club-header .user-pill.active{border-color:var(--mint)}
 .club-header .user-pill b{font-size:13px;max-width:105px}
 .club-header .user-pill small{font-size:10px;line-height:1.4;max-width:130px;margin-top:2px}
 .club-header .pill-xp{display:none}
 .club-header :is(nav button,.header-settings,.help-top,.user-pill):focus-visible{outline:3px solid var(--mint);outline-offset:3px}
 .club-header :is(nav button,.header-settings,.help-top,.user-pill):active{transform:translateY(1px)}
}
@media(min-width:651px) and (max-width:1100px){
 .club-header{display:grid;grid-template-columns:1fr 44px 44px auto;gap:10px;padding:14px 24px 12px}
 .club-header .brand{margin:0;justify-self:start}
 .club-header nav{grid-column:1/-1;grid-row:2;justify-self:center;width:min(100%,670px);justify-content:space-between}
 .club-header nav button{flex:1;font-size:13px;min-height:44px;padding:8px 12px}
 .club-header .user-pill{grid-column:4;grid-row:1}
 .club-header .header-settings{grid-column:2;grid-row:1}
 .club-header .help-top{grid-column:3;grid-row:1}
}
@media(min-width:1800px){
 .club-header{min-height:108px;padding:20px 40px;gap:14px}
 .club-header .brand{font-size:40px}.club-header .brand svg{width:42px;height:42px}
 .club-header nav button{min-height:52px;padding:12px 21px;font-size:16px;gap:9px}
 .club-header nav .nav-cat-icon{width:27px;height:27px}
 .club-header .user-pill{padding:9px 15px;max-width:250px}.club-header .user-pill b{font-size:16px;max-width:140px}.club-header .user-pill small{font-size:12px;max-width:160px}
 .club-header .header-settings,.club-header .help-top{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){.club-header *{transition:none!important}}
:root[data-motion=reduced] .club-header *{transition:none!important}