:root {
  --bg: #0c1220; --panel: #141c2e; --line: #26324f;
  --text: #dfe6f5; --muted: #8b98b8; --focus: #5cc8ff; --relic: #f2b84b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 "Segoe UI", system-ui, sans-serif;
}
header, main { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem; }
h1 { margin: 0; font-size: 2.25rem; letter-spacing: .04em; font-weight: 300; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .75rem; }
header p { margin: .25rem 0 0; color: var(--muted); }
.badge { background: var(--relic); color: #1a1405; padding: .1rem .5rem; border-radius: 4px; font-size: .85rem; font-weight: 600; }
.players { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.player { background: var(--panel); border: 1px solid var(--line); padding: .9rem 1rem; }
.player b { display: block; font-size: 1.1rem; }
.player span { color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
input, select { background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: .5rem .65rem; font: inherit; border-radius: 4px; }
input[type=search] { flex: 1 1 200px; }
input[type=number] { width: 9.5rem; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
label { color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.count { color: var(--muted); margin: .75rem 0 .5rem; }
.scroll { overflow-x: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--panel); color: var(--muted); font-weight: 500; position: sticky; top: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.relic { color: var(--relic); font-weight: 600; }