/* Evergreen palette, copied from the game's src/ui/styles.css. */
:root {
  --bg: #f1f5f0;
  --text: #17322b;
  --muted: #4c645c;
  --line: #9fb5aa;
  --btn: #ffffff;
  --pill: #e3ebe5;
  --accent: #2e7d6f;
  --accent-text: #24695d;
  --good: #23854a;
  --good-text: #1f7a40;
  --bad: #d2453a;
  --bad-text: #b3271d;
  --cta: #f29e4c;
  --on-cta: #2a1a08;
  --modal: #ffffff;
  --shadow: 0 1px 0 rgba(23, 50, 43, 0.08), 0 3px 12px rgba(23, 50, 43, 0.1);
  /* Chart series: the validated data-viz categorical order (blue, orange, aqua, yellow). */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --grid: #dce6df;
  --r-common-text: #5f646d;
  --r-uncommon-text: #1f6e30;
  --r-rare-text: #1864ab;
  --r-epic-text: #862e9c;
  --r-legendary-text: #a8400a;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1f1b;
    --text: #e8f0ec;
    --muted: #a7bdb4;
    --line: #4e6a62;
    --btn: #1a2e29;
    --pill: #24403a;
    --accent: #6fd1be;
    --accent-text: #6fd1be;
    --good-text: #5fd68a;
    --bad-text: #ff8a7e;
    --modal: #172a25;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --grid: #24403a;
    --r-common-text: #9aa0aa;
    --r-uncommon-text: #4fc764;
    --r-rare-text: #5aa9f0;
    --r-epic-text: #cc7ae0;
    --r-legendary-text: #ff8a3d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 Sora, system-ui, sans-serif;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd { font-size: 0.9em; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--btn); }

.top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.top h1 { font-size: 18px; margin: 0; }
.top nav { display: flex; gap: 4px; flex: 1; }
.tab { border: 0; background: none; padding: 6px 10px; border-radius: 999px; font-weight: 600; }
.tab.on { background: var(--pill); }
.tab.soon { color: var(--muted); font-weight: 400; }
.link { border: 0; background: none; color: var(--accent-text); text-decoration: underline; }

main { max-width: 1040px; margin: 0 auto; padding: 16px; }

.card { background: var(--modal); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); max-width: 420px; margin: 40px auto; display: grid; gap: 10px; }
.card h2 { margin: 0; }
.card input { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--btn); }
.primary { background: var(--cta); color: var(--on-cta); border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 700; }
.error { color: var(--bad-text); font-weight: 600; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: var(--btn); padding: 6px 12px; }
.seg button.on { background: var(--accent); color: var(--bg); font-weight: 700; }
.seg span:empty { display: none; }
.keys { color: var(--muted); font-size: 13px; }

.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  background: var(--modal);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.item.current { border-color: var(--accent); }
.item .word { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.item .meta { color: var(--muted); font-size: 13px; grid-column: 1; }
.item .meta a { color: var(--accent-text); }
.item .actions { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.item input { width: 9em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--btn); }
.item .approve, .item .reject, .item .reopen { border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; color: #fff; }
.item .approve { background: var(--good); }
.item .reject { background: var(--bad); }
.item .reopen { background: var(--pill); color: var(--text); }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

@media (max-width: 560px) {
  .item { grid-template-columns: 1fr; }
  .item .actions { grid-row: auto; grid-column: 1; justify-content: flex-start; }
}

/* ----- header extras ----- */
.version { font-size: 13px; color: var(--muted); }
.top nav { flex-wrap: wrap; }

/* ----- flags ----- */
.lang { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.flag { width: 24px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.meta .lang, .bar-label .lang { margin-right: 4px; }
.meta .flag, .bar-label .flag { width: 18px; height: 9px; }

/* ----- changelog ----- */
dialog { border: 0; border-radius: 14px; padding: 20px; max-width: 560px; width: calc(100% - 32px); background: var(--modal); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(15, 31, 27, 0.45); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2 { margin: 0; }
dialog h3 { font-size: 15px; margin: 16px 0 4px; }
dialog ul { margin: 0; padding-left: 20px; }
.muted { color: var(--muted); font-weight: 400; }

/* ----- dashboard ----- */
#filters { align-items: center; margin-bottom: 12px; }
#filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
#filters select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--btn); color: var(--text); }
#filters .check input { accent-color: var(--accent); }
.view { display: grid; gap: 12px; transition: opacity 0.15s; }
.view.loading { opacity: 0.5; }
.panel { background: var(--modal); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { margin: 0 0 4px; font-size: 15px; }
.note { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--modal); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.tile span { color: var(--muted); font-size: 13px; }
.tile b { font-size: 26px; }

.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.bar-track { height: 12px; }
.bar { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-value { font-variant-numeric: tabular-nums; color: var(--muted); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .end-label { fill: var(--muted); font-size: 11px; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; cursor: crosshair; }
.line.s1 { stroke: var(--s1); } circle.s1 { fill: var(--s1); }
.line.s2 { stroke: var(--s2); } circle.s2 { fill: var(--s2); }
.line.s3 { stroke: var(--s3); } circle.s3 { fill: var(--s3); }
.line.s4 { stroke: var(--s4); } circle.s4 { fill: var(--s4); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.legend span, .tooltip div { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.key.s1 { background: var(--s1); } .key.s2 { background: var(--s2); } .key.s3 { background: var(--s3); } .key.s4 { background: var(--s4); }

.tooltip { position: fixed; z-index: 10; pointer-events: none; background: var(--modal); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.tooltip .tip-title { color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; }
th[data-sort="name"], th[data-sort="rarity"] { cursor: default; }
th.sorted { color: var(--text); }
th.sorted::after { content: ' ▾'; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td { position: relative; }
td.num span { position: relative; }
.cell-bar { position: absolute; right: 0; top: 20%; height: 60%; background: var(--s1); opacity: 0.22; border-radius: 4px 0 0 4px; }
td.num { min-width: 70px; }
.rarity { text-transform: capitalize; font-weight: 600; }
.rarity.common { color: var(--r-common-text); }
.rarity.uncommon { color: var(--r-uncommon-text); }
.rarity.rare { color: var(--r-rare-text); }
.rarity.epic { color: var(--r-epic-text); }
.rarity.legendary { color: var(--r-legendary-text); }