/*
 * tool-shared.css — Universal styles for ALL v2 tool modules
 *
 * Injected by components-v2.js into every tool page.
 * Tools only need to define their unique layout in their .module.js styles.
 * These shared rules handle inputs, sliders, buttons, cards, stats, etc.
 *
 * All sizes come from CSS variables defined in :root by components-v2.js.
 */

/* ── Variables (fallbacks if not set by wrapper) ── */
:root {
  --touch-min: 44px;
  --slider-thumb: 20px;
  --slider-track: 4px;
}

/*
 * V1 → V2 variable aliases.
 * Many tool modules (music, OBC, creative) use the shorter v1 names that come from
 * tools/admin/design-reference.html. components-v2.js only sets the v2 names. These
 * aliases make the shorter names resolve correctly everywhere — without them, buttons
 * and form fields render transparent because var(--surf2) resolves to an undefined value.
 */
.tf-tool-content {
  --surf:     var(--surface);
  --surf2:    var(--surface-inset);
  --surf3:    var(--surface-alt);
  --b:        var(--border);
  --b2:       var(--border-strong);
  --text2:    var(--text-muted);
  --text3:    var(--text-faint);
  --r:        var(--radius);
  --rsm:      var(--radius-sm);
  --rlg:      var(--radius-lg);
  --mono:     var(--font-mono);
  --danger:   var(--accent-red, #f87171);
  --success:  var(--accent-green, #4ade80);
  --warning:  var(--accent-amber, #fbbf24);
  --info:     var(--accent-blue, #9dc3ff);
}

/* Root layout is set per-tool in module CSS (max-width varies) */
/* Prevent tool root from shrinking to content width (sw-center align-items:center) */
.tf-tool-content > * { width: 100%; box-sizing: border-box; }

/* ══════════════════════════════════════
   INPUTS
   ══════════════════════════════════════ */
.tf-tool-content [type="number"],
.tf-tool-content [type="text"],
.tf-tool-content [type="email"],
.tf-tool-content [type="date"],
.tf-tool-content [type="time"],
.tf-tool-content [type="tel"],
.tf-tool-content select,
.tf-tool-content textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--touch-min);
  background: var(--surface-inset);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--duration) var(--ease);
  margin-top: var(--space-xs);
  box-sizing: border-box;
}
.tf-tool-content [type="number"]:focus,
.tf-tool-content [type="text"]:focus,
.tf-tool-content [type="email"]:focus,
.tf-tool-content [type="date"]:focus,
.tf-tool-content [type="time"]:focus,
.tf-tool-content [type="tel"]:focus,
.tf-tool-content select:focus,
.tf-tool-content textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.tf-tool-content [type="number"]::placeholder,
.tf-tool-content [type="text"]::placeholder,
.tf-tool-content textarea::placeholder {
  color: var(--text-faint);
}

/* Number inputs: mono font, tighter side padding, minimum readable width */
.tf-tool-content [type="number"] {
  font-family: var(--font-mono);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  min-width: 72px;
}

/* ══════════════════════════════════════
   SLIDERS
   ══════════════════════════════════════ */
.tf-tool-content [type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--slider-track);
  background: var(--border-strong);
  border-radius: calc(var(--slider-track) / 2);
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: var(--space-sm) 0;
}
.tf-tool-content [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 var(--space-sm) color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform var(--duration);
}
.tf-tool-content [type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.tf-tool-content [type="range"]::-moz-range-track {
  height: var(--slider-track);
  background: var(--border-strong);
  border-radius: calc(var(--slider-track) / 2);
  border: none;
}
.tf-tool-content [type="range"]::-moz-range-thumb {
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Slider group layout */
.tf-tool-content .slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.tf-tool-content .slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tf-tool-content .slider-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tf-tool-content .slider-value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--primary-text, var(--primary));
}

/* ══════════════════════════════════════
   INPUT LABELS
   ══════════════════════════════════════ */
