/* TrigammonX v2.2.0 — 04-themes-responsive.css
 * Auto-extracted verbatim from TrigammonX-v2.1.9.html's single <style> block
 * as part of the v2.2.0 modularisation pass (unified UI themes, presentation variants, responsive/media-query overrides).
 * See README-ARCHITECTURE.md for exact cascade/load order.
 */
/* Modal card */
#htp-card {
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background:
    linear-gradient(170deg, rgba(216,180,106,0.06), transparent 40%),
    #0c1120;
  border: 1px solid rgba(216,180,106,0.3);
  border-radius: 14px;
  padding: 24px 24px 20px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    0 20px 50px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: htpSlideIn 0.3s cubic-bezier(.2,.85,.3,1.05) both;
}
@keyframes htpSlideIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Card sections */
.htp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216,180,106,0.2);
}
.htp-title {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--tx-gold-bright);
}
.htp-close {
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--tx-line);
  background: transparent;
  color: var(--tx-text-faint);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: color 0.1s, border-color 0.1s;
}
.htp-close:hover { color: var(--tx-text-dim); border-color: var(--tx-text-dim); }

.htp-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tx-gold);
  font-family: 'Courier New', monospace;
  font-weight: bold;
  margin: 14px 0 8px;
}
.htp-section-title:first-of-type { margin-top: 0; }

.htp-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}
.htp-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--tx-text-dim);
  line-height: 1.5;
}
.htp-step-num {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(216,180,106,0.15);
  border: 1px solid rgba(216,180,106,0.3);
  color: var(--tx-gold);
  font-size: 10px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.htp-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.htp-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--tx-text-dim);
  line-height: 1.45;
}
.htp-rule-dot {
  flex: 0 0 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tx-gold-dim);
  margin-top: 6px;
  flex-shrink: 0;
}

.htp-footer-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--tx-line-soft);
  font-size: 10px;
  color: var(--tx-text-faint);
  font-family: 'Courier New', monospace;
  text-align: center;
  line-height: 1.5;
}

/* ── Page footer ── */
.page-footer {
  text-align: center;
  margin-top: 24px;
  padding: 10px 0;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: var(--tx-text-faint);
  letter-spacing: 0.8px;
  opacity: 0.7;
}

/* Mobile: How to Play modal fits narrow screens */
@media (max-width: 520px) {
  #htp-card {
    padding: 18px 16px 16px;
    max-height: 92vh;
  }
  .htp-title { font-size: 16px; }
}
/* ════════════════════════════════════════════════════════════════════
   v260 — QUICK START
   Compact companion card, directly below How to Play. Same visual
   language as the New Game Setup helper card just below it (gold hairline
   card on the dark panel background) so it reads as part of the existing
   premium control panel, not a separate tutorial screen. Step highlight
   states (.qs-active/.qs-done) are toggled purely by
   updateGuidedNextAction() — presentation only, no control here is ever
   disabled or gated by this card.
   ════════════════════════════════════════════════════════════════════ */
.qs-card {
  background: rgba(216,180,106,0.05);
  border: 1px solid rgba(216,180,106,0.2);
  border-radius: var(--tx-radius-sm);
  padding: 9px 11px;
}
.qs-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tx-gold-bright);
  font-weight: bold;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}
/* v265: collapsed by default — toggleQuickStart() only toggles this class
   and the ▶/▼ label text; .qs-step/.qs-active/.qs-done and everything
   updateGuidedNextAction() does are completely untouched, so the correct
   highlight is already applied underneath whenever the list is expanded
   again. */
.qs-card.qs-collapsed .qs-title { margin-bottom: 0; }
.qs-card.qs-collapsed .qs-list { display: none; }
.qs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qs-step {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}
.qs-num {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--tx-line);
  color: var(--tx-text-dim);
  font-size: 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.qs-text {
  font-size: 10px;
  line-height: 1.35;
  color: var(--tx-text-dim);
}
.qs-text strong { color: var(--tx-text-faint); font-weight: 700; }
.qs-text em { font-style: normal; color: var(--tx-text-dim); opacity: 0.75; font-size: 9px; }

/* Current step — subtle gold companion treatment, never as strong as the
   Roll for First Player button's own .orp-glowing (that stays the single
   strongest cue pre-roll). */
.qs-step.qs-active {
  background: rgba(216,180,106,0.09);
  border-color: rgba(216,180,106,0.35);
}
.qs-step.qs-active .qs-num {
  background: var(--tx-gold-bright);
  border-color: var(--tx-gold-bright);
  color: #14110a;
}
.qs-step.qs-active .qs-text strong { color: var(--tx-gold-bright); }

/* Completed steps — subdued, marked done */
.qs-step.qs-done {
  opacity: 0.55;
}
.qs-step.qs-done .qs-num {
  background: rgba(111,168,216,0.18);
  border-color: var(--tx-blue-glow);
  color: var(--tx-blue-glow);
}
.qs-step.qs-done .qs-num::after { content: '✓'; }

/* ════════════════════════════════════════════════════════════════════
   v260 — GUIDED NEXT-ACTION GLOW
   Tasteful, non-flashing companion cues driven entirely by
   updateGuidedNextAction() reading EXISTING state — never a new game-state
   requirement, never disables a control. Reuses the same soft gold pulse
   already defined for .orp-glowing (see @keyframes orpPulse below) so the
   whole guide reads as one consistent visual language rather than a
   second competing effect. End Turn deliberately has no new class here —
   its existing .end-turn-ready treatment (setEndTurnReady()) already
   serves this exact purpose. */
