/* Reversi — board, discs and flip animation. Shared look comes from ../shared/tnz.css. */
.levels { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.levels .tnz-btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
.levels .tnz-btn.on { border-color: var(--primary); color: var(--primary); }
.ta { font-size: 13px; opacity: .9; }

.rv-score { display: flex; gap: 10px; width: min(100%, 420px); margin-bottom: 6px; }
.rv-side { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 6px 10px; transition: border-color .2s, box-shadow .2s; }
.rv-side.turn { border-color: var(--gold); box-shadow: 0 0 12px #ffc53344; }
.rv-side .who { flex: 1; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-side b { font-size: 22px; }
.rv-side .disc { position: static; width: 22px; height: 22px; flex: none; }
.rv-turn { font-weight: 700; min-height: 24px; margin: 4px 0 8px; text-align: center; }

.rv-board {
  width: min(100%, 420px); aspect-ratio: 1; padding: 6px; border-radius: 14px;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 3px;
  background: linear-gradient(160deg, #0f5d3a, #0a4229); box-shadow: 0 10px 28px #0009, inset 0 2px 0 #ffffff22;
  touch-action: manipulation; perspective: 600px;
}
.rv-cell { position: relative; background: radial-gradient(circle at 50% 40%, #1f8a57, #157046); border-radius: 4px; cursor: pointer; }
.rv-cell:active { filter: brightness(1.2); }
.disc { position: absolute; inset: 9%; border-radius: 50%; transform-style: preserve-3d; transition: background .18s; }
.disc.b { background: radial-gradient(circle at 35% 30%, #5b5b66, #16161b 60%); box-shadow: 0 2px 3px #0008, inset 0 -2px 0 #0006; }
.disc.w { background: radial-gradient(circle at 35% 30%, #ffffff, #d8d6e0 60%); box-shadow: 0 2px 3px #0008, inset 0 -2px 0 #0002; }
.disc.flip { animation: rv-flip .42s ease both; }
.disc.drop { animation: rv-drop .28s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rv-flip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(90deg) scale(1.12); } 100% { transform: rotateY(0) scale(1); } }
@keyframes rv-drop { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.rv-cell.legal::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; margin: -12% 0 0 -12%; border-radius: 50%; background: #ffffff55; animation: rv-pulse 1.4s ease-in-out infinite; }
@keyframes rv-pulse { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.rv-cell.last .disc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: var(--primary); }
.rv-cell.hint { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px #ffc533aa; animation: rv-hint 1s ease-in-out 3; z-index: 1; }
@keyframes rv-hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.rv-board.busy .rv-cell { cursor: wait; }
.rv-tools { display: flex; gap: 10px; justify-content: center; margin-top: 12px; min-height: 40px; }