.tf-tool-content .input-label,
.tf-tool-content .lbl {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

/* ══════════════════════════════════════
   INPUT GRID
   ══════════════════════════════════════ */
.tf-tool-content .input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: end;
}
@media (max-width: 640px) {
  .tf-tool-content .input-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   CARDS
   ══════════════════════════════════════ */
.tf-tool-content .tool-card,
.tf-tool-content .tc {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── Prevent wide content from overflowing tool ── */
.tf-tool-content .preview-pane,
.tf-tool-content .collapse-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.tf-tool-content .tool-card-title,
.tf-tool-content .tct {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: var(--space-sm);
}

/* ══════════════════════════════════════
   RESULT DISPLAY
   ══════════════════════════════════════ */
.tf-tool-content .result-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary-text, var(--primary));
  letter-spacing: -0.02em;
  line-height: 1;
}
.tf-tool-content .result-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: var(--space-xs);
}

/* ══════════════════════════════════════
   STATS GRID
   ══════════════════════════════════════ */
.tf-tool-content .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-sm);
}
.tf-tool-content .tool-stat {
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}
.tf-tool-content .stat-val {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 2.5vw, 0.9rem);
  font-weight: 500;
  color: var(--text);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.tf-tool-content .stat-lbl {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: var(--space-xs);
}

/* ══════════════════════════════════════
   TOGGLE / PILL BAR
   ══════════════════════════════════════ */
.tf-tool-content .toggle-bar,
.tf-tool-content .unit-toggle,
.tf-tool-content .country-toggle,
.tf-tool-content .freq-toggle,
.tf-tool-content .mode-toggle,
.tf-tool-content .toggle-row,
.tf-tool-content .tab-toggle {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--space-md);
}
.tf-tool-content .toggle-bar > button,
.tf-tool-content .unit-toggle > button,
.tf-tool-content .country-toggle > button,
.tf-tool-content .freq-toggle > button,
.tf-tool-content .mode-toggle > button,
.tf-tool-content .toggle-row > button,
.tf-tool-content .tab-toggle > button,
.tf-tool-content .ut-btn,
.tf-tool-content .ct-btn,
.tf-tool-content .freq-opt,
.tf-tool-content .mode-opt,
.tf-tool-content .tog-btn {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition:background var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease),transform var(--duration) var(--ease);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tf-tool-content .ut-btn.active,
.tf-tool-content .ct-btn.active,
.tf-tool-content .freq-opt.active,
.tf-tool-content .mode-opt.active,
.tf-tool-content .tog-btn.active,
.tf-tool-content .toggle-bar > button.active,
.tf-tool-content .unit-toggle > button.active,
.tf-tool-content .country-toggle > button.active,
.tf-tool-content .freq-toggle > button.active,
.tf-tool-content .mode-toggle > button.active,
.tf-tool-content .toggle-row > button.active,
.tf-tool-content .tab-toggle > button.active {
  background: var(--primary);
  color: var(--text-on-primary);
}

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.tf-tool-content .tool-btn {
  width: 100%;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--text-on-primary);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--glow);
  transition: background var(--duration), transform var(--duration);
}
.tf-tool-content .tool-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════
   BREAKDOWN BAR
   ══════════════════════════════════════ */
.tf-tool-content .breakdown-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-sm) 0;
}
.tf-tool-content .breakdown-bar > div {
  height: 100%;
  transition: width var(--duration-slow) var(--ease);
}
.tf-tool-content .bar-legend {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}
.tf-tool-content .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-faint);
}
.tf-tool-content .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   COLLAPSIBLE SECTIONS
   ══════════════════════════════════════ */
