/* ChessApp v1.5 premium board and material display overrides */

:root {
  --board-light: #eeeed2;
  --board-dark: #769656;
  --last: rgba(246, 246, 105, .74);
  --selected: #f4d35e;
}

.board-wrap {
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(218,226,232,.56));
  border: 1px solid color-mix(in srgb, var(--border) 78%, #ffffff 22%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 18px 40px rgba(10,18,25,.14);
}

html[data-theme="dark"] .board-wrap {
  background: linear-gradient(145deg, #1d2a35, #111c25);
  border-color: #304350;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 48px rgba(0,0,0,.34);
}

.chessboard {
  border-radius: 12px;
  border: 1px solid rgba(21,30,18,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24),
    0 14px 28px rgba(0,0,0,.18);
}

.square {
  isolation: isolate;
}

.square.last-move {
  background-image: linear-gradient(var(--last), var(--last));
}

.square.selected {
  box-shadow:
    inset 0 0 0 4px rgba(250, 211, 78, .96),
    inset 0 0 18px rgba(250, 211, 78, .34);
}

.square.legal::after {
  width: 20%;
  background: rgba(31, 64, 24, .42);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.square.capture::after {
  width: 78%;
  border: 5px solid rgba(31, 64, 24, .38);
  background: transparent;
  box-shadow: none;
}

.square.check {
  box-shadow:
    inset 0 0 0 5px rgba(225,67,72,.92),
    inset 0 0 24px rgba(225,67,72,.28);
}

.premium-piece {
  width: 98%;
  height: 98%;
  z-index: 2;
  transform: translateY(-1px);
}

.premium-piece .piece-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.18))
    drop-shadow(0 5px 4px rgba(0,0,0,.24))
    drop-shadow(0 9px 8px rgba(0,0,0,.12));
  transition: transform .16s ease, filter .16s ease;
}

.premium-piece.white .piece-svg {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.48))
    drop-shadow(0 4px 4px rgba(0,0,0,.20))
    drop-shadow(0 8px 8px rgba(0,0,0,.10));
}

.premium-piece.black .piece-svg {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.08))
    drop-shadow(0 5px 5px rgba(0,0,0,.35))
    drop-shadow(0 9px 9px rgba(0,0,0,.18));
}

.square.can-select:hover .premium-piece .piece-svg,
.square.selected .premium-piece .piece-svg {
  transform: translateY(-2px) scale(1.035);
}

.square.last-move .premium-piece .piece-svg {
  animation: premium-piece-land .22s ease-out;
}

@keyframes premium-piece-land {
  0% { transform: translateY(-7px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

.player-strip {
  align-items: center;
}

.player-details {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  overflow: hidden;
}

.material-row {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  margin-top: 4px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.captured-pieces {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 1px 2px 1px 0;
}

.captured-piece {
  width: 19px;
  height: 22px;
  flex: 0 0 19px;
  display: inline-grid !important;
  place-items: center;
  margin: 0 -3px 0 0;
  vertical-align: middle;
}

.captured-piece:first-child {
  margin-left: 0;
}

.captured-piece .mini-piece,
.captured-piece .piece-shell,
.captured-piece .piece-svg {
  width: 21px !important;
  height: 21px !important;
}

.captured-piece .piece-svg {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.24)) !important;
}

.material-score {
  display: none !important;
}

.advantage-badge {
  flex: 0 0 auto;
  min-width: 30px;
  height: 22px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  margin: 0 !important;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 28%, transparent);
}

.material-empty {
  display: inline-block !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 20px;
  opacity: .72;
}

@media (max-width: 680px) {
  .material-row {
    gap: 5px;
    min-height: 22px;
  }

  .captured-piece {
    width: 17px;
    height: 20px;
    flex-basis: 17px;
    margin-right: -3px;
  }

  .captured-piece .mini-piece,
  .captured-piece .piece-shell,
  .captured-piece .piece-svg {
    width: 19px !important;
    height: 19px !important;
  }

  .advantage-badge {
    min-width: 28px;
    height: 20px;
    padding: 0 7px;
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .square.last-move .premium-piece .piece-svg {
    animation: none;
  }
}