.app {
  max-width: 540px;
  /* Honour iOS Safari's bottom system-bar inset so the joystick is
     never tucked behind the URL bar / home indicator. */
  padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
}

.board-wrapper {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

#canvas {
  background: #000010;
  border-radius: 12px;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(91, 224, 255, 0.18),
    inset 0 0 18px rgba(58, 184, 255, 0.08);
  display: block;
  touch-action: none;
}

/* Joystick styling is now in shared/joystick.css. */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 100;
  animation: pacman-fadein .3s ease-in-out;
}
.overlay[hidden] { display: none; }
.overlay-text {
  font-size: clamp(34px, 8vmin, 56px);
  font-weight: 800;
  color: #ffd766;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  text-align: center;
}
@keyframes pacman-fadein { from { opacity: 0; } to { opacity: 1; } }