/* The "Soft" style: cool blue grey, Geist type, pill shaped buttons and
   segments, borderless panels told apart by their tint alone. The accent
   moves to a pale seafoam and fills selected options softly instead of
   edging them. Loaded after styles.css. */

:root {
  --bg:          #101317;
  --surface-1:   #161A20;
  --surface-2:   #1D2229;
  --surface-3:   #262C35;
  --border:      #2C333D;
  --border-soft: rgba(214, 224, 240, 0.06);

  --text:        #E7EAF0;
  --text-2:      #A4ACBA;
  --muted:       #737D8D;

  --accent:      #74C9BA;
  --accent-hi:   #95D8CC;
  --accent-lo:   #4FA394;
  --accent-ink:  #0A2420;
  --accent-soft: rgba(116, 201, 186, 0.10);
  --accent-glow: rgba(116, 201, 186, 0.18);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-1: none;

  --font-display: "Geist", system-ui, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, Consolas, monospace;

  --grid: #1F242C;
  --axis: #2C333D;

  --glass: none;
  --glass-hover: none;
  --glass-line: transparent;
  --glass-edge: none;
  --glass-shadow: none;
  --accent-fill: rgba(116, 201, 186, 0.14);
  --accent-fill-grad: rgba(116, 201, 186, 0.14);
  --accent-fill-edge: none;
}

body { font-size: 14px; }
h2 { font: 600 16px/1.2 var(--font-display); letter-spacing: -0.02em; }
h3.subhead, h3.minor { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-2); }

.step {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 11px/1 var(--font-body);
}

.topbar {
  background: rgba(16, 19, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--border-soft);
}
.logo { font: 600 16px/1 var(--font-display); letter-spacing: -0.02em; }
.runbar {
  background: rgba(29, 34, 41, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--border-soft);
  padding: 12px 14px 12px 12px;
}

.panel { border: 0; padding: 24px; }
.player { border: 0; border-radius: 12px; }
.shared-banner, .notice, .error { border: 0; border-left: 3px solid var(--accent); border-radius: 12px; }

/* buttons: pills */
.btn {
  font-weight: 500;
  color: var(--text);
  background: var(--surface-3);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  padding: 7px 14px;
}
.btn:hover:not(:disabled) { background: #2F3640; border-color: transparent; }
.btn:active:not(:disabled) { transform: scale(0.97); box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn.square { border-radius: 50%; width: 28px; height: 28px; }
.btn.primary {
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  box-shadow: none;
  font-weight: 600;
}
.btn.primary kbd { border: 0; background: rgba(10, 36, 32, 0.14); border-radius: 4px; }
.btn.stop { height: 40px; border-radius: var(--r-pill); }
.btn.stop:not(:disabled) { color: #F4B9BC; background: rgba(229, 100, 106, 0.14); }
.btn.small { padding: 4px 11px; }
kbd { border-radius: 4px; }

/* segmented: a pill track, the selected option a soft tinted pill */
.segmented {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
  overflow: visible;
}
.seg { border-radius: var(--r-pill); padding: 5px 12px; font-weight: 500; }
.seg.active { color: var(--accent-hi); }
.game-switch .seg { padding: 5px 13px; font-size: 12px; }

.tab { background: var(--surface-2); border: 0; border-radius: var(--r-pill); padding: 5px 12px; }
.tab.active { color: var(--accent-hi); }

.street-tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  border-radius: var(--r-pill);
}
.pro-tag { border-radius: var(--r-pill); letter-spacing: 0.02em; text-transform: none; font-size: 11px; }

.chip { border-radius: var(--r-pill); background: var(--surface-1); border-color: transparent; color: var(--text-2); }
.chip:hover { border-color: transparent; }

.range-input, .board-input, .select, .dict-search, .name-input { border-radius: 10px; border-color: transparent; }
.range-input { background: var(--surface-1); }
.board-input { background: var(--surface-2); }
.board-input:focus, .range-input:focus { border-color: var(--accent-lo); box-shadow: 0 0 0 3px var(--accent-soft); }

.slot { border-radius: 10px; border-color: transparent; background: var(--surface-2); }
.slot.filled { border-color: transparent; background: var(--surface-3); }
.slot.next { border-color: var(--accent-lo); }
.card-btn { border-radius: 6px; }
.mc { border-radius: 4px; border-color: transparent; background: var(--surface-3); }

.eq-split { border-radius: var(--r-pill); height: 12px; gap: 2px; }
.eq-value { letter-spacing: -0.02em; }
.bar-track, .comp-bar { border-radius: var(--r-pill); }
.bar-fill { border-radius: var(--r-pill); }
.run-split-bar { border-radius: var(--r-pill); }

.help { border: 0; background: var(--surface-3); }
.empty-state { border: 0; background: var(--surface-1); border-radius: var(--r-lg); }
.meta { border: 0; background: var(--surface-2); border-radius: var(--r-pill); }
.drawer, .share-dialog { border: 0; }
.share-dialog { border-radius: 20px; }