:root {
  font-family:'Segoe UI',Arial,sans-serif;
  color:#f0efed;
  background:#302e2b;
  color-scheme:dark;
  font-synthesis:none;
  --ink:#f0efed;
  --muted:#aaa8a3;
  --line:#ffffff0d;
  --accent:#81b64c;
  --green:#95c95c;
  --panel:#262522;
  --sidebar:172px;
  --board-size:min(650px,calc(100dvh - 238px));
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
}

button,select,textarea {
  font:inherit;
}

button,a,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
  border:0;
  background:none;
  color:inherit;
}

button:disabled {
  opacity:.4;
  cursor:default;
}

button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #b2d781;
  outline-offset:3px;
}

a {
  color:inherit;
  text-decoration:none;
}

[hidden] {
  display:none!important;
}

summary {
  cursor:pointer;
}

::-webkit-scrollbar {
  width:6px;
  height:6px;
}

::-webkit-scrollbar-thumb {
  background:#55534d;
  border-radius:5px;
}

::selection {
  background:#81b64c66;
}

/* Compact navigation, with original Cheese AI branding. */
.header {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  background:#262421;
  padding:25px 12px 18px;
  display:flex;
  flex-direction:column;
  z-index:10;
}

.brand {
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 3px 30px;
  font-size:24px;
  font-weight:800;
  letter-spacing:-1.1px;
}

.brand img {
  flex:0 0 38px;
}

.brand-ai {
  color:#a8cc78;
  margin-left:3px;
}

.navigation,.mode-switch {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.navigation button,.navigation a {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:48px;
  padding:11px 12px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  color:#bcbab5;
  text-align:left;
}

.navigation button:hover,.navigation a:hover {
  color:#fff;
  background:#ffffff07;
}

.navigation button.active {
  color:#fff;
  background:#81b64c1c;
  box-shadow:inset 3px 0 #81b64c;
}

.nav-icon {
  display:grid;
  place-items:center;
  width:22px;
  font-size:25px;
  color:#91b965;
  line-height:1;
}

.external {
  margin-left:auto;
  color:#77766e;
  font-size:13px;
}

.sidebar-bottom {
  margin-top:auto;
}

.sidebar-note {
  border-top:1px solid var(--line);
  padding:22px 12px;
}

.local-tag {
  font-size:8px;
  letter-spacing:1.1px;
  color:#85847c;
  font-weight:700;
}

.sidebar-note p {
  font-size:22px;
  line-height:1.35;
  color:#d1cfc8;
  font-weight:700;
  margin:12px 0;
}

.sidebar-note>span:last-child {
  font-size:10px;
  color:#84837b;
}

.engine-pill {
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:10px 12px 0;
  font-size:9px;
  color:#8e9484;
  line-height:1.7;
}

.status-dot {
  width:6px;
  height:6px;
  flex-shrink:0;
  background:#81b64c;
  border-radius:50%;
  margin-top:4px;
}

.status-dot.loading {
  background:#e6bd58;
  animation:pulse 1.4s infinite;
}

.status-dot.error {
  background:#fa776c;
}

main {
  margin-left:var(--sidebar);
  padding:0 28px;
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:19px 0 15px;
  max-width:calc(var(--board-size) + 381px);
  margin:auto;
}

h1 {
  font-size:20px;
  letter-spacing:-.4px;
  margin:0 0 4px;
  line-height:1.2;
}

.intro-copy {
  font-size:10px;
  margin:0;
  color:#a09d97;
}

.capture-button {
  display:flex;
  align-items:center;
  gap:8px;
  color:#aaa79f;
  background:#ffffff06;
  border:1px solid #ffffff0b;
  border-radius:5px;
  padding:8px 11px;
  font-size:11px;
}

.capture-button:hover,.capture-button[aria-pressed='true'] {
  color:#d6e9b9;
  background:#81b64c16;
  border-color:#81b64c50;
}

.capture-button span {
  font-size:17px;
}

.workspace {
  display:grid;
  grid-template-columns:minmax(0,var(--board-size)) minmax(0,355px);
  gap:26px;
  align-items:start;
  justify-content:center;
}

.board-section {
  min-width:0;
}

.player-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 0 10px 22px;
  min-height:50px;
}

.player-avatar {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:#45423d;
  flex-shrink:0;
}

.engine-avatar {
  background:#65512e;
}

.player-avatar>img,.player-avatar>svg {
  width:32px;
  height:32px;
}

.player-info {
  min-width:0;
}

.player-info strong {
  display:block;
  font-size:13px;
  font-weight:700;
}

