* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #07070a;
  color: #ddd;
  overscroll-behavior: none;
}

#wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px;
}

#game {
  display: block;
  background: #000;
  border: 2px solid #2a2a33;
  box-shadow: 0 0 40px rgba(80, 200, 120, 0.12);
  touch-action: none;
  image-rendering: pixelated;
}

/* ---------- touch controls (only on touch devices) ---------- */
#touch {
  display: none;
  width: 100%;
  max-width: 660px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
body.is-touch #touch { display: flex; }

body.is-touch { touch-action: manipulation; }   /* no double-tap zoom */
#game, #touch, #touch * {
  -webkit-touch-callout: none;                   /* no iOS long-press menu */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Landscape on touch devices: D-pad left of the game, buttons and FIRE to the right. */
body.is-touch.side #wrap {
  display: grid;
  grid-template-areas: "dpad game btns" "dpad game fire";
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 12px;
}
body.is-touch.side #touch { display: contents; }
body.is-touch.side #dpad { grid-area: dpad; }
body.is-touch.side #game { grid-area: game; }
body.is-touch.side #small-btns { grid-area: btns; align-self: end; }
body.is-touch.side #btn-fire { grid-area: fire; align-self: start; justify-self: center; }

#dpad {
  position: relative;
  width: clamp(110px, 38vmin, 150px);
  height: clamp(110px, 38vmin, 150px);
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle, #23232b 0%, #16161c 70%);
  border: 2px solid #33333d;
  touch-action: none;
}
#dpad .arrow {
  position: absolute;
  width: 0; height: 0;
  border: 16px solid transparent;
  opacity: 0.55;
}
#dpad .up    { top: 10px;  left: 50%; transform: translateX(-50%); border-bottom: 22px solid #9fe8b3; border-top: 0; }
#dpad .down  { bottom: 10px; left: 50%; transform: translateX(-50%); border-top: 22px solid #9fe8b3; border-bottom: 0; }
#dpad .left  { left: 10px; top: 50%; transform: translateY(-50%); border-right: 22px solid #9fe8b3; border-left: 0; }
#dpad .right { right: 10px; top: 50%; transform: translateY(-50%); border-left: 22px solid #9fe8b3; border-right: 0; }
#dpad .arrow.on { opacity: 1; }

#small-btns { display: flex; flex-direction: column; gap: 10px; }

#touch button {
  font-family: "Press Start 2P", ui-monospace, monospace;
  color: #eee;
  background: #1c1c24;
  border: 2px solid #3a3a46;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 10px;
  touch-action: none;
}
#btn-fire {
  width: clamp(80px, 28vmin, 110px);
  height: clamp(80px, 28vmin, 110px);
  flex: none;
  border-radius: 50% !important;
  background: radial-gradient(circle, #d8452f 0%, #8a1f12 100%) !important;
  border-color: #f08a5d !important;
  font-size: 13px !important;
}
#btn-fire.on { filter: brightness(1.35); }