:root { color-scheme: dark; font-family: "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #08080a; }
canvas { width: 100%; height: 100%; display: block; }
header, aside, section { position: fixed; background: rgba(8, 8, 10, .88); border: 1px solid #30333a; color: #dce1eb; }
header { top: 16px; left: 16px; right: 16px; min-height: 46px; padding: 11px 14px; display: flex; gap: 20px; align-items: center; }
header strong { color: #fff; margin-right: auto; }
#legend { right: 16px; bottom: 16px; padding: 10px 14px; display: flex; gap: 18px; font-size: 13px; }
#legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: currentColor; border: 1px solid #08080a; }
.lonestar { color: #50beff; } .valkyra { color: #ff4a4a; } .manticore { color: #49e06a; }
#login { width: min(390px, calc(100% - 32px)); left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 24px; }
h1 { margin: 0 0 18px; font-size: 20px; }
input, button { width: 100%; margin-top: 10px; padding: 11px; border: 1px solid #3c4048; color: #fff; background: #15171b; }
button { cursor: pointer; background: #2d7daa; border-color: #50beff; font-weight: 600; }
#login-error { color: #ff6b6b; min-height: 1.2em; margin-bottom: 0; }
#connection.stale { color: #ffcc40; }
#roster-toggle { position: fixed; top: 78px; left: 16px; width: auto; margin: 0; z-index: 2; }
#roster { top: 78px; bottom: 16px; left: 16px; width: min(300px, calc(100% - 32px)); padding: 12px; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
#roster-heading { display: flex; align-items: center; min-height: 32px; }
#roster-heading strong { color: #fff; font-size: 15px; }
#roster-close { width: 32px; height: 32px; padding: 0; margin: 0 0 0 auto; background: #15171b; border-color: #3c4048; font-size: 20px; }
#player-search { margin: 0; }
#player-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.player-row { width: 100%; margin: 0; padding: 8px 9px; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; text-align: left; background: #111318; border-color: transparent; font-weight: 400; }
.player-row:hover { background: #1b1e24; border-color: #3c4048; }
.player-row[aria-selected="true"] { background: #203746; border-color: #50beff; }
.player-dot { width: 9px; height: 9px; border: 1px solid #08080a; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.player-side { color: #9299a8; font-size: 11px; text-transform: capitalize; }
.player-empty { color: #9299a8; padding: 12px 4px; text-align: center; }