:root{color-scheme:dark;--ground:#101b1d;--panel:#142722;--text:#ecf2e9;--muted:#b9ccbd;--line:#61816e;--accent:#e1ca83;--error:#ffbfad;font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--ground);color:var(--text)}body{overflow:hidden}button,input{font:inherit}button{min-height:48px;padding:10px 20px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out}button:hover{background:#294438;border-color:var(--accent)}button:disabled{opacity:.6;cursor:wait}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}input{min-width:0;width:100%;min-height:48px;border:1px solid var(--line);border-radius:5px;padding:10px 12px;background:#0e1c18;color:var(--text);caret-color:var(--accent)}input::selection{background:var(--accent);color:#172018}::selection{background:#e1ca83;color:#172018}a{color:var(--accent);text-underline-offset:4px}canvas{display:block;width:100%;height:100%;outline:none}canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}[hidden]{display:none!important}
#entry{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:32px 20px;overflow:auto;background:linear-gradient(90deg,#0e1b18ed,#10211ac7),url('poster.png') center/cover no-repeat}.entry-inner{width:min(100%,420px);padding:32px;background:#10221af2;border-radius:12px;box-shadow:0 16px 48px #0007}.brand{display:inline-block;color:var(--accent);font-size:18px;font-weight:600;letter-spacing:.12em;text-decoration:none}h1{font-size:30px;line-height:1.15;font-weight:600;margin:28px 0 12px}p{margin:0 0 22px}#entry-description,.hint,.entry-note{color:var(--muted)}form{display:flex;flex-direction:column;gap:8px}label:not(:first-child){margin-top:12px}.password-row{display:flex;gap:8px}.password-row input{flex:1}.password-row button{padding-inline:12px;font-size:14px}.primary{margin-top:16px;width:100%;background:var(--accent);color:#172018;border-color:var(--accent);font-weight:600}.primary:hover{background:#f1ddaa;color:#172018}.hint{font-size:14px;margin:2px 0 0}.entry-note{font-size:13px;margin:26px 0 0}#error{color:var(--error);white-space:pre-line;margin:14px 0 0}#error:empty{margin:0}progress{width:100%;height:10px;accent-color:var(--accent);margin-top:20px}#character-summary{font-size:20px;margin-bottom:8px}#account-controls{position:absolute;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:12px;padding:8px 12px;background:#10221ae8;border-radius:6px}#character-label{font-weight:600}#save-status{color:var(--muted);font-size:13px;min-width:125px;font-variant-numeric:tabular-nums}.quiet{background:transparent}#state,#network-state{position:absolute;left:12px;bottom:8px;color:var(--muted);background:var(--ground);font:11px monospace;max-width:94%;overflow:hidden;white-space:nowrap}#network-state{bottom:32px}
@media(max-width:850px){#account-controls{top:auto;bottom:14px;left:14px;right:14px;gap:8px;flex-wrap:wrap}#character-label{flex:1}#save-status{min-width:0}#account-controls button{flex:1}#reconnect{order:3}#logout{order:4}}@media(max-width:460px){#entry{padding:20px 14px}.entry-inner{padding:24px}h1{font-size:27px}#account-controls{padding:10px}#save-status{font-size:12px}}@media(prefers-reduced-motion:reduce){button{transition:none}}