/* legacy.css — shared styling for the /legacy-stats pages.
 *
 * Pulled out of the per-page <style> blocks (used by index/videos) into one
 * same-origin stylesheet so the leaderboard and profile pages stay visually
 * identical without duplicating ~200 lines twice. CSP allows `style-src
 * 'self'`, so an external sheet is fine and keeps the markup clean. */

:root {
  --background-color: #181818;
  --text-color: #cccccc;
  --header-color: #ffffff;
  --accent-color-orange: #ff8c00;
  --accent-color-blue: #4682b4;
  --card-background: #2a2a2a;
  --border-color: #444;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  line-height: 1.7;
}
.container { max-width: 1000px; margin: 0 auto; padding: 2rem; }
header { text-align: center; padding: 4rem 2rem 3rem; border-bottom: 1px solid var(--border-color); }
header h1 {
  font-family: 'Teko', sans-serif;
  font-size: 4.5rem;
  color: var(--header-color);
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 0 0 10px var(--accent-color-orange), 0 0 20px var(--accent-color-blue);
}
header p { font-size: 1.15rem; max-width: 640px; margin: 1rem auto 0; }
.snapshot {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #888;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
}
.back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: #888;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.15s;
}
.back-link:hover { color: var(--accent-color-orange); }
/* Unified branded header (both legacy pages): "Gaming-Servers.net" over
   "Legacy Stats" at the SAME size, then a small nav row. */
