:root {
  color-scheme: dark;
  --page: #0d0e0f;
  --surface: #151617;
  --surface-raised: #1c1d1e;
  --surface-selected: #27231d;
  --surface-control: #111312;
  --text: #ece8df;
  --text-muted: #a7a29a;
  --line: #383838;
  --line-strong: #5c5140;
  --brand: #d7b56d;
  --brand-soft: #9f8653;
  --outcome-win: #74b97d;
  --outcome-loss: #d97a70;
  --outcome-draw: #d1b064;
  --alliance-allied: #6fbbe0;
  --alliance-hostile: #e1847f;
  --focus: #f0cd74;
  --radius-control: 4px;
  --radius-panel: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

select {
  color-scheme: dark;
  background-color: var(--surface-control);
  color: var(--text);
}

select option {
  background: var(--surface-control);
  color: var(--text);
}

.ui-state {
  display: grid;
  gap: var(--space-2);
  width: min(920px, 100%);
  margin: var(--space-5) auto;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.ui-state.is-compact {
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.ui-state.is-error { border-left-color: var(--outcome-loss); }
.ui-state.is-empty { border-left-color: var(--text-muted); }
.ui-state.is-stale-fallback { border-left-color: var(--outcome-draw); }
.ui-state h2, .ui-state h3 { margin: 0; color: var(--text); font-size: 18px; }
.ui-state p { margin: 0; color: var(--text-muted); }
.ui-state-detail { font-size: 12px; }