@font-face {
  font-family: 'BoxiGen';
  src: url('BOXIGEN.ttf') format('truetype');
  font-display: swap;
}
:root {
  --bg:        #4c5844;
  --surface:   #4c5844;
  --surface-2: #3e4637;
  --hover:     #272727;
  --border:    #282e22;
  --grid:      #282e22;
  --text:      #e8e8e8;
  --text-2:    #b5b5b5;
  --muted:     #888;
  --faint:     #555;     /* lines, dots, rank numbers: things that arent read */
  --fine:      #767676;  /* small print that IS read: ~4:1 on the cards (#555 was ~2.4:1, too dim) */
  --green:     #c4b550;
  --green-dark:#958831;
  --green-wash:#c4b5501a;
  /* data marks + status: validated for the dark surface (dataviz validate_palette.js, 2026-10-11):
     series #958831 passes every check, status trio green/amber/red passes with CVD in the 6-8 floor
     band, which is why every status also carries a text label AND a shape (dot / ring / square) */
  --series:    #958831;
  --ok:        #958831;
  --amber:     #d97706;
  --red:       #e11d48;
  --sleep:     #75806f;
  --r:         16px;     /* boxes inside cards */
  --r-card:    30px;
  --pill:      999px;
  --smooth:    superellipse(1.5);
  --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 36px 16px 56px;
}
.wrap { max-width: 760px; margin: 0 auto; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--green); }

/* ---------- header ---------- */
header { margin-bottom: 22px; }
.mark { display: flex; align-items: center; gap: 14px; }
.mark img { flex-shrink: 0; }
h1 {
  font-family: 'BoxiGen', system-ui, sans-serif;
  font-size: 2.1rem; font-weight: 400; line-height: 1.1;
  color: var(--green);
}
.sub { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.sub b { color: var(--text); font-weight: 600; }
.sub .sline { display: block; }        /* the joke on one line, the numbers on the next: no "·" starting a line */

.banner {
  background: #2a1d07; border: 1px solid #5c3d0a; color: #fcd34d;
  border-radius: var(--r); corner-shape: var(--smooth); padding: 10px 14px; font-size: .88rem; margin-bottom: 14px;
}

/* ---------- cards ---------- */
.servers { display: grid; gap: 14px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card); corner-shape: var(--smooth);
  padding: 18px 18px 16px;
  min-width: 0;
}
.card.ghost { color: var(--muted); text-align: center; padding: 30px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sicon { width: 40px; height: 40px; border-radius: 10px; corner-shape: var(--smooth); background: var(--surface-2); image-rendering: pixelated; flex-shrink: 0; }
.title {
  font-family: 'BoxiGen', system-ui, sans-serif; font-weight: 400;
  font-size: 1.15rem; color: var(--green); line-height: 1.3;
  overflow-wrap: break-word;       /* not "anywhere": that let LEADERBOARDS split mid-word next to its note */
}
.ver { color: var(--muted); font-size: .82rem; }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--text-2); white-space: nowrap; margin-top: 3px; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.status[data-s="online"] .dot { background: var(--ok); }
.status[data-s="starting"] .dot { background: transparent; border: 2px solid var(--amber); }          /* ring */
.status[data-s="unresponsive"] .dot,
.status[data-s="crashed"] .dot,
.status[data-s="offline"] .dot { background: var(--red); border-radius: 2px; }      /* square */
.status[data-s="sleeping"] .dot { background: var(--sleep); }