.player-info>span {
  display:block;
  font-size:10px;
  color:#aaa79f;
  margin-top:3px;
}

.captured-pieces {
  display:flex;
  align-items:center;
  height:14px;
  margin-top:2px;
}

.captured-pieces:empty {
  display:none;
}

.captured-pieces .piece {
  width:17px;
  height:17px;
  margin-right:-5px;
  filter:none;
  opacity:.8;
}

.material-score {
  font-size:10px;
  margin-left:10px;
  color:#c9c7bf;
}

.player-badge {
  margin-left:auto;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  color:#c1bfb8;
  background:#ffffff08;
  padding:7px 10px;
  border-radius:4px;
}

.board-frame {
  display:flex;
  gap:8px;
  align-items:stretch;
}

.board-wrap {
  width:100%;
  min-width:0;
  position:relative;
  border-radius:3px;
  box-shadow:0 5px 12px #0002;
  overflow:hidden;
}

.board {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  aspect-ratio:1;
}

.square {
  padding:0;
  position:relative;
  display:grid;
  place-items:center;
  background:#eeeed2;
  aspect-ratio:1;
  min-width:0;
}

.square.dark {
  background:#769656;
}

.square.selected,.square.last-move {
  background:#f6f669;
}

.square.dark.selected,.square.dark.last-move {
  background:#bbcb44;
}

.square.in-check {
  background:radial-gradient(ellipse at center,#ee5555 0%,#e06352 35%,#d48764 100%);
}

.square:focus-visible {
  z-index:3;
  outline-offset:-4px;
}

.piece {
  width:88%;
  height:88%;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 2px 1px #0004);
  pointer-events:none;
}

.coordinate {
  position:absolute;
  font-size:11px;
  font-weight:700;
  z-index:2;
  line-height:1;
  color:#769656;
  pointer-events:none;
}

.dark .coordinate {
  color:#eeeed2;
}

.rank-label {
  top:5px;
  left:5px;
}

.file-label {
  bottom:4px;
  right:5px;
}

.legal-dot {
  position:absolute;
  width:27%;
  aspect-ratio:1;
  background:#0002;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}

.legal-capture {
  position:absolute;
  inset:3px;
  border:5px solid #0002;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
}

.arrows {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
}

#best-arrow {
  stroke:#f8a83a;
  stroke-width:17;
  stroke-linecap:round;
  opacity:.8;
  display:none;
}

.eval-rail {
  width:14px;
  flex:0 0 14px;
  border-radius:2px;
  background:#403d39;
  position:relative;
  overflow:hidden;
}

.eval-rail #eval-white {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  background:#f0efec;
  transition:height .4s;
}

.eval-rail span {
  font-size:8px;
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  font-weight:700;
  color:#555;
  writing-mode:vertical-rl;
}

.bottom-player {
  padding-top:11px;
  padding-bottom:9px;
  min-height:58px;
}

.board-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0 10px 22px;
}

.board-toolbar>div {
  display:flex;
  gap:20px;
}

.icon-button {
  font-size:20px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#aaa69e;
  padding:2px 0;
}

.icon-button:hover {
  color:#f3f1ea;
}

.icon-button span {
  font-size:11px;
}

.primary-button {
  background:#81b64c;
  color:#fff;
  border-radius:5px;
  font-size:12px;
  font-weight:700;
  padding:10px 17px;
  box-shadow:0 3px 0 #537a30;
  text-shadow:0 1px 1px #0003;
}

.primary-button:hover {
  background:#91c65b;
}

.primary-button span {
  padding-left:13px;
}

.text-button {
  font-size:10px;
  padding:3px 0;
  color:#aaa79f;
  white-space:nowrap;
}

.text-button:hover {
  color:#b5dc87;
}

.text-button span {
  padding-left:7px;
}

.game-message {
  display:flex;
  align-items:center;
  gap:10px;
  background:#21201d;
  padding:12px 18px;
  min-height:54px;
  border-bottom:1px solid var(--line);
}

.turn-dot {
  width:7px;
  height:7px;
  background:#97c765;
  border-radius:50%;
  flex-shrink:0;
}

.turn-dot.busy {
  animation:pulse 1s infinite;
}

.game-message strong {
  display:block;
  font-size:12px;
  font-weight:600;
}

.game-message p {
  margin:4px 0 0;
  color:#aaa69e;
  font-size:10px;
  line-height:1.5;
}

.small-button {
  background:#81b64c;
  padding:8px 10px;
  font-size:10px;
  border-radius:4px;
  margin-left:auto;
  flex-shrink:0;
}

