/* v13.3.8.10.12 — Board Quality Pass
   Deep visual feedback for Chess, Checkers and Connect Four only. */

/* ---------- shared board polish ---------- */
.chess-board,
.checkers-board,
.connect-four-board {
  isolation: isolate;
}

/* ---------- Chess ---------- */
.chess-board {
  position: relative;
  border: clamp(5px, 1.2vw, 10px) solid #33273b;
  border-radius: 18px;
  background: #33273b;
  box-shadow:
    0 28px 60px rgba(18, 14, 35, .24),
    0 8px 18px rgba(18, 14, 35, .16),
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 0 5px rgba(0,0,0,.16);
}
.chess-cell {
  overflow: hidden;
  transition: filter .14s ease, box-shadow .16s ease, transform .12s ease;
}
.chess-cell.is-light {
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(145deg, #eadcc8, #d7c0a6);
}
.chess-cell.is-dark {
  background:
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.07), transparent 42%),
    linear-gradient(145deg, #76556e, #5c405d);
}
.chess-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 45%, rgba(0,0,0,.04));
  z-index: 0;
}
.chess-cell.is-last {
  box-shadow: inset 0 0 0 999px rgba(255, 214, 74, .23);
}
.chess-cell.is-move-from { box-shadow: inset 0 0 0 999px rgba(250, 188, 58, .20); }
.chess-cell.is-move-to {
  box-shadow: inset 0 0 0 999px rgba(255, 224, 94, .30), inset 0 0 0 3px rgba(255,244,192,.55);
  z-index: 1;
}
.chess-cell.is-selected {
  box-shadow: inset 0 0 0 4px #a88cff, inset 0 0 24px rgba(141,112,255,.26);
  z-index: 3;
}
.chess-cell.is-target::after {
  width: 22%;
  background: radial-gradient(circle, #8f75ff 0 45%, rgba(143,117,255,.34) 48% 100%);
  box-shadow: 0 0 0 6px rgba(143,117,255,.10), 0 0 18px rgba(143,117,255,.32);
  animation: boardTargetPulse 1s ease-in-out infinite alternate;
}
.chess-cell.is-capture::after {
  inset: 8%;
  border: clamp(3px, .55vw, 5px) solid rgba(239,80,108,.86);
  box-shadow: inset 0 0 16px rgba(239,80,108,.20), 0 0 16px rgba(239,80,108,.22);
  animation: boardCapturePulse .8s ease-in-out infinite alternate;
}
.chess-cell.is-check {
  box-shadow: inset 0 0 0 999px rgba(238, 66, 92, .42), inset 0 0 28px rgba(255, 46, 78, .38);
  animation: chessCheckPulse .72s ease-in-out infinite alternate;
  z-index: 2;
}
.chess-piece {
  z-index: 2;
  font-size: clamp(34px, 6.3vw, 61px);
  transform-origin: 50% 72%;
  transition: transform .16s ease, filter .16s ease;
  will-change: transform;
}
.chess-piece.is-white {
  color: #fff9e9;
  text-shadow:
    0 1px 0 #2f2832, 1px 0 0 #2f2832, -1px 0 0 #2f2832, 0 -1px 0 #2f2832,
    0 4px 3px rgba(0,0,0,.25), 0 8px 12px rgba(0,0,0,.15);
}
.chess-piece.is-black {
  color: #201923;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 4px 3px rgba(0,0,0,.23), 0 8px 12px rgba(0,0,0,.13);
}
.chess-cell:hover .chess-piece,
.chess-cell.is-selected .chess-piece { transform: translateY(-4px) scale(1.055); }
.chess-cell.is-arriving .chess-piece { animation: chessPieceLand .28s cubic-bezier(.2,.8,.25,1.25); }
.chess-coordinate {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-size: clamp(7px, 1.05vw, 10px);
  line-height: 1;
  font-weight: 900;
  opacity: .72;
  color: rgba(37,25,39,.74);
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
.chess-cell.is-dark .chess-coordinate { color: rgba(255,245,232,.76); text-shadow: 0 1px 1px rgba(0,0,0,.26); }
.chess-coordinate.is-file { inset-inline-end: 5px; bottom: 4px; }
.chess-coordinate.is-rank { inset-inline-start: 5px; top: 4px; }
.chess-board.is-bot-turn { filter: saturate(.93); }
.chess-board.is-check-state { box-shadow: 0 28px 60px rgba(18,14,35,.24), 0 0 0 3px rgba(239,80,108,.20), 0 0 30px rgba(239,80,108,.12), inset 0 0 0 2px rgba(255,255,255,.08); }

/* ---------- Checkers ---------- */
.checkers-board {
  position: relative;
  border: clamp(5px, 1.2vw, 10px) solid #2f2438;
  border-radius: 18px;
  background: #2f2438;
  box-shadow:
    0 28px 60px rgba(18,14,35,.23),
    0 8px 18px rgba(18,14,35,.15),
    inset 0 0 0 2px rgba(255,255,255,.07),
    inset 0 0 0 5px rgba(0,0,0,.17);
}
.checkers-cell { overflow: hidden; }
.checkers-cell.is-rest {
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(145deg, #eadbc7, #d5bea2);
}
.checkers-cell.is-playable {
  background:
    radial-gradient(circle at 70% 74%, rgba(255,255,255,.06), transparent 44%),
    linear-gradient(145deg, #705267, #523c53);
}
.checkers-cell.is-playable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 48%, rgba(0,0,0,.045));
  pointer-events: none;
}
.checkers-cell.is-last-from { box-shadow: inset 0 0 0 999px rgba(250,188,58,.17); }
.checkers-cell.is-last-to { box-shadow: inset 0 0 0 999px rgba(255,219,80,.27), inset 0 0 0 3px rgba(255,239,163,.42); z-index: 1; }
.checkers-cell.is-path { box-shadow: inset 0 0 0 999px rgba(128,109,255,.14); }
.checkers-cell.is-selected { box-shadow: inset 0 0 0 4px #a88cff, inset 0 0 26px rgba(141,112,255,.25); z-index: 3; }
.checkers-cell.is-target::after {
  width: 24%;
  background: radial-gradient(circle, #a48aff 0 44%, rgba(164,138,255,.34) 47% 100%);
  box-shadow: 0 0 0 6px rgba(164,138,255,.09), 0 0 18px rgba(164,138,255,.30);
  animation: boardTargetPulse 1s ease-in-out infinite alternate;
}
.checkers-cell.is-capture::after {
  width: 60%;
  border: 4px solid rgba(242,80,104,.82);
  box-shadow: inset 0 0 16px rgba(242,80,104,.17), 0 0 17px rgba(242,80,104,.23);
}
.checker-piece {
  width: 70%;
  border: 3px solid rgba(255,255,255,.46);
  box-shadow:
    inset 0 -8px 0 rgba(0,0,0,.18),
    inset 0 4px 0 rgba(255,255,255,.24),
    inset 0 0 0 2px rgba(0,0,0,.10),
    0 8px 13px rgba(0,0,0,.25),
    0 13px 22px rgba(0,0,0,.12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  transform-origin: 50% 70%;
}
.checker-piece::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.17);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.12), inset 0 -2px 3px rgba(0,0,0,.12);
}
.checker-piece.is-red { background: radial-gradient(circle at 34% 28%, #ff8795, #df4d64 46%, #a82745 100%); }
.checker-piece.is-black { background: radial-gradient(circle at 34% 28%, #585060, #2d2833 48%, #15131a 100%); }
.checker-piece.is-king::after {
  inset: 18%;
  border: 2px solid rgba(255,235,143,.88);
  box-shadow: 0 0 10px rgba(255,220,104,.24), inset 0 0 8px rgba(255,220,104,.14);
}
.checker-crown {
  position: relative;
  z-index: 3;
  color: #ffe7a0;
  font-size: clamp(14px, 2.5vw, 25px);
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0,0,0,.32), 0 0 8px rgba(255,218,102,.28);
}
.checkers-cell:hover .checker-piece,
.checkers-cell.is-selected .checker-piece { transform: translateY(-4px) scale(1.055); }
.checkers-cell.can-capture .checker-piece {
  box-shadow:
    inset 0 -8px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.24),
    0 0 0 4px rgba(242,80,104,.13), 0 0 22px rgba(242,80,104,.27), 0 10px 18px rgba(0,0,0,.23);
}
.checkers-cell.is-arriving .checker-piece { animation: checkerLand .30s cubic-bezier(.2,.8,.25,1.25); }
.checkers-board.is-bot-turn { filter: saturate(.93); }

/* ---------- Connect Four ---------- */
.connect-four-shell {
  position: relative;
  padding: 6px 8px 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(26,36,92,.07));
}
.connect-four-shell::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 3px;
  height: 10px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(43,53,139,.92), rgba(27,32,94,.95));
  box-shadow: 0 7px 14px rgba(20,22,70,.22);
  z-index: -1;
}
.connect-column-hints { padding-bottom: 5px; }
.connect-column-hint { height: 34px; }
.connect-column-hint::after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin: auto;
  opacity: .36;
  background: linear-gradient(145deg, #b59bff, #704fdd);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.35), 0 3px 7px rgba(34,23,91,.2);
  transform: translateY(2px) scale(.82);
}
.connect-column-hint:hover::after,
.connect-column-hint:focus-visible::after,
.connect-column-hint.is-preview::after {
  opacity: 1;
  transform: translateY(4px) scale(1);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.38), 0 5px 12px rgba(83,59,196,.28), 0 0 15px rgba(145,116,255,.28);
}
.connect-four-board {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 24% 8%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(155deg, #4c5dd5, #29399e 52%, #1e2b79);
  border: clamp(3px, .65vw, 6px) solid #263480;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -18px 34px rgba(12,20,70,.22),
    0 24px 50px rgba(29,31,72,.24),
    0 9px 18px rgba(29,31,72,.15);
}
.connect-cell {
  background: radial-gradient(circle at 50% 42%, #fbfbff 0 48%, #d9dcea 72%, #c2c6d5 100%);
  box-shadow: inset 0 5px 11px rgba(0,0,0,.19), inset 0 -2px 3px rgba(255,255,255,.42), 0 1px 0 rgba(255,255,255,.12);
}
.connect-cell::after {
  inset: 9%;
  will-change: transform;
}
.connect-cell.is-player::after {
  background: radial-gradient(circle at 32% 25%, #d7c9ff, #9b7dff 35%, #6745d7 72%, #442b9e 100%);
  box-shadow: inset 0 4px 4px rgba(255,255,255,.34), inset 0 -7px 9px rgba(37,23,98,.28), 0 5px 10px rgba(35,22,88,.28);
}
.connect-cell.is-bot::after {
  background: radial-gradient(circle at 32% 25%, #fff1a7, #ffd45b 37%, #e89a25 72%, #a95c0c 100%);
  box-shadow: inset 0 4px 4px rgba(255,255,255,.37), inset 0 -7px 9px rgba(124,71,0,.25), 0 5px 10px rgba(97,58,0,.24);
}
.connect-cell.is-preview-column:not(.is-player):not(.is-bot) {
  filter: brightness(1.055);
  box-shadow: inset 0 5px 11px rgba(0,0,0,.19), inset 0 0 0 3px rgba(178,157,255,.24), 0 0 14px rgba(150,126,255,.12);
}
.connect-cell.is-last::before {
  inset: 3%;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 18px rgba(255,255,255,.48);
  animation: connectLastPulse .72s ease-in-out 2 alternate;
}
.connect-cell.is-dropping::after { animation: connectDiscDrop .42s cubic-bezier(.15,.72,.22,1.08); }
.connect-cell.is-winning::after {
  animation: connectWinPro .72s ease-in-out infinite alternate;
  box-shadow: inset 0 4px 4px rgba(255,255,255,.38), inset 0 -7px 9px rgba(34,20,90,.22), 0 0 0 4px rgba(255,244,160,.30), 0 0 24px rgba(255,224,90,.62);
}
.connect-four-shell.is-bot-turn .connect-column-hint::after {
  background: linear-gradient(145deg, #ffe791, #eaa12a);
  opacity: .22;
}
.connect-four-shell.is-ended .connect-column-hint::after { opacity: .08; }

@keyframes chessPieceLand {
  0% { transform: translateY(-18%) scale(.88); filter: blur(.2px) drop-shadow(0 8px 5px rgba(0,0,0,.16)); }
  70% { transform: translateY(2px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes chessCheckPulse {
  from { filter: saturate(1); }
  to { filter: saturate(1.16) brightness(1.04); }
}
@keyframes checkerLand {
  0% { transform: translateY(-20%) scale(.86); }
  68% { transform: translateY(3px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes boardTargetPulse {
  from { transform: scale(.88); opacity: .72; }
  to { transform: scale(1.10); opacity: 1; }
}
@keyframes boardCapturePulse {
  from { transform: scale(.96); opacity: .76; }
  to { transform: scale(1.02); opacity: 1; }
}
@keyframes connectDiscDrop {
  0% { transform: translateY(var(--drop-distance, -650%)) scale(.88); filter: brightness(1.15); }
  76% { transform: translateY(5%) scale(1.02,.96); }
  90% { transform: translateY(-3%) scale(.98,1.03); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes connectLastPulse {
  from { opacity: .55; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.02); }
}
@keyframes connectWinPro {
  from { transform: scale(.89) rotate(-1deg); filter: brightness(1); }
  to { transform: scale(1.04) rotate(1deg); filter: brightness(1.18) saturate(1.08); }
}

@media (max-width: 620px) {
  .chess-board, .checkers-board { border-width: 4px; border-radius: 12px; }
  .chess-coordinate { font-size: 7px; }
  .chess-cell.is-selected, .checkers-cell.is-selected { box-shadow: inset 0 0 0 3px #a88cff, inset 0 0 18px rgba(141,112,255,.22); }
  .checker-piece { border-width: 2px; }
  .connect-four-shell { padding-inline: 3px; border-radius: 18px; }
  .connect-column-hint { height: 28px; }
  .connect-four-board { border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .chess-cell.is-target::after,
  .chess-cell.is-capture::after,
  .chess-cell.is-check,
  .chess-cell.is-arriving .chess-piece,
  .checkers-cell.is-target::after,
  .checkers-cell.is-arriving .checker-piece,
  .connect-cell.is-last::before,
  .connect-cell.is-dropping::after,
  .connect-cell.is-winning::after { animation: none !important; }
}