/* ==========================================================================
   PvP Arena — shared design tokens & shell styles
   Used by: /index.html, /faq/index.html, /leaderboard/index.html
   ========================================================================== */

:root {
  /* Colors */
  --bg: #0f0f11;
  --surface: #16161a;
  --table-head: #1a1a1e;
  --toast-bg: #1c1c20;
  --border: #202024;
  --border-chip: #26262b;
  --border-toast: #2e2e34;
  --footer-border: #1c1c20;

  --text-primary: #ececed;
  --text-body: #b4b4bc;
  --text-muted: #8b8b93;
  --text-dim: #75757d;
  --text-disabled: #56565d;
  --chip-label: #6c6c74;

  --nav-inactive: #a0a0a8;
  --nav-active: #ffffff;

  --accent: #f7a545;
  --accent-hover: #ffc478;
  --accent-rule: #f5883a;
  --gold: #ffce68;

  /* Tier pill colors (leaderboard only) — one per default PvPDuels rank tier.
     An unrecognized/custom tier name just falls back to the plain pill shape
     below with no color override, so this never breaks for a server that
     renames or adds/removes tiers in config.yml. */
  --tier-iron-fill: rgba(148, 163, 184, 0.12);
  --tier-iron-text: #94a3b8;
  --tier-bronze-fill: rgba(217, 119, 6, 0.13);
  --tier-bronze-text: #e0a35c;
  --tier-silver-fill: rgba(203, 213, 225, 0.1);
  --tier-silver-text: #cbd5e1;
  --tier-gold-fill: rgba(255, 206, 104, 0.13);
  --tier-gold-text: #ffce68;
  --tier-platinum-fill: rgba(45, 212, 191, 0.13);
  --tier-platinum-text: #5eead4;
  --tier-diamond-fill: rgba(96, 165, 250, 0.13);
  --tier-diamond-text: #93c5fd;
  --tier-emerald-fill: rgba(52, 211, 153, 0.13);
  --tier-emerald-text: #6ee7b7;
  --tier-master-fill: rgba(216, 180, 254, 0.13);
  --tier-master-text: #d8b4fe;
  --tier-grandmaster-fill: rgba(248, 113, 113, 0.13);
  --tier-grandmaster-text: #f87171;
  --tier-challenger-fill: rgba(255, 215, 0, 0.16);
  --tier-challenger-text: #ffd700;

  /* Shape */
  --radius-card: 8px;
  --radius-pill: 999px;
  --radius-chip: 4px;

  /* Motion */
  --ease: 0.16s ease;
}

html, body { margin: 0; background: var(--bg); }
* { box-sizing: border-box; }

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--ease);
}
a:hover { color: var(--accent-hover); }

::selection { background: rgba(245, 136, 58, 0.3); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

#page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn { to { opacity: 1; } }

#transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.4s ease;
}

/* ==========================================================================
   Banner
   ========================================================================== */

.banner {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.banner img.banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-scrim {
  display: none;
}

.banner-logo-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 18px;
  cursor: pointer;
}

/* Logo is a 1024x1024 PNG that's ~85% transparent padding; the wrapper
   crops to just the glyph band instead of cropping the source file. */
.logo-crop {
  width: 236px;
  height: 98px;
  overflow: hidden;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

.logo-crop img {
  display: block;
  width: 236px;
  height: 236px;
  margin-top: -66px;
  image-rendering: pixelated;
}

/* ==========================================================================
   Nav
   ========================================================================== */

nav.site-nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 18px 24px 14px;
}

nav.site-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nav-inactive);
  transition: color var(--ease);
}

nav.site-nav a:hover { color: var(--nav-active); }

nav.site-nav a.active {
  color: var(--nav-active);
  cursor: default;
  background: rgba(247, 165, 69, 0.12);
  border: 1px solid rgba(247, 165, 69, 0.35);
  border-radius: 5px;
  padding: 3px 10px;
  margin: 0 -10px;
}

/* Store nav item — a real link to the store.pvp-arena.net subdomain; the
   small arrow just signals it leaves this site instead of behaving like the
   internal, same-tab nav links. */
nav.site-nav a.nav-external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

nav.site-nav .nav-external-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  opacity: 0.55;
  transition: opacity var(--ease), transform var(--ease);
}

nav.site-nav a.nav-external:hover .nav-external-icon {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--footer-border);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-left a,
.footer-left button,
.footer-right {
  font-size: 14px;
  line-height: 1;
}

.footer-ip {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-dim);
  transition: color var(--ease);
}

.footer-ip:hover { color: var(--gold); }

.footer-right {
  color: var(--text-dim);
}

/* ==========================================================================
   Toast
   ========================================================================== */

#copy-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--toast-bg);
  border: 1px solid var(--border-toast);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nav-active);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease);
}

