/* ==================== Eval gauge ==================== */
.eval-gauge {
  grid-area: gauge;
  width: 24px;
  position: relative;
  background: var(--c-gauge-white);
  border-radius: var(--radius-small);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  overflow: hidden;
  min-height: 200px;
  transition: transform 0.25s ease;
}
/* When the board is flipped to Black-at-bottom, the gauge flips with
   it so the advantaged side always fills toward its own end of the
   visual board. Rotated 180deg is simpler than swapping which edge
   gauge-black is pinned to — all child positioning keeps working. */
.eval-gauge.flipped {
  transform: rotate(180deg);
}

.gauge-black {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background: var(--c-gauge-black);
  transition: height 1s ease;
}

.gauge-tick.zero {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: var(--c-accent);
  opacity: 0.7;
  pointer-events: none;
}

.gauge-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  color: var(--c-bg-page);
  background: rgba(255,255,255,0.8);
  padding: 2px 4px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* ==================== Engine panel ==================== */
.ceval {
  background: linear-gradient(var(--c-bg-low), var(--c-bg-zebra));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 4px rgba(0,0,0,0.3);
}

.ceval-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pearl {
  font-size: 28px;
  font-weight: bold;
  font-family: var(--font-mono);
  color: var(--c-font-clear);
  min-width: 90px;
  text-align: center;
  letter-spacing: -0.02em;
}
.pearl.winning { color: var(--c-brilliant); }
.pearl.losing  { color: var(--c-bad); }
.pearl.mate    { color: var(--c-accent); }
.pearl.rule7 {
  text-decoration: underline dotted var(--c-accent);
  text-underline-offset: 4px;
  cursor: help;
}
.pearl.rule7::after {
  content: '⚠';
  color: var(--c-accent);
  font-size: 14px;
  margin-left: 3px;
  vertical-align: super;
}

.ceval-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}
.meta-big {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-font);
}
.meta-nps {
  font-size: 12px;
  color: var(--c-font-dim);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.ceval-bar {
  height: 3px;
  margin: 10px -14px 8px;
  background: var(--c-bg-low);
  position: relative;
  overflow: hidden;
}
#ceval-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-secondary);
  transition: width 0.6s ease;
}

.pv-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.pv-line {
  padding: 5px 6px;
  border-radius: var(--radius-small);
  cursor: default;
  display: flex;
  gap: 6px;
  line-height: 1.5;
}
.pv-line:hover { background: var(--c-bg-zebra2); }
.pv-line.best  { background: rgba(33,196,67,0.08); }
.pv-line .pv-rank {
  font-weight: bold;
  color: var(--c-font-dim);
  width: 24px;
  text-align: right;
}
.pv-line .pv-score {
  font-family: var(--font-mono);
  color: var(--c-font-clear);
  width: 60px;
  font-weight: 600;
}
.pv-line .pv-moves {
  flex: 1;
  color: var(--c-font);
  word-spacing: 0.2em;
  font-family: var(--font-san);
}
.pv-move {
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  transition: background var(--transition), color var(--transition);
}
.pv-move:hover {
  background: var(--c-primary);
  color: white;
}

/* ==================== Narration (legacy — retained) ==================== */
.narration {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  padding: 14px;
}
.narration p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* ==================== Tabbed panel ==================== */
.tabbed {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.tab-bar {
  display: flex;
  background: var(--c-bg-zebra);
  border-bottom: 1px solid var(--c-border);
}
.tab-btn {
  flex: 1;
  background: transparent;
  color: var(--c-font-dim);
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--transition), background var(--transition);
  border-bottom: 2px solid transparent;
}
.tab-btn:hover { background: var(--c-bg-zebra2); color: var(--c-font); }
.tab-btn.active {
  color: var(--c-font-clear);
  border-bottom-color: var(--c-accent);
  background: var(--c-bg);
}
.tab-panel {
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  max-height: 720px;
  overflow-y: auto;
}
.tab-panel[hidden] { display: none; }

/* ==================== Unified Position + Coach sections ==================== */
.unified-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.unified-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.unified-section-h {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.combined-cta {
  margin-bottom: 16px;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: var(--c-accent, #7aa7ff) !important;
  background: linear-gradient(180deg, rgba(122,167,255,0.10), rgba(122,167,255,0.04)) !important;
}
.combined-cta:hover {
  background: linear-gradient(180deg, rgba(122,167,255,0.18), rgba(122,167,255,0.08)) !important;
}
.combined-cta:disabled {
  opacity: 0.6;
  cursor: wait;
}
.budget-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px;
  background: var(--c-bg-zebra);
  border-radius: 6px;
}
.budget-picker-label {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.budget-opt {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  font-size: 11px;
  text-align: center;
  transition: all 0.15s;
}
.budget-opt:hover { background: var(--c-bg-zebra2); }
.budget-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.budget-opt input:checked + span {
  color: var(--c-font-clear);
  font-weight: 700;
}
.budget-opt:has(input:checked) {
  border-color: var(--c-accent, #7aa7ff);
  background: rgba(122,167,255,0.08);
}
.budget-opt em { color: var(--c-font-dim); font-style: normal; font-size: 10px; }
.cycle-progress {
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-font-dim);
}
.cycle-history {
  margin-top: 10px;
  padding: 8px;
  background: var(--c-bg-zebra);
  border-radius: 4px;
  font-size: 11px;
}
.cycle-history summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-font-dim);
}
.cost-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(82, 196, 26, 0.08), rgba(82, 196, 26, 0.02));
  border: 1px solid rgba(82, 196, 26, 0.35);
  border-radius: 6px;
  font-size: 12px;
}
.cost-badge-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cost-icon { font-size: 18px; }
.cost-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-font-clear);
  font-variant-numeric: tabular-nums;
}
.cost-label {
  color: var(--c-font-dim);
  font-weight: 500;
}
.cost-badge-detail {
  font-size: 11px;
  color: var(--c-font-dim);
  text-align: right;
  line-height: 1.5;
}

/* ==================== Dissect content ==================== */
.dissect-group {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}
.dissect-group:last-child { border-bottom: none; margin-bottom: 0; }
.dissect-group h4 {
  font-size: 11px;
  margin: 0 0 6px;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.dissect-group p {
  margin: 0;
  line-height: 1.5;
}
.dissect-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dissect-group ul li {
  padding: 3px 0 3px 14px;
  position: relative;
}
.dissect-group ul li::before {
  content: '▸';
  color: var(--c-accent);
  position: absolute;
  left: 0;
  font-size: 10px;
  top: 4px;
}

.tac-list,
.ideas-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.tac-list li,
.ideas-list li {
  padding: 6px 10px;
  margin-bottom: 4px;
  background: var(--c-bg-low);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  font-size: 13px;
  line-height: 1.45;
}
/* Per-idea colour accents */
.ideas-list li.idea-break    { border-left-color: var(--c-primary); }
.ideas-list li.idea-outpost  { border-left-color: var(--c-brilliant); }
.ideas-list li.idea-maneuver { border-left-color: var(--c-font-dim); }
.ideas-list li.idea-trade    { border-left-color: var(--c-mistake); }
.ideas-list li.idea-sac      { border-left-color: var(--c-bad); }
.ideas-list li.idea-plan     { border-left-color: var(--c-accent); }
.ideas-list li.idea-exploit  { border-left-color: var(--c-interesting); }

/* ==================== Imbalance panel ==================== */
.imb-group { background: var(--c-bg-low); border-radius: var(--radius-small); padding: 10px 12px; margin-bottom: 10px; }
.imb-system-mini {
  font-size: 10px;
  font-weight: normal;
  color: var(--c-font-dim);
  text-transform: none;
  letter-spacing: 0;
}
.imb-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 4px;
}
.imb-total {
  font-size: 24px;
  font-weight: bold;
  font-family: var(--font-mono);
  color: var(--c-font-clear);
  letter-spacing: -0.02em;
}
.imb-side { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.imb-meta, .imb-values {
  font-size: 11px;
  line-height: 1.5;
  padding: 2px 0;
}
.imb-values { font-family: var(--font-mono); }
.imb-system { color: var(--c-primary); font-weight: 600; }
.imb-breakdown {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  font-size: 13px;
}
.imb-breakdown li {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px dotted var(--c-border);
}
.imb-breakdown li:last-child { border-bottom: none; }
.imb-cp { font-family: var(--font-mono); font-weight: 600; }
.imb-cp.plus  { color: var(--c-brilliant); }
.imb-cp.minus { color: var(--c-bad); }
.imb-notes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
}
.imb-notes p { margin: 3px 0; color: var(--c-font-dim); }