.preview-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  background:#4b5936;
  padding:10px 12px;
  border-radius:4px;
  font-size:10px;
  margin:0 0 7px 22px;
}

.preview-bar>div {
  display:flex;
  gap:5px;
  align-items:center;
}

.preview-bar button {
  font-size:10px;
  background:#ffffff15;
  border-radius:4px;
  padding:6px 8px;
}

/* The game panel scrolls independently; every engine tool is still available. */
.analysis-panel {
  background:var(--panel);
  border-radius:7px;
  overflow:auto;
  max-height:max(540px,calc(100dvh - 94px));
  scrollbar-gutter:stable;
}

.panel-heading {
  display:flex;
  gap:10px;
  align-items:center;
  background:#21201d;
  padding:14px 18px;
}

.panel-heading h2 {
  font-size:16px;
  margin:0 0 4px;
  letter-spacing:-.3px;
}

.panel-heading>div>span {
  font-size:10px;
  color:#96938b;
}

.offline-badge {
  margin-left:auto;
  font-size:9px;
  color:#a8c983;
  display:flex;
  align-items:center;
  gap:4px;
}

.offline-badge i {
  width:5px;
  height:5px;
  background:#81b64c;
  border-radius:50%;
}

.analysis-panel>section {
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}

.analysis-panel>section:last-child {
  border:0;
}

.play-settings {
  border-bottom:1px solid var(--line);
}

.play-settings>summary {
  display:flex;
  align-items:center;
  gap:7px;
  list-style:none;
  font-size:11px;
  font-weight:600;
  padding:13px 18px;
  color:#c3c0b8;
}

.play-settings>summary::before {
  content:'›';
  font-size:18px;
  line-height:.6;
  color:#8b8981;
}

.play-settings[open]>summary::before {
  transform:rotate(90deg);
}

summary::-webkit-details-marker {
  display:none;
}

.play-settings>summary span {
  margin-left:auto;
  font-size:9px;
  font-weight:400;
  color:#939889;
}

.settings-body {
  padding:0 18px 17px;
}

.settings-body>.settings-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
}

.settings-body>.settings-strip>label:last-child {
  grid-column:1/-1;
}

.settings-strip {
  display:flex;
  gap:12px;
  margin-top:12px;
}

.settings-strip label {
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:6px;
  font-size:10px;
  color:#aaa79f;
}

.settings-strip select {
  width:100%;
  background:#373530;
  border:1px solid #ffffff0c;
  border-radius:4px;
  padding:8px 6px;
  color:#e3e1dc;
  font-size:11px;
  cursor:pointer;
}

.opponent-controls p {
  font-size:10px;
  line-height:1.6;
  color:#929087;
  margin:10px 0 0;
}

.ponder-control {
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  padding-top:14px;
  font-size:9px;
}

.ponder-control>span {
  color:#86857d;
  padding-left:18px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.section-heading .eyebrow {
  margin:0;
}

.section-heading h2 {
  font-size:12px;
  margin:0;
  font-weight:700;
}

.search-status {
  font-size:9px;
  color:#a0b68b;
  display:flex;
  align-items:center;
  gap:5px;
}

.search-status.busy::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:#81b64c;
  animation:pulse 1s infinite;
}

.evaluation-row {
  display:flex;
  align-items:center;
  gap:17px;
  margin:13px 0;
}

.evaluation-row>strong {
  font-size:32px;
  line-height:1;
  min-width:77px;
  font-weight:750;
  letter-spacing:-1px;
  color:#f2f0ea;
}

.evaluation-row h2 {
  font-size:11px;
  font-weight:600;
  margin:0 0 5px;
}

.evaluation-row p {
  font-size:9px;
  color:#99968e;
  margin:0;
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  background:#ffffff04;
  border-radius:4px;
  padding:9px 12px;
}

