/* Base & Layout */
body, button, td, th, .overlay {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #2e2e2e;
  color: #eee;
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}
body.light-theme {
  background: #fff;
  color: #222;
}
body.light-theme #controls {
  background: #f0f0f0;
}
body.light-theme #moves {
  background: #e0e0e0;
  color: #222;
}
body.light-theme #credits {
  color: #888;
}

/* Titles */
#pageTitle {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
}
#pageTitle a {
  color: #90caf9;
}
body.light-theme #pageTitle a {
  color: #1565c0;
}

/* Board & Facts Link */
#board-container {
  text-align: center;
}
#board {
  width: 480px;
  height: 480px;
  position: relative;
  touch-action: none;
}

#facts-link a {
  font-size: 0.9em;
  text-decoration: none;
  color: var(--facts-link-color, #90caf9);
}
body.light-theme #facts-link a {
  color: var(--facts-link-color-light, #1565c0);
}

/* Overlays */
.overlay {
  position: absolute;
  top: 2px;
  left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 22px;
  max-width: calc(100% - 4px);
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.05;
  pointer-events: auto;
  font-size: var(--overlay-font);
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  transition: opacity 0.3s ease;
  z-index: 500;
}
.overlay.best {
  left: auto;
  right: 2px;
  background: rgba(0,123,255,0.8);
  z-index: 510; /* This line ensures blue badges appear on top */
}
.overlay.positive {
  background: rgba(40,167,69,0.8);
}
.overlay.negative {
  background: rgba(200,20,20,0.8);
}
.overlay.zero {
  background: rgba(128,128,128,0.8);
}

.highlightSquare {
  box-shadow: inset 0 0 0 4px rgba(255,235,59,0.7);
  transition: box-shadow 0.3s ease;
}
.square-55d63 {
  transition: transform 0.2s ease;
}

#board img {
  width: calc(100% * var(--piece-scale)) !important;
  height: auto                  !important;
}


/* Controls */
#controls {
  display: flex;
  flex-direction: column;
  margin-left: 32px;  /* increased gutter */
  width: 300px;
  transition: background 0.3s ease;
}
.btn {
  margin: 2px;
  padding: 8px 12px;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.btn:hover {
  filter: brightness(1.2);
}
.btn:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}
#prev, #next {
  font-size: 24px;     /* Larger text */
  padding: 8px 12px;   /* Keep padding same as other buttons */
  line-height: 1;      /* Keeps vertical alignment nice */
}
/*#prev, #next, #first, #last {*/
/*  font-size: 24px;     /* Larger text */
/*  padding: 8px 12px;   /* Keep padding same as other buttons */
/*  line-height: 1;      /* Keeps vertical alignment nice */
/*}*/
.btn-group {
  display: flex;
  gap: 4px;
}
.btn-group .btn {
  flex: 1;
}
.top-buttons {
  margin-top: 10px;
}
.bottom-controls {
  display: flex;
  gap: 4px;
  margin-top: 1em;
}
.bottom-controls .btn {
  flex: 1;
}
.btn-fen {
  background: #4caf50;
}
.btn-pgn {
  background: #2196f3;
}
.btn-nav {
  background: #555;
}
body.light-theme .btn-nav {
  background: #888;
}
#btnEval {
  display: none;
  margin: 4px 0;
  background: #6f42c1;
  width: 100%;
}

/* Panels */
#settingsPanel,
#popularGamesPanel {
  display: none;
  background: #444;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
}
#settingsPanel.open,
#popularGamesPanel.open {
  display: block;
}

/* Move history */
#moves {
  overflow: auto;
  background: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  font-size: var(--moves-font);
  transition: background 0.3s ease, color 0.3s ease;
  scroll-behavior: smooth;
}
body.light-theme #moves {
  background: #eee;
  color: #222;
}
#moves table {
  width: 100%;
  border-collapse: collapse;
}
#moves td {
  padding: 8px;
  font-size: var(--moves-font);
  line-height: 1.6;
}
#moves tr.selected {
  background: #555;
}
#moves td.current {
  font-weight: bold;
  color: #ffeb3b;
}

/* Mark the divergence point in orange (all viewports) */
#moves td.diverged {
  background-color: #ff5722 !important;
  color: #fff              !important;
}

/* Game title above history */
.game-title {
  font-size: 1rem;
  color: #ccc;
  text-align: center;
  margin: 8px 0;
  transition: color 0.3s ease;
}
body.light-theme .game-title {
  color: #666;
}

/* Credits & spacer */
.spacer {
  height: 1em;
}
#credits {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  transition: color 0.3s ease;
}

/* Settings panel one‑per‑line */
#settingsPanel label {
  display: block;
  margin-top: 8px;
}
#settingsPanel select {
  width: 100%;
  margin: 4px 0 12px;
  display: block;
}


/* Responsive & layout rules v1.44 */
body {
  display: flex;
  flex-direction: column;
}
#main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  scroll-margin-top: 10px;
}

@media (max-width: 600px) {
  body {
    flex-direction: column;
    height: auto;
    padding: 10px;
    align-items: center;
    justify-content: flex-start;
  }
  #main {
    flex-direction: column;
    align-items: center;
  }
  .word-your {
    display: none;
  }
  .mobile-only {
    display: inline;
  }

  /* mobile board sizing */
  #board {
    width: 90vw !important;
    height: 90vw !important;
    margin: 0 auto;
  }

  #controls {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 10px;
  }

}

.mobile-only {
  display: none;
}

/* Fix overlay clipping on Safari + always center pieces */
[class^="square-"] {
  overflow: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}


/* Next‑move dot: lighter gray with black border */
.next-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #888;  /* lighter gray */
  border: 2px solid #000;  /* black edge */
  box-sizing: border-box;
  border-radius: 50%;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  pointer-events: none;
  z-index: 600;
}

/* Next‑move dot: yellow with black border, positioned bottom‑left */
.next-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffeb3b;    /* yellow */
  border: 2px solid #8B0000;  /* dark gray: #333 or #444 or #555, dark red: #8B0000 */
  box-sizing: border-box;
  border-radius: 50%;

  bottom: 4px;
  left: 4px;
  top: auto;
  right: auto;

  pointer-events: none;
  z-index: 600;
}

/* light-green variant for book moves */
.book-dot {
  background: #a5e79f;  /* light green */
  border: 2px solid #2e7d32;
}


/* New: spacing & sizing for the Games dropdowns */
#popularGamesPanel label {
  margin-top: 8px;
}

#popularGamesPanel select {
  width: 100%;
  margin: 4px 0 12px;
}

/* make games dropdowns more legible on small screens */
@media (max-width: 600px) {

  #popularGamesPanel label {
    font-size: 1.25rem;
  }
  
  #popularGamesPanel select {
    font-size: 1rem;
    font-weight: bold;
    padding: 8px 12px;
    color: #222;
  }
  
  #settingsPanel select {
  font-size: 1rem;
  font-weight: bold;
  padding: 8px 12px;
  color: #222;
 }
 
	 /* override the chessboard-1.0.0 default sizing & positioning */
	#board .piece {
	  position: absolute !important;
	  top: 50%           !important;
	  left: 50%          !important;
	  transform: translate(-50%, -50%) scale(var(--piece-scale)) !important;
	  transform-origin: center center !important;
	}

	/* ===== Center & scale pieces based on --piece-scale ===== */
	#board .piece {
	  position: absolute !important;
	  top: 50%           !important;
	  left: 50%          !important;
	  transform: translate(-50%, -50%) scale(var(--piece-scale)) !important;
	  transform-origin: center center !important;
	  /* Ensure the image’s own sizing doesn’t override our scale: */
	  width: auto       !important;
	  height: auto      !important;
	  max-width: none   !important;
	}
	
	/* ensure piece images never distort and always fit their square */
	.square-55d63 img,
	#board img.piece {
	  width: auto !important;
	  height: auto !important;
	  max-width: 100% !important;
	  max-height: 100% !important;
	  object-fit: contain;
	  object-position: center;
	}

}
/* ══════════════════════════════════════════════════════════════════
   MDL+DCC EVAL LAYER — v0.5.0 Styles
   ══════════════════════════════════════════════════════════════════ */