/* Avrukh rules panel */
.avrukh-panel {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--c-accent);
}
.avrukh-block {
  background: rgba(214, 79, 0, 0.08);    /* translucent accent */
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.5;
}
.avrukh-block h5 {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.avrukh-text { color: var(--c-font); }
.avrukh-rules {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 12px;
}
.avrukh-rules li { margin: 3px 0; }
.avrukh-rules strong { color: var(--c-font-clear); }
.avrukh-rules em { color: var(--c-font-dim); font-style: italic; }

/* Calc details section */
.imb-calc {
  margin: 8px 0;
  padding: 8px;
  background: var(--c-bg);
  border-radius: var(--radius-small);
  border: 1px solid var(--c-border);
}
.imb-calc summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-font-dim);
  font-weight: 600;
}
.imb-arith-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.imb-arith h5 {
  font-size: 11px;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-font-clear);
}
.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.ac-table td {
  padding: 1px 2px;
  text-align: right;
  color: var(--c-font);
}
.ac-piece { text-align: left !important; color: var(--c-font-clear); }
.ac-times, .ac-eq { color: var(--c-font-dim); }
.ac-total td {
  border-top: 1px solid var(--c-border);
  padding-top: 3px;
  color: var(--c-brilliant);
  font-weight: bold;
}
.ac-total td:first-child { text-align: right !important; color: var(--c-font-dim); }
.imb-formula {
  margin: 6px 0 0;
  font-size: 11px;
  padding-top: 6px;
  border-top: 1px dashed var(--c-border);
}
.imb-formula strong {
  font-family: var(--font-mono);
  color: var(--c-font-clear);
}

details.dissect-details {
  margin-top: 12px;
  padding: 10px;
  background: var(--c-bg-low);
  border-radius: var(--radius-small);
  border: 1px solid var(--c-border);
}
details.dissect-details summary {
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-font-dim);
  font-weight: 600;
  user-select: none;
}
details.dissect-details[open] summary {
  color: var(--c-font-clear);
  margin-bottom: 10px;
}
.tac-list li.muted {
  background: transparent;
  border-left-color: var(--c-border);
  color: var(--c-font-dim);
  font-style: italic;
}
[data-tab-panel="tactics"] h4 {
  color: var(--c-font-clear);
  margin: 10px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-tab-panel="tactics"] h4:first-child { margin-top: 0; }

/* ==================== Move list ==================== */
.move-list-wrap {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  padding: 12px;
  display: flex;
  flex-direction: column;
  /* Let the wrap grow to a generous chunk of the viewport — the
     #move-list inside scrolls internally. The old 420 px cap meant the
     notation + (new) notation-below-slot + input all had to share that
     budget, squeezing moves down to only 2–3 visible rows after
     loading a long game. */
  max-height: min(78vh, 780px);
}

.move-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 10px;
}
.move-list-header h3 {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

.nav-buttons {
  display: flex;
  gap: 2px;
}

/* Board-level nav (always visible under the board) */
.board-nav {
  display: flex;
  gap: 3px;
  padding: 8px 0;
  align-items: center;
  justify-content: center;
}
.board-resize {
  position: absolute;
  right: -8px;
  bottom: 52px;  /* above the taller nav row */
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg,
      transparent 50%,
      var(--c-accent) 50%,
      var(--c-accent) 55%,
      transparent 55%,
      transparent 65%,
      var(--c-accent) 65%,
      var(--c-accent) 70%,
      transparent 70%,
      transparent 80%,
      var(--c-accent) 80%,
      var(--c-accent) 85%,
      transparent 85%);
  opacity: 0.5;
  transition: opacity var(--transition);
  z-index: 50;
}
.board-resize:hover { opacity: 1; }
.board-nav .nav-btn {
  width: 56px;
  height: 40px;
  font-size: 18px;
}
.nav-ply {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.nav-btn {
  background: var(--c-bg-low);
  color: var(--c-font);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-small);
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.nav-btn:hover  { background: var(--c-bg-zebra2); }
.nav-btn:active { background: var(--c-primary); color: white; }

#move-list {
  overflow-y: auto;
  flex: 1;
}

/* ──────────────────────────────────────────────────────────────── */
/* Move list — lichess "column view" for mainline + inline variations */
/* ──────────────────────────────────────────────────────────────── */
.tview2-column {
  font-family: var(--font-san);
  font-size: 17px;
  line-height: 1.35em;
  padding: 2px 0;
}

/* Each mainline ply-pair is a 3-column grid: [num.] [white] [black] */
.mg-row {
  display: grid;
  grid-template-columns: 42px 1fr 1fr;
  align-items: baseline;
}
.mg-row:nth-of-type(odd)  { background: rgba(255,255,255,0.015); }
.mg-row:hover             { background: rgba(255,255,255,0.04); }
.mg-num {
  text-align: right;
  padding: 4px 8px 4px 6px;
  font-size: 13px;
  color: var(--c-font-dim);
  font-weight: 600;
  user-select: none;
}
.mg-move {
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.08s, color 0.08s;
  white-space: nowrap;
}
.mg-move:hover { background: var(--c-bg-zebra2); }
.mg-move.current {
  background: var(--c-primary);
  color: white;
  font-weight: 700;
}
.mg-main { font-weight: 500; }
.mg-empty { cursor: default; }
.mg-empty:hover { background: transparent; }

/* Variations live between mainline rows — left-accented block with a
   subtle indent, different typography so the eye distinguishes them
   from the main line instantly. */
.mg-variations {
  padding: 6px 10px 6px 42px;
  border-left: 3px solid var(--c-accent);
  background: rgba(0,0,0,0.12);
  font-family: var(--font-san);
  font-size: 14px;
  line-height: 1.55em;
  color: var(--c-font-dim);
}
.mg-var {
  display: inline;
  margin-right: 6px;
}
.mg-var-num {
  color: var(--c-accent);
  font-weight: 600;
  font-size: 12px;
  margin-right: 2px;
}
.mg-var-move {
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.08s;
}
.mg-var-move:hover  { background: rgba(255,255,255,0.08); color: var(--c-font-clear); }
.mg-var-move.current {
  background: var(--c-accent);
  color: #111;
  font-weight: 700;
}
.mg-var-nested {
  color: var(--c-font-dim);
  font-size: 13px;
  margin: 0 3px;
  opacity: 0.85;
}

/* Right-click context menu on a move */
.move-context-menu {
  position: fixed;
  z-index: 1000;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  padding: 4px;
  min-width: 220px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.move-context-menu .mc-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.move-context-menu .mc-item:hover:not(:disabled) { background: var(--c-bg-zebra); }
.move-context-menu .mc-item:disabled { color: var(--c-muted); cursor: not-allowed; }

/* Keyboard move input */
.kbd-move {
  margin-top: 10px;
  width: 100%;
  background: var(--c-bg-low);
  color: var(--c-font);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-small);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  transition: border-color var(--transition);
}
.kbd-move:focus {
  outline: none;
  border-color: var(--c-primary);
}
.kbd-move.illegal {
  border-color: var(--c-bad);
  animation: shake 0.3s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ==================== Confidence badge ==================== */
.confidence { display: flex; flex-direction: column; gap: 6px; }
.confidence-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
  width: fit-content;
}
.confidence-badge[data-level="high"]    { background: var(--c-brilliant); color: #0a2a12; }
.confidence-badge[data-level="medium"]  { background: var(--c-mistake);  color: #2a1800; }
.confidence-badge[data-level="low"]     { background: var(--c-bad);      color: white;   }
.confidence-badge[data-level="unknown"] { background: var(--c-bg-low);   color: var(--c-font-dim); }
.confidence-reason { font-size: 12px; margin: 0; line-height: 1.4; }

/* ==================== Settings drawer ==================== */
.settings-drawer {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: none;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
/* `hidden` attribute is beaten by display:grid above — force it */
.settings-drawer[hidden] { display: none !important; }
.setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.setting label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.setting small {
  font-size: 11px;
  line-height: 1.35;
}
.setting select, .setting input[type="number"] {
  background: var(--c-bg-low);
  border: 1px solid var(--c-border);
  color: var(--c-font);
  padding: 5px 8px;
  border-radius: var(--radius-small);
  font-size: 13px;
}
.range-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.range-wrap input[type="range"] {
  flex: 1;
}
.badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  background: var(--c-bg-low);
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 36px;
  text-align: center;
}
.row-compact {
  display: flex;
  gap: 6px;
  align-items: center;
}
.limit-input {
  flex: 1;
  min-width: 60px;
}

/* ==================== Promotion overlay ==================== */
.promotion-overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 34, 32, 0.4);
  z-index: 205;
  pointer-events: auto;
}
.promotion-piece {
  position: absolute;
  width: 12.5%;
  aspect-ratio: 1;
  background-color: #b0b0b0;
  border-radius: 50%;
  box-shadow: inset 0 0 25px 3px #808080;
  cursor: pointer;
  transition: box-shadow var(--transition), border-radius var(--transition), transform var(--transition);
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(0.85);
}
.promotion-piece:hover {
  box-shadow: inset 0 0 48px 8px var(--c-accent);
  border-radius: 0;
  transform: scale(1);
}

