:root{--bg: #0e1014;--surface: #15171c;--surface-2: #1c1f26;--line: #262a33;--text: #e8e8e6;--text-2: #9a9c9f;--red: #e66767;--blue: #3987e5;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}#app{display:grid;grid-template-columns:1fr 430px;height:100vh}#view{position:relative;min-width:0}#view-canvas{position:absolute;inset:0}#view-canvas canvas{display:block;width:100%!important;height:100%!important}#hud{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;background:#0e1014b8;border:1px solid var(--line);border-radius:10px;padding:6px 14px;backdrop-filter:blur(6px)}#hud .score{display:flex;align-items:center;gap:10px;font-weight:600}#hud .team-name{font-size:12px;letter-spacing:.06em;color:var(--text-2)}#hud .pts{font-size:22px;font-variant-numeric:tabular-nums;min-width:34px;text-align:center}#hud .red .pts{color:var(--red)}#hud .blue .pts{color:var(--blue)}#hud .clock{font-size:18px;font-variant-numeric:tabular-nums;color:var(--text);padding:0 8px;border-left:1px solid var(--line);border-right:1px solid var(--line)}#alive{position:absolute;top:62px;left:50%;transform:translate(-50%);display:flex;gap:26px}.pips{display:flex;gap:5px}.pips i{width:10px;height:10px;border-radius:50%;display:inline-block;opacity:.25}.pips.red i{background:var(--red)}.pips.blue i{background:var(--blue)}.pips i.on{opacity:1}#banner{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:30px;font-weight:700;letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.8);opacity:0;transition:opacity .3s;pointer-events:none;text-align:center}#banner.show{opacity:1}#banner small{display:block;font-size:14px;font-weight:400;color:var(--text-2);margin-top:4px}#bottom-ui{position:absolute;left:0;right:0;bottom:10px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px;pointer-events:none;z-index:3}#bottom-ui>*{pointer-events:auto;max-width:100%}#view-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;align-items:center;background:#0e1014b8;border:1px solid var(--line);border-radius:10px;padding:8px 12px;backdrop-filter:blur(6px)}#view-bar label{display:inline-flex;align-items:center;gap:6px;color:var(--text-2)}#view-bar input[type=range]{width:110px}#legend{position:absolute;right:12px;top:12px;max-width:360px;background:#0e1014c7;border:1px solid var(--line);border-radius:10px;padding:6px 12px;color:var(--text-2)}#legend summary{cursor:pointer;color:var(--text)}#legend ul{padding-left:16px;margin:6px 0}#legend li{margin:4px 0}#panel{background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;padding:8px 14px 30px}#panel section{padding:12px 0 14px;border-bottom:1px solid var(--line)}#panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin:0 0 10px;font-weight:600}.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:8px}.row.small{font-size:12px;color:var(--text-2)}.row label{display:inline-flex;align-items:center;gap:6px}.hint{color:var(--text-2);margin:0 0 8px;font-size:12px}button{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px 11px;cursor:pointer;font:inherit}button:hover{border-color:#3a4050}button.primary{background:#2a5a9a;border-color:#2a5a9a}button.primary.running{background:#7a3a3a;border-color:#7a3a3a}select,input[type=number]{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit}input[type=number]{width:64px}label.file input{display:none}label.file{cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:6px 11px;background:var(--surface-2)}.status{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-2);white-space:pre-line;background:var(--bg);border-radius:8px;padding:8px 10px;border:1px solid var(--line)}.status b{color:var(--text);font-weight:600}.chart{position:relative;height:120px;margin-bottom:8px;border-radius:8px;overflow:visible}.chart.tall{height:160px}.chart canvas{width:100%;height:100%;display:block;border-radius:8px}.chart-tip{position:absolute;z-index:5;background:#14161cf5;border:1px solid #3a4050;border-radius:6px;padding:6px 8px;font-size:11px;color:var(--text-2);pointer-events:none;white-space:nowrap}.chart-tip b{color:var(--text)}.chart-tip .tip-h{color:var(--text);margin-bottom:3px}.chart-tip .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}.heat-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.heat-row canvas{width:100%;aspect-ratio:1;display:block;border-radius:8px}@media(max-width:1000px){#app{grid-template-columns:1fr;grid-template-rows:60vh 1fr}#panel{border-left:none;border-top:1px solid var(--line)}}#crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none;display:none}#crosshair:before,#crosshair:after{content:"";position:absolute;background:#ffffffd9;box-shadow:0 0 3px #000c}#crosshair:before{left:50%;top:0;width:2px;height:100%;transform:translate(-50%)}#crosshair:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}#crosshair.show{display:block}#dmg{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s linear;background:radial-gradient(ellipse at center,#be141400 42%,#aa0e0e8c 82%,#820808cc)}#pov{position:absolute;left:12px;top:12px;width:220px;background:#0e1014c7;border:1px solid var(--line);border-radius:10px;padding:8px 12px;backdrop-filter:blur(6px);display:none}#pov.show{display:block}.pov-head{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}.pov-head #pov-state{color:var(--text-2);font-weight:400;font-size:12px}.pov-hp{height:8px;background:#ffffff14;border-radius:4px;overflow:hidden}.pov-hp i{display:block;height:100%;width:100%;background:#7ee08a;border-radius:4px;transition:width .1s}.pov-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;color:var(--text-2);font-size:12px;letter-spacing:.1em}#pov-comm{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.25)}#spec-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px}.spec-team{display:flex;gap:6px}.spec-tile{width:64px;background:#0e1014c7;border:1px solid var(--line);border-radius:8px;padding:5px 6px 4px;cursor:pointer;backdrop-filter:blur(6px);user-select:none}.spec-tile .n{font-size:11px;font-weight:600;letter-spacing:.04em;display:flex;justify-content:space-between}.spec-tile .n small{font-weight:400;color:var(--text-2)}.spec-tile .hp{height:5px;margin-top:4px;background:#ffffff14;border-radius:3px;overflow:hidden}.spec-tile .hp i{display:block;height:100%;width:100%;border-radius:3px}.spec-tile.red .hp i{background:var(--red)}.spec-tile.blue .hp i{background:var(--blue)}.spec-tile.dead{opacity:.35}.spec-tile.dead .n:after{content:"✕";color:var(--text-2)}.spec-tile.firing{border-color:#fff2c4}.spec-tile.sel{border-color:#fff;box-shadow:0 0 0 1px #fff inset}#cam-modes{display:flex;gap:4px;background:#0e1014c7;border:1px solid var(--line);border-radius:8px;padding:4px}#cam-modes button{padding:4px 9px;font-size:12px;border-color:transparent}#cam-modes button.on{background:#2a5a9a}kbd{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:0 4px;font:11px ui-monospace,monospace;color:var(--text)}