.tf-tool-content .collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  user-select: none;
  min-height: var(--touch-min);
}
.tf-tool-content .collapse-toggle-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-faint);
}
.tf-tool-content .collapse-icon {
  font-size: 0.7rem;
  color: var(--text-faint);
  transition: transform var(--duration) var(--ease);
}
.tf-tool-content .collapse-toggle.open .collapse-icon {
  transform: rotate(180deg);
}
.tf-tool-content .collapse-body {
  display: none;
  overflow-x: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.tf-tool-content .collapse-toggle.open + .collapse-body {
  display: block;
}

/* ══════════════════════════════════════
   DATA TABLES
   ══════════════════════════════════════ */
.tf-tool-content .data-tbl {
  width: 100%;
  border-collapse: collapse;
}
.tf-tool-content .data-tbl th {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: var(--space-sm) var(--space-md);
  text-align: right;
  border-bottom: 1px solid var(--border-strong);
}
.tf-tool-content .data-tbl th:first-child { text-align: left; }
.tf-tool-content .data-tbl td {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-muted);
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.tf-tool-content .data-tbl td:first-child {
  text-align: left;
  font-family: var(--font-body);
  color: var(--text);
}

/* ══════════════════════════════════════
   INSIGHT BOX
   ══════════════════════════════════════ */
.tf-tool-content .insight-box {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.tf-tool-content .insight-box strong {
  color: var(--text);
  font-weight: 600;
}
.tf-tool-content .insight-box .insight-label,
.tf-tool-content .insight-label {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-text, var(--primary));
  margin-bottom: var(--space-xs);
}

/* ══════════════════════════════════════
   BADGES
   ══════════════════════════════════════ */
.tf-tool-content .tool-badge {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 100px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-text, var(--primary));
}

/* ══════════════════════════════════════
   INPUT PREFIX / SUFFIX
   ══════════════════════════════════════ */
.tf-tool-content .input-wrap { position: relative; }
.tf-tool-content .input-prefix,
.tf-tool-content .input-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-faint);
  pointer-events: none;
}
.tf-tool-content .input-prefix { left: 13px; }
.tf-tool-content .input-suffix { right: 13px; }
.tf-tool-content .has-prefix { padding-left: 28px; }
.tf-tool-content .has-suffix { padding-right: 34px; }

/* ══════════════════════════════════════
   CARD + BUTTON + INPUT primitives moved to assets/css/components.css
   (single source of truth — loaded by both SPA and standalone)
   ══════════════════════════════════════ */

/* ══════════════════════════════════════
   HORIZONTAL SCROLL REGION
   Use on wide grids/keyboards/sequencers that won't fit on mobile.
   Usage:
     <div class="tf-scroll-x"><div class="tf-scroll-x-inner">...wide content...</div></div>
   The inner div should set an explicit min-width (e.g. 480px or 100%).
   ══════════════════════════════════════ */
.tf-tool-content .tf-scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.tf-tool-content .tf-scroll-x::-webkit-scrollbar { height: 6px; }
.tf-tool-content .tf-scroll-x::-webkit-scrollbar-track { background: transparent; }
.tf-tool-content .tf-scroll-x::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.tf-tool-content .tf-scroll-x-inner {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  min-width: 100%;
  padding-bottom: 2px;
}
.tf-tool-content .tf-scroll-x-fade {
  position: relative;
}
.tf-tool-content .tf-scroll-x-fade::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, var(--surface-inset));
  pointer-events: none;
}

/* Extra-tight mobile rules for music-tool-style grids */
@media (max-width: 520px) {
  .tf-tool-content .osc-preset-grid,
  .tf-tool-content .pn-inst-row,
  .tf-tool-content .ch-quality-grid,
  .tf-tool-content .rm-inst-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .tf-tool-content .osc-wave-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════
   GHOST / DANGER BUTTONS
   ══════════════════════════════════════ */
.tf-tool-content .tool-btn-ghost,
.tf-tool-content .btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  box-shadow: none;
}
.tf-tool-content .tool-btn-ghost:hover,
.tf-tool-content .btn-ghost:hover {
  border-color: var(--primary);
  color: var(--text);
  background: transparent;
}

/* ══════════════════════════════════════
   CONTAINMENT
   ══════════════════════════════════════ */
