/* ===========================================================
   Whack-a-Mole — game-specific styles only.
   Chrome, buttons, #status, .hint, .score-box/.stat all come
   from shared.css. Colours use the shared tokens so the game
   works in both light and dark mode.
   =========================================================== */

/* Tighten the vertical rhythm a touch versus the shared 20px. */
body { gap: 16px; }

/* ---------- stat row ---------- */
#stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- the 3x3 board ---------- */
#board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* clamp keeps the gap sensible from phones up to desktop */
  gap: clamp(10px, 3vw, 20px);
  /* board scales with the viewport but never overflows small screens */
  width: min(90vw, 420px);
  padding: clamp(12px, 4vw, 22px);
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 6px 22px var(--shadow);
  touch-action: manipulation; /* no double-tap zoom while whacking */
}

/* ---------- a single hole (well) ---------- */
.hole {
  position: relative;
  /* square cells regardless of width */
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  /* subtle inset so the hole reads as a recessed well */
  box-shadow: inset 0 6px 14px var(--shadow);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hole:hover { background: var(--surface-3); }

/* While the round is over / not running, holes shouldn't look clickable. */
#board.locked .hole { cursor: default; }
#board.locked .hole:hover { background: var(--surface-2); }

/* ---------- the mole ---------- */
.mole {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  /* fill most of the hole; emoji is sized off the element height */
  height: 78%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: clamp(2rem, 11vw, 3.4rem);
  line-height: 1;
  /* hidden state: tucked down inside the well */
  transform: translateY(115%);
  transition: transform 0.12s ease-out;
  pointer-events: none; /* clicks are handled on the hole itself */
  will-change: transform;
}

/* mole popped up and ready to be whacked */
.hole.up .mole { transform: translateY(0); }

/* ---------- whack feedback ---------- */
/* brief flash + squash when a visible mole is hit */
.hole.whacked .mole {
  animation: whack 0.22s ease-out forwards;
}
.hole.whacked {
  animation: flash 0.22s ease-out;
}

@keyframes whack {
  0%   { transform: translateY(0)   scale(1); }
  40%  { transform: translateY(10%) scale(1.18, 0.7); }
  100% { transform: translateY(120%) scale(0.6); opacity: 0; }
}

@keyframes flash {
  0%   { box-shadow: inset 0 6px 14px var(--shadow), 0 0 0 0 var(--accent); }
  50%  { box-shadow: inset 0 6px 14px var(--shadow), 0 0 0 6px var(--accent); }
  100% { box-shadow: inset 0 6px 14px var(--shadow), 0 0 0 0 var(--accent); }
}

/* keyboard hint: number on each hole, faint so it doesn't distract */
.hole .key {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.5;
  pointer-events: none;
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .mole { transition: none; }
  .hole.whacked .mole,
  .hole.whacked { animation: none; }
}