/* Account controls belong in the header, outside the athlete showcase.
   Explicit width overrides the legacy .screen-card button { width:100% }. */
#startScreen .account-panel{position:absolute;right:200px;top:8px;z-index:14;display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;justify-content:flex-end;box-sizing:border-box;width:330px;max-width:330px;padding:6px 0;border:0;border-radius:0;background:transparent;font-size:12px}
#startScreen .account-panel button{width:auto;min-width:0;flex:0 0 auto;height:32px;margin:0;border:1px solid #ffffff30;border-radius:6px;background:#253148;color:#f5f3ef;padding:0 12px;font-size:12px;line-height:1;letter-spacing:0;font-weight:600;box-shadow:none;cursor:pointer}
#startScreen .account-panel button:hover{background:#34445e;transform:none}
#startScreen .account-panel #openRegister{border-color:#ff946680;color:#ffb28e;background:#ff946610}
#startScreen .account-panel #openRegister:hover{background:#ff946624}
#startScreen .account-panel #accountName{font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b8c6dd;margin-right:4px}
#startScreen .account-panel #accountNotice{flex-basis:100%;font-size:10px;line-height:14px;color:#b8c6dd;text-align:right}
#startScreen .account-panel #accountNotice:empty{display:none}
#startScreen .account-panel [hidden]{display:none!important}
#startScreen .lobby-mode{display:none}
body:has(#startScreen[hidden]) .account-panel{display:none}
#authDialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;color:#f5f3ef;background:#111c30;border:1px solid #ffffff30;border-radius:16px;padding:32px;box-shadow:0 30px 100px #0008;font-family:inherit}#authDialog::backdrop{background:#080e20d9;backdrop-filter:blur(8px)}.auth-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.auth-heading span{color:#ff9466;font-size:14px;font-weight:800}.auth-heading button{background:none;border:0;color:#b8c7dd;font-size:26px;cursor:pointer}#authDialog h2{margin:0 0 10px;font-size:28px;letter-spacing:-.04em}#authDialog p{color:#b8c6db;font-size:13px;line-height:1.5}#authForm{display:grid;gap:16px;margin-top:22px}#authForm label{display:grid;gap:8px;font-size:13px;color:#d7dfed}#authForm input{box-sizing:border-box;min-width:0;width:100%;background:#0a1324;border:1px solid #4d5b74;border-radius:6px;color:white;padding:13px;font:inherit;user-select:text}#authForm small{font-size:11px;color:#9eafc8;line-height:1.5}#authDialog #authMessage{color:#ffad9e;margin:0;font-size:13px;min-height:0}#authMessage:empty{display:none}#authSubmit{padding:15px;border:0;border-radius:6px;background:#ff763d;color:#111827;font-size:14px;font-weight:800;cursor:pointer}#authSwitch,#authGuest{display:block;width:100%;padding:12px 4px;margin-top:8px;border:0;background:none;color:#ffd0b8;font-size:13px;cursor:pointer}#authGuest{color:#aebdd3;border-top:1px solid #ffffff20;margin-top:12px;padding-top:18px}#authDialog button:disabled{opacity:.6;cursor:wait}#authDialog [hidden]{display:none!important}
@media(min-width:761px) and (max-width:1100px){#startScreen .lobby-tab{display:none}}
@media(max-width:760px){#startScreen .account-panel{position:relative;top:auto;right:auto;width:auto;max-width:none;justify-content:flex-start;margin:8px 20px 0;padding:4px 0;flex-shrink:0}#startScreen .account-panel button{height:36px;padding:0 10px}.roster-panel{padding-top:18px!important}#startScreen .account-panel #accountName{margin-right:auto;max-width:100px}#startScreen .account-panel #accountNotice{text-align:left}#authDialog{padding:24px}}

/* Use one vertical center and one gutter for every desktop header control.
   Status text is separate from the row so it cannot push account buttons up. */
@media(min-width:761px){
  body:has(#startScreen:not([hidden])){--menu-gutter:48px;--menu-center:40px}
  #startScreen .lobby-header{padding-inline:var(--menu-gutter)}
  #startScreen .account-panel{top:calc(var(--menu-center) - 16px);right:calc(var(--menu-gutter) + 144px);height:32px;padding:0;flex-wrap:nowrap}
  #startScreen .account-panel #accountNotice{position:absolute;top:calc(100% + 3px);right:0;width:330px;line-height:14px}
  body:has(#startScreen:not([hidden])) .settings-button{top:calc(var(--menu-center) - 16px);right:var(--menu-gutter);box-sizing:border-box;width:128px;height:32px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px}
  body:has(#startScreen:not([hidden])) .settings-button kbd{margin:0}
}
@media(min-width:761px) and (max-height:780px){body:has(#startScreen:not([hidden])){--menu-gutter:36px}}
@media(min-width:761px) and (max-width:1000px){body:has(#startScreen:not([hidden])){--menu-gutter:28px}}

#authForgot{display:block;width:100%;padding:10px 4px;margin-top:10px;border:0;background:none;color:#ffdc73;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#authForgot:hover{color:#fff2bd}
#authDialog #authServiceNotice{padding:10px 12px;border:1px solid #ffdc7355;border-radius:9px;background:#ffdc730d;color:#ffe7a4;font-size:12px;line-height:1.5}
#authEmail{text-transform:none}