.board-frame { width: 100%; position: relative; overflow: hidden; border: 1px solid #344139; border-radius: clamp(10px, 1.4vw, 14px); background: #18211b; box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.3); container-type: inline-size; }
.board-coordinate-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; border-radius: clamp(6px, 0.9vw, 9px); }
.chess-board { --legal-marker: rgba(8, 20, 12, 0.84); min-width: 0; grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; overflow: hidden; border-radius: clamp(6px, 0.9vw, 9px); contain: layout paint; isolation: isolate; touch-action: manipulation; }
.chess-board.theme-forest, .appearance-trigger-icon.theme-forest { --board-light: #e7ddc6; --board-dark: #6f8b72; }
.chess-board.theme-walnut, .appearance-trigger-icon.theme-walnut { --board-light: #c48973; --board-dark: #9d5e50; }
.chess-board.theme-graphite, .appearance-trigger-icon.theme-graphite { --board-light: #a1a5a3; --board-dark: #6a706d; }
.square { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0; position: relative; border: 0; border-radius: 0; container-type: inline-size; cursor: pointer; transition: filter 100ms ease, box-shadow 100ms ease; }
.square[aria-disabled="true"] { color: inherit; cursor: default; }
.square.light { background-color: var(--board-light); }
.square.dark { background-color: var(--board-dark); }
.square.last-move::before, .square.selected::before, .square.in-check::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.square.last-move::before { background: rgba(221, 188, 72, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 236, 149, 0.2); }
.square.last-move-from::before { background: rgba(221, 188, 72, 0.22); box-shadow: inset 0 0 0 clamp(2px, 0.45vw, 4px) rgba(255, 230, 133, 0.64); }
.square.last-move-to::before { background: rgba(221, 188, 72, 0.52); box-shadow: inset 0 0 0 1px rgba(255, 241, 174, 0.24); }
.square.selected::before { z-index: 1; background: rgba(238, 198, 65, 0.28); box-shadow: inset 0 0 0 clamp(3px, 0.55vw, 5px) #f1c84f; }
.square.in-check::before { background: radial-gradient(circle, rgba(211, 66, 55, 0.9), rgba(194, 55, 47, 0.18) 68%, transparent 76%); }
.square.legal::after { content: ""; width: 22%; aspect-ratio: 1; position: absolute; z-index: 4; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; background: var(--legal-marker); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); pointer-events: none; }
.square.legal.capture::after { width: 80%; border: clamp(4px, 0.65vw, 7px) solid var(--legal-marker); background: transparent; box-shadow: none; }
.square:focus-visible { z-index: 5; outline: 3px solid var(--focus); outline-offset: -3px; }
.piece { width: 90%; height: 90%; display: block; position: relative; z-index: 3; overflow: hidden; pointer-events: none; shape-rendering: geometricPrecision; transform-origin: 50% 72%; transition: scale 120ms ease, filter 120ms ease; }
.chess-board.piece-shadows .piece.white { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.32)) drop-shadow(0 3px 2px rgba(11, 20, 14, 0.26)); }
.chess-board.piece-shadows .piece.black { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 3px 2px rgba(5, 10, 7, 0.34)); }
.chess-board.piece-flat .piece { filter: none; }
.chess-board.pieces-classic .piece { object-fit: contain; }
.piece.pawn { width: 86%; height: 86%; }
.piece.knight { width: 92%; height: 92%; }
.square.pending .piece { opacity: 0.68; }
.square.move-target { z-index: 6; overflow: visible; }
.piece.moving { animation: piece-move var(--move-duration, 250ms) cubic-bezier(0.3, 0, 0.2, 1) both; }
.move-x-m7 { --move-x: -700cqw; }
.move-x-m6 { --move-x: -600cqw; }
.move-x-m5 { --move-x: -500cqw; }
.move-x-m4 { --move-x: -400cqw; }
.move-x-m3 { --move-x: -300cqw; }
.move-x-m2 { --move-x: -200cqw; }
.move-x-m1 { --move-x: -100cqw; }
.move-x-0 { --move-x: 0cqw; }
.move-x-p1 { --move-x: 100cqw; }
.move-x-p2 { --move-x: 200cqw; }
.move-x-p3 { --move-x: 300cqw; }
.move-x-p4 { --move-x: 400cqw; }
.move-x-p5 { --move-x: 500cqw; }
.move-x-p6 { --move-x: 600cqw; }
.move-x-p7 { --move-x: 700cqw; }
.move-y-m7 { --move-y: -700cqw; }
.move-y-m6 { --move-y: -600cqw; }
.move-y-m5 { --move-y: -500cqw; }
.move-y-m4 { --move-y: -400cqw; }
.move-y-m3 { --move-y: -300cqw; }
.move-y-m2 { --move-y: -200cqw; }
.move-y-m1 { --move-y: -100cqw; }
.move-y-0 { --move-y: 0cqw; }
.move-y-p1 { --move-y: 100cqw; }
.move-y-p2 { --move-y: 200cqw; }
.move-y-p3 { --move-y: 300cqw; }
.move-y-p4 { --move-y: 400cqw; }
.move-y-p5 { --move-y: 500cqw; }
.move-y-p6 { --move-y: 600cqw; }
.move-y-p7 { --move-y: 700cqw; }
.move-distance-1 { --move-duration: 220ms; }
.move-distance-2 { --move-duration: 235ms; }
.move-distance-3 { --move-duration: 250ms; }
.move-distance-4 { --move-duration: 265ms; }
.move-distance-5 { --move-duration: 280ms; }
.move-distance-6 { --move-duration: 295ms; }
.move-distance-7 { --move-duration: 310ms; }
.piece.opponent-move.move-distance-1 { --move-duration: 290ms; }
.piece.opponent-move.move-distance-2 { --move-duration: 320ms; }
.piece.opponent-move.move-distance-3 { --move-duration: 350ms; }
.piece.opponent-move.move-distance-4 { --move-duration: 380ms; }
.piece.opponent-move.move-distance-5 { --move-duration: 408ms; }
.piece.opponent-move.move-distance-6 { --move-duration: 432ms; }
.piece.opponent-move.move-distance-7 { --move-duration: 454ms; }
.board-coordinates { display: none; color: var(--ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.02em; line-height: 1; pointer-events: none; user-select: none; }
@keyframes piece-move {
  0%, 8% { transform: translate3d(var(--move-x), var(--move-y), 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (min-width: 35rem) {
  @container (min-width: 32rem) {
    .board-coordinate-layout { --board-coordinate-rail: 13px; grid-template-columns: var(--board-coordinate-rail) minmax(0, 1fr) var(--board-coordinate-rail); grid-template-rows: var(--board-coordinate-rail) auto var(--board-coordinate-rail); }
    .chess-board { grid-column: 2; grid-row: 2; }
    .board-coordinates { display: grid; }
    .board-rank-coordinates { grid-template-rows: repeat(8, minmax(0, 1fr)); }
    .board-file-coordinates { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .board-file-coordinates-top { grid-column: 2; grid-row: 1; }
    .board-file-coordinates-bottom { grid-column: 2; grid-row: 3; }
    .board-rank-coordinates-left { grid-column: 1; grid-row: 2; }
    .board-rank-coordinates-right { grid-column: 3; grid-row: 2; }
    .board-coordinates span { display: grid; place-items: center; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .piece { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}