/* ── DCC Trend Arrows ─────────────────────────────────────────── */
.dcc-arrow {
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.dcc-trend-rising  { color: #4cff4c; }
.dcc-trend-falling { color: #ff4c4c; }
.dcc-trend-stable  { color: #ccc; }

/* ── DCC Loading indicator ────────────────────────────────────── */
.dcc-loading {
  font-size: 0.7em;
  color: #aaa;
  animation: dccPulse 1s infinite;
  margin-left: 2px;
  line-height: 1;
}
@keyframes dccPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ── DCC Stability Borders ────────────────────────────────────── */
.overlay.dcc-stable {
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.85),
              0 0 6px rgba(52, 211, 153, 0.3);
}
.overlay.dcc-unstable {
  box-shadow: 0 0 0 2px rgba(255, 76, 76, 0.85),
              0 0 6px rgba(255, 76, 76, 0.3);
}

/* ── MDL Tiebreaker Star ──────────────────────────────────────── */
.dcc-mdl-pick {
  position: relative;
}
.dcc-mdl-star {
  color: #f59e0b;
  font-size: 0.9em;
  line-height: 1;
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.6);
}

/* ── DCC Info Panel ───────────────────────────────────────────── */
#dccInfoPanel {
  display: none;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 6px 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #ddd;
  line-height: 1.6;
}
body.light-theme #dccInfoPanel {
  background: rgba(240, 240, 245, 0.95);
  border-color: rgba(0, 100, 200, 0.2);
  color: #333;
}
.dcc-info-path {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow-x: auto;
  padding: 4px 0;
}
.dcc-path-move {
  color: #90caf9;
  font-weight: 600;
  margin: 0 2px;
}
body.light-theme .dcc-path-move { color: #1565c0; }

.dcc-path-eval {
  color: #aaa;
  margin: 0 1px;
  font-size: 11px;
}
body.light-theme .dcc-path-eval { color: #666; }

.dcc-path-arrow {
  color: #555;
  margin: 0 3px;
}
.dcc-info-summary {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4px;
}
body.light-theme .dcc-info-summary {
  color: #777;
  border-top-color: rgba(0,0,0,0.08);
}

/* ── DCC Accuracy Panel ───────────────────────────────────────── */
#dccAccuracyPanel {
  display: none;
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 6px 0;
  font-size: 12px;
  color: #bbb;
  text-align: center;
}
body.light-theme #dccAccuracyPanel {
  background: rgba(255, 248, 230, 0.9);
  border-color: rgba(200, 140, 0, 0.2);
  color: #555;
}
.acc-label { color: #999; }
.acc-val { color: #eee; font-weight: 600; font-family: monospace; }
body.light-theme .acc-val { color: #222; }
.acc-better { color: #4cff4c !important; }
body.light-theme .acc-better { color: #16a34a !important; }
.acc-count { color: #666; font-size: 11px; margin-left: 4px; }

/* ── DCC Settings Section ─────────────────────────────────────── */
.dcc-settings-group {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 12px;
  padding-top: 8px;
}
.dcc-settings-group .dcc-settings-title {
  font-weight: 700;
  font-size: 13px;
  color: #00e5ff;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
body.light-theme .dcc-settings-group .dcc-settings-title {
  color: #0277bd;
}
body.light-theme .dcc-settings-group {
  border-top-color: rgba(0,0,0,0.1);
}

/* ── DCC Thresholds toggle ────────────────────────────────────── */
#toggleThresholds { cursor: pointer; }
.hidden { display: none; }

/* ── Preview square highlight ─────────────────────────────────── */
.preview-square {
  box-shadow: inset 0 0 0 3px rgba(144, 202, 249, 0.5) !important;
}

/* ── Disabled setting ─────────────────────────────────────────── */
.disabled-setting {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Double-size board ────────────────────────────────────────── */
#board.scaled {
  width: 720px !important;
  height: 720px !important;
}

/* ── Opening name ─────────────────────────────────────────────── */
#openingName {
  text-align: center;
  font-size: 0.85em;
  color: #999;
  margin-bottom: 4px;
  min-height: 1.2em;
}
body.light-theme #openingName { color: #777; }

/* ── 8Z branding subtle ──────────────────────────────────────── */
.dcc-badge-label {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10px;
  color: rgba(0, 229, 255, 0.4);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.1em;
}
body.light-theme .dcc-badge-label { color: rgba(0, 120, 200, 0.3); }

/* ── DCC Analysis Panel (toggle view) ─────────────────────────── */
#dccAnalysisPanel {
  overflow: auto;
  background: #2a2a30;
  color: #ddd;
  padding: 8px;
  border-radius: 4px;
  font-size: 13px;
  height: 140px;
  scroll-behavior: smooth;
}
body.light-theme #dccAnalysisPanel {
  background: #e8eaef;
  color: #333;
}
.dcc-analysis-empty {
  color: #888;
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}
.dcc-analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}
.dcc-analysis-header th {
  text-align: left;
  color: #888;
  font-weight: 400;
  font-size: 10px;
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-theme .dcc-analysis-header th { border-bottom-color: rgba(0,0,0,0.08); }
.dcc-analysis-row td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dcc-analysis-row:hover {
  background: rgba(0,229,255,0.06);
}
body.light-theme .dcc-analysis-row:hover {
  background: rgba(0,100,200,0.06);
}
.dcc-rank { color: #666; width: 20px; }
.dcc-move-name { color: #90caf9; font-weight: 600; }
body.light-theme .dcc-move-name { color: #1565c0; }
.dcc-eval-cell { color: #ccc; }
body.light-theme .dcc-eval-cell { color: #555; }
.dcc-stab-high { color: #34d399; font-weight: 600; }
.dcc-stab-mid  { color: #ccc; }
.dcc-stab-low  { color: #ff4c4c; font-weight: 600; }
.dcc-analysis-pv {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 11px;
  color: #888;
}
body.light-theme .dcc-analysis-pv { border-top-color: rgba(0,0,0,0.08); color: #777; }

/* ── DCC Only mode badge label ────────────────────────────────── */
.dcc-only-label {
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
}

/* ── View toggle button active state ──────────────────────────── */
#btnViewToggle {
  transition: background 0.2s, color 0.2s;
}

/* ── ADSR shape label on badges ───────────────────────────────── */
.dcc-adsr-label {
  font-size: 0.8em;
  margin-left: 1px;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}
.dcc-adsr-info {
  font-size: 0.95em;
}

/* ── Simulation Stats Panel ───────────────────────────────────── */
#simStatsPanel {
  background: rgba(20, 25, 20, 0.95);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 4px;
  padding: 12px;
  margin: 6px 0;
  font-family: 'Segoe UI', sans-serif;
}
body.light-theme #simStatsPanel {
  background: rgba(240, 245, 240, 0.95);
  border-color: rgba(20, 140, 80, 0.2);
}
.sim-stats-header {
  text-align: center;
  margin-bottom: 10px;
}
.sim-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #34d399;
}
body.light-theme .sim-title { color: #16a34a; }
.sim-subtitle {
  font-size: 11px;
  color: #888;
}
.sim-stats-grid {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-theme .sim-stats-grid { border-bottom-color: rgba(0,0,0,0.08); }
.sim-stat { text-align: center; }
.sim-num {
  font-family: 'Consolas', monospace;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.sim-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.sim-games-list {
  max-height: 100px;
  overflow-y: auto;
}
.sim-game-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* ── Sim Status Bar ───────────────────────────────────────────── */
#simStatusBar {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.15);
  border-radius: 3px;
  padding: 4px 8px;
  margin: 4px 0;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: #34d399;
  text-align: center;
}
body.light-theme #simStatusBar {
  background: rgba(20, 140, 80, 0.08);
  border-color: rgba(20, 140, 80, 0.15);
  color: #16a34a;
}

/* ── DCCT per-color breakdown ─────────────────────────────────── */
.sim-color-breakdown {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #bbb;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
body.light-theme .sim-color-breakdown {
  border-bottom-color: rgba(0,0,0,0.08);
  color: #666;
}

/* ── Play Modal + Coach Panel (v0.7.0 experimental) ───────────────── */
.sim-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.sim-modal-card {
  width: min(420px, 94vw);
  background: #2a2a2f;
  color: #eee;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
body.light-theme .sim-modal-card {
  background: #f6f7fb;
  color: #222;
  border-color: rgba(0,0,0,0.08);
}
.sim-modal-title {
  font-weight: 700;
  color: #ffd966;
  margin-bottom: 12px;
  font-size: 15px;
}
.sim-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  cursor: pointer;
}
.sim-inline-note {
  color: #999;
  font-size: 12px;
}
.sim-subgrid,
.sim-form-grid {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 10px;
  align-items: center;
  margin: 10px 0;
}
.sim-modal-card select,
.sim-modal-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 7px 9px;
}
body.light-theme .sim-modal-card select,
body.light-theme .sim-modal-card input[type="text"] {
  background: #fff;
  color: #222;
  border-color: #bbb;
}
.sim-fairplay-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 217, 102, 0.08);
  border: 1px solid rgba(255, 217, 102, 0.18);
  color: #e6d18a;
  font-size: 12px;
  line-height: 1.45;
}
body.light-theme .sim-fairplay-note {
  background: rgba(255, 217, 102, 0.18);
  color: #6d5600;
}
.sim-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.sim-start-btn,
.sim-cancel-btn,
.coach-mini-btn,
.coach-ask-btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.sim-start-btn {
  flex: 1;
  background: #00e5ff;
  color: #000;
  padding: 9px 12px;
  font-weight: 700;
}
.sim-cancel-btn {
  flex: 1;
  background: #555;
  color: #eee;
  padding: 9px 12px;
}
.coach-panel {
  margin: 8px 0 6px;
  background: rgba(30, 27, 18, 0.95);
  border: 1px solid rgba(255, 217, 102, 0.18);
  border-radius: 8px;
  overflow: hidden;
}
body.light-theme .coach-panel {
  background: rgba(255, 249, 230, 0.95);
  border-color: rgba(180, 140, 20, 0.18);
}
.coach-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-theme .coach-panel-header {
  border-bottom-color: rgba(0,0,0,0.08);
}
.coach-title {
  font-weight: 700;
  color: #ffd966;
}
.coach-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
#coachModeSelect {
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 4px 6px;
  max-width: 132px;
  font-size: 12px;
}
body.light-theme #coachModeSelect {
  background: #fff;
  color: #222;
  border-color: #bbb;
}
.coach-mini-btn {
  background: #444;
  color: #eee;
  padding: 4px 8px;
  font-size: 12px;
}
.coach-messages {
  max-height: 210px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-msg {
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.45;
  font-size: 13px;
}
.coach-msg.system {
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.12);
}
.coach-msg.coach {
  background: rgba(255,255,255,0.04);
}
body.light-theme .coach-msg.coach {
  background: rgba(0,0,0,0.04);
}
.coach-msg.user {
  background: rgba(255, 217, 102, 0.12);
  align-self: flex-end;
}
.coach-msg-meta {
  display: block;
  font-size: 11px;
  color: #999;
  margin-bottom: 3px;
}
.coach-notice {
  margin: 0 10px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 217, 102, 0.08);
  border: 1px solid rgba(255, 217, 102, 0.14);
  color: #e6d18a;
  font-size: 12px;
}
body.light-theme .coach-notice {
  color: #6d5600;
}
.coach-input-row {
  display: flex;
  gap: 8px;
  padding: 0 10px 10px;
}
#coachAskInput {
  flex: 1;
  min-width: 0;
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 10px;
}
body.light-theme #coachAskInput {
  background: #fff;
  color: #222;
  border-color: #bbb;
}
.coach-ask-btn {
  background: #ffd966;
  color: #000;
  padding: 8px 12px;
  font-weight: 700;
}
#btnCoach.coach-active {
  background: #ffd966 !important;
  color: #000 !important;
}
#board-container.live-thinking {
  position: relative;
}
#board-container.live-thinking::after {
  content: '…';
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.72);
  color: #ffd966;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  z-index: 900;
  animation: dccPulse 1s infinite;
}
@media (max-width: 600px) {
  .coach-panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  .coach-header-actions {
    width: 100%;
    justify-content: space-between;
  }
  #coachModeSelect {
    max-width: none;
    flex: 1;
  }
}

