:root {
  color-scheme: dark;
  --bg: #101112;
  --panel: rgba(20, 22, 24, 0.94);
  --panel-2: rgba(255, 250, 240, 0.06);
  --ink: #fffaf0;
  --text: var(--ink);
  --muted: rgba(255, 250, 240, 0.68);
  --line: rgba(255, 250, 240, 0.16);
  --hot: #ff4b35;
  --good: #78ffb0;
  --gold: #f5d66c;
  --blue: #74a7ff;
  --violet: #c891ff;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --warn: var(--gold);
  --bad: var(--hot);
  --live: var(--hot);
  --standby: var(--good);
  --orange: #ff8a4c;
  --red: var(--hot);
  --cat-goofy: var(--good);
  --cat-anti-ruin: #8fd3ff;
  --cat-neutral: #c6cbd0;
  --cat-wildcard: var(--violet);
  --cat-mild-chaos: var(--gold);
  --cat-medium-chaos: var(--orange);
  --cat-strong-chaos: var(--hot);
  --cat-brutal-chaos: var(--violet);
}

html,
body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
}

.panel,
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.chip,
.badge,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--muted);
  background: rgba(255, 250, 240, 0.06);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip.good,
.badge.good,
.pill.good,
.badge.live,
.statusBadge.active,
.statePill.available {
  color: #07110d;
  background: var(--good);
  border-color: transparent;
}

.chip.hot,
.badge.hot,
.pill.hot {
  color: #180706;
  background: var(--hot);
  border-color: transparent;
}

.chip.gold,
.badge.gold,
.pill.gold,
.statePill.cooldown,
.statePill.used_this_match {
  color: #130f04;
  background: var(--gold);
  border-color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.08);
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: rgba(255, 250, 240, 0.14);
}

.btn.primary,
button.primary {
  color: #07110d;
  background: var(--good);
  border-color: transparent;
}

.btn.danger,
button.danger,
button.clear {
  color: #180706;
  background: var(--hot);
  border-color: transparent;
}

.btn.ghost,
button.ghost {
  color: var(--ink);
  background: rgba(255, 250, 240, 0.08);
  border-color: var(--line);
}

button.force,
a.forceLink {
  color: #130f04;
  background: var(--gold);
  border-color: transparent;
}

button.reset,
.statePill.active {
  color: #06102a;
  background: var(--blue);
  border-color: transparent;
}

.section-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--panel-2);
}

.cat-goofy {
  background: var(--cat-goofy);
}

.cat-antiRuin,
.cat-anti-ruin {
  background: var(--cat-anti-ruin);
}

.cat-neutral {
  background: var(--cat-neutral);
}

.cat-wildcard {
  background: var(--cat-wildcard);
  color: #fff;
}

.cat-mildChaos,
.cat-mild-chaos {
  background: var(--cat-mild-chaos);
}

.cat-mediumChaos,
.cat-medium-chaos {
  background: var(--cat-medium-chaos);
}

.cat-strongChaos,
.cat-strong-chaos {
  background: var(--cat-strong-chaos);
  color: #fff;
}

.cat-brutalChaos,
.cat-brutal-chaos {
  background: var(--cat-brutal-chaos);
  color: #fff;
}