:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#eee;font-synthesis:none;background:#000;font-family:DM Mono,monospace}*{box-sizing:border-box}html,body{background:#000;width:100%;height:100%;margin:0;overflow:hidden}main{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);place-items:center;display:grid}.recoil{background:#000;grid-template-rows:70px minmax(0,1fr);width:100%;height:100%;min-height:0;display:grid}.hud{font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;gap:16px;width:min(100%,720px);height:70px;margin-inline:auto;padding:8px 16px 10px;display:flex}.hud-label{letter-spacing:.15em;color:#bcbcbc;font-size:10px;line-height:1.6;display:block}.hud output{white-space:nowrap;letter-spacing:.02em;font-size:25px;line-height:1.1;display:block}.energy{color:var(--energy-color,#fff);text-align:right;min-width:92px;position:relative}.energy output span{margin-left:3px;font-size:14px}#energy-meter{background:#282828;width:100%;height:2px;position:absolute;bottom:-7px;right:0}#energy-fill{background:var(--energy-color,#fff);width:100%;height:100%;transition:width .12s;display:block}.board-wrap{isolation:isolate;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;container-type:size}canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}canvas:focus-visible{box-shadow:inset 0 0 0 1px #888}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:4px;outline:2px solid #fff}button:disabled{opacity:.5;cursor:wait}.pause-button{z-index:4;color:#eee;background:#000c;border:1px solid #555;border-radius:3px;width:44px;height:44px;font-size:22px;position:absolute;top:8px;right:8px}.overlay{z-index:3;text-align:center;background:#0009;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:16px;display:flex;position:absolute;inset:0}.overlay h1{letter-spacing:.1em;white-space:nowrap;margin:0;font:400 clamp(22px,9cqw,42px)/1.3 DM Mono,monospace}.actions{gap:12px;width:min(310px,100%);display:flex}.actions button{white-space:nowrap;border:1px solid #aaa;flex:1;min-height:48px;padding:12px 14px;font:600 14px/1.5 system-ui,sans-serif}.primary{color:#080808;background:#efefef}.primary:hover{background:#fff}.secondary{color:#eee;background:#000d}.secondary:hover{background:#222}.recoil[data-state=ready] .actions{width:180px}.recoil[data-state=over] .overlay{pointer-events:none;background:0 0;gap:20px}.recoil[data-state=over] .overlay h1{letter-spacing:.035em;background:#000b;padding:12px;font-size:clamp(24px,8cqw,40px)}.recoil[data-state=over] .actions{pointer-events:auto}#result{color:#ccc;background:#000c;margin:0;padding:5px 10px;font-size:12px;line-height:1.8}#announcement{z-index:2;text-align:center;pointer-events:none;opacity:0;white-space:pre-line;letter-spacing:.045em;background:linear-gradient(90deg,#0000,#000b 20% 80%,#0000);padding:10px 0;font-size:clamp(16px,5.5cqw,27px);line-height:1.45;position:absolute;top:23%;left:0;right:0}#announcement.visible{opacity:1}#feedback{pointer-events:none;z-index:1;position:absolute;inset:0}#feedback.hit{box-shadow:inset 0 0 45px #ffffff45}#feedback.heal{box-shadow:inset 0 0 30px #76ffc350}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.unavailable{z-index:5;text-align:center;background:#000;padding:18px;font:14px/1.8 system-ui,sans-serif;position:absolute;inset:40% 5% auto}[hidden]{display:none!important}html.recoil-touch,html.recoil-touch body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media (width<=360px){.hud{gap:8px;padding-inline:12px}.hud output{font-size:22px}.energy{min-width:76px}}@media (height<=500px){.recoil{grid-template-rows:54px minmax(0,1fr)}.hud{gap:4px;height:54px;padding:6px}.hud-label{letter-spacing:.03em;font-size:8px}.hud output{font-size:17px}.energy{min-width:56px}.energy output span{font-size:10px}.actions button{min-height:44px;padding:8px;font-size:12px}.overlay{gap:16px}}@media (prefers-reduced-motion:reduce){#energy-fill{transition:none}#feedback.hit,#feedback.heal{box-shadow:none}}