#copy-toast.show {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #page-wrapper { animation: none; opacity: 1; }
  #transition-overlay { transition: none; }
  a, nav.site-nav a, .footer-ip, .ip-copy, .faq-ip-copy {
    transition: none;
  }
  #copy-toast { transition: none; }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-content {
  flex: 1 1 auto;
  max-width: 660px;
  margin: 0 auto;
  padding: 0 24px 40px;
  text-align: center;
}

.about-content p {
  font-size: 17.5px;
  color: var(--text-body);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.about-content p:nth-of-type(1) { margin: 24px auto 12px; }
.about-content p:nth-of-type(2) { margin: 0 auto 12px; }
.about-content p:nth-of-type(3) { margin: 0 auto 40px; }

.about-content strong {
  color: var(--nav-active);
  font-weight: 600;
}

.ip-copy {
  display: inline-block;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 6px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--accent-rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 29px;
  color: var(--nav-active);
  transition: color var(--ease);
}

.ip-copy:hover { color: var(--gold); }

.ip-hint {
  font-size: 14.5px;
  color: var(--text-dim);
}

/* "play.pvp-arena.net" in a wide monospace face at 29px is ~330px wide —
   wider than the content box on a 320-375px phone, which would force the
   whole page (not just the leaderboard) to scroll horizontally. */
@media (max-width: 400px) {
  .ip-copy { font-size: 22px; }
}

/* ── Announcement banner ──────────────────────────────────────────────────
   Dismissible strip driven by an ANNOUNCEMENT config object + announcements.js
   (see /new/index.html). Background/text color are set inline per-announcement
   so a given message can pick its own accent color instead of being locked
   to the shared design tokens. */

#announcements-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px 32px;
}

.announcement {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-card);
  min-height: 48px;
  box-sizing: border-box;
}

.announcement-text {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.announcement-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  padding: 0;
  margin: 1px 0 0;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.announcement-close:hover { opacity: 1; }

/* ==========================================================================
   FAQ page
   ========================================================================== */

.faq-content {
  flex: 1 1 auto;
  max-width: 660px;
  margin: 0 auto;
  padding: 34px 24px 48px;
  width: 100%;
}

.faq-content h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
  margin: 0 0 24px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
}

.faq-item .question {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 6px;
}

.faq-item .answer {
  font-size: 16px;
  color: var(--text-body);
}

.faq-item .answer code {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}

.faq-ip-copy {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted rgba(247, 165, 69, 0.5);
  transition: color var(--ease);
}

.faq-ip-copy:hover { color: var(--accent-hover); }

/* ==========================================================================
   Changelog page
   ========================================================================== */

.changelog-content {
  flex: 1 1 auto;
  max-width: 660px;
  margin: 0 auto;
  padding: 34px 24px 48px;
  width: 100%;
}

/* No banner/nav above this — standalone page, like /status and /new/docs. */
.changelog-content-standalone { padding-top: 48px; }

.changelog-content h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
  margin: 0 0 6px;
}

.changelog-intro {
  text-align: center;
  color: var(--text-muted);
  font-size: 15.5px;
  margin: 0 0 28px;
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.changelog-empty {
  padding: 28px 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/* Each entry: a date/tag heading + a list of what changed. Admin adds these
   by hand via the docs-style admin panel — see DOCS_EDITABLE markers. */
.changelog-entry {
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
}

.changelog-entry .changelog-date {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 4px;
}

.changelog-entry .changelog-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.changelog-entry ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-body);
  font-size: 15px;
}

.changelog-entry li { margin-bottom: 4px; }
.changelog-entry li:last-child { margin-bottom: 0; }

.faq-footnote {
  margin-top: 28px;
  text-align: center;
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   Leaderboard page
   ========================================================================== */

.leaderboard-content {
  flex: 1 1 auto;
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 24px 48px;
  width: 100%;
}

.leaderboard-header {
  text-align: center;
  margin-bottom: 24px;
}

.leaderboard-header h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  margin: 0 0 6px;
}

.leaderboard-header .subline {
  font-size: 16px;
  color: var(--text-muted);
}

/* Search box — shared shape used by both the Arenas and Profiles pages
   (arenas.css / profiles.css each style their own page around it, but the
   box itself lives here so both pages get it without cross-linking each
   other's stylesheet). */
.arenas-search {
  max-width: 420px;
  margin: 0 auto 18px;
}

.arenas-search input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
}

.arenas-search input::placeholder { color: var(--text-dim); }

.arenas-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Featured-arena badge — shared by the Arenas page's cards and a profile's
   owned-arenas list. */
