/* Shared masthead styling for visitors, players, moderators and the admin. */
.topbar .top-inner{background:linear-gradient(#162a38,#08141e);border-bottom:1px solid #345a74;box-shadow:inset 0 1px #ffffff0c;gap:18px}
.topbar .brand{font-size:32px;letter-spacing:0;line-height:1;flex-shrink:0}
.topbar .brand-wordmark{font-family:var(--heading);font-style:normal;font-weight:700;gap:3px;align-items:baseline;letter-spacing:-.02em}
.topbar .brand-wordmark b{color:#ff4b55;font-size:1.08em;font-weight:800;letter-spacing:-.035em}
.topbar .brand-wordmark span{color:#f5f8fb;font-weight:700;letter-spacing:-.02em}
.topbar .header-tools{gap:10px;min-width:0}
.topbar .header-tools form{height:38px;width:250px;border-radius:2px;background:#08151e;border-color:#355d78;box-shadow:inset 0 1px 3px #0004}
.topbar .header-tools input{font:14px var(--body);padding:8px 11px}
.topbar .header-tools form>button{display:grid;place-items:center;width:38px;border-left:1px solid #29495f;background:linear-gradient(#17394f,#0a1c29);color:#b8dff7}
.topbar .header-tools form:focus-within{border-color:#79c3f2}
.topbar .identity{gap:7px;flex-shrink:0}
.topbar .identity>button,.topbar .theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border:1px solid #365e78;border-radius:2px;background:linear-gradient(#17394f,#091b28);color:#b8dff7;font:600 13px var(--body);box-shadow:inset 0 1px #ffffff12;text-shadow:none;white-space:nowrap}
.topbar .identity>button:hover,.topbar .theme-toggle:hover,.topbar .header-tools form>button:hover{background:linear-gradient(#234c67,#123047);border-color:#6395b6;color:#fff}
.topbar .identity>.signup-button{background:linear-gradient(#299bd9,#0974b4);color:#fff;border-color:#399bd0}
.topbar .identity>.player-trigger{gap:9px;padding:4px 10px 4px 5px;max-width:230px;text-align:left}
.topbar .player-trigger .player-avatar{width:28px;height:28px;border:1px solid #53768e;border-radius:2px;background:linear-gradient(#395e78,#19364b);color:#f2f7fb;font:700 14px var(--body);box-shadow:none;flex-shrink:0}
.topbar .player-trigger-copy strong{font-size:13px;line-height:1.15}
.topbar .player-trigger-copy small{font-size:11px;color:#b6c9d7;line-height:1.2}
.topbar .account-chevron{color:#96bed8;font-size:12px;margin-left:5px}
.topbar :is(button,a,input):focus-visible{outline:2px solid #8acff9;outline-offset:3px}
@media(max-width:1050px){.topbar .top-inner{gap:12px;padding-inline:18px}.topbar .header-tools form{width:210px}.topbar .identity>button,.topbar .theme-toggle{padding-inline:9px}.topbar .player-trigger-copy small{display:none}.topbar .identity>.player-trigger{max-width:155px}}
@media(max-width:850px) and (min-width:621px){.topbar .top-inner{gap:8px;padding-inline:12px}.topbar .header-tools{gap:6px}.topbar .header-tools form{width:170px}.topbar .brand{font-size:28px}.topbar .identity{gap:5px}.topbar .identity>button,.topbar .theme-toggle{font-size:12px;padding-inline:7px}.topbar .identity>.player-trigger{max-width:125px}.topbar .player-trigger .player-avatar{display:none}}
@media(max-width:620px){.topbar .top-inner{padding-inline:12px;gap:8px}.topbar .brand{font-size:28px}.topbar .header-tools{gap:8px}.topbar .header-tools form{width:auto;flex:1}.topbar .identity{gap:5px}.topbar .identity>button{font-size:12px;padding-inline:7px}.topbar .identity>.player-trigger{max-width:128px;gap:6px}.topbar .player-trigger .player-avatar{width:25px;height:25px}.topbar .account-chevron{display:none}}
@media(max-width:400px){.topbar .brand{font-size:25px}.topbar .identity>.player-trigger{max-width:92px;padding-inline:6px}.topbar .player-trigger .player-avatar{display:none}.topbar .identity>button{padding-inline:6px;font-size:11px}.topbar .top-inner{padding-inline:10px;gap:6px}}

/* Flat, quieter controls keep the competition content in focus. */
.topbar .identity{position:relative}
.topbar .identity>button,.topbar .theme-toggle{border-radius:6px;background:#19303f;border-color:#385365;box-shadow:none;color:#dfebf3;min-height:40px}
.topbar .identity>button:hover,.topbar .theme-toggle:hover{background:#274456;border-color:#6d91a8;color:#fff}
.topbar .identity>.player-trigger{background:transparent;border-color:transparent;padding:5px 8px;gap:10px;max-width:240px}
.topbar .identity>.player-trigger:hover,.topbar .identity>.player-trigger[aria-expanded=true]{background:#223b4b;border-color:#385365}
.topbar .player-trigger .player-avatar{border-radius:6px;background:#294a61;border-color:#486c84;width:30px;height:30px}
.topbar .header-tools form{border-radius:6px;overflow:visible;box-shadow:none;background:#0b1b26;height:40px}
.topbar .header-tools form>button{border:0;background:transparent;border-radius:0 6px 6px 0}
.topbar .identity>.signup-button{background:#147ebc;border-color:#3298d2}
.topbar .account-chevron{display:block;width:16px;height:16px;flex-shrink:0;transition:transform .15s}
.topbar [aria-expanded=true] .account-chevron{transform:rotate(180deg)}
.account-unread-dot{width:7px;height:7px;flex-shrink:0;background:#ff8585;border-radius:50%}
.account-unread-dot[hidden],.account-dropdown[hidden]{display:none!important}
.topbar .account-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:240px;max-width:calc(100vw - 24px);height:auto;display:flex;flex-direction:column;gap:3px;padding:6px;background:#fff;border:1px solid #c4d0da;border-radius:8px;box-shadow:0 12px 28px #0004;z-index:30}
.topbar .account-dropdown button{display:block;width:100%;min-height:42px;padding:10px 12px;text-align:left;border:0;border-radius:4px;background:transparent;color:#243b4c;font:500 14px var(--body)}
.topbar .account-dropdown button:hover,.topbar .account-dropdown button:focus-visible{background:#e9f2f9;color:#075b96}
.topbar .account-dropdown .account-menu-logout{border-top:1px solid #dce4ea;border-radius:0;margin-top:4px;color:#b62b35}
html[data-theme=dark] .topbar .account-dropdown{background:#1c2a34;border-color:#3c5668}
html[data-theme=dark] .topbar .account-dropdown button{color:#e0ebf3}
html[data-theme=dark] .topbar .account-dropdown button:hover,html[data-theme=dark] .topbar .account-dropdown button:focus-visible{background:#2b4354;color:#fff}
html[data-theme=dark] .topbar .account-dropdown .account-menu-logout{border-color:#3c5668;color:#ff9299}
@media(max-width:620px){.topbar .identity>.player-trigger{max-width:180px}.topbar .player-trigger-copy strong{font-size:13px}.topbar .account-dropdown{top:calc(100% + 7px)}.topbar .player-trigger .player-avatar{display:flex}.topbar .account-chevron{margin-left:0}}

/* Theme preference lives with account settings; visitors retain an icon control. */
.topbar .identity>#theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;padding:0;margin:0;background:transparent;border-color:transparent}
.topbar .identity>#theme-toggle:hover{background:#274456;border-color:#6d91a8}
.topbar .identity>#theme-toggle .theme-label{display:none}
.topbar .account-dropdown #theme-toggle{display:flex;align-items:center;gap:10px;margin:0;box-shadow:none;white-space:nowrap}
.topbar #theme-toggle svg{flex-shrink:0}
.topbar .account-dropdown #theme-toggle{justify-content:flex-start;background:transparent;border:0;color:inherit;text-shadow:none}.topbar .account-dropdown #theme-toggle:hover{background:#e9f2f9;color:#075b96}html[data-theme=dark] .topbar .account-dropdown #theme-toggle:hover{background:#2b4354;color:#fff}
.topbar .account-dropdown #theme-toggle{color:#243b4c}html[data-theme=dark] .topbar .account-dropdown #theme-toggle{color:#e0ebf3}

/* Center initials when the mobile badge switches from grid to flex. */
.topbar .player-trigger .player-avatar{align-items:center;justify-content:center;line-height:1;text-align:center}

/* Balanced masthead with on-demand search. */
.topbar .top-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);position:relative;align-items:center}
.topbar .top-tagline{display:none}
.topbar .brand{grid-column:2;grid-row:1;margin:0;justify-self:center}
.topbar .header-home{grid-column:1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;gap:8px;color:#dfebf3;font:600 14px var(--body);text-decoration:none;min-height:40px;padding:0 10px;border:1px solid transparent;border-radius:6px}
.topbar .masthead-actions{grid-column:3;grid-row:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.topbar .header-tools{display:block;flex:none;margin:0;width:auto;position:static;order:0}
.topbar #search-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #385365;border-radius:6px;background:#19303f;color:#b8dff7}
.topbar :is(#search-toggle,.header-home):hover,.topbar #search-toggle[aria-expanded=true]{background:#274456;border-color:#6d91a8;color:#fff}
.topbar #site-search{position:absolute;right:18px;top:calc(100% + 8px);width:min(380px,calc(100% - 36px));height:44px;z-index:40;display:flex;box-shadow:0 8px 20px #0004}
.topbar #site-search[hidden]{display:none!important}
.topbar #site-search input{width:0;flex:1;min-width:0;font-size:16px}
.topbar #site-search>button{flex:none}
.topbar .identity{margin:0}
@media(max-width:700px){.topbar .header-home span,.topbar .player-trigger-copy,.topbar .account-chevron{display:none}.topbar .header-home{width:40px;padding:0;justify-content:center}.topbar .masthead-actions{gap:4px}.topbar .identity>.player-trigger{padding:4px;gap:0}.topbar .brand{font-size:28px}.topbar .top-inner{gap:6px}.topbar .identity>.signup-button{display:none}}

/* Athletic block lettering inspired by the supplied game wordmark. */
.topbar .brand-wordmark{font-family:BattlesRacing,sans-serif;font-weight:400;text-transform:uppercase;gap:1px;letter-spacing:-.025em;line-height:1;padding:3px 4px;filter:drop-shadow(0 2px 1px #0009)}
.topbar .brand-wordmark :is(b,span){font-family:inherit;font-weight:400;font-size:1em;letter-spacing:inherit;-webkit-text-stroke:1.5px #070b0e;paint-order:stroke fill}
.topbar .brand-wordmark b{color:#f52c32}
.topbar .brand-wordmark span{color:#f4f5f6}
.topbar .brand{font-size:32px}
@media(max-width:700px){.topbar .brand{font-size:23px}}
@media(max-width:360px){.topbar .brand{font-size:20px}}

/* Let the logo shrink between the home and account/search controls on phones. */
@media(max-width:700px){
 .topbar .top-inner{grid-template-columns:40px minmax(0,1fr) auto;column-gap:10px}
 .topbar .brand{width:min(165px,100%);min-width:0;max-width:100%}
 .topbar .masthead-actions{min-width:max-content;justify-self:end}
 .topbar #site-search{left:12px;right:12px;width:auto;top:calc(100% + 8px)}
}