.motd {
  margin-top: 12px; padding: 8px 12px; border-radius: var(--r); corner-shape: var(--smooth);
  background: var(--bg); border: 1px solid var(--border);
  font-family: var(--mono); font-size: .86rem; color: #aaa;
  white-space: pre-line; overflow-wrap: anywhere;
}
.motd .b { font-weight: 700; } .motd .i { font-style: italic; }
.motd .u { text-decoration: underline; } .motd .s { text-decoration: line-through; }
.motd .k { filter: blur(1.5px); }
.motd:empty { display: none; }
.about { margin-top: 10px; color: var(--text-2); font-size: .88rem; }
.about:empty { display: none; }
/* friends servers: not mine, and it should be obvious at a glance (blue = "someone else's", not a status colour) */
.server.friend { border: 1px dashed #2b4a73; }
.fstrip { margin: -18px -18px 14px; padding: 8px 18px; border-radius: var(--r-card) var(--r-card) 0 0; corner-shape: var(--smooth); border-bottom: 1px dashed #2b4a73;
  background: #0f1c2e; color: #9cc3f5; font-size: .82rem; overflow-wrap: anywhere; }
.fstrip b { color: #cfe3ff; font-weight: 600; }
.chart figcaption .ftag { color: #9cc3f5; }

.join { display: flex; gap: 8px; margin-top: 12px; }
.join code {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .95rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth);
  padding: 9px 12px; overflow-x: auto; white-space: nowrap; user-select: all;
  scrollbar-width: none;
}
.join code::-webkit-scrollbar { display: none; }
@media (max-width: 420px) { .join code { font-size: .84rem; padding: 9px 10px; } .join .copy { padding: 8px 12px; } }
button {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--pill); padding: 8px 14px; cursor: pointer;
  min-height: 40px;
}
button:hover { background: var(--hover); border-color: var(--green-dark); }
button:focus-visible, .chart .plot:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.join .copy { flex-shrink: 0; }
.bedrock { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.bedrock:empty { display: none; }
.bedrock code { font-family: var(--mono); color: var(--text-2); }

/* mods: do you need them, and the pack if so */
.modpack { margin-top: 12px; font-size: .88rem; color: var(--text-2); }
.modpack:empty { display: none; }
.modpack .mp-head { display: flex; gap: 8px; align-items: baseline; }
.modpack .mp-head b { color: var(--text); font-weight: 600; }
.modpack .mp-ico { flex-shrink: 0; width: 1.2em; text-align: center; color: var(--ok); font-weight: 700; }
.modpack[data-mode="needed"] { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 12px; }
.modpack[data-mode="needed"] .mp-ico { color: var(--amber); }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
a.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px;
  border-radius: var(--pill); text-decoration: none; font-weight: 600; color: #fff; background: var(--green-dark); border: 1px solid var(--green-dark);
}
a.btn:hover { background: #15803d; }
a.btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); font-weight: 500; }
a.btn.ghost:hover { background: var(--hover); border-color: var(--green-dark); }
a.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mp-meta { color: var(--muted); font-size: .78rem; margin-top: 8px; }
.mp-new { display: inline-block; background: var(--green-dark); color: #fff; font-size: .7rem; font-weight: 600;
  border-radius: var(--pill); padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.mp-opt a { color: var(--green); }
.modpack details { margin-top: 8px; }
.modpack summary { cursor: pointer; color: var(--text-2); font-size: .82rem; width: max-content; max-width: 100%; padding: 3px 0; }
.modpack summary:hover { color: var(--text); }
.modpack ol { margin: 6px 0 4px 20px; display: grid; gap: 3px; font-size: .84rem; }
.modpack .mp-steps h4 { color: var(--text); font-size: .82rem; font-weight: 600; margin-top: 8px; }
.modpack .mp-steps p { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.mp-mods h4 { color: var(--text); font-size: .8rem; font-weight: 600; margin-top: 8px; }
.mp-mods ul { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mp-mods li { background: var(--bg); border: 1px solid var(--border); border-radius: var(--pill); font-size: .76rem; }
.mp-mods li > * { display: block; padding: 3px 10px; }       /* the whole chip is the link: an easier tap */
.mp-mods li a { color: var(--text-2); text-decoration: none; }
.mp-mods li a:hover { color: var(--green); }

.players { margin-top: 14px; }
.players-head { color: var(--text-2); font-size: .88rem; }
.players-head b { color: var(--text); font-weight: 600; }
.heads { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.heads:empty { display: none; }
.heads li { display: flex; align-items: center; gap: 7px; font-size: .88rem; }
.heads img { width: 26px; height: 26px; border-radius: 6px; corner-shape: var(--smooth); image-rendering: pixelated; background: var(--surface-2); }
.board .fhead { width: 20px; height: 20px; border-radius: 5px; corner-shape: var(--smooth); background: var(--surface-2); display: inline-grid; place-items: center; color: var(--muted); font-size: .8rem; flex: none; }
.board .who.nocard { cursor: default; }
.heads .fhead { width: 26px; height: 26px; border-radius: 6px; corner-shape: var(--smooth); background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 1rem; }   /* factorio players */
.heads li.afk { opacity: .55; }                   /* TELEDON: away from the keyboard */
.heads .afk-tag { font-size: .7rem; color: var(--muted); border: 1px solid var(--border); border-radius: var(--pill); padding: 0 4px; }
.wnow { color: var(--text-2); font-size: .8rem; margin-top: 8px; }
.wnow[hidden] { display: none; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles:empty { display: none; }
.tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 9px 11px; min-width: 0; }
.tile .k { color: var(--muted); font-size: .74rem; }
.tile .v { font-size: 1.12rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v small { font-size: .74rem; font-weight: 400; color: var(--muted); }
.tile .n { color: var(--muted); font-size: .72rem; }      /* wraps: on a phone "C: 26% full · D: 23% full" got cut */
.meter { height: 5px; border-radius: var(--pill); background: var(--green-wash); margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: var(--pill); background: var(--ok); }
.meter[data-l="warn"] i { background: var(--amber); }
.meter[data-l="bad"] i { background: var(--red); }
.spark { display: block; width: 100%; height: 18px; margin-top: 4px; }

.facts { color: var(--muted); font-size: .8rem; margin-top: 12px; }
.facts:empty { display: none; }

/* the box */
.box { margin-top: 14px; }
.specs { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.charts2 { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 620px) { .charts2 { grid-template-columns: 1fr 1fr; } }

/* range row: one filter row, scopes every chart */
.history { margin-top: 14px; }
.range-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill); padding: 3px; }
.seg button { border: 0; background: transparent; min-height: 34px; padding: 4px 12px; color: var(--muted); border-radius: var(--pill); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* charts */
.chart { margin-top: 14px; min-width: 0; }
.chart figcaption { color: var(--text-2); font-size: .8rem; margin-bottom: 4px; }
.chart .plot { position: relative; width: 100%; border-radius: 12px; corner-shape: var(--smooth); transition: opacity .2s; touch-action: pan-y; }
.chart.loading .plot { opacity: .45; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--series); fill-opacity: .1; stroke: none; }
.chart .end { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart .endlabel { fill: var(--text); font-size: 11px; font-weight: 600; }
.chart .cross { stroke: var(--faint); stroke-width: 1; shape-rendering: crispEdges; }
.chart .hot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart .empty { fill: var(--fine); font-size: 12px; }
.chart details { margin-top: 4px; }
.chart summary { color: var(--fine); padding: 3px 0; font-size: .74rem; cursor: pointer; width: max-content; }
.chart table { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.chart th, .chart td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--grid); color: var(--text-2); }
.chart th { color: var(--muted); font-weight: 500; }
.chart .tbl-wrap { max-height: 220px; overflow-y: auto; }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; corner-shape: var(--smooth);
  padding: 6px 10px; font-size: .8rem; white-space: nowrap;
}
.tooltip .tv { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tooltip .tv i { display: inline-block; width: 12px; height: 2px; background: var(--series); border-radius: 1px; }
.tooltip .tt { color: var(--muted); }

/* the admins notes at the bottom (the public page uses callouts next to the button instead) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 11;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px);
  background: var(--green-dark); color: #fff; border-radius: var(--pill); padding: 8px 8px 8px 16px; font-size: .92rem;
}
.toast[hidden] { display: none; }
.toast.bad { background: #9f1239; }
.toast .tx { overflow-wrap: anywhere; }
.toast .x { min-height: 0; padding: 2px 9px; border: 0; background: transparent; color: #fff; font-size: 1.2rem; line-height: 1.2; opacity: .8; }
.toast .x:hover { opacity: 1; background: #ffffff22; }

/* "Copied!": a note right under the button, with what to do next */
.callout {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 6px 10px 12px;
  background: #0d2416; border: 1px solid var(--green-dark); border-radius: var(--r); corner-shape: var(--smooth); font-size: .88rem; color: var(--text);
}
.callout[hidden] { display: none; }
.callout .ci { color: var(--green); font-weight: 700; flex-shrink: 0; width: 1.1em; text-align: center; }
.callout .cb { flex: 1; min-width: 0; display: grid; gap: 3px; }
.callout .cb b { font-weight: 600; overflow-wrap: anywhere; }
.callout .cb span { color: var(--text-2); font-size: .84rem; }
.callout .cb code { font-family: var(--mono); font-size: .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; corner-shape: var(--smooth);
  padding: 4px 8px; user-select: all; overflow-wrap: anywhere; }
.callout .x { min-height: 0; padding: 0 9px; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1.3; }
.callout .x:hover { color: var(--text); background: var(--hover); }
.callout.warn { background: #2a1d07; border-color: #5c3d0a; }
.callout.warn .ci { color: var(--amber); }
button.done { border-color: var(--green-dark); color: var(--green); }

/* a stopped/offline server reads as resting */
.server[data-s="sleeping"] .motd, .server[data-s="offline"] .motd { opacity: .55; }

footer { margin-top: 30px; color: var(--fine); font-size: .76rem; text-align: center; line-height: 1.7; }
footer a { color: var(--green-dark); text-decoration: none; }
footer .fine { color: var(--fine); }

/* ---------- stats (phase 7) ---------- */
[hidden] { display: none !important; }      /* the boards rows 6-10 and friends: display rules must not un-hide */
.muted { color: var(--muted); font-size: .88rem; }
.fine { color: var(--fine); font-size: .76rem; }
.linkish { all: unset; cursor: pointer; color: var(--green); text-decoration: underline; text-underline-offset: 2px; font-size: .8rem; }
.linkish:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }
.sub-h { color: var(--text-2); font-size: .88rem; font-weight: 600; margin: 18px 0 8px; }
/* the note sits under the title, like every other cards subtitle (beside it, LEADERBOARDS got squeezed on phones) */
.stats .card-head { flex-direction: column; gap: 2px; }
.boards { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 620px) { .boards { grid-template-columns: 1fr 1fr; } }
.board { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 10px 12px; min-width: 0; }
.board figcaption { display: grid; gap: 1px; margin-bottom: 6px; }
.board figcaption b { font-size: .9rem; }
.board figcaption span { color: var(--muted); font-size: .74rem; }
.board ol { list-style: none; display: grid; gap: 3px; }
.board li { display: grid; grid-template-columns: minmax(0, 14em) minmax(2em, 1fr) auto; gap: 8px; align-items: center; font-size: .82rem; }
.board .who { all: unset; display: flex; align-items: center; gap: 6px; cursor: pointer; min-width: 0; border-radius: 4px; }
.board .who:hover .pn { color: var(--green); }
.board .who:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.board .who img { width: 20px; height: 20px; border-radius: 5px; image-rendering: pixelated; background: var(--surface); flex-shrink: 0; }
.board .rk { color: var(--faint); width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.board .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbar { height: 8px; background: var(--green-wash); border-radius: var(--pill); overflow: hidden; }
.bbar i { display: block; height: 100%; background: var(--series); border-radius: 0 var(--pill) var(--pill) 0; }
.board li:first-child .bbar i { background: var(--green); }
.bv { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .8rem; min-width: 4.6em; text-align: right; }
.board .linkish { margin-top: 6px; display: inline-block; }
.board.small li { grid-template-columns: minmax(0, 8.5em) minmax(1.5em, 1fr) auto; }
.board.small .pn { white-space: normal; overflow-wrap: anywhere; }
.board li > .gap { visibility: hidden; }      /* the rivals list has no bar: keep its numbers in the number column */      /* "Riding other things": wrap, dont cut */
.st-find { display: grid; gap: 4px; margin-top: 14px; max-width: 320px; }
.st-find input { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 8px 11px; min-height: 40px; }
.st-find input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.st-find input:invalid { border-color: var(--red); }
.pcard { margin-top: 14px; padding: 14px; border: 1px solid var(--green-dark); border-radius: var(--r); corner-shape: var(--smooth); background: var(--surface-2); }
.pc-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pc-face { width: 56px; height: 56px; border-radius: 12px; corner-shape: var(--smooth); image-rendering: pixelated; background: var(--surface); }
.pc-x { min-height: 34px; padding: 2px 12px; font-size: 1.1rem; background: transparent; }
.pcard p.muted { margin-top: 10px; }
.pc-srv { margin-top: 12px; }
.pc-srv h4 { color: var(--text-2); font-size: .86rem; }
.pcard .tiles .tile { background: var(--surface); }
.stats .tile .n { white-space: normal; }        /* the notes say a whole sentence here: wrap, dont cut */
.pc-lists { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 620px) { .pc-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard .board { background: var(--surface); }
/* when people play */
.heat { display: grid; grid-template-columns: 2.6em repeat(24, minmax(0, 1fr)); gap: 2px; margin-top: 10px; }
.heat .hh { color: var(--fine); font-size: .66rem; font-variant-numeric: tabular-nums; }
.heat .hd { color: var(--muted); font-size: .72rem; align-self: center; }
.heat .hc { aspect-ratio: 1; border-radius: 3px; min-height: 9px; }
.heat .hc.none, .heat-legend i.none, .cal .cc.none { background: transparent; box-shadow: inset 0 0 0 1px var(--grid); }
.heat .hc:hover, .cal .cc:hover { outline: 1px solid var(--text-2); }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; color: var(--muted); font-size: .72rem; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.heat-legend i.down-key { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--red); }
/* a swatch and its words travel together when the legend wraps */
.heat-legend .lg { display: inline-flex; align-items: center; gap: 4px 6px; min-width: 0; }
.heat-legend .lg + .lg { margin-left: 8px; }
.heat-legend .lg i { flex-shrink: 0; }
#heat details, #cal details { margin-top: 6px; }
#heat summary { color: var(--fine); padding: 3px 0; font-size: .74rem; cursor: pointer; width: max-content; }
#heat table { width: 100%; border-collapse: collapse; font-size: .74rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
#heat th, #heat td { text-align: right; padding: 2px 5px; border-bottom: 1px solid var(--grid); color: var(--text-2); }
#heat .tbl-wrap { max-height: 220px; overflow-y: auto; }
.cals { display: flex; flex-wrap: wrap; gap: 16px; }
.cal figcaption { color: var(--text-2); font-size: .8rem; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(13, 12px); grid-template-rows: repeat(7, 12px); gap: 3px; }
.cal .cc { border-radius: 3px; background: var(--surface-2); }
.cal .cc.future { background: transparent; }
.cal .cc.down { box-shadow: inset 0 0 0 2px var(--red); }
.cals .heat-legend { flex-basis: 100%; }
.facts2 { display: grid; gap: 4px 20px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 620px) { .facts2 { grid-template-columns: 1fr 1fr; } }
.facts2 > .fine { grid-column: 1 / -1; margin-top: 6px; }
.facts-list { list-style: none; display: grid; gap: 3px; font-size: .84rem; color: var(--text-2); }
/* hall of worlds */
#hall-list { display: grid; gap: 10px; margin-top: 12px; }
.hall-row { display: grid; gap: 3px; }
.hall-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hall-name b { font-family: 'BoxiGen', system-ui, sans-serif; color: var(--text); font-weight: 400; font-size: .95rem; }
.hall-row.live .hall-name b { color: var(--green); }
.hall-name .tag { font-size: .66rem; border: 1px solid var(--border); border-radius: var(--pill); padding: 0 7px; color: var(--muted); }
.hall-row.live .hall-name .tag { border-color: var(--green-dark); color: #86efac; }
.hall-track { position: relative; height: 10px; background: var(--surface-2); border-radius: var(--pill); }
.hall-track i { position: absolute; top: 0; bottom: 0; border-radius: var(--pill); background: #4b5563; min-width: 6px; }
.hall-row.live .hall-track i { background: var(--series); }
.hall-line { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.hall-axis { display: flex; justify-content: space-between; color: var(--fine); font-size: .7rem; border-top: 1px solid var(--grid); padding-top: 3px; }
/* phones: name and number on one line, the bar under them, so a whole 16-letter name always fits */
@media (max-width: 520px) {
  .board li, .board.small li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .board li > .bbar { grid-column: 1 / -1; grid-row: 2; height: 5px; margin-left: calc(1.4em + 32px); }
  .board.small li > .bbar { margin-left: 0; }
  .board li > .gap { display: none; }
  .board ol { gap: 7px; }
  .heat { grid-template-columns: 2.2em repeat(24, minmax(0, 1fr)); gap: 1px; }
}
/* PvP */
.who-inline { all: unset; cursor: pointer; font-weight: 600; color: var(--text); }
.who-inline:hover { color: var(--green); }
.who-inline:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }
.board ol.rivals { gap: 7px; }
/* names on top (one each side), then each ones wins next to their end of the bar */
.board ol.rivals li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 8px; }
.rv-names { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.rv-a, .rv-b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-b { text-align: right; }
.rv-score { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .8rem; }
.board ol.rivals .split { align-self: center; }
.board ol.rivals .rv-score { min-width: 2.4em; }        /* same width every row, so the bars line up */
.board ol.rivals .rv-score:last-child { text-align: right; }
.split { height: 8px; border-radius: var(--pill); background: #4b5563; overflow: hidden; }
.split i { display: block; height: 100%; background: var(--series); }
.fights { list-style: none; display: grid; gap: 4px; font-size: .8rem; color: var(--text-2); }
.fights .fine { white-space: nowrap; }
.board ul.fights li { display: block; line-height: 1.45; }
/* month by month */
.seg.multi { flex-wrap: wrap; }      /* not ".wrap": thats the page column (max-width + auto margins) and centred it */
.months-chart .mbar { fill: var(--series); }
.months-chart .mbar.on, .months-chart .mbar.hot { fill: #c4b550; }
.months-chart .mlabel { fill: var(--text); font-size: 11px; font-weight: 600; }
.mtable-wrap { overflow-x: auto; margin-top: 8px; }
.mtable { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.mtable th, .mtable td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--grid); color: var(--text-2); white-space: nowrap; }
.mtable th { color: var(--muted); font-weight: 500; }
.mtable td.up { white-space: normal; min-width: 9em; }
/* the month stays put while a phone scrolls the rest of the row sideways */
.mtable th:first-child, .mtable td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* ---------- a real computer screen (2026-10-14): use the width instead of one 760px column ---------- */
@media (min-width: 1100px) {
  .wrap { max-width: 1160px; }
  .servers { grid-template-columns: repeat(2, minmax(0, 1fr)); }      /* cards in a row share a height: tidy edges, no holes */
  .servers > :only-child { grid-column: 1 / -1; }
  #charts-players { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .boards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .heat .hc { aspect-ratio: 1.7; }          /* 24 squares across 1100px would be 45px tall each: flatter cells */
}