*{box-sizing:border-box;margin:0;padding:0}body{background:#0a0a0a;font-family:monospace;overflow:hidden}#canvas{width:100vw;height:100vh;display:block}.screen{color:#fff;background:linear-gradient(160deg,#0d0d0d 0%,#1a1a2e 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.screen.hidden{display:none!important}#main-menu h1{letter-spacing:6px;text-transform:uppercase;color:#fff;text-shadow:0 0 24px #e74c3cb3;margin-bottom:8px;font-size:56px}#main-menu .subtitle{letter-spacing:3px;color:#666;text-transform:uppercase;margin-bottom:60px;font-size:14px}.menu-buttons{flex-direction:column;gap:14px;width:280px;display:flex}.menu-btn{letter-spacing:4px;text-transform:uppercase;cursor:pointer;color:#ccc;background:0 0;border:1px solid #333;border-radius:4px;padding:16px 0;font-size:18px;transition:all .15s}.menu-btn:hover{color:#fff;text-shadow:0 0 10px #ffffff80;background:#e74c3c;border-color:#e74c3c;box-shadow:0 0 20px #e74c3c66}.menu-btn.disabled{opacity:.35;cursor:not-allowed}.menu-btn.disabled:hover{color:#ccc;box-shadow:none;text-shadow:none;background:0 0;border-color:#333}#player-type-screen h2{letter-spacing:4px;text-transform:uppercase;color:#fff;margin-bottom:8px;font-size:28px}#player-type-screen .section-label{letter-spacing:3px;color:#555;text-transform:uppercase;margin-bottom:40px;font-size:11px}.type-cards{gap:20px;margin-bottom:40px;display:flex}.type-card{cursor:pointer;color:#666;text-align:center;background:#ffffff08;border:1px solid #2a2a2a;border-radius:8px;width:160px;padding:28px 16px;font-family:monospace;transition:all .2s}.type-card:hover{color:#ccc;background:#ffffff0f;border-color:#555}.type-card.active{color:#ffe000;background:#ffe00012;border-color:#ffe000;box-shadow:0 0 20px #ffe00026}.type-card .tc-icon{margin-bottom:12px;font-size:36px}.type-card .tc-name{letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;font-size:14px;font-weight:700}.type-card .tc-desc{letter-spacing:1px;color:#444;font-size:10px;line-height:1.5}.type-card.active .tc-desc{color:#a90}.type-screen-actions{gap:12px;display:flex}#btn-type-back{color:#666;background:0 0;border:1px solid #333}#btn-type-back:hover{color:#fff;border-color:#fff}#btn-type-play{color:#fff;background:#e74c3c;border:1px solid #e74c3c}#btn-type-play:hover{background:#c0392b;border-color:#c0392b;box-shadow:0 0 20px #e74c3c66}#level-select-screen h2{letter-spacing:4px;text-transform:uppercase;color:#fff;margin-bottom:8px;font-size:28px}#level-select-screen .section-label{letter-spacing:3px;color:#555;text-transform:uppercase;margin-bottom:40px;font-size:11px}.level-cards{gap:20px;margin-bottom:40px;display:flex}.level-card{cursor:pointer;color:#666;text-align:center;background:#ffffff08;border:1px solid #2a2a2a;border-radius:8px;width:160px;padding:28px 16px;font-family:monospace;transition:all .2s}.level-card:hover{color:#ccc;background:#ffffff0f;border-color:#555}.level-card.active{color:#00d4ff;background:#00d4ff12;border-color:#00d4ff;box-shadow:0 0 20px #00d4ff26}.level-card .lc-icon{margin-bottom:12px;font-size:36px}.level-card .lc-name{letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;font-size:14px;font-weight:700}.level-card .lc-desc{letter-spacing:1px;color:#444;white-space:pre-line;font-size:10px;line-height:1.6}.level-card.active .lc-desc{color:#089}.level-screen-actions{gap:12px;display:flex}#btn-level-back{color:#666;background:0 0;border:1px solid #333}#btn-level-back:hover{color:#fff;border-color:#fff}#btn-level-play{color:#fff;background:#e74c3c;border:1px solid #e74c3c}#btn-level-play:hover{background:#c0392b;border-color:#c0392b;box-shadow:0 0 20px #e74c3c66}#lobby-screen h2{letter-spacing:4px;text-transform:uppercase;color:#fff;margin-bottom:8px;font-size:28px}#lobby-screen .section-label{letter-spacing:3px;color:#555;text-transform:uppercase;margin-bottom:32px;font-size:11px}.lobby-tabs{border:1px solid #333;border-radius:6px;gap:0;margin-bottom:28px;display:flex;overflow:hidden}.lobby-tab{letter-spacing:3px;text-transform:uppercase;cursor:pointer;color:#555;background:0 0;border:none;flex:1;padding:12px 40px;font-family:monospace;font-size:14px;transition:all .15s}.lobby-tab.active{color:#fff;background:#1a1a2e}.lobby-tab:hover:not(.active){color:#aaa}.lobby-panel{width:380px}#panel-host{flex-direction:column;gap:14px;display:flex}#room-name-input{letter-spacing:2px;color:#fff;background:#ffffff0a;border:1px solid #333;border-radius:4px;outline:none;width:100%;padding:14px 16px;font-family:monospace;font-size:15px;transition:border-color .15s}#room-name-input:focus{border-color:#e74c3c}#room-name-input::placeholder{color:#444}#btn-host-next{letter-spacing:4px;text-transform:uppercase;cursor:pointer;color:#fff;background:#e74c3c;border:1px solid #e74c3c;border-radius:4px;padding:14px 0;font-family:monospace;font-size:15px;transition:all .15s}#btn-host-next:hover{background:#c0392b;border-color:#c0392b}#panel-join{flex-direction:column;gap:12px;display:flex}#room-list{flex-direction:column;gap:8px;min-height:80px;max-height:260px;display:flex;overflow-y:auto}.room-entry{background:#ffffff0a;border:1px solid #2a2a2a;border-radius:4px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.room-entry:hover{border-color:#444}.room-entry-info{flex-direction:column;gap:3px;display:flex}.room-entry-name{color:#ddd;letter-spacing:1px;font-size:14px}.room-entry-count{color:#555;letter-spacing:1px;font-size:11px}.room-empty{color:#444;letter-spacing:2px;text-align:center;padding:24px 0;font-size:13px}.btn-join-room{letter-spacing:2px;text-transform:uppercase;cursor:pointer;color:#00d4ff;background:0 0;border:1px solid #00d4ff;border-radius:4px;padding:8px 20px;font-family:monospace;font-size:12px;transition:all .15s}.btn-join-room:hover{color:#000;background:#00d4ff}#btn-refresh-rooms{letter-spacing:3px;text-transform:uppercase;cursor:pointer;color:#666;background:0 0;border:1px solid #333;border-radius:4px;padding:10px 0;font-family:monospace;font-size:12px;transition:all .15s}#btn-refresh-rooms:hover{color:#fff;border-color:#fff}.lobby-actions{gap:12px;width:380px;margin-top:24px;display:flex}#btn-lobby-back{color:#666;background:0 0;border:1px solid #333;flex:1}#btn-lobby-back:hover{color:#fff;border-color:#fff}#options-screen h2{letter-spacing:4px;text-transform:uppercase;color:#fff;margin-bottom:8px;font-size:28px}#options-screen .section-label{letter-spacing:3px;color:#555;text-transform:uppercase;margin-bottom:32px;font-size:11px}#bindings-list{flex-direction:column;gap:10px;width:360px;margin-bottom:36px;display:flex}.binding-row{background:#ffffff0a;border:1px solid #222;border-radius:4px;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.binding-row span{letter-spacing:2px;color:#aaa;text-transform:uppercase;font-size:14px}.key-btn{letter-spacing:2px;text-transform:uppercase;cursor:pointer;color:#fff;background:#111;border:1px solid #444;border-radius:4px;min-width:90px;padding:7px 12px;font-family:monospace;font-size:13px;transition:all .15s}.key-btn:hover{color:#e74c3c;border-color:#e74c3c}.key-btn.listening{color:#ffe000;border-color:#ffe000;animation:.8s ease-in-out infinite pulse;box-shadow:0 0 10px #ffe0004d}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.options-actions{gap:12px;display:flex}.opt-btn{letter-spacing:3px;text-transform:uppercase;cursor:pointer;border-radius:4px;padding:12px 28px;font-family:monospace;font-size:14px;transition:all .15s}#btn-back{color:#aaa;background:0 0;border:1px solid #555}#btn-back:hover{color:#fff;border-color:#fff}#btn-reset{color:#666;background:0 0;border:1px solid #333}#btn-reset:hover{color:#e74c3c;border-color:#e74c3c}#result-overlay{background:#000000e0}#result-overlay h1{margin-bottom:16px;font-size:42px}#result-overlay p{color:#666;letter-spacing:2px;margin-bottom:36px;font-size:16px}#result-overlay button{letter-spacing:3px;text-transform:uppercase;cursor:pointer;color:#fff;background:#e74c3c;border:none;border-radius:4px;padding:14px 40px;font-family:monospace;font-size:16px}#result-overlay button:hover{background:#c0392b}#hud{color:#fff;text-align:center;pointer-events:none;text-shadow:0 0 6px #000;font-family:monospace;font-size:18px;position:fixed;top:16px;left:50%;transform:translate(-50%)}#role{margin-bottom:4px;font-size:22px;font-weight:700}#crosshair{pointer-events:none;width:20px;height:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair:before,#crosshair:after{content:"";background:#ffffffe6;position:absolute}#crosshair:before{width:2px;height:100%;left:50%;transform:translate(-50%)}#crosshair:after{width:100%;height:2px;top:50%;transform:translateY(-50%)}#powerups{pointer-events:none;gap:12px;display:flex;position:fixed;bottom:24px;left:24px}.pu-slot{color:#fff;text-align:center;background:#0009;border:2px solid #555;border-radius:8px;width:80px;padding:8px 6px;font-family:monospace;transition:border-color .1s}.pu-slot.selected{border-color:#ffe000;box-shadow:0 0 10px #ffe000}.pu-slot.active{border-color:#0f8;box-shadow:0 0 10px #0f8}.pu-slot.cooldown{opacity:.7;border-color:#e74c3c}.pu-key{font-size:18px;font-weight:700}.pu-name{color:#aaa;letter-spacing:1px;margin:2px 0;font-size:10px}.pu-cd{color:#ff6b6b;min-height:16px;font-size:13px}#minimap{z-index:10;pointer-events:none;border:2px solid #ffffff2e;border-radius:50%;width:160px;height:160px;position:fixed;bottom:24px;right:24px;box-shadow:0 0 16px #0009,inset 0 0 8px #0006}#pause-screen{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#pause-screen h2{letter-spacing:6px;text-transform:uppercase;color:#fff;margin-bottom:8px;font-size:36px}#pause-screen .pause-hint{letter-spacing:3px;color:#555;text-transform:uppercase;margin-bottom:48px;font-size:11px}.pause-buttons{flex-direction:column;gap:12px;width:240px;display:flex}.pause-btn{letter-spacing:4px;text-transform:uppercase;cursor:pointer;color:#ccc;background:0 0;border:1px solid #333;border-radius:4px;padding:14px 0;font-family:monospace;font-size:15px;transition:all .15s}.pause-btn:hover{color:#fff;border-color:#fff}#btn-pause-exit{color:#666;border-color:#2a0a0a}#btn-pause-exit:hover{color:#e74c3c;border-color:#e74c3c}.hidden{display:none!important}