:root{--bg: #0a0e14;--panel: rgba(13, 19, 29, .92);--line: #1d2733;--line-bright: #2c3b4d;--text: #cfd8e3;--dim: #6b7a8c;--cyan: #22d3ee;--orange: #f97316;--red: #ef4444;--green: #4ade80;--yellow: #facc15}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Lucida Console,Consolas,Courier New,monospace;font-size:14px}#app{position:relative;width:100%;height:100%}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% -20%,rgba(34,211,238,.07),transparent 60%),repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 4px),var(--bg)}.screen.active{display:flex}#game-root{background:var(--bg)}#game-root.active{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:#05080cd1;z-index:40}.overlay.active{display:flex}.panel{background:var(--panel);border:1px solid var(--line-bright);box-shadow:0 0 0 1px #0009,0 0 32px #22d3ee12,inset 0 0 24px #0006;padding:28px 32px}.center-panel{width:460px;max-width:92vw;text-align:center}.wide-panel{width:620px;max-width:94vw}.panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}.title{font-size:34px;letter-spacing:6px;color:var(--text);text-shadow:0 0 18px rgba(34,211,238,.4);margin-bottom:6px}.title .accent{color:var(--cyan)}.subtitle{color:var(--dim);font-size:12px;margin-bottom:22px}h2{letter-spacing:3px;font-size:18px;color:var(--cyan);margin-bottom:10px}.dim{color:var(--dim);font-size:12px}.center{text-align:center}.status-line{min-height:18px;margin-top:12px;font-size:12px;color:var(--yellow)}.form-row{display:flex;gap:10px;justify-content:center;margin:10px 0}.form-row.spread{justify-content:space-between}input[type=text]{flex:1;background:#060a10;border:1px solid var(--line-bright);color:var(--text);font:inherit;letter-spacing:1px;padding:10px 12px;outline:none}input[type=text]:focus{border-color:var(--cyan);box-shadow:0 0 8px #22d3ee59}.btn{background:#121a26;border:1px solid var(--line-bright);color:var(--text);font:inherit;letter-spacing:2px;padding:10px 18px;cursor:pointer;transition:background .12s,box-shadow .12s}.btn:hover:not(:disabled){background:#1a2536;box-shadow:0 0 10px #22d3ee40}.btn.primary{border-color:var(--cyan);color:var(--cyan)}.btn.armed{background:#22d3ee26}.btn:disabled{opacity:.4;cursor:default}.room-list{margin-top:14px;max-height:50vh;overflow-y:auto;border-top:1px solid var(--line)}.room-item{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line)}.room-item .room-name{flex:1;color:var(--text);letter-spacing:1px}.room-item .room-meta{color:var(--dim);font-size:12px}#lobby-empty{margin-top:16px}#lobby-empty.hidden{display:none}.player-list{margin:18px 0;border-top:1px solid var(--line)}.player-item{display:flex;justify-content:space-between;padding:12px 6px;border-bottom:1px solid var(--line)}.player-item .p-name{letter-spacing:1px}.player-item.you .p-name{color:var(--cyan)}.p-ready{color:var(--dim)}.p-ready.is-ready{color:var(--green)}#countdown-number{font-size:120px;color:var(--cyan);text-shadow:0 0 40px rgba(34,211,238,.7);letter-spacing:8px}#error-banner{position:absolute;top:14px;left:50%;transform:translate(-50%);background:#3c0c0cf2;border:1px solid var(--red);color:#fecaca;padding:10px 22px;font-size:13px;letter-spacing:1px;z-index:100;display:none}#error-banner.visible{display:block}#canvas-root{position:absolute;top:0;right:0;bottom:0;left:0}#canvas-root canvas{display:block}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.hud-label{color:var(--dim);font-size:10px;letter-spacing:2px;margin-right:8px}#hud-top{position:absolute;top:10px;left:12px;display:flex;gap:10px}.hud-box{background:var(--panel);border:1px solid var(--line);padding:6px 12px;font-size:14px}#hud-credits{color:var(--yellow);font-size:17px;font-weight:700}#hud-timer{color:var(--text)}#hud-ping{color:var(--dim)}.hud-audio-group{display:flex;gap:6px;pointer-events:auto}.hud-audio{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:11px;letter-spacing:1px;line-height:1;padding:7px 10px;cursor:pointer;white-space:nowrap;pointer-events:auto}.hud-audio:hover{border-color:var(--line-bright)}.hud-audio.muted{color:var(--dim);opacity:.6}#event-feed{position:absolute;top:12px;left:50%;transform:translate(-50%);width:420px;text-align:center;display:flex;flex-direction:column;gap:4px}.event-item{background:#0a1018d9;border:1px solid var(--line);padding:5px 12px;font-size:13px;letter-spacing:1px;animation:feed-fade 6s forwards}.event-item.good{color:var(--cyan)}.event-item.bad{color:var(--orange)}.event-item.warn{color:var(--red);border-color:var(--red)}@keyframes feed-fade{0%{opacity:0;transform:translateY(-6px)}6%{opacity:1;transform:translateY(0)}75%{opacity:1}to{opacity:0}}#hud-mech{position:absolute;left:14px;bottom:14px;width:250px;background:var(--panel);border:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px}.meter-row{display:flex;align-items:center}.meter-row .hud-label{width:44px}.meter{position:relative;flex:1;height:14px;background:#060a10;border:1px solid var(--line-bright)}.meter-fill{height:100%;width:100%;background:linear-gradient(90deg,#15803d,var(--green));transition:width .1s linear}.meter-fill.heat{background:linear-gradient(90deg,#92400e,var(--orange));width:0%}#hud-heat.overheated .meter-fill.heat{background:var(--red);animation:overheat-flash .4s steps(2) infinite}@keyframes overheat-flash{50%{opacity:.35}}.meter-text{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:10px;line-height:14px;color:#fff;text-shadow:0 0 3px #000}#hud-rockets{display:flex;align-items:center;gap:6px;flex:1}.pip{width:14px;height:14px;border:1px solid var(--line-bright);background:#060a10;transform:rotate(45deg)}.pip.full{background:var(--yellow);box-shadow:0 0 6px #facc1599}.reload-bar{flex:1;height:6px;margin-left:6px;background:#060a10;border:1px solid var(--line)}#hud-reload-fill{height:100%;width:0%;background:var(--yellow)}.mode-tag{font-weight:700;letter-spacing:1px;padding:1px 8px;border:1px solid var(--line-bright);color:var(--green);background:#060a10}.mode-tag.hover{color:#9fe8ff;border-color:#9fe8ff;box-shadow:0 0 8px #9fe8ff73}.mode-hint{margin-left:auto;font-size:10px;opacity:.55;letter-spacing:.5px}#hud-rockets.locked{opacity:.3;filter:grayscale(1)}#build-bar{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;gap:10px;align-items:flex-end;pointer-events:auto}.build-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:132px;padding:8px 6px;background:var(--panel);border:1px solid var(--line-bright);color:var(--text);font:inherit;cursor:pointer}.build-btn:hover:not(.unavailable){border-color:var(--cyan)}.build-btn .build-key{font-size:10px;color:var(--bg);background:var(--dim);padding:0 5px}.build-btn .build-name{font-size:11px;letter-spacing:1px;color:var(--cyan)}.build-btn .build-info{font-size:10px;color:var(--dim)}.build-btn.unavailable{opacity:.38;cursor:default}#build-queue{display:flex;gap:6px;align-items:flex-end;margin-left:8px;min-width:120px}.queue-item{position:relative;width:36px;height:36px;border:1px solid var(--line-bright);background:#060a10;overflow:hidden}.queue-item .q-fill{position:absolute;bottom:0;left:0;width:100%;background:#22d3ee59}.queue-item .q-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text)}#minimap{position:absolute;right:14px;bottom:14px;border:1px solid var(--line-bright);background:#05080c;image-rendering:pixelated}#debug-overlay{position:absolute;top:60px;left:12px;display:none;background:#000000c7;border:1px solid var(--line);color:#9fe8f5;font-size:11px;line-height:1.5;padding:8px 10px;white-space:pre;z-index:30}#debug-overlay.visible{display:block}.stats-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}.stats-table th,.stats-table td{border:1px solid var(--line);padding:7px 10px;text-align:center}.stats-table th{color:var(--dim);font-weight:400;letter-spacing:1px;font-size:11px}.stats-table td.stat-name{text-align:left;color:var(--dim)}.stats-table .you-col{color:var(--cyan)}.stats-table .enemy-col{color:var(--orange)}#result-title.victory{color:var(--cyan);text-shadow:0 0 30px rgba(34,211,238,.8)}#result-title.defeat{color:var(--red);text-shadow:0 0 30px rgba(239,68,68,.7)}.controls-btn{position:fixed;top:10px;right:12px;z-index:30;background:var(--panel);border:1px solid var(--line-bright);color:var(--text);font-family:inherit;font-size:12px;letter-spacing:1px;padding:7px 12px;cursor:pointer}.controls-btn:hover{border-color:var(--cyan);color:var(--cyan)}.controls-table{border-collapse:collapse;margin:8px auto 14px;font-size:14px}.controls-table td{padding:6px 14px;border-bottom:1px solid var(--line);text-align:left}.controls-table td:first-child{white-space:nowrap;color:var(--cyan)}kbd{display:inline-block;min-width:18px;text-align:center;padding:2px 6px;border:1px solid var(--line-bright);border-bottom-width:2px;border-radius:3px;background:#060a10;font-family:inherit;font-size:12px;color:var(--text)}