body { font-family: system-ui, sans-serif; margin: 0; background: #fff; color: #111; }
header { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; padding: .6em 1em; border-bottom: 1px solid #ccc; }
header .brand { font-weight: bold; text-decoration: none; color: inherit; }
header nav a { margin-right: .8em; }
header nav a.active { font-weight: bold; }
#updated { margin-left: auto; color: #666; font-size: .85em; }
main { padding: 1em; max-width: 1200px; margin: 0 auto; }
h1 { margin-top: 0; }
.titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
.titlebar .right { margin-left: auto; display: flex; gap: .3em; align-items: center; }
.toggle a { padding: .2em .7em; border: 1px solid #888; text-decoration: none; color: inherit; }
.toggle a.on { background: #333; color: #fff; }
table { border-collapse: collapse; margin: .5em 0 1.2em; font-size: .92em; }
th, td { border: 1px solid #ccc; padding: .25em .5em; text-align: left; white-space: nowrap; }
th { background: #f2f2f2; }
th.sortable { cursor: pointer; user-select: none; }
th.sorted::after { content: ' ▼'; font-size: .75em; }
th.sorted.asc::after { content: ' ▲'; }
td.n, th.n { text-align: right; }
.scroll { overflow-x: auto; }
.live { background: #c00; color: #fff; padding: .1em .5em; font-weight: bold; font-size: .85em; }
.banner { border: 2px solid #c00; padding: .6em 1em; margin-bottom: 1em; }
.cols { display: flex; flex-wrap: wrap; gap: 2em; }
.cols > * { flex: 1 1 380px; min-width: 0; }
.kv { display: grid; grid-template-columns: max-content max-content; gap: .15em 1.2em; margin-bottom: 1em; }
.kv dt { color: #555; } .kv dd { margin: 0; }
.statgroups { display: flex; flex-wrap: wrap; gap: 1.5em; }
.muted { color: #777; }
.win { font-weight: bold; }
.rw-home { background: #dde8ff; } .rw-away { background: #ffe2d6; }
.search { width: 100%; max-width: 480px; padding: .4em; font-size: 1em; }
.results-list { list-style: none; padding: 0; margin: .3em 0 1em; }
.results-list li { padding: .15em 0; }
.maps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1em; }
.map-card { border: 1px solid #ccc; padding: .5em; text-decoration: none; color: inherit; display: block; }
.map-card img, .map-card .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; display: flex; align-items: center; justify-content: center; color: #888; }
.map-card h3 { margin: .4em 0 .2em; }
details { margin: .2em 0; }
.feed { margin: .2em 0 .5em 1.2em; padding: 0; }
iframe.twitch { width: 100%; max-width: 640px; aspect-ratio: 16/9; border: 0; }