.board-frame {
  padding: 1.4em;
  border-radius: var(--radius-lg);
  border: 4px solid var(--brass-700);
  box-shadow: var(--shadow-card-lift);
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  grid-template-rows: repeat(3, 96px);
  gap: 10px;
}

@media (max-width: 480px) {
  .board {
    grid-template-columns: repeat(3, 23.5vw);
    grid-template-rows: repeat(3, 23.5vw);
  }
}

.cell {
  position: relative;
  border: none;
  border-radius: 10px;
  background: var(--wood-900);
  box-shadow: var(--shadow-inset-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.cell:hover:not(.filled) {
  box-shadow: var(--shadow-inset-deep), 0 0 0 2px var(--brass-600) inset;
}

.cell.winning {
  box-shadow: var(--shadow-inset-deep), 0 0 0 3px var(--brass-500) inset, 0 0 18px 2px rgba(212, 176, 108, 0.6);
}

.piece {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  transform: scale(0);
  animation: piece-drop 0.32s var(--ease-spring) forwards;
}

@keyframes piece-drop {
  0% { transform: scale(0) translateY(-14px); }
  60% { transform: scale(1.12) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

.piece.marble {
  background:
    radial-gradient(circle at 32% 26%, #ffffff, var(--marble-100) 30%, var(--marble-300) 62%, var(--marble-500) 100%);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.piece.wood {
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--wood-500) 0, var(--wood-500) 3px, var(--wood-700) 4px, var(--wood-700) 7px),
    radial-gradient(circle at 32% 26%, var(--wood-400), var(--wood-800) 80%);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
}