@font-face{font-family:"Press Start 2P";src:url(fonts/PressStart2P.ttf)}@font-face{font-family:Silkscreen;src:url(fonts/Silkscreen.ttf)}
html,body{margin:0;height:100%;background:#120a1e;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body{display:flex;align-items:center;justify-content:center;position:fixed;inset:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
#touch{display:none;position:fixed;inset:0;pointer-events:none}
body.touch #touch{display:block}
#top{position:fixed;top:calc(env(safe-area-inset-top) + 6px);right:calc(env(safe-area-inset-right) + 8px);display:flex;gap:6px;z-index:2}
#top button{font:10px "Press Start 2P",monospace;background:rgba(18,26,54,.7);color:#fff6e0;border:1px solid #d4a640;border-radius:6px;padding:6px 8px}
/* touch: compact floating stick (left) + big jump with attacks around it (right). Sizes: stick clamp(84px,24vmin,104px), jump clamp(72px,21vmin,88px) */
#stickzone{position:absolute;left:0;bottom:0;width:44vw;height:76vh;pointer-events:none;touch-action:none}
#touch.fight #stickzone{pointer-events:auto}
#stick{--S:clamp(84px,24vmin,104px);position:absolute;left:calc(env(safe-area-inset-left) + 14px);bottom:calc(env(safe-area-inset-bottom) + 12px);width:var(--S);height:var(--S);border-radius:50%;background:rgba(255,246,224,.09);border:2px solid rgba(255,246,224,.3);box-sizing:border-box;opacity:.55;pointer-events:auto;touch-action:none;transition:opacity .12s}
#stick.on{opacity:.9}
#knob{position:absolute;left:28%;top:28%;width:44%;height:44%;border-radius:50%;background:rgba(255,246,224,.42);border:2px solid rgba(255,246,224,.55);box-sizing:border-box;transform:translate(var(--kx,0px),var(--ky,0px))}
#stick[data-dir]:not([data-dir=""]) #knob{background:rgba(255,210,90,.75)}
#btns{position:absolute;right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 12px);pointer-events:none}
#btns button{position:absolute;--B:clamp(46px,13vmin,58px);width:var(--B);height:var(--B);border-radius:50%;border:2px solid rgba(255,246,224,.5);font:9px "Press Start 2P",monospace;color:#fff6e0;touch-action:none;pointer-events:auto;padding:0;opacity:.85}
#btns button::after{content:"";position:absolute;inset:-6px}
#btns #jump{--J:clamp(72px,21vmin,88px);width:var(--J);height:var(--J);right:0;bottom:0;background:rgba(150,110,230,.55);font-size:10px}
#btns #jump::after{inset:-8px -40px -40px -8px} /* generous hit area into the screen corner: hittable without looking */
#btns [data-k=lp]{background:rgba(58,122,200,.55)}#btns [data-k=hp]{background:rgba(200,40,46,.55)}#btns [data-k=lk]{background:rgba(62,196,106,.5)}#btns [data-k=hk]{background:rgba(227,179,65,.55)}
#btns button.on{filter:brightness(1.8);transform:scale(.94)}
@media (orientation:portrait){body.touch{align-items:flex-start;padding-top:calc(env(safe-area-inset-top) + 40px)}body.touch #stick{--S:30vw}body.touch #btns #jump{--J:22vw}body.touch #btns button{--B:15vw}}
#stick.under,#btns button.under{opacity:.28} /* a fighter is behind this control (see dimControls) */
#vaultLink{position:fixed;transform:translateY(-50%);font-family:ui-monospace,Menlo,Consolas,monospace;color:#9ab0d4;text-decoration:underline;z-index:3;white-space:nowrap;pointer-events:auto}#vaultLink[hidden]{display:none}