/* ==================== "Why not X?" modal ==================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  color: var(--c-font-dim);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--c-font-clear); }
.modal-card h3 { margin-top: 0; }
.modal-wide { max-width: 800px; }

/* Tournament modal */
.tournament-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.tourn-select {
  width: 100%;
  background: var(--c-bg-low);
  color: var(--c-font);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-small);
  padding: 5px 8px;
  font-size: 12px;
}
.tournament-actions {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.tourn-standings {
  background: var(--c-bg-low);
  border-radius: var(--radius-small);
  padding: 12px;
  margin: 10px 0;
  border: 1px solid var(--c-border);
}
.standings-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  font-family: var(--font-mono);
}
.s-cell {
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border-radius: 3px;
  padding: 6px 4px;
  text-align: center;
}
.s-k { font-size: 10px; color: var(--c-font-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.s-v { font-size: 18px; font-weight: bold; color: var(--c-font-clear); }
.s-v.plus  { color: var(--c-brilliant); }
.s-v.minus { color: var(--c-bad); }

.tourn-live {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px;
  background: var(--c-bg-low);
  border-radius: var(--radius-small);
  min-height: 32px;
}
.tourn-log {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tourn-game-row {
  display: grid;
  grid-template-columns: 40px 70px 50px 1fr;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--c-border);
  align-items: baseline;
}
.g-num { color: var(--c-font-dim); }
.g-result { color: var(--c-brilliant); font-weight: bold; }
.g-ply { font-size: 10px; }
.g-pgn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.g-load { color: var(--c-primary); cursor: pointer; font-size: 14px; margin-left: 4px; }
.tourn-game-row { cursor: pointer; transition: background var(--transition); }
.tourn-game-row:hover { background: var(--c-bg-zebra2); }

/* Global AI bar (lives in the header) */
.ai-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(54, 146, 231, 0.12);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-small);
  padding: 5px 8px;
  flex-wrap: wrap;
}
.apikey-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--c-bg-low);
  border: 1px solid var(--c-border);
  color: var(--c-font-clear);
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius-small);
  box-sizing: border-box;
}
.apikey-input:focus { outline: none; border-color: var(--c-primary); }

/* Inline AI status messages (inside each tab's output area) */
.ai-status-msg {
  background: var(--c-bg-low);
  border-left: 4px solid var(--c-primary);
  padding: 14px 16px;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-font);
}
.ai-status-msg.warn {
  border-left-color: var(--c-accent);
  background: rgba(214, 79, 0, 0.08);
  color: var(--c-font-clear);
}
.ai-status-label {
  font-size: 12px;
  color: var(--c-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.btn.ai-go {
  background: var(--c-primary);
  color: white;
  border-color: var(--c-primary);
  font-weight: 600;
  padding: 6px 10px;
}
.btn.ai-go:hover {
  background: var(--c-font-clear);
  color: var(--c-primary);
  border-color: var(--c-font-clear);
}
.btn.ai-go:disabled {
  opacity: 0.5;
  cursor: wait;
}
.ai-status .coach-model-input {
  min-width: 220px;
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
}
select.coach-model-input {
  background: var(--c-bg-low);
  color: var(--c-font);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-small);
  font-family: var(--font-mono);
  cursor: pointer;
}
select.coach-model-input:focus { outline: none; border-color: var(--c-primary); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.ai-cost {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  min-width: 90px;
  text-align: right;
}

/* Big call-to-action button inside AI tabs */
.ai-big-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 16px 18px;
  background: linear-gradient(135deg,
    rgba(54, 146, 231, 0.10),
    rgba(54, 146, 231, 0.03));
  border: 1px dashed var(--c-primary);
  border-radius: var(--radius-panel);
  color: var(--c-font);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
  margin-bottom: 12px;
}
.ai-big-cta:hover {
  background: linear-gradient(135deg,
    rgba(54, 146, 231, 0.22),
    rgba(54, 146, 231, 0.10));
  border-style: solid;
}
.ai-big-cta:disabled { opacity: 0.5; cursor: wait; }
.ai-big-cta .cta-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-font-clear);
  margin-bottom: 4px;
}
.ai-big-cta .cta-sub {
  font-size: 12px;
  color: var(--c-font-dim);
  line-height: 1.4;
}

/* ==================== Coach tab ==================== */
.coach-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}
.coach-toolbar .btn { font-size: 13px; }
.coach-model-input {
  flex: 1;
  min-width: 150px;
  background: var(--c-bg-low);
  color: var(--c-font);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-small);
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.coach-model-input:focus { outline: none; border-color: var(--c-primary); }
.coach-cost {
  font-size: 11px;
  font-family: var(--font-mono);
  margin-left: auto;
}
.coach-ai-output {
  background: rgba(54, 146, 231, 0.08);
  border-left: 3px solid var(--c-primary);
  padding: 12px;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  margin-bottom: 12px;
  line-height: 1.55;
  font-size: 13.5px;
}
.ai-response p { margin: 0 0 8px; }
.ai-response strong { color: var(--c-font-clear); }
.ai-response code { background: var(--c-bg-low); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.ai-meta { font-size: 10px; margin-top: 8px; font-family: var(--font-mono); }

/* Engine ground-truth table shown above AI prose */
.engine-ground-truth {
  background: var(--c-bg-low);
  border-left: 3px solid var(--c-brilliant);
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.engine-ground-truth h4 {
  font-size: 11px;
  margin: 0 0 8px;
  color: var(--c-brilliant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sf-lines {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}
.sf-lines td { padding: 2px 4px; vertical-align: top; }
.sf-rank { color: var(--c-font-dim); width: 30px; }
.sf-san  { color: var(--c-font-clear); font-weight: bold; width: 70px; }
.sf-score { color: var(--c-primary); width: 60px; }
.sf-pv { font-size: 11px; }

/* Verification panel shown below AI prose */
.ai-verification {
  background: var(--c-bg-low);
  border-left: 3px solid var(--c-accent);
  padding: 10px 12px;
  margin-top: 12px;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.ai-verification h4 {
  font-size: 11px;
  margin: 0 0 6px;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-verification ul { list-style: none; margin: 0; padding: 0; }
.ai-verification li {
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-mono);
}
.ai-verification li.ok   { color: var(--c-brilliant); }
.ai-verification li.fail { color: var(--c-bad); background: rgba(204,51,51,0.08); }

.coach-opener {
  padding: 8px 10px;
  background: var(--c-bg-low);
  border-radius: var(--radius-small);
  margin-bottom: 10px;
  font-size: 13px;
}
.coach-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
}
.coach-section:last-child { border-bottom: none; }
.coach-section h4 {
  font-size: 11px;
  margin: 0 0 5px;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.coach-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.coach-section li {
  padding: 4px 0 4px 14px;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
}
.coach-section li::before {
  content: '•';
  color: var(--c-accent);
  position: absolute;
  left: 0;
}
.coach-section p { margin: 0; font-size: 13px; line-height: 1.5; }
.coach-section strong { color: var(--c-font-clear); }

/* Replay page (separate window) */
.replay-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.replay-board-wrap {
  display: flex;
  flex-direction: column;
}
.replay-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 300px;
}
.replay-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  padding: 12px;
}
.r-player {
  padding: 10px;
  border-radius: var(--radius-small);
}
.r-player.r-white { background: var(--c-bg-zebra2); color: var(--c-font-clear); }
.r-player.r-black { background: var(--c-bg-page); border: 1px solid var(--c-border); color: var(--c-font-clear); }
.r-player-label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--c-font-dim);
  margin-bottom: 3px;
}
.r-player-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.r-player-tag { font-size: 10px; margin-top: 2px; font-family: var(--font-mono); }
.r-vs { color: var(--c-font-dim); font-size: 14px; font-weight: bold; }
.replay-info .move-list-wrap, .replay-info .side-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  padding: 14px;
}
#r-move-list { max-height: 400px; overflow-y: auto; }

/* Engine-proof panel in tournament log */
.tourn-proof {
  background: var(--c-bg-low);
  border: 1px solid var(--c-secondary);
  border-left-width: 4px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-small);
  font-size: 11px;
}
.tourn-proof h4 {
  margin: 0 0 6px;
  font-size: 10px;
  color: var(--c-brilliant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.proof-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 6px;
  padding: 3px 0;
  align-items: baseline;
}
.proof-l {
  grid-row: span 2;
  font-weight: bold;
  color: var(--c-font-clear);
  font-size: 14px;
  text-align: center;
}
.proof-id     { color: var(--c-font-clear); }
.proof-script { font-size: 10px; font-family: var(--font-mono); grid-column: 2; }
.proof-warn   { color: var(--c-bad); margin: 6px 0 0; font-style: italic; }
.modal-narration {
  background: var(--c-bg-low);
  padding: 12px;
  border-radius: var(--radius-small);
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}
.modal-line {
  font-family: var(--font-san);
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────── */
/* Engine power button — primary on/off control, impossible to miss */
/* ──────────────────────────────────────────────────────────────── */
.engine-power {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 14px 18px;
  margin: 0 0 10px 0;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background: linear-gradient(180deg, #34a853 0%, #1e7b2e 100%);
  color: white;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease,
              box-shadow 0.12s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.engine-power:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.engine-power:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}
.engine-power.off {
  background: linear-gradient(180deg, #e53935 0%, #a02724 100%);
}
.engine-power-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9),
              0 0 0 2px rgba(255, 255, 255, 0.25);
  animation: enginePulse 1.6s ease-in-out infinite;
  margin-bottom: 2px;
}
.engine-power.off .engine-power-dot {
  animation: none;
  opacity: 0.9;
}
@keyframes enginePulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.25); opacity: 0.6; }
}
.engine-power-label {
  font-size: 20px;
  line-height: 1;
}
.engine-power-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Row that holds the big ENGINE power + THREAT side by side. Power
   button takes the bulk; threat is narrower. */
