:root{--btn:58px}
html,body{margin:0;height:100%;background:#07040f;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body{display:flex;align-items:center;justify-content:center;height:100dvh}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;outline:none;box-shadow:0 0 0 2px #2a1d4a,0 0 60px rgba(123,47,190,.25)}

/* Controles de toque: só aparecem em telas de toque (classe posta pelo comum.js) */
.toque,.sis,#girar{display:none}
body.toque-on .toque{display:block}
body.toque-on .sis{display:flex}
body.toque-on.retrato{align-items:flex-start;padding-top:calc(62px + env(safe-area-inset-top));box-sizing:border-box}
body.toque-on.retrato #girar{display:block}

.pad{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));display:grid;gap:8px;z-index:2}
.pad.esq{left:calc(12px + env(safe-area-inset-left))}
.pad.dir{right:calc(12px + env(safe-area-inset-right))}
body.paisagem .pad{bottom:calc(18px + env(safe-area-inset-bottom))}
.pad button,.sis{border:2px solid rgba(242,193,78,.7);background:rgba(30,18,60,.45);color:#f6e7b8;font:14px "Press Start 2P",monospace;touch-action:none;padding:0;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}
.pad button{width:var(--btn);height:var(--btn);border-radius:50%}
.pad button.on,.sis.on{background:rgba(242,193,78,.5)}
.pad button small{display:block;font-size:6px;margin-top:3px;opacity:.8}

.cruz2{grid-template-columns:repeat(2,var(--btn))}
.cruz4{--c:calc(var(--btn)*.8);grid-template-columns:repeat(3,var(--c));grid-template-rows:repeat(3,var(--c));gap:2px}
.cruz4 button{width:var(--c);height:var(--c);border-radius:12px}
.cruz4 [data-btn=up]{grid-area:1/2}.cruz4 [data-btn=left]{grid-area:2/1}.cruz4 [data-btn=right]{grid-area:2/3}.cruz4 [data-btn=down]{grid-area:3/2}

.acoes{grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:end;justify-items:center}
.acoes .p1{grid-area:2/2;width:calc(var(--btn)*1.2);height:calc(var(--btn)*1.2)}
.acoes .p2{grid-area:2/1}
.acoes .p3{grid-area:1/2;width:calc(var(--btn)*.8);height:calc(var(--btn)*.8);font-size:11px}
.acoes .p4{grid-area:1/1;width:calc(var(--btn)*.8);height:calc(var(--btn)*.8);font-size:9px;border-radius:12px}

.sis{position:fixed;top:calc(10px + env(safe-area-inset-top));width:44px;height:44px;border-radius:12px;font-size:10px;z-index:3}
.sis.pausa{right:calc(10px + env(safe-area-inset-right))}
.sis.cheia{right:calc(62px + env(safe-area-inset-right));font:22px system-ui,sans-serif}
#girar{position:fixed;top:calc(14px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:124px;color:#bff4ff;font:8px/1.7 "Press Start 2P",monospace}

@media (max-height:420px){:root{--btn:50px}}