.guide-glow-subtle {
  border-color: rgba(216,180,106,0.4) !important;
  box-shadow: 0 0 10px rgba(216,180,106,0.18);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.btn-roll-dice.guide-glow {
  animation: orpPulse 2s ease-in-out infinite;
  border-color: rgba(216,180,106,0.65) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v199 — NEW GAME SETUP HELPER
   A subtle integrated card in the right panel. Not a modal, not a
   separate screen — just a small contextual guide that fades into the
   background once the game has started.
   ════════════════════════════════════════════════════════════════════ */

.ngs-card {
  background: rgba(216,180,106,0.05);
  border: 1px solid rgba(216,180,106,0.2);
  border-radius: var(--tx-radius-sm);
  padding: 9px 11px;
  transition: opacity 0.4s, border-color 0.4s, background 0.4s;
}

/* Fade card to ghost state once game is in progress */
.ngs-card.ngs-in-progress {
  background: transparent;
  border-color: var(--tx-line-soft);
  opacity: 0.55;
}

.ngs-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tx-gold);
  font-family: 'Courier New', monospace;
  font-weight: bold;
  margin-bottom: 4px;
  transition: color 0.4s;
}
.ngs-card.ngs-in-progress .ngs-title {
  color: var(--tx-text-faint);
}

.ngs-hint {
  font-size: 10px;
  color: var(--tx-text-dim);
  line-height: 1.45;
  margin-bottom: 6px;
  transition: color 0.4s;
}
.ngs-card.ngs-in-progress .ngs-hint {
  color: var(--tx-text-faint);
}

/* Status line — summarises current setup or game state */
.ngs-status {
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: var(--tx-text-faint);
  line-height: 1.4;
  padding: 5px 7px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  border: 1px solid var(--tx-line-soft);
  transition: color 0.3s, background 0.3s;
}
.ngs-status.ngs-ready-human {
  color: var(--tx-green);
  background: rgba(85,239,196,0.05);
  border-color: rgba(85,239,196,0.2);
}
.ngs-status.ngs-ready-ai {
  color: #74b9ff;
  background: rgba(116,185,255,0.05);
  border-color: rgba(116,185,255,0.2);
}
.ngs-status.ngs-in-progress {
  color: var(--tx-text-faint);
  background: transparent;
  border-color: transparent;
  padding: 0;
}

/* Begin Play button prominence — only before the game starts.
   Uses a body class so no HTML IDs are changed.
   The Begin Play button has class btn-begin-play assigned already;
   this just brightens it contextually. */
body.game-not-started .btn-begin-play {
  border-color: var(--tx-green) !important;
  color: var(--tx-green) !important;
  background: rgba(85,239,196,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 10px rgba(85,239,196,0.12),
    0 2px 0 rgba(0,0,0,0.6) !important;
}
body.game-not-started .btn-begin-play:hover {
  background: rgba(85,239,196,0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 16px rgba(85,239,196,0.2),
    0 2px 0 rgba(0,0,0,0.6) !important;
}
/* ════════════════════════════════════════════════════════════════════
   v200 — DOUBLING CUBE VISUAL MERGE
   Premium token visual + flip animation, ported from lab v5b.
   Simulation-safe: renderDoublingCube() returns instantly when
   headlessSimulationActive or simulationBatchActive.
   Visual-only: no scoring, no win conditions, no AI interaction.
   ════════════════════════════════════════════════════════════════════ */

/* Token size — matches game's dice size; can be adjusted without
   touching any other value */
:root { --dc-size: 48px; }

/* Under-board doubling cube section */
.under-board-dc-section {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.04), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(216,180,106,0.15);
  border-radius: var(--tx-radius-sm);
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--tx-raised);
}
.dc-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(216,180,106,0.6);
  font-family: 'Courier New', monospace;
  font-weight: bold;
}
.dc-section-badge {
  font-size: 8px;
  color: var(--tx-text-faint);
  font-family: 'Courier New', monospace;
  font-style: italic;
  opacity: 0.7;
}
.dc-section-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.dc-section-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.dc-ctrl-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.dc-btn {
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--tx-line);
  background: var(--tx-bg-panel-2);
  color: var(--tx-text-dim);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s, transform 0.07s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(0,0,0,0.5);
  white-space: nowrap;
}
.dc-btn:hover:not(:disabled) { background: var(--tx-line); color: var(--tx-text); }
.dc-btn:active:not(:disabled) { transform: translateY(1px); }
.dc-btn:disabled { opacity: 0.35; cursor: default; }
.dc-btn.dcb-show   { border-color: rgba(216,180,106,0.35); color: var(--tx-gold); }
.dc-btn.dcb-offer  { border-color: rgba(255,200,80,0.4); color: #ffd080; }
.dc-btn.dcb-take   { border-color: rgba(85,239,196,0.4); color: var(--tx-green); }
.dc-btn.dcb-pass   { border-color: rgba(255,118,117,0.4); color: var(--tx-red); }
.dc-btn.dcb-cycle  { border-color: rgba(111,168,216,0.35); color: var(--tx-blue-glow); }

/* ── Token tray ── */
#dc-tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Token container */
#dc-token-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 calc(var(--dc-size)*0.12) calc(var(--dc-size)*0.18) rgba(0,0,0,0.55));
  cursor: default;
  transition: filter 0.3s;
}
#dc-token-wrap:hover {
  filter: drop-shadow(0 calc(var(--dc-size)*0.10) calc(var(--dc-size)*0.15) rgba(0,0,0,0.5))
          brightness(1.05);
}

