/* ==========================================================================
   Bop-a-Mole — only what's unique to this game.
   ========================================================================== */

.game[data-game="bop-a-mole"] {
  --game-color: var(--cat-quick);
  max-width: max(300px, min(560px, calc(100svh - 190px)));
}
.game[data-game="bop-a-mole"] .game__stage { aspect-ratio: 1 / 1; }

.field {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 2%;
  padding: 5% 4% 3%;
  background:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.18) 0 2px, transparent 3px) 0 0 / 38px 38px,
    linear-gradient(#8FD08A, #6BBF59);
}
[data-theme="dark"] .field { background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.08) 0 2px, transparent 3px) 0 0 / 38px 38px, linear-gradient(#2F5D3A, #234A2D); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field { background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.08) 0 2px, transparent 3px) 0 0 / 38px 38px, linear-gradient(#2F5D3A, #234A2D); }
}
.field.is-shaking { animation: field-shake 0.35s; }
@keyframes field-shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }

.hole {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hole:focus-visible { outline: 3px solid var(--ink-900); outline-offset: -2px; border-radius: 16px; }

/* the dark pit */
.hole__pit {
  position: absolute;
  left: 8%; right: 8%; bottom: 8%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #3B2A22 0 55%, #22160F 70%);
  border: 3px solid var(--ink-900);
}
/* the critter window: everything below the pit's middle is clipped */
.hole__window {
  position: absolute;
  left: 10%; right: 10%; top: 0;
  bottom: 25%;
  overflow: hidden;
}
.hole__critter {
  position: absolute;
  inset: 8% 6% 0;
  transform: translateY(105%);
  transition: transform 0.14s var(--ease-out);
}
.hole.is-up .hole__critter { transform: translateY(0); transition: transform 0.18s var(--ease-spring); }
.hole.is-hit .hole__critter { transform: translateY(18%) scaleY(0.82); transition: transform 0.08s; transform-origin: bottom; }
.hole__critter svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* front lip of the mound hides the critter's bottom */
.hole__lip {
  position: absolute;
  left: 2%; right: 2%; bottom: 0;
  height: 22%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: #A0714F;
  border: 3px solid var(--ink-900);
  border-top: 0;
}
.hole.is-pressed .hole__lip { background: #8A5F40; }

/* Which critter shows */
.critter-bomb { display: none; }
.hole[data-type="bomb"] .critter-bomb { display: block; }
.hole[data-type="bomb"] .critter-mole { display: none; }
.critter-mole { --fur: #9B6B4E; --fur-dark: #7C523A; }
.hole[data-type="gold"] .critter-mole { --fur: #F2B33D; --fur-dark: #D8962A; }
.critter-mole .eyes-hit { display: none; }
.hole.is-hit .critter-mole .eyes-open { display: none; }
.hole.is-hit .critter-mole .eyes-hit { display: inline; }
.hole[data-type="gold"] .sparkle { display: inline; }
.sparkle { display: none; }

/* +1 / −3 floating numbers */
.float {
  position: absolute;
  left: 50%; top: 10%;
  z-index: 3;
  translate: -50% 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: #FBF7F0;
  -webkit-text-stroke: 1.5px var(--ink-900);
  paint-order: stroke fill;
  pointer-events: none;
  animation: float-up 0.7s var(--ease-out) forwards;
}
.float.is-bad { color: var(--tomato); }
@keyframes float-up { to { transform: translateY(-50px); opacity: 0; } }