/* Shared styling for the replay index and the game analysis pages.
   Palette and type are lifted from haxdevs.com so these read as part of the
   same site rather than a bolt-on. */
:root{
  --deep:#0E2A20; --pitch:#17483A; --pitch-hi:#1D5946;
  --chalk:#EEF4EF; --chalk-dim:rgba(238,244,239,.44); --line:rgba(238,244,239,.14);
  --red:#E56E56; --blue:#5689E5; --gold:#E8C468; --out:rgba(238,244,239,.30);
  --bad:#E56E56; --ok:#6FD08C;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--deep);
  background-image:radial-gradient(ellipse 130% 70% at 50% 0%, var(--pitch) 0%, var(--deep) 72%);
  background-attachment:fixed;
  color:var(--chalk);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:14px;
  min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 60px}

.hero{margin-bottom:22px}
.hero h1{font-family:'Anton',sans-serif;text-transform:uppercase;margin:0;font-size:34px;letter-spacing:.01em}
.hero .sub{display:block;font:500 12px 'IBM Plex Sans';letter-spacing:.22em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:5px}
.crumbs{font-size:12.5px;color:var(--chalk-dim);margin-bottom:14px}
.crumbs a{color:var(--chalk-dim)}
.crumbs a:hover{color:var(--gold)}

.panel{border:1px solid var(--line);background:rgba(23,72,58,.34);margin-bottom:20px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-head h2{font-family:'Anton',sans-serif;text-transform:uppercase;margin:0;font-size:17px;letter-spacing:.02em}
.panel-head .meta{font-size:12px;color:var(--chalk-dim)}
.panel-body{padding:16px}

/* ---------- tables ---------- */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
th{font:600 11px 'IBM Plex Sans';letter-spacing:.08em;text-transform:uppercase;
  color:var(--chalk-dim);text-align:right;padding:9px 8px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
td{padding:8px;border-bottom:1px solid rgba(238,244,239,.06);text-align:right}
tbody tr:hover{background:rgba(238,244,239,.04)}
tr.red td:first-child{box-shadow:inset 3px 0 0 var(--red)}
tr.blue td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.name{font-weight:600}
.gk{font:700 9.5px 'IBM Plex Sans';letter-spacing:.08em;color:var(--gold);
  border:1px solid var(--line);padding:1px 4px;margin-left:6px;vertical-align:middle}
.dim{color:var(--chalk-dim)}
.pts{font-weight:700;color:var(--gold)}

/* ---------- score header ---------- */
.score{display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:'Anton',sans-serif;font-size:40px;line-height:1}
.score .r{color:var(--red)} .score .b{color:var(--blue)}
.score .dash{color:var(--chalk-dim);font-size:26px}
.kick{text-align:center;color:var(--chalk-dim);font-size:12.5px;margin-top:8px}

/* ---------- territory ---------- */
.terr{display:flex;height:44px;border:1px solid var(--line);overflow:hidden}
.terr div{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.terr .l{background:rgba(229,110,86,.28)}
.terr .m{background:rgba(238,244,239,.07)}
.terr .r{background:rgba(86,137,229,.28)}
.terr-key{display:flex;justify-content:space-between;font-size:11px;color:var(--chalk-dim);margin-top:6px}

/* ---------- team totals ---------- */
.totals{display:grid;grid-template-columns:1fr auto 1fr;gap:4px 20px;align-items:center;max-width:520px;margin:0 auto}
.totals .v{font-weight:700;font-size:15px}
.totals .l{text-align:right;color:var(--red)}
.totals .r{text-align:left;color:var(--blue)}
.totals .k{text-align:center;font:600 11px 'IBM Plex Sans';letter-spacing:.08em;
  text-transform:uppercase;color:var(--chalk-dim);padding:3px 0}

/* ---------- buttons / pager ---------- */
.btn{display:inline-block;border:1px solid var(--line);padding:5px 11px;font:600 11.5px 'IBM Plex Sans';
  color:var(--chalk);background:transparent;cursor:pointer}
.btn:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}
.btn[disabled]{opacity:.35;cursor:default}
.btn[disabled]:hover{border-color:var(--line);color:var(--chalk)}
.pager{display:flex;gap:7px;align-items:center;justify-content:center;padding:14px 0 2px;flex-wrap:wrap}
.pager .on{border-color:var(--gold);color:var(--gold)}

.squad{white-space:normal;line-height:1.45;max-width:340px}
.note{color:var(--chalk-dim);font-size:12.5px;margin:0}
.empty{padding:30px 16px;text-align:center;color:var(--chalk-dim)}