/* 2026.09 — responsive analysis workspace, scoped to the /chess/new copy. */
:root {
  --ui-bg: #151a19;
  --ui-surface: #1d2421;
  --ui-raised: #27302b;
  --ui-inset: #171e1b;
  --ui-border: #3a453e;
  --ui-text: #f0f1e9;
  --ui-muted: #adb8b0;
  --ui-accent: #c7df91;
  --ui-ink: #202918;
  --ui-link: #c6df9f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 34px 32px 28px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
body.light-theme {
  --ui-bg: #f1f2eb;
  --ui-surface: #fafbf5;
  --ui-raised: #e7ecdf;
  --ui-inset: #eef1e7;
  --ui-border: #cad3c2;
  --ui-text: #243025;
  --ui-muted: #596555;
  --ui-accent: #3f652f;
  --ui-ink: #ffffff;
  --ui-link: #365d27;
  background: var(--ui-bg);
  color: var(--ui-text);
}
a { color: var(--ui-link); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; padding: 12px 18px; background: var(--ui-accent); color: var(--ui-ink); border-radius: 6px; }
.skip-link:focus { top: 12px; }
.app-header, #main { width: 100%; max-width: 1160px; margin-left: auto; margin-right: auto; }
.app-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand-line { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 48px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ui-accent); color: var(--ui-ink); border-radius: 9px 9px 20px 9px; font-size: 23px; font-weight: 800; letter-spacing: -2px; }
.brand-copy { min-width: 0; }
.brand-kicker, .section-kicker { color: var(--ui-muted); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.brand-kicker { margin-top: 4px; }
#pageTitle { display: flex; align-items: center; gap: 12px; font-size: 27px; letter-spacing: -1.1px; line-height: 1.35; margin: 0; text-align: left; }
#pageTitle .brand-title { color: var(--ui-text); }
.new-badge { min-height: 32px; padding: 3px 10px 5px; border: 1px solid var(--ui-accent); color: var(--ui-accent); background: transparent; border-radius: 7px; font-size: 12px; line-height: 1; cursor: pointer; letter-spacing: 0; }
.new-badge:hover { background: var(--ui-accent); color: var(--ui-ink); }
.header-links { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; position: relative; top: 8px; }
.header-links .bd-version-selector { margin-top: 0; justify-content: flex-end; }
.header-nav { display: flex; align-items: center; gap: 24px; font-size: 13px; }
.header-nav a { color: var(--ui-muted); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 12px; }
.header-nav a:hover { color: var(--ui-accent); }
#main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 408px); gap: 24px; align-items: start; margin-top: 16px; scroll-margin-top: 20px; }
#main:focus { outline: none; }
#board-container { padding: 20px; margin: 0; min-width: 0; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); text-align: left; }
.board-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; }
/* Keep the loaded game's identity visible even while the workspace shows DCC or a drawer. */
.board-heading-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.board-heading-title .section-kicker { white-space: nowrap; }
.board-heading-title:has(.board-game-title:not([hidden])) .section-kicker::after { content: ":"; }
.board-game-title { min-width: 0; color: var(--ui-text); font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.board-heading .research-tag { flex-shrink: 0; }
.research-tag { color: var(--ui-accent); border: 1px solid var(--ui-border); border-radius: 5px; padding: 3px 7px; font-size: 10px; letter-spacing: .03em; }
#board, #board.scaled { width: 100% !important; height: auto !important; aspect-ratio: 1; margin: 0 auto; }
#board .board-b72b1 { border: 0; border-radius: 3px; overflow: hidden; }
#board .white-1e1d7 { background-color: #e9e8d3; color: #4d6655; }
#board .black-3c85d { background-color: #739077; color: #f4f1dc; }
#board .notation-322f9 { font-size: 11px; font-weight: 600; }
.board-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 12px; border-bottom: 1px solid var(--ui-border); }
.board-actions p { font-size: 12px; color: var(--ui-muted); margin: 0; }
.board-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--ui-muted); font-size: 10px; padding: 13px 0 0; }
.board-legend > span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-best { background: #71b4e7; }
.legend-dcc { background: #b1cf81; }
.legend-next { background: #ecd366; box-shadow: 0 0 0 1px #5a552f; }
.board-note { margin-top: 21px; border-top: 1px solid var(--ui-border); padding-top: 17px; display: flex; align-items: flex-start; gap: 12px; }
.note-symbol { color: var(--ui-accent); font-size: 31px; line-height: 1; }
.board-note p { margin: 0; font-size: 12px; color: var(--ui-muted); line-height: 1.6; max-width: 510px; }
.board-note strong { display: block; margin-bottom: 3px; color: var(--ui-text); font-weight: 600; }
.board-note a { display: inline-block; margin-left: 6px; white-space: nowrap; }
#controls, body.light-theme #controls { width: auto; min-width: 0; margin: 0; padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; }
.workspace-heading { margin-bottom: 13px; }
.btn-group { gap: 6px; margin: 3px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; min-height: 40px; padding: 8px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-text); }
#simStatsPanel .btn { background: var(--ui-raised); color: var(--ui-text); border-color: var(--ui-border); }
#simStatsPanel .btn:hover { border-color: var(--ui-accent); }
.btn-nav, body.light-theme .btn-nav { background: var(--ui-raised); color: var(--ui-text); }
.btn-fen, .btn-pgn, .btn-new, body.light-theme .btn-new { background: var(--ui-raised); color: var(--ui-text); }
#btnNew { background: var(--ui-accent); color: var(--ui-ink); border-color: var(--ui-accent); }
.btn:hover { filter: brightness(1.11); }
.top-buttons { margin-top: 0; }
.top-buttons .btn { flex: 1 1 0; padding: 6px; min-width: 0; }
#btnHideEval { flex: 2.4; font-size: 11px; }
#first, #last { font-size: 16px; }
#prev, #next { font-size: 21px; padding: 6px; }
.game-title, body.light-theme .game-title { text-align: left; color: var(--ui-text); font-size: 16px; line-height: 1.35; font-weight: 650; margin: 19px 0 4px; overflow-wrap: anywhere; }
#openingName, body.light-theme #openingName { text-align: left; color: var(--ui-muted); font-size: 11px; line-height: 1.5; margin-bottom: 9px; min-height: 0; }
#viewToggle { gap: 5px !important; flex-wrap: wrap; margin: 6px 0 0 !important; }
#viewToggle .btn { min-height: 36px; font-size: 11px !important; padding: 7px 10px !important; border-radius: 5px; }
#btnSim { background: #353426 !important; color: #f0d48b !important; border-color: #5c5434 !important; }
#btnReplay, #btnViewToggle { background: var(--ui-raised) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
body.light-theme #btnSim { background: #f1ead4 !important; color: #735500 !important; border-color: #d1bd87 !important; }
#dccProgress { font-size: 10px !important; color: var(--ui-accent) !important; min-width: 0 !important; }
#dccProgress:empty { display: none; }
.mode-hint { margin: 7px 0 12px; color: var(--ui-muted); font-size: 10px; line-height: 1.5; }
.mode-hint span { padding: 0 3px; }
#moves, body.light-theme #moves, #dccAnalysisPanel, body.light-theme #dccAnalysisPanel { background: var(--ui-inset); border: 1px solid var(--ui-border); color: var(--ui-text); border-radius: 7px; padding: 8px; margin-bottom: 12px; }
#moves td { padding: 5px 7px; line-height: 1.6; border-bottom: 1px solid var(--ui-border); }
#moves tr.selected { background: var(--ui-raised); }
#moves td.current { color: var(--ui-accent); }
#dccInfoPanel, #dccAccuracyPanel { max-width: 100%; overflow-wrap: anywhere; }
.bottom-controls { margin-top: 13px; }
#popularGamesPanel, #settingsPanel, body.light-theme #popularGamesPanel, body.light-theme #settingsPanel { background: var(--ui-inset); border: 1px solid var(--ui-border); color: var(--ui-text); padding: 14px; border-radius: 9px; margin-top: 12px; }
#settingsPanel { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; font-size: 12px; }
#settingsPanel label { margin-top: 11px; }
#settingsPanel input[type="checkbox"] { accent-color: var(--ui-accent); width: 17px; height: 17px; vertical-align: middle; margin-right: 5px; }
#settingsPanel select, #settingsPanel input[type="number"], #popularGamesPanel select, #popularGamesPanel input { min-height: 40px; width: 100%; max-width: 100%; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-text); background: var(--ui-raised); font-size: 12px; }
.setting-note { color: var(--ui-muted); font-size: 11px; line-height: 1.6; margin-top: -4px; }
.dcc-settings-group .dcc-settings-title, body.light-theme .dcc-settings-group .dcc-settings-title { color: var(--ui-accent); }
#info-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--ui-border); }
#info-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 5px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-inset); color: var(--ui-accent); font-size: 12px; font-weight: 600; text-decoration: none; text-align: center; }
#info-links a:hover { background: var(--ui-raised); border-color: var(--ui-accent); }
#credits, body.light-theme #credits { color: var(--ui-muted); font-size: 12px; line-height: 1.5; margin-top: 12px; }
#credits a { color: var(--ui-text); }
#credits span { padding: 0 3px; }
.dcc-badge-label, body.light-theme .dcc-badge-label { color: var(--ui-muted); font-family: inherit; font-size: 10px; letter-spacing: .02em; margin-top: 5px; }
.dcc-badge-label a, body.light-theme .dcc-badge-label a { color: var(--ui-link); text-decoration: underline; }
.spacer { display: none; }
.library-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 11px; font-weight: 650; }
.library-count { color: var(--ui-muted); font-size: 10px; font-weight: 400; }
.library-field-label { display: block; margin: 10px 0 4px; font-size: 11px; color: var(--ui-muted); }
.library-result-list { display: flex; flex-direction: column; gap: 5px; max-height: 310px; overflow-y: auto; margin-top: 12px; }
.library-result { text-align: left; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); border-radius: 6px; padding: 10px; cursor: pointer; min-height: 52px; }
.library-result:hover, .library-result:focus-visible { border-color: var(--ui-accent); background: var(--ui-raised); }
.library-result strong { display: block; font-size: 11px; font-weight: 600; line-height: 1.5; }
.library-result span { display: block; margin-top: 3px; font-size: 10px; color: var(--ui-muted); }
.library-status { margin: 9px 0 0; color: var(--ui-muted); font-size: 11px; }
.library-native-selects { display: none; }
.live-clocks { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0; }
.live-clock { flex: 1; font-variant-numeric: tabular-nums; background: var(--ui-inset); color: var(--ui-muted); border: 1px solid var(--ui-border); border-radius: 6px; padding: 8px 12px; }
.live-clock.is-running { color: var(--ui-accent); border-color: var(--ui-accent); }
.live-clock.stale, .live-clocks.stale { opacity: .65; }
.sim-modal-backdrop, #replayModal { padding: 18px; overflow-y: auto; align-items: center; }
.sim-modal-card, #replayModal > div { width: min(100%, 420px); max-width: 420px !important; min-width: 0 !important; max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; border-radius: 12px !important; padding: 24px !important; }
.sim-modal-card button, .sim-modal-card select, #replayModal button, #replayModal select { min-height: 42px; }
.sim-modal-title { color: var(--ui-accent); }
.whats-new-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px 32px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: 0 28px 100px #0007; }
.whats-new-dialog::backdrop { background: #06120ccc; backdrop-filter: blur(4px); }
.dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ui-border); border-radius: 7px; color: var(--ui-text); background: var(--ui-raised); font-size: 24px; cursor: pointer; flex-shrink: 0; }
.whats-new-dialog h2 { font-size: 34px; line-height: 1.16; letter-spacing: -1.1px; margin: 15px 0 14px; }
.whats-new-dialog h2 span { color: var(--ui-accent); }
.dialog-intro { font-size: 13px; color: var(--ui-muted); }
.upgrade-list { list-style: none; padding: 0; margin: 0; }
.upgrade-list li { font-size: 12px; line-height: 1.6; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--ui-border); position: relative; color: var(--ui-muted); }
.upgrade-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-accent); position: absolute; top: 18px; left: 0; }
.upgrade-list strong { color: var(--ui-text); }
.try-it { margin-top: 18px; border: 1px solid var(--ui-border); border-radius: 8px; padding: 13px 16px; background: var(--ui-inset); font-size: 12px; }
.try-it ol { color: var(--ui-muted); margin: 8px 0 0; padding-left: 18px; }
.try-it li { padding: 3px 0; }
.research-note { font-size: 11px; color: var(--ui-muted); margin: 15px 0; }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.dialog-actions a { padding: 10px 0; }
.dialog-actions button { padding: 11px 15px; min-height: 42px; border: 0; border-radius: 6px; background: var(--ui-accent); color: var(--ui-ink); font-weight: 650; cursor: pointer; }
@media (min-width: 1200px) { #main:has(#board.scaled) { grid-template-columns: minmax(0, 1fr) 350px; max-width: 1320px; } }
@media (max-width: 1020px) {
  body { padding: 25px 20px; }
  #main { grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
  #board-container, #controls { padding: 15px; }
  .board-actions { flex-wrap: wrap; }
  .board-note { margin-top: 15px; }
  #viewToggle .btn { padding: 7px 9px !important; }
}
@media (max-width: 790px) {
  body { display: block; padding: 20px 18px 28px; }
  .app-header, #main { max-width: 600px; }
  .app-header { flex-direction: column; align-items: stretch; gap: 4px; }
  .header-links { align-items: flex-start; gap: 0; top: 0; }
  .header-links .bd-version-selector { justify-content: flex-start; }
  .header-nav { gap: 14px; }
  #main { display: flex; flex-direction: column; gap: 16px; }
  #board-container, #controls, body.light-theme #controls { width: 100%; max-width: none; }
  #board-container { padding: 16px; }
  #controls { padding: 18px; }
  .board-actions { flex-wrap: nowrap; }
  #pageTitle { font-size: 24px; }
  .board-note { display: none; }
  .new-badge { min-height: 40px; }
  #viewToggle .btn { min-height: 42px; padding: 8px 13px !important; }
  .btn { min-height: 44px; font-size: 13px; }
  .dcc-badge-label a, #credits a { min-height: 40px; display: inline-flex; align-items: center; }
  #credits { margin-top: 1px; }
  .dcc-badge-label { margin-top: -4px; }
  #popularGamesPanel input, #popularGamesPanel select, #settingsPanel select, #settingsPanel input[type="number"] { font-size: 16px; min-height: 44px; }
  .board-legend { font-size: 10px; gap: 8px 15px; }
}
@media (max-width: 420px) {
  body { padding: 15px 10px 22px; }
  .brand-mark { width: 39px; height: 45px; font-size: 20px; }
  .brand-line { gap: 10px; }
  .brand-kicker { font-size: 8px; letter-spacing: .11em; }
  #pageTitle { font-size: 22px; gap: 8px; letter-spacing: -.8px; }
  .new-badge { padding-left: 8px; padding-right: 8px; }
  .header-nav { gap: 0; }
  .header-nav a { font-size: 11px; gap: 5px; }
  #board-container { padding: 10px; border-radius: 10px; }
  .board-heading { margin-bottom: 10px; }
  .section-kicker { font-size: 9px; }
  .research-tag { font-size: 9px; }
  #controls { padding: 14px; }
  .board-actions { gap: 8px; }
  .board-actions p { font-size: 10px; max-width: 135px; }
  .board-legend { font-size: 9px; gap: 8px 12px; }
  #viewToggle .btn { padding: 8px 10px !important; }
  #board .overlay { padding: 2px 3px; min-height: 17px; font-size: min(var(--overlay-font), 12px); gap: 1px; }
  .whats-new-dialog { padding: 20px; }
  .whats-new-dialog h2 { font-size: 29px; }
  .dialog-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
#simModal .sim-option-row { min-height: 40px; }
#simModal input[type="radio"] { min-width: 17px; min-height: 17px; accent-color: var(--ui-accent); }
.dcc-policy-note { color: var(--ui-accent); font-size: 10px; line-height: 1.5; padding: 3px 3px 9px; }
.dcc-details-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 3px 7px; background: var(--ui-raised); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 4px; cursor: pointer; font: inherit; }
.dcc-details-button:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.dcc-analysis-table { font-size: 11px; }
.dcc-analysis-table th, .dcc-analysis-table td { color: var(--ui-text); }
.dcc-analysis-pv, .dcc-info-summary { color: var(--ui-muted); line-height: 1.6; }
#dccInfoPanel { background: var(--ui-inset); border-color: var(--ui-border); color: var(--ui-text); }
@media (max-width: 790px) { .dcc-details-button { min-height: 40px; } }

/* Match the four primary actions below, including on narrow screens. */
#viewToggle { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px !important; }
#viewToggle .btn { margin-left: 0 !important; min-width: 0; min-height: 44px; width: 100%; padding: 6px 3px !important; }
#dccProgress { grid-column: 1 / -1; order: 2; text-align: right; }

#simModal [hidden] { display: none !important; }
.sim-position-info { padding: 9px 11px; border-radius: 6px; background: var(--ui-inset); color: var(--ui-accent); font-size: 12px; }
#simLocalMatch select { min-width: 0; width: 100%; background: var(--ui-raised); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 5px; }
#simSwapEngines { width: 100%; margin: 9px 0; background: var(--ui-raised); color: var(--ui-text); }
.sim-decision { border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-inset); padding: 11px; font-size: 11px; line-height: 1.6; margin-bottom: 10px; overflow-wrap: anywhere; }
.sim-decision strong { display: block; color: var(--ui-accent); margin-bottom: 4px; }
.sim-decision div:last-child { color: var(--ui-muted); }
.sim-experiments { font-size: 11px; line-height: 1.6; color: var(--ui-text); }
.sim-experiments summary { cursor: pointer; padding: 8px; color: var(--ui-accent); }
.sim-experiments p { color: var(--ui-muted); }
.sim-experiment-list { max-height: 260px; overflow-y: auto; }
.sim-experiment-row { padding: 9px 0; border-top: 1px solid var(--ui-border); }
.sim-experiment-row strong, .sim-experiment-row span { display: block; overflow-wrap: anywhere; }
.sim-experiment-row .btn { margin-top: 6px; }
.sim-experiments .btn { background: var(--ui-raised); color: var(--ui-text); font-size: 11px; }
#moves td[role="button"] { cursor: pointer; }
#moves td[role="button"]:hover { background: var(--ui-raised); }
@media (max-width: 790px) { #simLocalMatch select { font-size: 16px; } .sim-experiments summary { min-height: 44px; } }

/* Let the board frame determine the desktop row height. Only the central
   analysis area scrolls; dynamic results never push the bottom controls. */
@media (min-width: 791px) {
  #main { align-items: stretch; }
  #controls, body.light-theme #controls {
    align-self: stretch;
    contain: size;
    min-height: 740px;
  }
}