/* Offer glow */
#dc-token-wrap.dc-offered { animation: dcTokenOffer 1.6s ease-in-out infinite; }
@keyframes dcTokenOffer {
  0%,100% { filter: drop-shadow(0 calc(var(--dc-size)*0.12) calc(var(--dc-size)*0.18) rgba(0,0,0,0.55)); }
  50%     { filter: drop-shadow(0 calc(var(--dc-size)*0.08) calc(var(--dc-size)*0.12) rgba(0,0,0,0.4))
                    drop-shadow(0 0 calc(var(--dc-size)*0.28) var(--dc-glow, rgba(216,180,106,0.75))); }
}

/* Token body */
#dc-token {
  position: relative;
  width: var(--dc-size);
  height: calc(var(--dc-size) * 1.08);
}

/* Token top face */
#dc-token-face {
  position: absolute;
  top: 0; left: 0;
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: calc(var(--dc-size) * 0.10);
  background:
    radial-gradient(ellipse 75% 65% at 28% 22%, rgba(255,255,255,0.28) 0%, transparent 60%),
    linear-gradient(155deg,
      var(--dc-face-hi,  #f8f0de) 0%,
      var(--dc-face-mid, #eddfbe) 50%,
      var(--dc-face-lo,  #dccfa4) 100%);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow:
    inset 0  2px 0  rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(120,90,40,0.22),
    inset 2px 0  0  rgba(255,255,255,0.28),
    inset -2px 0 0  rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.3s;
}

/* Bevel edges */
#dc-bevel-right {
  position: absolute;
  top: calc(var(--dc-size) * 0.05);
  right: -4px;
  width: 4px;
  height: calc(var(--dc-size) * 0.96);
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--dc-face-lo, #dccfa4) 70%, #1a1000 30%),
    color-mix(in srgb, var(--dc-face-lo, #dccfa4) 50%, #1a1000 50%));
  z-index: 1;
}
#dc-bevel-bottom {
  position: absolute;
  top: calc(var(--dc-size) - 1px);
  left: calc(var(--dc-size) * 0.04);
  width: calc(var(--dc-size) * 0.96);
  height: calc(var(--dc-size) * 0.08 + 2px);
  border-radius: 0 0 calc(var(--dc-size)*0.08) calc(var(--dc-size)*0.08);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--dc-face-lo, #dccfa4) 40%, #0a0800 60%),
    color-mix(in srgb, var(--dc-face-lo, #dccfa4) 20%, #0a0800 80%));
  z-index: 1;
}

/* Engraved number */
#dc-value-num {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1;
  color: var(--dc-num-color, rgba(68,48,18,0.92));
  text-shadow:
    0  1px 0   rgba(255,255,255,0.6),
    0 -1px 2px rgba(40,25,8,0.6),
    0  2px 5px rgba(40,25,8,0.2);
  pointer-events: none;
  user-select: none;
  font-size: calc(var(--dc-size) * 0.46);
  letter-spacing: -0.5px;
  transition: color 0.3s;
}
#dc-value-num.two-digit { font-size: calc(var(--dc-size) * 0.34); }

/* Corner pip marks */
#dc-token-face::before, #dc-token-face::after {
  content: '◆';
  position: absolute;
  font-size: calc(var(--dc-size) * 0.08);
  color: var(--dc-num-color, rgba(68,48,18,0.35));
  opacity: 0.4;
  line-height: 1;
}
#dc-token-face::before { top: calc(var(--dc-size)*0.09); left: calc(var(--dc-size)*0.09); }
#dc-token-face::after  { bottom: calc(var(--dc-size)*0.09); right: calc(var(--dc-size)*0.09); }

/* Player-colour palettes on #dc-token-wrap */
#dc-token-wrap.dc-col-neutral { --dc-face-hi:#f8f0de; --dc-face-mid:#eddfbe; --dc-face-lo:#dccfa4; --dc-num-color:rgba(68,48,18,0.92);  --dc-glow:rgba(216,180,106,0.75); }
#dc-token-wrap.dc-col-blue    { --dc-face-hi:#dceeff; --dc-face-mid:#a0d2ff; --dc-face-lo:#5e9ee0; --dc-num-color:rgba(6,28,72,0.92);   --dc-glow:rgba(116,185,255,0.8); }
#dc-token-wrap.dc-col-green   { --dc-face-hi:#d4fff0; --dc-face-mid:#8ef0da; --dc-face-lo:#48d4ba; --dc-num-color:rgba(4,46,30,0.92);   --dc-glow:rgba(85,239,196,0.8); }
#dc-token-wrap.dc-col-red     { --dc-face-hi:#ffe2e0; --dc-face-mid:#ffaeae; --dc-face-lo:#ee6262; --dc-num-color:rgba(64,8,8,0.92);    --dc-glow:rgba(255,118,117,0.8); }

/* Owner badge */
#dc-owner-badge {
  font-size: 8px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--tx-line);
  background: rgba(0,0,0,0.22);
  color: var(--tx-text-faint);
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
#dc-owner-badge.own-blue  { color: #74b9ff; border-color: rgba(116,185,255,0.35); background: rgba(116,185,255,0.05); }
#dc-owner-badge.own-green { color: var(--tx-green); border-color: rgba(85,239,196,0.35); background: rgba(85,239,196,0.05); }
#dc-owner-badge.own-red   { color: var(--tx-red); border-color: rgba(255,118,117,0.35); background: rgba(255,118,117,0.05); }

/* Value ladder */
#dc-value-ladder { display: flex; gap: 3px; flex-wrap: wrap; }
.dc-ladder-pip {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--tx-line); background: var(--tx-bg-panel-2);
  font-size: 7px; font-family: Georgia, serif; font-weight: bold;
  color: var(--tx-text-faint);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.dc-ladder-pip.active { background:rgba(216,180,106,0.12); border-color:var(--tx-gold); color:var(--tx-gold-bright); transform:scale(1.18); }
.dc-ladder-pip.used   { background:rgba(216,180,106,0.04); border-color:rgba(216,180,106,0.18); color:rgba(216,180,106,0.4); }

/* Hidden state */
#dc-tray.dc-hidden #dc-token-wrap,
#dc-tray.dc-hidden #dc-value-ladder { display: none; }
#dc-tray.dc-hidden #dc-owner-badge  { display: none; }

/* ── Flip animation (v5b) ── */
@keyframes dcTokenLift {
  0%   { transform: translateY(0)    scale(1);    filter: drop-shadow(0 calc(var(--dc-size)*0.12) calc(var(--dc-size)*0.18) rgba(0,0,0,0.55)); }
  100% { transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 calc(var(--dc-size)*0.20) calc(var(--dc-size)*0.26) rgba(0,0,0,0.42)); }
}
@keyframes dcTokenSettle {
  0%   { transform: translateY(-4px) scale(1.03); }
  45%  { transform: translateY(1px)  scale(0.98); }
  75%  { transform: translateY(-1px) scale(1.01); }
  100% { transform: translateY(0)    scale(1);    filter: drop-shadow(0 calc(var(--dc-size)*0.12) calc(var(--dc-size)*0.18) rgba(0,0,0,0.55)); }
}
@keyframes dcFaceSquash { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes dcFaceExpand { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

#dc-token-wrap.dc-lifting  { animation: dcTokenLift   100ms ease-out forwards; }
#dc-token-wrap.dc-settling { animation: dcTokenSettle 120ms cubic-bezier(.3,.7,.4,1.2) forwards; }
#dc-token-face.dc-squashing { animation: dcFaceSquash 160ms cubic-bezier(.4,0,.6,1) forwards; transform-origin: center; }
#dc-token-face.dc-expanding { animation: dcFaceExpand 160ms cubic-bezier(.4,0,.6,1) forwards; transform-origin: center; }

#dc-value-num.dc-num-hidden  { opacity: 0; transition: opacity 80ms linear; }
#dc-value-num.dc-num-visible { opacity: 1; transition: opacity 80ms linear 60ms; }

/* Suppress dc section during simulations */
body.simulation-batch-active .under-board-dc-section,
body.headless-simulation-active .under-board-dc-section { contain: layout paint; }
/* ════════════════════════════════════════════════════════════════════
   v201b — OPENING ROLL FLOW POLISH
   ════════════════════════════════════════════════════════════════════ */

.opening-roll-panel {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.08), transparent 45%),
    var(--tx-bg-panel);
  border: 1px solid rgba(216,180,106,0.35);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: var(--tx-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--tx-raised);
  /* v244: visually centered/compact — content centers horizontally within
     the same-width slot the Current Turn panel occupies, rather than
     hugging the left edge. */
  align-items: center;
  text-align: center;
}

.orp-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--tx-gold);
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.orp-dice-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.orp-player {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
}
.orp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.orp-player-name {
  color: var(--tx-text-dim);
  min-width: 38px;
}
.orp-die {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(240,220,180,0.1);
  border: 1px solid rgba(240,220,180,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: bold;
  color: rgba(240,220,180,0.3);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.orp-die.rolled {
  background: rgba(240,220,180,0.18);
  border-color: rgba(240,220,180,0.4);
  color: var(--tx-text);
}
.orp-die.winner {
  background: rgba(216,180,106,0.2);
  border-color: var(--tx-gold);
  color: var(--tx-gold-bright);
  box-shadow: 0 0 10px rgba(216,180,106,0.3);
  transform: scale(1.1);
}

.orp-status {
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: var(--tx-text-faint);
  line-height: 1.4;
}
.orp-status.resolved { color: var(--tx-green); }
.orp-status.tie      { color: var(--tx-gold); }

/* Roll button with attention-drawing pulse when unresolved */
@keyframes orpPulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 0 rgba(0,0,0,0.55),
                         0 0 0 transparent; }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 0 rgba(0,0,0,0.55),
                         0 0 14px rgba(216,180,106,0.45); }
}
.orp-btn {
  padding: 8px 14px;
  border-radius: var(--tx-radius-sm);
  border: 1px solid rgba(216,180,106,0.45);
  background: rgba(216,180,106,0.09);
  color: var(--tx-gold-bright);
  font-size: 11px;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.12s, transform 0.07s, opacity 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 0 rgba(0,0,0,0.55);
  align-self: center;   /* v244: center under the centered panel content */
}
.orp-btn.orp-glowing {
  animation: orpPulse 2s ease-in-out infinite;
  border-color: rgba(216,180,106,0.65);
}
.orp-btn:hover:not(:disabled) { background: rgba(216,180,106,0.18); }
.orp-btn:active:not(:disabled) { transform: translateY(1px); }
.orp-btn:disabled { opacity: 0.35; cursor: default; animation: none; }

