/* WARDOGS NOW server browser. v=20260911-1
   Loaded only on the server pages, so the landing page does not carry table styles it never uses.
   Built on the shared tokens and components, so it only carries what the server pages alone need.

   The list is a list, not a card grid. People pick a server by comparing numbers, and numbers have
   to line up in columns to be comparable, which cards cannot do. */

/* ---------- filters ---------- */
.filters { display:grid; gap:16px; margin-top:22px; padding:18px 20px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); }
.filters-head,.filters-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.filters-head strong { display:block; margin-top:5px; color:var(--text-hi); font-size:1rem; }
.filters-state { color:var(--text-mid); font:600 .62rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.filters-grid { display:grid; gap:11px; }
.filters--servers .filters-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px 16px; }
.filters--servers .filter-search { grid-column:span 6; }
.filters--servers .filter-region,.filters--servers .filter-map,.filters--servers .filter-mode { grid-column:span 2; }
.filters--servers .filter-playstyle,.filters--servers .filter-slots,.filters--servers .filter-sort { grid-column:span 4; }
.filters--communities .filters-grid { grid-template-columns:minmax(210px,1.55fr) repeat(4,minmax(115px,1fr)); }
.filter-field { display:grid; min-width:0; gap:6px; }
.filter-field>span { color:var(--text-mid); font:600 .59rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.filters input[type=search], .filters select { width:100%; min-width:0; min-height:42px; background:var(--bg-2); border:1px solid var(--line2); color:var(--text-hi); border-radius:var(--radius-sm); padding:9px 11px; font:inherit; font-size:.86rem; }
.filters input:focus, .filters select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.filters-foot { padding-top:2px; border-top:1px solid var(--line); }
.filter-checks { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; }
.filter-checks-label { color:var(--text-mid); font:600 .59rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.filters label.check { display:inline-flex; align-items:center; gap:8px; color:var(--text-mid); font-size:.78rem; cursor:pointer; }
.filters label.check input { width:15px; height:15px; accent-color:var(--accent); }
.filter-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.result-count { color: var(--text-mid); font-size: .84rem; margin: 16px 0 0; }

/* ---------- featured strip ---------- */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }
.feat-card {
  position: relative; isolation: isolate; overflow: hidden; min-height: 176px;
  aspect-ratio: 46 / 21;
  background: var(--bg-1);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius); padding: 18px 19px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; transition: .15s;
}
.feat-card::before { content:""; position:absolute; inset:0; z-index:-2;
  background:var(--server-art) var(--server-position,50% 50%) / cover no-repeat; }
.feat-card::after { content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(8,10,12,.76); }
.feat-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.feat-card .nm { font-family: var(--display); font-size: 1.2rem; color: #fff; text-shadow:0 2px 8px rgba(0,0,0,.8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;line-height:1.18; }
.feat-card .tl { color: rgba(255,255,255,.78); font-size: .85rem; line-height: 1.5;
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.feat-card .ft { display: flex; align-items: center; gap: 12px; flex-shrink:0;
                 font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: rgba(255,255,255,.72); }

.srv-banner { width:100%; max-height:320px; aspect-ratio:46/21; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--server-art) var(--server-position,50% 50%) / cover no-repeat; overflow:hidden; }
.srv-banner-edit { max-width:720px; max-height:280px; margin-top:12px; }
.banner-position-form { max-width:720px; margin-top:15px; padding-top:15px; border-top:1px solid var(--line); }
.banner-position-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.banner-position-field { min-width:0; }
.banner-position-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); }
.banner-position-label output { color:var(--text-hi); font-variant-numeric:tabular-nums; }
.banner-position-field input[type=range] { width:100%; accent-color:var(--accent); cursor:pointer; }
.banner-position-ends { display:flex; justify-content:space-between; margin-top:3px; color:var(--text-mid); font-size:.66rem; }
.banner-position-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px; }
@media (max-width:600px) { .banner-position-grid { grid-template-columns:1fr; } }

