:root {
  --bg: #ffffff; --fg: #1b1f24; --muted: #5b6470; --line: #d8dde3; --accent: #1f5fbf; --row: #f5f7fa; --warn: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111418; --fg: #e6e9ed; --muted: #9aa4af; --line: #2c333b; --accent: #7fb0ff; --row: #181c21; --warn: #e0b45a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, sans-serif; }
header, main, footer, nav { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.4rem; margin: 16px 0 8px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; margin: 8px 0; }
label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); }
input, select, button { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
button { cursor: pointer; }
button[type=submit] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.meta, .help { color: var(--muted); font-size: .85rem; }
nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 8px; }
nav button { border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 12px; }
nav button[aria-selected=true] { border-bottom-color: var(--accent); font-weight: 600; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.num, td.num { text-align: right; }
tbody tr:nth-child(even) { background: var(--row); }
td a { color: var(--accent); text-decoration: none; }
.badge { font-size: .75rem; color: var(--warn); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.tie { color: var(--muted); }
dialog#team-dialog {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg);
}
dialog#team-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
dialog#team-dialog h2 { margin-top: 0; padding-right: 40px; }
dialog .close {
  position: sticky; top: 0; float: right; width: 36px; height: 36px; padding: 0;
  font-size: 1.4rem; line-height: 1; border-radius: 50%;
}
@media (max-width: 600px) {
  dialog#team-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
}
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 8px 0; }
.kv div { border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.kv b { display: block; font-size: 1.2rem; }
footer { color: var(--muted); font-size: .8rem; margin-top: 24px; padding-bottom: 24px; }
th.poll, td.poll { color: var(--muted); border-left: 1px dashed var(--line); }
#games td { white-space: normal; vertical-align: top; }
#games td:first-child { white-space: nowrap; }
.rank { font-weight: 600; font-size: .85em; }