.engine-power-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
.engine-power-row .engine-power {
  flex: 2 1 auto;      /* wider */
  margin-bottom: 0;
}
.threat-btn {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background: linear-gradient(180deg, #ff9800 0%, #cc6f00 100%);
  color: white;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.threat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.threat-btn:active { transform: translateY(1px); }
.threat-btn:disabled {
  cursor: wait;
}
/* Active state — user clicked, engine is thinking. Pulsing and a
   darker saturated orange so the button is visibly "doing something". */
/* Active state — grey instead of orange so the color change vs the
   normal orange Threat button is obvious and unambiguous. */
.threat-btn.active {
  opacity: 1;
  background: linear-gradient(180deg, #666 0%, #333 100%);
  color: #e8e8e8;
  box-shadow: 0 0 0 3px rgba(200, 200, 200, 0.35),
              0 2px 6px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: threatPulse 0.9s ease-in-out infinite;
}
@keyframes threatPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200, 200, 200, 0.35),
                         0 2px 6px rgba(0, 0, 0, 0.3),
                         inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(180, 180, 180, 0.18),
                         0 2px 10px rgba(0, 0, 0, 0.35),
                         inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}
.threat-label { font-size: 18px; line-height: 1; }
.threat-sub   { font-size: 10px; font-weight: 500; opacity: 0.9; letter-spacing: 0.2px; text-transform: uppercase; }

.threat-output {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-left: 3px solid #ff9800;
  background: rgba(255, 152, 0, 0.08);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}
.threat-output .threat-move {
  font-family: var(--font-san);
  font-weight: 700;
  font-size: 16px;
  color: #cc6f00;
}
.threat-output .threat-score { font-family: var(--font-mono); color: var(--c-muted); }

/* ──────────────────────────────────────────────────────────────── */
/* Position editor (🛠 Setup) — uses cburnett SVG pieces (same set    */
/* as the main board), lichess-brown squares, clean piece chrome.   */
/* ──────────────────────────────────────────────────────────────── */
.editor-palette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  align-items: center;
}
.editor-palette-row {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 4px;
}
.editor-piece-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.1s, background 0.1s, transform 0.06s;
}
.editor-piece-btn:hover   { background: rgba(0, 0, 0, 0.08); }
.editor-piece-btn:active  { transform: translateY(1px); }
.editor-piece-btn.selected {
  border-color: #3c9a2b;
  background: rgba(60, 154, 43, 0.18);
  box-shadow: inset 0 0 0 1px rgba(60, 154, 43, 0.5);
}
.editor-piece-img.palette {
  /* Palette pieces are static inside a button — override the board-piece
     absolute positioning that would hide them inside a 40×40 box. */
  position: static;
  inset: auto;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  filter: none;
}
.editor-trash {
  width: auto;
  padding: 6px 12px;
  gap: 2px;
  flex-direction: column;
  color: #555;
  line-height: 1.1;
}
.editor-trash .trash-glyph { font-size: 20px; }
.editor-trash .trash-label { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 700; }
.editor-trash.selected {
  color: #a02724;
  border-color: #a02724;
  background: rgba(229, 57, 53, 0.14);
  box-shadow: inset 0 0 0 1px rgba(229, 57, 53, 0.5);
}

