/* Othello — board + discs */
#board-wrap { display: flex; justify-content: center; width: 100%; padding: 8px; }
#board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: min(92vw, 440px, 58dvh);
  aspect-ratio: 1;
  background: #0d8a5f;
  background: linear-gradient(145deg, #0e9a68, #0b7a54);
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(255,176,32,.15);
}
.cell {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.cell.legal { cursor: pointer; }
.cell.legal::after {
  content: ''; width: 28%; height: 28%; border-radius: 50%;
  background: rgba(255,209,102,.75);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.25); opacity: 1; } }
.cell.last::before {
  content: ''; position: absolute; inset: 4px; border-radius: 8px;
  border: 2px solid var(--gold-light); pointer-events: none;
}
.disc {
  width: 88%; height: 88%; border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.disc.B { background: radial-gradient(circle at 35% 30%, #5a5a6e, #1a1a24 70%); }
.disc.W { background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfe0 70%); }
.disc.placed { animation: discPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes discPop { from { transform: scale(.4); } to { transform: scale(1); } }
.disc.flipped { animation: discFlip .3s ease; }
@keyframes discFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.85); } 100% { transform: rotateY(0); } }