.opening-map-document-game-board { position: relative; margin: 14px 24px; }
.opening-map-document-game-board > .opening-map-repertoire-document-diagram { width: 100%; margin: 0; }
.opening-map-document-game-board .opening-repair-piece-grabbing,
.opening-map-document-game-board .opening-repair-piece-grabbing * {
  cursor: url("/static/img/hand-grab.png") 8 8, grabbing !important;
}
.opening-map-document-move-badge {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--map-panel-solid);
  color: var(--map-text);
  font: 700 16px/1 var(--map-ui-font);
  user-select: none;
}
.opening-map-document-move-badge--good { background: #3f7958; color: #fff; }
.opening-map-document-move-badge--bad { background: #9a5547; color: #fff; }
.opening-map-document-move-badge-icon { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.opening-map-document-move-badge[hidden],
.opening-map-document-move-badge > [hidden] { display: none; }
.opening-map-document-game-setup {
  display: grid;
  gap: 12px;
  padding: 16px 24px 24px;
  color: var(--map-text);
  font: 400 15px/1.4 var(--map-ui-font);
}
.opening-map-document-game-setup[hidden],
.opening-map-document-game-setup-overlay[hidden] { display: none; }
.opening-map-document-game-setup h3 { margin: 0; font: 600 15px/1.4 var(--map-ui-font); }
.opening-map-document-game-setup :is(button, input, select, summary) { font: inherit; }
.opening-map-document-game-setup :is(button, input[type='text'], input[type='number'], select) {
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--map-border);
  border-radius: 3px;
  color: var(--map-text);
  background: transparent;
}
.opening-map-document-game-setup button { cursor: pointer; }
.opening-map-document-game-setup button:hover { background: var(--map-control-hover); }
.opening-map-document-game-setup button[aria-pressed='true'] { border-color: var(--map-accent); background: var(--map-control-hover); }
.opening-map-document-game-setup :is(button, input, select):disabled { opacity: 0.45; cursor: default; }
.opening-map-document-game-setup :is(button, input, select, summary):focus-visible {
  outline: var(--document-focus-outline, 2px solid var(--map-accent));
  outline-offset: 2px;
}
.opening-map-document-game-setup-row { display: grid; grid-template-columns: 1fr minmax(80px, 110px); align-items: center; gap: 12px; }
.opening-map-document-game-setup-row > span { color: var(--map-muted); }
.opening-map-document-game-setup-row input[type='number'] { width: 100%; box-sizing: border-box; }
.opening-map-document-game-setup select option { background: var(--map-panel-solid); color: var(--map-text); }
.opening-map-document-game-setup-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.opening-map-document-game-setup button.opening-map-document-game-setup-piece {
  display: grid;
  place-items: center;
  padding: 2px;
  background: var(--book-square-light);
}
.opening-map-document-game-setup .opening-map-document-game-setup-piece:is(:hover, [aria-pressed='true']) {
  outline: 2px solid var(--map-accent);
  outline-offset: -2px;
}
.opening-map-document-game-setup-piece svg { display: block; width: 32px; height: 32px; }
.opening-map-document-game-setup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.opening-map-document-game-setup-actions button { flex: 1; white-space: nowrap; }
.opening-map-document-game-setup-details { display: grid; gap: 12px; }
.opening-map-document-game-setup-details summary { cursor: pointer; color: var(--map-muted); }
.opening-map-document-game-setup-details fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; padding: 0; border: 0; }
.opening-map-document-game-setup-details legend { padding: 0 0 8px; color: var(--map-muted); }
.opening-map-document-game-setup-castling { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.opening-map-document-game-setup-castling input { accent-color: var(--map-accent); width: 16px; height: 16px; margin: 0; }
.opening-map-document-game-setup-fen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.opening-map-document-game-setup-error { margin: 0; color: var(--map-bad); font: inherit; }
.opening-map-document-game-setup-footer { margin-top: 4px; }
.opening-map-document-game-setup .opening-map-document-game-setup-apply { border-color: var(--map-accent); }
.opening-map-document-game-setup-overlay { position: absolute; inset: 1px; z-index: 2; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); touch-action: none; }
.opening-map-document-game-setup-overlay .opening-map-document-game-setup-square { display: block; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: crosshair; touch-action: none; }
.opening-map-document-game-setup-overlay .opening-map-document-game-setup-square:is(:hover, [aria-pressed='true']) { outline: 2px solid var(--map-accent); outline-offset: -2px; }
.opening-map-document-game-setup-overlay .opening-map-document-game-setup-square:focus-visible { outline: var(--document-focus-outline, 3px solid var(--map-accent)); outline-offset: -3px; }
@media (min-width: 821px) {
  /* A selected or hovered square remains marked independently of focus. */
  .opening-map-repertoire-document .opening-map-document-game-setup-square:is(:hover, [aria-pressed='true']):focus-visible {
    outline: 2px solid var(--map-accent);
    outline-offset: -2px;
  }
}
@media print {
  .opening-map-document-game-setup, .opening-map-document-game-setup-overlay,
  .opening-map-document-move-badge { display: none !important; }
}