* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #111;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  aspect-ratio: 320 / 176;
  width: min(100vw, calc(100vh * 320 / 176));
  height: auto;
}

/* --- Celular: controles na tela --- */
html, body { height: 100dvh; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#game { width: min(100vw, calc(100dvh * 320 / 176)); image-rendering: pixelated; }
#touch, #girar { display: none; }
body.touch #touch { display: block; position: fixed; inset: 0; z-index: 5; pointer-events: none; --s: 15dvh; }
.tb { position: absolute; pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.22); border: 2px solid rgba(255,255,255,0.55); color: #fff; font: 700 2.6dvh ui-monospace, Menlo, monospace;
  -webkit-tap-highlight-color: transparent; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.tb.on { background: rgba(255,210,74,0.6); border-color: #ffd24a; }
.tb svg { width: 60%; height: 60%; fill: rgba(255,255,255,0.9); pointer-events: none; }
.dp { width: var(--s); height: var(--s); border-radius: 22%; }
.dp.l { left: calc(2dvh + env(safe-area-inset-left)); bottom: calc(2dvh + var(--s)); }
.dp.r { left: calc(2dvh + var(--s) * 2 + env(safe-area-inset-left)); bottom: calc(2dvh + var(--s)); }
.dp.u { left: calc(2dvh + var(--s) + env(safe-area-inset-left)); bottom: calc(2dvh + var(--s) * 2); }
.dp.d { left: calc(2dvh + var(--s) + env(safe-area-inset-left)); bottom: 2dvh; }
.act { border-radius: 50%; }
.act.a { width: 22dvh; height: 22dvh; right: calc(2dvh + env(safe-area-inset-right)); bottom: 3dvh; }
.act.b { width: 17dvh; height: 17dvh; right: calc(26dvh + env(safe-area-inset-right)); bottom: 2dvh; }
.act.v { width: 15dvh; height: 15dvh; right: calc(5dvh + env(safe-area-inset-right)); bottom: 28dvh; }
.act.c { width: 13dvh; height: 13dvh; right: calc(23dvh + env(safe-area-inset-right)); bottom: 21dvh; }
.sm { width: 10dvh; height: 7dvh; border-radius: 12px; font-size: 2.2dvh; top: 1.5dvh; }
.sm.p { left: calc(50% - 11dvh); }
.sm.m { left: calc(50% + 1dvh); }
.sm.f { left: calc(50% + 12dvh); }
@media (orientation: portrait) {
  body.touch #girar { display: flex; position: fixed; inset: 0; z-index: 10; background: #111; color: #fff; align-items: center; justify-content: center;
    text-align: center; font: 700 4vw ui-monospace, Menlo, monospace; }
  body.touch #girar svg { width: 30vw; height: 30vw; }
}