:root{--bg: #0e0f0c;--panel: #181a15f2;--line: #2d3027;--text: #e9e6dc;--muted: #9a9786;--accent: #e8a33d;--accent-ink: #1b1306;--ok: #7bc96f;--err: #ff7a6b;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}body{background:radial-gradient(1200px 600px at 70% -10%,#3a2f1844,transparent 60%),repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 12px),var(--bg)}body.playing{background:#000}canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;outline:none;visibility:hidden}body.playing canvas{visibility:visible}.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 30px 80px #000a;z-index:2}.panel[hidden]{display:none}header{display:flex;gap:14px;align-items:center;margin-bottom:18px}.logo svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:5}h1{margin:0;font-size:22px;letter-spacing:.3px}.sub{margin:2px 0 0;color:var(--muted)}.server{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:18px;background:#0f100d}.server .row{display:flex;align-items:center;gap:10px;padding:3px 0}.server .row span{color:var(--muted);width:110px;flex:none}.server .row strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#server-online{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--err);flex:none}#server-online.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}form{display:grid;gap:12px}label{display:grid;gap:6px;color:var(--muted);font-size:13px}label[hidden]{display:none}input:not([type=checkbox]){font:inherit;color:var(--text);background:#0b0c09;border:1px solid var(--line);border-radius:8px;padding:10px 12px;outline:none}input:focus{border-color:var(--accent)}label.check{display:flex;align-items:center;gap:8px;font-size:14px}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}button{font-family:inherit;font-size:16px;font-weight:700;line-height:1;letter-spacing:.5px;color:var(--accent-ink);background:var(--accent);border:0;border-radius:8px;padding:13px;cursor:pointer;margin-top:4px}button:hover{filter:brightness(1.08)}button:disabled{opacity:.5;cursor:default}.hint{color:var(--muted);font-size:13px;margin:14px 0 0}.note{color:var(--text);background:#e8a33d14;border:1px solid #e8a33d44;border-radius:8px;padding:10px 12px;margin:14px 0 0;font-size:13px}.note a{color:var(--accent);word-break:break-all}.note[hidden]{display:none}.error{color:var(--err);background:#ff7a6b14;border:1px solid #ff7a6b44;border-radius:8px;padding:10px 12px;margin:14px 0 0}.help{margin-top:14px;color:var(--muted);font-size:13px}.help summary{cursor:pointer}.help ul{padding-left:18px;margin:8px 0 0}.help li{margin:4px 0}kbd{font:600 12px ui-monospace,Consolas,monospace;color:var(--text);background:#24271f;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px}#loading-text{margin:0 0 14px;font-weight:600}.progress{height:8px;background:#0b0c09;border:1px solid var(--line);border-radius:99px;overflow:hidden}#bar{height:100%;width:0%;background:var(--accent);transition:width .2s}#bar.indeterminate{width:35%!important;animation:slide 1.1s ease-in-out infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(290%)}}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);max-width:calc(100vw - 32px);background:#000c;border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:99px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:3}#toast.show{opacity:1;transform:translate(-50%)}h2{font-size:15px;margin:18px 0 10px;color:var(--text)}label.field{margin-bottom:12px}select{font:inherit;color:var(--text);background:#0b0c09;border:1px solid var(--line);border-radius:8px;padding:10px 12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.files{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px;background:#0f100d}.files .row{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.files .row span{color:var(--muted)}#files-status.ok{color:var(--ok)}.files .hint code,.hint code{font-size:12px;word-break:break-all}.btn-secondary{display:block;text-align:center;color:var(--text);background:#24271f;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer;font-size:14px;font-weight:600}.btn-secondary:hover{border-color:var(--accent)}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);margin:20px 0 4px;font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}form.inline{display:flex;gap:8px}form.inline input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:1px}form.inline button{margin-top:0;padding:10px 16px}.checks{display:grid;gap:8px;margin-top:16px}#join-view button,#host-btn{width:100%}#host-online{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--err);flex:none}#host-online.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.hint a{color:var(--accent)}#invite{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);background:#000d;border:1px solid var(--accent);border-radius:99px;padding:6px 6px 6px 14px;font-size:13px}#invite[hidden]{display:none}#invite code{color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}#invite button{margin:0;padding:7px 12px;font-size:13px;border-radius:99px;white-space:nowrap}@media(max-width:480px){.grid2{grid-template-columns:1fr}#invite code{display:none}}