.stats>div {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.stats span {
  font-size:14px;
  color:#bbd49d;
  font-weight:600;
}

.stats label {
  font-size:8px;
  letter-spacing:.6px;
  color:#8e8b83;
}

.section-caption {
  font-size:10px;
  line-height:1.6;
  color:#959289;
  margin:7px 0 10px;
}

.candidate-lines {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:210px;
  overflow-y:auto;
}

.candidate {
  border:1px solid #ffffff06;
  background:#ffffff03;
  border-radius:4px;
  padding:8px 10px;
  text-align:left;
  width:100%;
}

.candidate:hover {
  background:#ffffff07;
  border-color:#81b64c70;
}

.candidate.active {
  border-color:#81b64c;
  background:#81b64c12;
}

.candidate.best {
  border-left:3px solid #81b64c;
  background:#81b64c0a;
}

.candidate-top {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:6px;
}

.candidate-rank {
  font-size:9px;
  color:#8f8c83;
  width:11px;
}

.candidate-move {
  font-weight:700;
  font-size:13px;
}

.candidate-label {
  font-size:7px;
  letter-spacing:.3px;
  color:#a4cb7a;
  background:#81b64c1c;
  padding:3px 4px;
  border-radius:3px;
}

.candidate-depth {
  font-size:8px;
  color:#929087;
  margin-left:auto;
}

.candidate-score {
  font-size:11px;
  font-weight:700;
  color:#b0d387;
  min-width:33px;
  text-align:right;
}

.pv-moves {
  font-size:10px;
  line-height:1.6;
  color:#b0ada4;
  display:flex;
  flex-wrap:wrap;
  gap:1px 5px;
}

.pv-moves>span:first-child {
  color:#dfddd6;
}

.pv-number {
  font-size:9px;
  color:#7f7d75;
}

.search-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:9px;
  font-size:8px;
  color:#85827a;
  line-height:1.5;
}

.search-footer button {
  font-size:10px;
  color:#bdd99d;
  border:1px solid #81b64c55;
  border-radius:3px;
  padding:3px 8px;
}

.empty-state {
  padding:17px 10px;
  text-align:center;
  color:#a4a198;
  font-size:11px;
  line-height:1.8;
  border:1px dashed #ffffff12;
  border-radius:4px;
}

.history {
  max-height:105px;
  overflow-y:auto;
  font-size:12px;
  margin-top:10px;
}

.history-row {
  display:grid;
  grid-template-columns:26px 1fr 1fr;
  padding:6px 8px;
  gap:10px;
}

.history-row:nth-child(odd) {
  background:#ffffff05;
  border-radius:3px;
}

.history-row>span:first-child {
  color:#8c8980;
}

.history-actions {
  display:flex;
  gap:13px;
}

.muted {
  font-size:10px;
  color:#9c998f;
  line-height:1.7;
}

.voice-control {
  font-size:9px;
  display:flex;
  align-items:center;
  gap:4px;
  color:#aba99f;
  cursor:pointer;
}

.voice-control input {
  accent-color:#81b64c;
  margin:0 3px 0 0;
}

.coach-entry {
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:flex-start;
}

.quality-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  background:#667755;
  color:#fff;
}

.quality-icon.brilliant,.move-badge.brilliant {
  color:#fff;
  background:#26c2a3;
}

.quality-icon.blunder,.move-badge.blunder {
  color:#fff;
  background:#e75a52;
}

.quality-icon.mistake,.move-badge.mistake {
  color:#fff;
  background:#e58f2a;
}

.quality-icon.inaccuracy,.move-badge.inaccuracy {
  color:#fff;
  background:#c4a638;
}

.quality-icon.best,.move-badge.best {
  color:#fff;
  background:#81b64c;
}

.quality-icon.good,.move-badge.good {
  color:#fff;
  background:#739953;
}

.coach-entry strong {
  display:block;
  font-size:11px;
  font-weight:600;
  margin-bottom:4px;
}

.coach-entry p {
  font-size:10px;
  line-height:1.6;
  color:#aaa79f;
  margin:0;
}

.coach-entry .response-detail {
  margin-top:5px;
  color:#a0be82;
  font-size:9px;
}

.quality-legend {
  display:flex;
  flex-wrap:wrap;
  gap:7px 10px;
  border-top:1px solid var(--line);
  padding-top:10px;
  margin-top:13px;
  font-size:9px;
  color:#aaa89e;
}

.quality-legend .best,.quality-legend .good {
  color:#a7cd7f;
}

.quality-legend .brilliant,.history-quality.brilliant {
  color:#35d6b6;
}

.quality-legend .blunder,.history-quality.blunder,.candidate-quality.blunder {
  color:#f0786b;
}

.quality-legend .mistake,.history-quality.mistake,.candidate-quality.mistake {
  color:#efaa59;
}

.quality-legend .inaccuracy,.history-quality.inaccuracy,.candidate-quality.inaccuracy {
  color:#e3c75b;
}

.move-badge {
  position:absolute;
  top:-1px;
  right:-1px;
  width:25px;
  height:25px;
  font-size:11px;
  border:2px solid #fff;
  display:grid;
  place-items:center;
  border-radius:50%;
  z-index:4;
  color:#fff;
  background:#7d936c;
  box-shadow:0 2px 4px #0002;
}