/* Player clocks lead the workspace; timestamps remain optional. */
.workspace-heading { display: flex; align-items: center; gap: 10px; }
.gemini-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-accent); background: var(--ui-raised); font-size: 20px; cursor: pointer; }
.gemini-toggle:hover, .gemini-toggle[aria-expanded="true"] { border-color: var(--ui-accent); }
#workspaceTimers[hidden], #humanSession[hidden], #geminiPanel[hidden], #liveClocks[hidden] { display: none !important; }
.workspace-timers { margin: 4px 0 12px; }
.timer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.player-timer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-inset); }
.player-timer span { font-size: 11px; color: var(--ui-muted); }
.player-timer strong { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ui-text); }
.player-timer.is-running { border-color: var(--ui-accent); }
#timerCaption { display: block; margin-top: 5px; font-size: 10px; color: var(--ui-muted); }
.move-timestamp { display: block; color: var(--ui-muted); font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; margin-top: 2px; }
.human-session { padding: 10px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-inset); margin-bottom: 10px; }
.human-session-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.human-session-actions strong { flex: 1 0 100%; font-size: 12px; }
.human-session .btn { padding: 6px 9px; font-size: 11px; }
.human-session small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--ui-muted); }
.study-dialog { width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 25px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); color: var(--ui-text); max-height: calc(100dvh - 32px); overflow: auto; }
.study-dialog::backdrop { background: rgba(0,0,0,.65); }
.study-dialog h2 { margin-top: 0; }
.study-dialog p { line-height: 1.7; font-size: 13px; color: var(--ui-muted); }
.study-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.study-fields label { font-size: 12px; color: var(--ui-muted); }
.study-fields input, .study-fields select { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 6px; padding: 10px 7px; background: var(--ui-inset); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 5px; font: inherit; }
.gemini-panel { position: fixed; right: 24px; bottom: 24px; width: min(430px, calc(100vw - 32px)); height: min(650px, calc(100dvh - 48px)); z-index: 1200; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 16px 60px rgba(0,0,0,.5); overflow: hidden; }
.gemini-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.gemini-header strong { font-size: 19px; color: var(--ui-accent); }
.gemini-header small { display: block; color: var(--ui-muted); font-size: 11px; margin-top: 3px; }
.gemini-panel button { background: var(--ui-raised); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 5px; padding: 7px 9px; min-height: 34px; font-size: 12px; cursor: pointer; }
.gemini-panel button:hover { border-color: var(--ui-accent); }
.gemini-note, .gemini-footnote { color: var(--ui-muted); font-size: 10px; line-height: 1.6; margin: 0 18px 9px; }
.gemini-prompts { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 18px 10px; }
.gemini-prompts button { font-size: 11px; }
.gemini-messages { flex: 1; min-height: 100px; overflow-y: auto; padding: 2px 18px 14px; overscroll-behavior: contain; }
.gemini-message { background: var(--ui-inset); padding: 12px; border-radius: 8px; margin: 8px 0; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.gemini-message.user { border-left: 2px solid var(--ui-muted); }
.gemini-message.model { border-left: 2px solid var(--ui-accent); }
.gemini-message.system { border: 1px solid #b88b54; }
.gemini-message > strong { display: block; font-size: 11px; color: var(--ui-accent); margin-bottom: 5px; }
.gemini-message-text { white-space: pre-wrap; }
.gemini-message small { display: block; color: var(--ui-muted); font-size: 10px; margin-top: 6px; }
#geminiStatus { font-size: 11px; padding: 0 18px; color: var(--ui-muted); }
#geminiForm { display: flex; gap: 7px; padding: 10px 18px; }
#geminiQuestion { flex: 1; width: 0; min-width: 0; resize: vertical; max-height: 120px; padding: 9px; font: inherit; font-size: 13px; background: var(--ui-inset); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 6px; }
#geminiSend { background: var(--ui-accent); color: var(--ui-ink); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 790px) {
  .gemini-toggle { width: 38px; height: 38px; }
  .gemini-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: min(620px, calc(100dvh - 24px)); }
  .gemini-panel button { min-height: 42px; }
  #geminiQuestion, .study-fields input, .study-fields select { font-size: 16px; }
}

