html,body{margin:0;height:100%;background:#1a1a2e;overflow:hidden}canvas{display:block}#hud{position:fixed;top:16px;left:16px;color:#fff;font-family:system-ui,sans-serif;font-size:14px;line-height:1.5;pointer-events:none}#net{display:block;margin-bottom:8px;color:#7dd3fc;font-size:12px}#net:empty{display:none}#actionbar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:10}.slot{position:relative;width:64px;height:64px;border:2px solid rgba(120,180,255,.6);border-radius:8px;background:#141e3c99;color:#fff;font-family:system-ui,sans-serif;font-size:11px;cursor:pointer;overflow:hidden;padding:0;transition:border-color .1s,transform .1s}.slot:hover{border-color:#78b4ff}.slot:active{transform:scale(.95)}.slot .key{position:absolute;top:2px;left:4px;font-size:9px;opacity:.6}.slot .label{position:absolute;bottom:4px;left:0;right:0;text-align:center}.slot .cd{position:absolute;inset:0;background:#000000a6;transform-origin:bottom;transform:scaleY(0);pointer-events:none;transition:transform .05s linear}.slot.disabled{opacity:.45;cursor:not-allowed}.slot.ready{box-shadow:0 0 8px #78b4ff80}