.history-quality {
  font-size:10px;
  font-weight:700;
  margin-left:5px;
}

.history-quality.best,.history-quality.good,.candidate-quality.best,.candidate-quality.good {
  color:#9aca68;
}

.candidate-quality {
  font-size:11px;
  font-weight:700;
}

.reviewing {
  font-size:10px;
  color:#8d8a7e;
}

.radar-symbol {
  color:#94b776;
  font-size:18px;
  line-height:1;
}

.radar-section summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:600;
}

.tactical-facts {
  display:flex;
  gap:8px;
  margin:14px 0;
}

.tactical-facts span {
  padding:5px 7px;
  border-radius:4px;
  background:#ffffff05;
  font-size:9px;
  color:#a9b79b;
}

.tactical-alerts {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tactical-alert {
  padding-left:10px;
  border-left:2px solid #74835f;
}

.tactical-alert.accent {
  border-color:#81b64c;
}

.tactical-alert.warning {
  border-color:#e3bd68;
}

.tactical-alert.danger {
  border-color:#e68566;
}

.tactical-alert strong {
  font-size:10px;
  display:block;
  margin-bottom:4px;
}

.tactical-alert p {
  font-size:10px;
  line-height:1.6;
  color:#a9a69b;
  margin:0;
}

.prepared-lines {
  display:grid;
  gap:7px;
  font-size:11px;
}

.prepared-lines>span {
  padding:9px 10px;
  background:#ffffff04;
  border-radius:4px;
  color:#b4bbaa;
}

.prepared-lines strong {
  color:#c0dba3;
}

.prepared-lines small {
  display:block;
  margin-top:4px;
  color:#96998e;
}

.position-tools {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  border-top:1px solid var(--line);
  margin:28px auto 0;
  padding:28px 0;
  scroll-margin-top:25px;
  max-width:calc(var(--board-size) + 381px);
}

.eyebrow {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.4px;
  margin:0 0 10px;
  color:#a0bd80;
}

.position-tools h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:0 0 10px;
}

.position-tools p:not(.eyebrow) {
  font-size:11px;
  color:#a3a095;
  line-height:1.8;
}

.presets {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.presets button {
  font-size:10px;
  border:1px solid #ffffff0d;
  padding:9px 12px;
  border-radius:4px;
  background:#262522;
}

.presets button span {
  padding-left:9px;
  color:#a4c680;
}

.presets button:hover {
  background:#3e4435;
}

#position-form>label {
  font-size:10px;
  color:#b3afa3;
  display:block;
  margin-bottom:8px;
}

textarea {
  width:100%;
  background:#262522;
  border:1px solid #ffffff0d;
  border-radius:5px;
  padding:12px;
  font-family:Consolas,monospace;
  font-size:11px;
  color:#d1d5c8;
  resize:vertical;
  line-height:1.7;
}

textarea::placeholder {
  color:#8d8a7d;
  font-family:'Segoe UI',sans-serif;
  font-size:11px;
}

#position-form>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  gap:10px;
}

.input-error {
  color:#f09b7e!important;
  font-size:11px;
  min-height:18px;
  margin:5px 0 0;
}

footer {
  border-top:1px solid var(--line);
  padding:20px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#88867a;
  font-size:9px;
  max-width:calc(var(--board-size) + 381px);
  margin:auto;
}

footer strong {
  font-size:12px;
  color:#a2b78b;
}

footer p {
  max-width:330px;
  line-height:1.7;
  margin:0;
}

footer a {
  font-size:9px;
  white-space:nowrap;
}

dialog {
  border:1px solid #ffffff18;
  border-radius:9px;
  padding:25px;
  background:#302e2b;
  box-shadow:0 25px 100px #0006;
  color:#f2f0e9;
}

dialog::backdrop {
  background:#0009;
}

dialog h2 {
  font-size:23px;
  margin:0 0 20px;
}

#promotion-options {
  display:flex;
  gap:8px;
  margin-bottom:16px;
}

#promotion-options button {
  width:64px;
  height:64px;
  background:#769656;
  border-radius:5px;
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:#454d38;
  color:#f1f7e8;
  padding:12px 20px;
  border-radius:5px;
  font-size:12px;
  box-shadow:0 5px 30px #0003;
  z-index:20;
  max-width:90vw;
}

/* Capture view only changes presentation: moves and analysis remain live. */
.capture-view .play-settings,.capture-view .prepared-section,.capture-view .radar-section,.capture-view .position-tools,.capture-view footer {
  display:none;
}

.capture-view .analysis-panel {
  scrollbar-gutter:auto;
}

