/* =============================================================
   GAME: Reversi
   ============================================================= */
.board-reversi {
  --cell: min(calc((100vw - 96px) / 8), 54px);
  /* disc faces + edges: an Othello disc is half black, half white, so the edge shows both */
  --rv-bf: radial-gradient(circle at 36% 30%, #66627a 0, #2a2734 36%, #0e0d13 100%);
  --rv-wf: radial-gradient(circle at 36% 30%, #ffffff 0, #f3f1fb 40%, #c6c1da 100%);
  --rv-t: calc(var(--cell) * .045);
  --rv-be: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 var(--rv-t) 0 #17151e, 0 calc(var(--rv-t) * 2) 0 #d6d2e6, 0 calc(var(--rv-t) * 2 + 1px) calc(var(--rv-t) * 2.5) rgba(0, 10, 14, .6);
  --rv-we: inset 0 0 0 1px rgba(40, 30, 90, .08), 0 var(--rv-t) 0 #b9b4cf, 0 calc(var(--rv-t) * 2) 0 #17151e, 0 calc(var(--rv-t) * 2 + 1px) calc(var(--rv-t) * 2.5) rgba(0, 10, 14, .6);
  display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  gap: 2px; padding: 8px; background: #06272e; border-radius: 14px;
  box-shadow: 0 0 0 2px #2ee6ff, 0 0 26px rgba(34, 227, 255, .35);
}
.rv-cell {
  position: relative; border: 0; padding: 0; border-radius: 3px; cursor: default; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #0f5160, #0a404c 75%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(120, 240, 255, .06);
}
.rv-cell.legal { cursor: pointer; }
.rv-cell.legal::after { content: ""; width: 26%; height: 26%; border-radius: 50%; background: rgba(120, 240, 255, .45); }
.rv-cell.legal:hover::after { width: 70%; height: 70%; opacity: .6; }
.rv-disc { position: relative; width: 80%; height: 80%; border-radius: 50%; transform: translateY(calc(var(--rv-t) * -1)); }
.rv-disc.b { background: var(--rv-bf); box-shadow: var(--rv-be); }
.rv-disc.w { background: var(--rv-wf); box-shadow: var(--rv-we); }
/* new disc drops in; turned discs spin over (colour swaps at the edge-on midpoint), ring by ring */
.rv-disc.last { animation: rv-drop .22s ease-out; }
.rv-disc.last::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: var(--t-red); box-shadow: 0 0 6px var(--t-red); }
.rv-disc.flip { animation: rv-to-b .46s ease-in-out both; animation-delay: calc(var(--k, 0) * 70ms + 60ms); }
.rv-disc.w.flip { animation-name: rv-to-w; }
@keyframes rv-drop { from { transform: translateY(calc(var(--rv-t) * -5)) scale(1.18); opacity: .3; } }
@keyframes rv-to-b {
  0% { background: var(--rv-wf); box-shadow: var(--rv-we); transform: translateY(calc(var(--rv-t) * -1)) perspective(calc(var(--cell) * 3)) rotateY(0); }
  50% { transform: translateY(calc(var(--rv-t) * -4)) perspective(calc(var(--cell) * 3)) rotateY(90deg) scale(1.08); }
  50.1% { transform: translateY(calc(var(--rv-t) * -4)) perspective(calc(var(--cell) * 3)) rotateY(-90deg) scale(1.08); }
  100% { transform: translateY(calc(var(--rv-t) * -1)) perspective(calc(var(--cell) * 3)) rotateY(0); }
}
@keyframes rv-to-w {
  0% { background: var(--rv-bf); box-shadow: var(--rv-be); transform: translateY(calc(var(--rv-t) * -1)) perspective(calc(var(--cell) * 3)) rotateY(0); }
  50% { transform: translateY(calc(var(--rv-t) * -4)) perspective(calc(var(--cell) * 3)) rotateY(90deg) scale(1.08); }
  50.1% { transform: translateY(calc(var(--rv-t) * -4)) perspective(calc(var(--cell) * 3)) rotateY(-90deg) scale(1.08); }
  100% { transform: translateY(calc(var(--rv-t) * -1)) perspective(calc(var(--cell) * 3)) rotateY(0); }
}