:root[data-mithrandir-theme="active"] {
  --bg: var(--theme-page);
  --ink: var(--theme-text);
  --muted: var(--theme-text-muted);
  --panel: var(--theme-surface-raised);
  --panel-soft: var(--theme-surface-muted);
  --line: var(--theme-border);
  --accent: var(--theme-accent);
  --accent-strong: var(--theme-accent-strong);
  --accent-contrast: var(--theme-accent-contrast);
  --maize: var(--theme-maize);
  --maize-bright: var(--theme-maize-bright);
  --maize-soft: var(--theme-focus-soft);
  --soft: var(--theme-control);
  --danger: var(--theme-danger);
  --danger-soft: var(--theme-danger-surface);
  --shadow: var(--theme-shadow);
}

:root[data-mithrandir-theme="active"] body {
  background: var(--theme-page);
  color: var(--theme-text);
}

:root[data-mithrandir-theme="active"] .brand-mark {
  color: var(--theme-navy-950);
}

:root[data-mithrandir-theme="active"] .status.error {
  border-color: var(--theme-danger-border);
}

:root[data-mithrandir-theme="active"] .eval-track,
:root[data-mithrandir-theme="active"] .black-fill {
  background: var(--theme-eval-black);
}

:root[data-mithrandir-theme="active"] .white-fill {
  background: var(--theme-eval-white);
}

:root[data-mithrandir-theme="active"] .board {
  box-shadow: var(--theme-shadow-strong);
}

/*
 * The native Chess toggle remains in the standalone application as a fallback.
 * Inside mithrandir-site, the global System / Light / Dark selector is authoritative.
 */
:root[data-mithrandir-theme="active"] .theme-toggle {
  display: none !important;
}

/*
 * Keep the move description readable. The native desktop stylesheet previously
 * compressed this label to 52-60px, which truncated even "Start position".
 * The toolbar may wrap when the center panel is narrow rather than crushing text.
 */
@media (min-width: 1101px) {
  :root[data-mithrandir-theme="active"] .appearance-bar {
    min-height: 63px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  :root[data-mithrandir-theme="active"] .appearance-bar .move-controls {
    flex: 1 1 236px;
    justify-self: auto;
    gap: 6px;
  }

  :root[data-mithrandir-theme="active"] .appearance-bar .position-label {
    min-width: 108px;
    max-width: 168px;
    flex: 1 1 108px;
  }

  :root[data-mithrandir-theme="active"] .appearance-bar .appearance-controls {
    width: auto;
    flex: 1 1 338px;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/*
 * The integrated site uses a labeled Flip Board control rather than an
 * ambiguous icon-only square. The existing aria-label remains authoritative.
 */
:root[data-mithrandir-theme="active"] #flipBoardBtn {
  width: auto;
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

:root[data-mithrandir-theme="active"] #flipBoardBtn::after {
  content: "Flip Board";
}

@media (max-width: 560px) {
  :root[data-mithrandir-theme="active"] #flipBoardBtn {
    min-width: 96px;
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-mithrandir-theme="active"] body,
  :root[data-mithrandir-theme="active"] .panel,
  :root[data-mithrandir-theme="active"] .board-panel,
  :root[data-mithrandir-theme="active"] button,
  :root[data-mithrandir-theme="active"] textarea,
  :root[data-mithrandir-theme="active"] select,
  :root[data-mithrandir-theme="active"] input,
  :root[data-mithrandir-theme="active"] .candidate-row,
  :root[data-mithrandir-theme="active"] .move-button {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }
}