/* TrigammonX v2.2.0 — 02-board-game.css
 * Auto-extracted verbatim from TrigammonX-v2.1.9.html's single <style> block
 * as part of the v2.2.0 modularisation pass (match log, board/game feature panels continuing into board-game visual components).
 * See README-ARCHITECTURE.md for exact cascade/load order.
 */
/* v142: rolling animation — tumble + shadow pulse */
@keyframes dieTumble {
  0%   { transform: rotate(var(--r0)) scale(1.02); box-shadow: 0 0 8px rgba(216,180,106,0.55), 0 4px 8px rgba(0,0,0,0.4); }
  25%  { transform: rotate(var(--r1)) scale(0.97); box-shadow: 0 0 4px rgba(216,180,106,0.25), 0 4px 8px rgba(0,0,0,0.4); }
  50%  { transform: rotate(var(--r2)) scale(1.05); box-shadow: 0 0 12px rgba(216,180,106,0.65), 0 4px 8px rgba(0,0,0,0.4); }
  75%  { transform: rotate(var(--r3)) scale(0.98); box-shadow: 0 0 5px rgba(216,180,106,0.3), 0 4px 8px rgba(0,0,0,0.4); }
  100% { transform: rotate(var(--r0)) scale(1.02); box-shadow: 0 0 8px rgba(216,180,106,0.55), 0 4px 8px rgba(0,0,0,0.4); }
}
.die-chip.rolling {
  animation: dieTumble 0.18s linear infinite;
  border-color: #fff;
  background: linear-gradient(155deg, #2c3a64 0%, #1e2a4a 60%, #131c34 100%);
}
.die-slot-num {
  position: absolute; top: 1px; right: 2px;
  font-size: 7px; color: #888; font-family: 'Courier New', monospace;
}
.dice-test-inputs {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
}
.dice-test-inputs input {
  width: 36px; height: 28px;
  background: #16213e; border: 1px solid #555;
  color: #ffd700; border-radius: 4px;
  text-align: center; font-size: 14px; font-family: 'Courier New', monospace;
}

/* ── Admin Test Dice inputs (v177) ── */
.admin-test-dice-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.admin-test-dice-inputs input {
  width: 44px;
  height: 28px;
  background: #16213e;
  border: 1px solid #555;
  color: #ffd700;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  font-family: 'Courier New', monospace;
}
.admin-test-dice-inputs button {
  width: auto;
  text-align: center;
  border-color: #ffd700;
  color: #ffd700;
}
.turn-badge {
  padding: 4px 12px; border-radius: 12px;
  font-weight: bold; font-size: 13px;
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; vertical-align: middle;
}
.turn-badge.blue  { background: rgba(116,185,255,0.2); color:#74b9ff; border:1px solid #74b9ff; }
.turn-badge.green { background: rgba(85,239,196,0.2);  color:#55efc4; border:1px solid #55efc4; }
.turn-badge.red   { background: rgba(255,118,117,0.2); color:#ff7675; border:1px solid #ff7675; }
.roll-type { font-size: 11px; color: #a29bfe; margin-top: 2px; }

/* ── Point zones (click targets) ── */
.pt-zone {
  position: absolute;
  width: 50px; height: 50px;   /* v262: this is the actual click/touch target — deliberately
                                   left at 50px at every screen size (see below); only the
                                   VISIBLE ring (::after) is ever resized for mobile. This
                                   div's position (left/top, set in renderPointZones() from
                                   CLICK_POINTS via bToS()) and size are never touched by v262. */
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.pt-zone.legal-dest {
  z-index: 25;       /* above checkers (z-index:20) so ring is visible even when covered */
  pointer-events: auto;
}
/* v262: the visible legal-destination ring is now a separate inner
   ::after pseudo-element, decoupled from .pt-zone's own 50x50 box (the
   actual touch/click target, unchanged above). Default size/appearance
   here is identical to the pre-v262 .pt-zone.legal-dest box (50px
   diameter, same border/background/box-shadow values) — desktop/tablet
   look exactly as before. Only the two mobile media queries further
   below shrink it. pointer-events:none on the ring itself — .pt-zone
   remains the sole element that ever receives the click. */
.pt-zone.legal-dest::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(85,239,196,0.20);
  border: 3px solid #55efc4;
  box-shadow: 0 0 14px rgba(85,239,196,0.7), inset 0 0 8px rgba(85,239,196,0.25);
  pointer-events: none;
}
.pt-zone.legal-dest:hover::after {
  background: rgba(85,239,196,0.50);
}
/* v262: narrow/mobile screens only — shrink the VISIBLE ring (border
   thickness and glow scaled down proportionally too, so the glow itself
   doesn't stay large and defeat the purpose). The 50x50 .pt-zone touch
   target above is completely unaffected at every width — the actual
   clickable area, its position, and CLICK_POINTS/legal-move logic are
   untouched. Breakpoints reuse this file's own existing 520px/360px
   convention (already used elsewhere in this stylesheet). */
@media (max-width: 520px) {
  .pt-zone.legal-dest::after {
    width: 22px;
    height: 22px;
    border-width: 2px;
    box-shadow: 0 0 7px rgba(85,239,196,0.7), inset 0 0 4px rgba(85,239,196,0.25);
  }
}
@media (max-width: 360px) {
  .pt-zone.legal-dest::after {
    width: 18px;
    height: 18px;
    border-width: 1.5px;
    box-shadow: 0 0 5px rgba(85,239,196,0.7), inset 0 0 3px rgba(85,239,196,0.25);
  }
}

/* When destinations are active, dim normal point-number labels so they
   don't compete with the bold destination labels.                       */
body.destinations-active .pt-num {
  opacity: 0.20;
}

/* ── Point number labels (v97 style, v99 outside placement) ── */
.pt-num {
  position: absolute;
  font-size: 11px;
  font-weight: 900;
  color: #0d0d0d;
  background: #ffd700;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.30);
  box-shadow: 0 1px 3px rgba(0,0,0,0.50);
  pointer-events: none;
  z-index: 13;
  display: none;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s;
  letter-spacing: 0.3px;
}
body.show-numbers .pt-num { display: block; }

/* ── Checker circles ── */
.checker {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 20;
  font-size: 10px;
  font-weight: bold;
  color: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.35);
  transition: box-shadow 0.15s, border-color 0.15s;
  font-family: 'Courier New', monospace;
  user-select: none;
  /* v186: layered shadow gives each checker real height off the board —
     a tight contact shadow grounds it, a wider soft shadow lifts it,
     and the inset highlight/shade pair simulates a domed glossy top. */
  box-shadow:
    inset 0 -3px 5px rgba(0,0,0,0.35),
    inset 0 2px 3px rgba(255,255,255,0.45),
    0 1px 1px rgba(0,0,0,0.5),
    0 3px 6px rgba(0,0,0,0.45);
}
.checker::after {
  /* Specular highlight — a small bright glint near the top-left, like
     light catching a polished domed checker. Purely decorative; does
     not affect layout, sizing, or click targets (pointer-events:none). */
  content: '';
  position: absolute;
  top: 14%;
  left: 22%;
  width: 32%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.75), rgba(255,255,255,0) 75%);
  pointer-events: none;
}
.checker::before {
  /* v262: invisible touch/click halo — expands the checker's actual
     hit area slightly beyond its visible circle, without moving or
     resizing the visible checker (this rule is purely geometric/
     invisible; the specular ::after above is untouched). A click
     anywhere in this pseudo-element's box is reported by the browser as
     a click on the .checker element itself (pseudo-elements are not
     separate event targets), so the existing click listener on each
     checker fires exactly as before — no new JS click handling needed.
     Size comes from --checker-halo-inset, set once per render in
     renderPieces()/renderBarPieces() from the small, geometrically-
     capped HALO_INSET_BOARD constant (see its definition for the
     board-wide spacing check) scaled by the same board-scale factor as
     the checker itself, so the halo stays proportionally tiny relative
     to checker size at every viewport and can never reach a
     neighbouring point's checker or click target. */
  content: '';
  position: absolute;
  inset: calc(-1 * var(--checker-halo-inset, 0px));
  border-radius: 50%;
  background: transparent;
}
.checker.blue  { background: radial-gradient(circle at 35% 32%, #8fc6ff 0%, #4a90d9 45%, #1d5f99 80%, #134a7d 100%); }
.checker.green { background: radial-gradient(circle at 35% 32%, #82f5d9 0%, #2cd9a8 45%, #009873 80%, #00735a 100%); }
.checker.red   { background: radial-gradient(circle at 35% 32%, #ff9b9a 0%, #ec5e5d 45%, #b8332f 80%, #962720 100%); }
.checker.selected {
  border-color: var(--tx-gold);
  box-shadow:
    inset 0 -3px 5px rgba(0,0,0,0.35),
    inset 0 2px 3px rgba(255,255,255,0.45),
    0 0 0 2px rgba(216,180,106,0.4),
    0 0 14px rgba(216,180,106,0.85),
    0 3px 6px rgba(0,0,0,0.45);
}
.checker:hover { border-color: rgba(255,255,255,0.75); }

/* ── Destination hint labels (v96 — point number is dominant) ── */
/* ── Destination hint labels — v107: compact, offset, minimal ── */
.dest-hint {
  position: absolute;
  pointer-events: none;
  z-index: 35;
  background: rgba(8, 12, 22, 0.82);
  color: #55efc4;
  font-size: 10px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(85,239,196,0.4);
  white-space: nowrap;
  line-height: 1.35;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Point number inside the destination ring */
.dest-ring-num {
  position: absolute;
  pointer-events: none;
  z-index: 16;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  color: #55efc4;
  text-shadow: 0 0 5px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8);
  white-space: nowrap;
  line-height: 1;
}

/* ── Move log ── */
.move-log .ml-blue  { color: #74b9ff; }
.move-log .ml-green { color: #55efc4; }
.move-log .ml-red   { color: #ff7675; }
.move-log .ml-sys   { color: #a29bfe; }

.dice-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #d8d8d8;
  margin-bottom: 2px;
}
.turn-badge {
  padding: 4px 12px; border-radius: 12px;
  font-weight: bold; font-size: 13px;
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; vertical-align: middle;
}
.turn-badge.blue  { background: rgba(116,185,255,0.2); color:#74b9ff; border:1px solid #74b9ff; }
.turn-badge.green { background: rgba(85,239,196,0.2);  color:#55efc4; border:1px solid #55efc4; }
.turn-badge.red   { background: rgba(255,118,117,0.2); color:#ff7675; border:1px solid #ff7675; }
.roll-type { font-size: 11px; color: #a29bfe; margin-top: 2px; }
.info-bar .ok  { color: #55efc4; }
.info-bar .err { color: #ff7675; }

/* ── Move list panel ── */
.move-list-panel.active { display: block; }
.move-list-panel .mlp-title {
  color: #a29bfe; font-weight: bold; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;
}
.move-list-panel .mlp-row    { color: #55efc4; }
.move-list-panel .mlp-blocked { color: #ff7675; }
/* ── Anchor calibration overlay (v87) ── */
.anchor-dot {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  transform: translate(-50%, -50%);
}
/* Crosshair arms */
.anchor-dot::before,
.anchor-dot::after {
  content: '';
  position: absolute;
  background: #ff0080;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.anchor-dot::before { width: 14px; height: 2px; }   /* horizontal */
.anchor-dot::after  { width: 2px;  height: 14px; }  /* vertical */
/* Centre fill */
.anchor-dot-inner {
  position: absolute;
  width: 6px; height: 6px;
  background: #ff0080;
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.anchor-label {
  position: absolute;
  pointer-events: none;
  z-index: 51;
  font-size: 10px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #ff0080;
  background: rgba(0,0,0,0.75);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  /* positioned via JS */
}
/* Stack step preview line (A→D connector) */
.anchor-step-line {
  position: absolute;
  pointer-events: none;
  z-index: 49;
  background: rgba(0,206,201,0.55);
  height: 2px;
  transform-origin: left center;
}
/* Direction handle — cyan rotated square (diamond) */
.dir-dot {
  position: absolute;
  pointer-events: none;
  z-index: 52;
  width: 14px; height: 14px;
  background: #00cec9;
  border: 2px solid #fff;
  border-radius: 3px;
  transform: translate(-50%,-50%) rotate(45deg);
}
/* Direction label D{N} */
.dir-label {
  position: absolute;
  pointer-events: none;
  z-index: 53;
  font-size: 10px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #00cec9;
  background: rgba(0,0,0,0.78);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
/* Edit-mode: make direction handles draggable */
body.anchor-edit-mode .dir-dot {
  cursor: crosshair !important;
  pointer-events: auto !important;
  outline: 2px solid #ffd700;
  outline-offset: 3px;
  z-index: 72 !important;
  user-select: none;
}
body.anchor-edit-mode .dir-dot:hover {
  outline-color: #ff0080;
  background: #81ecec;
}
/* Export panel */
.anchor-export-panel {
  max-width: 900px; width: 100%;
  margin-top: 8px;
  background: var(--tx-bg-panel-2);
  border: 1px solid #ff0080;
  border-radius: 6px;
  padding: 10px 14px;
  display: none;
}
.anchor-export-panel.open { display: block; }
.anchor-export-panel textarea {
  width: 100%;
  min-height: 120px;
  background: #070710;
  border: 1px solid #444;
  color: #ff80d0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  border-radius: 4px;
  padding: 6px;
  resize: vertical;
}
/* ── Last-move markers (v91) ── */
.last-move-label {
  position: absolute;
  pointer-events: none;
  z-index: 40;
  font-size: 11px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  transform: translate(-50%, -220%);
  border: 1px solid currentColor;
  opacity: 0.92;
}
.last-move-label.lm-from {
  background: rgba(0,0,0,0.75);
  /* colour set per player via inline style */
}
.last-move-label.lm-to {
  background: rgba(0,0,0,0.75);
  transform: translate(-50%, 120%);
}
/* Arrow connector between FROM and TO zones */
.last-move-connector {
  position: absolute;
  pointer-events: none;
  z-index: 38;
  height: 2px;
  transform-origin: left center;
  opacity: 0.55;
}
/* ── Click-zone overlay (v94) ── */
.czl-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 55;
  transform: translate(-50%, -50%);
  background: rgba(180, 180, 180, 0.16);
  border: 2px solid rgba(235, 235, 235, 0.85);
  box-shadow:
    0 0 10px rgba(255,255,255,0.75),
    0 0 20px rgba(120,120,120,0.45),
    inset 0 0 8px rgba(255,255,255,0.25);
}
.czl-label {
  position: absolute;
  pointer-events: none;
  z-index: 56;
  font-size: 11px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #f5f5f5;
  text-shadow: 0 1px 2px #000;
  background: rgba(40,40,40,0.85);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid rgba(220,220,220,0.60);
}
/* ── Point-label export panel — removed in v105 (edit tools hidden) ── */
/* ── Checker-anchor drag editor (v108) ── */
body.anchor-edit-mode .anchor-dot {
  cursor: move !important;
  pointer-events: auto !important;
  outline: 3px solid #00cec9;
  outline-offset: 2px;
  z-index: 70 !important;
  user-select: none;
}
body.anchor-edit-mode .anchor-dot:hover {
  outline-color: #ffd700;
}
/* Instruction hint shown in anchor-edit mode */
#anchor-edit-hint {
  display: none;
  max-width: 900px;
  width: 100%;
  padding: 5px 12px;
  background: rgba(0,206,201,0.10);
  border: 1px solid #00cec9;
  border-radius: 5px;
  color: #81ecec;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  margin-bottom: 6px;
  text-align: center;
}
body.anchor-edit-mode #anchor-edit-hint { display: block; }
/* ── Left-side diagnostic overlay (v113) ── */
/* Selected-point badge beside the selected checker */
.selected-pt-badge {
  position: absolute;
  pointer-events: none;
  z-index: 80;
  background: #ffd700;
  color: #0d0d0d;
  font-size: 11px;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  white-space: nowrap;
  transform: translate(22px, -50%);
}
/* Debug overlay markers for left side (pts 13-24) */
.dbg-click  { position:absolute;pointer-events:none;z-index:62;border-radius:50%;
              width:20px;height:20px;border:2px solid #ffd700;background:rgba(255,215,0,0.15);
              transform:translate(-50%,-50%); }
.dbg-anchor { position:absolute;pointer-events:none;z-index:63;
              width:12px;height:12px;transform:translate(-50%,-50%);
              background:#ff0080;border-radius:50%; }
.dbg-label-marker { position:absolute;pointer-events:none;z-index:64; }
.dbg-text  { position:absolute;pointer-events:none;z-index:65;
              font-size:9px;font-family:'Courier New',monospace;font-weight:bold;
              white-space:nowrap;background:rgba(0,0,0,0.75);padding:1px 3px;border-radius:2px; }
.dbg-text.tc { color:#ffd700; }   /* click point — yellow */
.dbg-text.ta { color:#ff80d0; }   /* anchor — pink */
.dbg-text.tl { color:#81ecec; }   /* label position — cyan */
/* ── v245: Game Trends — Pip Race / Dice Fortune inline-SVG charts ── */
.gt-chart-block {
  background: rgba(4, 6, 14, 0.85);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  padding: 8px 8px 6px;
  margin-bottom: 8px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.03);
}
.gt-chart-title {
  font-size: 10px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: var(--tx-text-dim);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.gt-chart-sub {
  font-weight: normal;
  font-size: 9px;
  color: var(--tx-text-faint);
  text-transform: none;
  letter-spacing: 0;
}
.gt-chart-svg-wrap {
  width: 100%;
  line-height: 0;   /* avoid a stray inline-svg baseline gap */
}
.gt-chart-svg-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
.gt-legend {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  color: var(--tx-text-dim);
}
.gt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gt-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* ── v245 (large-charts-rng pass): full-width Game Trends section,
   below the board/sidebar layout, above the Admin/Setup shell. Charts
   sit side-by-side on wide screens and stack on narrow ones purely via
   flex-wrap — no JS-driven layout switching needed. ── */
.game-trends-shell {
  width: 100%;
  max-width: 1400px;
  margin: 18px auto 0 auto;
}
.game-trends-shell .panel-title {
  font-size: 12px;
  letter-spacing: 2px;
}
.gt-large-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.gt-chart-block-large {
  flex: 1 1 480px;
  max-width: 700px;
  min-width: 320px;
  padding: 16px 18px 12px;
}
.gt-chart-block-large .gt-chart-title {
  font-size: 15px;
  margin-bottom: 8px;
}
.gt-chart-block-large .gt-chart-sub {
  font-size: 12px;
}
.gt-chart-block-large .gt-legend {
  font-size: 12px;
  gap: 16px;
  margin-top: 8px;
}
.gt-chart-block-large .gt-legend-dot {
  width: 10px;
  height: 10px;
}

/* ── Pip bar graph (v125). v245 (large-charts-rng pass): converted from a
   small relative best-vs-worst comparison into a larger, more prominent
   fixed-scale race-progress display (see renderPipDisplay()/
   PIP_RACE_START) — bigger track height, an added %-complete column, and
   a finish-line tick at the right edge of each track. ── */
.pip-display {
  font-size: 12px;
  font-family: 'Courier New', monospace;
  line-height: 1.6;
  min-width: 170px;
}
.pip-row {
  display: grid;
  grid-template-columns: 50px 40px 1fr 38px;
  gap: 7px;
  align-items: center;
  margin: 6px 0;
}
.pip-name.blue  { color: #74b9ff; }
.pip-name.green { color: #55efc4; }
.pip-name.red   { color: #ff7675; }
.pip-name {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pip-num {
  color: #ddd;
  text-align: right;
  font-size: 12px;
}
.pip-pct {
  color: var(--tx-text-dim);
  text-align: right;
  font-size: 11px;
}
.pip-track {
  position: relative;
  height: 20px;
  background: #1a1a2a;
  border-radius: 6px;
  overflow: visible;
  border: 1px solid #333;
}
.pip-track::before {
  /* finish-line marker at the fixed right edge of the track */
  content: '🏁';
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}
.pip-fill {
  position: relative;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  transition: width 0.25s ease;
}
.pip-fill.blue  { background: linear-gradient(90deg, rgba(116,185,255,0.55), #74b9ff); }
.pip-fill.green { background: linear-gradient(90deg, rgba(85,239,196,0.55), #55efc4); }
.pip-fill.red   { background: linear-gradient(90deg, rgba(255,118,117,0.55), #ff7675); }
.pip-leader .pip-num { color: #ffd700; font-weight: bold; }
.pip-leader .pip-name { font-weight: bold; }
/* ── Manual Setup Panel (v139) ── */
#manual-setup-panel {
  display: none;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: var(--tx-bg-panel-2);
  border: 2px solid #fdcb6e;
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
}
#manual-setup-panel.active { display: block; }
#manual-setup-panel .msp-title {
  color: #fdcb6e;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
#manual-setup-panel .msp-warning {
  color: #fdcb6e;
  font-size: 11px;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: rgba(253,203,110,0.10);
  border-radius: 4px;
  border: 1px solid rgba(253,203,110,0.35);
}
#manual-setup-panel .msp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
#manual-setup-panel label {
  color: #aaa;
  font-size: 11px;
}
#manual-setup-panel select,
#manual-setup-panel input[type=number] {
  background: #16213e;
  border: 1px solid #555;
  color: #ffd700;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  padding: 3px 6px;
}
#manual-setup-panel select { min-width: 90px; }
#manual-setup-panel input[type=number] { width: 52px; text-align: center; }
.btn-msp {
  padding: 5px 11px;
  border-radius: 5px;
  border: 1px solid #fdcb6e;
  background: var(--tx-bg-panel-2);
  color: #fdcb6e;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  font-family: inherit;
  transition: all 0.15s;
}
.btn-msp:hover { background: #fdcb6e; color: #0d0d1a; }
.btn-msp.danger { border-color: #ff7675; color: #ff7675; }
.btn-msp.danger:hover { background: #ff7675; color: #0d0d1a; }
.btn-msp.exit { border-color: #55efc4; color: #55efc4; }
.btn-msp.exit:hover { background: #55efc4; color: #0d0d1a; }
/* ── Dice mode selector ── */
.dice-mode-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--tx-line);
  margin-bottom: 4px;
}
.dice-mode-bar label {
  color: #a29bfe;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.dice-mode-bar select {
  background: #10162a;
  border: 1px solid #ffd700;
  color: #f2f2f2;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.dice-mode-bar select option {
  background: #10162a;
  color: #f2f2f2;
}
.dice-mode-bar select:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 6px rgba(255,215,0,0.35);
}
.dice-mode-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  background: rgba(162,155,254,0.12);
  color: #a29bfe;
  border: 1px solid #a29bfe;
  white-space: nowrap;
}
.dice-mode-badge.triple {
  background: rgba(253,203,110,0.12);
  color: #fdcb6e;
  border-color: #fdcb6e;
}
/* ── Click-zone edit mode ── */
/* Draggable handle shown per zone in edit mode */
.czl-drag-handle {
  position: absolute;
  z-index: 72;
  width: 18px; height: 18px;
  background: #fdcb6e;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: crosshair;
  pointer-events: auto;
  user-select: none;
}
.czl-drag-handle:hover { background: #ffeaa7; outline: 2px solid #fdcb6e; outline-offset: 3px; }
.czl-drag-label {
  position: absolute;
  z-index: 73;
  font-size: 10px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #fdcb6e;
  background: rgba(0,0,0,0.78);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
/* Click-zone edit hint bar */
#czl-edit-hint {
  display: none;
  max-width: 900px; width: 100%;
  margin-top: 6px;
  padding: 8px 14px;
  background: rgba(253,203,110,0.10);
  border: 1px solid #fdcb6e;
  border-radius: 6px;
  color: #fdcb6e;
  font-size: 12px;
}
#czl-edit-hint.active { display: block; }
/* Click-zone export panel */
.czl-export-panel {
  max-width: 900px; width: 100%;
  margin-top: 8px;
  background: var(--tx-bg-panel-2);
  border: 1px solid #fdcb6e;
  border-radius: 6px;
  padding: 10px 14px;
  display: none;
}
.czl-export-panel.open { display: block; }
.czl-export-panel textarea {
  width: 100%;
  min-height: 120px;
  background: #070710;
  border: 1px solid #444;
  color: #fdcb6e;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  border-radius: 4px;
  padding: 6px;
  resize: vertical;
}
/* Board outline in czl-edit mode */
body.czl-edit-mode #board-wrap {
  outline: 3px solid #fdcb6e;
  outline-offset: 3px;
  border-radius: 8px;
}
/* Board highlight in setup mode */
body.manual-setup-mode #board-wrap {
  outline: 3px solid #fdcb6e;
  outline-offset: 3px;
  border-radius: 8px;
}
/* Setup-mode zone hover */
body.manual-setup-mode .pt-zone {
  cursor: crosshair !important;
}
/* ── Player Types panel (v149) ── */
.player-types-section {
  border: 1px solid var(--tx-line);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(162,155,254,0.04);
}
.player-type-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
}
/* v246: Player Names — display-only text input, styled to match
   .player-type-select so the row reads as one control group. */
.player-name-input {
  background: #10162a; border: 1px solid #555; color: #f2f2f2;
  border-radius: 4px; padding: 4px 6px; font-size: 11px;
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.player-name-input::placeholder { color: #555; font-style: italic; }
.player-name-input:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 6px rgba(255,215,0,0.35);
}
.player-type-label { font-size: 11px; font-weight: bold; font-family: 'Courier New', monospace; }
.player-type-label.blue  { color: #74b9ff; }
.player-type-label.green { color: #55efc4; }
.player-type-label.red   { color: #ff7675; }
.player-type-select {
  background: #10162a; border: 1px solid #ffd700; color: #f2f2f2;
  border-radius: 4px; padding: 4px 6px; font-size: 11px;
  font-family: inherit; cursor: pointer; width: 100%;
}
.player-type-select option {
  background: #10162a;
  color: #f2f2f2;
}
.player-type-select:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 6px rgba(255,215,0,0.35);
}
.player-types-status {
  margin-top: 7px; padding: 4px 6px; background: #070710;
  border-radius: 4px; font-size: 10px; font-family: 'Courier New', monospace;
  color: #636e72; line-height: 1.6;
}
/* ── Board rotation shell (v150) ── */
#board-rotation-shell {
  width: 100%;
  transform-origin: center center;
  transition: transform 0.35s ease;
  /* v234: Blue is at 0° in the raw board art (see PLAYER_ROTATIONS in
     the JS), so Blue-upright is simply the unrotated default — no
     transform needed here to avoid a load flash. */
}

/* ── Board stage / matte (v167; v185 gold-inlay; v186 raised plinth) ──
   Fixed, non-rotating dark stage that sits behind the rotating board.
   Prevents the transparent/white-label board art from visually
   fighting the page background while it rotates. v186 deepens the
   shadow recipe into a "raised plinth" read — a tight dark contact
   shadow at the base plus a wide soft drop shadow simulate the stage
   sitting up off the page, and a brighter top rim-light suggests a
   bevelled edge catching light. Purely shadow/border; sizing,
   overflow, and positioning are unchanged from v167. */
#board-stage {
  position: relative;
  z-index: 2;
  /* v188 safe layering hotfix: z-index bumped from 1 to 2 so
     board-stage sits above its siblings (z-index:1) as well as the
     plinth (z-index:0). Width/height/overflow/sizing unchanged. */
  width: min(72vw, 840px);
  height: min(72vw, 840px);
  max-width: 840px;
  max-height: 840px;
  margin: 0 auto;
  background: radial-gradient(circle at center,
    rgba(20,24,42,0.95) 0%,
    rgba(5,8,18,0.98) 68%,
    rgba(0,0,0,1) 100%);
  border: 1px solid var(--tx-gold-dim);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    0 2px 0 rgba(216,180,106,0.18),
    0 22px 50px rgba(0,0,0,0.65),
    0 8px 18px rgba(0,0,0,0.5),
    0 0 32px rgba(216,180,106,0.08),
    inset 0 1px 0 rgba(216,180,106,0.30),
    inset 0 0 2px rgba(216,180,106,0.25),
    inset 0 0 44px rgba(0,0,0,0.88);
}

/* ── Board viewport clipping (v163) ──
   Contains the rotating shell inside the stage so rotation never
   spills past the matte edge. #board-wrap remains the unrotated
   coordinate reference; only this outer structure is added. */
#board-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#board-rotation-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

/* ── v243 Fix 2: static (non-rotating) TrigammonX branding ──
   A direct child of #board-stage — a SIBLING of #board-viewport, never a
   descendant of #board-rotation-shell/#board-rotation-center — so it is
   never subject to the board's rotate() transform and is never tied to
   any board/CLICK_POINTS/CHECKER_ANCHORS coordinate. Sits in the fixed
   dark stage/matte area above the playing surface, always upright,
   always centred. pointer-events:none guarantees it can never intercept
   a checker or point click, regardless of stacking order. Purely a
   visual label — tasteful, static, not animated. */
#board-static-branding {
  position: absolute;
  top: 2.4%;
  left: 50%;
  width: 88%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  text-align: center;
  user-select: none;
}
.board-static-brand-title {
  font-weight: 700;
  font-size: clamp(18px, 3.1vw, 30px);
  color: #f5efe0;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 3px rgba(0,0,0,0.65);
}
.board-static-brand-subtitle {
  font-weight: 500;
  font-size: clamp(12px, 1.8vw, 18px);
  color: #e8dfc8;
  letter-spacing: 0.3px;
  line-height: 1.2;
  margin-top: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.75);
}

/* ── Admin View buttons (v150) ── */
.admin-view-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.admin-view-btns button {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
}
.btn-view-active {
  background: #a29bfe !important;
  color: #0d0d1a !important;
}
.btn-view-blue.btn-view-active  { background: #74b9ff !important; }
.btn-view-green.btn-view-active { background: #55efc4 !important; }
.btn-view-red.btn-view-active   { background: #ff7675 !important; }
.btn-view-auto.btn-view-active  { background: #ffd700 !important; }
/* ── Board view status line (v154) ── */
#board-view-status {
  margin-top: 6px;
  padding: 4px 8px;
  background: #070710;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: #a29bfe;
  border: 1px solid var(--tx-line);
  line-height: 1.5;
}
/* ── AI play note (v157) ── */
.ai-play-note {
  margin-top: 7px;
  padding: 6px 8px;
  background: #070710;
  border: 1px solid var(--tx-line);
  border-radius: 5px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #ffd700;
  line-height: 1.5;
  min-height: 48px;
}
/* ── Clock panel — now centered above the board only (v176) ── */
.clock-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
  justify-content: center;
  width: min(100%, 620px);
}
.clock-card {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.06), transparent 50%),
    var(--tx-bg-panel-2);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px 12px;
  text-align: center;
  box-shadow: var(--tx-raised);
}
.clock-title {
  color: var(--tx-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.clock-face {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--tx-gold);
  background:
    radial-gradient(circle at 38% 32%, #1c2032 0%, #11141f 45%, #07080f 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /* v186: deeper recessed-dial look — the wide outer glow now reads as
     a raised bezel catching light, while the inset shadow simulates a
     genuinely sunken clock face rather than a flat circle. */
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 3px 8px rgba(0,0,0,0.5),
    0 0 18px var(--tx-gold-dim),
    inset 0 3px 10px rgba(0,0,0,0.85),
    inset 0 -2px 4px rgba(216,180,106,0.12);
}
.clock-face::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(216,180,106,0.22);
}
.clock-main {
  color: var(--tx-text);
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  z-index: 1;
  text-shadow: 0 0 6px rgba(255,255,255,0.18);
}
.clock-sub {
  color: var(--tx-gold);
  font-size: 10px;
  font-family: 'Courier New', monospace;
  margin-top: 6px;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 760px) {
  .clock-card {
    width: 220px;
  }
}
/* ── Game stats panel (v166) ── */
.stats-panel {
  background: rgba(4, 6, 14, 0.85);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  padding: 9px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  line-height: 1.6;
  min-height: 170px;
  /* v186: a sunken "display screen" look — these data panels sit
     recessed into their raised parent console rather than also being
     raised, which keeps the depth language readable as layered. */
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.03);
}
.stats-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 6px;
  margin: 3px 0;
}
.stats-name.blue  { color:#74b9ff; }
.stats-name.green { color:#55efc4; }
.stats-name.red   { color:#ff7675; }
.stats-values {
  color: var(--tx-text-dim);
}
.stats-player-block {
  border-bottom: 1px solid var(--tx-line-soft);
  padding: 4px 0 6px;
  margin-bottom: 4px;
}
.stats-player-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* ── v245: Live Game Stats scoreboard table (replaces the old stacked
   per-player text blocks — same #stats-panel/.stats-panel container). ── */
.lst-highlights {
  font-size: 10px;
  color: var(--tx-text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.lst-table {
  display: flex;
  flex-direction: column;
}
.lst-row {
  display: grid;
  grid-template-columns: 62px repeat(3, 1fr);
  gap: 4px;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lst-row:last-child { border-bottom: none; }
.lst-header-row {
  border-bottom: 1px solid var(--tx-line-soft);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.lst-label {
  color: var(--tx-text-faint);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lst-val {
  text-align: right;
  color: var(--tx-text);
  font-size: 11px;
  white-space: nowrap;
}
.lst-header-row .lst-val {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: bold;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lst-name-blue  { color: #74b9ff; }
.lst-name-red   { color: #ff7675; }
.lst-name-green { color: #55efc4; }
.lst-triples-row {
  color: var(--tx-text-faint);
  font-size: 10px;
}
.lst-triples-row .lst-val { font-size: 10px; color: var(--tx-text-faint); }

/* ── Borne-off display (v169 — checker trays) ── */
.borne-off-display {
  background: rgba(4, 6, 14, 0.85);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  padding: 8px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  line-height: 1.5;
}
.borne-player-box {
  margin-bottom: 9px;
  padding: 8px 9px;
  border: 1px solid var(--tx-line-soft);
  border-top-color: rgba(255,255,255,0.06);
  border-radius: var(--tx-radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%),
    rgba(0,0,0,0.30);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.borne-player-box:last-child { margin-bottom: 0; }
.borne-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.borne-name.blue  { color:#74b9ff; }
.borne-name.green { color:#55efc4; }
.borne-name.red   { color:#ff7675; }
.borne-count {
  color: var(--tx-text-dim);
  font-size: 11px;
}
.borne-checker-tray {
  min-height: 42px;
  border: 1px solid var(--tx-gold-dim);
  border-radius: var(--tx-radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25));
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
  /* v186: a genuinely sunken display-case well — wider inset shadow at
     the top, a thin highlight at the base lip, so checkers sitting in
     it read as physically resting in a recess. */
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(216,180,106,0.15);
}
.borne-mini-checker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    inset 0 -2px 2px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.6);
}
.borne-mini-checker.blue {
  background: radial-gradient(circle at 35% 30%, #8fc6ff, #2980b9 75%);
}
.borne-mini-checker.green {
  background: radial-gradient(circle at 35% 30%, #82f5d9, #00b894 75%);
}
.borne-mini-checker.red {
  background: radial-gradient(circle at 35% 30%, #ff9b9a, #c0392b 75%);
}

/* ── Game report panel (v169) ── */
.game-report-panel {
  background: rgba(4, 6, 14, 0.85);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  padding: 9px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  line-height: 1.55;
  color: var(--tx-text-dim);
  min-height: 120px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.03);
}
.game-report-panel .winner {
  color: var(--tx-gold);
  font-weight: bold;
}

/* ── Match / Balance Log panel (v179) ── */
/* ── Match Summary panel (v181) ── */
.match-summary-panel {
  background: rgba(4, 6, 14, 0.85);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  padding: 9px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  line-height: 1.55;
  color: var(--tx-text-dim);
  min-height: 130px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.03);
}
.match-summary-panel .summary-title {
  color: var(--tx-gold);
  font-weight: bold;
}
.match-summary-panel .summary-blue {
  color: #74b9ff;
}
.match-summary-panel .summary-green {
  color: #55efc4;
}
.match-summary-panel .summary-red {
  color: #ff7675;
}
.match-summary-panel .summary-small {
  color: var(--tx-text-faint);
  font-size: 10px;
}