* { margin: 0; padding: 0; box-sizing: border-box; }

:root { --board-width: 672px; }

/* Lock the page against iOS touch gestures everywhere, not just on the
   board: a swipe that starts in the margin must steer the muncher, not
   scroll, pull-to-refresh, zoom, or rubber-band the page. position: fixed
   on body is the reliable iOS Safari overscroll kill. (Carried over from
   the Brick Break iPhone pass.) */
html,
body {
  height: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* no long-press magnifier/callout */
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh; /* iOS: track the real viewport as the URL bar hides */
  background: #06080f;
  color: #e8e6df;
  font-family: "Courier New", ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep the board clear of the notch/home bar (viewport-fit=cover) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.game { text-align: center; }

.hud {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: var(--board-width);
  margin: 0 auto 8px;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.hud h1 {
  font-size: clamp(11px, 3vw, 16px);
  letter-spacing: 3px;
  color: #9ef01a;
}

.hud-item {
  font-size: clamp(10px, 2.6vw, 14px);
  color: #9ad1d4;
  letter-spacing: 1px;
}

.hud-item span { color: #fff; }

/* Mode indicator: color-coded per global scatter/chase/frightened state
   (set via hud.setMode). Falls back to the default white span color for
   any mode without a rule (e.g. 'eyes', which isn't the tracked global
   mode but is listed for callers who pass it through anyway). */
#mode.mode-scatter { color: #2ec4b6; }
#mode.mode-chase { color: #ff5d5d; }
#mode.mode-frightened { color: #3a6df0; }

.stage {
  position: relative;
  width: var(--board-width);
  margin: 0 auto;
  touch-action: none;
}

canvas {
  display: block;
  background: #0b0f1e;
  border: 2px solid #1b3a4b;
  border-radius: 4px;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(16px, 5vw, 28px);
  letter-spacing: 6px;
  color: #ffd166;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.6);
  pointer-events: none;
}

.overlay.hidden { display: none; }

.help {
  margin-top: 10px;
  font-size: 12px;
  color: #5c6b73;
  letter-spacing: 1px;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.controls button {
  font: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  color: #9ad1d4;
  background: #0b0f1e;
  border: 1px solid #1b3a4b;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  touch-action: manipulation;
}

.controls button:active { background: #1b3a4b; color: #fff; }

/* --- rotate-to-portrait prompt (landscape phones only) ---
   The 28x31 board is a portrait experience; on a landscape phone it
   scales to a sliver. Pure CSS orientation query, vanishes on rotate. */
.rotate-prompt { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(6, 8, 15, 0.94);
  }
}
.rotate-prompt__phone {
  width: 58px;
  height: 34px;
  border: 3px solid #9ad1d4;
  border-radius: 7px;
  animation: rotate-hint 1.8s ease-in-out infinite;
}
.rotate-prompt__text {
  color: #9ad1d4;
  font-size: 14px;
  letter-spacing: 2px;
}
@keyframes rotate-hint {
  0%, 15% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}