/* ---------- the list ---------- */
.srv-list { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.srv-head, .srv-row {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr) 96px 150px 96px 84px 232px;
  gap: 12px; align-items: center; padding: 12px 16px;
}
.srv-head {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mid);
}
.srv-row { background: var(--bg-1); border-bottom: 1px solid var(--line); transition: background .12s; }
.srv-row:last-child { border-bottom: 0; }
.srv-row:hover { background: var(--bg-hover); }
.srv-row .nm { font-weight: 600; color: var(--text-hi); display: block;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-row .tl { color: var(--text-mid); font-size: .8rem; display: block;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-row .meta { font-family: var(--sans); font-size: .8rem; color: var(--text-mid); }
.srv-row .meta.dim, .srv-row .map.dim { color: var(--text-dim); }
.srv-row .players { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-hi); }
/* Playing: the map on the first line, the ruleset under it in the quieter colour. */
.srv-row .c-playing .map { display:block; color: var(--text-hi); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-row .c-playing .mode { display:block; margin-top: 2px; color: var(--text-mid); font-size: .72rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-row .c-playing .mode:empty { display: none; }
.srv-row .players .cap { color: var(--text-mid); }
.srv-row .unknown { color: var(--text-mid); }
.srv-row .c-info { display: contents; }
.c-status { min-width:0; }
/* Status is a coloured word, nothing more. Colours live in .server-state further down. */
.srv-row .server-state { font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
/* The reason under the state word: why Unknown or Offline. Empty for an online server. */
.state-note { display:block; margin-top:4px; color:var(--text-mid); font-size:.68rem; line-height:1.35; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.state-note:empty { display:none; }
.state-note a { color:var(--text-hi); text-decoration:underline; text-underline-offset:3px; }
.state-note a:hover { color:var(--accent); }
.state-note--page { margin:8px 0 0; font-size:.8rem; }
.join-missing { color:var(--text-mid); font-size:.78rem; }
.join-missing a { color:var(--text-hi); text-decoration:underline; text-underline-offset:3px; }
.srv-row .c-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; min-width:0; }
.srv-row .c-actions .b, .server-experience .srv-row .c-actions .b { min-height:34px; padding:0 12px; font-size:.66rem; white-space:nowrap; border-radius:0; }
/* The vote in a row is plain text: the arrow and the count, accent only once the viewer has voted. */
.srv-row .c-actions .vote, .server-experience .srv-row .c-actions .vote { min-height:0; padding:4px 2px; border:0; background:none; color:var(--text-mid); font-size:.8rem; }
.srv-row .c-actions .vote:hover { color:var(--text-hi); }
.srv-row .c-actions .vote.on, .server-experience .srv-row .c-actions .vote.on { background:none; color:var(--accent); }
.srv-row .c-actions form { margin:0; }
.srv-row .c-actions .join-missing { flex:1 1 100%; text-align:right; }
.srv-row .c-actions .details { color:var(--text-mid); font-size:.8rem; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.srv-row .c-actions .details:hover { color:var(--accent); }

/* ---------- vote and favourite ---------- */
.vote {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line2); border-radius: var(--radius-sm);
  color: var(--text-mid); padding: 6px 10px; font: inherit; font-size: .8rem; transition: .13s;
}
.vote .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.vote svg { width: 12px; height: 12px; fill: currentColor; }
.vote:hover { border-color: var(--accent); color: var(--accent); }
.vote.on { border-color: var(--accent); color: var(--accent);
           background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vote:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.star { background: none; border: 0; cursor: pointer; color: var(--text-mid); padding: 4px; line-height: 1; }
.star svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.star:hover { color: var(--accent); }
.star.on { color: var(--accent); }
.star.on svg { fill: currentColor; }
.star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- empty state ----------
   Says what the page will hold and offers the action that fills it, which is the difference
   between a considered empty state and a page that looks broken. */
.srv-empty { padding: 46px 22px; text-align: center; color: var(--text-mid); background: var(--bg-1); }
.srv-empty strong { display: block; color: var(--text-hi); font-family: var(--display);
                    font-size: 1.2rem; margin-bottom: 8px; }
.srv-empty p { max-width: 46ch; margin: 0 auto 18px; line-height: 1.6; }

/* ---------- responsive ----------
   Below the column widths the grid stops pretending to be a table and stacks. */
@media (max-width: 880px) {
  .srv-head { display: none; }
  .srv-row {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "dot" "name" "info" "actions";
    gap: 12px 14px; padding: 18px;
  }
  .srv-row > .c-status { grid-area: dot; }
  .srv-row > .c-name { grid-area: name; }
  .srv-row > .c-actions { grid-area: actions; justify-content:flex-start; }
  .srv-row .c-actions .join-missing { flex:1 1 100%; text-align:left; }
  .srv-row > .c-info {
    grid-area:info; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .srv-row .c-meta { min-width:0; padding:11px 12px; }
  .srv-row .c-meta + .c-meta { border-left:1px solid var(--line); }
  .srv-row .c-meta::before {
    display:block; margin-bottom:5px; color:var(--text-mid);
    font:600 .55rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  }
  .srv-row .c-region::before { content:"Region"; }
  .srv-row .c-players::before { content:"Players"; }
  .srv-row .c-playing::before { content:"Playing"; }
  .srv-row .c-style::before { content:"Playstyle"; }
  .srv-row .c-meta > span, .srv-row .c-meta > code { display:block; overflow-wrap:anywhere; }
  .srv-row .c-meta:nth-child(3n+1) { border-left:0; }
  .srv-row .c-meta:nth-child(n+4) { border-top:1px solid var(--line); }
  .srv-row .c-join { padding-top:1px; }
}

@media (max-width: 980px) {
  .filters--servers .filters-grid,.filters--communities .filters-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filters--servers .filter-field,.filters--servers .filter-search,.filters--communities .filter-search { grid-column:auto; }
  .filters--servers .filter-search { grid-column:1 / -1; }
}

@media (max-width: 480px) {
  .filters { padding:15px 14px; }
  .filters-head,.filters-foot { align-items:flex-start; flex-direction:column; }
  .filters-state { margin-top:-9px; }
  .filters--servers .filters-grid,.filters--communities .filters-grid { grid-template-columns:1fr; }
  .filters--servers .filter-search,.filter-search { grid-column:auto; }
  .filter-actions,.filter-actions .b { width:100%; }
  .filter-actions .b { text-align:center; }
  .srv-row { padding:16px 14px; gap:11px 12px; }
  .srv-row > .c-info { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .srv-row .c-meta:nth-child(3n+1) { border-left:1px solid var(--line); }
  .srv-row .c-meta:nth-child(2n+1) { border-left:0; }
  .srv-row .c-meta:nth-child(n+3) { border-top:1px solid var(--line); }
  .srv-row .nm { white-space:normal; line-height:1.25; }
}

/* ---------- one server's page ---------- */
.srv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.srv-top h1 { margin: 6px 0 0; font-size: clamp(28px, 4vw, 44px); }
.addr {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line2); border-radius: var(--radius-sm);
  padding: 11px 14px; font-family: var(--mono); font-size: .92rem; color: var(--text-hi);
  font-variant-numeric: tabular-nums; max-width: 100%; overflow-wrap: anywhere;
}
.addr button { background: none; border: 0; color: var(--text-mid); cursor: pointer;
               font: inherit; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.addr button:hover { color: var(--accent); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 18px; }
.kv .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
         text-transform: uppercase; color: var(--text-mid); }
.kv .v { color: var(--text-hi); margin-top: 3px; }

/* Public server experience */
.server-experience .server-directory,
.server-experience .server-detail,
.server-experience .server-form-shell,
.server-experience .server-mine-shell{padding:56px 0 96px}
.server-page-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;padding:40px;border:1px solid var(--line2);background:#101418}
.server-page-intro h1{margin:8px 0 14px;font-size:clamp(42px,6vw,74px);line-height:.9;text-transform:uppercase}
.server-page-intro p{max-width:680px;margin:0;color:var(--text-mid);font-size:1rem;line-height:1.72}
.server-page-actions{display:flex;align-items:center;gap:24px}
.server-directory-total{min-width:112px;padding-left:20px;border-left:2px solid var(--accent)}
.server-directory-total strong,.server-directory-total span{display:block}
.server-directory-total strong{color:var(--text-hi);font:700 2.2rem/.9 var(--display);font-variant-numeric:tabular-nums}
.server-directory-total span{margin-top:8px;color:var(--text-mid);font:.6rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.server-featured{margin-top:64px}
.server-section-heading,.server-results-heading{display:flex;align-items:end;justify-content:space-between;gap:28px}
.server-section-heading h2,.server-results-heading h2{margin:7px 0 0;color:var(--text-hi);font:700 clamp(1.55rem,2.8vw,2.4rem)/1 var(--display);text-transform:uppercase}
.server-section-heading p,.server-results-heading p{max-width:420px;margin:0;color:var(--text-mid);font-size:.84rem;line-height:1.6;text-align:right}
.server-experience .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
/* ── Featured card: artwork banner above, info panel below ── */
.server-experience .feat-card{
  display:block;text-decoration:none;
  border:1px solid var(--line2);border-radius:4px;
  background:var(--bg-1);overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
  /* reset base feat-card flex that would hide feat-body */
  min-height:0;aspect-ratio:unset;padding:0;justify-content:unset}
.server-experience .feat-card:hover{
  border-color:var(--accent);
  box-shadow:0 4px 24px rgba(0,0,0,.4)}
/* artwork banner */
.server-experience .feat-card .feat-art{
  display:block;position:relative;width:100%;height:160px;
  background:#0b0e10 var(--server-art) var(--server-position,50% 50%) / cover no-repeat;
  overflow:hidden}
.server-experience .feat-card:hover .feat-art{
  filter:brightness(1.08)}
/* info panel below artwork */
.server-experience .feat-card .feat-body{
  padding:14px 16px 14px;
  border-top:1px solid var(--line2)}
.server-experience .feat-card .nm{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
  font-family:var(--display);font-size:.94rem;font-weight:700;line-height:1.2;
  letter-spacing:.03em;text-transform:uppercase;color:var(--text-hi)}
.server-experience .feat-card .tl{
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  margin-top:5px;color:var(--text-mid);font-size:.78rem;line-height:1.35}
.server-experience .feat-card .ft{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.server-experience .feat-card .ft-meta{
  display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid)}
.server-experience .feat-card .ft-meta span{white-space:nowrap}
.server-experience .feat-card .ft-meta .sep{opacity:.28}
.server-experience .feat-card .ft-votes{
  flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--text-mid)}
.server-experience .feat-card .ft-votes svg{width:10px;height:10px;fill:currentColor;opacity:.55}
@media (max-width:900px){.server-experience .feat{grid-template-columns:1fr;gap:10px}}
.server-experience .filters{margin-top:48px;padding:40px;border-radius:0;background:#101418}
.server-experience .filters--servers{gap:22px}
.server-experience .filters--servers .filters-head{align-items:flex-end;padding-bottom:20px;border-bottom:1px solid var(--line)}
.server-experience .filters--servers .filters-head strong{margin-top:7px;font-size:1.12rem}
.server-experience .filters--servers .filters-state{color:var(--text-hi);font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:0;text-transform:none}
.server-experience .filters-grid{margin-top:0}
.server-experience .filters-foot{padding-top:20px}
.server-experience .filters--servers .filter-checks{gap:10px}
.server-experience .filters--servers .filter-checks-label{margin-right:5px}
.server-experience .filters--servers label.check{min-height:42px;padding:0 14px;border:1px solid var(--line2);background:var(--bg-0)}
.server-experience .filters--servers label.check:has(input:checked){border-color:var(--accent);color:var(--text-hi)}
.server-experience .filters--servers .filter-actions .b{min-height:44px;padding-right:20px;padding-left:20px}
.server-experience .filters input[type=search],.server-experience .filters select{min-height:48px;border-radius:0;background:#0b0e10}
.server-results-heading{margin-top:54px}
.server-experience .srv-list{margin-top:18px;border-radius:0;background:#101418}
.server-experience .srv-head{padding:15px 20px;background:#1b2126}
.server-experience .srv-row{min-height:72px;padding:14px 20px;background:#101418}
.server-experience .srv-row:hover{background:#151a1e}
.server-experience .srv-row .nm{font-size:.95rem}
.server-experience .srv-row .tl{font-size:.78rem}
.server-experience .vote{min-height:38px;border-radius:0;background:#0b0e10}
.server-experience .vote.on{background:#1b2126}
.server-experience .srv-empty{padding:64px 40px;background:#101418}

/* Detail banner: the artwork is shown at its own ratio (never stretched) on top of a blurred,
   darkened copy of itself, so small uploads still fill the frame without looking blown out. */
.server-detail-art{position:relative;overflow:hidden;border:1px solid var(--line2);background:#0b0e10}
.server-experience .server-detail-art .srv-banner{position:relative;z-index:1;height:clamp(160px,22vw,250px);max-height:none;aspect-ratio:auto;border:0;border-radius:0;background-size:contain;background-position:50% 50%}
.server-detail-art::before{content:"";position:absolute;inset:-24px;background:var(--server-art) var(--server-position,50% 50%) / cover no-repeat;filter:blur(22px) brightness(.5) saturate(1.1)}
.server-detail-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,12,0) 55%,rgba(16,20,24,.85) 100%)}
.server-experience .srv-top{margin-top:0;padding:28px 32px 32px;border:1px solid var(--line2);border-top:0;background:#101418}
.server-experience .srv-top h1{margin:10px 0 0;font-size:clamp(24px,3.2vw,38px);line-height:1.08;letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere}
.server-experience .srv-top .lede{max-width:720px;margin:10px 0 0;color:var(--text-mid);font-size:.98rem;line-height:1.6}
/* Status as a coloured word, shared by the detail meta line, featured cards and list rows. */
.server-meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--text-mid);font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.server-meta-sep{opacity:.45}
.server-state{color:var(--text-hi)}
.server-state.live{color:#5fcf7a}
.server-state.dead{color:#e06565}
.server-state.unknown{color:var(--text-mid)}
.server-detail-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.server-experience .share-controls{margin-top:18px}
.server-experience .srv-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);gap:16px;margin-top:38px}
body.site .server-panel{padding:22px 24px 24px;border:1px solid var(--line2);background:#101418}
body.site .server-panel+.server-panel{margin-top:16px}
body.site .server-panel h2{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--text-hi);font:600 .95rem/1.2 var(--sans);letter-spacing:0;text-transform:none;text-wrap:auto}
.server-experience .addr{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:50px;padding:0 0 0 14px;border-radius:2px;background:#0b0e10;font-size:1rem}
.server-experience .addr button{align-self:stretch;padding:0 16px;border-left:1px solid var(--line2);font-size:.7rem}
body.site .server-help{margin:12px 0 0;color:var(--text-mid);font-size:.84rem!important;line-height:1.55}
.server-about .prose{margin:0;color:var(--text-mid);font-size:.94rem;line-height:1.7;white-space:pre-wrap}
.server-info{margin:0}
.server-info>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem;line-height:1.4}
.server-info>div:last-child{border-bottom:0}
.server-info dt{margin:0;color:var(--text-mid);flex:none}
body.site .server-info dd{margin:0;min-width:0;color:var(--text-hi);font-size:.88rem!important;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.server-info dd a{color:var(--text-hi);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.server-info dd a:hover{color:var(--accent);text-decoration-color:currentColor}
body.site .server-updated{margin:14px 0 0;color:var(--text-mid);font-size:.76rem!important;line-height:1.5}
.server-back{margin:24px 0 0}
body.site .server-status-notice{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:16px;padding:14px 20px;border:1px solid var(--line2);border-left:3px solid var(--accent);background:#101418}
body.site .server-status-notice strong{flex:none;color:var(--text-hi);font-size:.84rem;font-weight:600}
body.site .server-status-notice p{flex:1 1 420px;margin:0;color:var(--text-mid);font-size:.84rem!important;line-height:1.55}
body.site .server-status-notice a{color:var(--text-hi);text-decoration:underline;text-underline-offset:3px}
body.site .server-status-notice a:hover{color:var(--accent)}
.server-review-notice{margin-bottom:20px;padding:22px 24px;border:1px solid var(--warn);background:#101418}
.server-review-notice strong{color:var(--warn);font:700 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.server-review-notice p{margin:7px 0 0;color:var(--text-mid);line-height:1.6}

.server-form-width{max-width:980px}.server-mine-width{max-width:1040px}
.server-form-page .h-display,.server-mine-page .h-display{margin:8px 0 0;font-size:clamp(38px,5vw,62px);text-transform:uppercase}
.server-listing-form{margin-top:32px}
.server-form-panel{padding:40px;border:1px solid var(--line2);background:#101418}
.server-form-heading{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.server-form-heading h2{margin:8px 0 0;color:var(--text-hi);font:700 1.8rem/1 var(--display);text-transform:uppercase}
.server-form-heading p{max-width:620px;margin:12px 0 0;color:var(--text-mid);line-height:1.65}
/* Field groups inside a panel */
.server-form-section{padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
.server-form-section:first-of-type{padding-top:0;margin-top:0;border-top:0}
.server-form-section-label{margin-bottom:18px;color:var(--text-mid);font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.server-form-actions{position:sticky;z-index:12;bottom:14px;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding:14px;border:1px solid var(--line2);background:#101418}
.server-experience .field input,.server-experience .field select,.server-experience .field textarea{border-radius:0}
.server-artwork-panel,.server-community-form{margin-top:18px}
.server-artwork-panel .srv-banner-edit{margin-top:18px}
.server-owned-list{display:grid;gap:1px;margin-top:32px;border:1px solid var(--line2);background:var(--line2)}
.server-owned-entry{padding:28px 32px;background:#101418}
.server-owned-main{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.server-owned-entry .state{display:block;width:max-content;padding:0;border:0;background:transparent;color:var(--text-mid);font:.6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}

@media(max-width:900px){
 .server-page-hero{grid-template-columns:1fr}.server-page-actions{justify-content:space-between}
 .server-experience .srv-cols{grid-template-columns:1fr}
 .server-section-heading,.server-results-heading{align-items:flex-start;flex-direction:column;gap:10px}
 .server-section-heading p,.server-results-heading p{text-align:left}
}
@media(max-width:600px){
 .server-experience .server-directory,.server-experience .server-detail,.server-experience .server-form-shell,.server-experience .server-mine-shell{padding:28px 0 64px}
 .server-page-hero,.server-experience .filters,.server-experience .srv-top,.server-form-panel{padding:24px}
 body.site .server-panel{padding:18px}
 .server-page-intro h1{font-size:clamp(36px,13vw,52px)}
 .server-experience .srv-top h1{font-size:clamp(22px,7vw,30px)}
 .server-page-actions{align-items:flex-start;flex-direction:column}
 .server-featured{margin-top:44px}
 .server-experience .feat-card{min-height:180px}
 .server-experience .filters{margin-top:34px}
 .server-experience .srv-row{padding:20px}
 .server-experience .srv-top{padding:20px}
 .server-experience .server-detail-art .srv-banner{height:clamp(120px,36vw,170px)}
 .server-detail-actions{margin-top:8px}
 .server-form-actions,.server-form-actions .b{width:100%}.server-form-actions .b{text-align:center}
 .server-owned-entry{padding:24px}
}

/* ---------- server tabs: Community, Official, Unclaimed ----------
   Plain links with the current one underlined. No pills. */
.server-tabs{display:flex;gap:0;margin-top:18px;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}
.server-tabs a{flex:none;padding:14px 22px 13px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-mid);font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.server-tabs a:hover{color:var(--text-hi)}
.server-tabs a.on{color:var(--text-hi);border-bottom-color:var(--accent)}

/* ---------- live population summary ---------- */
.server-live-population{
  display:grid;grid-template-columns:minmax(330px,1.05fr) minmax(540px,1.55fr);
  align-items:stretch;margin-top:24px;border:1px solid var(--line2);background:var(--bg-1)
}
.server-live-population-copy{display:flex;flex-direction:column;justify-content:center;padding:30px 32px}
.server-live-population-copy h2{margin:7px 0 8px;color:var(--text-hi);font:700 clamp(1.55rem,2.7vw,2.25rem)/1.05 var(--display);text-transform:uppercase}
.server-live-population-copy p{max-width:52ch;margin:0;color:var(--text-mid);font-size:.9rem;line-height:1.55}
.server-live-population-copy>span{display:block;margin-top:12px;color:var(--text-dim);font:600 .62rem/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.server-live-population-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line)}
.server-live-population-stat{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:30px 26px}
.server-live-population-stat+.server-live-population-stat{border-left:1px solid var(--line)}
.server-live-population-stat span{color:var(--text-mid);font:600 .62rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.server-live-population-stat strong{margin-top:10px;color:var(--text-hi);font:700 clamp(2rem,3.5vw,3.25rem)/.95 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.server-live-population-stat-total strong{color:var(--accent)}
.server-live-population-stat strong.is-unavailable{font-size:1rem;letter-spacing:0;color:var(--text-mid)}
.server-live-population-stat small{margin-top:10px;color:var(--text-dim);font-size:.7rem;line-height:1.4}
.server-live-population-unavailable{display:flex;flex-direction:column;justify-content:center;padding:30px 32px;border-left:1px solid var(--line)}
.server-live-population-unavailable strong{color:var(--text-hi);font-size:.95rem}
.server-live-population-unavailable span{margin-top:6px;color:var(--text-mid);font-size:.82rem}

@media(max-width:980px){
 .server-live-population{grid-template-columns:1fr}
 .server-live-population-counts,.server-live-population-unavailable{border-top:1px solid var(--line);border-left:0}
}
@media(max-width:600px){
 .server-live-population-counts{grid-column:auto;grid-template-columns:1fr}
 .server-live-population-copy,.server-live-population-stat,.server-live-population-unavailable{padding:24px}
 .server-live-population-stat+.server-live-population-stat{border-top:1px solid var(--line);border-left:0}
}

/* Status words on the public server pages share the site's three colours. */
body.site .status-text.ok{color:var(--ok)}
body.site .status-text.warn{color:var(--warn)}
body.site .status-text.danger{color:var(--danger)}
.field .hint.server-seen{display:block;margin-top:6px;color:var(--text-hi)}
.field .hint.server-seen.ok{color:var(--ok)}
.field .hint.server-seen.warn{color:var(--warn)}

/* ---------- population by region ----------
   A compact grid of regions above the official list: one glance, one click to filter. */
.site .server-zones{margin-top:22px;padding:0}
.zone-summary{margin:0 0 12px;color:var(--text-mid);font-size:.88rem;line-height:1.5}
.zone-summary strong{color:var(--text-hi)}
.zone-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.zone-cell{display:grid;gap:3px;padding:12px 14px;background:#101418;text-decoration:none;transition:background .12s}
.zone-cell:hover{background:#151a1e}
.zone-cell.on{background:#151a1e;box-shadow:inset 0 -2px var(--accent)}
.zone-cell-name{color:var(--text-hi);font:600 .82rem var(--sans)}
.zone-cell-players{color:var(--text-hi);font:700 1.15rem/1.1 var(--mono);font-variant-numeric:tabular-nums}
.zone-cell-meta{color:var(--text-mid);font:.66rem var(--mono);letter-spacing:.04em}
@media(max-width:900px){.zone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.zone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zone-cell{padding:10px 12px}}

/* ---------- compact toolbar for the browser tabs ----------
   Region, sort and a checkbox on one line above the list instead of the big finder card. */
.browser-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:28px;padding:14px 16px;border:1px solid var(--line2);background:#101418}
.browser-tools label{display:grid;gap:5px;color:var(--text-mid);font:600 .58rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.browser-tools select{min-width:170px;min-height:40px;padding:8px 10px;border:1px solid var(--line2);border-radius:0;background:#0b0e10;color:var(--text-hi);font:.9rem var(--sans)}
.browser-tools .check{display:flex;align-items:center;gap:8px;min-height:40px;font:600 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid)}
.browser-tools .check input{width:16px;height:16px;margin:0}
.browser-tools .browser-tools-actions{display:flex;gap:8px;margin-left:auto}
.browser-tools .browser-tools-count{flex:1 1 100%;order:-1;color:var(--text-mid);font-size:.84rem}
.browser-tools .browser-tools-count strong{color:var(--text-hi)}
@media(max-width:640px){.browser-tools label,.browser-tools select{width:100%}.browser-tools .browser-tools-actions{width:100%;margin-left:0}.browser-tools .browser-tools-actions .b{flex:1;text-align:center}}

/* ---------- official and unclaimed rows ----------
   Same list, different columns. Official: server, region, players, map, ruleset, match, lighting.
   Unclaimed: banner, id, region, players, map, ruleset, claim. */
.srv-head--browser,.srv-row--browser{grid-template-columns:minmax(0,1.3fr) 104px 96px 110px minmax(0,1.1fr) 84px 176px}
.srv-row--browser .c-actions{flex-direction:column;align-items:flex-end;gap:4px}
.srv-row--browser .c-actions .join-missing{flex:none;text-align:right}
.srv-head--unclaimed,.srv-row--unclaimed{grid-template-columns:200px minmax(0,1.3fr) 104px 92px 110px minmax(0,1fr) 172px}
.srv-row--unclaimed .c-join .b{white-space:nowrap}
.srv-row .nm.mono,.srv-row .tl.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:0;overflow-wrap:anywhere;white-space:normal}
.srv-row .tl.mono{color:var(--text-mid);font-size:.7rem}
.srv-row .copy-inline{padding:0;border:0;background:none;color:var(--text-mid);font:inherit;font-size:.78rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.srv-row .copy-inline:hover{color:var(--accent)}
.srv-row .c-art{min-width:0}
.unclaimed-art{display:block;width:200px;height:66px;overflow:hidden;border:1px solid var(--line);background:#0b0e10 var(--server-art) center/cover}
.srv-row .tl.unclaimed-id{color:var(--text-mid);font-size:.72rem;white-space:normal;overflow:visible;text-overflow:clip}
.srv-row .unclaimed-id code{font-family:var(--mono);font-size:.7rem;color:var(--text-hi);overflow-wrap:anywhere}
.unclaimed-art img{display:block;width:100%;height:100%;object-fit:cover}
.srv-row--browser .c-join,.srv-row--unclaimed .c-join{justify-self:end}
@media (max-width: 880px) {
  .srv-row--browser{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "info" "actions"}
  .srv-row--browser > .c-info{grid-template-columns:repeat(3,minmax(0,1fr))}
  .srv-row--browser .c-actions{align-items:flex-start}
  .srv-row--browser .c-actions .join-missing{text-align:left}
  .srv-row--unclaimed{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "name" "info" "join"}
  .srv-row--unclaimed .unclaimed-art{width:100%;max-width:320px;height:auto;aspect-ratio:3/1}
  .srv-row--unclaimed > .c-art{grid-area:art}
  .srv-row--unclaimed > .c-info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srv-row--unclaimed > .c-join{justify-self:start}
  .srv-row .c-map::before{content:"Map"}
  .srv-row .c-match::before{content:"Match"}
  .srv-row--browser .c-mode::before,.srv-row--unclaimed .c-mode::before{content:"Ruleset"}
  .srv-row--browser .c-meta:nth-child(3n+1){border-left:0}
  .srv-row--browser .c-meta:nth-child(n+4),.srv-row--unclaimed .c-meta:nth-child(n+3){border-top:1px solid var(--line)}
  .srv-row--unclaimed .c-meta:nth-child(2n+1){border-left:0}
}

/* ---------- listing form: numbered steps, plain hints, live status options ---------- */
.server-form-page .field > span.hint{font-family:var(--sans);font-size:.8rem;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--text-mid)}
.server-form-page .field > span small{font-size:.9em;opacity:.6;font-weight:400;letter-spacing:0;text-transform:none}
.server-form-page .field .check-label{font-family:var(--sans);font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--text-hi)}
.server-form-page .field.row{align-self:end;min-height:44px}
.server-form-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;margin-bottom:20px}
.server-form-step > span{padding-top:6px;color:var(--accent);font:700 .8rem var(--mono);letter-spacing:.14em}
.server-form-step h2{margin:0;color:var(--text-hi);font:700 1.3rem/1.15 var(--display);text-transform:uppercase}
.server-form-step p{max-width:640px;margin:6px 0 0;color:var(--text-mid);font-size:.88rem;line-height:1.55}
.server-status-option{margin-top:16px;padding:18px 20px;border:1px solid var(--line);background:#0b0e10}
.server-status-option + .server-status-option{margin-top:12px}
.server-status-option-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.server-status-option-head strong{color:var(--text-hi);font-size:.95rem}
.server-status-option-head span{color:var(--text-mid);font:.62rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.server-status-option > p{margin:8px 0 14px;color:var(--text-mid);font-size:.86rem;line-height:1.55}
.server-form-actions--inline{position:static;margin-top:12px;padding:0;border:0;background:transparent}
@media(max-width:600px){.server-form-step{grid-template-columns:32px minmax(0,1fr);gap:12px}.server-status-option{padding:14px}}

/* ---------- population history ---------- */
.pop-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pop-head h2{margin:0}
.pop-head .server-help{margin:4px 0 0}
.pop-now{flex:none;text-align:right}
.pop-now strong{display:block;color:var(--text-hi);font:700 1.9rem/1 var(--display);font-variant-numeric:tabular-nums}
.pop-now span{display:block;margin-top:4px;color:var(--text-mid);font:.6rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pop-chart-wrap{position:relative;margin-top:16px;padding-left:34px;color:var(--accent)}
.pop-chart{display:block;width:100%;height:130px;border:1px solid var(--line);background:#0b0e10}
.pop-chart-wrap.small{padding-left:0}
.pop-chart-wrap.small .pop-chart{height:60px}
.pop-area{fill:currentColor;opacity:.16}
.pop-line{stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pop-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
.pop-tick{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.pop-scale{position:absolute;left:0;top:0;height:130px;display:flex;flex-direction:column;justify-content:space-between;width:28px;color:var(--text-mid);font:.62rem var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.pop-axis{display:flex;justify-content:space-between;margin-top:6px;color:var(--text-mid);font:.62rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pop-axis--days{display:grid;grid-template-columns:repeat(7,1fr)}
.pop-axis--days span{text-align:center}
.pop-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:18px 0 0;padding:0;border:1px solid var(--line);background:var(--line)}
.pop-facts div{padding:12px 14px;background:#0b0e10}
.pop-facts dt{margin:0 0 4px;color:var(--text-mid);font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.pop-facts dd{margin:0;color:var(--text-hi);font-size:.92rem;line-height:1.4}
.pop-facts dd small{display:block;margin-top:2px;color:var(--text-mid);font-size:.76rem}
.pop-local{display:block;color:var(--text-mid);font-size:.8rem}
.server-population .server-help:last-child{margin-top:12px}
.playing-now .zone-summary{margin-bottom:12px}
.playing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.playing-col{padding:14px 16px;background:#101418}
.playing-head{margin-bottom:8px;color:var(--text-mid);font:600 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.playing-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 78px;gap:10px;align-items:center;padding:4px 0;color:var(--text-hi);font-size:.84rem;text-decoration:none}
a.playing-row:hover .playing-label{color:var(--accent)}
.playing-bar{display:block;height:6px;background:#0b0e10;border:1px solid var(--line)}
.playing-bar i{display:block;height:100%;background:var(--accent)}
.playing-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.playing-num small{color:var(--text-mid);font-size:.7em}
@media(max-width:900px){.playing-grid{grid-template-columns:1fr}}

/* ---------- Join ID panel, community card, copy toast ---------- */
body.site .server-join .join-missing{margin:0;font-size:.92rem}
.join-how{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.join-how summary{cursor:pointer;color:var(--text-hi);font-size:.86rem;font-weight:600;list-style:none}
.join-how summary::-webkit-details-marker{display:none}
.join-how summary::before{content:"+";display:inline-block;width:16px;color:var(--text-mid);font-family:var(--mono)}
.join-how[open] summary::before{content:"-"}
.join-how ol{margin:10px 0 0;padding-left:0;list-style:none;counter-reset:step}
.join-how li{position:relative;padding:6px 0 6px 34px;color:var(--text-mid);font-size:.86rem;line-height:1.55;counter-increment:step}
.join-how li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:7px;color:var(--text-mid);font:600 .68rem/1.6 var(--mono);letter-spacing:.1em}
.community-card{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 14px;border:1px solid var(--line2);background:#0b0e10;color:var(--text-hi);text-decoration:none}
.community-card:hover{border-color:var(--accent)}
.community-card img{flex:none;width:44px;height:44px;object-fit:cover;border:1px solid var(--line)}
.community-card-body{display:flex;flex-direction:column;min-width:0;gap:2px}
.community-card-label{color:var(--text-mid);font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.community-card-name{font-weight:600;overflow-wrap:anywhere}
.community-card-link{color:var(--text-mid);font-size:.78rem}
.community-card:hover .community-card-link{color:var(--accent)}
.copy-toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:calc(100% - 32px);padding:12px 18px;border:1px solid var(--line2);background:var(--bg-1);color:var(--text-hi);font-size:.86rem;line-height:1.45;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.copy-toast.on{opacity:1;transform:translate(-50%,0)}
.owned-joinid code{font-family:var(--mono);color:var(--text-hi)}
.owned-joinid .copy-inline{padding:0;border:0;background:none;color:var(--text-mid);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.owned-joinid .copy-inline:hover{color:var(--accent)}