/* Fallback tokens matching /arcade/shared.css in case of bare-directory preview */
:root {
  color-scheme: dark;
  --bg: #102329;
  --panel: #193139;
  --ink: #eef0dc;
  --muted: #b6cbc6;
  --line: #365359;
  --accent: #d1e69a;
  --gold: #edc37e;
  --danger: #f5a698;
  --sq-light: #d7dcc8;
  --sq-dark: #4d6c69;
  --sq-light-coord: #284247;
  --sq-dark-coord: #e8ecd9;
  --sq-last-light: #cad686;
  --sq-last-dark: #688754;
  --sq-selected-light: #e2c96b;
  --sq-selected-dark: #9c8c3d;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Toolbar & Controls */
.chess-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.chess-toolbar label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.chess-toolbar select {
  min-height: 44px;
  min-width: 148px;
}

.toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.toolbar-buttons button {
  min-height: 44px;
  padding: 10px 15px;
  font-weight: 600;
}

/* Status & Engine Telemetry Banner */
.status-banner {
  margin-bottom: 18px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-banner .status {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.status-banner .status.is-check {
  color: var(--gold);
}

.status-banner .status.is-gameover {
  color: var(--gold);
}

.thinking-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  background: rgba(237, 195, 126, 0.12);
  border: 1px solid rgba(237, 195, 126, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
}

.thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulseDot 1s ease-in-out infinite alternate;
}

@keyframes pulseDot {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

.engine-telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid rgba(54, 83, 89, 0.65);
  padding-top: 8px;
}

.telemetry-chip strong {
  color: var(--ink);
  font-weight: 600;
}

.engine-error-banner {
  background: rgba(245, 166, 152, 0.14);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
}

/* Main Workspace Grid */
.chess-workspace {
  display: grid;
  grid-template-columns: minmax(290px, 560px) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

/* Board Panel & Player Bars */
.board-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px;
  background: rgba(16, 35, 41, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.player-ident {
  display: flex;
  align-items: center;
  gap: 8px;
}

.turn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--line);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.turn-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(209, 230, 154, 0.55);
}

.player-name {
  font-weight: 650;
  font-size: 14px;
  color: var(--ink);
}

.advantage-badge {
  font-size: 12px;
  font-weight: 700;
  color: #14272c;
  background: var(--accent);
  border-radius: 6px;
  padding: 1px 6px;
}

.captured-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-height: 24px;
}

.captured-mini {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.captured-mini svg {
  width: 100%;
  height: 100%;
}

/* Chessboard Stage & 8x8 Grid */
.board-stage {
  position: relative;
  width: 100%;
  max-width: 528px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 3px solid #2b474d;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(5, 15, 19, 0.55);
  background: var(--sq-dark);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: 100%;
}

.square {
  appearance: none;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
  transition: background-color 110ms ease;
}

.square.is-light {
  background-color: var(--sq-light);
}

.square.is-dark {
  background-color: var(--sq-dark);
}

.square:hover:not(:disabled) {
  border-color: transparent;
  filter: brightness(1.04);
}

.square.is-light.is-last-from,
.square.is-light.is-last-to {
  background-color: var(--sq-last-light);
}

.square.is-dark.is-last-from,
.square.is-dark.is-last-to {
  background-color: var(--sq-last-dark);
}

.square.is-light.is-selected {
  background-color: var(--sq-selected-light);
}

.square.is-dark.is-selected {
  background-color: var(--sq-selected-dark);
}

.square.is-check {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(232, 62, 52, 0.92) 0%,
    rgba(196, 36, 36, 0.72) 52%,
    transparent 88%
  );
}

.square:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  z-index: 5;
}

/* Coordinate Labels */
.coord-label {
  position: absolute;
  font-size: clamp(9px, 1.7vw, 11px);
  font-weight: 750;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.square.is-light .coord-label {
  color: var(--sq-light-coord);
}

.square.is-dark .coord-label {
  color: var(--sq-dark-coord);
}

.coord-rank {
  top: 3px;
  left: 4px;
}

.coord-file {
  bottom: 3px;
  right: 4px;
}

/* Legal Move Indicators */
.square.is-legal-move::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(18, 39, 45, 0.42);
  pointer-events: none;
  z-index: 3;
}

.square.is-dark.is-legal-move::after {
  background: rgba(238, 240, 220, 0.44);
}

.square.is-legal-capture::after {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 4px solid rgba(20, 39, 44, 0.48);
  pointer-events: none;
  z-index: 3;
}

.square.is-dark.is-legal-capture::after {
  border-color: rgba(238, 240, 220, 0.55);
}

