/* Whack-a-Mole */
#game-stage { display: flex; flex-direction: column; align-items: center; width: 100%; }

.wm-hud { width: 100%; max-width: 420px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.wm-hud .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.wm-val { font-size: 28px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
#timer.low { color: var(--neon2); text-shadow: 0 0 12px rgba(255,46,151,.5); }
#streak.hot { color: var(--warn); text-shadow: 0 0 12px rgba(255,210,63,.5); }

.wm-stage-wrap { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1/1; }

/* 3x3 hole grid */
.wm-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
  gap: 12px; padding: 6px; }
.wm-hole { position: relative; border-radius: 50% / 40%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #0b1020 0%, #05070f 70%);
  border: 2px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: flex-end; justify-content: center; touch-action: manipulation; }
/* the dirt lip */
.wm-hole::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 10%; height: 26%;
  background: #10142a; border-radius: 50%; z-index: 2; }

/* the mole / bomb popping up */
.wm-thing { position: absolute; bottom: -60%; left: 50%; transform: translateX(-50%);
  width: 62%; height: 62%; border-radius: 50% 50% 46% 46%; z-index: 1;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  transition: bottom .12s cubic-bezier(.3,1.4,.5,1); }
.wm-hole.up .wm-thing { bottom: 16%; }
.wm-mole { background: radial-gradient(circle at 50% 35%, #b06a3a, #7a4522); box-shadow: inset 0 -6px 10px rgba(0,0,0,.4); }
.wm-bomb { background: radial-gradient(circle at 40% 30%, #444, #111); box-shadow: inset 0 -6px 10px rgba(0,0,0,.5); }
.wm-hole.whacked .wm-thing { filter: brightness(1.6); transform: translateX(-50%) scale(.86); }
.wm-hole.bombhit .wm-thing { filter: brightness(1.4) saturate(1.5); }

/* floating score popups */
.wm-pop { position: absolute; z-index: 6; font-weight: 900; font-size: 22px; pointer-events: none;
  animation: wmPop .6s ease-out forwards; }
@keyframes wmPop { 0%{ transform: translateY(0); opacity: 1; } 100%{ transform: translateY(-38px); opacity: 0; } }

/* Overlay (class-toggled) */
.wm-overlay { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center;
  background: rgba(5,6,15,.84); border-radius: 16px; backdrop-filter: blur(2px); text-align: center; }
.wm-overlay.wm-show { display: flex; }
.wm-overlay-inner { padding: 20px; }
.wm-ov-title { font-size: 34px; font-weight: 900; color: var(--neon); text-shadow: 0 0 16px rgba(0,245,212,.5); margin: 0 0 6px; }
.wm-ov-title.done { color: var(--warn); text-shadow: 0 0 16px rgba(255,210,63,.5); }
.wm-ov-sub { color: var(--muted); margin: 0 0 18px; font-size: 16px; }
.wm-overlay .gbtn { margin: 4px; }

.wm-hide { display: none !important; }
.ctrl-hint { color: var(--muted); font-size: 12.5px; text-align: center; margin: 12px 0 0; }