/* body.orp-pending: opening roll not yet resolved.
   Disables Roll Dice and End Turn via pointer-events + visual dim.
   Begin Play gets renamed to Continue Play in JS and disabled here. */
body.orp-pending .btn-roll-dice {
  opacity: 0.35 !important;
  pointer-events: none !important;
}
body.orp-pending .btn-end-turn {
  opacity: 0.35 !important;
  pointer-events: none !important;
}
body.orp-pending .btn-begin-play {
  opacity: 0.35 !important;
  pointer-events: none !important;
  border-color: var(--tx-line) !important;
  color: var(--tx-text-faint) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* body.orp-first-turn: opening dice already set, don't roll again */
body.orp-first-turn .btn-roll-dice {
  opacity: 0.35;
  pointer-events: none;
}

/* Hide panel once the opening-roll winner is determined (or immediately,
   in any mode that never needs an opening roll at all). */
body.orp-panel-hidden .opening-roll-panel { display: none; }

/* v244 Fix: Opening Roll and Current Turn/Rolled/Available Moves share the
   same spot beneath the board and are mutually exclusive — never both
   visible, never both hidden (leaving a gap). body.orp-pending is set
   exactly while the opening roll is required and not yet resolved
   (including every tie-reroll round), which is precisely when the Opening
   Roll panel above is shown — so the Current Turn panel is fully removed
   from layout (not just dimmed) for that entire window, and reappears the
   instant orp-pending is cleared (immediately on a starting player being
   determined — see commitOpeningRollAsLiveTurn()). Modes with no opening
   roll (e.g. Triple Dice) never set orp-pending, so this panel is visible
   from the start with no gap. */
body.orp-pending .under-board-dice-panel { display: none; }

/* v201c — PENDING OPENING ROLL STATE + MUST-MOVE */
.turn-badge.pending {
  background: rgba(120,140,200,0.12);
  color: var(--tx-text-faint);
  border: 1px solid rgba(120,140,200,0.3);
  font-size: 9px;
  letter-spacing: 0.5px;
}
body.must-move .btn-end-turn { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════
   v253 — FREE / PRO / DEVELOPER TIER PRESENTATION
   ════════════════════════════════════════════════════════════════════
   Pure presentation-level gating via a body class set once from
   PRODUCT_TIER (see the top of the main script) — no payments, accounts,
   authentication, servers, licence checks, or network calls of any kind.
   Free always gets the complete Play experience below unchanged; Pro
   adds the TrigammonX Pro section; Developer adds Admin on top of both.
   ════════════════════════════════════════════════════════════════════ */
body.tier-free  #tx-section-pro   { display: none; }
body.tier-free  #tx-section-admin { display: none; }
body.tier-pro   #tx-section-admin { display: none; }
/* developer tier: nothing hidden by these rules — every section renders. */

body.tier-free .pro-teaser { display: block; }

/* The Doubling Cube is an unfinished, visual-only feature — kept out of
   Free/Pro consumer presentation regardless of tier, per spec ("should
   not appear in normal Free/Pro play until its gameplay/scoring
   implementation is complete"). It lives physically in Developer/Admin
   as of v253 (see .under-board-dc-section's new location), so this rule
   is a defensive belt-and-braces guard, not the primary mechanism. */
body.tier-free .under-board-dc-section,
body.tier-pro  .under-board-dc-section { display: none; }

/* ── Section headers (TRIGAMMONX PRO) ── */
.tx-section-pro-shell {
  width: 100%;
  max-width: 1500px;
  margin: 28px auto 0;
}
.tx-section-header {
  text-align: center;
  margin-bottom: 16px;
}
.tx-section-header-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--tx-gold-bright);
  text-shadow: 0 0 16px rgba(216,180,106,0.25), 0 1px 0 rgba(255,238,210,0.2);
}
/* v2.2.7: "Free During Beta" — copy/presentation only, secondary to the
   PRO title above it (smaller, lighter weight, pill-style so it reads as
   a status badge rather than competing branding). Reuses the existing
   gold palette, no new colour tokens. */