.tf-tool-content input,
.tf-tool-content select,
.tf-tool-content textarea,
.tf-tool-content button {
  max-width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════════
   GAME SHELL — Shared layout for all games
   ══════════════════════════════════════
   Usage: wrap your game in <div class="game-shell">
     <div class="game-board">   ← board area (square, centered)
     <div class="game-panel">   ← side panel (controls, history, future: chat)
   Desktop: board left, panel right
   Mobile: board full-width, panel below
   Board fills available height without scrolling
   ══════════════════════════════════════ */

.game-shell {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 16px;
  max-width: 1100px;
  min-width: 0;
  background: var(--surf2, rgba(255,255,255,0.03));
  border: 1px solid var(--b, rgba(255,255,255,0.07));
  border-radius: var(--r, 12px);
  margin: 0 auto;
  /* Encourage board to fill viewport without scrolling */
  min-height: min(75vh, 640px);
}

/* ══════════════════════════════════════════════════════════════
   GAME BOARD SIZING — SINGLE SOURCE OF TRUTH
   Every fun/game board uses .game-board + a shape modifier.
   Never set max-width / width / aspect-ratio per game on the board
   element directly — the shared classes below handle it.
   ══════════════════════════════════════════════════════════════ */

/* Outer board slot — same target width for EVERY game, so chess feels
   the same size as minesweeper feels the same size as backgammon. */
.game-board {
  flex: 1 1 auto;
  min-width: 360px;
  max-width: 680px;
  width: 100%;
  position: relative;
}

/* Shared border/shadow + natural-fill helpers */
.game-board-square,
.game-board-wide,
.game-board-grid,
.game-board-tall {
  position: relative;
  width: 100%;
  user-select: none;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,255,255,0.04);
}

/* Shape modifiers — declare the board's aspect so it never renders tiny */
.game-board-square { aspect-ratio: 1; }              /* chess, gomoku, sudoku, minesweeper, tic-tac-toe */
.game-board-wide   { aspect-ratio: 1.45; }           /* backgammon */
.game-board-grid   { aspect-ratio: 2.2; }            /* kanoodle (11:5) */
.game-board-tall   { aspect-ratio: 0.7; }            /* mastermind (stacked rows of pegs) */

/* Panel — fixed width on desktop, wraps on mobile */
.game-panel {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surf3, rgba(255,255,255,0.04));
  border: 1px solid var(--b, rgba(255,255,255,0.07));
  border-radius: var(--rsm, 8px);
  padding: 14px;
}

/* Tablet: shrink panel so board keeps a reasonable min size */
@media (max-width: 900px) {
  .game-shell { gap: 14px; padding: 12px; }
  .game-board { min-width: 320px; max-width: 100%; }
  .game-panel { width: 200px; padding: 12px; }
}

