html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui,sans-serif}canvas{display:block}#hud{position:fixed;top:12px;left:12px;font:14px/1.4 monospace;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none;-webkit-user-select:none;user-select:none}#hud div{margin-bottom:2px}#env-panel{position:fixed;top:12px;right:12px;background:#0000008c;padding:8px 10px;border-radius:6px;color:#eee;font:12px/1.4 monospace;-webkit-user-select:none;user-select:none}.env-row{display:flex;gap:4px;align-items:center;margin:2px 0}.env-label{width:60px;opacity:.7}#env-panel button{padding:2px 6px;font-size:11px;background:#222;color:#ccc;border:1px solid #444;border-radius:3px;cursor:pointer;font-family:inherit}#env-panel button:hover{background:#333}#env-panel button.active{background:#4a80ff;color:#fff;border-color:#6a9aff}#login{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c14f5;display:flex;align-items:center;justify-content:center}#login form{background:#1e2029;padding:32px;border-radius:8px;display:flex;flex-direction:column;gap:12px;width:320px}#login h2{margin:0 0 8px;color:#e6e8ee;font-size:18px}#login input{padding:10px;border-radius:4px;border:1px solid #444;background:#14161c;color:#eee;font-size:14px}#login button{padding:10px;border-radius:4px;border:none;cursor:pointer;font-size:14px}#login button[type=submit]{background:#4a80ff;color:#fff}#login button#login-toggle{background:transparent;color:#4a80ff}#login-error{color:#ffb0b0;font-size:13px}#picker{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c14eb;color:#e6e8ee;display:flex;flex-direction:column;padding:24px;overflow-y:auto}#picker header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}#picker h1{margin:0;font-size:22px;font-weight:600}#picker .picker-actions{display:flex;gap:6px;align-items:center}#picker .picker-actions button{background:#2a2c36;color:#e6e8ee;border:1px solid #444;padding:6px 10px;border-radius:4px;font-size:13px;cursor:pointer}#picker .picker-actions button:hover{background:#3a3d4a}#picker-close{background:transparent;color:#e6e8ee;border:1px solid #444;width:32px;height:32px;border-radius:4px;cursor:pointer;font-size:18px;line-height:1}#picker-close:hover{background:#2a2c36}#picker-tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:24px}#picker-tracks .empty{color:#888;grid-column:1 / -1}.card{position:relative;background:#1e2029;border:1px solid #2a2c36;border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .1s;-webkit-user-select:none;user-select:none}.card:hover{border-color:#4a80ff}.card:active{transform:scale(.98)}.card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#14161c}.card.no-thumb{background:linear-gradient(135deg,#1a1d28,#2a1d3a)}.card.no-thumb:before{content:"";display:block;aspect-ratio:1}.card .name{padding:8px 10px 2px;font-size:14px;font-weight:600}.card .meta{padding:0 10px 10px;font-size:12px;color:#888}.card .del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:4px;background:#0009;color:#fff;border:none;cursor:pointer;font-size:16px;line-height:1;opacity:0;transition:opacity .15s}.card:hover .del{opacity:1}.card .del:hover{background:#c33}#picker-upload{border:2px dashed #444;border-radius:8px;padding:32px;text-align:center;color:#888;transition:border-color .15s,background .15s}#picker-upload.drag{border-color:#4a80ff;background:#4a80ff14}#picker-upload p{margin:4px 0}#picker-upload .btn{display:inline-block;margin-top:8px;padding:8px 16px;border-radius:4px;background:#4a80ff;color:#fff;cursor:pointer;font-size:14px}#picker-upload .btn:hover{background:#3868e0}#picker-error{margin-top:12px;padding:10px 14px;background:#c8323226;border:1px solid #a33;border-radius:6px;color:#ffb0b0;font-size:13px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c14d9;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#1e2029;border:1px solid #2a2c36;border-radius:8px;max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;color:#e6e8ee}.modal-content header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #2a2c36}.modal-content h2{margin:0;font-size:16px;font-weight:600}.modal-close{background:transparent;color:#e6e8ee;border:1px solid #444;width:28px;height:28px;border-radius:4px;cursor:pointer;font-size:16px}.modal-close:hover{background:#2a2c36}.modal-body{padding:16px;overflow-y:auto;max-height:70vh}.modal-body code{background:#14161c;padding:1px 5px;border-radius:3px;font-size:.9em}.modal-body pre{background:#14161c;padding:8px;border-radius:4px;overflow-x:auto;font-size:12px}.mod-list{display:flex;flex-direction:column;gap:10px;min-width:500px}.mod-card{background:#14161c;border:1px solid #2a2c36;border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.mod-name{font-weight:600;font-size:14px}.mod-meta{font-size:12px;color:#888}.mod-actions{display:flex;gap:8px;margin-top:4px}.mod-actions button,.btn-preview{padding:5px 10px;border-radius:4px;border:1px solid #444;background:#2a2c36;color:#e6e8ee;font-size:12px;cursor:pointer}.mod-actions .btn-approve{background:#2d6a3e;border-color:#3a8a51}.mod-actions .btn-approve:hover{background:#3a8a51}.mod-actions .btn-reject{background:#6a2d2d;border-color:#8a3a3a}.mod-actions .btn-reject:hover{background:#8a3a3a}.mod-actions .btn-preview:hover,.btn-preview:hover{background:#3a3d4a}.status{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;align-self:flex-start}.status-pending{background:#5a4a1a;color:#ffd77a}.status-approved{background:#2d5a3e;color:#8fe0a5}.status-rejected{background:#5a2d2d;color:#ff9a9a}.reject-reason{font-size:12px;color:#ffb0b0;font-style:italic}.hidden{display:none!important}#lobby{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#0a0c12f2;color:#fff;display:flex;flex-direction:column;padding:20px;font-family:sans-serif}#lobby.hidden{display:none!important}.lobby-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;padding-bottom:10px}.lobby-head h2{margin:0;color:#fff}#lobby-body{flex:1;overflow-y:auto;margin-top:20px;max-width:600px}.lobby-entry h3,.lobby-room h3{margin-top:0}.lobby-entry select,.lobby-entry input,.lobby-entry button{margin-bottom:10px;padding:8px}.lobby-entry .join-row{display:flex;gap:10px}.lobby-room ul{list-style:none;padding:0}.lobby-room li{padding:8px 0;border-bottom:1px solid #222;display:flex;justify-content:space-between}.badge{background:#444;padding:2px 6px;border-radius:4px;font-size:.8em}.lobby-actions{margin-top:20px;display:flex;gap:10px}.lobby-error{color:#ff8a8a;padding:10px;background:#ff00001a;border:1px solid #f00;border-radius:4px;margin-bottom:10px}