.tx-section-header-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 12px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-gold-bright);
  border: 1px solid var(--tx-gold-dim);
  border-radius: 999px;
  background: rgba(216,180,106,0.08);
}
.tx-section-header-subtitle {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tx-blue-glow);
  opacity: 0.9;
  margin-top: 5px;
}
.tx-section-header-rule {
  width: min(320px, 60%);
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--tx-gold-dim) 30%, var(--tx-gold-dim) 70%, transparent);
}

/* ── Pro card grid — responsive, replaces the old single long sidebar ── */
.pro-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.pro-card {
  background: var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  padding: 14px 16px;
  box-shadow: var(--tx-raised);
  min-width: 0;
}
.pro-card-wide { grid-column: 1 / -1; }
.pro-card .panel-title,
.pro-card .panel-section-title:first-child { margin-top: 0; }

/* Free-tier teaser — ONE compact, tasteful block. Never disabled
   controls, padlocks, or repeated upgrade buttons scattered through
   the Free UI. */
.pro-teaser {
  display: none;
  max-width: 640px;
  margin: 28px auto 0;
  padding: 16px 20px;
  text-align: center;
  background: var(--tx-bg-panel);
  border: 1px solid var(--tx-gold-dim);
  border-radius: var(--tx-radius);
  box-shadow: var(--tx-raised);
}
.pro-teaser-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  color: var(--tx-gold-bright);
  margin-bottom: 6px;
}
.pro-teaser-body {
  font-size: 11px;
  color: var(--tx-text-dim);
  letter-spacing: 0.3px;
}

/* ── v257: unified Full UI Theme grid — 12 curated theme swatches in
   the Pro Themes card (replaces the v253 Table Theme <select> and the
   v256 Background preset grid). Presentation only; selection state is
   shown with the same gold accent border used elsewhere for "active"
   UI state. ── */