/* Piece Container & Planted Stance / Attack Animations (NO idle bobbing) */
.piece-wrap {
  width: 86%;
  height: 86%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transform: translate(0, 0);
}

.chess-actor {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  /* Planted at all times: zero idle animation */
  transform: none;
}

.chess-actor .weapon,
.chess-actor .shield {
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Deliberate STANCE animation when piece is selected (feet/base stay planted) */
.square.is-selected .chess-actor .weapon {
  transform: rotate(-18deg) translate(-2px, -4px);
}

.square.is-selected .chess-actor .shield {
  transform: translate(5px, -4px) rotate(10deg);
}

/* Slide between squares on quiet move */
.square.is-moving {
  z-index: 10;
}

.piece-wrap.is-sliding:not(.is-attacker) {
  z-index: 6;
  animation: pieceSlide 210ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pieceSlide {
  from {
    transform: translate(var(--slide-from-x, 0px), var(--slide-from-y, 0px));
  }
  to {
    transform: translate(0, 0);
  }
}

/* Multi-stage CAPTURE COMBAT choreography (680ms total):
   1. 0-190ms (0-28%): Attacker approaches stand-off point & winds up weapon; Defender stays visible & raises guard.
   2. 190-375ms (28-55%): Attacker lunges & swings weapon; Defender takes hit & recoils (still opaque!).
   3. 375-680ms (55-100%): Defender collapses & fades out after impact; Attacker steps onto square. */
.square.is-attacking {
  z-index: 12;
}

.square.is-attacking .piece-wrap {
  position: absolute;
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
}

.piece-wrap.is-attacker {
  z-index: 8;
  animation: combatAttackerApproach 680ms linear both;
}

.piece-wrap.is-defender {
  z-index: 6;
  transform-origin: 50% 88%;
  animation: combatDefenderStage 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.piece-wrap.is-attacker .chess-actor .weapon {
  animation: combatAttackerWeapon 680ms ease-in-out both;
}

.piece-wrap.is-attacker .chess-actor .shield {
  animation: combatAttackerShield 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.piece-wrap.is-defender .chess-actor .weapon {
  animation: combatDefenderWeapon 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.piece-wrap.is-defender .chess-actor .shield {
  animation: combatDefenderShield 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.square.is-attacking::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 14px rgba(237, 195, 126, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  animation: captureFlash 680ms ease-out both;
}

@keyframes combatAttackerApproach {
  0% {
    transform: translate(var(--slide-from-x, 0%), var(--slide-from-y, 0%)) scale(1);
  }
  28% {
    transform: translate(var(--clash-x, -38%), var(--clash-y, 0%)) scale(1.04);
  }
  42% {
    transform: translate(var(--strike-x, -10%), var(--strike-y, 0%)) scale(1.08);
  }
  65% {
    transform: translate(var(--strike-x, -12%), var(--strike-y, 0%)) scale(1.03);
  }
  85% {transform:translate(calc(var(--strike-x, -12%)*.5),calc(var(--strike-y, 0%)*.5)) scale(1.01);}
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes combatAttackerWeapon {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  26% {
    transform: rotate(var(--wind-angle,-30deg)) translate(-4px, -6px);
  }
  42% {
    transform: rotate(var(--strike-angle,46deg)) translate(0, -8px);
  }
  65% {
    transform: rotate(var(--strike-angle,32deg)) translate(0, -5px);
  }
  85% {transform:rotate(calc(var(--strike-angle,32deg)*.25)) translate(0,-1px);}
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
}

@keyframes combatAttackerShield {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  26% {
    transform: translate(5px, -5px) rotate(12deg);
  }
  42% {
    transform: translate(-4px, -4px) rotate(-14deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes combatDefenderStage {
  0% {
    transform: translate(var(--def-start-x, 0%), var(--def-start-y, 0%)) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  26% {
    transform: translate(0%, 0%) rotate(calc(var(--hit-rot, 18deg) * -0.25)) scale(1.02);
    opacity: 1;
    filter: brightness(1.05);
  }
  40% {
    transform: translate(calc(var(--hit-dx, 18%) * 0.65), calc(var(--hit-dy, -6%) * 0.65))
      rotate(calc(var(--hit-rot, 18deg) * 0.7)) scale(0.98);
    opacity: 1;
    filter: brightness(1.4) drop-shadow(0 0 6px rgba(245, 166, 152, 0.85));
  }
  55% {
    transform: translate(var(--hit-dx, 18%), var(--hit-dy, -6%)) rotate(var(--hit-rot, 18deg)) scale(0.95);
    opacity: 0.96;
    filter: brightness(1.15);
  }
  78% {
    transform: translate(var(--fall-dx, 26%), 26%) rotate(var(--fall-rot, 42deg)) scale(0.82, 0.46);
    opacity: 0.42;
    filter: brightness(0.75);
  }
  100% {
    transform: translate(var(--fall-dx, 28%), 34%) rotate(var(--fall-rot, 48deg)) scale(0.7, 0.3);
    opacity: 0;
    filter: brightness(0.6);
  }
}

@keyframes combatDefenderWeapon {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  26% {
    transform: rotate(-22deg) translate(-4px, -5px);
  }
  48% {
    transform: rotate(38deg) translate(9px, 5px);
  }
  100% {
    transform: rotate(52deg) translate(12px, 10px);
  }
}

@keyframes combatDefenderShield {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  26% {
    transform: translate(-5px, -5px) rotate(-14deg);
  }
  48% {
    transform: translate(-12px, 6px) rotate(-32deg);
  }
  100% {
    transform: translate(-14px, 10px) rotate(-40deg);
  }
}

@keyframes captureFlash {
  0%,
  30% {
    transform: scale(0.45);
    opacity: 0;
  }
  42% {
    transform: scale(0.95);
    opacity: 0.95;
  }
  68% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Promotion Picker Modal */
.promotion-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(10, 24, 29, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.promotion-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}

.promotion-card h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.promotion-subtitle {
  margin: 0 0 12px;
  font-size: 13px;
}

.promotion-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.promotion-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 8px;
  background: #223e45;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 650;
  font-size: 13px;
}

.promotion-choice-btn:hover {
  border-color: var(--gold);
}

.promotion-choice-icon {
  width: 40px;
  height: 40px;
}

.promotion-choice-icon svg {
  width: 100%;
  height: 100%;
}

.promotion-cancel-btn {
  width: 100%;
  min-height: 44px;
}

/* Sidebar Panels (History & FEN) */
.sidebar-panels {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.panel-header h2,
.fen-panel h2 {
  margin: 0;
  font-size: 20px;
}

.ply-counter {
  font-size: 13px;
  color: var(--muted);
}

.move-history-scroll {
  max-height: 240px;
  min-height: 140px;
  overflow-y: auto;
  background: rgba(16, 35, 41, 0.65);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.move-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.history-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px;
}

.history-row {
  display: grid;
  grid-template-columns: 42px 1fr 1fr;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
}

.history-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

.history-num {
  color: var(--muted);
  font-weight: 600;
}

.history-san {
  color: var(--ink);
  font-weight: 600;
}

.history-san.is-latest {
  color: var(--accent);
}

.history-actions,
.fen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-actions button,
.fen-actions button {
  flex: 1 1 120px;
  min-height: 44px;
}

.fen-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.fen-input,
#fen-preset-select {
  width: 100%;
  min-height: 44px;
  font-size: 13px;
}

.fen-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.fen-feedback {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--accent);
}

.fen-feedback.is-error {
  color: var(--danger);
}

kbd {
  background: #233f46;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* Responsive & 390px Mobile Viewport Fit */
.fen-panel summary { cursor:pointer; color:var(--gold); font-weight:700; }
.fen-panel[open] summary { margin-bottom:16px; }
@media (max-width: 920px) {
  .chess-workspace {
    grid-template-columns: 1fr;
  }

  .board-stage {
    max-width: 500px;
  }
}

@media (max-width: 650px) {
  .chess-toolbar {
    padding: 10px;
    gap: 8px;
  }

  .chess-toolbar label {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
  }

  .chess-toolbar select {
    width: 100%;
    min-width: 0;
  }

  .toolbar-buttons {
    width: 100%;
    margin-left: 0;
  }

  .toolbar-buttons button {
    flex: 1 1 auto;
    padding: 9px 10px;
  }

  .board-panel {
    padding: 10px;
  }

  .status-banner {
    padding: 12px;
  }

  .status-banner .status {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .piece-wrap.is-sliding,
  .piece-wrap.is-attacker,
  .piece-wrap.is-defender,
  .piece-wrap.is-attacker .chess-actor .weapon,
  .piece-wrap.is-attacker .chess-actor .shield,
  .piece-wrap.is-defender .chess-actor .weapon,
  .piece-wrap.is-defender .chess-actor .shield,
  .square.is-attacking .chess-actor .weapon,
  .square.is-attacking .chess-actor .shield,
  .square.is-attacking::before,
  .thinking-dot {
    animation: none !important;
  }

  .piece-wrap.is-defender {
    display: none !important;
  }

  .chess-actor .weapon,
  .chess-actor .shield {
    transition: none !important;
  }
}