.whack-wrapper{
  max-width:420px;margin:20px auto;padding:20px;
  background:linear-gradient(135deg,#020617,#1e293b);
  color:#fff;border-radius:18px;text-align:center;
  font-family:Arial,sans-serif;
}
.whack-info{
  display:flex;justify-content:space-between;
  margin-bottom:10px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:15px 0;
}
.hole{
  background:#020617;
  border-radius:50%;
  height:90px;
  position:relative;
  overflow:hidden;
}
.mole{
  position:absolute;
  bottom:-100%;
  left:50%;
  transform:translateX(-50%);
  width:60px;height:60px;
  background:#a16207;
  border-radius:50%;
  cursor:pointer;
  transition:bottom .2s;
}
.mole::after{
  content:"";
  position:absolute;
  top:18px;left:18px;
  width:8px;height:8px;
  background:#000;border-radius:50%;
}
.mole.up{
  bottom:10px;
}
button{
  padding:10px 22px;border:none;border-radius:10px;
  background:#22c55e;color:#000;font-weight:bold;cursor:pointer;
}
#result{
  margin-top:10px;
  font-weight:bold;
  color:#facc15;
}