:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#0a0811;color:#f6f0ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0,#2b1a40,transparent 55%),#0a0811}main{max-width:1440px;padding:24px 32px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:20px}a{color:#dba9ee;font-size:13px}.eyebrow{color:#e6a4ed;font-size:10px;letter-spacing:.23em;font-weight:800}h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.045em;margin:9px 0}.intro{color:#ad9cbe;font-size:13px;line-height:1.6;margin:0 0 22px}.arena{height:clamp(340px,43vw,590px);position:relative;background:#120e1f;border:1px solid #ffffff17;border-radius:24px;overflow:hidden}#viewport,#viewport canvas{width:100%;height:100%;display:block}.stage-label{position:absolute;top:20px;left:22px;display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.07em;text-transform:uppercase;background:#110b21bb;padding:9px 13px;border:1px solid #ffffff15;border-radius:30px;pointer-events:none}.dot{width:6px;height:6px;background:#97ecc4;border-radius:50%}.hint{position:absolute;bottom:16px;left:22px;font-size:10px;color:#b3a4c4;pointer-events:none}#loading{position:absolute;inset:0;background:#100b20e8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}#loading[hidden]{display:none}#loading h2{font-size:22px}#loading p{font-size:12px;color:#bdaccd}progress{width:min(360px,90%);accent-color:#c187ff;height:8px}.controls,.settings{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-top:20px}.field{display:flex;flex-direction:column;gap:7px}.field label,.settings label{font-size:11px;color:#b6a9c9}.settings{align-items:center;margin-top:14px;gap:24px}.settings select{margin-left:8px}.settings .check{display:flex;align-items:center;gap:8px}button,select{background:#21182e;color:#f6f0ff;border:1px solid #ffffff20;border-radius:10px;padding:11px 14px;font:inherit;font-size:12px;min-height:40px}button{cursor:pointer}button:hover:not(:disabled){border-color:#d29cf0;background:#342344}button.primary{background:linear-gradient(120deg,#a15de4,#db6ca9);border-color:#d4a0ed;font-weight:800}button:disabled,select:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #d8b4ff;outline-offset:3px}.telemetry{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:23px 0;margin-top:14px;border-bottom:1px solid #ffffff12}.telemetry span{display:block;font-size:9px;letter-spacing:.09em;color:#9d8eaf}.telemetry strong{display:block;font-size:21px;margin-top:8px;color:#c9f4e2;font-variant-numeric:tabular-nums}details{margin-top:22px;color:#a99ab9;font-size:12px}details p{line-height:1.65;max-width:900px}summary{cursor:pointer}output{display:block;line-height:1.6;margin-top:14px;color:#c8efdf}#diagnostics{font:11px monospace;margin-top:12px;overflow-wrap:anywhere}#error{border:1px solid #b55c75;background:#3c1727;padding:15px;color:#ffd5e2;border-radius:12px}footer{font-size:11px;color:#80728e;margin-top:25px}@media(max-width:750px){main{padding:20px 16px}header{align-items:start}header>a{font-size:11px}.arena{height:380px}.telemetry{grid-template-columns:repeat(2,1fr)}.controls .field{flex:1;min-width:130px}.controls button{flex:1;min-width:110px}.settings{gap:12px}.settings select{margin-left:0;display:block;margin-top:7px}button,select{min-height:44px}select{max-width:100%}.hint{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Battle layer: projected health labels and a persistent team scoreboard. */
.arena{height:clamp(380px,39vw,560px)}h1{font-size:clamp(26px,3.2vw,40px)}.intro{margin-bottom:15px}.scoreboard{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:800;letter-spacing:.04em;pointer-events:none}.scoreboard span{padding:10px 14px;border:1px solid #ffffff1c;border-radius:10px;background:#100c1de0}#team-a{color:#8fddff}#team-b{color:#ffacd5}#round{color:#d5c0f4}.stage-label{top:66px;left:20px;font-size:9px;padding:6px 10px}.health-label{position:absolute;transform:translate(-50%,-100%);width:64px;text-align:center;color:#b3e8ff;font:9px system-ui;pointer-events:none;text-shadow:0 1px 3px #000}.health-label span{background:#100c1de6;border-radius:4px;padding:1px 4px}.health-label progress{display:block;width:100%;height:5px;margin:3px 0 1px;accent-color:#6dd8ff}.health-label.rose{color:#ffbedc}.health-label.rose progress{accent-color:#ff82b8}.health-label small{background:#100c1dc9;border-radius:3px;padding:1px 3px;font-size:8px}.health-label.ko{opacity:.5}.health-label[hidden]{display:none}.controls{margin-top:12px;align-items:center;gap:10px}.controls label,.settings{font-size:11px;color:#b6a9c9}.controls label select{margin-left:5px}.check{display:flex;align-items:center;gap:5px}.telemetry{margin-top:8px;gap:18px;padding:18px 0}.telemetry strong{font-size:18px;margin-top:5px}.measurement-note{font-size:11px;color:#b2a0c3;line-height:1.65;margin:12px 0;max-width:1100px}.settings{margin-top:8px}#resolution{font:11px monospace}#battle-log{white-space:pre-line;font-size:11px;line-height:1.7;color:#a995b9;margin-top:18px}#loading{z-index:3}@media(max-width:750px){.arena{height:440px}.scoreboard{left:8px;right:8px;gap:4px;font-size:9px}.scoreboard span{padding:8px 6px}.stage-label{top:60px;left:10px}.health-label{width:42px}.telemetry{gap:14px}.controls label{flex:1;min-width:120px}.controls label select{margin-left:0}.hint{left:10px;font-size:8px}.health-label small{font-size:7px}}
#perf-hud{font:11px ui-monospace,monospace;color:#b4f0d2;padding:10px 2px 0}.arena{height:clamp(380px,34vw,500px)}
.arena{height:clamp(420px,42vw,610px)}.arena-settings{gap:14px;margin-top:12px}.arena-settings label{white-space:nowrap}#environment-info{font-size:10px;color:#b6a9c9;line-height:1.6;flex:1;min-width:230px}@media(max-width:750px){.arena{height:440px}#environment-info{min-width:100%}.arena-settings{gap:10px}}