/*
  pacman.css, game-specific rules only. Shared chrome (body, HUD, buttons,
  overlays, panel) comes from ../shared/arcade.css, loaded before this file.
*/

.pacman-panel {
  width: min(380px, 92vw);
}

/* Fixed 380x420 logical coordinates (19x21 cells at 20px); the backing
   store is sized to device pixels by Arcade.setupCanvas for crisp arcs. */
.pacman-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 380px;
  aspect-ratio: 19 / 21;
  border-radius: calc(var(--arcade-radius) - 4px);
  touch-action: none;
  background: #05060c;
}

/* On-screen D-pad: hidden by .arcade-touch-only on precise pointers, laid
   out as a plus shape on coarse (touch) pointers. */
@media (pointer: coarse) {
  .pacman-dpad {
    display: grid;
    grid-template-columns: repeat(3, 64px);
    grid-template-rows: repeat(2, 52px);
    gap: 8px;
    justify-content: center;
  }
  .pacman-dpad [data-dir="up"] { grid-column: 2; grid-row: 1; }
  .pacman-dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
  .pacman-dpad [data-dir="down"] { grid-column: 2; grid-row: 2; }
  .pacman-dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }
  .pacman-dpad .arcade-btn { padding: 0; font-size: 14px; }
}

.pacman-footer {
  margin: 0;
  text-align: center;
  font-size: clamp(7px, 1.2vw, 10px);
  color: var(--arcade-muted);
  letter-spacing: 0.05em;
  max-width: 420px;
}