.ui-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.ui-theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--tx-line);
  border-radius: 6px;
  background: var(--tx-bg-panel-2);
  color: var(--tx-text-dim);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.ui-theme-btn:hover {
  border-color: var(--tx-gold-dim);
}
.ui-theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.28);
  background: var(--swatch-color);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15);
}
.ui-theme-btn.ui-theme-selected {
  border-color: var(--tx-gold-bright);
  box-shadow: 0 0 0 1px var(--tx-gold-dim);
  color: var(--tx-text);
}
@media (max-width: 360px) {
  .ui-theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Pip Race strip — horizontal, full width, beneath the board + Game
   Setup card. Same #pip-display id and untouched renderPipDisplay()/
   calculatePipsForPlayer() as before — .pip-race-strip-inner only
   changes the CSS box layout of the existing .pip-row children from
   stacked to side-by-side. ── */
.pip-race-strip-shell {
  width: 100%;
  max-width: 1500px;
  margin: 14px auto 0;
  background: var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  padding: 10px 16px 12px;
  box-shadow: var(--tx-raised);
}
.pip-race-strip-shell .panel-section-title { text-align: center; margin-top: 0; }
.pip-race-strip-inner { display: flex; flex-wrap: wrap; gap: 18px; }
.pip-race-strip-inner .pip-row { flex: 1 1 220px; margin: 4px 0; min-width: 200px; }

/* ── Compact clocks — Game Time / Turn Time inside the Pro "Game
   Insights" card, and Real Time inside Developer/Admin. Same
   #clock-real/#clock-game/#clock-turn ids, same .clock-card/.clock-face/
   .clock-title/.clock-sub markup, and the same untouched updateClocks()
   timing logic as before — v258 only changes how that markup is drawn
   (size/shape/contrast), via two presentation styles selectable from
   Pro Themes → Game Insights (see applyClockStyle(), trigammonx_clock_style
   in localStorage). Both styles read colour purely from the active
   --tx-* theme tokens, so they work identically under all 12 Full UI
   Themes — clock style is never tied to a particular colour theme.

   DIGITAL (default) — clean rectangular readouts with large monospaced
   digits, easier to read at a glance than the old 52px/12px dial. ── */
.clock-panel-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.clock-panel-compact .clock-card {
  padding: 8px 10px 9px;
  text-align: left;
}
.clock-panel-compact .clock-title {
  font-size: 9px;
  margin-bottom: 6px;
}
.clock-panel-compact .clock-face {
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--tx-gold-dim);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.42)),
    var(--tx-bg-panel-2);
  padding: 8px 6px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.55),
    0 0 10px var(--tx-gold-dim);
}
.clock-panel-compact .clock-face::before {
  content: none;
}
.clock-panel-compact .clock-main {
  font-size: 24px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px var(--tx-gold-dim);
}
.clock-panel-compact .clock-sub {
  font-size: 8px;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .clock-panel-compact .clock-main { font-size: 20px; }
}

/* CLASSIC DIAL (opt-in via body.tx-clock-dial) — the original circular
   dial look, kept attractive and theme-aware, with the same #clock-game/
   #clock-turn digits still readable inside it as a small digital
   readout so elapsed time is never dial-only. */
body.tx-clock-dial .clock-panel-compact .clock-card {
  padding: 6px;
  text-align: center;
}
body.tx-clock-dial .clock-panel-compact .clock-title {
  margin-bottom: 8px;
}
body.tx-clock-dial .clock-panel-compact .clock-face {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--tx-gold);
  background:
    radial-gradient(circle at 38% 32%, var(--tx-bg-panel) 0%, var(--tx-bg-panel-2) 45%, var(--tx-bg-deep) 78%);
  padding: 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.5),
    0 0 12px var(--tx-gold-dim),
    inset 0 3px 8px rgba(0,0,0,0.85),
    inset 0 -2px 3px rgba(216,180,106,0.12);
}
body.tx-clock-dial .clock-panel-compact .clock-face::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed var(--tx-gold-dim);
}
body.tx-clock-dial .clock-panel-compact .clock-main {
  font-size: 13px;
  letter-spacing: 0;
  text-shadow: 0 0 5px rgba(255,255,255,0.18);
}
body.tx-clock-dial .clock-panel-compact .clock-sub {
  font-size: 7px;
  margin-top: 6px;
}

/* ── Clock Style control — compact row beside the clocks in the Pro
   Game Insights card. Same gold "active" accent used elsewhere for
   selected UI state. ── */
