:root {
  --bg: #0f1012;
  --bg-elevated: #17191c;
  --bg-panel: #1e2025;
  --border: #2e333a;
  --text: #e8ebe6;
  --text-muted: #9aa89e;
  --accent: #c4a35a;
  --accent-dim: #8a7340;
  --danger: #c45a5a;
  --pin-mg-spot: #ff0000;
  --pin-mg-spot-glow: rgba(255, 0, 0, 0.55);
  --pin-axis: #e10600;
  --pin-axis-glow: rgba(225, 6, 0, 0.55);
  --pin-allies: #0051ff;
  --pin-allies-glow: rgba(70, 130, 212, 0.55);
  --pin-neutral: #17191c;
  --pin-neutral-glow: rgba(232, 235, 230, 0.55);
  --pin-no-media: #e8ebe6;
  --pin-no-media-glow: rgba(232, 235, 230, 0.55);
  --pin-mg-no-media: #ffd900;
  --pin-mg-no-media-glow: rgba(230, 194, 0, 0.55);
  --pin-climb: #39ff14;
  --pin-climb-glow: rgba(57, 255, 20, 0.55);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --radius: 7px;
  --radius-pill: 10px;
  --font-display: "Texta Alt", system-ui, sans-serif;
  --font-body: "Texta Alt", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.btn {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary {
  background: linear-gradient(180deg, #d4b76a, #a8873f);
  color: #1a1408;
  border-color: #c4a35a;
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.btn--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
}

.btn--icon:hover {
  border-color: var(--accent-dim);
}

.btn--small {
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
}

.btn--danger {
  color: #f0a8a8;
  border-color: rgba(220, 90, 90, 0.45);
}

.btn--danger:hover {
  color: #ffd4d4;
  border-color: rgba(240, 120, 120, 0.7);
  background: rgba(180, 60, 60, 0.15);
}