html, body {
  margin: 0; height: 100%; background: #10121c; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body { display: flex; align-items: center; justify-content: center; }
#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}

/* ----- controles touch ----- */
#touch { display: none; }
body.touch.ingame #touch { display: block; }
#touch .btn, #mute {
  position: fixed; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); border: 3px solid rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85); font: bold 22px/1 monospace;
  touch-action: none;
}
#touch .btn.on { background: rgba(255, 210, 63, 0.45); border-color: #ffd23f; }
#touch .pad [data-action="left"] { left: max(16px, env(safe-area-inset-left)); bottom: 22px; }
#touch .pad [data-action="right"] { left: calc(max(16px, env(safe-area-inset-left)) + 76px); bottom: 22px; }
#touch .actions .a { right: max(16px, env(safe-area-inset-right)); bottom: 46px; width: 70px; height: 70px; }
#touch .actions .b { right: calc(max(16px, env(safe-area-inset-right)) + 80px); bottom: 16px; }
#touch .pause {
  top: 10px; right: max(12px, env(safe-area-inset-right)); width: 40px; height: 40px; border-radius: 10px; font-size: 16px;
  left: 50%; right: auto; transform: translateX(-50%);
}

#rotate {
  display: none; position: fixed; top: 12px; left: 0; right: 0; text-align: center;
  color: #ffd23f; font: bold 14px monospace; pointer-events: none;
}
body.touch.portrait #rotate { display: block; }

/* botão de som: sempre visível em telas de toque */
#mute { display: none; top: 10px; left: max(12px, env(safe-area-inset-left)); width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
body.touch #mute { display: flex; }
#mute.off { opacity: 0.45; text-decoration: line-through; }