:root{--bg: #060a14;--panel: #101830;--ink: #d8e6ff;--dim: #5d6f93;--line: #2a3a66;--edge: #c8d8f8;--shadow: #04060e;--red: #f8405c;--red-soft: rgba(248, 64, 92, .16);--red-glow: #901c30;--blue: #30b8f8;--blue-soft: rgba(48, 184, 248, .14);--blue-glow: #14608c;--lime: #b8f818;--amber: #f8b820;--display: "Press Start 2P", monospace;--mono: "IBM Plex Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--display);overflow:hidden}button,input{font-family:inherit}.hidden{display:none!important}#stars{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-image:radial-gradient(1px 1px at 25px 35px,#9db8e8 50%,transparent 50%),radial-gradient(1px 1px at 110px 90px,#5d6f93 50%,transparent 50%),radial-gradient(1.5px 1.5px at 200px 160px,#d8e6ff 50%,transparent 50%),radial-gradient(1px 1px at 300px 60px,#5d6f93 50%,transparent 50%),radial-gradient(1px 1px at 380px 220px,#9db8e8 50%,transparent 50%);background-size:420px 280px;animation:starDrift 120s linear infinite;opacity:.5}@keyframes starDrift{0%{background-position:0 0}to{background-position:-420px 280px}}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.16) 2px,rgba(0,0,0,.16) 3px);mix-blend-mode:multiply}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:91;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,5,.55) 100%)}#app{position:relative;z-index:1;height:100%;overflow-y:auto}.screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3.5vh,34px);padding:24px}.wordmark{text-align:center;animation:riseIn .7s ease-out both}.logo{font-size:clamp(32px,min(8vw,11vh),64px);line-height:1.2;color:#f4f8ff;text-shadow:-4px 0 0 var(--red),4px 0 0 var(--blue),0 6px 0 var(--shadow);animation:flicker 4.5s infinite}.tagline{margin-top:10px;font-family:var(--mono);font-size:clamp(11px,2vw,14px);letter-spacing:.55em;text-indent:.55em;color:var(--dim)}@keyframes flicker{0%,91%,95%,to{opacity:1}93%{opacity:.75}}@keyframes riseIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.panel{width:min(380px,92vw);background:var(--panel);border:4px solid var(--edge);outline:4px solid var(--shadow);box-shadow:8px 8px #04060eb3;padding:26px 24px;display:flex;flex-direction:column;gap:16px;animation:riseIn .7s .12s ease-out both}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--dim)}input{background:#070b18;border:3px solid var(--line);color:var(--ink);padding:11px 12px;font-family:var(--display);font-size:12px;text-transform:uppercase;outline:none}input:focus{border-color:var(--blue)}#code-input{width:130px;text-align:center;font-size:14px;letter-spacing:.2em;text-indent:.2em}.btn{cursor:pointer;background:#182448;border:3px solid var(--line);color:var(--ink);padding:12px 14px;font-family:var(--display);font-size:10px;line-height:1.4;box-shadow:3px 3px 0 var(--shadow);transition:none}.btn:hover{border-color:var(--edge);background:#223060}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}.btn-primary{border-color:var(--lime);color:var(--lime)}.btn-primary:hover{background:#2a3a18;border-color:var(--lime)}.divider{display:flex;align-items:center;gap:10px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.3em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.join-row{display:flex;gap:10px;justify-content:center}.join-row .btn{flex:1}.menu-help{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim);animation:riseIn .7s .24s ease-out both}.lobby-head{text-align:center;display:flex;flex-direction:column;gap:6px}.lobby-label{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-indent:.4em;color:var(--dim)}.lobby-code{font-family:var(--display);font-size:clamp(28px,6vw,48px);letter-spacing:.25em;text-indent:.25em;color:var(--lime);text-shadow:4px 4px 0 var(--shadow)}.lobby-hint{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}.lobby-results{width:min(420px,92vw);background:var(--panel);border:3px solid var(--edge);outline:3px solid var(--shadow);box-shadow:5px 5px #04060eb3;padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-family:var(--display)}.lobby-results .results-title{font-size:10px;line-height:1.5;text-align:center;text-shadow:2px 2px 0 var(--shadow)}.lobby-results .results-title.team-red{color:var(--red)}.lobby-results .results-title.team-blue{color:var(--blue)}.lobby-results .results-row{display:flex;justify-content:space-between;font-size:9px;line-height:1.6;padding:3px 4px;border-bottom:1px solid var(--line)}.lobby-results .results-row:first-of-type{font-size:7px;color:var(--dim)}.lobby-results .results-row:last-child{border-bottom:none}.lobby-results .results-row .t-red{color:#ffa0b0}.lobby-results .results-row .t-blue{color:#a0e0ff}.lobby-results .results-row .pts{color:var(--ink)}.teams{display:flex;align-items:stretch;gap:22px;width:min(760px,94vw)}.vs{align-self:center;font-weight:700;font-size:18px;color:var(--dim);letter-spacing:.1em}.team-col{flex:1;background:var(--panel);border:4px solid var(--edge);outline:4px solid var(--shadow);border-top-width:6px;box-shadow:6px 6px #04060eb3;padding:18px;display:flex;flex-direction:column;gap:12px}.team-col h2{font-family:var(--display);font-size:11px;line-height:1.5}.team-col-red{border-top-color:var(--red)}.team-col-red h2{color:var(--red);text-shadow:2px 2px 0 var(--red-glow)}.team-col-blue{border-top-color:var(--blue)}.team-col-blue h2{color:var(--blue);text-shadow:2px 2px 0 var(--blue-glow)}.team-list{list-style:none;display:flex;flex-direction:column;gap:7px;min-height:102px}.team-list li{font-family:var(--display);font-size:9px;line-height:1.6;padding:8px 10px;border:2px solid var(--line);background:#0a1124;display:flex;justify-content:space-between;align-items:center}.team-list li.empty{color:var(--dim);border-style:dashed;opacity:.6}.team-list li.self{border-color:currentColor}.team-col-red .team-list li:not(.empty){color:#ffb9c6}.team-col-blue .team-list li:not(.empty){color:#b9e8ff}.host-tag{color:var(--amber);font-size:7px}.stance-picker{display:inline-flex;gap:2px}.stance-btn{cursor:pointer;background:#0a1124;border:2px solid var(--line);color:var(--dim);font-family:var(--display);font-size:7px;line-height:1;padding:4px 5px}.stance-btn:hover{border-color:var(--edge);color:var(--ink)}.stance-btn.active{border-color:var(--amber);color:var(--amber);background:#181204}.stance-tag{color:var(--dim);font-size:7px;letter-spacing:.1em}.skill-btn{cursor:pointer;background:#0a1124;border:2px solid var(--line);font-family:var(--display);font-size:7px;line-height:1;padding:4px 5px;letter-spacing:.06em}.skill-btn:hover{border-color:var(--edge)}.skill-tag{font-size:7px;letter-spacing:.06em}.skill-0{color:var(--dim)}.skill-1{color:var(--ink)}.skill-2{color:var(--amber)}.skill-3{color:var(--red)}.bot-tag{color:var(--dim);font-size:7px;border:2px solid var(--line);padding:2px 4px}.bot-remove{cursor:pointer;background:none;border:none;color:var(--dim);font-size:13px;line-height:1;padding:0 2px;margin-left:6px}.bot-remove:hover{color:var(--red);text-shadow:0 0 8px var(--red-glow)}.team-list li .row-tags{display:flex;align-items:center;gap:6px}.btn-bot{font-size:11px;padding:8px 12px;opacity:.85}.btn-red{border-color:var(--red);color:var(--red)}.btn-red:hover{background:var(--red-soft);box-shadow:0 0 20px var(--red-soft);border-color:var(--red)}.btn-blue{border-color:var(--blue);color:var(--blue)}.btn-blue:hover{background:var(--blue-soft);box-shadow:0 0 20px var(--blue-soft);border-color:var(--blue)}.lobby-foot{display:flex;flex-direction:column;align-items:center;gap:12px}.btn-launch{font-size:18px;padding:14px 46px}.lobby-rules{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}#screen-game{gap:10px;justify-content:center;padding:10px 12px}#hud-top{display:flex;align-items:center;gap:26px;font-weight:700}.hud-score{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:11px}.hud-score-red{color:var(--red);text-shadow:2px 2px 0 var(--red-glow)}.hud-score-blue{color:var(--blue);text-shadow:2px 2px 0 var(--blue-glow)}.pips{display:flex;gap:7px}.pip{width:12px;height:12px;border:2px solid currentColor;opacity:.35}.pip.filled{opacity:1;background:currentColor}.hud-code{font-family:var(--display);font-size:9px;letter-spacing:.2em;color:var(--dim);border:2px solid var(--line);padding:6px 12px}#game-wrap{position:relative}#game-canvas{display:block;image-rendering:pixelated;border:4px solid var(--edge);outline:4px solid var(--shadow);box-shadow:8px 8px #04060eb3;background:#0d1126;cursor:none}#label-canvas{position:absolute;top:4px;left:4px;pointer-events:none}#announce{position:absolute;top:14%;left:0;right:0;text-align:center;font-family:var(--display);font-size:clamp(11px,1.8vw,17px);line-height:1.6;pointer-events:none;opacity:0}#announce.show{animation:announce 2.6s steps(8) forwards}#announce.announce-red{color:var(--red);text-shadow:2px 2px 0 var(--red-glow)}#announce.announce-blue{color:var(--blue);text-shadow:2px 2px 0 var(--blue-glow)}#announce.announce-neutral{color:var(--ink);text-shadow:2px 2px 0 var(--shadow)}@keyframes announce{0%{opacity:0;transform:scale(1.25)}12%{opacity:1;transform:scale(1)}78%{opacity:1}to{opacity:0}}#big-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;font-family:var(--display);font-size:clamp(20px,4vw,44px);line-height:1.4;pointer-events:none;color:var(--ink);text-shadow:4px 4px 0 var(--shadow)}#big-center .sub{font-size:clamp(8px,1.1vw,11px);color:var(--dim);text-shadow:2px 2px 0 var(--shadow)}#big-center.team-red{color:var(--red);text-shadow:4px 4px 0 var(--red-glow)}#big-center.team-blue{color:var(--blue);text-shadow:4px 4px 0 var(--blue-glow)}#killfeed{position:absolute;top:10px;right:12px;list-style:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none}#killfeed li{font-family:var(--display);font-size:8px;line-height:1.6;padding:5px 9px;background:#060a14d9;border:2px solid var(--line);animation:feedFade 6s steps(10) forwards}#killfeed .t-red{color:var(--red)}#killfeed .t-blue{color:var(--blue)}#killfeed .zap{color:var(--amber)}@keyframes feedFade{0%{opacity:0;transform:translate(10px)}6%{opacity:1;transform:none}82%{opacity:1}to{opacity:0}}.lobby-level{display:flex;align-items:center;gap:12px}.level-select{background:#070b18;border:3px solid var(--line);color:var(--ink);padding:8px 10px;font-family:var(--display);font-size:10px;text-transform:uppercase;outline:none;cursor:pointer}.level-select:focus{border-color:var(--blue)}.level-name{font-family:var(--display);font-size:11px;color:var(--amber);text-shadow:2px 2px 0 var(--shadow)}#screen-editor{justify-content:flex-start;gap:12px}.btn-editor{font-size:9px;opacity:.85}.editor-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:min(1100px,96vw)}.editor-bar .btn{font-size:8px;padding:9px 10px}.ed-field{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--dim)}.ed-field input{padding:7px 8px;font-size:10px;width:150px}.ed-field input[type=number]{width:64px}#ed-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:min(1100px,96vw)}.ed-tool{cursor:pointer;background:#0a1124;border:2px solid var(--line);color:var(--dim);font-family:var(--display);font-size:7px;padding:7px 8px}.ed-tool:hover{border-color:var(--edge);color:var(--ink)}.ed-tool.active{border-color:var(--amber);color:var(--amber);background:#181204}.ed-mirror{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);display:flex;align-items:center;gap:10px;cursor:pointer}.ed-mirror-select{padding:6px 8px;font-size:9px}.ed-mirror-hint{opacity:.75}.editor-canvas-wrap{max-width:96vw;max-height:62vh;overflow:auto;border:4px solid var(--edge);outline:4px solid var(--shadow);box-shadow:8px 8px #04060eb3}#ed-canvas{display:block;cursor:crosshair}.ed-status{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--lime)}.ed-status.bad{color:var(--red)}.esc-menu{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#04060eb8;z-index:10}.esc-panel{background:var(--panel);border:4px solid var(--edge);outline:4px solid var(--shadow);box-shadow:8px 8px #04060eb3;padding:24px 28px;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center}.esc-title{font-family:var(--display);font-size:13px;color:var(--ink);text-shadow:2px 2px 0 var(--shadow)}.esc-sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim)}.btn-danger{border-color:var(--red);color:var(--red)}.btn-danger:hover{background:var(--red-soft);border-color:var(--red)}#toasts{position:fixed;bottom:26px;left:50%;transform:translate(-50%);z-index:95;display:flex;flex-direction:column;gap:8px;align-items:center}.toast{font-family:var(--display);font-size:9px;line-height:1.6;color:var(--amber);background:#181204;border:3px solid var(--amber);box-shadow:4px 4px 0 var(--shadow);padding:10px 18px;animation:toastFade 3.4s forwards}@keyframes toastFade{0%{opacity:0;transform:translateY(8px)}8%{opacity:1;transform:none}82%{opacity:1}to{opacity:0}}
