/* Pac-Man. Panels/buttons/top bar come from ../shared/arcade.css. */

html, body { overflow: hidden; }

#game {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.lives { font-size: 1rem; letter-spacing: 2px; color: #ffd23f; }

/* The score was here all along but read as a caption, so a bite felt like it
   was worth nothing. Bigger, warmer, and the number outweighs the name. */
.topbar .score { font-size: 0.92rem; }
.topbar .score b {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;   /* stops the HUD twitching as it climbs */
  color: #ffd23f;
}

.double-badge {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #241a10;
  background: linear-gradient(180deg, #ffd23f, #ffab3f);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  animation: double-pop 0.9s ease-in-out infinite;
}
.double-badge.urgent {
  background: linear-gradient(180deg, #ff8a4d, #ff5d4d);
  color: #2a0f0a;
  animation-duration: 0.4s;
}
@keyframes double-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .double-badge { animation: none; } }

.scoring-note { line-height: 1.5; }
.scoring-note b { color: #ffd23f; }

.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }

#maze {
  width: 100%;
  height: 100%;
  touch-action: none;
  display: block;
}

/* thumb pad — hidden on anything with a real keyboard */
.pad {
  display: none;
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto;
  flex-shrink: 0;
}

.pad-btn {
  position: absolute;
  width: 56px;
  height: 56px;
  font-size: 1rem;
  color: #cbbfe0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  cursor: pointer;
}
.pad-btn:active { background: rgba(255, 210, 63, 0.35); color: #241a10; }
.pad-btn.up { top: 0; left: 56px; }
.pad-btn.down { bottom: 0; left: 56px; }
.pad-btn.left { top: 56px; left: 0; }
.pad-btn.right { top: 56px; right: 0; }

@media (hover: none) and (pointer: coarse) { .pad { display: block; } }

.over-score { justify-content: center; margin-bottom: 20px; }

.seat-note {
  margin-left: auto;
  font-size: 0.82rem;
  color: #b9a8cf;
  background: rgba(20, 14, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 8px 12px;
}