html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0d0d14;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

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

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  touch-action: none;
}

/* --- touch controls (body.touch is set by TouchUI on touch devices) --- */
@media (orientation: portrait) {
  body.touch {
    align-items: flex-start;
    padding-top: env(safe-area-inset-top, 0px);
  }
}

.touch-ctl {
  position: fixed;
  display: none;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  z-index: 10;
  color: rgba(255, 255, 255, 0.85);
  font: bold 20px "Courier New", monospace;
}

#dpad {
  left: max(3vw, env(safe-area-inset-left, 0px));
  bottom: calc(3vh + env(safe-area-inset-bottom, 0px));
  width: min(44vmin, 230px);
  height: min(44vmin, 230px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.18);
}

#dpad span {
  position: absolute;
  font-size: 30px;
  opacity: 0.55;
  pointer-events: none;
}
#dpad .d-up    { top: 6%;    left: 50%; transform: translateX(-50%); }
#dpad .d-down  { bottom: 6%; left: 50%; transform: translateX(-50%); }
#dpad .d-left  { left: 7%;   top: 50%;  transform: translateY(-50%); }
#dpad .d-right { right: 7%;  top: 50%;  transform: translateY(-50%); }
#dpad.act-up .d-up, #dpad.act-down .d-down,
#dpad.act-left .d-left, #dpad.act-right .d-right {
  opacity: 1;
  color: #ffd94a;
}

#btn-bomb {
  right: max(4vw, env(safe-area-inset-right, 0px));
  bottom: calc(6vh + env(safe-area-inset-bottom, 0px));
  width: min(26vmin, 130px);
  height: min(26vmin, 130px);
  border-radius: 50%;
  background: rgba(255, 90, 60, 0.16);
  border: 2px solid rgba(255, 130, 95, 0.4);
  font-size: 44px;
}

#btn-det {
  right: calc(max(4vw, env(safe-area-inset-right, 0px)) + min(28vmin, 145px));
  bottom: calc(3vh + env(safe-area-inset-bottom, 0px));
  width: min(16vmin, 82px);
  height: min(16vmin, 82px);
  border-radius: 50%;
  background: rgba(80, 150, 255, 0.16);
  border: 2px solid rgba(120, 175, 255, 0.4);
  font-size: 28px;
}

#btn-pause {
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.22);
  font-size: 15px;
  letter-spacing: 2px;
}

.touch-ctl.pressed { filter: brightness(1.7); }

/* switch: swap D-pad and action buttons (left-handed mode) */
#btn-swap {
  bottom: calc(1.5vh + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 38px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.22);
  font-size: 22px;
}

@media (orientation: landscape) {
  /* switch moves next to the pause button, controls flank the field */
  #btn-swap {
    bottom: auto;
    left: auto;
    transform: none;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(64px + env(safe-area-inset-right, 0px));
  }
}

/* mirrored layout */
body.swap #dpad {
  left: auto;
  right: max(3vw, env(safe-area-inset-right, 0px));
}
body.swap #btn-bomb {
  right: auto;
  left: max(4vw, env(safe-area-inset-left, 0px));
}
body.swap #btn-det {
  right: auto;
  left: calc(max(4vw, env(safe-area-inset-left, 0px)) + min(28vmin, 145px));
}