/* board.css — the chess board inside a clue. Inherits the PandaChess look:
   premium ring around the board, soft piece shadows, glow under the frame. */

.pp-board-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pp-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  /* Sized to leave room for the four move buttons on a 1080p TV without scrolling. */
  width: min(46vh, 380px);
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  /* The "premium ring": thin bright edge, dark bevel, then a coloured glow. */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.14),
    0 0 0 6px rgba(0, 0, 0, 0.55),
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(120, 90, 255, 0.28);
}

.pp-sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-sq.light { background: #eadfc8; }
.pp-sq.dark  { background: #6f8f6b; }

.pp-piece {
  width: 88%;
  height: 88%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Reveal: the winning move's origin and destination. */
.pp-sq.pp-from::after,
.pp-sq.pp-to::after {
  content: '';
  position: absolute;
  inset: 0;
  animation: ppFlash 0.45s ease;
}
.pp-sq.pp-from::after { background: rgba(255, 214, 0, 0.42); }
.pp-sq.pp-to::after {
  background: rgba(255, 214, 0, 0.55);
  box-shadow: inset 0 0 0 4px rgba(255, 214, 0, 0.95);
}
@keyframes ppFlash {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.pp-turn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.pp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.6);
}
.pp-dot.white { background: #f5f2ea; }
.pp-dot.black { background: #24222a; border-color: rgba(255, 255, 255, 0.5); }

/* Big-screen camp mode: the board is the point, so let it grow on a TV. */
@media (min-width: 1400px) {
  .pp-board { width: min(50vh, 440px); }
}