/* Shared design tokens — sourced from the approved plan. */
:root {
  --bg: #0b0b0d;
  --surface: #17171e;
  --surface-2: #22222b;
  --border: #34343f;
  --border-soft: #272730;
  --text: #ececf1;
  --muted: #a8a8b3;
  --dim: #74747f;
  --accent: #f0b840;
  --accent-soft: rgba(240, 184, 64, 0.14);
  --accent-line: rgba(240, 184, 64, 0.40);
  --signal-pos: var(--accent);
  --signal-pos-soft: var(--accent-soft);
  --signal-neg: var(--muted);
  --signal-neg-soft: rgba(168, 168, 179, 0.12);
}

html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01'; }
.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-variation-settings: 'SOFT' 50, 'WONK' 0; }
.font-mono { font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; font-feature-settings: 'tnum', 'zero'; }

.smallcaps { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); font-weight: 600; }
.hairline { background: var(--border); height: 1px; border: 0; }
.hairline-gold { background: var(--accent); height: 1px; border: 0; opacity: 0.85; }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.surface-flat { background: var(--surface); border-radius: 6px; }

.crest { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; }
.crest-ars { background: linear-gradient(135deg, #ef0107 0%, #b30009 100%); color: #fff; }
.crest-liv { background: linear-gradient(135deg, #c8102e 0%, #870017 100%); color: #f5e8a3; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pill-gold { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.pill-green { background: var(--signal-pos-soft); color: var(--signal-pos); border: 1px solid rgba(93, 211, 158, 0.35); }
.pill-dim { background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid var(--border); }

.btn-primary { background: var(--accent); color: #1a1100; font-weight: 700; padding: 8px 16px; border-radius: 4px; font-size: 13px; letter-spacing: 0.02em; border: 0; cursor: pointer; }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-line); padding: 7px 14px; border-radius: 4px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-text { background: transparent; color: var(--muted); border: 0; padding: 6px 0; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-text:hover { color: var(--text); }

/* Diverging weapon bar primitive */
.bar-row { display: grid; grid-template-columns: 36px 1fr 100px 1fr 36px; align-items: center; gap: 10px; font-size: 12px; }
.bar { height: 6px; border-radius: 2px; background: var(--surface-2); }
.bar-fill { height: 100%; border-radius: 2px; background: var(--dim); }
.bar-fill.dom { background: var(--accent); }
.bar-left { display: flex; justify-content: flex-end; }
.bar-right { display: flex; justify-content: flex-start; }
.bar-label { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.bar-num { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
.bar-num.dom { color: var(--accent); font-weight: 700; }
.bar-num.dim { color: var(--muted); }

/* H2H result dots */
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-w { background: var(--signal-pos); }
.dot-d { background: var(--dim); }
.dot-l { background: var(--signal-neg); }

/* Confidence segmented gauge */
.gauge { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 8px; }
.gauge-cell { background: var(--surface-2); border-radius: 1px; }
.gauge-cell.active { background: var(--accent); box-shadow: 0 0 8px rgba(232, 177, 74, 0.4); }
.gauge-cell.lit { background: rgba(232, 177, 74, 0.4); }

/* Desktop intentionally unconstrained — the bento grid is fixed at
   1440x900 inside .frame, and any narrower viewport gets a real
   responsive layout via @media rules in variant-final.html. */