.holes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
  padding: 6% 5% 5%;
  aspect-ratio: 1;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 15%, #ffffff14 0 8%, transparent 9%),
    radial-gradient(circle at 50% 35%, #4ea445, #245c22 75%);
  box-shadow: 0 10px 40px #0008, inset 0 0 0 4px #1a4a18;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.hole { position: relative; }
.hole .pit {
  position: absolute;
  left: 4%; right: 4%; bottom: 6%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #120a04 55%, #3b2410 70%);
}
.hole .win {
  position: absolute;
  left: 9%; right: 9%; top: -12%; bottom: 19%;
  overflow: hidden;
}
.hole .lip {
  position: absolute;
  left: 4%; right: 4%; bottom: 6%;
  height: 13%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(#6b4420, #4a2e14);
  pointer-events: none;
}
.mole {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  transform: translateY(105%);
  transition: transform 0.11s ease-out;
}
.mole svg { display: block; width: 100%; height: auto; }
.hole.up .mole { transform: translateY(6%); }
.mole.boom { animation: boom 0.22s ease-out forwards; }
@keyframes boom { to { transform: translateY(6%) scale(1.45); opacity: 0; filter: brightness(2.2); } }
.tag {
  position: absolute;
  bottom: 6%; left: 50%;
  transform: translateX(-50%);
  padding: 0 0.4em;
  border-radius: 4px;
  background: #000b;
  color: #fff;
  font-size: clamp(0.55rem, 1.6vw, 0.8rem);
  white-space: nowrap;
}
.key {
  position: absolute;
  bottom: 0; left: 50%;
  z-index: 2;
  transform: translate(-50%, 30%);
  padding: 0.05rem 0.45rem;
  border: 1px solid #fff4;
  border-radius: 6px;
  background: #111c;
  color: #fff;
  font: 700 clamp(0.7rem, 2vw, 0.95rem) ui-monospace, monospace;
  pointer-events: none;
}
.key small { margin-left: 0.35em; opacity: 0.55; }
.hole .hammer {
  position: absolute;
  right: -6%; top: -6%;
  width: 46%;
  z-index: 3;
  opacity: 0;
  transform-origin: 20% 90%;
  pointer-events: none;
}
.hole .hammer svg { width: 100%; height: auto; }
.hole.bonk .hammer { animation: swing 0.18s ease-in; }
@keyframes swing {
  from { opacity: 1; transform: rotate(40deg); }
  70% { opacity: 1; transform: rotate(-35deg); }
  to { opacity: 0; transform: rotate(-35deg); }
}