/* Stable workspace: top, navigation + reading area, and a stationary toolbar. */
#controls, body.light-theme #controls { position: relative; overflow: clip; }
.workspace-top, .workspace-bottom { flex: 0 0 auto; min-width: 0; }
.workspace-analysis { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; min-width: 0; position: relative; }
.workspace-analysis > .top-buttons { flex: 0 0 auto; margin: 0 0 8px; }
.workspace-analysis > .top-buttons .btn { height: 44px; min-height: 44px; line-height: 1.15; }
.workspace-display { flex: 1 1 0; min-height: 0; min-width: 0; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #52675b #19221d; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-inset); padding: 8px; }
.workspace-display:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
#controls.is-automating .workspace-display { scrollbar-color: transparent transparent; }
#controls.is-automating .workspace-display:hover, #controls.is-automating .workspace-display:focus-within { scrollbar-color: #52675b #19221d; }
.workspace-display::-webkit-scrollbar { width: 8px; height: 8px; }
.workspace-display::-webkit-scrollbar-track, .workspace-display::-webkit-scrollbar-corner { background: #19221d; border-radius: 8px; }
.workspace-display::-webkit-scrollbar-thumb { background: #52675b; border: 2px solid #19221d; border-radius: 8px; }
.workspace-display::-webkit-scrollbar-thumb:hover { background: #718b79; }
#controls.is-automating .workspace-display:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb { background: transparent; }
.workspace-display #moves, .workspace-display #dccAnalysisPanel, body.light-theme .workspace-display #moves, body.light-theme .workspace-display #dccAnalysisPanel { height: auto !important; min-height: 0; max-height: none !important; overflow: visible !important; border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; }
.workspace-display .sim-experiment-list { max-height: none; overflow: visible; }
.workspace-bottom { padding-top: 12px; }
.workspace-bottom .bottom-controls { margin-top: 9px; }
.workspace-top .game-title { margin: 0 0 3px; height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.workspace-top #openingName { height: 17px; margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dccProgress, #dccProgress:empty { display: block; height: 15px; line-height: 15px; overflow: hidden; white-space: nowrap; }
.workspace-top .mode-hint { margin: 3px 0 12px; }
.workspace-top #timerCaption { min-height: 15px; line-height: 15px; }
.workspace-top .live-clocks { margin: 4px 0 12px; }
/* Drawers cover the whole workspace while its underlying layout stays still. */
#controls > .workspace-drawer, body.light-theme #controls > .workspace-drawer { position: absolute; z-index: 600; inset: 0; margin: 0; max-height: none; border: 0; border-radius: inherit; overflow: auto; overscroll-behavior: contain; }
#controls:has(> .workspace-drawer.open) > :not(.workspace-drawer) { visibility: hidden; }
#controls > .workspace-drawer .btn { background: var(--ui-raised); color: var(--ui-text); }
@media (min-width: 791px) {
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) > .workspace-bottom {
    visibility: visible; position: relative; z-index: 700;
  }
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) > .workspace-bottom .desktop-control-stack {
    visibility: visible; position: relative; z-index: 1; background: var(--ui-surface);
  }
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) #desktopNavRow {
    visibility: hidden; pointer-events: none;
  }
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) #desktopViewTabs,
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) #workspacePrimaryActions {
    visibility: visible; pointer-events: auto;
  }
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) #workspaceFocusBar,
  body:not(.app-mobile) #controls:has(> .workspace-drawer.open) #workspaceToolContent {
    visibility: hidden; pointer-events: none;
  }
}
#controls > #popularGamesPanel.open { display: flex; flex-direction: column; }
@media (min-width: 791px) {
  body:not(.app-mobile) #workspaceDisplay > #popularGamesPanel,
  body:not(.app-mobile) #workspaceDisplay > .game-review-drawer {
    box-sizing: border-box; width: 100%; min-width: 0;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ui-text);
  }
  body:not(.app-mobile) #workspaceDisplay > .game-review-drawer { min-height: 100%; }
  /* Review and Library are reading views: give them the whole workspace height
     above the persistent view/action rows on short desktop screens. */
  body:not(.app-mobile):is([data-desktop-view="review"], [data-desktop-view="library"]) .workspace-top,
  body:not(.app-mobile):is([data-desktop-view="review"], [data-desktop-view="library"]) #desktopNavRow {
    display: none !important;
  }
  body:not(.app-mobile):is([data-desktop-view="review"], [data-desktop-view="library"]) .workspace-analysis {
    flex: 1 1 auto; min-height: 0;
  }
  body:not(.app-mobile)[data-desktop-view="review"] #workspaceDisplay {
    overflow-y: auto; overflow-x: hidden;
  }
  body:not(.app-mobile)[data-desktop-view="library"] #workspaceDisplay { overflow: hidden; }
  body:not(.app-mobile)[data-desktop-view="library"] #workspaceDisplay > #popularGamesPanel {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; pointer-events: auto;
  }
  body:not(.app-mobile)[data-desktop-view="review"] #workspaceDisplay > .game-review-drawer {
    display: block; min-height: 0;
  }
  body:not(.app-mobile)[data-desktop-view="library"] #workspaceDisplay > :not(#popularGamesPanel),
  body:not(.app-mobile)[data-desktop-view="review"] #workspaceDisplay > :not(.game-review-drawer) { display: none !important; }
  body:not(.app-mobile) #workspaceDisplay > #popularGamesPanel .drawer-heading,
  body:not(.app-mobile) #workspaceDisplay > .game-review-drawer .drawer-heading { top: -8px; }
  body:not(.app-mobile) #workspaceDisplay > #popularGamesPanel #btnCloseGames,
  body:not(.app-mobile) #workspaceDisplay > .game-review-drawer .game-review-heading > button { display: none !important; }
}
#popularGamesPanel > :not(.library-result-list) { flex: 0 0 auto; }
#popularGamesPanel .library-result-list { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; pointer-events: auto; }
#popularGamesPanel .library-result { flex-shrink: 0; pointer-events: auto; position: relative; }
body:not(.app-mobile) #workspaceDisplay > #popularGamesPanel #btnUseTournamentOpening {
  width: 100%; align-self: stretch; margin: 8px 0 0; min-height: 40px;
  background: var(--ui-raised); color: var(--ui-text); border-color: var(--ui-border);
}
body:not(.app-mobile) #workspaceDisplay > #popularGamesPanel #btnUseTournamentOpening:hover {
  border-color: var(--ui-accent); color: var(--ui-accent); filter: none;
}
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -14px; background: var(--ui-inset); z-index: 1; padding: 6px 0 9px; border-bottom: 1px solid var(--ui-border); }
.drawer-heading .btn { min-width: 36px; font-size: 20px; background: var(--ui-raised); }

