html, body {
  margin: 0; height: 100%; background: #000; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
#screen {
  position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; display: block;
}
#crt {
  position: absolute; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}

#touch { display: none; position: fixed; inset: 0; z-index: 5; }
body.touch.playing #touch { display: block; }
#zoneL { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; }
#zoneR { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; }
#stickBase {
  display: none; position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%;
  border: 2px solid rgba(255, 210, 90, 0.45); background: rgba(0, 0, 0, 0.18); pointer-events: none;
}
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 210, 90, 0.5); transform: translate(-50%, -50%);
}
.tb {
  position: absolute; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(255, 210, 90, 0.55); background: rgba(40, 0, 0, 0.35); color: rgba(255, 220, 120, 0.9);
  font: bold 13px/1 "Courier New", monospace; letter-spacing: 1px; padding: 0;
}
.tb.on { background: rgba(200, 40, 30, 0.55); }
.tb.fire { width: 92px; height: 92px; font-size: 16px; border-color: rgba(255, 90, 60, 0.7); }
.tb.small { width: 54px; height: 34px; border-radius: 10px; font-size: 11px; }
#bFire { right: calc(18px + env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom)); }
#bUse  { right: calc(118px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); }
#bWpn  { right: calc(36px + env(safe-area-inset-right)); bottom: calc(132px + env(safe-area-inset-bottom)); }
#bMenu { right: calc(12px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); }
#bMap  { right: calc(74px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); }

/* landscape phones: keep every button inside the right-hand letterbox */
@media (orientation: landscape) {
  #bFire { right: calc(16px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); }
  #bUse  { right: calc(30px + env(safe-area-inset-right)); bottom: calc(122px + env(safe-area-inset-bottom)); }
  #bWpn  { right: calc(30px + env(safe-area-inset-right)); bottom: calc(196px + env(safe-area-inset-bottom)); }
  #bMap  { right: auto; left: calc(16px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); }
}