WHACK-A-MOLE

<!-- HIGH-SPEED DISCRETE MATRIX CSS ENGINE -->
<style>
  /* Sandbox-Safe Input Triggers: Kept active in rendering tree so CSS counters compute perfectly */
  .wam-core-trigger {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Tally scores using pure CSS DOM node state tracking */
  .mole-hit-collect:checked {
    counter-increment: wam-score;
  }

  /* Dynamically output score count strings into standard container slots */
  .wam-score-view::after {
    content: counter(wam-score);
  }

  /* Main Splash Menu screen layer overlay config */
  .wam-cover-panel {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1e1b4b, #250934);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Hide match launch overlay instantly when engine checkbox is checked */
  #wam-trigger-start:checked ~ .wam-cover-panel {
    display: none !important;
  }

  /* Game-Over Summary screen layer overlay config */
  .wam-end-panel {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.97);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
  }

  /* Activate strict 30-second countdown gate before exposing the endgame overlay */
  #wam-trigger-start:checked ~ .wam-end-panel {
    animation: wamMatchTimer 30s step-end forwards;
  }

  @keyframes wamMatchTimer {
    from { opacity: 0; pointer-events: none; }
    to { opacity: 1; pointer-events: auto; }
  }

  /* Match Timer Gauge Progress Bar Animation logic */
  .wam-timer-track {
    width: 100%;
    height: 10px;
    background: #334155;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 6px;
  }
  .wam-timer-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, #e11d48);
    border-radius: 99px;
  }
  #wam-trigger-start:checked ~ .wam-hud .wam-timer-bar {
    animation: wamClockDrain 30s linear forwards;
  }
  @keyframes wamClockDrain {
    from { width: 100%; }
    to { width: 0%; }
  }

  /* HIGH-SPEED SINGLE-SHOT BLITZ POPUP KEYFRAMES */
  @keyframes moleBlitzPop {
    0%, 100% { transform: translateY(115%); }
    15%, 85% { transform: translateY(8%); }
  }

  /* Make targets visible and bind animations once start button is activated */
  #wam-trigger-start:checked ~ .wam-grid .mole-target {
    display: flex !important;
  }

  /* 27 DISSOCIATED HIGH-SPEED TIMELINE OFFSETS (Illusion of absolute random chaos) */
  /* Hole 1 */
  #wam-trigger-start:checked ~ .wam-grid .mo-1a { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.2s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-1b { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 11.5s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-1c { animation: moleBlitzPop 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 22.1s; }
  /* Hole 2 */
  #wam-trigger-start:checked ~ .wam-grid .mo-2a { animation: moleBlitzPop 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 3.5s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-2b { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 14.2s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-2c { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 25.0s; }
  /* Hole 3 */
  #wam-trigger-start:checked ~ .wam-grid .mo-3a { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.5s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-3b { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 12.8s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-3c { animation: moleBlitzPop 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 21.4s; }
  /* Hole 4 */
  #wam-trigger-start:checked ~ .wam-grid .mo-4a { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 5.2s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-4b { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 16.0s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-4c { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 27.3s; }
  /* Hole 5 */
  #wam-trigger-start:checked ~ .wam-grid .mo-5a { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 2.1s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-5b { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 10.4s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-5c { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 23.8s; }
  /* Hole 6 */
  #wam-trigger-start:checked ~ .wam-grid .mo-6a { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 7.8s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-6b { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 18.5s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-6c { animation: moleBlitzPop 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 29.0s; }
  /* Hole 7 */
  #wam-trigger-start:checked ~ .wam-grid .mo-7a { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 4.1s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-7b { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 13.1s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-7c { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 26.5s; }
  /* Hole 8 */
  #wam-trigger-start:checked ~ .wam-grid .mo-8a { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 8.6s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-8b { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 15.1s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-8c { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 20.2s; }
  /* Hole 9 */
  #wam-trigger-start:checked ~ .wam-grid .mo-9a { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-9b { animation: moleBlitzPop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 17.4s; }
  #wam-trigger-start:checked ~ .wam-grid .mo-9c { animation: moleBlitzPop 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 24.5s; }

  /* INSTANT DISPATCH HOOKS (Destroys whacked targets immediately without stopping subsequent wave spawns) */
  #m-1a:checked ~ .wam-grid .t-1a, #m-1b:checked ~ .wam-grid .t-1b, #m-1c:checked ~ .wam-grid .t-1c,
  #m-2a:checked ~ .wam-grid .t-2a, #m-2b:checked ~ .wam-grid .t-2b, #m-2c:checked ~ .wam-grid .t-2c,
  #m-3a:checked ~ .wam-grid .t-3a, #m-3b:checked ~ .wam-grid .t-3b, #m-3c:checked ~ .wam-grid .t-3c,
  #m-4a:checked ~ .wam-grid .t-4a, #m-4b:checked ~ .wam-grid .t-4b, #m-4c:checked ~ .wam-grid .t-4c,
  #m-5a:checked ~ .wam-grid .t-5a, #m-5b:checked ~ .wam-grid .t-5b, #m-5c:checked ~ .wam-grid .t-5c,
  #m-6a:checked ~ .wam-grid .t-6a, #m-6b:checked ~ .wam-grid .t-6b, #m-6c:checked ~ .wam-grid .t-6c,
  #m-7a:checked ~ .wam-grid .t-7a, #m-7b:checked ~ .wam-grid .t-7b, #m-7c:checked ~ .wam-grid .t-7c,
  #m-8a:checked ~ .wam-grid .t-8a, #m-8b:checked ~ .wam-grid .t-8b, #m-8c:checked ~ .wam-grid .t-8c,
  #m-9a:checked ~ .wam-grid .t-9a, #m-9b:checked ~ .wam-grid .t-9b, #m-9c:checked ~ .wam-grid .t-9c {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Control Input Layout Buttons */
  .btn-arcade-action {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #ffffff;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
    border: none;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
  }
  .btn-arcade-action:hover {
    background: linear-gradient(135deg, #f472b6, #db2777);
    transform: scale(1.02);
  }
</style>

<!-- MATRIX REGISTRATION CORE (3 Separate Checkboxes wired per hole) -->
<input type="checkbox" id="wam-trigger-start" class="wam-core-trigger">

<input type="checkbox" id="m-1a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-1b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-1c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-2a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-2b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-2c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-3a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-3b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-3c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-4a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-4b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-4c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-5a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-5b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-5c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-6a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-6b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-6c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-7a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-7b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-7c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-8a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-8b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-8c" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-9a" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-9b" class="mole-hit-collect wam-core-trigger">
<input type="checkbox" id="m-9c" class="mole-hit-collect wam-core-trigger">

<!-- SPLASH SCREEN START PANEL -->
<div class="wam-cover-panel">
  <div style="font-size: 3.5rem; margin-bottom: 10px;">⚡</div>
  <h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 8px; background: linear-gradient(135deg, #f472b6, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">CHAOS WHACKER</h2>
  <p style="color: #94a3b8; font-size: 0.95rem; margin-bottom: 25px; max-width: 340px; line-height: 1.4;">Ultra-fast reflex edition. 27 staggered pop-up targets drop unpredictably all the way to the final second.</p>
  <label for="wam-trigger-start" class="btn-arcade-action">Launch Blitz</label>
</div>

<!-- GAME OVER OVERLAY PANEL LAYER -->
<div class="wam-end-panel">
  <div style="font-size: 3.5rem; margin-bottom: 10px;">👑</div>
  <h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 5px; color: #fbbf24;">TIME UP!</h2>
  <p style="color: #cbd5e1; font-size: 1.05rem; margin-bottom: 15px;">Your total high score reflex tally:</p>
  
  <!-- Live score display -->
  <div class="wam-score-view" style="font-size: 3.5rem; font-weight: 900; color: #34d399; margin-bottom: 30px; background: rgba(0,0,0,0.3); padding: 5px 25px; border-radius: 12px; border: 1px solid #334155; display: inline-block; min-width: 80px;"></div>
  
  <!-- Native form reset trigger -->
  <input type="reset" value="Blitz Again" class="btn-arcade-action" style="background: linear-gradient(135deg, #fbbf24, #d97706); color: #0f172a; border: none; display: block; margin: 0 auto;">
</div>

<!-- ARCADE HUD SCOREBOARD PANEL -->
<h1 style="font-size: 1.8rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 20px; background: linear-gradient(135deg, #38bdf8, #ec4899, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase;">Whack-A-Mole</h1>

<div class="wam-hud" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; background: rgba(15, 23, 42, 0.6); padding: 12px; border-radius: 16px; border: 1px solid #334155;">
  <div style="display: flex; flex-direction: column; align-items: center; border-right: 1px solid #334155;">
    <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 2px;">Hits Tally</span>
    <span class="wam-score-view" style="font-size: 1.4rem; font-weight: 800; color: #34d399;"></span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
    <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Game Timer</span>
    <div class="wam-timer-track"><div class="wam-timer-bar"></div></div>
  </div>
</div>

<!-- MAIN HOLE INTERACTIVE DISPLAY GRID CONTAINER -->
<div class="wam-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 10px;">
  
  <!-- Hole Slot 1 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-1a" class="mole-target t-1a mo-1a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-1b" class="mole-target t-1b mo-1b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-1c" class="mole-target t-1c mo-1c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 2 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-2a" class="mole-target t-2a mo-2a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-2b" class="mole-target t-2b mo-2b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-2c" class="mole-target t-2c mo-2c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 3 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-3a" class="mole-target t-3a mo-3a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-3b" class="mole-target t-3b mo-3b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-3c" class="mole-target t-3c mo-3c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 4 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-4a" class="mole-target t-4a mo-4a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-4b" class="mole-target t-4b mo-4b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-4c" class="mole-target t-4c mo-4c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 5 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-5a" class="mole-target t-5a mo-5a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-5b" class="mole-target t-5b mo-5b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-5c" class="mole-target t-5c mo-5c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 6 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-6a" class="mole-target t-6a mo-6a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-6b" class="mole-target t-6b mo-6b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-6c" class="mole-target t-6c mo-6c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 7 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-7a" class="mole-target t-7a mo-7a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-7b" class="mole-target t-7b mo-7b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-7c" class="mole-target t-7c mo-7c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 8 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-8a" class="mole-target t-8a mo-8a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-8b" class="mole-target t-8b mo-8b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-8c" class="mole-target t-8c mo-8c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

  <!-- Hole Slot 9 -->
  <div style="background: linear-gradient(180deg, #1e293b, #0f172a); aspect-ratio: 1; border-radius: 50%; border: 4px solid #334155; position: relative; overflow: hidden; box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);">
    <label for="m-9a" class="mole-target t-9a mo-9a" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-9b" class="mole-target t-9b mo-9b" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
    <label for="m-9c" class="mole-target t-9c mo-9c" style="display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 95%; align-items: center; justify-content: center; font-size: 2.8rem; cursor: pointer; transform: translateY(115%); z-index: 2;">🐹</label>
  </div>

</div>