html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#042a32;font-family:ui-monospace,Cascadia Mono,Menlo,Consolas,monospace;color:#7fffd4;user-select:none;touch-action:none;-webkit-user-select:none}canvas{display:block;width:100%;height:100%;cursor:crosshair}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}#flavor{position:absolute;top:12px;left:16px;right:280px;max-width:38rem;font-family:Georgia,Times New Roman,serif;font-size:14px;letter-spacing:.02em;color:#ffe566;opacity:.88}#dev{position:absolute;top:158px;right:12px;width:248px;padding:10px 12px;background:#042024d6;color:#7fffd4;border:1px solid rgba(62,224,196,.35);font-size:12px;line-height:1.45}#stats{margin:0 0 8px;font:inherit;font-variant-numeric:tabular-nums}#legend{padding-top:8px;border-top:1px solid rgba(62,224,196,.22);color:#b8fff0;font-size:11px;line-height:1.5}#vitals{position:absolute;top:40px;left:16px;width:260px;padding:8px 10px;background:#042024d6;border:1px solid rgba(62,224,196,.35);color:#7fffd4}#economy{position:absolute;left:16px;top:118px;display:flex;flex-direction:column;gap:10px;padding:10px 12px;background:#042024d6;border:1px solid rgba(62,224,196,.35);color:#7fffd4;width:160px}#economy .slot{min-width:0}.bar{position:relative;height:16px;border:1px solid #7fffd4;background:#7fffd414;overflow:hidden}.bar .fill{position:absolute;inset:0 auto 0 0;width:0;background:#0fb5a8}#hp-bar .fill{background:#e6324a}#energy-bar .fill{background:#ffe566}#matter-bar .fill{background:#fe2495}.bar .num,.num{position:relative;z-index:1;font-size:11px;line-height:16px;padding:0 6px;color:#e8fff8}.vial-slot{flex-direction:row;align-items:flex-end;gap:8px}.vial{width:28px;height:48px;border:2px solid #7fffd4;border-radius:0 0 8px 8px;background:#7fffd414;position:relative;overflow:hidden}.vial:before{content:"";position:absolute;top:-6px;left:6px;width:12px;height:6px;border:2px solid #7fffd4;border-bottom:0}.vial .liquid{position:absolute;left:0;right:0;bottom:0;height:0;background:#0fb5a8}#playbar{position:absolute;left:50%;bottom:16px;transform:translate(-50%);display:flex;gap:18px;padding:10px 16px;background:#042024d6;border:1px solid rgba(62,224,196,.35);color:#7fffd4;min-width:560px}#block-bar .fill{background:#3ee0c4}#block-bar.locked .fill{background:#fe2495}.slot{display:flex;flex-direction:column;gap:6px;min-width:110px}.lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase}.pips{display:flex;gap:8px;align-items:center;min-height:18px}.pip{width:42px;height:12px;border:1px solid #7fffd4;background:#7fffd41a;overflow:hidden;position:relative}.pip.on{background:#0fb5a8}.pip.life{background:#fe2495}.pip .fill{position:absolute;inset:0 auto 0 0;width:0;background:#7fffd466}.pip.ready .fill{width:100%;background:#3ee0c4}#pads{display:none}.pad{min-width:44px;min-height:44px;padding:0 12px;border:1px solid rgba(62,224,196,.45);border-radius:10px;background:#042024c7;color:#7fffd4;font:inherit;font-size:13px;letter-spacing:.04em;text-transform:uppercase;pointer-events:auto;-webkit-tap-highlight-color:transparent}.pad:active,.pad.on{background:#0fb5a873}@media(pointer:coarse),(max-width:820px){#flavor{top:calc(8px + env(safe-area-inset-top));left:10px;right:132px;font-size:12px;max-width:none}#vitals{top:calc(36px + env(safe-area-inset-top));left:10px;width:min(220px,52vw);padding:6px 8px}#economy{left:10px;top:calc(88px + env(safe-area-inset-top));width:auto;flex-direction:row;gap:8px;padding:6px 8px}#economy .vial{width:18px;height:28px}#dev,#playbar{display:none}#pads{display:flex;justify-content:space-between;align-items:flex-end;position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));padding:0 10px;gap:12px;pointer-events:none}#pad-move,#pad-act{display:flex;gap:8px;align-items:center;pointer-events:auto}#pad-act{flex-wrap:wrap;max-width:200px;justify-content:flex-end}.pad-col{display:flex;flex-direction:column;gap:8px}.pad{min-width:48px;min-height:48px}}