.fen-board,
.md-typeset .fen-board {
  border: 1px solid #ab8350;
  border-radius: .35em;
  padding: 0 .8em;
  margin: 1em 0;
}

.fen-board > :is(summary, .admonition-title),
.md-typeset .fen-board > :is(summary, .admonition-title) {
  position: relative;
  padding: .55em 2.1em .55em 2.6em;
  background: #ab83501a;
  font-weight: 700;
}

.fen-board > summary { cursor: pointer; }
.fen-board > summary::marker { content: ''; }
.fen-board > summary::-webkit-details-marker { display: none; }
.fen-board > summary::after,
.md-typeset .fen-board > summary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: auto;
  right: .85em;
  width: .48em;
  height: .48em;
  border-right: .13em solid currentColor;
  border-bottom: .13em solid currentColor;
  background: none;
  mask: none;
  transform: translateY(-70%) rotate(45deg);
}
.fen-board[open] > summary::after,
.md-typeset .fen-board[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.md-typeset .fen-board > :is(summary, .admonition-title)::before { content: none; }

.fen-board-icon {
  position: absolute;
  top: 50%;
  left: .65em;
  width: 1.55em;
  height: 1.55em;
  transform: translateY(-50%);
}
.fen-board[data-turn="w"] > :first-child > [data-color="b"],
.fen-board[data-turn="b"] > :first-child > [data-color="w"] {
  display: none;
}

.fen-board > .fen-board-figure,
.md-typeset .fen-board > .fen-board-figure {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 1em auto;
}
.fen-board-surface {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  outline: 1px solid #c5a87c;
  touch-action: manipulation;
}
.fen-board-surface > svg {
  display: block;
  width: 100%;
  height: auto;
  background: #e9d7b6;
  color: #866646;
}
.fen-board-figure[data-game="chess"] .fen-board-surface { outline-color: #6a8176; }
.fen-board-figure[data-game="chess"] .fen-board-surface > svg { background: #dce5dc; color: #32453e; }
.fen-board-figure[data-board-art] .fen-board-surface { outline: 0; border-radius: 0; }
.fen-board-figure[data-board-art] .fen-board-surface > svg { background: transparent; }
.fen-board-tile-light { fill: #ede8d6; }
.fen-board-tile-dark { fill: #789486; }
.fen-board-xiang-grid { fill: none; stroke: currentColor; stroke-width: 1.2; }
.fen-board-river, .fen-board-coords {
  fill: currentColor;
  text-anchor: middle;
  font-size: 14px;
}
.fen-board-river, .fen-board-character { font-family: STKaiti, KaiTi, "Noto Serif SC", serif; }
.fen-board-river { font-size: 21px; }
.fen-board-xiang-light { color: #a52c24; }
.fen-board-xiang-dark { color: #28343a; }
.fen-board-disc { fill: #f5dfb7; stroke: #ab8350; }
.fen-board-ring { fill: none; stroke: currentColor; stroke-width: .8; }
.fen-board-character {
  fill: currentColor;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 30px;
  font-weight: bold;
}
.fen-board-chess-light, .fen-board-chess-dark {
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.fen-board-chess-light { fill: #fffdf1; stroke: #253432; }
.fen-board-chess-dark { fill: #233430; stroke: #e2e9d9; }

.fen-board-figure[data-board-style="wood"] .fen-board-surface > svg {
  background: repeating-linear-gradient(98deg, #88572d13 0 1px, transparent 1px 6px), #e8c69b;
  color: #664324;
}
[data-board-style="wood"] .fen-board-tile-light { fill: #f6e3c4c9; }
[data-board-style="wood"] .fen-board-tile-dark { fill: #854b26a6; }
.fen-board-figure[data-board-style="green"] .fen-board-surface > svg {
  background: #cddbbd;
  color: #344b32;
}
[data-board-style="green"] .fen-board-tile-light { fill: #edf0d5; }
[data-board-style="green"] .fen-board-tile-dark { fill: #698c58; }

[data-pieces-style="ivory"] .fen-board-disc { fill: #f6f0e2; stroke: #7f7565; }
[data-pieces-style="ivory"] .fen-board-chess-light { fill: #fff4d9; stroke: #61432e; }
[data-pieces-style="ivory"] .fen-board-chess-dark { fill: #4d3225; stroke: #f2dbb4; }

[data-pieces-style="ink"] .fen-board-disc { fill: #232729; stroke: currentColor; }
[data-pieces-style="ink"] .fen-board-xiang-light { color: #ff9e8c; }
[data-pieces-style="ink"] .fen-board-xiang-dark { color: #faf5e8; }
[data-pieces-style="ink"] .fen-board-chess-light { fill: #f4f5f1; stroke: #171a1d; }
[data-pieces-style="ink"] .fen-board-chess-dark { fill: #171a1d; stroke: #f4f5f1; }

[data-pieces-style="wood"] .fen-board-disc { fill: #d6ab71; stroke: #825531; }
[data-pieces-style="wood"] .fen-board-xiang-light { color: #8b251e; }
[data-pieces-style="wood"] .fen-board-xiang-dark { color: #2f2419; }

.fen-board-square {
  appearance: none;
  position: absolute;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.fen-board-figure[data-game="xiang"] .fen-board-square { border-radius: 50%; }
.fen-board-square.fen-board-draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.fen-board-dragging,
.fen-board-dragging .fen-board-square { cursor: grabbing; }
.fen-board-drag-piece { pointer-events: none; }
.fen-board-arrows,
.fen-board-arrow-draft { pointer-events: none; }
.fen-board-arrow-draft { opacity: .65; }
.fen-board-arrow-ink { color: #00c83d; fill: currentColor; opacity: .84; }
.fen-board-arrow[data-side="b"] .fen-board-arrow-ink { color: #8e3dcc; }
.fen-board-arrow-shaft { stroke: currentColor; stroke-linecap: round; }
.fen-board-arrow-origin { fill: none; stroke: currentColor; }
.fen-board-arrow-badge { fill: #f95d0f; }
.fen-board-arrow text {
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: Arial, sans-serif;
  font-weight: 600;
}
.fen-board-square.fen-board-last { background: #e2a63142; }
.fen-board-figure[data-game="xiang"] .fen-board-square.fen-board-last { background: transparent; }
.fen-board-figure[data-game="xiang"] .fen-board-square.fen-board-last::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  aspect-ratio: 1;
  border: 1.5px solid #fffe;
  border-radius: 50%;
  pointer-events: none;
}
.fen-board-figure[data-game="xiang"] .fen-board-last-from::before {
  width: 42%;
  background: radial-gradient(circle, #fff 0 15%, #fffc 25%, #fff0 48%);
  box-shadow: 0 0 4px #fff9;
}
.fen-board-figure[data-game="xiang"] .fen-board-last-to::before {
  width: 94%;
  box-shadow: 0 0 4px #fffc, inset 0 0 3px #fff9;
}
.fen-board-square[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #036554; }
.fen-board-square:focus-visible { outline: 3px solid #036554; outline-offset: -3px; z-index: 1; }
.fen-board-target::after {
  content: '';
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #096051b8;
  box-shadow: 0 0 0 1.5px #fffdf1;
}
.fen-board-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45em;
  margin: .65em 0 0;
  font-size: .9em;
}
.fen-board-controls[hidden] { display: none; }
.fen-board-controls > button {
  color: inherit;
  font: inherit;
  border: 1px solid #ab8350;
  border-radius: .35em;
  background: #ab83501a;
  padding: .32em .65em;
  cursor: pointer;
}
.fen-board-controls > button:disabled { opacity: .45; cursor: default; }
.fen-board-status { margin: 0 .25em; }
.fen-board-fen-export {
  flex-basis: 100%;
  min-width: 0;
  padding: .32em .65em;
  border: 1px solid #ab8350;
  border-radius: .35em;
  color: inherit;
  font: inherit;
  background: transparent;
}