.capture-view .sidebar-note {
  border-top-color:transparent;
}

.capture-view .candidate-lines {
  max-height:142px;
}

.capture-view .history {
  max-height:78px;
}

.capture-view .coach-entry:not(:last-child) {
  display:none;
}

.capture-view .section-caption {
  display:none;
}

.capture-view .evaluation-row {
  margin:10px 0;
}

.capture-view .analysis-panel>section {
  padding-top:12px;
  padding-bottom:12px;
}

.capture-view .panel-heading {
  padding-top:10px;
  padding-bottom:10px;
}

.capture-view .game-message {
  padding-top:8px;
  padding-bottom:8px;
  min-height:46px;
}

.capture-view .candidate-lines {
  max-height:none;
  overflow:visible;
}

.capture-view .candidate:nth-child(n+3) {
  display:none;
}

.capture-view .pv-moves {
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
}

.capture-view .pv-moves>span {
  flex-shrink:0;
}

.capture-view .analysis-panel>section {
  padding-top:10px;
  padding-bottom:10px;
}

.capture-view .stats {
  padding-top:7px;
  padding-bottom:7px;
}

.capture-view .panel-heading>div>span,.capture-view .search-footer {
  display:none;
}

.capture-view .history {
  max-height:51px;
}

.capture-view .coach-entry p:not(.response-detail) {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.capture-view .quality-legend {
  padding-top:8px;
  margin-top:8px;
}

.capture-view .game-message {
  min-height:34px;
}

.capture-view .game-message p {
  display:none;
}

@keyframes pulse {
  50% {
    opacity:.35;
  }
}

@media(max-width:1130px) {
  :root {
    --sidebar:74px;
  }
  .header {
    padding:22px 8px 16px;
  }
  .brand {
    padding:0 10px 25px;
  }
  .brand>span,.navigation button>:not(.nav-icon),.sidebar-note,.external {
    display:none;
  }
  .navigation button,.navigation a {
    font-size:0;
    justify-content:center;
    padding:12px;
  }
  .navigation .nav-icon {
    font-size:26px;
  }
  .engine-pill {
    justify-content:center;
    padding:10px;
  }
  #engine-status {
    display:none;
  }
  main {
    padding:0 20px;
  }
  .workspace {
    grid-template-columns:minmax(0,var(--board-size)) minmax(0,330px);
    gap:20px;
  }
  .intro,.position-tools,footer {
    max-width:calc(var(--board-size) + 350px);
  }
}

@media(max-width:800px) {
  :root {
    --sidebar:0px;
    --board-size:100%;
  }
  .header {
    position:static;
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:10px 18px;
    gap:10px;
  }
  .brand {
    padding:0;
    font-size:21px;
  }
  .brand>span {
    display:inline;
  }
  .brand img {
    width:31px;
    height:31px;
    flex-basis:31px;
  }
  .navigation,.mode-switch {
    flex-direction:row;
    gap:4px;
  }
  .navigation>a,.sidebar-bottom {
    display:none;
  }
  .navigation button {
    min-height:38px;
    padding:8px 12px;
  }
  .navigation button.active {
    box-shadow:inset 0 -2px #81b64c;
  }
  main {
    margin:auto;
    padding:0 16px;
    max-width:650px;
  }
  .intro {
    padding:17px 0 14px;
  }
  h1 {
    font-size:20px;
  }
  .workspace {
    grid-template-columns:1fr;
    gap:23px;
  }
  .analysis-panel {
    max-height:none;
    overflow:hidden;
  }
  .position-tools {
    grid-template-columns:1fr;
    gap:23px;
  }
  footer {
    flex-wrap:wrap;
    gap:12px;
  }
  footer p {
    order:3;
    width:100%;
    max-width:none;
  }
  .candidate-lines {
    max-height:250px;
  }
  .capture-button {
    font-size:10px;
    padding:7px 8px;
  }
}

