:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #14171c; color: #e6e6e6; }
header { padding: 1rem 2rem; background: #1c2128; border-bottom: 1px solid #2b313b;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header h1 { margin: 0; font-size: 1.4rem; }
#status { color: #9aa4b2; font-size: .95rem; white-space: nowrap; }
main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem; }
input, button { font: inherit; padding: .4rem .6rem; border-radius: 6px;
  border: 1px solid #3a414d; background: #232a33; color: #e6e6e6; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
.error { color: #ff6b6b; margin-left: .5rem; }
header nav { margin-right: auto; }
header nav a { color: #7fb3e3; text-decoration: none; font-size: .95rem; }
header nav a:hover { text-decoration: underline; }

/* Players-online chart */
#chart-section { border: 1px solid #2b313b; border-radius: 8px; padding: 1rem 1.1rem;
  margin-bottom: 1.5rem; background: #1a1e24; }
#chart-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
#chart-head h2 { margin: 0; font-size: 1.1rem; }
#chart-ranges { display: flex; gap: .35rem; }
.range-btn { padding: .25rem .6rem; font-size: .85rem; }
.range-btn.active { border-color: #3a6ea5; background: #2a3a4d; color: #fff; }
#chart { width: 100%; }
.uplot { width: 100%; }
.u-axis { color: #9aa4b2; }
.chart-tip { position: absolute; transform: translate(-50%, -130%); pointer-events: none;
  background: #0f1216; border: 1px solid #3a6ea5; border-radius: 6px; padding: .3rem .55rem;
  font-size: .82rem; white-space: nowrap; z-index: 10; }
.chart-tip .tip-when { color: #9aa4b2; font-size: .72rem; margin-top: .1rem; }

#match-list { list-style: none; padding: 0; margin: 0; }
.match { border: 1px solid #2b313b; border-radius: 8px; margin-bottom: .5rem; overflow: hidden; }
.match.expanded { border-color: #3a6ea5; }
.match-row { display: flex; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; cursor: pointer; }
.match-row:hover { background: #1f252d; }
.match.expanded .match-row { background: #1f252d; }
.match .meta { color: #9aa4b2; font-size: .85rem; }
.match .outcome { font-weight: 600; white-space: nowrap; }
.match-detail { padding: 0 1.1rem .7rem; overflow-x: auto; }
.match-detail .empty { color: #9aa4b2; }

#pager { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }

table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
th, td { padding: .45rem .7rem; text-align: right; border-bottom: 1px solid #2b313b;
  white-space: nowrap; }
th:first-child, td:first-child,
th:nth-child(2), td:nth-child(2) { text-align: left; }  /* Player, Classes */
th { cursor: pointer; user-select: none; background: #1c2128; position: sticky; top: 0; }
th.sorted::after { content: " \25B2"; }
th.sorted.desc::after { content: " \25BC"; }

/* Side tint: attackers blue, defenders red. */
tr.attackers { background: rgba(58, 110, 165, 0.22); }
tr.defenders { background: rgba(180, 60, 60, 0.22); }
tr.attackers:hover { background: rgba(58, 110, 165, 0.34); }
tr.defenders:hover { background: rgba(180, 60, 60, 0.34); }