:root {
  color-scheme: dark;
  --bg: #1a2635;
  --surface: #202f42;
  --stripe: #25364b;
  --nav: #293d54;
  --heading: #384e68;
  --active: #4d6580;
  --line: #4d637a;
  --text: #f0f4fa;
  --muted: #c5d2df;
  --link: #b8dfff;
  --number: #d9e7f5;
}

html { scroll-padding-top: 5rem; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 12% 0 0;
  background: url(/assets/tgmc.png) center / min(68vmin, 580px) auto no-repeat;
  opacity: .065;
  pointer-events: none;
  z-index: -1;
}
a { color: var(--link); text-underline-offset: .16em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid #a9d5ff; outline-offset: 2px; }
.shell { width: min(100% - 2rem, 68rem); margin-inline: auto; }

.masthead { background: #182333; border-bottom: 3px solid var(--active); }
.masthead-inner { min-height: 3.2rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--text); font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.masthead-caption { color: var(--muted); font-size: .78rem; }
.tab-bar { background: var(--nav); border-top: 1px solid #354961; }
.tab-bar nav { display: flex; flex-wrap: wrap; align-items: stretch; }
.tab-bar a { display: flex; gap: .45rem; align-items: center; padding: .58rem .88rem; color: var(--muted); border-inline-end: 1px solid #3f5570; text-decoration: none; font-size: .86rem; }
.tab-bar a:first-child { border-inline-start: 1px solid #3f5570; }
.tab-bar a:hover, .tab-bar a[aria-current] { color: #fff; background: var(--active); }
.tab-bar svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.page-intro { margin: 1rem 0 .8rem; display: flex; justify-content: space-between; align-items: end; gap: .6rem 1rem; flex-wrap: wrap; }
.page-intro > div { flex: 1 1 16rem; }
.page-intro h1 { padding: .55rem .75rem; margin: 0; background: var(--heading); border-bottom: 1px solid var(--line); font-size: clamp(1.2rem, 3vw, 1.65rem); font-weight: 660; }
.page-intro p { margin: .42rem .75rem 0; color: var(--muted); font-size: .88rem; }
.page-intro .back { display: inline-block; margin: 0 0 .5rem; }
.bar-heading, .section-line { background: var(--heading); margin: 1rem 0 .4rem; padding: .38rem .65rem; font-weight: 650; font-size: 1rem; }
.section-line { display: flex; justify-content: space-between; gap: .5rem; }
.section-line h2, .detail h2 { margin: 0; font-size: 1rem; font-weight: 650; }

.filters { display: grid; grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, 1fr) repeat(2, minmax(8rem, .85fr)) auto; align-items: end; gap: .55rem; background: var(--surface); border: 1px solid var(--line); padding: .55rem .65rem; }
.filters label, .lookup label { display: block; font-size: .78rem; color: var(--muted); }
.filters input, .filters select, .lookup div { margin-top: .16rem; }
.lookup { flex: 0 1 17rem; }
.lookup div, .filter-actions { display: flex; align-items: center; gap: .45rem; }
.form-select, .form-control, .form-control:focus, .form-select:focus { color: var(--text); background-color: #192635; border-color: var(--line); border-radius: 2px; min-height: 2rem; padding: .28rem .5rem; font-size: .85rem; }
.form-select { appearance: auto; background-image: none; }
.form-control::placeholder { color: #a4b7cc; }
.btn { border-radius: 2px; font-size: .82rem; padding: .32rem .64rem; }
.btn-accent { background: #466381; border-color: #7692ac; color: #fff; }
.btn-accent:hover, .btn-accent:focus-visible { background: #587793; color: #fff; }
.filter-actions a { font-size: .8rem; }

.totals { display: flex; flex-wrap: wrap; margin: .9rem 0 .4rem; border-block: 1px solid var(--line); background: var(--surface); }
.totals div { flex: 1 1 8rem; padding: .45rem .65rem; border-inline-end: 1px solid #374b62; }
.totals div:last-child { border: 0; }
.totals dt, .detail dt { color: var(--muted); font-size: .77rem; font-weight: 400; }
.totals dd { margin: 0; color: var(--text); font-size: 1.12rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.metric-note, .stamp { color: var(--muted); margin: .5rem 0; font-size: .84rem; max-width: 95ch; }
.stamp { color: #e3eefb; }
.table-wrap { border: 1px solid #3f546a; }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: .35rem .55rem; text-align: left; vertical-align: middle; }
.data-table thead { background: var(--nav); color: var(--muted); font-size: .8rem; }
.data-table tbody tr { border-top: 1px solid #374b62; }
.data-table tbody tr:nth-child(even) { background: var(--stripe); }
.data-table tbody tr:hover { background: #30445d; }
.data-table tbody th { font-weight: 550; }
.data-table td { font-size: .89rem; }
.data-table .number { color: var(--number); text-align: right; font-family: Consolas, "Liberation Mono", monospace; white-space: nowrap; }
.compact th, .compact td { padding-block: .25rem; }
.data-table time, .duration { white-space: nowrap; }
.subline { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; }
.result { font-weight: 600; }
.result-marine { color: #b4dcff; }
.result-xeno { color: #dfc0ff; }
.result-zombie { color: #c6e4a1; }
.result-som { color: #ffc2a7; }
.result-other, .result-unfinished { color: var(--muted); }
.map-table th:first-child { min-width: 9.5rem; }
.map-table th:not(:first-child), .map-table td { text-align: right; }
.scale-col { width: 40%; }
meter { display: block; width: 100%; height: .55rem; }
meter::-webkit-meter-bar { background: #192635; border: 0; border-radius: 0; }
meter::-webkit-meter-optimum-value { background: #91badb; }
meter::-moz-meter-bar { background: #91badb; }
.pager { margin: .65rem 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.empty, .detail { padding: .65rem; background: var(--surface); border: 1px solid var(--line); }
.detail dl { margin: .85rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.week { border: 1px solid var(--line); margin: .35rem 0; background: var(--surface); }
.week summary { padding: .35rem .55rem; cursor: pointer; }
.week[open] summary { background: var(--nav); }
.site-footer { margin-top: 1.5rem; border-top: 1px solid var(--line); padding: .65rem 0 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; color: var(--muted); font-size: .78rem; }

@media (max-width: 54rem) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) {
  .shell { width: calc(100% - 1rem); }
  .masthead-caption { display: none; }
  .tab-bar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab-bar a { padding: .42rem .4rem; font-size: .78rem; }
  .columns { grid-template-columns: minmax(0, 1fr); }
  .data-table th, .data-table td { padding-inline: .4rem; }
}
@media (max-width: 23rem) { .filters { grid-template-columns: minmax(0, 1fr); } }