@import url("arcade-games.css");

body {
  overflow: hidden;
}

.board-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1rem 2rem;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 45%, var(--moss));
}

.whack-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 3vw, 1.5rem);
  width: min(92vw, 480px);
}

.hole {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #4a2c14, #2a1a0c 70%);
  border: 4px solid #1e120a;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}

.hole .mob {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6%;
  text-align: center;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  transform: translateY(120%);
  transition: transform 0.15s ease-out;
  user-select: none;
  pointer-events: none;
}

.hole.up .mob {
  transform: translateY(0);
}

.hole.hit .mob {
  transform: translateY(0) scale(1.35);
  transition: transform 0.1s ease-out;
}