*{box-sizing:border-box}html,body{margin:0;height:100%;background:#12141f;color:#e8e8f0;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;overflow:hidden}#game{position:fixed;inset:0;display:grid;place-items:center}#game canvas{image-rendering:pixelated;display:block}#hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:12px 16px;font-size:12px;line-height:1.6;text-shadow:0 1px 2px #000}#hud-top{display:flex;justify-content:space-between;gap:16px}#players{display:flex;flex-direction:column;gap:2px}#players .slot{display:flex;align-items:center;gap:6px;opacity:.95}#players .dot{width:8px;height:8px;border-radius:2px}#players .me{font-weight:700}#players .hp{color:#ef476f;font-size:11px}#players .off{opacity:.4}#revive{position:fixed;inset:0;display:grid;place-items:center;background:#0b0e1699;z-index:35;pointer-events:auto}#revive[hidden]{display:none}.revive-box{text-align:center;padding:20px 30px;border:2px solid #ef476f;border-radius:10px;background:#1a1e2f}.revive-title{font-size:20px;font-weight:700;color:#ef476f;letter-spacing:.08em;margin:0 0 6px}.revive-sub{margin:0 0 14px;color:#9aa0b5;font-size:12px}#revive-btn{cursor:pointer;font:inherit;font-size:15px;font-weight:700;padding:10px 28px;background:#ef476f;color:#12141f;border:0;border-radius:6px;letter-spacing:.06em}#revive-btn:hover{background:#f26b8c}#stats{text-align:right;color:#9aa0b5;white-space:pre}#map{text-align:right;color:#4cc9f0;font-weight:700}#hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}#controls{color:#9aa0b5;align-self:center}#controls kbd{background:#262a3d;border:1px solid #3a3f57;border-bottom-width:2px;border-radius:3px;padding:1px 5px;margin:0 1px;color:#e8e8f0}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:#12141feb;text-align:center;padding:24px;transition:opacity .25s}#overlay.hidden{opacity:0;pointer-events:none}#overlay h1{font-size:18px;margin:0 0 10px;letter-spacing:.05em}#overlay p{margin:0;color:#9aa0b5;font-size:13px;max-width:460px;line-height:1.7}#overlay button{pointer-events:auto;margin-top:18px;cursor:pointer;font:inherit;font-size:13px;padding:8px 20px;background:#4cc9f0;color:#12141f;border:0;border-radius:4px}#overlay button:hover{background:#7ad8f5}#touch-controls{position:fixed;inset:0;pointer-events:none;z-index:10}#touch-controls .touch-btn{pointer-events:auto;position:absolute;bottom:28px;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;border:2px solid rgba(255,255,255,.25);background:#14182873;color:#e8e8f0;font-size:28px;font-weight:700;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}#touch-controls .touch-btn.pressed{background:#4cc9f08c;border-color:#fff9}#touch-controls .touch-left{left:20px}#touch-controls .touch-right{left:96px}#touch-controls .touch-jump{right:20px;bottom:40px;border-radius:50%;width:76px;height:76px}#touch-controls .touch-attack{right:108px;bottom:40px;border-radius:50%;width:64px;height:64px;font-size:24px}#touch-controls .touch-map{left:50%;bottom:108px;transform:translate(-50%);width:60px;height:60px;border-radius:50%;font-size:20px}@media(pointer:coarse){#controls{display:none}}#lobby{position:fixed;inset:0;display:grid;place-items:center;background:#0b0e16eb;z-index:30}.lobby-box{width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;text-align:center}.lobby-title{font-size:26px;letter-spacing:.08em;margin:0 0 6px;color:#4cc9f0}.lobby-label{font-size:12px;text-align:left;color:#9aa0b5;margin-top:4px}.lobby-input{font:inherit;font-size:15px;padding:10px 12px;background:#1a1e2f;border:1px solid #333a55;border-radius:6px;color:#e8e8f0;outline:none}.lobby-input:focus{border-color:#4cc9f0}.lobby-chars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}.lobby-char{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;background:#1a1e2f;border:2px solid #333a55;border-radius:8px;color:#e8e8f0;font:inherit}.lobby-char canvas{image-rendering:pixelated;width:48px;height:5px}.lobby-char.selected{border-color:#4cc9f0;background:#20263c}.lobby-char-name{font-size:12px;font-weight:700}.lobby-char-dot{width:10px;height:10px;border-radius:50%}.lobby-start{cursor:pointer;margin-top:8px;font:inherit;font-size:15px;font-weight:700;padding:12px;background:#4cc9f0;border:0;border-radius:6px;color:#12141f}.lobby-start:hover:not(:disabled){background:#7ad8f5}.lobby-start:disabled{opacity:.4;cursor:not-allowed}#chat-btn{position:fixed;left:50%;bottom:14px;transform:translate(100%);z-index:20;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#14182880;font-size:20px;cursor:pointer;pointer-events:auto;touch-action:manipulation}#chat-btn.active{background:#4cc9f08c}#chat-input{position:fixed;left:50%;bottom:14px;transform:translate(-50%);z-index:21;width:min(380px,calc(100vw - 160px));padding:10px 12px;font:inherit;font-size:14px;background:#1a1e2f;border:1px solid #333a55;border-radius:8px;color:#e8e8f0;outline:none}#chat-input:focus{border-color:#4cc9f0}#chat-send{position:fixed;right:24px;bottom:14px;z-index:21;padding:10px 16px;font:inherit;font-size:14px;font-weight:700;background:#4cc9f0;border:0;border-radius:8px;color:#12141f;cursor:pointer}@media(pointer:coarse){#chat-btn{bottom:108px}}#members-panel{position:fixed;inset:0;display:grid;place-items:center;background:#0b0e16b3;z-index:40}#members-panel[hidden]{display:none}.members-box{width:min(400px,calc(100vw - 32px));background:#1a1e2f;border:2px solid #333a55;border-radius:10px;padding:18px 20px;color:#e8e8f0}.members-title{font-size:18px;font-weight:700;color:#4cc9f0;text-align:center;letter-spacing:.05em;margin-bottom:12px;text-transform:uppercase}.members-section{margin-bottom:12px}.members-sub{font-size:12px;color:#9aa0b5;font-weight:700;margin-bottom:4px}.members-box ul{margin:0;padding-left:18px}.members-box li{font-size:13px;line-height:1.7}.members-close{display:block;width:100%;margin-top:6px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;padding:9px;background:#4cc9f0;border:0;border-radius:6px;color:#12141f}.members-close:hover{background:#7ad8f5}#map-select-panel{position:fixed;inset:0;display:grid;place-items:center;background:#0b0e16b3;z-index:40}#map-select-panel[hidden]{display:none}.map-select-box{width:min(320px,calc(100vw - 32px));background:#1a1e2f;border:2px solid #333a55;border-radius:10px;padding:18px 20px;color:#e8e8f0}.map-select-title{font-size:18px;font-weight:700;color:#4cc9f0;text-align:center;letter-spacing:.05em;margin-bottom:12px;text-transform:uppercase}.map-select-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.map-card{display:grid;grid-template-columns:1fr;gap:6px;margin:0;padding:6px;border:2px solid #333a55;border-radius:8px;background:#232840;cursor:pointer;text-align:left;font:inherit;color:inherit}.map-card:hover{border-color:#4cc9f0}.map-preview{display:block;overflow:hidden;border-radius:5px}.map-preview canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.map-name{font-size:14px;font-weight:700;color:#f2f2fa}.map-desc{font-size:11px;color:#9aa0b5}.map-card.map-current{border-color:#4cc9f0;opacity:.55;cursor:default}.map-card.map-current .map-name:after{content:" (aktif)";color:#4cc9f0;font-weight:400}.map-select-close{display:block;width:100%;margin-top:6px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;padding:9px;background:#4cc9f0;border:0;border-radius:6px;color:#12141f}.map-select-close:hover{background:#7ad8f5}