/* ElysianCO 5207 | Copyright 2026 _DreadNought_ (elite*pvpers) | Source ID 9d79c584f2fadd8019343760
https://github.com/JohnElysian/ElysianCO-5207-Web-Client | ElysianCO Free Source License 1.0 */
:root { color-scheme:dark; font-family:system-ui,"Segoe UI",Arial,sans-serif; color:#edf2f7; background:#101720; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none !important; }
#elysian-canvas { position:fixed; inset:0; width:100%; height:100%; outline:none; }
.shell { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; min-width:280px; overflow:auto; background:#101720; }
.shell[data-phase=world],.shell[data-phase=character] { display:none; }
.masthead { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:24px 32px; border-bottom:1px solid #253140; }
.wordmark { font-size:24px; font-weight:700; letter-spacing:-.6px; }
.version { color:#a1b2c8; font-size:12px; font-weight:600; letter-spacing:1.5px; }
.shell-content { flex:1; display:grid; place-items:center; padding:36px 20px; }
.client-card { width:100%; max-width:420px; padding:30px; border:1px solid #2b394b; border-radius:12px; background:#17212d; }
.server-status { display:flex; align-items:center; gap:11px; padding-bottom:24px; margin-bottom:25px; border-bottom:1px solid #2b394b; }
.server-status strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
#players-label { display:block; color:#9cadc2; font-size:12px; margin-top:4px; }
.status-dot { flex:none; width:8px; height:8px; border-radius:50%; background:#8b9eb8; }
.server-status[data-state=online] .status-dot { background:#7cd4a8; }
h1 { font-size:28px; line-height:1.2; letter-spacing:-.65px; margin:0 0 10px; }
.intro { color:#adbbcd; font-size:14px; line-height:1.65; margin:0 0 26px; overflow-wrap:anywhere; }
label { display:block; margin:20px 0 8px; font-size:13px; font-weight:600; }
input { width:100%; min-height:46px; padding:11px 12px; border:1px solid #40516a; border-radius:6px; background:#101923; color:#f5f8fd; font:inherit; font-size:15px; }
input:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #90baff; outline-offset:3px; }
input:focus { border-color:#90baff; }
.password-field { position:relative; }
.password-field input { padding-right:65px; }
button { font:inherit; cursor:pointer; }
.reveal { position:absolute; right:6px; top:6px; bottom:6px; width:52px; border:0; border-radius:4px; background:transparent; color:#b9d0ef; font-size:12px; }
.reveal:hover { background:#26384d; }
.primary-button { display:block; width:100%; min-height:46px; margin-top:24px; padding:11px 16px; border:0; border-radius:6px; background:#91baff; color:#102139; font-size:14px; font-weight:700; }
.primary-button:hover { background:#b3cfff; }
button:disabled { opacity:.5; cursor:default; }
.local-note { margin:20px 0 0; color:#9cadc2; text-align:center; font-size:12px; }
footer { padding:16px 24px 24px; text-align:center; color:#9cadc2; font-size:12px; line-height:1.8; }
footer span { margin:0 7px; }
a { color:#b7d1fa; text-underline-offset:3px; }
.eyebrow { font-size:10px; letter-spacing:1.2px; font-weight:700; color:#9cadc2; margin:0 0 10px; }
.loading-stage-row { display:flex; flex-direction:column; gap:7px; margin:24px 0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.loading-stage-row .eyebrow { margin:0; }
.progress-label { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:10px; font-size:12px; color:#adbbcd; }
.percentage { color:#edf2f7; font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#loading-track { height:6px; overflow:hidden; border-radius:3px; background:#314158; }
#loading-fill { display:block; width:0; height:100%; background:#91baff; }
#loading-meter[data-mode=waiting] #loading-track { opacity:.5; }
.loading-error { padding:12px; margin:20px 0 0; border:1px solid #9b6158; border-radius:6px; color:#ffd0c8; background:#392b2d; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.no-script { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:#101720; }
@media(max-width:480px) { .masthead { padding:20px; } .version { font-size:10px; letter-spacing:1px; } .client-card { padding:24px; } footer span { display:none; } footer a { display:block; } }
@media(max-height:620px) { .masthead { padding:16px 24px; } .shell-content { padding:20px; } }