/* =============================================================================
   board.css — the one board's mechanics (phase 2 spec §7). Square, highlight,
   coordinate and piece-side colours come from the board theme's stylesheet
   (/css/board-themes/<id>.css); the defaults below only keep a board legible
   for the moment before that sheet arrives. A theme may also paint a square's
   or the check's whole background (--sq-light-bg, --sq-dark-bg, --sq-check-bg).
   Piece moods (board studio spec §5.3) move only the .scb-art holder; world
   sheets animate the svg inside it. Motion off — the app's setting
   (data-animation='off') or the OS — stops every piece animation outright.
   ============================================================================= */
@layer board {
  .chess-board {
    --sq-light: var(--surface-2);
    --sq-dark: var(--line-strong);
    --sq-coord-light: var(--text);
    --sq-coord-dark: var(--surface);
    --sq-select: var(--primary-soft);
    --sq-lastmove: var(--primary-soft);
    --sq-hover: var(--primary-soft);
    --sq-check: var(--bad);
    --sq-dot: var(--scrim);
    --sq-hint: var(--primary-soft);
    --sq-error: var(--bad-soft);
    --sq-good: var(--good-soft);
    --sq-mark: var(--primary-soft);
    --sq-premove: var(--primary-soft);
    --cb-anim: 150ms;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-xs);
    box-shadow: var(--shadow-1);
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .chess-board__grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(8, 1fr); }
  .chess-board__row { display: grid; grid-template-columns: repeat(8, 1fr); min-height: 0; }
  .chess-board__square { position: relative; min-width: 0; touch-action: manipulation; }
  .chess-board__square.is-movable { touch-action: none; }
  .chess-board__square[data-shade='light'] { background: var(--sq-light-bg, var(--sq-light)); }
  .chess-board__square[data-shade='dark'] { background: var(--sq-dark-bg, var(--sq-dark)); }
  .chess-board__square:focus-visible { z-index: 1; outline: 3px solid var(--focus); outline-offset: -3px; }

  /* Legal moves: a dot for a quiet move, a ring for a capture. */
  .chess-board__square::before { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .chess-board__square.is-target::before { opacity: 1; background: radial-gradient(circle, var(--sq-dot) 0 17%, transparent 18%); }
  .chess-board__square.is-target.is-capture::before { background: radial-gradient(circle, transparent 0 62%, var(--sq-dot) 63% 100%); }

  /* Overlays; later rules win: last move < premove < hint/mark/good < selected < hover < error/bad < check. */
  .chess-board__square::after { content: ''; position: absolute; inset: 0; background: var(--cb-overlay, transparent); pointer-events: none; }
  .chess-board__square.is-last-move { --cb-overlay: var(--sq-lastmove); }
  .chess-board__square.is-premove { --cb-overlay: var(--sq-premove); }
  .chess-board__square.is-hl-hint { --cb-overlay: var(--sq-hint); }
  .chess-board__square.is-hl-mark { --cb-overlay: var(--sq-mark); }
  .chess-board__square.is-hl-good { --cb-overlay: var(--sq-good); }
  .chess-board__square.is-selected { --cb-overlay: var(--sq-select); }
  .chess-board__square.is-hover { --cb-overlay: var(--sq-hover); }
  .chess-board__square.is-hl-error, .chess-board__square.is-hl-bad { --cb-overlay: var(--sq-error); }
  .chess-board__square.is-check::after { background: var(--sq-check-bg, radial-gradient(circle, var(--sq-check) 0 22%, transparent 72%)); }

  .chess-board__coord {
    position: absolute;
    z-index: 2;
    font-family: var(--font);
    font-size: clamp(0.5rem, 2.6cqw, 0.8rem);
    font-weight: var(--fw-heavy);
    line-height: 1;
    pointer-events: none;
  }
  .chess-board__coord::before { content: attr(data-coord); }
  .chess-board__coord[data-coord=''] { display: none; }
  .chess-board__coord--rank { top: 4%; left: 5%; }
  .chess-board__coord--file { right: 5%; bottom: 4%; }
  .chess-board__square[data-shade='light'] .chess-board__coord { color: var(--sq-coord-light); }
  .chess-board__square[data-shade='dark'] .chess-board__coord { color: var(--sq-coord-dark); }

  /* Pieces: input is hit-tested on the grid, so pieces never take a pointer. */
  .chess-board__pieces { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .chess-board__piece {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 12.5%;
    will-change: transform;
    transition: transform var(--cb-anim) cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .chess-board__piece[data-color='w'] { --p-main: var(--surface); --p-edge: var(--text); --p-accent: var(--gold); }
  .chess-board__piece[data-color='b'] { --p-main: var(--text); --p-edge: var(--bg); --p-accent: var(--electric); }
  .chess-board__piece.is-noanim, .chess-board__piece.is-dragging { transition: none !important; animation: none !important; }
  .chess-board__piece.is-dragging { z-index: 5; cursor: grabbing; filter: drop-shadow(0 6px 10px var(--shadow-drag)); }
  .chess-board__piece.is-captured { opacity: 0; transition: opacity var(--cb-anim) linear; }
  .chess-board__piece-img, .chess-board__piece-glyph { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
  .chess-board__piece-glyph text { font-family: var(--font); fill: var(--p-main); stroke: var(--p-edge); stroke-width: 2.5; paint-order: stroke fill; }

  /* Piece moods (data-mood on the node, set by board.js): small motions of the art holder, played once or a few
     times, so a held face stops moving. */
  .chess-board__piece[data-mood] .scb-art { transform-origin: 50% 88%; }
  .chess-board__piece[data-mood='laugh'] .scb-art { animation: cb-mood-laugh 420ms ease-in-out 3; }
  .chess-board__piece[data-mood='proud'] .scb-art { animation: cb-mood-proud 1200ms ease-out 1; }
  .chess-board__piece[data-mood='cool'] .scb-art { animation: cb-mood-cool 1300ms ease-in-out 1; }
  .chess-board__piece[data-mood='shock'] .scb-art { animation: cb-mood-shock 380ms ease-out 2; }
  .chess-board__piece[data-mood='worried'] .scb-art { animation: cb-mood-worried 240ms linear 5; }
  .chess-board__piece[data-mood='cry'] .scb-art { animation: cb-mood-cry 1200ms ease-in-out 1; }
  .chess-board__piece[data-mood='dizzy'] .scb-art { animation: cb-mood-dizzy 700ms ease-in-out 2; }
  @keyframes cb-mood-laugh {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-7%); }
    70% { transform: translateY(-2%); }
  }
  @keyframes cb-mood-proud {
    0%, 100% { transform: translateY(0) scale(1); }
    35%, 70% { transform: translateY(-5%) scale(1.05); }
  }
  @keyframes cb-mood-cool {
    0%, 100% { transform: rotate(0deg); }
    30%, 75% { transform: rotate(-6deg); }
  }
  @keyframes cb-mood-shock {
    0%, 100% { transform: translateY(0) scale(1); }
    20% { transform: translateY(-4%) scale(1.06); }
    45% { transform: translateY(1%) scale(0.98); }
  }
  @keyframes cb-mood-worried {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2%); }
    75% { transform: translateX(2%); }
  }
  @keyframes cb-mood-cry {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30%, 75% { transform: translateY(4%) scaleY(0.96); }
  }
  @keyframes cb-mood-dizzy {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg); }
  }
  /* The captured piece cries on its way out: it keeps its opacity, droops, then fades in its last third (board.js
     removes it after 900 ms). The droop uses translate, which adds to the node's own placing transform. */
  .chess-board__piece.is-captured[data-mood='cry'] { opacity: 1; transition: none; animation: cb-mood-cry-out 900ms ease-in forwards; }
  @keyframes cb-mood-cry-out {
    0% { opacity: 1; translate: 0 0; }
    66% { opacity: 1; translate: 0 4%; }
    100% { opacity: 0; translate: 0 8%; }
  }

  .chess-board[data-interactive='true'] .chess-board__square { cursor: pointer; }
  .chess-board.is-busy { cursor: progress; }
  .chess-board.is-busy .chess-board__grid { pointer-events: none; }
  .chess-board__square.is-shake, .chess-board__piece.is-shake { animation: board-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
  @keyframes board-shake {
    10%, 90% { margin-left: -2px; }
    20%, 80% { margin-left: 3px; }
    30%, 50%, 70% { margin-left: -5px; }
    40%, 60% { margin-left: 5px; }
  }

  /* Promotion: a column of choices dropped over the promotion file. */
  .chess-board__promotion { position: absolute; inset: 0; z-index: 10; }
  .chess-board__promotion-scrim { position: absolute; inset: 0; border: 0; background: var(--scrim); cursor: pointer; }
  .chess-board__promotion-list {
    position: absolute;
    left: calc(var(--cb-col, 0) * 12.5%);
    display: flex;
    flex-direction: column;
    width: 12.5%;
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }
  .chess-board__promotion[data-dir='down'] .chess-board__promotion-list { top: 0; }
  .chess-board__promotion[data-dir='up'] .chess-board__promotion-list { bottom: 0; flex-direction: column-reverse; }
  .chess-board__promotion-option { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--surface); }
  .chess-board__promotion-option:hover, .chess-board__promotion-option:focus-visible { background: var(--primary-soft); }
  .chess-board__promotion-option .chess-board__piece { position: absolute; inset: 0; width: 100%; height: 100%; transition: none; }

  /* Effects (themes with fx) and the frame overlay: geometry here, looks in the theme. */
  .chess-board__fx { position: absolute; inset: 0; z-index: 6; overflow: visible; pointer-events: none; }
  .scb-fx { position: absolute; left: calc(var(--col, 0) * 12.5%); top: calc(var(--row, 0) * 12.5%); width: 12.5%; height: 12.5%; pointer-events: none; }
  .scb-fx__p { position: absolute; left: 50%; top: 50%; display: block; width: 12%; height: 12%; margin: -6% 0 0 -6%; opacity: 0; will-change: transform, opacity; }
  .scb__frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .scb-art { display: block; width: 100%; height: 100%; }
  .scb-art svg { display: block; width: 100%; height: 100%; }

  /* Arrows and circles. */
  .chess-board__shapes { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .cb-shape--green { stroke: var(--shape-green); fill: var(--shape-green); }
  .cb-shape--red { stroke: var(--shape-red); fill: var(--shape-red); }
  .cb-shape--blue { stroke: var(--shape-blue); fill: var(--shape-blue); }
  .cb-shape--yellow { stroke: var(--shape-yellow); fill: var(--shape-yellow); }
  circle.cb-shape { fill: none; }
  .cb-shape--content { opacity: 0.85; }

  .chess-board__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* A board's container: pages size it with --board-max (spec §7.3). */
  .board-host { width: min(100%, var(--board-max, 720px)); margin-inline: auto; }

  /* Motion off — none, not a short duration: a world's loop or a mood would otherwise end on its last frame. */
  .chess-board[data-animation='off'] .chess-board__piece,
  .chess-board[data-animation='off'] .chess-board__piece *,
  .chess-board[data-animation='off'] .chess-board__piece::before,
  .chess-board[data-animation='off'] .chess-board__piece::after,
  .chess-board[data-animation='off'] .chess-board__piece *::before,
  .chess-board[data-animation='off'] .chess-board__piece *::after,
  .chess-board[data-animation='off'] .chess-board__square.is-shake { animation: none !important; transition: none !important; }
  .chess-board[data-animation='off'] .chess-board__piece.is-captured { opacity: 0 !important; }

  @media (prefers-reduced-motion: reduce) {
    .chess-board__square::before, .chess-board__square::after { transition: none !important; }
    .chess-board__piece,
    .chess-board__piece *,
    .chess-board__piece::before,
    .chess-board__piece::after,
    .chess-board__piece *::before,
    .chess-board__piece *::after,
    .chess-board__square.is-shake { animation: none !important; transition: none !important; }
    .chess-board__piece.is-captured { opacity: 0 !important; }
  }
}