/* Mobile: stack vertically, full width, board first */
@media (max-width: 640px) {
  .game-shell {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    min-height: 0;
    border-radius: var(--rsm, 8px);
  }
  .game-board {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .game-panel {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
  .game-panel > * { flex: 1 1 auto; min-width: 140px; }
}

/* Kids-layout (.kl-root) containers — match chess board sizing so boards fill their game-board area. */
.kl-root { align-items: stretch; }
.kl-workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.kl-board-center {
  flex: 1;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

/* ── Game status bar (turn indicator, score, timer) ── */
.game-status {
  padding: 10px 14px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text, #e8eaf0);
}
.game-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ── Game mode/difficulty buttons ── */
.game-modes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-mode-btn {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
  color: var(--text2, #8b90a8);
  font-family: var(--font-heading, system-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  min-height: 40px;
  text-align: center;
}
.game-mode-btn:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--text, #e8eaf0); }
.game-mode-btn.active { background: var(--primary, #f8bd44); border-color: var(--primary, #f8bd44); color: #1a1a1a; font-weight: 700; }

/* ── Game action buttons ── */
.game-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-heading, system-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  min-height: 42px;
  text-align: center;
  border: none;
}
.game-btn-primary {
  background: var(--primary, #f8bd44);
  color: var(--text-on-primary, #412d00);
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 15%, transparent);
}
.game-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.game-btn-secondary {
  background: rgba(0,0,0,0.15);
  color: var(--text-muted, #d1c5b4);
  border: 1px solid rgba(255,255,255,0.08);
}
.game-btn-secondary:hover { border-color: rgba(255,255,255,0.15); color: var(--text, #e8eaf0); }

/* ── Game info/history box ── */
.game-history {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  flex: 1;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.game-history-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text3, #454b66);
  padding: 10px 12px 4px;
}

/* ── Game captured/score bar (above/below board) ── */
.game-score-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  min-height: 32px;
  font-size: 20px;
  letter-spacing: 2px;
}
.game-score-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3, #454b66);
  margin-bottom: 2px;
}

/* ── Game overlay (game over, rules, promo) ── */
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.75);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.game-overlay.show {
  display: flex;
}
.game-overlay h2 { font-size: 24px; font-weight: 800; color: var(--accent-amber); }
.game-overlay p { font-size: 14px; color: color-mix(in srgb, var(--accent-amber) 70%, transparent); }

/* ── Stat counters (wins, losses, time) ── */
.game-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
  text-align: center;
}
.game-stat {
  padding: 8px 4px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
}
.game-stat-val {
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e8eaf0);
}
.game-stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text3, #454b66);
  margin-top: 2px;
}

/* ── Win confetti animation ── */
@keyframes confetti-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.game-confetti {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.game-confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-fall 2.5s ease-in forwards;
}

/* ── Game Shell — Light mode overrides ── */
[data-theme="light"] .game-shell { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .game-panel { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .game-status { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .game-mode-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: var(--text-muted); }
[data-theme="light"] .game-mode-btn:hover { border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .game-mode-btn.active { background: var(--primary); border-color: var(--primary); color: #1a1a1a; }
[data-theme="light"] .game-btn-secondary { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: var(--text-muted); }
[data-theme="light"] .game-btn-secondary:hover { border-color: rgba(0,0,0,0.2); color: var(--text); }
[data-theme="light"] .game-history { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .game-stat { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .game-score-bar { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .game-board-square { box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 2px rgba(0,0,0,0.06); }
[data-theme="light"] .game-overlay { background: rgba(255,255,255,0.85); }
[data-theme="light"] .game-overlay h2 { color: #1a1a1a; }
[data-theme="light"] .game-overlay p { color: rgba(0,0,0,0.6); }

/* ── Save Manager Widget ── */
.tfsm-widget { background: var(--surf3, rgba(255,255,255,0.04)); border: 1px solid var(--b, rgba(255,255,255,0.07)); border-radius: var(--r, 12px); padding: 12px; margin-top: 12px; }
.tfsm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tfsm-title { font-size: 0.78rem; font-weight: 700; color: var(--text, #e8eaf0); }
.tfsm-usage { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--text3, #454b66); }
.tfsm-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tfsm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surf2, rgba(255,255,255,0.03)); border-radius: var(--rsm, 8px); }
.tfsm-name { flex: 1; font-size: 0.78rem; font-weight: 600; color: var(--text, #e8eaf0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfsm-date { font-size: 0.65rem; color: var(--text3, #454b66); white-space: nowrap; }
.tfsm-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tfsm-btn { padding: 4px 10px; border: 1px solid var(--b2, rgba(255,255,255,0.1)); border-radius: 6px; background: none; color: var(--text2, #8b90a8); font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.tfsm-btn:hover { border-color: var(--primary, #f8bd44); color: var(--text, #e8eaf0); }
.tfsm-load { background: color-mix(in srgb, var(--accent-blue-fill) 8%, transparent); border-color: color-mix(in srgb, var(--accent-blue-fill) 20%, transparent); color: var(--primary-text, var(--primary, #4f6ef7)); }
.tfsm-del { color: var(--text3); }
.tfsm-del:hover { color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red-fill) 30%, transparent); }
.tfsm-save-btn { background: var(--primary, #f8bd44); color: var(--text-on-primary, #1a1a2e); border-color: var(--primary, #f8bd44); font-weight: 700; }
.tfsm-empty { font-size: 0.75rem; color: var(--text3, #454b66); text-align: center; padding: 8px; }
.tfsm-save-row { display: flex; gap: 6px; }
.tfsm-input { flex: 1; padding: 6px 10px; background: var(--surf2, rgba(255,255,255,0.03)); border: 1px solid var(--b2, rgba(255,255,255,0.1)); border-radius: 6px; color: var(--text, #e8eaf0); font-size: 0.78rem; }
.tfsm-input::placeholder { color: var(--text3, #454b66); }

/* ══════════════════════════════════════════════════════════════════════════════
   CONSTRUCTION-OBC — visual unification with shared design system
   
   OBC modules predate the shared tool-shared.css vocabulary and ship with their own
   class names (.result-panel, .span-value, .clabel, .pill, .compare-card, etc.).
   Rather than rewrite every tool's HTML, these overrides pull those classes into the
   same typography, card chrome, and button styling as .tc / .tct / .result-value /
   .result-label / .mode-toggle / .tool-btn.
   
   Specificity note: `.tf-tool-content .tool-obc-* .<class>` = 0,3,0 which beats the
   tool's inline `.tool-obc-* .<class>` = 0,2,0 — so these rules win without !important.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Eyebrow (section above title) — match finance's eyebrow treatment ── */
.tf-tool-content [class^="tool-obc-"] .obc-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-text, var(--primary));
  margin-bottom: var(--space-md);
}

/* ── Card chrome — match .tc look ── */
.tf-tool-content [class^="tool-obc-"] .result-panel,
.tf-tool-content [class^="tool-obc-"] .stub-panel {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

/* ── Big headline result — match .result-value (font-display italic, primary color) ── */
.tf-tool-content [class^="tool-obc-"] .span-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700;
  color: var(--primary-text, var(--primary));
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ── Result sub-line (metric equivalent) — monospace small, muted ── */
.tf-tool-content [class^="tool-obc-"] .span-metric,
.tf-tool-content [class^="tool-obc-"] .stat-sub {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ── Section labels / stat labels / field labels — match .tct ── */
.tf-tool-content [class^="tool-obc-"] .span-main,
.tf-tool-content [class^="tool-obc-"] .stat-label,
.tf-tool-content [class^="tool-obc-"] .section-label,
.tf-tool-content [class^="tool-obc-"] .clabel,
.tf-tool-content [class^="tool-obc-"] .ilabel {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: var(--space-sm);
}

/* ── Stat value (result-grid items in stair-calculator, spatial-separation, etc.) ── */
.tf-tool-content [class^="tool-obc-"] .stat-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.tf-tool-content [class^="tool-obc-"] .stat-value.primary {
  color: var(--primary-text, var(--primary));
}

/* ── Pill / tab selectors — match .mode-toggle / .freq-toggle active state ── */
.tf-tool-content [class^="tool-obc-"] .pill,
.tf-tool-content [class^="tool-obc-"] .mtab,
.tf-tool-content [class^="tool-obc-"] .ttab,
.tf-tool-content [class^="tool-obc-"] .rtab {
  font-family: var(--font-heading);
  font-weight: 600;
}
.tf-tool-content [class^="tool-obc-"] .pill.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

/* ── Compare cards — keep their grid but align typography with shared stats ── */
.tf-tool-content [class^="tool-obc-"] .compare-card {
  background: var(--surface-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.tf-tool-content [class^="tool-obc-"] .compare-card.current {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-inset));
}
.tf-tool-content [class^="tool-obc-"] .compare-size,
.tf-tool-content [class^="tool-obc-"] .config-nominal {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Status badges — match shared badge treatment ── */
.tf-tool-content [class^="tool-obc-"] .span-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Note / warning boxes — match .insight-box chrome ── */
.tf-tool-content [class^="tool-obc-"] .note,
.tf-tool-content [class^="tool-obc-"] .type-desc {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Print / export buttons — match .tool-btn ── */
.tf-tool-content [class^="tool-obc-"] .obc-print-btn {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── OBC source / verified footer — match muted footer treatment ── */
.tf-tool-content [class^="tool-obc-"] .obc-footer {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-lg);
  font-size: 0.72rem;
  color: var(--text-faint);
  line-height: 1.6;
}
.tf-tool-content [class^="tool-obc-"] .obc-footer strong {
  color: var(--text-muted);
  font-weight: 600;
}