.arena-featured-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: rgba(255, 206, 104, 0.13);
  border: 1px solid rgba(255, 206, 104, 0.35);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tab bar — switches which board (of both plugins' live-exported JSON) is shown below. */
.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.lb-tab {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-chip);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.lb-tab:hover { color: var(--text-primary); border-color: var(--border-toast); }

.lb-tab.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.leaderboard-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* .leaderboard-panel is inline-block (needed so it can overflow this
     container for mobile scrolling instead of being clipped at viewport
     width) — inline-block content left-aligns by default, so on desktop,
     where the panel is narrower than this container, it needs this to
     stay centered instead of drifting to the left edge. */
  text-align: center;
  /* Without this, a diagonal touch gesture on the table is ambiguous
     between this element's horizontal scroll and the page's vertical
     scroll, and mobile browsers often just lock the gesture out entirely.
     This tells the browser: this element owns horizontal pans, let
     vertical pans fall through to the page. */
  touch-action: pan-x pan-y;
}

.leaderboard-panel {
  display: inline-block;
  width: max-content;
  max-width: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  vertical-align: top;
}

/* A real <table> instead of hand-rolled flex rows — the browser sizes each
   column to fit its widest cell (header or data) automatically, so header
   and body columns always line up and the gap between any two columns is
   just the cell padding, never an arbitrary fixed box width. */
.lb-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.lb-table th,
.lb-table td {
  padding: 14px 10px;
  white-space: nowrap;
}

.lb-table th:first-child,
.lb-table td:first-child {
  padding-left: 20px;
}

.lb-table th:last-child,
.lb-table td:last-child {
  padding-right: 20px;
}

.lb-table thead tr {
  background: var(--table-head);
}

.lb-table thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: normal;
  line-height: 1.3;
  vertical-align: top;
}

.lb-table tbody tr {
  border-top: 1px solid var(--border);
}

/* Clickable rows: .lb-row-link (Leaderboard, jumps to a player's profile)
   and .profile-row (Profiles page's own listing, jumps to that profile's
   detail view) both get the same hover/focus affordance. */
.lb-table tbody tr.lb-row-link,
.lb-table tbody tr.profile-row {
  cursor: pointer;
  transition: background var(--ease);
}

.lb-table tbody tr.lb-row-link:hover,
.lb-table tbody tr.lb-row-link:focus-visible,
.lb-table tbody tr.profile-row:hover,
.lb-table tbody tr.profile-row:focus-visible {
  background: var(--table-head);
}

/* Generic columns, reused across every board (player-ranked or arena-ranked):
   rank | name (player or arena) | meta (tier pill or owner name) | any number
   of right-aligned stat columns, one of which can carry .lb-num-highlight for
   that board's headline stat (ELO, win count, streak, duels, stars). */
.lb-rank { text-align: left; font-weight: 500; }
.lb-name { max-width: 220px; text-align: left; font-size: 16px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.lb-meta { text-align: left; color: var(--text-body); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.lb-num { text-align: right; color: var(--text-body); font-size: 14.5px; }
.lb-num-wide { text-align: right; color: var(--text-body); font-size: 14.5px; }

/* Color-only — layered on top of .lb-num/.lb-num-wide for a board's headline
   stat (ELO, win count, streak, duels, stars). Headers never get this. */
.lb-num-highlight { color: var(--gold); font-size: 16px; }

.lb-table tbody .lb-rank { font-size: 15px; }

.tier-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tier-iron { background: var(--tier-iron-fill); color: var(--tier-iron-text); }
.tier-bronze { background: var(--tier-bronze-fill); color: var(--tier-bronze-text); }
.tier-silver { background: var(--tier-silver-fill); color: var(--tier-silver-text); }
.tier-gold { background: var(--tier-gold-fill); color: var(--tier-gold-text); }
.tier-platinum { background: var(--tier-platinum-fill); color: var(--tier-platinum-text); }
.tier-diamond { background: var(--tier-diamond-fill); color: var(--tier-diamond-text); }
.tier-emerald { background: var(--tier-emerald-fill); color: var(--tier-emerald-text); }
.tier-master { background: var(--tier-master-fill); color: var(--tier-master-text); }
.tier-grandmaster { background: var(--tier-grandmaster-fill); color: var(--tier-grandmaster-text); }
.tier-challenger { background: var(--tier-challenger-fill); color: var(--tier-challenger-text); }

.rank-1 { color: var(--gold); }
.rank-2, .rank-3 { color: var(--accent); }
.rank-rest { color: var(--text-dim); }

.lb-table td.leaderboard-state {
  padding: 32px 20px;
  text-align: center;
  white-space: normal;
  color: var(--text-muted);
  font-size: 15px;
}

.leaderboard-disclaimer {
  margin-top: 14px;
  text-align: center;
  font-size: 14.5px;
  color: var(--text-dim);
}