.clock-style-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.clock-style-label {
  font-size: 10px;
  color: var(--tx-text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.clock-style-btn {
  font-size: 10px;
  padding: 4px 9px;
  border: 1px solid var(--tx-line);
  border-radius: 6px;
  background: var(--tx-bg-panel-2);
  color: var(--tx-text-dim);
  font-family: inherit;
  cursor: pointer;
}
.clock-style-btn:hover {
  border-color: var(--tx-gold-dim);
}
.clock-style-btn.clock-style-selected {
  border-color: var(--tx-gold-bright);
  box-shadow: 0 0 0 1px var(--tx-gold-dim);
  color: var(--tx-text);
}

/* ════════════════════════════════════════════════════════════════════
   v2.1.9 — NAMED SAVED GAMES / PORTABLE SAVES dialogs
   ════════════════════════════════════════════════════════════════════
   Two small modal dialogs (Save Game As, Load Saved Game library) styled
   consistently with the existing #goc-backdrop/#goc-card glass-card
   pattern, but under their own ids/classes so neither the Winner/Results
   dashboard nor its behavior is touched. Presentation-only — every
   button here calls into new v2.1.9 JS that itself only reads/writes
   localStorage and calls the existing, unmodified serializeGameState()/
   restoreGameState(). Uses only the existing --tx-* design tokens so it
   renders correctly under all 12 Full UI Themes without any new colour
   system. */
.txsave-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 6100;   /* above goc-backdrop's 6000 in the unlikely event both are ever open */
  background: rgba(2,4,10,0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.txsave-backdrop.visible { display: flex; }
.txsave-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(170deg, rgba(216,180,106,0.06), transparent 44%), var(--tx-bg-panel);
  border: 1px solid var(--tx-gold-dim);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 20px 50px rgba(0,0,0,0.55);
  color: var(--tx-text-dim);
}
.txsave-card-wide { max-width: 620px; }
.txsave-card-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--tx-text);
  margin-bottom: 12px;
}
.txsave-card-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tx-text-faint);
  margin: 14px 0 8px;
}
.txsave-field-label {
  font-size: 11px;
  color: var(--tx-text-faint);
  margin-bottom: 4px;
}
.txsave-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid var(--tx-line);
  background: var(--tx-bg-panel-2);
  color: var(--tx-text);
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 10px;
}
.txsave-text-input:focus { border-color: var(--tx-gold-bright); outline: none; }
.txsave-summary { font-size: 11px; color: var(--tx-text-dim); margin-bottom: 6px; }
.txsave-summary-line { padding: 2px 0; }
.txsave-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.txsave-btn {
  padding: 9px 14px;
  min-height: 36px;
  border-radius: 7px;
  border: 1px solid var(--tx-line);
  background: var(--tx-bg-panel-2);
  color: var(--tx-text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
}
.txsave-btn:hover { border-color: var(--tx-gold-dim); }
.txsave-btn-primary { border-color: #55efc4; color: #55efc4; }
.txsave-btn-primary:hover { background: #55efc4; color: #0d0d1a; }
.txsave-btn-cancel { border-color: var(--tx-line); color: var(--tx-text-faint); }
.txsave-btn-danger { border-color: var(--tx-red, #ff7675); color: var(--tx-red, #ff7675); }
.txsave-btn-danger:hover { background: var(--tx-red, #ff7675); color: #0d0d1a; }
.txsave-btn-small { padding: 6px 10px; min-height: 30px; font-size: 11px; }
.txsave-status { font-size: 11px; color: var(--tx-text-faint); margin-top: 10px; min-height: 14px; }
.txsave-empty { font-size: 12px; color: var(--tx-text-faint); padding: 10px 0; }
.txsave-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tx-line);
}
.txsave-row:last-child { border-bottom: none; }
.txsave-row-main { flex: 1 1 200px; min-width: 0; }
.txsave-row-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--tx-text);
  overflow-wrap: anywhere;
}
.txsave-row-meta { font-size: 11px; color: var(--tx-text-faint); margin-top: 2px; overflow-wrap: anywhere; }
.txsave-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 480px) {
  .txsave-card { padding: 14px 12px 12px; max-height: 94vh; }
  .txsave-btn-row { flex-direction: column; }
  .txsave-btn-row .txsave-btn { width: 100%; }
  .txsave-row-actions { width: 100%; }
  .txsave-row-actions .txsave-btn-small { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   v257 — UNIFIED FULL UI THEMES
   ════════════════════════════════════════════════════════════════════
   Replaces the separate v253 "Pro Table Themes" + v256 "Background
   Presets" controls with ONE unified theme selector. Presentation only,
   persisted via localStorage (trigammonx_theme). Every override below
   reuses the EXISTING design tokens already threaded through page
   background / panel fills / borders / text / accents across the whole
   page — no new, parallel colour system. Never touches player-identity
   colours (Blue/Green/Red use their own separate, literal hex values
   everywhere — #74b9ff / #55efc4 / #ff7675 — never --tx-gold/
   --tx-blue-glow), board artwork, checker graphics, or dice results.
   "Classic Tech" is simply the existing default look (tech-image page
   background, warm-gold accent) and needs no override block.

   Each non-default theme sets:
     --tx-bg-deep     (page background colour)
     --tx-bg-panel    (panel fill)
     --tx-bg-panel-2  (recessed/secondary fill)
     --tx-line        (borders)
     --tx-gold / --tx-gold-bright / --tx-gold-dim   (primary accent)
     --tx-blue-glow / --tx-blue-dim                  (secondary accent)
   Light themes (Ivory, Golden Sand) additionally override
   --tx-text / --tx-text-dim / --tx-text-faint to dark values so
   ordinary player-facing text stays readable on a light page — every
   other theme inherits the existing white/near-white :root text tokens
   unchanged, since all of them keep dark panels regardless of how light
   or dark their surrounding page background colour is (see
   .tx-fulltheme-solid-bg below, which every non-default theme uses to
   swap the page background image for its --tx-bg-deep colour). ════ */
.tx-fulltheme-solid-bg {
  background:
    radial-gradient(ellipse 1200px 700px at 50% -4%, rgba(111,168,216,0.07), transparent 60%),
    radial-gradient(ellipse 1600px 1100px at 50% 38%, rgba(0,0,0,0), rgba(0,0,0,0.35) 100%),
    var(--tx-bg-deep);
}
body.tx-full-midnight-blue {
  --tx-bg-deep:     #081426;
  --tx-bg-panel:    #0c1e39;
  --tx-bg-panel-2:  #09162a;
  --tx-line:        #1a3865;
  --tx-gold:        #69a7d3;
  --tx-gold-bright: #a4c7e0;
  --tx-gold-dim:    rgba(105,167,211,0.35);
  --tx-blue-glow:   #4d77b2;
  --tx-blue-dim:    rgba(77,119,178,0.25);
}
body.tx-full-walnut {
  --tx-bg-deep:     #21140D;
  --tx-bg-panel:    #311e13;
  --tx-bg-panel-2:  #25160e;
  --tx-line:        #593827;
  --tx-gold:        #d3a269;
  --tx-gold-bright: #e0c4a4;
  --tx-gold-dim:    rgba(211,162,105,0.35);
  --tx-blue-glow:   #ac7853;
  --tx-blue-dim:    rgba(172,120,83,0.25);
}
body.tx-full-burgundy {
  --tx-bg-deep:     #200C12;
  --tx-bg-panel:    #31121b;
  --tx-bg-panel-2:  #250e15;
  --tx-line:        #582535;
  --tx-gold:        #ca7281;
  --tx-gold-bright: #dba9b1;
  --tx-gold-dim:    rgba(202,114,129,0.35);
  --tx-blue-glow:   #a6598c;
  --tx-blue-dim:    rgba(166,89,140,0.25);
}
body.tx-full-emerald {
  --tx-bg-deep:     #05100c;
  --tx-bg-panel:    #0a2119;
  --tx-bg-panel-2:  #071812;
  --tx-line:        #1b4b3a;
  --tx-gold:        #6ecf9e;
  --tx-gold-bright: #a6ddc2;
  --tx-gold-dim:    rgba(110,207,158,0.35);
  --tx-blue-glow:   #53ac96;
  --tx-blue-dim:    rgba(83,172,150,0.25);
}
body.tx-full-steel-blue {
  --tx-bg-deep:     #43586F;
  --tx-bg-panel:    #1b232d;
  --tx-bg-panel-2:  #131920;
  --tx-line:        #3b4c5e;
  --tx-gold:        #7ca4c0;
  --tx-gold-bright: #afc5d5;
  --tx-gold-dim:    rgba(124,164,192,0.35);
  --tx-blue-glow:   #60859f;
  --tx-blue-dim:    rgba(96,133,159,0.25);
}
body.tx-full-sage {
  --tx-bg-deep:     #586D5B;
  --tx-bg-panel:    #202821;
  --tx-bg-panel-2:  #171c18;
  --tx-line:        #3f5a43;
  --tx-gold:        #99bb81;
  --tx-gold-bright: #bfd2b1;
  --tx-gold-dim:    rgba(153,187,129,0.35);
  --tx-blue-glow:   #779966;
  --tx-blue-dim:    rgba(119,153,102,0.25);
}
body.tx-full-warm-taupe {
  --tx-bg-deep:     #706052;
  --tx-bg-panel:    #29231e;
  --tx-bg-panel-2:  #1d1916;
  --tx-line:        #5a4c3f;
  --tx-gold:        #bb9e81;
  --tx-gold-bright: #d2c2b1;
  --tx-gold-dim:    rgba(187,158,129,0.35);
  --tx-blue-glow:   #997766;
  --tx-blue-dim:    rgba(153,119,102,0.25);
}
body.tx-full-classic-green {
  --tx-bg-deep:     #07170d;
  --tx-bg-panel:    #0c2917;
  --tx-bg-panel-2:  #091f11;
  --tx-line:        #1d5331;
  --tx-gold:        #d8bb64;
  --tx-gold-bright: #e3d2a1;
  --tx-gold-dim:    rgba(216,187,100,0.35);
  --tx-blue-glow:   #53ac78;
  --tx-blue-dim:    rgba(83,172,120,0.25);
}
body.tx-full-red-leather {
  --tx-bg-deep:     #1c0a06;
  --tx-bg-panel:    #2f110a;
  --tx-bg-panel-2:  #240d08;
  --tx-line:        #5b2418;
  --tx-gold:        #d1ac61;
  --tx-gold-bright: #e2cb9c;
  --tx-gold-dim:    rgba(209,172,97,0.35);
  --tx-blue-glow:   #9e5d4c;
  --tx-blue-dim:    rgba(158,93,76,0.25);
}
/* ── Light themes — panels stay light, so text tokens must flip to dark
   for readability. Everything else (page bg / panel fills / borders /
   accents) follows the same override pattern as the dark themes above. */
body.tx-full-ivory {
  --tx-bg-deep:     #f3f0e7;
  --tx-bg-panel:    #ece6d7;
  --tx-bg-panel-2:  #e6decb;
  --tx-line:        #c3ad79;
  --tx-text:        #312c20;
  --tx-text-dim:    #605743;
  --tx-text-faint:  #867c65;
  --tx-gold:        #956b23;
  --tx-gold-bright: #765213;
  --tx-gold-dim:    rgba(149,107,35,0.30);
  --tx-blue-glow:   #3a6788;
  --tx-blue-dim:    rgba(58,103,136,0.22);
}
body.tx-full-golden-sand {
  --tx-bg-deep:     #f5f0e5;
  --tx-bg-panel:    #efe6d4;
  --tx-bg-panel-2:  #eadec8;
  --tx-line:        #ceae6e;
  --tx-text:        #342c1e;
  --tx-text-dim:    #64583f;
  --tx-text-faint:  #8a7c60;
  --tx-gold:        #9a661d;
  --tx-gold-bright: #7b4e0f;
  --tx-gold-dim:    rgba(154,102,29,0.30);
  --tx-blue-glow:   #8a5a38;
  --tx-blue-dim:    rgba(138,90,56,0.22);
}

@media (max-width: 760px) {
  .tx-section-header-title { letter-spacing: 2px; }
  .pip-race-strip-inner .pip-row { flex: 1 1 100%; }
}