@media(max-width:400px) {
  main {
    padding:0 10px;
  }
  .intro-copy {
    font-size:10px;
  }
  .player-row {
    padding-left:22px;
  }
  .board-toolbar>div {
    gap:12px;
  }
  .icon-button span {
    font-size:10px;
  }
  .primary-button {
    padding:9px 12px;
  }
  .preview-bar {
    flex-wrap:wrap;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,html {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto;
  }
}
/* Measured computer-play reference: 170px navigation, 528px board at 720px height. */
@font-face {
  font-family:'Chess Sans';
  src:url('./assets/chess-reference/theme/ChessSans-Bold.19a3983f.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:'Chess Sans';
  src:url('./assets/chess-reference/theme/ChessSans-ExtraBold.3b60f736.woff2') format('woff2');
  font-weight:800;
  font-display:swap;
}
:root {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  --sidebar:170px;
  --board-size:min(650px,calc(100dvh - 192px));
}
.header {padding:16px 8px 18px;background:#262522}
.brand {padding:0 8px 17px;font-size:25px;min-height:48px;font-family:'Chess Sans',sans-serif}
.brand img {width:34px;height:34px;flex-basis:34px}
.navigation,.mode-switch {gap:0}
.mode-switch {display:contents}
.navigation button,.navigation a {min-height:40px;padding:8px 10px;gap:12px;border-radius:0;font-size:14px;color:#dddcd8}
.navigation button.active {background:#ffffff08;box-shadow:none}
.nav-icon {width:24px;height:24px;object-fit:contain;flex-shrink:0}
.sidebar-bottom {padding-bottom:70px}
.sidebar-note {padding:0;border:0;display:grid;gap:12px}
.sidebar-primary,.sidebar-secondary {display:grid;place-items:center;border-radius:4px;width:100%;height:40px;font-size:14px;font-weight:700}
.sidebar-primary {background:linear-gradient(#81b64c,#5d9948);box-shadow:inset 0 1px #b2e06766;color:white}
.sidebar-secondary {background:#393734;border:1px solid #ffffff06;color:#d0cfca}
.engine-pill {font-size:9px;padding:22px 10px 0}
footer .engine-pill {padding:0;align-items:center;font-size:11px}
main {padding:16px 20px 0 58px}
.intro {position:absolute;top:16px;left:calc(var(--sidebar) + 58px);padding:0;pointer-events:none}
.intro h1,.intro-copy {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.workspace {grid-template-columns:minmax(0,var(--board-size)) minmax(0,300px);gap:32px;justify-content:start}
.board-section {position:relative}
.player-row {min-height:50px;height:50px;padding:0 0 8px;gap:10px}
.player-avatar {width:40px;height:40px;border-radius:3px}
.player-info strong {font-size:14px;display:inline}
.player-info>span {font-size:10px;margin-top:2px}
.player-badge {background:none;padding:0 34px 0 0;font-size:12px;letter-spacing:0;font-weight:400;color:#c3c0b9}
.player-avatar>.piece {width:40px;height:40px}
.capture-button {position:absolute;right:-26px;top:0;border:0;background:none;padding:0;width:20px;height:20px;z-index:4;color:#aaa79f}
.capture-button span:first-child {font-size:20px}
.capture-label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.board-frame {position:relative;gap:0}
.board-wrap {border-radius:0;box-shadow:none;overflow:visible}
.board {background:url('./assets/chess-reference/theme/board.png') center/100% 100%;border-radius:0}
.square,.square.dark {background:transparent}
.square.selected,.square.last-move {background:#ffff007f}
.square.dark.selected,.square.dark.last-move {background:#ffff007f}
.square.in-check {background:radial-gradient(ellipse at center,#e63e36aa 0%,#d3423b60 50%,transparent 80%)}
.piece {width:100%;height:100%;object-fit:contain;filter:none}
.coordinate {font-size:13px;font-weight:600;color:#739552;line-height:1.25}
.dark .coordinate {color:#ebecd0}
.rank-label {top:1px;left:4px}
.file-label {right:4px;bottom:1px}
.legal-dot {width:28%;background:#00000024}
.legal-capture {inset:0;border:6px solid #00000024}
.eval-rail {position:absolute;left:-22px;top:0;bottom:0;width:14px}
body[data-mode='play'] .eval-rail {display:none}
.bottom-player {padding:10px 0 0;height:50px;min-height:50px}
.bottom-player .player-info>span {display:none}
.player-avatar img:not(.piece) {width:36px;height:36px}
.board-toolbar {padding:12px 0 10px;min-height:40px;border-top:0}
.icon-button {color:#a4a39b;font-size:22px}
.icon-button span {font-size:12px}
.preview-bar {margin:8px 0 0}
#best-arrow {stroke:#ffa640;stroke-width:17;opacity:.8}
.analysis-panel {height:calc(100dvh - 32px);max-height:none;width:300px;background:#262522;border-radius:5px;scrollbar-gutter:auto;position:relative}
.panel-heading {background:#22211f;justify-content:center;min-height:64px;padding:16px 12px;border-bottom:1px solid #ffffff05}
.panel-heading h2 {font-family:'Chess Sans',sans-serif;font-weight:800;font-size:22px;margin:0}
.panel-heading>img {width:26px;height:26px}
.panel-heading>div>span,.offline-badge {display:none}
.game-message {padding:14px 16px;background:#262522}
.game-message strong {font-size:14px}
.game-message p {font-size:11px}
.analysis-panel>section {padding:14px 16px}
.section-heading h2 {font-size:14px;font-family:'Chess Sans',sans-serif}
.evaluation-row>strong {font-family:'Chess Sans',sans-serif;font-size:34px;font-weight:800;min-width:78px}
.evaluation-row h2 {font-size:12px}
.stats {background:#302e2b}
.stats span {font-size:15px;color:#dddcd6}
.candidate {background:#302e2b;border:0;border-radius:3px}
.candidate.best {background:#302e2b;border-left:3px solid #81b64c}
.candidate-top {gap:6px}
.candidate-move {font-size:15px}
.candidate-label {display:none}
.pv-moves {font-size:11px}
.candidate-depth {font-size:9px}
.candidate-score {font-size:12px;color:#b1d27c}
.quality-mark {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.quality-icon {width:30px;height:30px;background:none!important;overflow:hidden}
.move-badge {width:30px;height:30px;top:-6px;right:-6px;border:2px solid #fff;background:none!important;box-shadow:none}
.history-quality {display:inline-block;width:16px;height:16px;vertical-align:middle;margin-left:6px}
.candidate-quality {display:inline-block;width:18px;height:18px}
.quality-legend>span {display:inline-flex;align-items:center;gap:4px;color:#c2bfb7!important}
.quality-legend .quality-mark {width:14px;height:14px}
.forced-mark {display:grid;place-items:center;width:100%;height:100%;background:#777666;color:white;font-weight:700}
.coach-entry strong {font-size:12px}
.coach-entry p {font-size:11px}
.panel-action {position:sticky;bottom:0;padding:12px;background:#262522;z-index:5;box-shadow:0 -8px 12px #262522}
.panel-action .primary-button {width:100%;min-height:64px;font:800 22px 'Chess Sans',sans-serif;border-radius:10px;background:linear-gradient(#81b64c,#5d9948);box-shadow:inset 0 1px #b2e06766,inset 0 -1px #45753c,inset 0 2px 4px #b2e06780,inset 0 -2px 4px #45753c80,0 1px 2px #00000024,0 2px 4px #0000001a}
.position-tools,footer {max-width:calc(var(--board-size) + 332px);margin-left:0;margin-right:0}
.capture-view .panel-heading {padding:16px 12px}
.capture-view .candidate-lines {max-height:112px;overflow:hidden}
.capture-view .quality-legend {font-size:9px;gap:6px 8px}
.capture-view .move-coach {padding-bottom:18px}
.capture-view .game-message {min-height:38px}
.capture-view .panel-action .primary-button {min-height:48px;font-size:20px}
.capture-view .panel-action {padding-top:8px;padding-bottom:8px}
@media(min-width:1500px){main{padding-left:max(58px,calc((100vw - 1120px - var(--sidebar))/2))}}
@media(max-width:1130px){:root{--sidebar:74px}main{padding-left:32px;padding-right:20px}.workspace{gap:24px;grid-template-columns:minmax(0,var(--board-size)) minmax(0,300px)}.brand{padding-left:10px;padding-right:10px}.sidebar-note{display:none}.sidebar-bottom{padding-bottom:0}.navigation button,.navigation a{font-size:0;justify-content:center}.nav-icon{width:24px;height:24px}.capture-button{right:2px}}
@media(max-width:800px){:root{--sidebar:0px;--board-size:100%}.header{padding:10px 16px}.brand{padding:0;min-height:36px;font-size:23px}.navigation{display:flex;flex-direction:row}.navigation #play-mode,.navigation #analyze-mode{display:flex}.navigation>a,.navigation>button[data-preset]{display:none}.navigation button{min-height:36px}.navigation button.active{background:#ffffff0a}.sidebar-bottom{display:none}main{padding:12px 16px 0;max-width:650px}.workspace{grid-template-columns:1fr;gap:20px}.intro{display:none}.capture-button{right:0;top:2px}.player-badge{padding-right:30px}.analysis-panel{height:auto;max-height:none;width:100%;overflow:hidden}.panel-action{position:static;box-shadow:none}.position-tools,footer{max-width:none}.eval-rail{left:-12px;width:8px}.board-frame{margin-left:10px}body[data-mode='play'] .board-frame{margin-left:0}.navigation .nav-icon{width:24px;height:24px}}

body[data-mode="analyze"] .panel-action {display:none}