.brand, .brand-sub {
  display: block;
  font-family: 'Teko', sans-serif;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 2px;
  margin: 0;
}
.brand {
  color: var(--header-color);
  text-decoration: none;
  text-shadow: 0 0 10px var(--accent-color-orange), 0 0 20px var(--accent-color-blue);
  transition: color 0.15s;
}
.brand:hover { color: var(--accent-color-orange); }
.brand-sub { color: var(--accent-color-orange); margin-top: 0.15rem; }
.legacy-nav { margin-top: 1rem; font-size: 0.95rem; }
.legacy-nav a { color: #888; text-decoration: none; transition: color 0.15s; }
.legacy-nav a:hover { color: var(--accent-color-orange); }
.legacy-nav .sep { color: #555; margin: 0 0.5rem; }
@media (max-width: 600px) { .brand, .brand-sub { font-size: 2.4rem; } }
main { padding: 2.5rem 0; }

/* ── Network "By the Numbers" ────────────────────────────────────────────── */
.overview {
  display: grid;
  /* Exactly 5 across (matches Hall of Fame) — no ragged "4 + 1 orphan"
     wrap. Collapses cleanly on narrow screens. */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.overview .stat { background: var(--card-background); padding: 1.25rem 1rem; text-align: center; }
.overview .stat b {
  display: block;
  font-family: 'Teko', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-color-orange);
}
.overview .stat span { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
/* ── Fun facts ───────────────────────────────────────────────────────────── */
/* One fact per full-width row (4 stacked rows) — wider boxes, easier read
   than a cramped multi-column grid. */
.facts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fact {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color-orange);
  border-radius: 0 8px 8px 0;
  padding: 1.15rem 1.5rem;
}
.fact .fi { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.fact p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.fact p b { color: var(--accent-color-orange); }

/* ── Hall of Fame ────────────────────────────────────────────────────────── */
.section-h {
  font-family: 'Teko', sans-serif;
  font-size: 2.2rem;
  color: var(--header-color);
  border-bottom: 2px solid var(--accent-color-orange);
  padding-bottom: 0.35rem;
  margin: 2.5rem 0 1.25rem;
  letter-spacing: 1px;
}
.hof {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* one clean row of 5 */
  gap: 1rem;
  margin-bottom: 1rem;
}
.hof-card {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent-color-orange);
  border-radius: 0 0 8px 8px;
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.hof-card .cat { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.hof-card .val { font-family: 'Teko', sans-serif; font-size: 2rem; color: var(--accent-color-orange); line-height: 1.1; margin: 0.2rem 0; }
.hof-card a.name { display: block; color: var(--accent-color-blue); text-decoration: none; font-weight: 600; }
.hof-card a.name:hover { color: var(--accent-color-orange); }
.hof-card .where { font-size: 0.78rem; color: #777; }
/* Silly Awards reuse the Hall-of-Fame card but in blue, so they read as
   affectionate ribbing rather than honours. */
.hof-card.silly { border-top-color: var(--accent-color-blue); }
.hof-card.silly .val { color: var(--accent-color-blue); }
.hof-card.silly .cat { color: #999; }

/* ── Per-mod record strip ────────────────────────────────────────────────── */
.mod-records {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* matches the 5-up strips above */
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color-blue);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.mod-records .rec { background: var(--card-background); padding: 0.9rem 1rem; text-align: center; }
.mod-records .rec .cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.mod-records .rec .val { font-family: 'Teko', sans-serif; font-size: 1.5rem; color: var(--accent-color-orange); }
.mod-records .rec a { color: var(--accent-color-blue); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.mod-records .rec a:hover { color: var(--accent-color-orange); }

/* Per-mod "Top Maps" — its own subsection under the record strip. */
.section-h .sh-sub { font-size: 1.1rem; color: #777; letter-spacing: 1px; }
.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.map-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
}
.map-card .mc-rank { font-family: 'Teko', sans-serif; font-size: 1.4rem; color: var(--accent-color-orange); min-width: 1.4rem; text-align: center; }
.map-card .mc-name { flex: 1; color: var(--accent-color-blue); font-weight: 600; font-size: 0.92rem; word-break: break-word; }
.map-card .mc-kills { color: #888; font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── The Servers ─────────────────────────────────────────────────────────── */
.servers-note { text-align: center; color: #888; font-size: 0.95rem; margin: 0 0 1.25rem; }
.servers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.srv {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color-blue);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
}
.srv-name { font-family: 'Teko', sans-serif; font-size: 1.5rem; color: var(--header-color); line-height: 1.1; letter-spacing: 0.5px; }
.srv-meta { font-size: 0.82rem; color: #888; margin-top: 0.15rem; }
.srv-meta .srv-loc { color: var(--accent-color-orange); }
.srv-kills { font-size: 0.78rem; color: #666; margin-top: 0.35rem; font-variant-numeric: tabular-nums; }

/* ── Mod picker ──────────────────────────────────────────────────────────────
   Equal-size tiles, centered and wrapping. Centered flex-wrap means a partial
   last row sits centered under the rest instead of left-aligned with a big
   empty gap (the original "floating with space on the last row" problem). */
.mods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.mod-btn {
  /* Fixed tile size so every mode reads as an equal, tidy block and the
     centered last row lines up cleanly. */
  flex: 0 0 150px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-family: 'Teko', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  padding: 0.7rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  line-height: 1.15;
  /* Fixed min-height so a 1-line and 2-line mod name produce the same tile. */
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Featured row: the 4 flagship modes, big and edge-to-edge on top. */
.mods-featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.mods-featured .mod-btn {
  flex: none;
  width: auto;
  min-height: 92px;
  font-size: 1.6rem;
  border-top: 3px solid var(--accent-color-orange);
  border-radius: 0 0 8px 8px;
}
.mods-featured .mod-btn small { font-size: 0.75rem; }
.mods-featured .mod-btn.active { border-top-color: #181818; }
/* Small divider between the featured row and the rest. */
.mods-more-label {
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
  margin: 0.5rem 0 1rem;
}
@media (max-width: 620px) {
  .mods-featured { grid-template-columns: repeat(2, 1fr); }
}

.mod-btn:hover { border-color: var(--accent-color-orange); color: var(--accent-color-orange); transform: translateY(-2px); }
.mod-btn.active {
  background: var(--accent-color-orange);
  border-color: var(--accent-color-orange);
  color: #181818;
}
.mod-btn small { display: block; font-family: 'Roboto', sans-serif; font-size: 0.68rem; opacity: 0.7; letter-spacing: 0; margin-top: 0.2rem; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.search { margin: 0 0 1.5rem; }
.search input {
  width: 100%;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
.search input:focus { outline: none; border-color: var(--accent-color-orange); }

/* ── Board table ─────────────────────────────────────────────────────────── */
.board { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.board th, .board td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #333; }
.board th { font-family: 'Teko', sans-serif; font-size: 1.1rem; letter-spacing: 1px; color: #888; text-transform: uppercase; }
.board td.num, .board th.num { text-align: right; font-variant-numeric: tabular-nums; }
.board tr:hover td { background: #232323; }
.board .rank { color: var(--accent-color-orange); font-family: 'Teko', sans-serif; font-size: 1.3rem; width: 3rem; text-align: center; }
/* Player cell: name centered, permalink + K/D stacked beneath it. */
.board td.player { text-align: center; }
.board a.name { color: var(--accent-color-blue); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.board a.name:hover { color: var(--accent-color-orange); }
.board .permalink {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  color: #666;
  text-decoration: none;
  margin-top: 0.15rem;
}
.board .permalink:hover { color: var(--accent-color-blue); }
.kd { color: #888; font-size: 0.8rem; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; }
.pager button {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.pager button:hover:not(:disabled) { border-color: var(--accent-color-orange); color: var(--accent-color-orange); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager span { color: #888; font-size: 0.9rem; }

/* ── Profile ─────────────────────────────────────────────────────────────── */
/* Centered profile header: avatar, then the name, then permalinks. */
/* margin-top separates the avatar from the nav links above it. */
.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; margin-top: 2rem; margin-bottom: 1.5rem; }
.profile-head img, .profile-head .ava {
  width: 104px; height: 104px; border-radius: 8px;
  border: 2px solid var(--accent-color-orange); background: #1a1a1a; object-fit: cover;
}
.profile-head h1 { font-family: 'Teko', sans-serif; font-size: 3.2rem; margin: 0; color: var(--header-color); letter-spacing: 1px; line-height: 1; }
.permalinks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; }
.permalinks a, .permalinks button {
  font-size: 0.82rem;
  color: #888;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.permalinks a:hover, .permalinks button:hover { color: var(--accent-color-orange); border-color: var(--accent-color-orange); }
.permalinks button.copied { color: #6bd06b; border-color: #6bd06b; }

/* The sarcastic "#1 OWNER" badge (Munzy only). Deliberately gaudy gold. */
.owner-badge {
  display: inline-block;
  margin-top: 0.25rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: #181818;
  background: linear-gradient(135deg, #ffd700, #ffb000);
  border: 1px solid #ffe680;
  border-radius: 999px;
  padding: 0.2rem 1.1rem;
  cursor: help;
  box-shadow: 0 0 14px rgba(255, 196, 0, 0.45);
}
/* Tiny inline crown next to the owner's name anywhere he's listed. */
.crown { cursor: help; }
/* Steam-group glyph next to in-group players. */
.grp { cursor: help; }
.grp svg { vertical-align: -2px; }
/* The Steam-group achievement is a link but must look like the other
   (non-link) achievement badges. */
a.achv-badge { text-decoration: none; }
a.achv-badge:hover { border-color: #66c0f4; }

/* Cross-mod summary strip (display-only roll-up, not a skill merge). */
.profile-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 2.5rem;
}
.profile-summary .s { background: var(--card-background); padding: 1rem 0.75rem; text-align: center; }
.profile-summary .s b { display: block; font-family: 'Teko', sans-serif; font-size: 1.8rem; color: var(--accent-color-orange); line-height: 1; }
.profile-summary .s span { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }

/* Centered flex-wrap (not grid) so a player with only 2 modes — or any
   partial bottom row — sits centered instead of left-aligned with a big
   empty gap. Cards don't grow, so a sparse row stays card-sized & centered. */
.mod-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.mod-card {
  flex: 0 1 320px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color-blue);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
}
.mod-card h3 { font-family: 'Teko', sans-serif; font-size: 1.8rem; margin: 0 0 0.75rem; color: var(--accent-color-orange); letter-spacing: 0.5px; }
.mod-card .rankbadge { float: right; font-size: 1rem; color: #888; }
.mod-card dl { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; margin: 0; font-size: 0.9rem; }
.mod-card dt { color: #888; }
.mod-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-color); }

/* Auto-earned achievement badges (every profile, derived from stats). */
.achv { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.achv-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  color: var(--header-color);
  cursor: help;
}
.achv-badge .ai { font-size: 1.15rem; }
#achv .section-h { margin-top: 2.5rem; }

.akas { margin-top: 2.5rem; }
.akas h2 { font-family: 'Teko', sans-serif; font-size: 2rem; color: var(--header-color); border-bottom: 2px solid var(--accent-color-orange); padding-bottom: 0.4rem; letter-spacing: 1px; }
.akas ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.akas li { background: var(--card-background); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.akas li span { color: #777; font-size: 0.8rem; }

/* ── Head-to-head compare ────────────────────────────────────────────────── */
.cmp-pick { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
.cmp-slot { flex: 1; position: relative; }
.cmp-slot input {
  width: 100%; box-sizing: border-box; background: #1a1a1a;
  border: 1px solid var(--border-color); color: var(--text-color);
  padding: 0.7rem 1rem; border-radius: 6px; font: inherit;
}
.cmp-slot input:focus { outline: none; border-color: var(--accent-color-orange); }
.cmp-vs { font-family: 'Teko', sans-serif; font-size: 1.6rem; color: var(--accent-color-orange); padding-top: 0.45rem; }
.cmp-results { position: absolute; left: 0; right: 0; z-index: 5; background: #1d1d1d;
  border: 1px solid var(--border-color); border-radius: 0 0 6px 6px; max-height: 280px; overflow:auto; }
.cmp-hit { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--accent-color-blue); padding: 0.5rem 0.8rem; cursor: pointer; font: inherit; }
.cmp-hit:hover { background: #262626; color: var(--accent-color-orange); }
.cmp-hit span { color: #777; font-size: 0.82rem; }
.cmp-none { padding: 0.6rem 0.8rem; color: #777; font-size: 0.85rem; }
.cmp-tbl { width: 100%; border-collapse: collapse; }
.cmp-tbl td, .cmp-tbl th { padding: 0.55rem 0.8rem; border-bottom: 1px solid #333; text-align: center;
  font-variant-numeric: tabular-nums; }
.cmp-tbl th { font-family: 'Teko', sans-serif; letter-spacing: 1px; color: #888; text-transform: uppercase;
  font-weight: 400; width: 9rem; }
.cmp-tbl td.ca, .cmp-tbl td.cb { color: var(--text-color); width: 50%; }
.cmp-tbl td.win { color: #6bd06b; font-weight: 700; background: rgba(107,208,107,0.08); }
.cmp-summary { background: var(--card-background); border: 1px solid var(--border-color);
  border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; }
.cmp-summary thead td { padding: 1rem; }
.cmp-head { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.cmp-head img, .cmp-head .ava { width: 56px; height: 56px; border-radius: 6px; border: 2px solid var(--accent-color-orange);
  background: #1a1a1a; object-fit: cover; }
.cmp-head a { color: var(--accent-color-blue); text-decoration: none; font-weight: 600; }
.cmp-head a:hover { color: var(--accent-color-orange); }
.cmp-mod { background: var(--card-background); border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color-blue); border-radius: 0 8px 8px 0; padding: 0.5rem 1rem 0.75rem; margin-bottom: 1rem; }
.cmp-mod h3 { font-family: 'Teko', sans-serif; font-size: 1.6rem; color: var(--accent-color-orange);
  text-align: center; margin: 0.5rem 0; letter-spacing: 0.5px; }
.cmp-only { text-align: center; color: #888; font-size: 0.9rem; margin-top: 1.5rem; }
.cmp-only b { color: var(--text-color); }
@media (max-width: 600px) { .cmp-pick { flex-direction: column; } .cmp-vs { align-self: center; } }

.msg { text-align: center; color: #888; font-style: italic; padding: 3rem 1rem; }
.msg.error { color: #ff6b6b; font-style: normal; }

footer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding: 2rem; margin-top: 2rem;
  border-top: 1px solid var(--border-color); color: #888; font-size: 0.9rem;
}
footer p { margin: 0; }
.footer-right a { color: #888; text-decoration: none; transition: color 0.15s; }
.footer-right a:hover { color: var(--accent-color-orange); }

/* The 5-up strips collapse before they get cramped. */
@media (max-width: 900px) {
  .overview, .hof, .mod-records { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  header h1 { font-size: 3rem; }
  .board th.hide-sm, .board td.hide-sm { display: none; }
  .overview, .hof, .mod-records { grid-template-columns: repeat(2, 1fr); }
  footer { justify-content: center; text-align: center; }
}