/* The bar shares the board's exact height, including when the board is flipped. */
.board-stage { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: stretch; }
.board-stage #board { min-width: 0; }
.position-eval { position: relative; overflow: hidden; border-radius: 4px; background: #252b2a; border: 1px solid #65716b; --eval-white: 50%; }
.eval-white { position: absolute; bottom: 0; left: 0; right: 0; height: var(--eval-white); background: #f0f0df; transition: height .35s ease; }
.position-eval.is-flipped .eval-white { bottom: auto; top: 0; }
.eval-midpoint { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #849187; opacity: .75; }
.eval-label { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; padding: 5px 2px; border-radius: 3px; color: #1c2620; background: #f0f0df; font: 700 10px/1.3 system-ui; font-variant-numeric: tabular-nums; white-space: nowrap; }
.position-eval.is-flipped .eval-label { bottom: auto; top: 7px; }
.position-eval.is-pending, .position-eval.is-unknown, .position-eval.is-hidden { background: repeating-linear-gradient(135deg, #343e38 0 5px, #3e4942 5px 10px); }
.position-eval.is-pending .eval-white, .position-eval.is-unknown .eval-white, .position-eval.is-hidden .eval-white { visibility: hidden; }
@media (max-width: 790px) {
  .workspace-analysis { flex: 0 0 auto; height: 340px; }
  .board-stage { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .eval-white { transition: none; } }

/* Keep the version switch visible and let the title wrap on small screens. */
#pageTitle { flex-wrap: wrap; }
#pageTitle .version-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; color: var(--ui-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-decoration: none; white-space: nowrap; }
#pageTitle .version-link:hover { color: var(--ui-accent); text-decoration: underline; }
#pageTitle .version-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; border-radius: 3px; }

/* Analysis lab: retain the established layout, reveal extra tools on demand. */
.development-label { display: inline-block; margin-left: 6px; color: var(--ui-accent); font-size: 8px; letter-spacing: .08em; }
.lab-settings-group, .lab-subsettings { margin: 12px 0; border: 1px solid var(--ui-border); border-radius: 7px; padding: 9px 11px; }
.lab-settings-group > summary, .lab-subsettings > summary { cursor: pointer; min-height: 32px; display: list-item; align-content: center; color: var(--ui-text); font-size: 12px; font-weight: 650; }
.lab-settings-group > summary:focus-visible, .lab-subsettings > summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.lab-subsettings { background: var(--ui-inset); }
.lab-sensor-options { border: 1px solid var(--ui-border); border-radius: 5px; margin: 15px 0 8px; padding: 6px 10px 10px; }
.lab-sensor-options legend { color: var(--ui-muted); font-size: 11px; padding: 0 4px; }
.lab-sensor-options label { display: block; }
.lab-research-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.lab-research-tools .btn { background: var(--ui-inset); color: var(--ui-accent); min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 12px; white-space: normal; }
.workspace-focus-bar { display: flex; align-items: center; gap: 8px; height: 44px; }
.workspace-focus-bar[hidden] { display: none !important; }
.focus-caption { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.workspace-focus-bar .btn { min-width: 76px; min-height: 44px; background: var(--ui-raised); color: var(--ui-text); }
#btnLabPause { color: var(--ui-ink); background: var(--ui-accent); border-color: var(--ui-accent); }
#controls.is-sim-focus > .workspace-bottom > .workspace-tool-content { display: none; }
.lab-tools-dialog { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: 0 24px 80px #0007; overscroll-behavior: contain; }
.lab-tools-dialog::backdrop { background: #06120cbb; backdrop-filter: blur(3px); }
.lab-tools-dialog h2 { font-size: 19px; letter-spacing: -.4px; margin: 0; }
.lab-tools-dialog .setting-note { margin: 12px 0 17px; }
.lab-tools-dialog .workspace-tool-content { display: block; }
.lab-tools-dialog #info-links, .lab-tools-dialog #credits { text-align: center; }
.lab-tools-dialog .btn-group { margin: 7px 0; }
.lab-tools-dialog .lab-research-tools { margin-top: 12px; }
/* Compact mode changes reading density, not touch-target size or clock placement. */
#controls.lab-compact .workspace-display { padding: 5px 7px; }
#controls.lab-compact #moves td { padding-top: 4px; padding-bottom: 4px; }
#controls.lab-compact #dccAnalysisPanel { line-height: 1.35; }
#controls.lab-compact .sim-decision { padding: 7px; }
#controls.lab-compact .sim-experiment-row { padding: 6px 0; }
@media (min-width: 1060px) {
  #main.lab-custom-width, #main.lab-custom-width:has(#board.scaled) { grid-template-columns: minmax(360px, 1fr) minmax(340px, var(--lab-workspace-width)); max-width: max(1160px, calc(700px + var(--lab-workspace-width))); }
}
@media (max-width: 790px) {
  #controls.is-sim-focus .workspace-analysis { height: calc(340px + var(--lab-focus-extra, 180px)); }
  .lab-settings-group > summary, .lab-subsettings > summary { min-height: 44px; }
  .lab-research-tools .btn { min-height: 44px; font-size: 13px; }
  .lab-tools-dialog { padding: 18px; }
  .development-label { display: block; margin-left: 0; margin-top: 2px; }
}
@media (max-width: 420px) {
  #pageTitle .version-link { min-height: 28px; font-size: 10px; }
  .focus-caption { font-size: 8px; }
  .workspace-focus-bar .btn { min-width: 70px; }
}

/* Short desktop windows (including HD screens with OS scaling): constrain the
   board by viewport height without scaling text, dialogs or drag coordinates.
   Tall desktops and the existing touch/tablet layout keep their sizing. */
@media (min-width: 1060px) and (max-height: 1100px) and (hover: hover) and (pointer: fine) {
  body { padding-top: 16px; padding-bottom: 16px; }
  .app-header { max-width: min(1160px, calc(100dvh + 90px)); }
  #main, #main:has(#board.scaled), #main.lab-custom-width, #main.lab-custom-width:has(#board.scaled) {
    grid-template-columns: minmax(0, 1fr) minmax(340px, var(--lab-workspace-width, 408px));
    max-width: min(1160px, calc(100dvh + 90px));
  }
  #board-container, #controls, body.light-theme #controls { padding: 14px; }
  #controls, body.light-theme #controls { min-height: 700px; }
  .board-heading { margin-bottom: 12px; }
  .board-actions { padding-top: 9px; padding-bottom: 7px; }
  .board-legend { padding-top: 8px; }
  .board-note { margin-top: 12px; padding-top: 10px; }
  .workspace-heading { margin-bottom: 8px; }
  .workspace-timers { margin-bottom: 8px; }
  .workspace-top .mode-hint { margin-bottom: 8px; }
}
/* Source control stays inside the existing workspace on narrow screens. */
.analysis-source-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:5px 0 7px;font-size:12px}
.analysis-source-row select{min-height:32px;border-radius:6px;background:#1d2c29;color:#e5f5ed;border:1px solid #527363;padding:3px 8px}
.analysis-dcc-toggle{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
#analysisSourceStatus{flex:1 1 130px;color:#9ddbc4;font-size:11px;line-height:1.3}
body.light-theme .analysis-source-row select{background:#fff;color:#173b2b}

/* Keep the primary actions in one line, leaving the reading area tall. */
.workspace-primary-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.workspace-primary-actions .btn{min-width:0;min-height:44px;padding:6px 3px;font-size:11px;white-space:normal;background:var(--ui-raised);color:var(--ui-text)}
#controls > .workspace-bottom > .workspace-tool-content{display:none}
#controls.is-sim-focus .workspace-primary-actions{display:none}
.lab-tools-dialog .workspace-tool-content{display:block!important}
.analysis-deepen{flex:none;min-height:32px;padding:0;border:0;border-radius:3px;background:transparent;color:var(--ui-accent);font:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;cursor:pointer}
.analysis-deepen:disabled{color:var(--ui-text);text-decoration:none;cursor:default}
.analysis-deepen:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
.analysis-deepen.is-working{color:#e5ba75}
.all-eval-badges[hidden]{display:none!important}
.board-actions[hidden]{display:none!important}
.board-actions.has-all-evals{display:block;padding:10px 0 12px}
.board-actions.has-all-evals > p{display:none}
.all-eval-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-width:0}
.all-eval-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:52px;min-width:0;padding:6px 4px;border:1px solid var(--ui-border);border-radius:5px;background:var(--ui-inset);text-align:center;font-variant-numeric:tabular-nums}
.all-eval-main{display:flex;align-items:baseline;justify-content:center;gap:5px;min-width:0;max-width:100%;white-space:nowrap;font-size:13px;font-weight:700;line-height:1.25}
.all-eval-main strong,.all-eval-main .all-eval-score{font-size:inherit;color:var(--ui-accent)}
.all-eval-main .all-eval-move{font-size:inherit;color:var(--ui-text)}
.all-eval-badge small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--ui-muted);line-height:1.2}
.all-eval-badge.is-unknown .all-eval-move,.all-eval-badge.is-unknown .all-eval-score{color:var(--ui-muted)}
.all-eval-badges button.all-eval-badge{font:inherit;color:inherit;cursor:pointer;appearance:none}
.all-eval-badges button.all-eval-badge:not(:disabled):hover{border-color:var(--ui-accent);background:var(--ui-raised)}
.all-eval-badges button.all-eval-badge:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.all-eval-badges button.all-eval-badge:disabled{cursor:default;opacity:.76}
.all-eval-badges button.all-eval-badge.is-working{border-color:var(--ui-accent)}
.all-eval-badges button.all-eval-badge.is-active{border-color:var(--ui-accent);background:var(--ui-raised)}
@media(max-width:420px){.all-eval-badges{gap:5px}.all-eval-badge{gap:2px;padding:5px 2px;min-height:46px}.all-eval-main{gap:3px;font-size:clamp(9px,2.8vw,13px)}.all-eval-badge small{font-size:clamp(8px,2.5vw,10px)}}


/* LAB internal close actions: match the high-visibility APP close affordance
 * without changing ordinary navigation, delete, remove or clear controls. */
body :is(.dialog-close, #btnCloseGames, #btnCloseSettings,
  #btnCoachClose, #geminiClose, #gameReviewPanel .game-review-heading > button,
  #deepAnalysisPanel [data-deep="close"], #simTournamentDialog [data-action="close"],
  .chess-study-close, .research-close) {
  background:#6f263b!important;
  color:#fff4f6!important;
  border-color:#b96c82!important;
}
body :is(.dialog-close, #btnCloseGames, #btnCloseSettings,
  #btnCoachClose, #geminiClose, #gameReviewPanel .game-review-heading > button,
  #deepAnalysisPanel [data-deep="close"], #simTournamentDialog [data-action="close"],
  .chess-study-close, .research-close):hover {
  background:#89354c!important;
}
body :is(.dialog-close, #btnCloseGames, #btnCloseSettings,
  #btnCoachClose, #geminiClose, #gameReviewPanel .game-review-heading > button,
  #deepAnalysisPanel [data-deep="close"], #simTournamentDialog [data-action="close"],
  .chess-study-close, .research-close):focus-visible {
  background:#89354c!important;
  outline:2px solid #efafc0;
  outline-offset:2px;
}

/* Unified ChessBest desktop information architecture: views above, actions below. */
body:not(.app-mobile) .legacy-view-controls{display:none!important}
body.app-mobile .desktop-view-shell{display:none!important}
.desktop-view-shell{margin:2px 0 10px;min-width:0}
.desktop-view-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:4px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-inset)}
.desktop-view-tabs button{min-width:0;min-height:38px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ui-muted);font:650 12px/1.2 system-ui,sans-serif;cursor:pointer}
.desktop-view-tabs button:hover{color:var(--ui-text);background:var(--ui-raised)}
.desktop-view-tabs button[aria-selected="true"]{color:var(--ui-ink);background:var(--ui-accent);border-color:var(--ui-accent)}
.desktop-view-tabs button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.desktop-view-context{display:flex;align-items:center;gap:8px;min-height:23px;padding:4px 2px 0}
#btnDesktopDccReplay{min-height:30px;padding:4px 9px;font-size:11px;background:var(--ui-raised);color:var(--ui-accent);border-color:var(--ui-border)}
#btnDesktopDccReplay[hidden]{display:none!important}
.desktop-view-context #dccProgress{flex:1;min-width:0;text-align:right}
body:not(.app-mobile) .workspace-top .mode-hint{display:none}
.lab-research-tools #btnDeepAnalysis{display:none!important}
.workspace-primary-actions #btnSim{font-weight:650}
@media (max-width:1059px){.desktop-view-tabs button{min-height:36px;font-size:11px}.workspace-primary-actions .btn{font-size:10.5px}}

/* UX2: analysis controls on top; navigation, views and actions form one aligned bottom stack. */
body:not(.app-mobile) .analysis-source-row{
  display:grid;grid-template-columns:auto minmax(82px,1fr) auto auto auto;
  align-items:center;gap:5px;margin:5px 0 3px;min-width:0
}
body:not(.app-mobile) .analysis-source-row select{width:100%;min-width:0;height:34px;min-height:34px;padding:3px 7px}
body:not(.app-mobile) .analysis-source-row .analysis-dcc-toggle{min-height:34px;justify-content:center;font-size:11px}
body:not(.app-mobile) .analysis-source-row .btn{min-width:0;min-height:34px;height:34px;padding:4px 7px;font-size:10.5px;line-height:1.1;white-space:nowrap}
body:not(.app-mobile) .analysis-deepen{
  border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-raised);
  color:var(--ui-accent);text-decoration:none;font-weight:650
}
body:not(.app-mobile) .analysis-deepen:hover:not(:disabled){border-color:var(--ui-accent);color:var(--ui-text)}
body:not(.app-mobile) .desktop-analysis-action{background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-border)}
body:not(.app-mobile) #btnDesktopDccAnalysis[aria-pressed="true"]{color:var(--ui-ink);background:var(--ui-accent);border-color:var(--ui-accent)}
.analysis-status-row{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-height:30px;margin:0 0 7px;padding:0 1px}
.analysis-status-row #analysisSourceStatus{display:block;min-width:0;color:#9ddbc4;font-size:10.5px;line-height:1.35;overflow-wrap:anywhere}
.analysis-status-row #dccProgress{display:block;min-width:0;height:auto;min-height:0;color:var(--ui-accent)!important;font-size:10px!important;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.analysis-status-row #dccProgress:empty{display:none}
body.app-mobile .desktop-analysis-action{display:none!important}
body.app-mobile .analysis-status-row{display:none!important}

body:not(.app-mobile) .desktop-control-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;width:100%;min-width:0}
body:not(.app-mobile) .desktop-nav-row{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.35fr) minmax(0,1fr) minmax(0,1fr);
  gap:6px;width:100%;margin:0!important
}
body:not(.app-mobile) .desktop-nav-row .btn{width:100%;min-width:0;height:44px;min-height:44px;margin:0;padding:6px 3px}
body:not(.app-mobile) .desktop-view-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;margin:0;padding:0;
  border:0;border-radius:0;background:transparent
}
body:not(.app-mobile) .desktop-view-tabs button{
  width:100%;min-width:0;min-height:44px;padding:6px 4px;border:1px solid var(--ui-border);
  border-radius:7px;background:var(--ui-raised);color:var(--ui-text);font:650 11px/1.2 system-ui,sans-serif
}
body:not(.app-mobile) .desktop-view-tabs button:hover{border-color:var(--ui-accent);color:var(--ui-accent)}
body:not(.app-mobile) .desktop-view-tabs button[aria-selected="true"]{color:var(--ui-ink);background:var(--ui-accent);border-color:var(--ui-accent)}
body:not(.app-mobile) .workspace-primary-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;margin:0}
body:not(.app-mobile) .workspace-primary-actions .btn{width:100%;min-height:44px;margin:0;padding:6px 4px;font-size:10.5px}
body:not(.app-mobile) #workspacePrimaryActions #btnNew{
  background:var(--ui-inset);color:var(--ui-text);border-color:var(--ui-border)
}
body:not(.app-mobile) #workspacePrimaryActions #btnNew:hover{border-color:var(--ui-accent);color:var(--ui-accent)}
body:not(.app-mobile) #workspacePrimaryActions #btnGames.is-active{
  background:var(--ui-inset);color:var(--ui-accent);border-color:var(--ui-accent)
}
body:not(.app-mobile) .workspace-bottom{padding-top:9px}
body.app-mobile .desktop-control-stack{display:none!important}