.editor-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(480px, 60vmin);
  aspect-ratio: 1 / 1;
  margin: 12px auto;
  border: 3px solid #5d4a37;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.editor-sq {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: filter 0.08s;
}
.editor-sq.light { background: #f0d9b5; }
.editor-sq.dark  { background: #b58863; }
.editor-sq:hover { filter: brightness(1.12); }
.editor-piece-img {
  position: absolute;
  inset: 4%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.editor-opts {
  display: flex;
  gap: 20px;
  margin: 12px 0 6px;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.editor-opts label { cursor: pointer; user-select: none; }

.editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Engine flavor selector lives in the main header — small and inline */
.header-flavor {
  height: 30px;
  max-width: 240px;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}

/* Castling-rights checkboxes inside the position editor */
.editor-castle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-size: 12px;
}
.editor-castle-label { color: var(--c-muted); font-weight: 600; }
.editor-castle-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.editor-castle-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-san);
  font-weight: 600;
}

/* ─── Dorfman positional-method panel (Position tab) ─────────── */
.dorfman-group {
  background: rgba(59, 130, 246, 0.06);
  border-left: 3px solid #3b82f6;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.dorfman-verdict {
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 8px;
}
.dorfman-verdict .dv-white { color: #333; background: #eee; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.dorfman-verdict .dv-black { color: #eee; background: #333; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.dorfman-verdict .dv-eq    { color: var(--c-muted); font-style: italic; }
.dorfman-factors {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  font-size: 12px;
}
.dorfman-factors li { padding: 4px 0; border-bottom: 1px dashed var(--c-border); }
.dorfman-factors li:last-child { border-bottom: none; }
.dorfman-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 4px;
}
.dorfman-chip-w  { background: #eee; color: #333; }
.dorfman-chip-b  { background: #333; color: #eee; }
.dorfman-chip-eq { background: rgba(120,120,120,0.2); color: var(--c-muted); }
.dorfman-critical {
  background: rgba(245, 158, 11, 0.15);
  border-left: 3px solid #f59e0b;
  padding: 6px 10px;
  margin: 8px 0 4px;
  font-size: 13px;
  color: #92400e;
}

/* ─── Practice mode — hide engine analysis so user doesn't see hints ── */
/* During an in-progress practice game the engine's views are hidden so
   the user can't cheat. Once the game ends (body.practice-finished is
   added on mate / stalemate / resign / draw) the hide rules lift and
   full engine eval returns for post-game analysis. */
body.practice-mode:not(.practice-finished) .pv-lines,
body.practice-mode:not(.practice-finished) #pv-lines,
body.practice-mode:not(.practice-finished) .pearl,
body.practice-mode:not(.practice-finished) .meta-big,
body.practice-mode:not(.practice-finished) .meta-nps,
body.practice-mode:not(.practice-finished) .ceval-bar {
  visibility: hidden;
}
/* Preserve panel height so the layout doesn't jump when hiding */
body.practice-mode:not(.practice-finished) .pv-lines,
body.practice-mode:not(.practice-finished) #pv-lines { min-height: 60px; }

/* ─── Practice game-flow card (sidebar) ─── */
.practice-card { display: none; }
/* Show practice cards only when NOT explicitly hidden — the hidden
   attribute must still win, else a restored draft auto-shows stale
   clock/action cards on page load even with no active practice game. */
body.practice-mode .practice-card:not([hidden]) { display: block; }
body.practice-mode .practice-card[hidden]       { display: none !important; }
.practice-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.practice-btn {
  flex: 1 1 calc(50% - 3px);
  min-width: 80px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-font);
  cursor: pointer;
  transition: background 0.12s;
}
.practice-btn:hover { background: var(--c-bg-zebra2); }
.practice-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.practice-btn.resign-btn:hover { background: rgba(220,53,69,0.15); border-color: #dc3545; }
.practice-btn.draw-btn:hover   { background: rgba(255,193,7,0.15);  border-color: #ffc107; }
.practice-btn.save-btn:hover   { background: rgba(82,196,26,0.15);  border-color: #52c41a; }
.practice-btn.again-btn:hover  { background: rgba(122,167,255,0.15); border-color: var(--c-accent, #7aa7ff); }
.practice-result {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--c-font-clear);
}
.practice-hint { font-style: italic; }

/* ─── Chess clock — polished ─── */
.clock-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}
/* When the user plays black, put the user's (black) clock on the
   bottom by reversing the stack. Matches the flipped board orientation. */
.clock-display[data-user-color="black"] {
  flex-direction: column-reverse;
}

.clock-side { position: relative; }
/* Use a single solid king glyph (♚) for both sides, colored to
   distinguish White (light fill) from Black (dark fill). No text label. */
.clock-side#clock-white .clock-piece { color: #f5f5f5; text-shadow: 0 0 1px #000, 0 1px 2px rgba(0,0,0,0.7); }
.clock-side#clock-black .clock-piece { color: #111; }
/* Letter variant (W/B) — bigger and more legible than the king glyph.
   Applied with .clock-letter in addition to .clock-piece. */
.clock-piece.clock-letter {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  padding: 2px 10px;
  border-radius: 4px;
}
.clock-side#clock-white .clock-piece.clock-letter { background: #f5f5f5; color: #000; text-shadow: none; border: 1px solid #c0c0c0; }
.clock-side#clock-black .clock-piece.clock-letter { background: #0a0a0a; color: #fff; border: 1px solid #333; }
.clock-side {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(35,35,42,0.95), rgba(25,25,30,0.95)),
    radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 60%);
  border: 2px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* Subtle sheen on the active clock */
.clock-side::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 55%, rgba(255,255,255,0.03) 100%);
  pointer-events: none;
}
.clock-side.active {
  border-color: rgba(122, 167, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(45,55,85,0.98), rgba(30,38,60,0.98)),
    radial-gradient(circle at top left, rgba(122,167,255,0.15), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 16px rgba(122,167,255,0.35),
    0 0 0 3px rgba(122,167,255,0.15);
  transform: translateY(-1px);
}
.clock-side.low-time {
  border-color: rgba(253,126,20,0.9);
  background:
    linear-gradient(135deg, rgba(75,45,20,0.95), rgba(50,30,15,0.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 16px rgba(253,126,20,0.45);
}
.clock-side.low-time .clock-time { color: #fd7e14; }
.clock-side.critical-time {
  border-color: rgba(220,53,69,0.95);
  background:
    linear-gradient(135deg, rgba(85,25,35,0.98), rgba(50,15,20,0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 20px rgba(220,53,69,0.6);
  animation: clockPulse 0.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.clock-side.critical-time .clock-time {
  color: #ff4757;
  text-shadow: 0 0 12px rgba(255,71,87,0.6);
}
@keyframes clockPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 20px rgba(220,53,69,0.6); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 28px rgba(220,53,69,0.9); }
}
.clock-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
}
.clock-side#clock-white .clock-piece { color: #eaeaea; }
.clock-side#clock-black .clock-piece { color: #b0b0b0; }
.clock-side.active .clock-piece {
  background: linear-gradient(135deg, rgba(122,167,255,0.25), rgba(122,167,255,0.08));
  border-color: rgba(122,167,255,0.5);
  animation: clockRing 1s ease-in-out infinite;
}
@keyframes clockRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122,167,255,0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(122,167,255,0); }
}
.clock-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}
.clock-side.active .clock-label { color: rgba(255,255,255,0.85); }
.clock-time {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-font-clear);
  line-height: 1;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  text-align: right;
}
.clock-format-line {
  text-align: center;
  font-size: 10px;
  color: var(--c-font-dim);
  margin: 8px 0 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}

/* ─── Clock style switcher ─── */
.clock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.clock-style-switcher {
  display: flex;
  gap: 3px;
}
.clock-style-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-zebra);
  color: var(--c-font-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.clock-style-btn:hover {
  background: var(--c-bg-zebra2);
  color: var(--c-font);
}
.clock-style-btn.active {
  background: rgba(122,167,255,0.2);
  border-color: var(--c-accent, #7aa7ff);
  color: var(--c-font-clear);
  box-shadow: 0 0 0 1px rgba(122,167,255,0.3);
}

/* ─── Theme variants ─── */
/* Default = digital-dark (original styles above). */

/* digital-light — reverse colour scheme, paper-white face */
.clock-display[data-style="digital-light"] .clock-side {
  background:
    linear-gradient(135deg, rgba(250,250,252,0.98), rgba(230,230,234,0.98)),
    radial-gradient(circle at top left, rgba(0,0,0,0.04), transparent 60%);
  border-color: rgba(0,0,0,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 8px rgba(0,0,0,0.15);
}
.clock-display[data-style="digital-light"] .clock-time {
  color: #1c1c20;
  text-shadow: none;
}
.clock-display[data-style="digital-light"] .clock-label { color: rgba(0,0,0,0.55); }
.clock-display[data-style="digital-light"] .clock-side.active .clock-label { color: rgba(0,0,0,0.85); }
.clock-display[data-style="digital-light"] .clock-side#clock-white .clock-piece { color: #444; }
.clock-display[data-style="digital-light"] .clock-side#clock-black .clock-piece { color: #111; }
.clock-display[data-style="digital-light"] .clock-piece {
  background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
  border-color: rgba(0,0,0,0.15);
}

/* digital-led — tactical-clock style, red 7-segment-ish glow on black */
.clock-display[data-style="digital-led"] .clock-side {
  background: linear-gradient(135deg, #050508, #0a0a10);
  border-color: rgba(255, 60, 30, 0.25);
  box-shadow:
    inset 0 0 14px rgba(255, 60, 30, 0.15),
    0 2px 12px rgba(0,0,0,0.6);
}
.clock-display[data-style="digital-led"] .clock-time {
  color: #ff4422;
  font-family: 'Courier New', monospace;
  text-shadow:
    0 0 2px #ff4422,
    0 0 6px rgba(255, 68, 34, 0.8),
    0 0 18px rgba(255, 68, 34, 0.35);
  letter-spacing: 0.04em;
}
.clock-display[data-style="digital-led"] .clock-label {
  color: rgba(255, 68, 34, 0.6);
  letter-spacing: 0.18em;
}
.clock-display[data-style="digital-led"] .clock-side.active {
  border-color: rgba(255, 120, 60, 0.9);
  box-shadow:
    inset 0 0 20px rgba(255, 120, 60, 0.25),
    0 0 16px rgba(255, 120, 60, 0.4);
}
.clock-display[data-style="digital-led"] .clock-side.active .clock-time {
  text-shadow:
    0 0 3px #ffaa22,
    0 0 10px #ffaa22,
    0 0 24px rgba(255, 170, 34, 0.5);
  color: #ffaa22;
}
.clock-display[data-style="digital-led"] .clock-side.critical-time .clock-time {
  color: #ff2020;
  text-shadow: 0 0 3px #ff2020, 0 0 14px #ff2020, 0 0 28px rgba(255,32,32,0.6);
}
.clock-display[data-style="digital-led"] .clock-piece {
  background: #1a0a08;
  border-color: rgba(255, 60, 30, 0.3);
  color: rgba(255, 170, 90, 0.7);
}

/* digital-mega — huge numbers that fill the card */
.clock-display[data-style="digital-mega"] .clock-side {
  grid-template-columns: 1fr;
  padding: 20px 14px;
  text-align: center;
  background: linear-gradient(180deg, #0b0d14, #1a1e2c);
  border-color: rgba(255,255,255,0.15);
}
.clock-display[data-style="digital-mega"] .clock-piece {
  display: none;
}
.clock-display[data-style="digital-mega"] .clock-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 4px;
}
.clock-display[data-style="digital-mega"] .clock-time {
  font-size: 56px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #f0f4ff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.clock-display[data-style="digital-mega"] .clock-side.active .clock-time {
  color: #7aa7ff;
  text-shadow: 0 0 18px rgba(122,167,255,0.5), 0 2px 8px rgba(0,0,0,0.6);
}
.clock-display[data-style="digital-mega"] .clock-side.critical-time .clock-time {
  color: #ff4757;
  text-shadow: 0 0 20px rgba(255,71,87,0.7);
}

/* digital-neon — glowing neon-tube aesthetic on matte-black */
.clock-display[data-style="digital-neon"] .clock-side {
  background: #0a0a0f;
  border: 2px solid rgba(255,0,220,0.35);
  box-shadow: inset 0 0 20px rgba(255,0,220,0.08);
}
.clock-display[data-style="digital-neon"] .clock-piece {
  color: #ff00dc;
  background: transparent;
  border-color: rgba(255,0,220,0.4);
  text-shadow: 0 0 6px #ff00dc;
}
.clock-display[data-style="digital-neon"] .clock-label {
  color: rgba(0, 240, 255, 0.6);
  text-shadow: 0 0 6px rgba(0,240,255,0.4);
  letter-spacing: 0.18em;
}
.clock-display[data-style="digital-neon"] .clock-time {
  color: #00f0ff;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-shadow:
    0 0 3px #00f0ff,
    0 0 10px rgba(0,240,255,0.8),
    0 0 26px rgba(0,240,255,0.45),
    0 0 60px rgba(0,240,255,0.2);
}
.clock-display[data-style="digital-neon"] .clock-side.active {
  border-color: #ff00dc;
  box-shadow:
    inset 0 0 30px rgba(255,0,220,0.15),
    0 0 30px rgba(255,0,220,0.4);
}
.clock-display[data-style="digital-neon"] .clock-side.active .clock-time {
  color: #ff00dc;
  text-shadow:
    0 0 4px #ff00dc,
    0 0 14px #ff00dc,
    0 0 28px rgba(255,0,220,0.7);
}
.clock-display[data-style="digital-neon"] .clock-side.critical-time .clock-time {
  color: #ffff00;
  text-shadow: 0 0 4px #ffff00, 0 0 18px #ffff00, 0 0 40px rgba(255,255,0,0.6);
}

/* digital-flip — split-flap airport / train display */
.clock-display[data-style="digital-flip"] .clock-side {
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
  padding: 10px 12px;
}
.clock-display[data-style="digital-flip"] .clock-piece {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #e8d875;
}
.clock-display[data-style="digital-flip"] .clock-label {
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.clock-display[data-style="digital-flip"] .clock-time {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-weight: 700;
  color: #e8d875;                              /* classic Solari amber */
  padding: 6px 10px;
  background:
    linear-gradient(180deg, #2f2f2f 0%, #2f2f2f 48%, #000 49%, #000 51%, #1a1a1a 52%, #1a1a1a 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.05);
  letter-spacing: 0.06em;
}
.clock-display[data-style="digital-flip"] .clock-side.active .clock-time {
  background:
    linear-gradient(180deg, #3a3828 0%, #3a3828 48%, #000 49%, #000 51%, #22201a 52%, #22201a 100%);
  color: #fff6c0;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 0 14px rgba(232,216,117,0.35);
}

/* ─── digital-chronos — Chronos GX tournament clock (blue) ───
   Iconic elongated charcoal case with two side-by-side blue 7-segment
   displays. Lays out horizontally (row) instead of the default column
   so it reads like the real unit on a tournament table. The column-
   reverse trick for user-color matching is swapped to row-reverse. */
.clock-display[data-style="digital-chronos"] {
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 10px;
  background:
    linear-gradient(180deg, #1b1d22 0%, #0d0e11 50%, #1b1d22 100%);
  border-radius: 16px;
  border: 1px solid #2a2d33;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 6px rgba(0,0,0,0.6),
    0 4px 14px rgba(0,0,0,0.45);
  position: relative;
}
.clock-display[data-style="digital-chronos"]::before {
  /* CHRONOS GX brand plate */
  content: 'CHRONOS GX';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.42em;
  color: #4b6fb5;
  text-shadow: 0 0 4px rgba(75,111,181,0.6);
}
.clock-display[data-style="digital-chronos"][data-user-color="black"] {
  flex-direction: row-reverse;
}
.clock-display[data-style="digital-chronos"] .clock-side {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px 10px;
  background:
    radial-gradient(ellipse at top, #0a0f1c 0%, #05080f 70%);
  border-radius: 10px;
  border: 1px solid #1a2238;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.8),
    inset 0 0 18px rgba(20,60,160,0.12);
  position: relative;
}
.clock-display[data-style="digital-chronos"] .clock-side::after {
  /* small indicator LED that lights up for the ticking side */
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a2232;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
}
.clock-display[data-style="digital-chronos"] .clock-side.active::after {
  background: #3b8bff;
  box-shadow:
    0 0 6px #3b8bff,
    0 0 14px rgba(59,139,255,0.7);
}
.clock-display[data-style="digital-chronos"] .clock-piece {
  font-size: 18px;
  line-height: 1;
  color: #5687e8;
  text-shadow: 0 0 3px rgba(86,135,232,0.6);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.clock-display[data-style="digital-chronos"] .clock-side#clock-white .clock-piece { color: #eaf2ff; text-shadow: 0 0 3px rgba(200,220,255,0.6); }
.clock-display[data-style="digital-chronos"] .clock-side#clock-black .clock-piece { color: #3b5aa0; text-shadow: 0 0 3px rgba(59,90,160,0.6); }
.clock-display[data-style="digital-chronos"] .clock-time {
  font-family: 'DSEG7 Classic', 'Courier New', monospace;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: #4fa0ff;
  text-shadow:
    0 0 2px #4fa0ff,
    0 0 8px rgba(79,160,255,0.9),
    0 0 22px rgba(59,139,255,0.55);
  padding: 2px 8px;
  background: transparent;
}
.clock-display[data-style="digital-chronos"] .clock-side.active .clock-time {
  color: #87c5ff;
  text-shadow:
    0 0 2px #87c5ff,
    0 0 10px #4fa0ff,
    0 0 28px rgba(79,160,255,0.8);
}
.clock-display[data-style="digital-chronos"] .clock-side.low-time .clock-time {
  color: #ffd04a;
  text-shadow: 0 0 3px #ffd04a, 0 0 12px rgba(255,208,74,0.8);
}
.clock-display[data-style="digital-chronos"] .clock-side.critical-time .clock-time {
  color: #ff5a4a;
  text-shadow: 0 0 3px #ff5a4a, 0 0 14px rgba(255,90,74,0.9);
}

/* ─── Learn-from-mistakes — lichess-inspired visual language ─── */
/* Colors pulled from lichess _theme.default.scss:
     $c-primary   hsl(209, 79%, 56%)   #3893e8  (accent blue)
     $c-good      hsl(88, 62%, 37%)    #759900  (win green)
     $c-bad       hsl(0, 60%, 50%)     #cc3333  (fail red) */
.practice-btn.learn-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #3893e8 0%, #2a78c4 100%);
  color: #fff;
  border: 1px solid #1f5e9e;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.15s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.practice-btn.learn-btn:hover    { filter: brightness(1.08); }
.practice-btn.learn-btn:active   { filter: brightness(0.95); }
.practice-btn.learn-btn[disabled] {
  background: #444;
  border-color: #333;
  color: #888;
  cursor: not-allowed;
  filter: none;
}
.practice-btn.learn-btn .learn-btn-icon  { font-size: 20px; line-height: 1; }
.practice-btn.learn-btn .learn-btn-label { flex: 1; text-align: left; text-transform: uppercase; }
.practice-btn.learn-btn .learn-btn-count {
  background: rgba(255,255,255,0.22);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

/* The floating retro panel — matches lichess retro-box aesthetic.
   Square corners, tight padding, clear state colors. */
#learn-panel {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 0 !important;
  border-radius: 4px !important;
  overflow: hidden;
  min-width: 300px;
}
.retro-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  line-height: 1.9em;
  padding: 0 10px;
  background: rgba(56, 147, 232, 0.4);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.retro-title .retro-counter {
  font-size: 0.85em;
  font-weight: 600;
  opacity: 0.9;
}
.retro-title .retro-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.retro-title .retro-close:hover { opacity: 0.8; }
.retro-body {
  padding: 14px 14px 10px;
}
.retro-body .retro-prompt   { font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.retro-body .retro-played   { opacity: 0.75; font-size: 13px; margin: 0 0 8px; }
.retro-body strong          { font-weight: 800; }

.retro-icon-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}
.retro-icon-line .retro-icon { font-size: 36px; line-height: 1; }
.retro-win  { color: #759900; }
.retro-fail { color: #cc3333; }

.retro-choices {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.retro-choices .retro-btn {
  flex: 1;
  padding: 7px 10px;
  background: #2a2a2a;
  color: #eee;
  border: 1px solid #444;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: filter 0.15s;
}
.retro-choices .retro-btn:hover { filter: brightness(1.15); }
.retro-choices .retro-btn.retro-continue {
  background: rgba(56, 147, 232, 0.85);
  color: #fff;
  border-color: #1f5e9e;
}
.retro-choices .retro-btn.retro-continue:hover {
  background: rgba(56, 147, 232, 1);
}

.retro-progress {
  height: 4px;
  background: hsl(0, 0%, 20%);
  border-radius: 2px;
  overflow: hidden;
  margin: 10px 0 0;
}
.retro-progress > div {
  height: 100%;
  width: 25%;
  background: hsl(209, 79%, 56%);
  transition: width 0.25s;
}

/* ─── digital-jumbo — light theme, maximum-contrast big numbers ─── */
.clock-display[data-style="digital-jumbo"] {
  padding: 6px;
  gap: 6px;
}
.clock-display[data-style="digital-jumbo"] .clock-side {
  background: #f3f4f6;
  border: 2px solid #111;
  border-radius: 12px;
  padding: 14px 10px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.clock-display[data-style="digital-jumbo"] .clock-side.active {
  background: #fff5d1;
  border-color: #a67c00;
  box-shadow: inset 0 -4px 0 rgba(166,124,0,0.2), 0 0 0 3px rgba(255,210,50,0.45);
}
.clock-display[data-style="digital-jumbo"] .clock-side.low-time     { background: #ffe7bf; border-color: #a85800; }
.clock-display[data-style="digital-jumbo"] .clock-side.critical-time { background: #ffd3d3; border-color: #aa0a0a; }
.clock-display[data-style="digital-jumbo"] .clock-piece {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
  background: transparent; border: none; padding: 0;
}
.clock-display[data-style="digital-jumbo"] .clock-side#clock-white .clock-piece { color: #0d0d0d; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; }
.clock-display[data-style="digital-jumbo"] .clock-side#clock-black .clock-piece { color: #000; }
.clock-display[data-style="digital-jumbo"] .clock-time {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  /* 72 px was getting clipped on narrower side panels; 56 px is still
     jumbo and fits any seconds string (e.g. 59:59) without truncation. */
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b0b0b;
  line-height: 1;
  padding: 0 4px;
  background: transparent;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  width: 100%;
}
.clock-display[data-style="digital-jumbo"] .clock-side.critical-time .clock-time { color: #aa0a0a; }

/* ─── digital-stadium — dot-matrix LED scoreboard ─── */
.clock-display[data-style="digital-stadium"] {
  padding: 8px 6px;
  gap: 6px;
  background: #05060a;
  border: 2px solid #1a1f2a;
  border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
}
.clock-display[data-style="digital-stadium"] .clock-side {
  background:
    radial-gradient(circle at 50% 40%, #0a0f1a 0%, #030407 80%);
  border: 1px solid #0e1420;
  border-radius: 6px;
  padding: 10px 8px 6px;
  position: relative;
}
/* Dot-matrix texture — fine grid overlay so the digits look like LEDs */
.clock-display[data-style="digital-stadium"] .clock-side::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1.5px);
  background-size: 4px 4px;
  border-radius: inherit;
}
.clock-display[data-style="digital-stadium"] .clock-piece {
  font-size: 16px;
  color: #ffae2b;
  text-shadow: 0 0 4px rgba(255,174,43,0.7);
  background: transparent; border: none;
}
.clock-display[data-style="digital-stadium"] .clock-side#clock-white .clock-piece { color: #ffe0a0; }
.clock-display[data-style="digital-stadium"] .clock-side#clock-black .clock-piece { color: #b87000; }
.clock-display[data-style="digital-stadium"] .clock-time {
  font-family: 'DSEG7 Classic', 'Courier New', monospace;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffb42a;
  text-shadow:
    0 0 2px #ffb42a,
    0 0 10px rgba(255,180,42,0.85),
    0 0 22px rgba(255,130,0,0.55);
  padding: 2px 6px;
  background: transparent;
}
.clock-display[data-style="digital-stadium"] .clock-side.active .clock-time {
  color: #ffe06a;
  text-shadow:
    0 0 2px #ffe06a,
    0 0 12px #ffb42a,
    0 0 32px rgba(255,180,42,0.85);
}
.clock-display[data-style="digital-stadium"] .clock-side.low-time .clock-time {
  color: #ff7a00;
  text-shadow: 0 0 3px #ff7a00, 0 0 14px rgba(255,122,0,0.9);
}
.clock-display[data-style="digital-stadium"] .clock-side.critical-time .clock-time {
  color: #ff2a2a;
  text-shadow: 0 0 3px #ff2a2a, 0 0 14px rgba(255,42,42,0.95);
}

/* ─── Hierarchical opening tree (practice modal) ─── */
.practice-opening-tree {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg);
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.5;
}
.practice-opening-tree summary {
  cursor: pointer;
  padding: 3px 0;
  list-style: none;
  user-select: none;
  color: var(--c-font);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.practice-opening-tree summary::marker,
.practice-opening-tree summary::-webkit-details-marker { display: none; }
.practice-opening-tree summary::before {
  content: '▸';
  display: inline-block;
  width: 10px;
  color: var(--c-font-dim);
  transition: transform 0.15s;
}
.practice-opening-tree details[open] > summary::before { transform: rotate(90deg); }
.practice-opening-tree details { margin-left: 0; }
.practice-opening-tree details details { margin-left: 14px; }
.practice-opening-tree .tree-family-eco {
  font-family: var(--font-mono);
  color: var(--c-font-dim);
  font-size: 10px;
  margin-left: 6px;
  font-weight: 400;
}
.practice-opening-tree .tree-family-count {
  margin-left: auto;
  color: var(--c-font-dim);
  font-size: 10px;
  font-weight: 400;
}
.practice-opening-tree .tree-leaf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 24px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.08s;
}
.practice-opening-tree .tree-leaf:hover { background: var(--c-bg-zebra2); }
.practice-opening-tree .tree-leaf.selected {
  background: rgba(122,167,255,0.2);
  border-left: 2px solid var(--c-accent, #7aa7ff);
}
.practice-opening-tree .tree-leaf-name { flex: 1; }
.practice-opening-tree .tree-leaf-eco {
  font-family: var(--font-mono);
  color: var(--c-font-dim);
  font-size: 10px;
}
.practice-opening-tree .tree-leaf-fav {
  cursor: pointer;
  color: var(--c-font-dim);
  opacity: 0.5;
  padding: 0 4px;
}
.practice-opening-tree .tree-leaf-fav.starred {
  color: #ffc107;
  opacity: 1;
}
.practice-opening-tree .tree-leaf-fav:hover { opacity: 1; }

/* Floating preview popup shown on hover over a practice-tree leaf.
   Pure Unicode chess — no engine / SVG required. */
.tree-hover-preview {
  position: fixed;
  z-index: 10000;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  padding: 6px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.8);
  pointer-events: none;
}
.tree-hover-preview .preview-board {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows:    repeat(8, 50px);
  width:  400px;
  height: 400px;
}
.tree-hover-preview .preview-board .sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  line-height: 1;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', serif;
}
.tree-hover-preview .preview-board .sq.l { background: #f0d9b5; color: #000; }
.tree-hover-preview .preview-board .sq.d { background: #b58863; color: #000; }

/* W / B / Both mini-buttons next to starred favourites. */
.practice-opening-tree .tree-leaf-side {
  display: inline-flex;
  gap: 2px;
  margin-right: 4px;
}
.practice-opening-tree .side-pick {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  line-height: 1;
  border: 1px solid var(--c-border);
  background: var(--c-bg-low);
  color: var(--c-font-dim);
  border-radius: 3px;
  cursor: pointer;
}
.practice-opening-tree .side-pick:hover { color: var(--c-font); }
.practice-opening-tree .side-pick.active[data-side-pick="white"] { background: #f5f5f5; color: #0b0b0b; border-color: #777; }
.practice-opening-tree .side-pick.active[data-side-pick="black"] { background: #111;    color: #fff;    border-color: #000; }
.practice-opening-tree .side-pick.active[data-side-pick="both"]  { background: #7aa7ff; color: #fff;    border-color: #4a7fd9; }
.practice-opening-tree .tree-lichess-badge {
  font-size: 9px;
  color: #7aa7ff;
  font-weight: 600;
  background: rgba(122,167,255,0.12);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}
/* Custom-opening groups (user-saved) get a subtle gold-tinted header
   so they read as 'yours' at a glance, distinct from curated theory. */
.practice-opening-tree details.tree-custom-group > summary {
  color: #ffd166;
  font-weight: 600;
}
.practice-opening-tree details.tree-custom-group {
  background: rgba(255, 209, 102, 0.04);
  border-left: 3px solid rgba(255, 209, 102, 0.55);
  margin: 2px 0;
  border-radius: 4px;
}
.practice-opening-tree details.tree-custom-group > summary .tree-family-count {
  color: rgba(255, 209, 102, 0.7);
}

.practice-opening-tree .tree-leaf-del {
  font-size: 11px;
  padding: 1px 5px;
  margin-left: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.12s;
}
.practice-opening-tree .tree-leaf:hover .tree-leaf-del { opacity: 1; }
.practice-opening-tree .tree-leaf-del:hover {
  background: rgba(244, 67, 54, 0.18);
  border-color: #f44336;
  color: #ff6e63;
}
.practice-opening-tree .tree-empty {
  padding: 20px;
  text-align: center;
  color: var(--c-font-dim);
  font-style: italic;
}

/* ─── Analog Garde clock ─── */
.clock-analog {
  padding: 8px;
  background:
    linear-gradient(135deg, #3a2f22, #1f1812);
  border-radius: 10px;
  border: 2px solid #1a1310;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.6),
    0 2px 10px rgba(0,0,0,0.4);
  position: relative;
}
.clock-analog::after {
  /* brass plate rivets */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle 2px at 8px 8px, rgba(255,220,160,0.5), transparent 2.5px),
    radial-gradient(circle 2px at calc(100% - 8px) 8px, rgba(255,220,160,0.5), transparent 2.5px),
    radial-gradient(circle 2px at 8px calc(100% - 8px), rgba(255,220,160,0.5), transparent 2.5px),
    radial-gradient(circle 2px at calc(100% - 8px) calc(100% - 8px), rgba(255,220,160,0.5), transparent 2.5px);
}
.clock-analog-svg {
  display: block;
  width: 100%;
  height: 120px;
}

/* ─── Eval timeline (#1) ─── */
.eval-timeline {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.eval-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 11px;
}
.eval-timeline-title {
  font-weight: 700;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.eval-timeline-stats {
  color: var(--c-font-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}
.panel-hide-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-font-dim);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  line-height: 1;
  margin-left: 6px;
}
.panel-hide-btn:hover {
  background: rgba(220,53,69,0.15);
  color: #dc3545;
  border-color: #dc3545;
}
.eval-timeline-header, .pawn-strip-header {
  align-items: center !important;
}
/* Lichess-style eval graph: bidirectional fill (white below zero when
   White is better, black above zero when Black is better), line
   crosses at the zero baseline. */
.eval-timeline-svg {
  display: block;
  width: 100%;
  height: 100px;
  cursor: crosshair;
  background: #6b6b6b;   /* neutral mid-grey — fills will cover */
  border-radius: 4px;
}
.eval-timeline-svg .eval-line {
  fill: none;
  stroke: rgba(255, 193, 7, 0.9);   /* gold — highly visible against both fills */
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.eval-timeline-svg .eval-area-white {
  fill: #efefef;
  stroke: none;
}
.eval-timeline-svg .eval-area-black {
  fill: #262626;
  stroke: none;
}
.eval-timeline-svg .eval-zero {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}

/* Accuracy pills — one per ply, coloured by move quality. */
.accuracy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 0;
}
.accuracy-pills .acc-pill {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s;
  border: 1px solid rgba(0,0,0,0.3);
}
.accuracy-pills .acc-pill:hover { transform: scale(1.4); z-index: 2; }
.accuracy-pills .acc-pill.current { outline: 2px solid #ffc107; outline-offset: 1px; }
/* Quality colours — green → red gradient via six bins */
.accuracy-pills .acc-best       { background: #22c55e; }  /* best or near-best */
.accuracy-pills .acc-good       { background: #84cc16; }  /* within 30 cp */
.accuracy-pills .acc-ok         { background: #facc15; }  /* within 80 cp  */
/* User-requested colour scheme (severity-ascending, muted → sharp):
     inaccuracy → blue, mistake → gray, blunder → black. */
.accuracy-pills .acc-inaccuracy { background: #3893e8; }  /* blue */
.accuracy-pills .acc-mistake    { background: #888888; }  /* gray */
.accuracy-pills .acc-blunder    { background: #111111; border: 1px solid #444; }  /* black, subtle ring so it's visible on dark bg */
.accuracy-pills .acc-unknown    { background: #555;    }  /* eval unavailable */
.accuracy-pills .acc-move-label {
  position: absolute;
  top: -2px;
  left: 0;
  font-size: 7px;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
  pointer-events: none;
}
.eval-timeline-svg .eval-dot {
  cursor: pointer;
  transition: r 0.1s;
}
.eval-timeline-svg .eval-dot:hover { r: 5; }
.eval-timeline-svg .eval-dot.blunder    { fill: #dc3545; }
.eval-timeline-svg .eval-dot.mistake    { fill: #fd7e14; }
.eval-timeline-svg .eval-dot.inaccuracy { fill: #ffc107; }
.eval-timeline-svg .eval-cursor {
  stroke: var(--c-accent, #7aa7ff);
  stroke-width: 2;
  opacity: 0.7;
}

/* ─── Pawn-structure strip (#5) ─── */
.pawn-strip {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.pawn-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 11px;
}
.pawn-strip-title {
  font-weight: 700;
  color: var(--c-font-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pawn-strip-stats {
  color: var(--c-font-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}
.pawn-strip-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pawn-strip-cell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.12s;
}
.pawn-strip-cell:hover { opacity: 1; }
.pawn-strip-cell.archetype-change {
  outline: 2px solid var(--c-accent, #7aa7ff);
  outline-offset: 2px;
  border-radius: 2px;
}
.pawn-strip-cell.current-ply { outline: 2px solid #ffc107; outline-offset: 2px; border-radius: 2px; }
.pawn-strip-cell .pawn-grid {
  display: grid;
  grid-template-columns: repeat(8, 5px);
  grid-template-rows: repeat(8, 5px);
  gap: 0;
  background: rgba(100,100,100,0.2);
}
.pawn-strip-cell .pawn-grid > div {
  background: transparent;
}
.pawn-strip-cell .pawn-grid > div.pw { background: #f0f0f0; }
.pawn-strip-cell .pawn-grid > div.pb { background: #444; }
.pawn-strip-cell .pawn-label {
  font-size: 9px;
  color: var(--c-font-dim);
  font-family: var(--font-mono);
}
.pawn-strip-cell .pawn-arch {
  font-size: 9px;
  color: var(--c-accent, #7aa7ff);
  font-weight: 700;
  max-width: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Heat-grid styles removed — the piece-activity heat map was dropped. */

/* Thinking indicator — only shown while engine is actually computing */
body.practice-mode .ceval::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-muted);
  content: '🎯 Practice · engine idle';
}
body.practice-mode.practice-thinking .ceval::after {
  content: '⏳ Engine thinking…';
  color: #ff6d00;
  animation: thinkingPulse 0.9s ease-in-out infinite;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ─── Positional Coach (v2) panel — synthesized analyzer ────────── */
.coach-group { background: rgba(59, 130, 246, 0.08); }
.coach-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.coach-side {
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}
.coach-side-w { border-left: 3px solid #eaeaea; }
.coach-side-b { border-left: 3px solid #555; }
.coach-side h5 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-accent);
}
.coach-worst, .coach-mode { font-size: 12px; line-height: 1.45; margin-bottom: 4px; }
.coach-worst em, .coach-mode em { color: var(--c-muted); font-style: normal; }
.coach-plans { list-style: none; padding: 0; margin: 4px 0 0; }
.coach-plans li {
  font-size: 12px;
  line-height: 1.45;
  padding: 4px 6px 4px 14px;
  border-left: 2px solid var(--c-accent);
  margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 3px 3px 0;
  position: relative;
}

/* ─── Engine-aware coach validation chips ────────────────────── */
.coach-engine-alert {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-left: 3px solid #ef4444;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 6px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.coach-engine-alert-row { margin: 2px 0; }
.coach-engine-ok {
  background: rgba(34, 197, 94, 0.10);
  border-left: 3px solid #22c55e;
  padding: 6px 10px;
  border-radius: 3px;
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.5;
}
.coach-engine-missing {
  background: rgba(120,120,120,0.1);
  border-left: 3px solid #888;
  padding: 6px 10px;
  border-radius: 3px;
  margin: 6px 0 10px;
  font-size: 11px;
  color: var(--c-muted);
}
.pv-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}
.pv-tag-ok       { background: rgba(34,197,94,0.18);  color: #16a34a; }
.pv-tag-fragile  { background: rgba(234,179,8,0.20);  color: #ca8a04; }
.pv-tag-spec     { background: rgba(156,163,175,0.18); color: #9ca3af; }
.pv-tag-crit     { background: rgba(239,68,68,0.20);  color: #ef4444; }

/* ─── Coach v2 extended — archetype + imbalance + strategy + deep ── */
.coach-section-h {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 10px 0 4px !important;
  color: var(--c-accent) !important;
}
.coach-archetype, .coach-imbalance {
  background: rgba(59, 130, 246, 0.06);
  border-left: 3px solid #3b82f6;
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
  margin-top: 10px;
}
.coach-signals, .coach-imb-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.coach-signals li, .coach-imb-list li {
  padding: 3px 0 3px 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
  position: relative;
}
.coach-signals li:last-child, .coach-imb-list li:last-child { border-bottom: none; }
.coach-signals li::before, .coach-imb-list li::before {
  content: '▸';
  color: var(--c-accent);
  position: absolute;
  left: 0;
  font-size: 10px;
  top: 3px;
}
.coach-strategy {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 4px 0 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  border-left: 2px solid var(--c-accent);
}
.coach-deep-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.coach-deep-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-font-dim);
  font-weight: 600;
}
.coach-deep-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background 0.1s, transform 0.06s;
}
.coach-deep-btn:hover:not(:disabled) {
  background: var(--c-accent);
  color: white;
  border-color: var(--c-accent);
}
.coach-deep-btn:active:not(:disabled) { transform: translateY(1px); }
.coach-deep-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ─── Tablebase (≤7-piece Syzygy) panel in the Coach ─────────── */
.coach-tablebase {
  background: rgba(234, 179, 8, 0.10);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-left: 3px solid #eab308;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.coach-tb-body { margin-top: 4px; }
.coach-tb-verdict { font-weight: 700; color: #ca8a04; margin-bottom: 2px; }
.coach-tb-best    { font-family: var(--font-san); margin-bottom: 2px; }
.coach-tb-alts    { font-size: 11px; font-family: var(--font-san); }

/* ─── Opening explorer (Lichess masters) panel ──────────────── */
.coach-explorer {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-left: 3px solid #8b5cf6;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.5;
}
.coach-oe-body { margin-top: 4px; }
.oe-opening { font-size: 13px; margin-bottom: 6px; }
.oe-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.oe-bar {
  display: inline-flex;
  width: 200px;
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
  background: #333;
}
.oe-bar-w { background: #f5f5f5; display: inline-block; height: 100%; }
.oe-bar-d { background: #888;    display: inline-block; height: 100%; }
.oe-bar-b { background: #222;    display: inline-block; height: 100%; }
.oe-pct   { font-family: var(--font-mono); font-size: 11px; color: var(--c-font-dim); }

.oe-moves {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 4px;
}
.oe-moves th {
  text-align: left;
  color: var(--c-font-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 2px 6px;
  border-bottom: 1px solid var(--c-border);
}
.oe-moves td {
  padding: 3px 6px;
  border-bottom: 1px dotted rgba(255,255,255,0.05);
}
.oe-moves .oe-san { font-family: var(--font-san); font-weight: 600; }
.oe-moves .oe-wdl { font-family: var(--font-mono); color: var(--c-font-dim); }

/* ─── Trap / tactical-pattern warning banners in the Coach panel ── */
.coach-trap {
  padding: 7px 11px;
  font-weight: 600;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 6px 0;
}
.coach-trap-crit {
  background: rgba(239, 68, 68, 0.15);
  border-left: 4px solid #ef4444;
  color: #fca5a5;
}
.coach-trap-warn {
  background: rgba(234, 179, 8, 0.15);
  border-left: 4px solid #eab308;
  color: #fde68a;
}
.coach-trap-info {
  background: rgba(120, 120, 120, 0.15);
  border-left: 4px solid #888;
  color: #ccc;
  font-weight: 500;
}

/* ─── Opening-book block inside the Coach panel ──────────────── */
.coach-opening {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-left: 3px solid #a855f7;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0;
}
.coach-opening .coach-section-h { margin-top: 0 !important; color: #c084fc !important; }
.coach-opening-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.coach-opening-grid strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-font-dim);
  display: block;
  margin-bottom: 3px;
}
.coach-opening .coach-plans {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.coach-opening .coach-plans li {
  padding: 3px 0 3px 10px;
  position: relative;
}
.coach-opening .coach-plans li::before {
  content: '•';
  color: #a855f7;
  position: absolute;
  left: 0;
}