* { box-sizing: border-box; }

/* Each game page sets --ratio to its canvas width / height. */
:root { --ratio: 1; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#game {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
}

#hud {
  width: min(100%, calc((100dvh - 60px) * var(--ratio)));
  display: flex;
  justify-content: space-between;
  font-size: clamp(11px, 2.4vmin, 18px);
  letter-spacing: 0.08em;
}

#hud div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#hud .label { color: #ff4040; font-size: 0.75em; }

#screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: var(--ratio);
  max-width: 100%;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #080814;
  border: 1px solid #223;
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  text-align: center;
  padding: 1em;
  background: rgba(4, 4, 12, 0.72);
  font-size: clamp(11px, 2.6vmin, 20px);
}

#overlay[hidden] { display: none; }
#title { margin: 0; font-size: 2em; color: #50ff50; letter-spacing: 0.12em; }
#message { margin: 0; animation: blink 1.1s steps(2, start) infinite; }
#help { margin: 0; color: #99a; font-size: 0.8em; line-height: 1.7; }

#back {
  position: absolute;
  top: 0.8em;
  left: 0.9em;
  color: #99a;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-decoration: none;
}

#back:hover { color: #50ff50; }

@keyframes blink { to { visibility: hidden; } }

#touch { display: none; width: 100%; max-width: 520px; gap: 10px; }

#touch button {
  flex: 1;
  height: 64px;
  font: inherit;
  font-size: 22px;
  color: #50ff50;
  background: #0c0c1c;
  border: 2px solid #50ff50;
  border-radius: 10px;
}

#touch button.fire { flex: 1.4; color: #ff4040; border-color: #ff4040; }
#touch button.down { background: #1c2c1c; }
#touch.compact { gap: 6px; }
#touch.compact button { font-size: 15px; padding: 0; }
#touch.compact button.fire { flex: 1.2; }

@media (pointer: coarse) {
  #touch { display: flex; }
  #help { display: none; }
}