:root {
  --green: #39ff6a;
  --green-dim: #0b2412;
  --white: #f4f4f4;
  --white-dim: #1a1a1a;
  --text-dim: #9a9a9a;
  --font: "Courier New", Courier, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #f4f4f4;
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  /* No double-tap zoom anywhere; full gesture blocking is only on game surfaces. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
}

/* ---------------------------------------------------------------------------
   Portrait (primary): HUD + playfield on top, controls anchored to the bottom.
   The controls have a fixed height so they don't move or resize when the
   browser toolbars show/hide; the playfield absorbs viewport changes.
   --------------------------------------------------------------------------- */

.app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* JS overrides with window.innerHeight as the viewport changes */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "screen"
    "controls";
  row-gap: 14px;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    max(14px, env(safe-area-inset-bottom))
    env(safe-area-inset-left);
}

.screen {
  grid-area: screen;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* spare height goes above the HUD, keeping play near the thumbs */
}

.hud {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
}

.hud-scores {
  display: flex;
  gap: 18px;
}

.hud-item {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hud-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.hud-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hud-status {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lives {
  display: flex;
  gap: 5px;
}

.life {
  width: 20px;
  height: 12px;
  background: var(--green);
  clip-path: polygon(46% 0, 54% 0, 54% 12%, 62% 12%, 62% 37%, 92% 37%, 92% 50%, 100% 50%,
    100% 100%, 0 100%, 0 50%, 8% 50%, 8% 37%, 38% 37%, 38% 12%, 46% 12%);
}

.pause-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--text-dim);
  border-radius: 12px;
  background: #111;
  color: #f4f4f4;
  cursor: pointer;
  touch-action: manipulation;
}

.pause-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
}

.pause-btn .icon-play,
.pause-btn.is-paused .icon-pause {
  display: none;
}

.pause-btn.is-paused .icon-play {
  display: block;
}

.pause-btn:active {
  background: #f4f4f4;
  color: #000;
}

.pause-btn.is-unavailable {
  visibility: hidden;
}

.pause-btn:focus {
  outline: none;
}

.pause-btn:focus-visible {
  outline: 2px dashed var(--green);
  outline-offset: 2px;
}

.stage {
  flex: none;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}

#game {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: #000;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.overlay:focus {
  outline: none;
}

.overlay:focus-visible {
  outline: 2px dashed var(--green);
  outline-offset: -4px;
}

/* The whole pad is the touch target; the buttons inside are visual only. */
.controls {
  grid-area: controls;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 0 12px;
  height: 15vh;
  height: clamp(92px, 15svh, 136px);
  touch-action: none;
}

.pad {
  display: flex;
  gap: 8px;
  min-width: 0;
  touch-action: none;
  cursor: pointer;
}

.pad-move {
  flex: 0 1 58%;
}

.pad-fire {
  flex: 0 1 38%;
}

.btn {
  flex: 1 1 0;
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--green);
  border-radius: 16px;
  background: var(--green-dim);
  color: var(--green);
  font: 700 clamp(20px, 5.5vw, 30px) / 1 var(--font);
  letter-spacing: 0.05em;
  pointer-events: none;
}

.btn svg {
  width: 40%;
  max-width: 44px;
  height: auto;
  fill: currentColor;
}

.btn.is-active {
  background: var(--green);
  color: #000;
  transform: scale(0.95);
  box-shadow: 0 0 0 4px rgba(57, 255, 106, 0.3);
}

.btn-fire {
  border-color: var(--white);
  background: var(--white-dim);
  color: var(--white);
}

.btn-fire.is-active {
  background: var(--white);
  color: #000;
  box-shadow: 0 0 0 4px rgba(244, 244, 244, 0.3);
}

/* Short portrait screens: every pixel of height goes to the playfield. */
@media (orientation: portrait) and (max-height: 600px) {
  .hud {
    padding: 2px 10px;
  }

  .pause-btn {
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Landscape: score + movement on the left, playfield centre, lives/pause +
   fire on the right. The HUD lives in the side columns so the playfield gets
   the full height.
   --------------------------------------------------------------------------- */

@media (orientation: landscape) {
  /* --stage-w (set by JS) is the playfield width that fills the height. The
     centre column grows to it before the side columns take the remainder, and
     the side columns only shrink to the width their buttons need. */
  .app {
    grid-template-columns: minmax(136px, 1fr) minmax(0, var(--stage-w, 50vw)) minmax(96px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "scores stage status"
      "move   stage fire";
    column-gap: 10px;
    row-gap: 8px;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .screen,
  .hud,
  .controls {
    display: contents;
  }

  .hud-scores {
    grid-area: scores;
    align-self: start;
    flex-direction: column;
    gap: 6px;
  }

  .hud-status {
    grid-area: status;
    align-self: start;
    justify-self: end;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    gap: 10px;
  }

  .stage {
    grid-area: stage;
  }

  .pad {
    align-self: end;
    width: 100%;
    height: clamp(96px, 60%, 180px);
  }

  .pad-move {
    grid-area: move;
    justify-self: start;
    max-width: 300px;
  }

  .pad-fire {
    grid-area: fire;
    justify-self: end;
    max-width: 220px;
  }
}

.noscript {
  position: fixed;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: #000;
}