:root{--bg:#0f1115;--panel:#171a21;--text:#e6e6e6;--muted:#8b93a7;--red:#e5322d;--blue:#1e9be9;--line:#3a3f4b;--ok:#7bd88f;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0}#app{flex-direction:column;align-items:center;gap:.75rem;padding:.75rem 1rem 1.5rem;display:flex}.topbar{flex-direction:column;align-items:center;gap:.15rem;display:flex}h1{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:1.25rem}.status{color:var(--muted);margin:0;font-size:.85rem}.status[data-state=error]{color:var(--red)}.status[data-state=connected]{color:var(--ok)}.arena{flex-direction:column;align-items:stretch;gap:.4rem;width:min(100%,640px);display:flex}.field-wrap{justify-content:center;display:flex;position:relative}#field{aspect-ratio:640/816;object-fit:contain;background:var(--panel);border:1px solid var(--line);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;max-height:calc(100vh - 230px);display:block}.overlay{background:#0f1115b8;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay p{letter-spacing:.05em;margin:0;font-size:2rem;font-weight:700}.hud{border:1px solid var(--line);background:var(--panel);border-radius:6px;grid-template-rows:auto auto;grid-template-columns:7rem 1fr 6rem;align-items:center;gap:.25rem .6rem;padding:.4rem .6rem;transition:background .12s;display:grid;position:relative}.hud.hit{background:#3a1c1e}.hud .label{letter-spacing:.04em;grid-row:1/span 2;font-weight:600}.hud[data-side="0"] .label{color:var(--red)}.hud[data-side="1"] .label{color:var(--blue)}.bar{background:#0b0d11;border-radius:3px;height:12px;position:relative;overflow:hidden}.bar .fill{width:100%;height:100%;transition:width 90ms linear}.hud[data-side="0"] .hp .fill{background:var(--red)}.hud[data-side="1"] .hp .fill{background:var(--blue)}.bar.hp{height:16px}.bar.hp .value{text-shadow:0 0 3px #000;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex;position:absolute;inset:0}.bar.energy .fill{background:#e9c46a}.bar.energy .fill.empty{background:#6b3a3a}.brushes{grid-row:1/span 2;justify-content:flex-end;align-items:center;gap:.35rem;display:flex}.brushes .dot{width:calc(6px + var(--size) * 3px);height:calc(6px + var(--size) * 3px);border:1px solid var(--line);background:#2a2f3a;border-radius:50%}.brushes .dot.active{background:var(--text);border-color:var(--text)}.damage-popup{color:#ffb4b0;pointer-events:none;font-weight:700;animation:.9s ease-out forwards float-up;position:absolute;top:.2rem;right:7rem}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-1.6rem)}}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.hint{color:var(--muted);font-size:.8rem}button{font:inherit;border:1px solid var(--line);color:var(--text);cursor:pointer;background:#222733;border-radius:5px;padding:.35rem .8rem}button:hover{background:#2c3341}.panel{border:1px solid var(--line);background:var(--panel);border-radius:6px;width:min(100%,640px);padding:.4rem .8rem}.panel summary{cursor:pointer;color:var(--muted)}.fields{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.4rem .8rem;margin:.6rem 0;display:grid}.fields label{color:var(--muted);flex-direction:column;gap:.15rem;font-size:.75rem;display:flex}.fields input,.fields select{font:inherit;border:1px solid var(--line);color:var(--text);background:#0b0d11;border-radius:4px;padding:.25rem .4rem}.panel-actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}body.online .sandbox-only{display:none}