/* account.css — lobby account bar + account modal (create / manage / sign-in). Matches the dark lobby theme. */
#acctBar { display:flex; align-items:center; gap:10px; width:min(360px,100%); margin-top:14px; padding:10px 14px;
  background:#1b1f29; border:1px solid #2c3242; border-radius:10px; color:#cdd3df; font-size:14px; }
#acctName { flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#acctBar button { border:none; border-radius:8px; padding:8px 12px; font:700 13px system-ui; cursor:pointer; background:#2e5e8c; color:#fff; }
#acctBar #acctGear { background:#2c3242; font-size:15px; padding:8px 11px; }
#acctBar button:hover { filter:brightness(1.1); }

#acctModal { position:fixed; inset:0; background:#0b0d12ee; display:none; align-items:center; justify-content:center; z-index:90; padding:22px; }
#acctModal.show { display:flex; }
#acctModal .card { position:relative; background:#161a22; border:1px solid #2c3242; border-radius:16px; width:min(380px,100%);
  padding:24px 24px 20px; box-shadow:0 24px 70px #000c; }
#acctModal .close { position:absolute; top:10px; right:14px; background:none; border:none; color:#9aa3b2; font-size:24px; cursor:pointer; }
#acctModal .close:hover { color:#fff; }
#acctModal h2 { margin:0 0 16px; font-size:20px; }
#acctModal label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:#9aa3b2; margin-bottom:12px; }
#acctModal input { background:#0f1219; color:#e6e8ec; border:1px solid #333b47; border-radius:7px; padding:10px; font:15px system-ui; }
#acctModal button { border:none; border-radius:9px; padding:12px; font:700 15px system-ui; cursor:pointer; background:#2c7a2c; color:#fff; width:100%; }
#acctModal button:hover { filter:brightness(1.1); }
#acctModal .row { display:flex; gap:10px; }
#acctModal .row button { flex:1; }
#acctModal button.ghost { background:#2c3242; color:#cdd3df; }
#acctModal .msg { min-height:16px; font-size:12px; color:#9aa3b2; margin:-2px 0 12px; }
#acctModal .alt { text-align:center; margin-top:14px; }
#acctModal button.link { background:none; color:#5b9bd3; font:600 13px system-ui; padding:4px; width:auto; }
#acctModal button.link:hover { text-decoration:underline; filter:none; }

/* Discord avatar image inside ANY letter-avatar container (chat / roster / account bar) — global rule */
.avimg { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
/* account-bar avatar (Discord image or coloured initial) — injected by account.mjs, no markup in index.html */
#acctBar #acctAv { flex:0 0 auto; width:26px; height:26px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font:800 13px system-ui; color:#fff; }

/* Continue with Discord — brand blurple, the primary path at the top of the auth view */
#acctModal #acAuthDiscord { background:#5865F2; }
/* "or" divider between the Discord button and the username/password form */
#acctModal .or { display:flex; align-items:center; gap:10px; margin:14px 0; color:#6b7280; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
#acctModal .or::before, #acctModal .or::after { content:""; flex:1; height:1px; background:#2c3242; }
#acctModal #acDiscordRow { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#0f1219;
  border:1px solid #262d3a; border-radius:8px; padding:9px 12px; margin-bottom:12px; font-size:13px; color:#cdd3df; }
#acctModal #acDiscordRow button.link { width:auto; padding:4px 6px; }