/* Palette taken from hackvshack.net (monochrome dark-grey forum theme). */
:root {
  --bg: #202123;            /* page base */
  --panel: #27282a;         /* content block */
  --panel-2: #333537;       /* raised / hover */
  --text: #fbfbfd;          /* near-white */
  --muted: #a0a0a0;
  --border: #3c3c3c;
  --accent: #fbfbfd;        /* near-white highlight for active states */
  --accent-ink: #1e1e1e;    /* dark text on the light accent */
  --btn: #3c3c3c;           /* primary button, like the site's .button--primary */
  --btn-hover: #494949;
  --star: #ffc40c;          /* gold favourites */
  --good: #63b265;
  --bad: #c84448;
}

* { box-sizing: border-box; }

/* Form controls don't inherit font-family by default — force Poppins on all. */
button, input, select, textarea, optgroup, option {
  font-family: inherit;
}

body {
  margin: 0;
  font-family: 'Poppins', "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

header, .submit-bar, .controls, main, footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
main { padding-bottom: 32px; }

/* Embedded in a page that resizes the iframe to fit (README "Embedding"; common.js
   adds html.embedded): no scrollbar of our own, the parent's background shows
   through, and blocks line up with the parent's content edges. A modal's backdrop
   dims the whole iframe (the parent dims the rest of its page to match) and the
   modal opens at the visible slice of the iframe (--vp-top) instead of its top. */
html.embedded, html.embedded body { overflow: hidden; background: transparent; }
html.embedded header, html.embedded .tabs-wrap, html.embedded .submit-bar,
html.embedded .controls, html.embedded main { max-width: none; padding-left: 0; padding-right: 0; }
html.embedded header { padding-top: 0; }
html.embedded main { padding-bottom: 0; }
html.embedded .modal-overlay { position: absolute; padding-top: calc(var(--vp-top, 0px) + 40px); }

header {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }

.nav-links { margin-left: auto; display: flex; gap: 6px; }
.nav-link {
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.nav-link:hover { color: var(--text); background: var(--panel); }
.nav-link.active { color: var(--text); background: var(--panel); border-color: var(--border); }
.nav-cta {
  cursor: pointer;
  font-family: inherit;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}
.nav-cta:hover { background: #ffffff; color: var(--accent-ink); }
.status { flex-basis: 100%; }
.logo {
  width: 44px;
  height: 44px;
}
h1 { margin: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.brand-games {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-main { font-size: 1.5rem; font-weight: 700; }
.status { color: var(--muted); margin: 8px 0 16px; font-size: 0.9rem; }
.status.error { color: var(--bad); }

/* Game tabs: a pill bar like the hackvshack.net forum list (active tab = white pill). */
.tabs-wrap {
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 0 16px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 11px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.tab i { font-size: 0.9em; }
/* Game icons sit on a white rounded tile, like the hackvshack.net subforum icons. */
.tab-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 2px;
  background: #fbfbfd;
  border-radius: 6px;
  object-fit: contain;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: var(--accent-ink); }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

/* "Add a server by IP" box — only on tabs the Steam list can't fill (CS:GO 2018). */
.submit-bar[hidden] { display: none; }
.submit-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.submit-lead { margin: 0 0 10px; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.submit-lead strong { color: var(--text); font-weight: 600; }
.submit-form { display: flex; flex-wrap: wrap; gap: 8px; }
#submit-addr {
  flex: 1 1 240px;
  max-width: 400px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}
.submit-form .btn { height: 40px; padding: 0 16px; }
.submit-form .btn:disabled { opacity: 0.6; cursor: default; }
.submit-msg { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
.submit-msg:empty { display: none; }
.submit-msg.ok { color: var(--good); }
.submit-msg.error { color: var(--bad); }

/* Every control in the top row shares the same height + look so they align. */
#search,
#page-size,
.cselect-btn,
.toggle {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}

#search {
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 400px;
  padding: 0 12px;
  font-size: 0.95rem;
}

#page-size {
  flex: 0 0 auto;
  padding: 0 10px;
  cursor: pointer;
}
#page-size option { background: var(--panel); color: var(--text); }

/* Custom dropdown (region + country filters) — styled, with flags. */
.cselect { position: relative; flex: 0 0 auto; }
.cselect-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 0 12px;
  cursor: pointer;
}
.cselect-btn:hover { background: var(--panel-2); }
.cselect.open .cselect-btn { border-color: #565656; }
.cselect-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cselect-caret { margin-left: auto; color: var(--muted); font-size: 0.65rem; }
.cselect-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 230px;
  max-width: 320px;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.cselect-pop[hidden] { display: none; }
.cselect-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.85rem;
}
.cselect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #565656 transparent;
}
.cselect-list::-webkit-scrollbar { width: 9px; }
.cselect-list::-webkit-scrollbar-track { background: transparent; }
.cselect-list::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 5px; border: 2px solid var(--panel-2); }
.cselect-list::-webkit-scrollbar-thumb:hover { background: #5e5e5e; }
.cselect-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
}
.cselect-opt:hover { background: var(--panel); }
.cselect-opt.selected { background: var(--panel); font-weight: 600; }
.cselect-opt .opt-flag { flex: 0 0 auto; display: inline-flex; }
.cselect-opt .opt-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cselect-opt .opt-count { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;          /* push "Per page" to the right edge of the row */
  color: var(--muted);
  font-size: 0.85rem;
}

.toggles { display: flex; gap: 8px; }
.toggle {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.toggle:hover { background: var(--panel-2); }
.toggle.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* The HvH setting-tag chips always sit on their own row below. */
.filters {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.filters[hidden] { display: none; }
.filter {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.84rem;
  transition: background .15s, border-color .15s;
}
.filter:hover { background: var(--panel-2); }
.filter.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.filter.clear { color: var(--muted); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  table-layout: fixed;        /* stable columns; rows can't reflow each other */
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
/* Every server row is the same height regardless of how many setting badges. */
/* Separate borders keep the list's 1px outline inside its box: collapsed borders put
   half of it outside, which the iframe edge clips when embedded (no side gutters).
   This also lets the rounded corners apply. Rows are still divided only by each
   cell's bottom border. */
#server-table { border-collapse: separate; border-spacing: 0; }
#server-table tbody td { height: 64px; }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--panel-2); }
tbody tr:last-child td { border-bottom: none; }

/* Fixed column widths (name takes the remaining space). */
.col-map { width: 150px; }
.col-players { width: 70px; }
.col-settings { width: 200px; }
.col-actions { width: 230px; }

.col-players { white-space: nowrap; }
.col-map { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-actions { white-space: nowrap; text-align: right; }
.col-actions .btn + .btn { margin-left: 6px; }

.star {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 5px;
  margin-right: 6px;
  vertical-align: middle;
  transition: color .15s, transform .1s;
}
.star:hover { color: var(--star); transform: scale(1.15); }
.star.star-on { color: var(--star); }
.server-name { font-weight: 600; }

.name-cell { display: flex; align-items: flex-start; gap: 9px; }
.name-text { flex: 1 1 auto; min-width: 0; }

/* Flag stacked above an online status dot. */
.status-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 3px;          /* line the flag up with the server-name text */
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.dot.online {
  background: var(--good);
  box-shadow: 0 0 5px var(--good);
}
.flag {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  object-fit: cover;
}
.flag-none {
  flex: 0 0 auto;
  width: 16px;
  height: 12px;
  color: var(--muted);   /* globe tile shown for unknown countries */
}
.server-name {
  display: flex;
  align-items: center;
  min-width: 0;
}
.server-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Owner claim links: website + Discord icons after the name (always visible). */
.srv-link {
  flex: 0 0 auto;
  /* display: inline-flex; */
  align-items: center;
  margin-left: 7px;
  color: var(--muted);
  font-size: 0.9rem;
}
.srv-link:hover { color: var(--accent); }
.server-addr { color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players-good { color: var(--good); }

/* Badges wrap but are clipped to a fixed height so rows stay uniform. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 42px;
  overflow: hidden;
  align-content: center;
}
.badge {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: #cececf;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.66rem;
  line-height: 1.5;
  white-space: nowrap;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}
.connect { background: var(--btn); color: var(--text); border-color: #565656; }
.connect:hover { background: var(--btn-hover); }
.copy {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.copy:hover { background: var(--panel-2); }
.copy.copied { background: var(--good); color: #102310; border-color: var(--good); }

.empty { color: var(--muted); text-align: center; padding: 32px 0; }

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 8px;
}
.page-info { color: var(--muted); font-size: 0.85rem; margin-right: auto; }
.page-btn {
  padding: 6px 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.page-btn:hover:not(:disabled) { background: var(--panel-2); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-ellipsis { color: var(--muted); padding: 0 4px; }

footer {
  margin: 28px auto;
  color: var(--muted);
  font-size: 0.82rem;
}
footer code, p code, .info-list code, .info-notes code {
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text);
}

#server-table tbody tr { cursor: pointer; }

/* ---- server detail modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 50;
  /* Content still scrolls (wheel/touch) for very long player lists, but we hide
     the native scrollbar — it looks bad over the dark backdrop. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.modal-overlay::-webkit-scrollbar { width: 0; height: 0; } /* Chrome/Safari */
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text); }

/* ---- "List your server" info modal ---- */
.info-title { font-size: 1.25rem; font-weight: 700; margin: 0 28px 4px 0; }
.info-lead { color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; line-height: 1.5; }
.info-step { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); }
.info-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}
.info-body { flex: 1; min-width: 0; }
.info-h { font-size: 0.98rem; font-weight: 600; margin: 3px 0 6px; }
.info-p { font-size: 0.9rem; color: var(--text); margin: 0 0 8px; line-height: 1.55; }
.info-note { font-size: 0.82rem; color: var(--muted); margin: 0; line-height: 1.5; }
.info-notes { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.info-notes li { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin: 0 0 4px; }
.info-notes li:last-child { margin-bottom: 0; }
.info-notes code { white-space: normal; overflow-wrap: anywhere; }
/* Numbered how-to steps (e.g. adding a CS:GO 2018 server by IP). */
.info-list { margin: 6px 0 10px; padding-left: 20px; }
.info-list li { font-size: 0.9rem; line-height: 1.55; margin: 0 0 5px; }
.info-list a { color: var(--text); font-weight: 600; }
.info-list a:hover { color: #ffffff; }
.tag-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
  margin-top: 10px;
}
.tag-legend-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tag-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
}
.tag-name { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-note code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 540px) { .tag-legend { grid-template-columns: 1fr; } }

/* "Claim your server" tag reference — one clean stacked row per tag. */
.claim-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 14px; }
.claim-row { display: flex; flex-direction: column; gap: 3px; }
.claim-code {
  align-self: flex-start;
  max-width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.82rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.claim-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.claim-example {
  margin: 0 0 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.claim-example-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 5px;
}
.claim-example code {
  background: none;
  padding: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---- owner claim: description + links in the detail modal ---- */
.detail-desc {
  margin: 10px 28px 0 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}
.detail-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.detail-link:hover { border-color: var(--accent); color: var(--accent); }
.detail-link i { font-size: 0.95rem; }

.detail-head { display: flex; align-items: flex-start; gap: 10px; margin: 0 28px 6px 0; }
.detail-head .flag, .detail-head .flag-none { margin-top: 5px; }
.detail-name { font-weight: 700; font-size: 1.1rem; }
.detail-sub { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.detail-h { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 20px 0 8px; }
.detail-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chart-ranges { display: flex; gap: 4px; }
.chart-range {
  padding: 3px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
}
.chart-range:hover { color: var(--text); }
.chart-range.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.detail-muted { color: var(--muted); font-size: 0.88rem; margin: 4px 0; }
.detail-error { color: var(--bad); }

.chart-wrap {
  position: relative;
  height: 180px;
  margin-bottom: 4px;
}
.chart-wrap canvas { width: 100% !important; }
.chart-empty { text-align: center; padding: 64px 0; }
.chart-empty[hidden] { display: none; }

.player-table { width: 100%; border-collapse: collapse; }
.player-table th, .player-table td {
  text-align: left;
  padding: 4px 10px;
  height: auto;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
  line-height: 1.5;
}
.player-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.player-table td.num, .player-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.player-table tbody tr:last-child td { border-bottom: none; }
.muted-name { color: var(--muted); font-style: italic; }
.player-note { margin-top: 8px; font-size: 0.82rem; }

/* Server info key/value grid in the detail modal. */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 18px;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.kv-k { color: var(--muted); flex: 0 0 auto; }
.kv-v { color: var(--text); font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-v.good { color: var(--good); }
.kv-v.bad { color: var(--bad); }

.kw-row { padding: 10px 0 2px; }
.kw-row .kv-k { display: block; margin-bottom: 7px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kw-chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: #cececf;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* ---- statistics page ---- */
.section-h {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 26px 0 10px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
/* Per-game cards on the "All games" tab are buttons that open that game's tab. */
.stat-card-link {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.stat-card-link:hover { background: var(--panel-2); border-color: #565656; }
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.stat-sub { color: var(--muted); font-size: 0.74rem; margin-top: 2px; opacity: 0.8; }

.stats-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.stats-cols.single { grid-template-columns: 1fr; }  /* one column hidden (e.g. no setting tags on TF2) */
.stats-col[hidden], .stats-section[hidden] { display: none; }
.chart-wrap.small { height: 240px; }
.chart-wrap.tall { height: 320px; }
.panel.chart-wrap { padding: 12px 14px; }

.stat-table { width: 100%; border-collapse: collapse; }
.stat-table th, .stat-table td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.stat-table th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-table td.num, .stat-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-table tbody tr:last-child td { border-bottom: none; }
.stat-table .flag, .stat-table .flag-none { vertical-align: -1px; margin-right: 4px; }
.stat-table .rank { color: var(--muted); width: 28px; }
.busy-name { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.busy-game { display: block; color: var(--muted); font-size: 0.72rem; }

@media (max-width: 760px) {
  .stats-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .col-map, .col-settings { display: none; }
}