:root {
  /* PaceFC's palette: black/white/gold (the PaceFC.GG colours). */
  --bg: #0a0a09;
  --bg-rgb: 10, 10, 9;
  --surface: #0e0e0e;
  --surface-rgb: 14, 14, 14;
  --surface-2: #121212;
  --surface-3: #171717;
  --surface-3-rgb: 23, 23, 23;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.17);
  --text: #f0f0f0;
  /* Strongest text colour (headings, names, active tabs, input text). */
  --heading: #fff;
  /* "r, g, b" of the foreground ink, for translucent hairlines/fills that sit on surfaces (white on dark, near-black on light). */
  --ink-rgb: 255, 255, 255;
  /* Drop shadow under dropdown menus (nav, search, meta pickers). */
  --popup-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  --muted: #9c9689;
  --muted-dim: #5c5850;
  --accent: #ddbb40;
  --accent-dim: #b59934;
  /* Same colour as --accent, as "r, g, b" so a translucent tint (rgba(var(--accent-rgb), 0.1)) can be built from it — every such tint in this file uses this instead of its own hardcoded copy of the colour. */
  --accent-rgb: 221, 187, 64;
  /* Text colour on solid --accent fills (buttons, badges). */
  --on-accent: #0a0a0a;
  --win: #5ce08a;
  --loss: #f27272;
  --draw: #d9b04c;
  /* Tournament tier badges (S–E) — tournament header + tournament-tiers.html. S uses --accent. */
  --tier-a: #c4cad3;
  --tier-b: #cd8a52;
  --tier-c: #8c8678;
  --tier-d: #7f97a6;
  --tier-e: #6e6e78;
  --header-h: 64px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Single source of truth for the "clickable row" hover treatment —
     compact list rows across the site (match rows, bracket cards, table
     rows, search results, etc.) all reference these two instead of each
     defining its own hover recipe, so they stay visually identical. Not
     used by the bigger image-forward "card" family (match-card,
     tourney-card, player-card, potm-card...), which has its own established
     border/lift hover language. */
  --row-hover-bg: rgba(var(--accent-rgb), 0.08);
  --row-hover-glow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 0 14px rgba(var(--accent-rgb), 0.25);
}

/* ---------- Light theme ----------
   Toggled by data-theme="light" on <html> (set before first paint by the
   inline script in each page's <head>, switched by the header button in
   script.js). Only the tokens change; every rule reads them. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f4f0;
  --bg-rgb: 245, 244, 240;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-2: #f7f6f2;
  --surface-3: #eeece6;
  --surface-3-rgb: 238, 236, 230;
  --border: rgba(20, 18, 10, 0.1);
  --border-strong: rgba(20, 18, 10, 0.2);
  --text: #1c1b17;
  --heading: #0a0a09;
  --ink-rgb: 20, 18, 10;
  --popup-shadow: 0 4px 12px rgba(20, 18, 10, 0.08);
  --muted: #625d52;
  --muted-dim: #9a9486;
  --accent: #a8840f;
  --accent-dim: #8a6b0a;
  --accent-rgb: 168, 132, 15;
  --on-accent: #ffffff;
  --win: #1a9a52;
  --loss: #d23f3f;
  --draw: #b0851a;
  --tier-a: #6b7480;
  --tier-b: #a3602a;
  --tier-c: #8a8476;
  --tier-d: #4f6676;
  --tier-e: #6b6b73;
}

/* The two compare-page silhouette placeholders (images/compare/silhouette-*.png)
   are baked-in blue-grey PNGs. Rather than tint the pixels, the image is
   used only as a stencil (mask) and the shape is filled with the accent
   colour, so it always matches the palette exactly. object-position pushes
   the original pixels out of view; the background shows through the mask. */
.compare-preview-avatar .avatar-photo {
  object-position: -9999px 0 !important;
  background: rgba(var(--accent-rgb), 0.5);
  -webkit-mask: var(--silhouette) top center / cover no-repeat;
  mask: var(--silhouette) top center / cover no-repeat;
}
.compare-preview-avatar .avatar-photo[src*="silhouette-a"] { --silhouette: url("../images/compare/silhouette-a.png"); }
.compare-preview-avatar .avatar-photo[src*="silhouette-b"] { --silhouette: url("../images/compare/silhouette-b.png"); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  letter-spacing: -0.01em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Scrollbars that match the site instead of the browser's white default. */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--ink-rgb), 0.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), 0.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb), 0.26); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.header-left {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.main-nav-inline {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 24px;
  height: 100%;
}

.main-nav-inline a {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}

.main-nav-inline a:hover { color: var(--heading); }
.main-nav-inline a.active { color: var(--heading); border-bottom-color: var(--accent); }

/* ---------- Nav "Tools" dropdown ---------- */
.nav-dropdown { position: relative; height: 100%; display: flex; align-items: center; }

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger { color: var(--heading); }

.nav-dropdown-trigger.active { color: var(--heading); border-bottom-color: var(--accent); }

.nav-dropdown-chevron { transition: transform 0.15s ease; }
.nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: fixed;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--popup-shadow);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown-menu[hidden] { display: none; }

.nav-dropdown-menu a {
  display: block;
  height: auto;
  padding: 9px 10px;
  border-radius: 6px;
  border-bottom: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--accent); }
.nav-dropdown-menu a.active { color: var(--accent); }

/* Language switcher — same dropdown shell as Tools, narrower trigger. */
.lang-trigger { gap: 6px; padding: 0 2px; }
.lang-dropdown-menu { min-width: 150px; }
.lang-option {
  display: block;
  width: 100%;
  text-align: start;
  height: auto;
  padding: 9px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover { background: var(--surface-2); color: var(--accent); }
.lang-option.active { color: var(--accent); }

/* Account dropdown (Supabase auth) — same dropdown shell as Tools/Language,
   swapped in for #loginBtn once a session exists. */
.account-dropdown[hidden] { display: none; }
.account-trigger { gap: 8px; padding: 0 4px; }
.account-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-email-label { max-width: 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.account-role-badge[hidden] { display: none; }
/* Verified pro = the PaceFC P with a gold verified seal in place of the dot. */
.account-role-badge.player {
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url('../images/brand/verified-badge.svg?v=2') center / contain no-repeat;
  color: transparent; /* hides the placeholder letter auth.js puts inside */
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0;
}
.account-role-badge.player[hidden] { display: none; }
.nav-dropdown-menu a[hidden] { display: none; }
.account-role-badge.admin { background: rgba(255, 183, 77, 0.16); color: #ffb74d; }

/* Featured Pick'em emblem next to the username (auth.js loadHeaderEmblem) */
.account-emblem { position: relative; display: inline-flex; flex-shrink: 0; margin-left: -2px; }
.account-emblem[hidden] { display: none; }
.pickem-emblem-card { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.account-emblem .badge-tip { top: calc(100% + 12px); right: -14px; transform: translateY(-4px); }
.account-emblem:hover .badge-tip { transform: none; }

/* Shared hover card for an earned badge (FutrBadges.tooltipHtml) */
.badge-tip {
  position: absolute; z-index: 60; width: 230px; display: flex; flex-direction: column; text-align: start;
  background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
  white-space: normal; font-weight: 500; letter-spacing: 0; text-transform: none;
}
*:hover > .badge-tip { opacity: 1; }
.badge-tip-tier { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tc); }
.badge-tip-title { font-size: 13.5px; font-weight: 800; color: var(--heading); margin: 3px 0; }
.badge-tip-why { font-size: 12px; color: var(--muted); line-height: 1.45; }
.badge-tip-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted-dim); }
.account-logout-btn {
  display: block;
  width: 100%;
  text-align: start;
  height: auto;
  padding: 9px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--loss);
  cursor: pointer;
  transition: background 0.15s ease;
}
.account-logout-btn:hover { background: var(--surface-2); }

/* Auth modal (log in / sign up) */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 20px;
}
.auth-modal-backdrop[hidden] { display: none; }

.auth-modal {
  width: 100%;
  max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.auth-modal.shake { animation: auth-shake 0.4s ease; }
@keyframes auth-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease;
}
.auth-modal-close:hover { color: var(--heading); }

.auth-modal h2 { font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 4px; }
.auth-modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.auth-field[hidden] { display: none; }
.auth-field input, .auth-field select {
  height: 40px;
  padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--heading);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.auth-field input:focus, .auth-field select:focus { border-color: var(--border-strong); }
.admin-kind-field { max-width: 240px; }
/* Edit profile → Past teams: club/org · name · until date · remove. */
.admin-team-history { margin-top: 4px; }
.admin-team-history-rows { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.admin-team-history-rows:empty { display: none; }
.admin-team-history-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-team-history-row select { width: auto; flex: 0 0 auto; }
.admin-team-history-row input[data-history-name] { flex: 1 1 160px; min-width: 0; width: auto; }
.admin-team-history-until { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.admin-team-history-until input { width: auto; }
.admin-team-history > .btn-ghost-sm { align-self: flex-start; }

.auth-error { color: var(--loss); font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.auth-success { color: var(--win); font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.auth-error[hidden], .auth-success[hidden] { display: none; }

.auth-submit { width: 100%; height: 42px; font-size: 13.5px; margin-top: 4px; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

.auth-toggle { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.auth-toggle button {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  margin-left: 4px;
}
.auth-toggle button:hover { color: var(--accent-dim); }

body.modal-open { overflow: hidden; }

/* My Profile page */
.account-profile-card[hidden] { display: none; }
.account-profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  max-width: 480px;
}
.account-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-profile-name-row { display: flex; align-items: center; gap: 8px; }
.account-profile-info h2 { font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.account-profile-email { color: var(--muted); font-size: 13px; margin-top: 4px; }
.account-profile-meta { color: var(--muted-dim); font-size: 12px; margin-top: 6px; }

.account-profile-linked { color: var(--accent); font-size: 12px; font-weight: 700; margin-top: 6px; }
.account-profile-linked[hidden] { display: none; }

/* Pro verification (account.html) */
.pro-verify-card[hidden] { display: none; }
.pro-verify-card {
  max-width: 480px;
  margin-top: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
}
.pro-verify-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pro-verify-copy h3 { font-size: 15px; font-weight: 800; color: var(--heading); margin-bottom: 6px; }
.pro-verify-copy p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.pro-verify-copy a { color: var(--accent); }
.pro-verify-add {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  background: var(--surface-3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pro-verify-add:hover { background: var(--surface); border-color: var(--accent); }
.pro-verify-add[hidden] { display: none; }
.pro-verify-search[hidden], .pro-verify-confirm[hidden] { display: none; }
.pro-verify-search { margin-top: 16px; }
.pro-verify-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--heading);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.pro-verify-search input:focus { border-color: var(--border-strong); }
.pro-verify-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pro-verify-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--surface-3);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: start;
}
.pro-verify-result:hover:not(:disabled), .pro-verify-result.is-kb-active { border-color: var(--accent); }
.pro-verify-result:disabled { opacity: 0.5; cursor: not-allowed; }
.pvr-avatar {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pvr-initial { font-size: 14px; font-weight: 800; color: var(--muted); }
.pvr-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.pvr-avatar.has-photo .pvr-initial { display: none; }
.pvr-name { flex: 1; font-size: 13.5px; font-weight: 700; }
.pvr-meta { font-size: 11.5px; color: var(--muted); }
.pro-verify-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }
/* Tournament builder: "Add … as a new player" */
.pro-verify-result.pvr-new { background: transparent; border: 1px dashed var(--border-strong); }
.pvr-new .pvr-initial { color: var(--accent); font-size: 18px; }
.pro-verify-confirm { margin-top: 16px; font-size: 13px; color: var(--muted); }
.pro-verify-confirm b { color: var(--heading); }
.pro-verify-actions { display: flex; gap: 8px; margin-top: 12px; }
.pro-verify-link { background: none; border: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 0; margin-left: 4px; }

/* Team search picker (js/pro-form.js) */
.team-picker { position: relative; }
.team-picker input { width: 100%; }
.team-picker-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.team-picker-list[hidden] { display: none; }
.team-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.team-picker-item:hover, .team-picker-item.is-kb-active { background: var(--surface-2); color: var(--accent); }
.team-picker-logo { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; border-radius: 5px; }
.team-picker-logo-empty { background: var(--surface-3); }
.team-picker-flag { border-radius: 2px; }
.team-picker-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}
.team-picker-hint { color: var(--muted-dim); font-size: 11.5px; font-weight: 500; }

/* Admin on-site editing (js/admin-edit.js) */
.admin-edit-btn { margin-right: 4px; }
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(4, 8, 16, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.admin-modal {
  width: 100%;
  max-width: 920px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.admin-modal-head {
  position: relative;
  padding: 20px 56px 16px 24px;
  border-bottom: 1px solid var(--border);
}
.admin-modal-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.admin-modal-back:hover { color: var(--accent); }
.admin-modal-head h2 { font-size: 18px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.admin-modal-close { top: 16px; right: 16px; }
/* "Unsaved changes" — shown over an admin modal before it closes. */
.admin-unsaved-backdrop {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 8, 16, 0.6);
}
.admin-unsaved {
  width: 100%;
  max-width: 420px;
  padding: 20px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.admin-unsaved h3 { font-size: 16px; font-weight: 800; color: var(--heading); margin-bottom: 6px; }
.admin-unsaved p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.admin-unsaved-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-unsaved-actions [data-choice="stay"] { margin-left: auto; }
.admin-modal-body { padding: 20px 24px 24px; }
.contact-page-container { max-width: 560px; }
.contact-fallback { margin-top: 4px; font-size: 13px; color: var(--muted); }
.contact-fallback a { color: var(--accent); font-weight: 600; }
.admin-edit-form textarea {
  min-height: 180px;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--heading);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.55;
  outline: none;
  resize: vertical;
}
.admin-edit-form textarea:focus { border-color: var(--border-strong); }
.admin-edit-form input[type="file"] { height: auto; padding: 9px 10px; }

/* Rich-text post editor (news) — toolbar + contenteditable box standing in
   for the old plain textarea. See js/admin-edit.js's wireRichTextToolbar
   and js/script.js's sanitizeNewsHtml. */
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: -1px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.rte-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.rte-btn:hover { border-color: var(--border-strong); color: var(--heading); }
.rte-toolbar select.rte-select {
  width: auto;
  height: 30px;
  padding: 0 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.rte-editor {
  min-height: 220px;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  color: var(--heading);
  font-size: 13.5px;
  line-height: 1.6;
  outline: none;
  overflow-y: auto;
}
.rte-editor:focus { border-color: var(--border-strong); }
.rte-editor p { margin: 0 0 12px; }
.rte-editor p:last-child { margin-bottom: 0; }
.rte-editor a { color: var(--accent); }
.news-article-body-text a { color: var(--accent); text-decoration: underline; }
.admin-edit-preview { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 10px; object-fit: cover; align-self: flex-start; }
.admin-edit-preview[hidden] { display: none; }

/* News editor "Position photo": one frame per place the photo shows, at that
   place's shape (see NEWS_FOCUS_FRAMES in js/admin-edit.js). */
.news-focus[hidden] { display: none; }
.news-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.news-focus-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news-focus-mini .news-focus-frame { width: 50%; }
.news-focus-newstop { grid-column: 1 / -1; }
.news-focus-frame { position: relative; width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-3); cursor: grab; touch-action: none; user-select: none; }
.news-focus-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-focus-frame.dragging { cursor: grabbing; border-color: var(--accent); }
.news-focus-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Same bottom fade as the real featured hero, so the title area is visible. */
.news-focus-frame.is-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.05) 0%, rgba(var(--bg-rgb), 0.45) 55%, rgba(var(--bg-rgb), 0.94) 100%); pointer-events: none; }
.news-focus-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.news-focus-meta b { color: var(--heading); font-weight: 700; }
.news-focus-meta input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--accent); }
.news-focus-meta small { color: var(--muted); }
@media (max-width: 600px) { .news-focus-grid { grid-template-columns: 1fr; } }
.admin-edit-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 12px; cursor: pointer; }
.admin-edit-check input { accent-color: var(--accent); }
.admin-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.admin-edit-form .account-settings-hint { margin: 0 0 4px; }

.admin-news-manager {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
}
.admin-news-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.admin-news-head .section-label { margin: 0; }
.admin-news-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.admin-news-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.admin-news-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-news-title span { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-news-title small { font-size: 11.5px; color: var(--muted-dim); }
.admin-news-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.admin-news-featured { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); padding: 0 6px; }

/* Admin inbox: count pill on the dropdown link + a dot on the avatar */
.admin-inbox-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--loss);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  line-height: 16px;
}
.admin-inbox-count[hidden] { display: none; }
.account-avatar { position: relative; }
.has-inbox .account-avatar::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--loss);
  border: 2px solid var(--bg, #0a0f1a);
}
.admin-section-label { margin: 28px 0 14px; }
.admin-section-label:first-of-type { margin-top: 0; }
.admin-card {
  max-width: 480px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.admin-card-hint { margin: 0 0 14px; }
.admin-link-chosen { color: var(--accent); font-size: 12.5px; font-weight: 700; margin: 6px 0 12px; }
.admin-link-chosen[hidden] { display: none; }
.admin-card .pro-verify-results { margin: -6px 0 12px; }

/* Admin claim queue */
.admin-claim-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.admin-claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.admin-claim-player { font-size: 14px; color: var(--text); }
.admin-claim-player b { color: var(--heading); }
.admin-claim-who { font-size: 12px; color: var(--muted); margin-top: 4px; }
.admin-claim-actions { display: flex; gap: 8px; flex-shrink: 0; }
#adminClaims[hidden], #adminDenied[hidden] { display: none; }

/* Pro profile form (account-settings.html) */
.account-pro-form { max-width: 720px; }
.pro-form-group-title { font-size: 13px; font-weight: 800; color: var(--heading); margin: 22px 0 12px; }
.pro-form-subgroup { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dim); margin: 14px 0 8px; }
.pro-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.account-pro-form .btn-login { margin-top: 8px; }

/* Verified logo next to a player's name on player.html */
.verified-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  margin-left: 10px;
  background: url('../images/brand/verified-badge.svg?v=2') center / contain no-repeat;
  font-size: 0.5em;
  vertical-align: middle;
  position: relative;
  cursor: help;
  outline: none;
}
/* Smaller inline badge next to a name in lists (Pro Settings table). */
.verified-logo-sm { font-size: 1em; width: 1.05em; height: 1.05em; margin-left: 5px; vertical-align: -2px; }
/* Hover/tap tooltip, text from data-tip (see verifiedLogoHtml in script.js).
   Only built while shown, so it can't widen the page on phones. */
.verified-logo:hover::after,
.verified-logo:focus::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(240px, 70vw);
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text);
  font: 600 12px/1.3 'Inter', sans-serif;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 20;
}

/* Settings page */
.account-settings-form { max-width: 380px; margin-bottom: 32px; }
.account-settings-form .section-label { margin-bottom: 16px; }
.account-settings-hint { color: var(--muted-dim); font-size: 12px; margin: -6px 0 14px; }

/* account-settings.html: sections laid out as cards in a 2-column grid */
.account-settings-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.account-settings-grid > .account-settings-form {
  max-width: none;
  margin: 0;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.account-settings-grid > .account-settings-form[hidden] { display: none; }
.account-settings-grid .account-settings-form .section-label { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 900px) {
  .account-settings-grid { grid-template-columns: 1fr 1fr; }
  .account-settings-grid > .account-socials-form,
  .account-settings-grid > .account-pro-form { grid-column: 1 / -1; }
}

/* Profile Emblem picker (account-settings.js loadEmblemPicker) */
.emblem-picker { display: flex; flex-direction: column; gap: 8px; }
.emblem-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease; }
.emblem-option:hover { border-color: var(--border-strong); }
.emblem-option.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.emblem-option-none { width: 30px; height: 42px; flex-shrink: 0; border-radius: 6px 6px 14px 14px; border: 1px dashed var(--border-strong); }
.emblem-option-text { display: flex; flex-direction: column; min-width: 0; }
.emblem-option-text strong { font-size: 13px; }
.emblem-option-text span { font-size: 11.5px; color: var(--muted-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emblem-empty { color: var(--muted); font-size: 12.5px; margin: 0; }

/* PaceFC logo mark (images/brand/logo-mark.svg), drawn on the dark page. */
.brand-mark {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}
:root[data-theme="light"] .brand-mark { content: url("../images/brand/logo-mark-light.svg"); }

/* Wordmark from the brand kit: Outfit Bold, uppercase, #F0F0F0. */
.brand-name {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 1;
  min-width: 0;
}

.header-search {
  position: relative;
  flex: 1 1 240px;
  max-width: 240px;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

/* Typing widens the box so the whole query shows, even when the header has
   squeezed it down to its minimum. */
.header-search:focus-within {
  border-color: var(--border-strong);
  flex-basis: 320px;
  min-width: min(320px, 45vw);
  max-width: 320px;
}
.header-search:focus-within kbd { display: none; }
.header-search svg { color: var(--muted-dim); flex-shrink: 0; }

.header-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--heading);
  font-size: 13.5px;
  font-family: inherit;
}

.header-search input::placeholder { color: var(--muted-dim); }

.header-search kbd {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--muted-dim);
  font-family: inherit;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-login {
  padding: 7px 16px;
  white-space: nowrap;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  border: none;
  transition: background 0.15s ease;
}

.btn-login:hover { background: var(--accent-dim); }

/* ---------- Spoiler mode ---------- */
.btn-spoiler {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-spoiler:hover { border-color: var(--border-strong); color: var(--text); }
.btn-spoiler svg { flex-shrink: 0; color: var(--win); transition: color 0.15s ease; }
.btn-spoiler strong { color: var(--win); font-weight: 800; }

body.spoilers-hidden .btn-spoiler svg,
body.spoilers-hidden .btn-spoiler strong { color: var(--loss); }

/* Light/dark switch (injected next to the spoiler button by script.js). */
.btn-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-theme:hover { border-color: var(--border-strong); color: var(--accent); }

/* Spoiler veil: an overlay that blurs/hides result-bearing cards until the
   viewer either flips global spoiler mode on, or clicks the veil to reveal
   just that one card. Any element can opt in via .has-spoiler. */
.has-spoiler { position: relative; }

.spoiler-veil {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Lighter than the darkest page background (--bg) on purpose — on a plain
     row (e.g. a compact news list) a near-black veil over an already near-black
     background was invisible, leaving just bare text with no sense of "covered". */
  background: rgba(var(--surface-3-rgb), 0.94);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: inherit;
  box-sizing: border-box;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  padding: 8px;
}

.spoiler-veil svg { color: var(--muted); transition: color 0.15s ease; }
.spoiler-veil:hover { color: var(--text); }
.spoiler-veil:hover svg { color: var(--accent); }

/* A veil with its own safe photo/title (see spoilerVeilHtml): the safe photo fills
   the space instead of a blur, with the title readable over a bottom fade — the
   same shape as a normal news card, just standing in for the real one. */
.spoiler-veil-safe {
  background: var(--surface-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
}
.spoiler-veil-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.spoiler-veil-safe-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.05) 40%, rgba(var(--bg-rgb), 0.88) 100%); }
.spoiler-veil-safe-text { position: relative; z-index: 1; padding: 10px 12px; margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.spoiler-veil-safe-title { font-size: 13px; font-weight: 800; color: var(--heading); text-transform: none; letter-spacing: normal; line-height: 1.3; }
.spoiler-veil-hint { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.spoiler-veil-hint svg { flex-shrink: 0; color: var(--muted-dim); }

body.spoilers-hidden .has-spoiler .spoiler-veil { display: flex; }
.has-spoiler.revealed .spoiler-veil { display: none !important; }

/* ---------- Search dropdown ---------- */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* Wider than the (narrow) search box so names stay on one line. */
  width: max(100%, 360px);
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  max-height: min(520px, 70vh);
  overflow-y: auto;
  box-shadow: var(--popup-shadow);
  z-index: 150;
}

.search-dropdown[hidden] { display: none; }

/* Phones: the search collapses to a magnifier button; tapping it (initSearch
   adds .is-expanded) opens a full-width bar over the header row, with the
   results full-width underneath. */
@media (max-width: 600px) {
  .header-row { position: relative; }
  .header-right .header-search {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 0;
    justify-content: center;
    cursor: pointer;
  }
  .header-search:not(.is-expanded) input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
  .header-search kbd { display: none; }
  .header-right .header-search.is-expanded {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 13px;
    width: auto;
    max-width: none;
    padding: 0 12px;
    justify-content: flex-start;
    z-index: 160;
    border-color: var(--border-strong);
    cursor: text;
  }
  /* 16px stops iOS zooming the page when the box is focused. */
  .header-search input { font-size: 16px; }
  .header-search.is-expanded .search-dropdown { width: 100%; max-width: none; max-height: calc(100vh - 90px); }
  .search-result-row { padding: 11px 14px; }
  /* Room for the language button: header icons only, tighter gaps. The
     spoiler icon's red/green still shows the state. */
  .header-right { gap: 8px; }
  .lang-trigger #langCurrentLabel { display: none; }
  .lang-trigger { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
  .btn-spoiler { width: 38px; padding: 0; justify-content: center; }
  .btn-spoiler > span { display: none; }
  .lang-dropdown-menu { right: 0; left: auto; }
}

.search-group-label {
  padding: 10px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
}

.search-result-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: none;
  border: none;
  text-align: start;
  transition: background 0.1s ease;
}

/* No box-shadow glow here (unlike the rest of the "row" family) — this
   row isn't individually rounded and sits inside a rounded dropdown, so an
   outset glow would poke past the dropdown's own corners. */
.search-result-row:hover, .search-result-row.is-kb-active { background: var(--row-hover-bg); }

.search-result-avatar {
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.search-result-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-result-row .rname, .search-result-row .rsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-row .rname { font-size: 14px; font-weight: 600; color: var(--heading); }
.search-result-row .rsub { font-size: 11px; color: var(--muted-dim); margin-top: 1px; }
.search-result-avatar.is-flag { border-radius: 4px; background: none; }
.search-result-avatar.is-flag img { width: 100%; height: auto; }

.search-empty { padding: 20px 14px; text-align: center; font-size: 12px; color: var(--muted-dim); }

/* ---------- Intro ---------- */
.intro { padding: 36px 0 28px; }

.eyebrow {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 12px;
}

.intro h1 {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  max-width: 640px;
}

.intro-sub {
  max-width: 620px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

.data-attribution {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted-dim);
}

.data-attribution a { color: var(--accent); }
.data-attribution a:hover { color: var(--accent-dim); }

.futrankings-placeholder {
  max-width: 440px;
  margin: 24px auto 0;
  padding: 48px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.frp-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--surface-3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.futrankings-placeholder .eyebrow { margin-bottom: 8px; }
.futrankings-placeholder h3 { font-size: 22px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.futrankings-placeholder p:last-child { color: var(--muted); font-size: 14px; margin-top: 12px; }
.futrankings-placeholder p:last-child a { color: var(--accent); }

/* ---------- Player profile ---------- */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  /* Same 10px used between the Compare / socials / points rows above, so
     the tabs sit right under Ranking Points. */
  margin-bottom: 10px;
}

.profile-header-main { flex: 1; min-width: 0; }
.profile-header-top { display: flex; align-items: flex-start; gap: 20px; }

.profile-avatar-box {
  position: relative;
  overflow: visible;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.profile-avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 800;
  font-size: 32px;
}

.profile-avatar-box .avatar-photo { border-radius: 14px; }
.profile-avatar-box.has-photo .profile-avatar-fallback { display: none; }

.profile-avatar-rank {
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

.profile-avatar {
  position: relative;
  overflow: hidden;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 32px;
  flex-shrink: 0;
}

.profile-org-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.profile-org-badge.official { color: var(--win); background: rgba(92, 224, 138, 0.12); }

.profile-heading { flex: 1; min-width: 0; padding-top: 4px; }
.profile-heading h1 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.profile-bio-line { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
/* Player / Coach switch beside the name (two-role profiles, supabase/player_second_role.sql). */
.profile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.profile-role-switch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.profile-role-btn { background: none; border: 0; color: var(--muted); font: 600 12.5px var(--font); padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.profile-role-btn:hover { color: var(--text); }
.profile-role-btn.active { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.profile-real-name { color: var(--text); font-weight: 600; }
.affil-note { color: var(--muted); font-size: .92em; }
.profile-age { cursor: help; }
.profile-birthday { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.profile-aka { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.profile-aka strong { color: var(--text); font-weight: 600; }
/* Admin-set ban (supabase/player_banned.sql). */
.profile-banned { display: flex; align-items: center; gap: 7px; color: var(--loss, #e5484d); font-size: 13px; font-weight: 600; margin-top: 6px; }
.profile-banned-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--loss, #e5484d); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
/* Single checkbox row in the Edit profile form. */
.pro-form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; margin: 4px 0 8px; }
.pro-form-check input { margin-top: 2px; accent-color: var(--loss, #e5484d); flex: none; }

/* Socials sit beside Compare (one row) with Ranking Points underneath, so
   this column is about as tall as the avatar block and doesn't push the
   tabs down. An admin's extra "Edit profile" button gets its own row above. */
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 300px;
  flex-shrink: 0;
}
.profile-actions > .admin-edit-btn { order: 0; width: 100%; margin-right: 0; }
.profile-actions > .profile-socials { order: 1; }
.profile-actions > .btn-compare-link { order: 2; }
.profile-actions > .profile-points { order: 3; flex-basis: 100%; }

.btn-compare-link {
  padding: 9px 18px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s ease;
}

.btn-compare-link:hover { background: var(--accent-dim); }

.profile-points { text-align: right; }
.profile-points-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); font-weight: 700; }
.profile-points-value { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.profile-points-unit { font-size: 11px; font-weight: 700; color: var(--muted-dim); margin-left: 4px; }

.profile-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  overflow-x: auto;
}

.profile-tab {
  padding: 12px 4px;
  margin-right: 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.profile-tab:hover { color: var(--text); }
.profile-tab.active { color: var(--heading); border-bottom-color: var(--accent); }

.profile-subhead {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-dim);
  margin: 10px 0;
}

.profile-tab-panel > .profile-subhead:first-child { margin-top: 0; }

.profile-match-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.profile-match-search:focus-within { border-color: var(--border-strong); }
.profile-match-search svg { color: var(--muted-dim); flex-shrink: 0; }

.profile-match-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--heading);
  font-size: 13.5px;
  font-family: inherit;
}

.profile-match-search input::placeholder { color: var(--muted-dim); }

.profile-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.profile-empty-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 28px; }
.profile-empty-icon svg { color: var(--muted-dim); }
.profile-empty-icon p { color: var(--muted-dim); font-size: 13.5px; }

/* Settings tab: a segmented sub-tab bar (icon + label pills in one bordered
   strip) above a per-tab empty state — distinct from the pill-style .tabs
   used elsewhere, which are centered and don't carry icons. */
.profile-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}

.profile-subtab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.profile-subtab svg { flex-shrink: 0; }
.profile-subtab:hover { color: var(--text); }
.profile-subtab.active { background: var(--surface-3); color: var(--heading); }

/* Trophy strip, inline with the Ranking Points block (see
   loadPlayerTitles()) — hidden entirely (profileTrophiesHtml returns '')
   when a player has no titles. */
.profile-trophies { display: flex; align-items: center; margin-top: 12px; }
.profile-trophy-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.profile-trophy {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
  text-decoration: none;
}
a.profile-trophy:hover { border-color: var(--accent); color: var(--accent); }
.profile-trophy img { object-fit: contain; padding: 4px; }
.profile-trophy.has-photo .profile-trophy-fallback { display: none; }
.spoiler-veil.profile-trophy-veil { padding: 0; border: none; background: var(--surface-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
.profile-trophy-year {
  position: absolute;
  right: -1px;
  bottom: -1px;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  color: #1a1300;
  background: linear-gradient(160deg, #ffd873, #f0a93a);
  padding: 2px 3px;
  border-radius: 5px 0 4px 0;
}

.profile-socials { display: flex; gap: 12px; }

.profile-socials a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.profile-socials a:hover { color: var(--accent); border-color: var(--accent); }

/* No link set: same shape, dimmed, and not interactive. */
.profile-socials .social-disabled {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-dim);
  opacity: 0.45;
  cursor: not-allowed;
  user-select: none;
}

/* Admin: the same icons as click-to-edit buttons; dimmed until a link is set. */
.profile-socials .admin-social {
  width: 38px;
  height: 38px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.profile-socials .admin-social.is-linked { border-style: solid; border-color: var(--border); color: var(--muted); }
.profile-socials .admin-social:hover { color: var(--accent); border-color: var(--accent); }

.achievements-list { display: flex; flex-direction: column; gap: 10px; }

.achievement-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.achievement-icon { font-size: 20px; }
.achievement-title { font-size: 14px; font-weight: 700; color: var(--heading); }
.achievement-date { font-size: 12px; color: var(--muted-dim); margin-top: 2px; }

.profile-cross-link { display: inline-block; }

.profile-back-link { display: inline-block; margin-bottom: 24px; }
.profile-back-link[hidden] { display: none; }

/* ---------- Player profile: Overview tab ---------- */

.profile-overview-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.profile-overview-col { display: flex; flex-direction: column; gap: 10px; }

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.profile-card-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); }
.profile-card-subtitle { font-size: 11.5px; color: var(--muted-dim); margin-top: 2px; margin-bottom: 12px; }
.profile-card-title-row { display: flex; align-items: center; justify-content: space-between; }

.profile-stats-range {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
}

/* Recent Matches list */
.profile-match-list { display: flex; flex-direction: column; margin-top: 10px; }

.profile-match-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  border-top: 1px solid var(--border);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.profile-match-list .profile-match-row:first-child { border-top: none; }
.profile-match-row:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }

.pmr-result {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--surface-3);
  color: var(--muted);
}

.profile-match-row.win .pmr-result { background: rgba(92, 224, 138, 0.16); color: var(--win); }
.profile-match-row.loss .pmr-result { background: rgba(242, 114, 114, 0.16); color: var(--loss); }
.profile-match-row.draw .pmr-result { background: rgba(255, 152, 56, 0.16); color: #ff9838; }

.pmr-avatar {
  position: relative;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.pmr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pmr-name { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmr-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted-dim); overflow: hidden; }
.pmr-meta img { width: 13px; height: 13px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.pmr-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Profile match row under spoiler mode: an inline pill replaces the opponent's
   name, and the W/L badge, avatar and score blank out — the tournament line
   (.pmr-meta) stays readable. */
.spoiler-veil.pmr-veil {
  position: static;
  align-self: flex-start;
  flex-direction: row;
  gap: 5px;
  padding: 2px 8px;
  margin-bottom: 2px;
  border-radius: 5px;
  font-size: 10px;
}
.spoiler-veil.pmr-veil svg { width: 12px; height: 12px; }
body.spoilers-hidden .pmr-spoiler:not(.revealed) .pmr-name,
body.spoilers-hidden .pmr-spoiler:not(.revealed) .pmr-score-wrap { display: none; }
body.spoilers-hidden .pmr-spoiler:not(.revealed) .pmr-result,
body.spoilers-hidden .pmr-spoiler:not(.revealed) .pmr-avatar { background: var(--surface-3); color: transparent; }
body.spoilers-hidden .pmr-spoiler:not(.revealed) .pmr-avatar > * { visibility: hidden; }

/* Team crest inline before a team name (see teamNameHtml) — dropped into
   table cells, the profile bio line and compare rows alike. */
.flag-inline {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: -3px;
  margin-right: 6px;
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.12);
}
/* The Vatican's flag is square — a 20×15 box crops it oddly. (Switzerland's
   is drawn 4:3 in script.js, SWISS_FLAG.) */
.flag-inline[src*="/va.png"] { width: 15px; margin-left: 2.5px; margin-right: 8.5px; }

/* Logo + name as one unit so the logo never wraps onto its own line */
.team-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.team-inline .team-logo-inline {
  flex-shrink: 0;
  vertical-align: 0;
}

.team-logo-inline {
  width: 15px;
  height: 15px;
  object-fit: contain;
  border-radius: 3px;
  vertical-align: -3px;
  margin-right: 5px;
}

.pmr-score-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pmr-perf { font-size: 11px; font-weight: 800; color: var(--muted-dim); background: var(--surface-3); padding: 2px 7px; border-radius: 20px; }
/* Match rating badge, coloured by performanceTier() */
.pmr-perf.tier-elite { color: #3ee07a; background: rgba(62, 224, 122, 0.16); }
.pmr-perf.tier-great { color: #a3e05c; background: rgba(163, 224, 92, 0.14); }
.pmr-perf.tier-good { color: var(--draw); background: rgba(217, 176, 76, 0.14); }
.pmr-perf.tier-average { color: #f0975a; background: rgba(240, 151, 90, 0.14); }
.pmr-perf.tier-developing { color: var(--loss); background: rgba(242, 114, 114, 0.14); }
.pmr-score { font-size: 13px; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }

/* Player's News list */
.profile-news-list { display: flex; flex-direction: column; margin-top: 10px; }

.profile-news-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  transition: color 0.15s ease;
}

.profile-news-list .profile-news-row:first-child { border-top: none; }
.profile-news-row:hover .pnr-title { color: var(--accent); }

.pnr-title { font-size: 13px; font-weight: 600; color: var(--text); transition: color 0.15s ease; }
.pnr-date { flex-shrink: 0; font-size: 10.5px; color: var(--muted-dim); }

/* World Rank / Win Rate / Performance Rating row */
.profile-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.profile-quick-stat {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s ease;
}

a.profile-quick-stat:hover { border-color: var(--accent); }

.pqs-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); margin-bottom: 8px; }
.pqs-value { font-size: 26px; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; }
.pqs-value small { font-size: 12px; font-weight: 700; color: var(--win); margin-left: 4px; }

.pqs-bar { margin-top: 10px; height: 5px; border-radius: 20px; background: var(--surface-3); overflow: hidden; }
.pqs-bar > div { height: 100%; background: var(--accent); border-radius: 20px; }
.pqs-bar > div.tier-elite, .pqs-bar > div.tier-great { background: var(--win); }
.pqs-bar > div.tier-developing, .pqs-bar > div.tier-average { background: var(--loss); }

/* Performance Chart */
.profile-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  padding-top: 20px;
}

.profile-chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.pcb-value { font-size: 10.5px; font-weight: 800; color: var(--muted-dim); }
.pcb-track { flex: 1; width: 100%; max-width: 22px; display: flex; align-items: flex-end; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.pcb-fill { width: 100%; border-radius: 4px 4px 0 0; }
.pcb-fill.win { background: var(--win); }
.pcb-fill.loss { background: var(--loss); }

.pcb-avatar {
  position: relative;
  overflow: hidden;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

/* W / D / L result chip — Recent Form (profile) and Player of the Month,
   used while the PaceFC rating is hidden (PACEFC_RATING_ON in script.js). */
.form-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 800;
}
.form-chip.win { background: rgba(92, 224, 138, 0.16); color: var(--win); }
.form-chip.loss { background: rgba(242, 114, 114, 0.16); color: var(--loss); }
.form-chip.draw { background: rgba(217, 176, 76, 0.16); color: var(--draw); }

/* Recent Form: last 10 results, oldest → newest */
.profile-form-row { position: relative; display: flex; gap: 8px; padding-top: 14px; }
.profile-form-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-radius: 8px; transition: background 0.15s ease; }
.profile-form-col:hover { background: var(--surface-3); }
.pfc-score { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Record (W–D–L) split bar */
.pqs-record-bar { display: flex; }
.pqs-record-bar > div { border-radius: 0; }
.pqs-record-bar > div.win { background: var(--win); }
.pqs-record-bar > div.draw { background: var(--draw); }
.pqs-record-bar > div.loss { background: var(--loss); }

/* Performance Stats grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 14px;
}

.psg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.profile-stats-grid .psg-row:nth-child(-n+2) { border-top: none; }
.psg-row span { color: var(--muted); }
.psg-row b { color: var(--heading); font-weight: 800; }
.psg-row b em { color: var(--muted-dim); font-weight: 600; font-style: normal; font-size: 11.5px; }

/* In-Game Settings sub-tab: the full EA SPORTS FC options schema, grouped
   like the game's own settings menu (see INGAME_SETTINGS_SCHEMA). */
.ingame-settings-group { margin-bottom: 10px; }
.ingame-settings-group:last-child { margin-bottom: 0; }
.ingame-settings-group-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 4px;
}
.ingame-settings-group .profile-stats-grid b { color: var(--muted-dim); font-weight: 700; }

/* Profiles sub-tab: Gear grid (see GEAR_CATEGORIES) — one card per
   category, generic icon + "Not set" until a real entry exists. */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.gear-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.gear-card.has-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.gear-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
}
.gear-card-info {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gear-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--surface-3);
  color: var(--heading);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
}
.gear-card-icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-dim);
}
.gear-card-icon.has-photo svg { display: none; }
/* Product shots fit whole inside the card, clear of the info/category badges,
   on a white tile so store photos' white backgrounds blend in. */
.gear-card-icon.has-photo { background: #fff; }
.gear-card-info, .gear-card-badge { z-index: 1; }
.gear-card-icon .avatar-photo {
  object-fit: contain;
  padding: 34px 12px 12px;
  box-sizing: border-box;
}
.gear-card-name {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.gear-card-name.is-empty { color: var(--muted-dim); font-weight: 600; font-style: italic; }

/* Hover overlay on the photo, shown only when there's a purchase link — the
   whole card is the <a> (see gearCardHtml), this is just its visual cue. */
.gear-card-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bg-rgb), 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}
a.gear-card.has-link:hover .gear-card-hover { opacity: 1; }
.gear-card-hover-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Editor: one row per gear category — a small photo + its name and purchase link. */
.gear-field-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.gear-field { display: flex; gap: 12px; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.gear-field-photo { position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.gear-field-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-strong); }
.gear-field-photo-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gear-field-photo-btn:hover { color: var(--heading); border-color: var(--accent); }
.gear-field-photo-btn.is-busy { opacity: 0.5; pointer-events: none; }
.gear-field-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}
.gear-field-photo-remove:hover { color: var(--heading); border-color: var(--accent); }
.gear-field-inputs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gear-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-dim); }
.gear-field-inputs input {
  height: 34px;
  padding: 0 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--heading);
  font-size: 13px;
  font-family: inherit;
}
.gear-field-inputs input:focus { border-color: var(--border-strong); outline: none; }
.gear-field-status { font-size: 11px; font-weight: 600; color: var(--muted); }
.gear-field-status.is-error { color: var(--draw); }

/* Tournament editor: logo/trophy upload squares side by side (reuses the
   gear-field-photo square above), and the competitor roster as removable
   chips above the match list — see admin-edit.js's tourney/match editors. */
.admin-edit-photo-row { display: flex; gap: 20px; margin-bottom: 14px; }
.admin-edit-photo-field { display: flex; flex-direction: column; gap: 6px; }
.admin-edit-photo-field .gear-field-photo { width: 64px; height: 64px; }
.tourney-competitor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.tourney-competitor-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--heading);
}
.tourney-competitor-chip button {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px; line-height: 1;
}
.tourney-competitor-chip button:hover { color: #fff; background: var(--loss); }

/* Custom Tactics sub-tab: template formation board (see TACTICS_BOARD_FORMATION) —
   pitch graphic is a fixed dark-green visual regardless of site theme. */
.tactics-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tactics-board-caption { margin: 0; font-size: 12.5px; color: var(--muted); }
.tactics-board {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  background: #0d1f16;
  border-radius: 16px;
}
.tactics-board-pitch {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(ellipse at 50% 6%, rgba(255,255,255,0.06), transparent 55%),
    repeating-linear-gradient(180deg, #17402c 0px, #17402c 11%, #123423 11%, #123423 22%);
}
.tactics-pitch-box {
  position: absolute;
  left: 50%;
  width: 38%;
  height: 15%;
  margin-left: -19%;
  border: 2px solid rgba(255,255,255,0.16);
}
.tactics-pitch-box-top { top: 5%; border-top: none; }
.tactics-pitch-box-bottom { bottom: 5%; border-bottom: none; }
.tactics-pitch-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 50%;
}
.tactics-pitch-halfway {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 2px;
  background: rgba(255,255,255,0.16);
}
.tactics-board-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.055);
  pointer-events: none;
}
.tactics-board-cards { position: absolute; inset: 0; }
.tactics-card {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
}
.tactics-card-shield {
  width: 100%;
  height: 112px; /* every card is the same size, whatever the role name */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px 16px;
  background: linear-gradient(160deg, #232323, #0b0b0b);
  border: 1px solid rgba(255,255,255,0.14);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  text-align: center;
}
.tactics-card-avatar {
  width: 32px;
  height: 32px;
  margin: 0 auto 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
}
.tactics-card-role {
  margin: 0;
  width: 100%;
  height: 30px; /* room for two lines; one-line names sit in the middle */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.tactics-card-style {
  margin: 4px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tactics-card-pos {
  margin-top: -9px;
  font-size: 11px;
  font-weight: 800;
  color: #0c0c0c;
  background: #fff;
  padding: 2px 9px;
  border-radius: 20px;
  border: 2px solid #0c0c0c;
  white-space: nowrap;
}

.tactics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

/* Tactics Info side panel — read-only display of the same template setup
   the board shows; editing is an admin-only role this site doesn't have
   yet, so there's no control here, just the values and a note. */
.tactics-info-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.tactics-info-head { margin-bottom: 12px; position: relative; padding-right: 34px; }
.tactics-cog {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.avatar-edit-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.92);
  color: var(--heading);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.avatar-edit-btn:hover { border-color: var(--accent); background: var(--surface-3); }
.avatar-edit-btn.is-busy { opacity: 0.5; cursor: progress; }
.profile-avatar-box { position: relative; }
.photo-crop-modal { max-width: 320px; }
.photo-crop-modal h3 { margin: 0 0 4px; }
.photo-crop-stage {
  margin: 0 auto 14px;
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.photo-crop-stage:active { cursor: grabbing; }
.photo-crop-stage canvas { display: block; width: 100%; height: 100%; }
.photo-crop-zoom { width: 100%; margin: 0 0 16px; accent-color: var(--accent); }
.avatar-pending-note { margin: 6px 0 0; max-width: 130px; font-size: 10.5px; line-height: 1.35; font-weight: 700; color: #ffcc4d; }
.admin-photo-claim { align-items: center; }
.admin-photo-preview { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-strong); display: block; }
.admin-gear-add-photo { cursor: pointer; }
.admin-gear-add-photo.is-busy { opacity: 0.6; pointer-events: none; }
/* Admin Inbox → Gear products: add a product once, it fills every matching profile. */
.admin-gear-product { margin-bottom: 18px; }
.admin-gear-photo-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.admin-gear-photo-preview { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.admin-gear-photo-preview[hidden] { display: none; }
.admin-gear-matches { margin: 0 0 12px; line-height: 1.5; }
.admin-gear-matches:empty { display: none; }
.admin-gear-sub { font-size: 13px; color: var(--muted); font-weight: 700; margin: 18px 0 8px; }
.admin-gear-thumb { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; flex-shrink: 0; }

.tactics-cog:hover { color: var(--heading); border-color: var(--border-strong); }
.news-article { position: relative; }
.news-link { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb), 0.35); transition: border-color 0.15s ease, color 0.15s ease; }
.news-link:hover { color: var(--heading); border-bottom-color: var(--accent); }
.article-edit-cog { top: 2px; right: 0; }
.tactics-info-head h4 { margin: 0 0 3px; font-size: 14px; font-weight: 800; color: var(--text); }
.tactics-info-head p { margin: 0; font-size: 11.5px; color: var(--muted-dim); }
.tactics-info-panel .match-tactics-row { margin-bottom: 14px; flex-wrap: wrap; padding: 10px; gap: 4px 8px; }
/* The label is never cut off; the code + copy button stay together and only drop to a second line if there truly isn't room. */
.tactics-info-panel .match-tactics-name { flex: 0 0 auto; overflow: visible; font-size: 12.5px; }
.match-tactics-value { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 auto; }
.tactics-info-panel .match-tactics-code { flex: 0 0 auto; font-size: 11.5px; }
.tactics-info-grid { grid-template-columns: 1fr; margin-bottom: 14px; margin-top: 0; }
.tactics-info-grid .psg-row:nth-child(-n+2) { border-top: 1px solid var(--border); }
.tactics-info-grid .psg-row:first-child { border-top: none; }
.tactics-depth-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.tactics-depth-label span { color: var(--muted); }
.tactics-depth-label b { color: var(--text); font-weight: 700; }
.tactics-depth-track {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.tactics-depth-fill { height: 100%; background: var(--accent); border-radius: 4px; }

/* ---------- Match detail page ---------- */

.match-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.match-detail-header .profile-back-link { margin-bottom: 0; }

.match-detail-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px 5px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}

a.match-detail-chip:hover { border-color: var(--accent); color: var(--accent); }
.match-detail-chip img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }

.match-detail-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.match-detail-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }

.match-detail-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.match-detail-status.status-running { background: rgba(242, 114, 114, 0.16); color: var(--loss); }
.match-detail-status.status-finished { background: var(--surface-3); color: var(--muted); }

.match-detail-stream {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}

.match-detail-stream svg { margin-left: 2px; }
.match-detail-stream:hover { background: var(--accent); color: var(--on-accent); }

.match-detail-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.match-detail-side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; transition: transform 0.15s ease; }
a.match-detail-side:hover { transform: translateY(-2px); }
a.match-detail-side:hover strong { color: var(--accent); }

.match-detail-avatar {
  position: relative;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.match-detail-avatar.winner { border-color: var(--win); box-shadow: 0 0 0 4px rgba(92, 224, 138, 0.18); }

.match-detail-side strong { font-size: 16px; font-weight: 800; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; }
.match-detail-side strong.winner { color: var(--heading); }
.match-detail-team { font-size: 11.5px; color: var(--muted-dim); }

.match-detail-score { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px; flex-shrink: 0; }
.match-detail-score > span { font-size: 36px; font-weight: 800; color: var(--muted-dim); font-variant-numeric: tabular-nums; }
.match-detail-score > span.winner { color: var(--heading); }
.match-detail-score .mds-sep { font-size: 24px; color: var(--muted-dim); }
.match-detail-score p { width: 100%; text-align: center; font-size: 11px; color: var(--muted-dim); margin-top: 2px; }
.match-detail-score p.match-detail-pens { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 0; }

.match-detail-section { margin-bottom: 24px; }

.match-detail-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

.match-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

.match-side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--heading);
}

.match-side-card .profile-empty { border: none; border-radius: 0; }

/* Match page Squads Used: attached under the score card, each squad under its player —
   head, pitch, tactics code footer. */
.match-detail-card.has-squads { border-radius: 12px 12px 0 0; }
.match-detail-squads { background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; margin-bottom: 24px; }
.match-detail-squads-label { padding: 10px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.match-detail-squads-grid { display: grid; grid-template-columns: 1fr 1fr; }
.match-detail-squads-grid .match-squad-card { border: none; border-radius: 0; background: none; }
.match-detail-squads-grid .match-squad-card + .match-squad-card { border-left: 1px solid var(--border); }
/* A VBL tie's four players: two rows of two. */
.match-detail-squads-grid .match-squad-card:nth-child(odd) { border-left: none; }
.match-detail-squads-grid .match-squad-card:nth-child(n+3) { border-top: 1px solid var(--border); }
/* A VBL tie's player match-ups (G1, G2), between the score card and the squads. */
.match-detail-matchups { position: relative; background: var(--surface); border: 1px solid var(--border); border-top: none; overflow: hidden; }
.match-detail-matchups:last-child { border-radius: 0 0 12px 12px; margin-bottom: 24px; }
.match-mu-row { display: grid; grid-template-columns: 34px 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 14px; }
.match-mu-row + .match-mu-row { border-top: 1px solid var(--border); }
.match-mu-no { font-size: 11px; font-weight: 800; color: var(--muted-dim); letter-spacing: 0.05em; }
.match-mu-player { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 13.5px; }
.match-mu-player.is-b { flex-direction: row-reverse; text-align: right; }
.match-mu-player.winner { color: var(--heading); }
a.match-mu-player:hover .match-mu-name { color: var(--accent); }
.match-mu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-mu-avatar { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 800; }
.match-mu-avatar .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.match-mu-score { font-size: 15px; font-weight: 800; color: var(--heading); white-space: nowrap; }
.match-squad-body .meta-board .tactics-board-cards { inset: 7% 4% 3% 4%; }
/* Players stay side by side at every width (smaller on phones); the squads only stack
   on phones, where two pitches side by side would be too small to read. */
@media (max-width: 560px) {
  .match-detail-squads-grid { grid-template-columns: 1fr; }
  .match-detail-squads-grid .match-squad-card + .match-squad-card { border-left: none; border-top: 1px solid var(--border); }
  .match-mu-row { grid-template-columns: 24px 1fr auto 1fr; gap: 6px; padding: 9px 10px; }
  .match-mu-player { font-size: 12.5px; gap: 6px; }
  .match-mu-avatar { width: 24px; height: 24px; font-size: 10.5px; }
  .match-detail-versus { gap: 8px; }
  .match-detail-avatar { width: 52px; height: 52px; }
  .match-detail-side strong { font-size: 13px; }
  .match-detail-score { gap: 6px; }
  .match-detail-score > span { font-size: 28px; }
  .match-squad-card .match-side-card-head { padding: 10px; font-size: 12px; flex-wrap: wrap; }
  .match-squad-card .match-tactics-row { padding: 8px 10px; flex-wrap: wrap; }
}
.match-squad-card { display: flex; flex-direction: column; border-radius: 12px; }
.match-squad-card .match-side-card-head { padding: 12px 14px; font-size: 14px; }
.match-squad-formation { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.match-squad-formation[hidden] { display: none; }
.match-squad-body { flex: 1 1 auto; }
.match-squad-body .meta-board, .match-squad-body .tactics-board-pitch { border-radius: 0; border: none; }
.match-squad-card .match-tactics-row { border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 10px 14px; }
.match-squad-card .match-tactics-name { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Compact "name + code + copy" row (see matchTacticsCardHtml) — no real
   tactics-code source yet, so the code slot reads "No code available"
   and the copy button stays disabled until one exists. */
.match-tactics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

/* The label gives way first, so the code and its copy button always stay together on one line. */
.match-tactics-name { font-size: 13px; font-weight: 700; color: var(--heading); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.match-tactics-code {
  flex: 1 0 auto; /* never shrinks: the whole code is always shown */
  white-space: nowrap;
  user-select: all;
  font-size: 12px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: var(--text);
  text-align: right;
}

.match-tactics-code.is-empty { color: var(--muted-dim); font-family: inherit; font-style: italic; }

.match-tactics-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.match-tactics-copy:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.match-tactics-copy:disabled { opacity: 0.4; cursor: default; }
/* Labelled "Copy" button; the compact (icon-only) one sits in tables. */
.match-tactics-copy:not(.is-compact) { width: auto; gap: 5px; padding: 0 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.match-tactics-copy.is-compact { width: 24px; height: 24px; cursor: pointer; }
.match-tactics-copy.is-copied { border-color: var(--win); color: var(--win); }
.settings-code-cell { display: inline-flex; align-items: center; gap: 6px; }
.settings-code-cell .match-tactics-code { flex: 0 0 auto; text-align: start; }

/* ---------- Tournament detail page ---------- */
.tournament-header { display: flex; align-items: center; gap: 20px; }

.tournament-header-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.tournament-header-logo img { max-width: 68%; max-height: 68%; object-fit: contain; }

.tournament-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; position: relative; }
.tournament-title-row h1 { margin: 0; }
/* Important info (settings.notes): red ⓘ by the name, opens a popover. */
.tourney-info-wrap { position: relative; display: inline-flex; }
.tourney-info-wrap[hidden] { display: none; }
.tourney-info-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border: 1px solid color-mix(in srgb, var(--loss) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); font: 700 12.5px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.tourney-info-btn:hover, .tourney-info-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--loss) 24%, transparent); border-color: var(--loss); }
.tourney-info-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-strong); border-top: 3px solid var(--loss); border-radius: 12px; padding: 12px 16px 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.tourney-info-pop[hidden] { display: none; }
.tourney-info-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--loss); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.tourney-info-close { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tourney-info-close:hover { color: var(--heading); }
.tourney-info-body { color: var(--text); font-size: 14px; line-height: 1.5; }
.tourney-info-body p { margin: 0; }
.tourney-info-body ul { margin: 0; padding-left: 18px; }
.tourney-info-body li + li { margin-top: 4px; }
@media (max-width: 900px) {
  /* Anchor to the whole title row so the popover never runs off-screen. */
  .tourney-info-wrap { position: static; }
  .tourney-info-pop { width: 100%; max-width: 420px; }
}
#tournamentMeta.intro-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
#tournamentMeta .tourney-meta-row { margin-bottom: 0; }

/* Compact stat row under the header (Players / Prize / Location), and a
   top tab bar (Overview / Pick'ems / Stats) for the sections below —
   replaces the earlier sidebar layout. */
.tournament-stat-row { display: flex; gap: 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.tournament-stat-row[hidden] { display: none; }
/* Tournament page: just a divider under the title + meta line, with the
   tabs pulled up close beneath it. */
.tournament-header-divider { margin-top: 18px; border-top: 1px solid var(--border); }
.tournament-header-divider[hidden] { display: none; }
.tournament-intro { padding-top: 18px; padding-bottom: 0; }
/* Back link sits as a small crumb right above the title instead of
   pushing the whole header down with its own 24px gap. */
.tournament-intro .profile-back-link { margin-bottom: 10px; font-size: 13px; }
.tournament-intro + .section-top-tight { padding-top: 18px; }
.tournament-stat-value { display: block; font-size: 16px; font-weight: 800; color: var(--heading); }
.tournament-stat-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); margin-top: 2px; }

.tournament-tabs { max-width: 620px; margin-bottom: 20px; }
#tournamentContent[hidden] { display: none; }

/* Full Players tab list — same avatar/name convention as the Overview
   sidebar's compact Participants preview, plus a real per-tournament
   W-L record computed from match data. */
.tournament-players-full-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; margin: 0 -8px; border-radius: 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
a.tournament-players-full-row:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.tournament-players-full-row:last-child { border-bottom: none; }
.tournament-players-full-avatar { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--muted-dim); }
.tournament-players-full-name { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
.tournament-players-full-record { font-size: 11.5px; font-weight: 700; color: var(--muted-dim); }

/* Overview tab: narrow sidebar (Upcoming Matches, Event's News) + main
   column (Tournament Stages breakdown, Top Players, Most Used Cards). */
.tournament-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
.tournament-side-card:last-child { margin-bottom: 0; }
.tournament-main-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.tournament-main-row .tournament-side-card { margin-bottom: 0; height: 100%; box-sizing: border-box; }

@media (max-width: 640px) {
  .tournament-main-row { grid-template-columns: 1fr; }
}
.tournament-side-card .section-label { margin: 0 0 14px; }
.tournament-overview-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.tournament-sidebar-col { position: sticky; top: 84px; }
.tournament-main-col { min-width: 0; }

.tournament-upcoming-row { display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px; border-bottom: 1px solid var(--border); transition: background 0.15s ease, box-shadow 0.15s ease; }
.tournament-upcoming-row:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.tournament-upcoming-row:last-child { border-bottom: none; }
.tournament-upcoming-date { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted-dim); text-transform: uppercase; }
.tournament-upcoming-teams { font-size: 12.5px; font-weight: 700; color: var(--text); }
.tournament-upcoming-vs { color: var(--muted-dim); font-weight: 600; font-size: 11px; margin: 0 4px; }

/* Featured next match — the first real upcoming/live fixture gets a big
   header treatment; anything after it drops to the compact row above. */
.upcoming-featured { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; margin: -8px -8px 2px; border-radius: 8px; border-bottom: 1px solid var(--border); transition: background 0.15s ease, box-shadow 0.15s ease; }
.upcoming-featured:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.upcoming-featured-side { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.upcoming-featured-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--muted-dim); }
.upcoming-featured-name { font-size: 11.5px; font-weight: 800; color: var(--text); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.upcoming-featured-center { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.upcoming-featured-time { display: flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 800; color: var(--heading); }
.upcoming-featured-date { font-size: 10.5px; font-weight: 700; color: var(--muted-dim); }

/* Champion card — shown in the same sidebar slot once a stage has no
   live/upcoming matches left, i.e. it's fully decided. */
.champion-card { display: flex; flex-direction: column; }
a.champion-card { transition: transform 0.15s ease; }
a.champion-card:hover { transform: translateY(-2px); }
a.champion-card:hover .champion-photo-wrap { box-shadow: 0 0 0 1px rgba(255, 183, 77, 0.4), 0 0 28px rgba(255, 159, 67, 0.5), 0 0 56px rgba(255, 159, 67, 0.22); }
.champion-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
  border: 1px solid rgba(255, 183, 77, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 183, 77, 0.25), 0 0 22px rgba(255, 159, 67, 0.35), 0 0 46px rgba(255, 159, 67, 0.16);
}
.champion-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.champion-photo-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 900; color: var(--muted-dim);
}
.champion-photo-wrap.has-photo .champion-photo-fallback { display: none; }
.champion-ribbon {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #ffd166, #ff9f43);
  color: #23180a;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* An admin-uploaded tournament trophy photo, when there is one, covers the
   default ribbon icon in the exact same corner rather than replacing the
   markup — see tournamentChampionHtml. */
.champion-ribbon-trophy {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 30px; height: 30px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.champion-photo-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--bg-rgb), 0.55) 75%, rgba(var(--bg-rgb), 0.92) 100%);
}
.champion-photo-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px;
}
.champion-name { font-size: 15px; font-weight: 800; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-team-logo { height: 30px; width: auto; max-width: 64px; flex-shrink: 0; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.champion-team-text { font-size: 11px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.tournament-recent-matches { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Tournament Stages — real matches grouped by their actual round (parsed
   from the match name PandaScore gives us, e.g. "Quarterfinal 2: X vs Y"),
   under a detected format badge (Group Stage / Swiss / Knockouts). No
   invented bracket seeding — just the real matches, sorted into the
   rounds they actually happened in. Overview gets a compact winner-only
   breakdown; the full match cards live on the Matches tab. */
.tournament-stages-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tournament-stages-head .section-label { margin: 0; }
.tournament-format-badge {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
}
.tournament-stages-actions { display: flex; align-items: center; gap: 10px; }

/* Matches / Players tab filter — a menu of sections that each open a
   searchable tick list (photo / crest / flag beside every option). */
.tourney-filter-icon-btn.match-filter-btn { width: auto; height: 30px; gap: 6px; padding: 0 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.match-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 18px; height: 18px; padding: 1.5px 5px 0; /* Inter digits ride high */
  border-radius: 9px;
  background: var(--accent); color: var(--bg);
  font-size: 10.5px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.match-filter-count[hidden] { display: none; }
.tourney-filter-popup.match-filter-popup { width: min(320px, calc(100vw - 32px)); min-width: 0; padding: 6px; gap: 0; }
.mf-view[hidden] { display: none; }
.mf-menu-list { display: flex; flex-direction: column; }
.mf-menu-row,
.mf-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  padding: 11px 10px; color: var(--text); text-align: start; cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: background 0.15s ease;
}
.mf-menu-row:last-child { border-bottom: 0; }
.mf-menu-row:hover,
.mf-item:hover { background: var(--surface-2); }
.mf-menu-label { flex: 1; }
.mf-menu-picked { font-size: 11px; font-weight: 700; color: var(--accent); }
.mf-menu-row svg { color: var(--muted); flex-shrink: 0; }
.mf-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 6px 10px; color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mf-back:hover { color: var(--accent); }
.mf-search { position: relative; display: flex; align-items: center; margin-bottom: 6px; }
.mf-search input {
  width: 100%; padding: 9px 34px 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--text); font-size: 13px;
}
.mf-search input:focus { outline: none; border-color: var(--accent); }
.mf-search svg { position: absolute; right: 11px; color: var(--muted); pointer-events: none; }
.mf-list { max-height: min(52vh, 380px); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.mf-item { padding: 8px 10px; }
.mf-item:last-of-type { border-bottom: 0; }
.mf-item[hidden] { display: none; }
.mf-item .stage-breakdown-avatar { width: 26px; height: 26px; font-size: 10px; }
.mf-item-logo { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mf-item-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mf-item-flag img { border-radius: 2px; }
.mf-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-check { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-2); position: relative; }
/* Ticked = the logo's ball: a plain solid yellow dot. */
.mf-item.active .mf-check { background: var(--accent); border-color: var(--accent); }
.mf-none { padding: 14px 10px; font-size: 12.5px; color: var(--muted); text-align: center; }
.mf-none[hidden] { display: none; }
.match-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 6px; margin-top: 4px; border-top: 1px solid var(--border); }
.match-filter-summary { font-size: 12px; color: var(--muted); }
.match-filter-clear { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.match-filter-clear:disabled { color: var(--muted-dim); cursor: default; }

.tournament-players-full-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.stage-breakdown-round { margin-bottom: 16px; }
.stage-breakdown-round:last-child { margin-bottom: 0; }
.stage-breakdown-round-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); margin-bottom: 8px; }
.stage-breakdown-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; border-bottom: 1px solid var(--border); position: relative; transition: background 0.15s ease, box-shadow 0.15s ease; }
.stage-breakdown-row:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.stage-breakdown-row:last-child { border-bottom: none; }
.stage-breakdown-side { display: flex; align-items: center; gap: 7px; flex: 1; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.stage-breakdown-side-b { flex-direction: row-reverse; text-align: right; }
.stage-breakdown-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-breakdown-side.winner { color: var(--text); font-weight: 800; }
.stage-breakdown-avatar { position: relative; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--muted-dim); }
.stage-breakdown-vs { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--muted-dim); text-transform: uppercase; }
.stage-breakdown-score { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--muted-dim); margin: 0 2px; }
.stage-breakdown-side.winner .stage-breakdown-score { color: var(--accent); }

/* Knockouts bracket — real columns per round, connector lines computed
   from actual rendered positions (see drawBracketConnectors), only drawn
   between rounds whose match counts are a verified 2:1 ratio. */
/* Tall brackets scroll inside their own box; the round names stay pinned
   to its top edge so you always know which round you're looking at. */
.tournament-bracket-wrap { overflow: auto; max-height: min(78vh, 720px); margin: -4px; padding: 0 4px 4px; overscroll-behavior: contain; }
/* Small brackets (≤8 matches a round) show in full — no inner scrollbar. */
.tournament-bracket-wrap.fits { max-height: none; overflow-y: hidden; }
/* Columns stretch to fill the card and shrink (down to 150px) before the
   bracket falls back to scrolling sideways. */
.tournament-bracket { display: flex; gap: 32px; position: relative; width: max-content; min-width: 100%; }
/* Round label + matches fill the column without spilling past it (which
   made the bracket scroll vertically by a label's height). */
.bracket-col { flex: 1 0 150px; max-width: 220px; display: flex; flex-direction: column; }
.bracket-col .stage-breakdown-round-label {
  position: sticky; top: 0; z-index: 3;
  white-space: nowrap; text-align: center;
  margin: 0 -16px 6px; padding: 8px 16px 6px;
  background: var(--surface);
}
.bracket-col:last-child .stage-breakdown-round-label { margin-right: 0; padding-right: 0; }
/* Every round name is clickable (initBracketRoundNav): PC shows from that
   round on, phones swipe to it. */
.bracket-col .stage-breakdown-round-label.is-clickable { cursor: pointer; transition: color 0.15s; }
.bracket-col .stage-breakdown-round-label.is-clickable:hover { color: var(--heading); }
.bracket-col .stage-breakdown-round-label.is-clickable:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: -2px; border-radius: 6px; }
.bracket-col .stage-breakdown-round-label.is-active { color: var(--accent); }
/* PC chevron by each round name: « hides that round (and earlier ones),
   » +N on the first shown round brings them back. */
.bracket-round-toggle {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle;
  height: 18px; min-width: 18px; padding: 0 4px; margin: -3px 5px 0 0;
  border: 1px solid var(--border-strong); border-radius: 5px;
  background: var(--surface-2); color: var(--muted);
  font: inherit; font-size: 9.5px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.bracket-round-toggle:hover, .bracket-round-toggle:focus-visible { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.1); outline: none; }
.bracket-round-toggle.is-expand { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.1); }
.bracket-round-toggle svg { flex: none; }
/* Sideways pyramid: each match gets an equal share of the column's height
   (space-around + 6px either side = the 12px gap in the busiest round), so
   a later-round match sits level with the middle of the two feeding it. */
.bracket-col-items { display: flex; flex-direction: column; justify-content: space-around; flex: 1; min-height: 0; }
.bracket-col-items > * { margin: 6px 0; }
/* The Grand Final column keeps its 3rd Place Match right under it. */
.bracket-col-items:has(> .bracket-third) { justify-content: center; }
.bracket-col-items > .bracket-third { margin-top: 18px; }
.bracket-col-item { display: flex; flex-direction: column; gap: 4px; }
.bracket-match-date { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--muted-dim); }
.bracket-match {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; position: relative; z-index: 1;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.bracket-match:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.bracket-side { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); min-width: 0; min-height: 32px; box-sizing: border-box; }
.bracket-side:last-child { border-bottom: none; }
.bracket-side.winner { color: var(--heading); background: rgba(var(--accent-rgb), 0.1); }
.bracket-side-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Loser of Game 3": a side still to be decided, and the game numbers it points to. */
.bracket-side-name.is-feed { font-weight: 600; font-style: italic; color: var(--muted-dim); }
.bracket-game-no { color: var(--muted); }
.bracket-side-score { flex-shrink: 0; font-weight: 800; color: var(--muted-dim); }
.bracket-side.winner .bracket-side-score { color: var(--accent); }
/* Qualifier brackets: the column after the cut round says who's through. */
.bracket-qualified { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 8px; overflow: hidden; position: relative; z-index: 1; }
.bracket-qualified .bracket-side { border-bottom: 1px solid var(--border); }
.bracket-qualified .spoiler-veil, .qualified-row .spoiler-veil { flex-direction: row; gap: 5px; padding: 4px 8px; font-size: 10px; border-radius: 0; }
.bracket-qualified .spoiler-veil svg, .qualified-row .spoiler-veil svg { width: 12px; height: 12px; }
.bracket-qualified-tag { padding: 7px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); line-height: 1.4; }
.bracket-qualified-tag b, .qualified-list-for b { color: var(--accent); font-weight: 800; }
.qualified-for-link { color: var(--text); font: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.6); text-underline-offset: 2px; }
.qualified-for-link:hover { color: var(--accent); }
/* A qualifier that plays on: the round whose winners qualify. */
.bracket-qual-note { margin: -4px 0 8px; text-align: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); line-height: 1.35; }
.bracket-qual-note b { color: var(--accent); font-weight: 800; }
.qualified-list-for { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.qualified-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.qualified-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text); overflow: hidden; }
a.qualified-row { text-decoration: none; transition: border-color 0.15s, background 0.15s; }
a.qualified-row:hover { border-color: rgba(var(--accent-rgb), 0.6); }
a.qualified-row:hover .qualified-row-name { color: var(--accent); }
.qualified-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Qualification card: a note under the name (spot passed down, via which event). */
.qualified-row-note { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qual-path-empty { margin: -4px 0 14px; font-size: 12px; color: var(--muted); }
#tournamentQualWidget > :last-child, #tournamentQualWidget > .qual-tab-panels:last-child .qual-tab-panel > :last-child { margin-bottom: 0; }
/* More than one Top X (Top 4 / Top 8): mini-tabs between them. */
.qual-tabs { display: flex; gap: 3px; margin-bottom: 12px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.qual-tab { flex: 1; background: none; border: 0; padding: 6px 8px; border-radius: 6px; color: var(--muted); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background .15s ease, color .15s ease; }
.qual-tab:hover { color: var(--text); }
.qual-tab.active { background: var(--surface-3); color: var(--heading); box-shadow: 0 0 0 1px var(--border-strong); }
/* Round jump buttons — phones/tablets (max-width: 900px homepage block). On
   PC they show only for 4+ round brackets, where a click collapses the
   rounds before it (initBracketRoundNav). */
.bracket-round-nav { display: none; }
.bracket-round-nav.is-collapsible { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.bracket-round-nav-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); margin-right: 2px; }
.bracket-round-nav.is-collapsible .bracket-round-chip {
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font: 700 10.5px var(--font); letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.bracket-round-nav.is-collapsible .bracket-round-chip:hover { color: var(--heading); border-color: var(--border-strong); }
.bracket-round-nav.is-collapsible .bracket-round-chip.active { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.1); }
.bracket-col.is-collapsed { display: none; }
.bracket-lines { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.bracket-line { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
/* Compact brackets (every tournament bracket except the Pick'em one — see
   bracketHtml): columns share the card's width, shrinking
   to 146px (names stay readable) before the bracket scrolls sideways. */
.tournament-bracket.is-compact { gap: 18px; width: auto; min-width: 0; }
/* Fewer rounds: the spare width goes into the gaps, not empty space on the right. */
.tournament-bracket.is-compact:not(.is-tiered) { justify-content: space-between; }
.tournament-bracket.is-compact .bracket-tier-cols { gap: 18px; }
.tournament-bracket.is-compact .bracket-col { flex: 1 1 0; min-width: 146px; max-width: 220px; }
.tournament-bracket.is-compact .bracket-col .stage-breakdown-round-label { margin: 0 -9px 6px; padding: 8px 9px 6px; }
.tournament-bracket.is-compact .bracket-col:last-child .stage-breakdown-round-label { margin-right: 0; padding-right: 0; }
.bracket-third { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.bracket-third-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); text-align: center; }

/* Top Players — ranked leaderboard for this tournament only (real Games
   and Win% from finished matches); the full alphabetical roster with W-L
   record lives on the Players tab, this is a top-10 cut. */
.tournament-top-players-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tournament-top-players-table th { text-align: start; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); padding: 0 8px 10px; }
.tournament-top-players-table td { padding: 8px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; }
.tournament-top-players-table td:first-child, .tournament-top-players-table th:first-child { color: var(--muted-dim); width: 28px; }
.tournament-top-players-table th:nth-child(n+3), .tournament-top-players-table td:nth-child(n+3) { text-align: center; white-space: nowrap; padding-inline: 5px; }
.tournament-top-players-table td:nth-child(2) { width: 100%; }
.tp-row-clickable { cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; }
.tp-row-clickable:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.tp-player-cell { display: flex; align-items: center; gap: 9px; }
.tp-futr-value { display: inline-block; background: rgba(92, 224, 138, 0.16); color: var(--win); font-weight: 800; padding: 3px 9px; border-radius: 6px; }

/* Tournament Stats tab — award cards + searchable, sortable leaderboards. */
.ts-awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.ts-award { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; color: var(--text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a.ts-award:hover { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15); }
.ts-award-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.ts-award-player { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ts-award-avatar { width: 44px; height: 44px; font-size: 16px; }
.ts-award-text { display: flex; flex-direction: column; min-width: 0; }
.ts-award-name { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-award-sub { font-size: 12px; color: var(--muted); }
.ts-award-value { font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1; }
.ts-award-value small { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

.ts-board { margin-bottom: 32px; }
.ts-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ts-board-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 800; color: var(--text); }
.ts-board-title svg { color: var(--accent); }
.ts-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px; color: var(--muted); width: 220px; max-width: 100%; }
.ts-search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); }
.ts-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 13px; padding: 8px 0; }
.ts-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table th { text-align: start; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); padding: 11px 14px; background: var(--surface-2); white-space: nowrap; }
.ts-table td { padding: 9px 14px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; }
.ts-table .ts-num { text-align: center; width: 15%; }
.ts-sortable { cursor: pointer; user-select: none; }
.ts-sortable:hover, .ts-sortable.active { color: var(--muted); }
.ts-sort-arrow { font-size: 8px; margin-left: 4px; color: var(--accent); }
.ts-rank { color: var(--muted-dim) !important; width: 44px; }
.ts-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-hl { color: var(--accent) !important; font-size: 15px; font-weight: 900 !important; }
.ts-dim { color: var(--muted) !important; font-weight: 600 !important; }
.ts-unqualified { opacity: 0.5; }
/* Players / Nations (Clubs) switch, then the stage switch, on one row. */
.ts-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.ts-switches .stage-switch { margin: 0; }
/* Who a player represents, or a team's players in brackets, after the name. */
.ts-rep { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ts-rep .flag-inline, .ts-rep .team-logo-inline { margin: 0 5px 0 0; vertical-align: -2px; }
.ts-rep .flag-inline { width: 16px; height: 12px; }
.ts-rep .team-logo-inline { width: 14px; height: 14px; }
.ts-team-avatar { background: var(--surface-2); }
.ts-team-avatar .flag-inline { width: 22px; height: auto; margin: 0; border-radius: 2px; }
.ts-team-avatar .team-logo-inline { width: 70%; height: 70%; object-fit: contain; margin: 0; }
.ts-foot { text-align: center; font-size: 11.5px; color: var(--muted-dim); margin: 8px 0 0; }
.ts-board .profile-empty { padding: 18px; margin: 0; }
@media (max-width: 760px) {
  .ts-awards { grid-template-columns: 1fr; }
  .ts-search { width: 100%; }
  .ts-table th, .ts-table td { padding-left: 8px; padding-right: 8px; }
}

/* Most Used Cards — real per-tournament usage% + real card artwork, once
   both are registered in data/card-usage.json + data/fut-card-images.json
   (see loadCardUsage/loadFutCardImages). A blank box stands in for the
   card art until a real file exists — never a fake placeholder image. */
.card-usage-list { display: flex; flex-direction: column; gap: 4px; }
.card-usage-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.card-usage-row:last-child { border-bottom: none; }
.card-usage-photo { flex-shrink: 0; width: 34px; height: 44px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.card-usage-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-usage-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-usage-face { flex-shrink: 0; width: 46px; }
.card-usage-row .card-usage-face.has-img img { width: 46px; }
.card-usage-name em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--rarity, var(--accent)); }
.card-usage-pct { flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--muted-dim); }

@media (max-width: 860px) {
  .tournament-overview-grid { grid-template-columns: 1fr; }
  .tournament-sidebar-col { position: static; }
}

/* Pick'ems — client-side only (localStorage), no accounts/leaderboard yet.
   A match card per real upcoming fixture with two clickable player
   options; resolved matches you picked show whether you called it right. */
/* Status note sits inline in the tabs row, between the sub-tabs and the stage switch. */
.pickem-intro { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; color: var(--muted); font-size: 12px; line-height: 1.4; margin: 0; padding-bottom: 11px; }
/* Thin divider lines: one before the note, and one between the two sub-tabs. */
.pickem-intro::before { content: ''; flex: none; width: 1px; height: 12px; margin-right: 12px; background: var(--border-strong); }
.pickem-section-label { margin: 0 0 10px; }
.pickem-match {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.pickem-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pickem-option:hover { border-color: var(--accent); }
.pickem-option.picked { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: var(--accent); }
.pickem-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }

/* Tick-square — decorative confirmation on top of the whole row already
   being clickable, matching the checkbox-style pick UI convention (tick a
   box next to your choice) rather than relying on background tint alone. */
.pickem-tick-box {
  margin-left: auto;
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pickem-tick-box.checked { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pickem-bracket-side.correct .pickem-tick-box.checked { background: var(--win); border-color: var(--win); }
.pickem-bracket-side.incorrect .pickem-tick-box.checked { background: var(--loss); border-color: var(--loss); }

.pickem-option-avatar {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--muted-dim);
}
.pickem-vs { flex-shrink: 0; font-size: 10px; font-weight: 800; color: var(--muted-dim); }
.pickem-date { flex-shrink: 0; font-size: 11px; color: var(--muted-dim); white-space: nowrap; }

.pickem-result-match { opacity: 0.85; }
.pickem-result-badge { flex-shrink: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 20px; }
.pickem-result-badge.correct { background: rgba(92, 224, 138, 0.16); color: var(--win); }
.pickem-result-badge.incorrect { background: rgba(242, 114, 114, 0.16); color: var(--loss); }
.pickem-result-badge.completed { background: var(--surface-3); color: var(--muted-dim); }
.pickem-points { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--muted-dim); white-space: nowrap; }
.pickem-option.locked { opacity: 0.6; cursor: default; }

/* Points header — this browser's own running total (localStorage only, no
   accounts yet), never framed as a ranking against other real people. */
.pickem-points-row { display: flex; gap: 12px; margin-bottom: 18px; }
.pickem-points-card { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; text-align: center; }
.pickem-points-value { display: block; font-size: 24px; font-weight: 900; color: var(--heading); line-height: 1; }
.pickem-points-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); margin-top: 5px; }

/* Your Pick'em / Leaderboard sub-tabs inside the Pick'ems panel. */
/* One toolbar: underline sub-tabs on the left (so they don't read as a
   second copy of the main tab bar), compact stage switch on the right. */
.pickem-tabs-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 16px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.pickem-tabs-row .pickem-subtabs { background: none; border: none; border-radius: 0; padding: 0; margin: 0; gap: 22px; }
.pickem-tabs-row .pickem-subtabs .compare-tab {
  flex: 0 0 auto; padding: 10px 0; border-radius: 0; font-size: 13px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pickem-tabs-row .pickem-subtabs .compare-tab:hover { color: var(--text); }
.pickem-tabs-row .pickem-subtabs .compare-tab + .compare-tab { position: relative; }
.pickem-tabs-row .pickem-subtabs .compare-tab + .compare-tab::before { content: ''; position: absolute; left: -11px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--border-strong); }
.pickem-tabs-row .pickem-subtabs .compare-tab.active { background: none; color: var(--heading); border-bottom-color: var(--accent, #fff); }
.pickem-tabs-row .pickem-stagetabs { flex: 0 1 auto; margin: 0 0 8px; padding: 2px; }
.pickem-stagetabs[hidden] { display: none; }
.pickem-tabs-row .pickem-stagetabs .compare-tab { padding: 5px 12px; font-size: 11.5px; white-space: nowrap; }

.pickem-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.pickem-side-card:last-child { margin-bottom: 0; }

/* Fixed 2x2 grid — always a clean, even layout instead of auto-fit's
   awkward 3-then-1 wrap at in-between widths. */
.pickem-badge-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pickem-badge-tier { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 12px; cursor: default; }
.pickem-badge-icon { flex-shrink: 0; display: flex; transition: transform .18s ease, filter .18s ease; }
.pickem-badge-tier:hover .pickem-badge-icon { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 4px 10px var(--badge-glow, rgba(221, 187, 64, 0.35))); }
.pickem-badge-card { display: block; overflow: visible; }
.pickem-badge-shine { animation: pickem-badge-sweep 3.2s ease-in-out infinite; }
@keyframes pickem-badge-sweep { 0%, 55% { transform: translateX(-140px); } 100% { transform: translateX(160px); } }
@media (prefers-reduced-motion: reduce) { .pickem-badge-shine { animation: none; opacity: 0; } }
.pickem-badge-tier strong { display: block; font-size: 12.5px; color: var(--text); }
.pickem-badge-desc { display: block; font-size: 10.5px; color: var(--muted-dim); margin-top: 1px; }
.pickem-badge-tier.icon { border-color: rgba(243, 230, 191, 0.4); --badge-glow: rgba(240, 226, 180, 0.45); }
.pickem-badge-tier.icon strong { color: #f3e6bf; }
.pickem-badge-tier.hero { border-color: rgba(185, 162, 255, 0.4); --badge-glow: rgba(150, 110, 255, 0.5); }
.pickem-badge-tier.hero strong { color: #b9a2ff; }
.pickem-badge-tier.gold { border-color: rgba(236, 201, 75, 0.4); }
.pickem-badge-tier.gold strong { color: #ecc94b; }
.pickem-badge-tier.silver { border-color: rgba(207, 213, 219, 0.35); --badge-glow: rgba(200, 210, 220, 0.35); }
.pickem-badge-tier.silver strong { color: #cfd5db; }
.pickem-badge-tier.bronze { border-color: rgba(222, 150, 99, 0.35); --badge-glow: rgba(205, 127, 72, 0.4); }
.pickem-badge-tier.bronze strong { color: #de9663; }

/* Wide box (desktop): one row of five upright tiles that fill the card,
   instead of a half-empty 3+2 grid. Narrow (mobile) keeps the list above. */
.pickem-side-card:has(.pickem-badge-tiers) { container-type: inline-size; display: flex; flex-direction: column; }
@container (min-width: 480px) {
  .pickem-badge-tiers { grid-template-columns: repeat(5, 1fr); flex: 1; }
  .pickem-badge-tier { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 18px 8px; }
  .pickem-badge-tier .pickem-badge-card { width: 52px; height: 73px; }
  .pickem-badge-tier strong { font-size: 14px; }
  .pickem-badge-desc { font-size: 11.5px; margin-top: 3px; }
}

.pickem-leaderboard-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 20px 0; }
.pickem-leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pickem-leaderboard-name { flex: 1; font-size: 13.5px; font-weight: 800; color: var(--heading); }
.pickem-leaderboard-points { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--accent); }
.pickem-leaderboard-note { font-size: 11px; color: var(--muted-dim); margin-top: 10px; }
.pickem-leaderboard-badge { flex-shrink: 0; display: flex; width: 22px; }
.pickem-leaderboard-badge-empty { width: 22px; height: 31px; border-radius: 5px 5px 11px 11px; border: 1px dashed var(--border-strong); }
.pickem-tier-ladder { margin-bottom: 4px; }
.pickem-tier-divider { display: flex; align-items: center; gap: 10px; padding: 12px 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tier-color, var(--muted)); }
.pickem-tier-ladder .pickem-tier-divider { padding: 7px 0; }
.pickem-tier-divider-line { flex: 1; height: 1px; background: currentColor; opacity: .3; }
.pickem-tier-divider-cut { color: var(--muted); letter-spacing: .04em; }
.pickem-tier-divider.icon { --tier-color: #f3e6bf; }
.pickem-tier-divider.hero { --tier-color: #b9a2ff; }
.pickem-tier-divider.gold { --tier-color: #ecc94b; }
.pickem-tier-divider.silver { --tier-color: #cfd5db; }
.pickem-tier-divider.bronze { --tier-color: #de9663; }

/* Overall leaderboard on pickems.html — badge tiers + leaderboard side by
   side on desktop, matching .tournament-main-row's convention. */
.pickem-overall-leaderboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 28px; }
.pickem-overall-leaderboard .pickem-side-card { margin-bottom: 0; height: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .pickem-overall-leaderboard { grid-template-columns: 1fr; }
}

/* Bracket-style Pick'ems (Knockouts format) — same card shell as the
   read-only bracket-match on Overview, but each side is a clickable
   button instead of a fixed result. */
.pickem-bracket-match { cursor: default; }
.pickem-bracket-match:hover { background: var(--surface-2); box-shadow: none; }
.pickem-bracket-match-completed { opacity: 0.8; }
.pickem-bracket-points { display: block; text-align: center; font-size: 10px; font-weight: 700; color: var(--muted-dim); margin-top: 4px; }
.pickem-bracket-side { cursor: pointer; width: 100%; text-align: start; font-family: inherit; border: none; outline: none; transition: background 0.15s ease, color 0.15s ease; }
.pickem-bracket-side:hover { background: var(--row-hover-bg); }
.pickem-bracket-side.picked { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.pickem-bracket-side.correct { background: rgba(92, 224, 138, 0.14); color: var(--win); }
.pickem-bracket-side.incorrect { background: rgba(242, 114, 114, 0.1); color: var(--loss); opacity: 0.75; }
span.pickem-bracket-side { cursor: default; }
span.pickem-bracket-side.locked { color: var(--muted-dim); }

/* "Completed" tag next to a finished match's date, and the lock icon that
   replaces the empty tick-box once a match is over with no pick ever
   made — makes it obvious at a glance the match isn't pickable anymore,
   rather than showing what still looks like an open, clickable checkbox. */
.pickem-completed-tag { color: var(--muted-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pickem-tick-box.locked { background: transparent; border-color: var(--border); color: var(--muted-dim); }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dim); }

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* ---------- Dashboard ---------- */
.dashboard { padding: 28px 0 56px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.panel-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
}

.panel-title-link { transition: color 0.15s ease; }
.panel-title-link:hover { color: var(--accent); }

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.dashboard-card > .panel-title { display: block; margin-bottom: 8px; padding: 0 2px; }

.competitions-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }

.competition-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.competition-item:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }

.competition-icon {
  position: relative;
  overflow: hidden;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Once a real tournament logo loads, show the whole mark uncropped (not
   cover-cropped to fill the square) and drop the placeholder box behind
   it, so the logo just sits on the page rather than sitting in a tile. */
.competition-icon .avatar-photo { object-fit: contain; }
.competition-icon.has-photo { background: transparent; }

/* Dark-ink tournament logos are recolored white for the dark default;
   light mode swaps in the original mark (<name>-light.png). */
:root[data-theme="light"] img[src$="tournaments/wicked-wednesday.png"] {
  content: url("../images/tournaments/wicked-wednesday-light.png");
}
:root[data-theme="light"] img[src$="tournaments/elibertadores.png"] {
  content: url("../images/tournaments/elibertadores-light.png");
}
:root[data-theme="light"] img[src$="tournaments/echampions-league.png"] {
  content: url("../images/tournaments/echampions-league-light.png");
}
:root[data-theme="light"] img[src$="tournaments/esports-world-cup.png"] {
  content: url("../images/tournaments/esports-world-cup-light.png");
}

.competition-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); }

.competition-status {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted-dim);
  white-space: nowrap;
}

.competition-status.live { color: var(--loss); }

.competition-status.live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--loss);
  margin-right: 5px;
  vertical-align: middle;
}

/* ---------- Player of the Month ---------- */
a.potm-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px 0 0;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.potm-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.potm-card > .panel-title { padding: 0 12px; margin-bottom: 0; }

.birthday-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.birthday-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.birthday-row:hover { background: var(--surface-2); }
.birthday-row .team-badge { width: 22px; height: 22px; font-size: 10px; flex-shrink: 0; }
.birthday-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.birthday-when { font-size: 10.5px; color: var(--muted-dim); white-space: nowrap; }
.birthday-row.is-today .birthday-when { color: var(--accent); font-weight: 700; }

.potm-card-inner {
  position: relative;
  min-height: 92px;
  margin-top: 8px;
  padding: 0 12px 12px;
  overflow: hidden;
}

.potm-photo {
  position: absolute;
  top: 0;
  right: -12px;
  bottom: 0;
  width: 56%;
  object-fit: cover;
  object-position: top center;
}

.potm-photo-fade {
  position: absolute;
  inset: 0 -12px 0 -12px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 38%, rgba(var(--surface-rgb), 0.35) 62%, transparent 100%);
}

.potm-stat { position: relative; z-index: 2; max-width: 54%; }

.potm-number {
  font-size: 24px;
  font-weight: 900;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -0.02em;
}

.potm-number-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
  margin-top: 3px;
}

.potm-name { font-size: 13px; font-weight: 800; color: var(--heading); margin-top: 8px; }
.potm-meta { font-size: 10.5px; color: var(--muted-dim); margin-top: 2px; }
.potm-meta .potm-team { color: var(--accent); font-weight: 700; }

/* No photo available: fall back to a simple initials badge, no bleed image. */
.potm-card-inner.no-photo .potm-stat { max-width: 100%; }
.potm-card-inner.no-photo .potm-photo-fade { display: none; }

.potm-fallback-avatar {
  position: absolute;
  top: 0;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

/* Last five results, each with that game's performance rating. */
.potm-form {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 78px;
  margin: 0 12px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.potm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.potm-bar { width: 100%; max-width: 30px; border-radius: 4px; background: var(--surface-3); }
.potm-bar-score {
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #06120a;
}
.potm-bar-score.great { background: var(--win); }
.potm-bar-score.good { background: #9fdc6a; }
.potm-bar-score.mid { background: var(--draw); }
.potm-bar-score.poor { background: var(--loss); }
.potm-bar.great { background: rgba(92, 224, 138, 0.35); }
.potm-bar.good { background: rgba(159, 220, 106, 0.35); }
.potm-bar.mid { background: rgba(217, 176, 76, 0.35); }
.potm-bar.poor { background: rgba(242, 114, 114, 0.35); }
.potm-form:not(:has(.potm-bar)) { height: auto; padding-top: 12px; }
.potm-form-score { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tactics editor: screenshot import + role / focus pickers per position */
.tactic-import {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  outline: none;
}
.tactic-import:focus { border-color: var(--accent); }
.tactic-import-btn { cursor: pointer; }
.tactic-import-text { flex: 1 1 200px; min-width: 0; }
.tactic-import-hint { font-size: 11.5px; line-height: 1.45; color: var(--muted-dim); }
.tactic-import-hint b { color: var(--muted); font-weight: 700; }
.tactic-import-example { flex: 0 0 270px; display: block; padding: 0; background: none; border: none; text-align: start; cursor: zoom-in; }
.tactic-import-example img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-strong); transition: border-color 0.15s ease; }
.tactic-import-example span { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.tactic-import-example:hover img { border-color: var(--accent); }
@media (max-width: 640px) { .tactic-import-example { flex-basis: 100%; } }
.tactic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 16, 0.92);
  cursor: zoom-out;
}
.tactic-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.tactic-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--heading);
  font-size: 24px;
  line-height: 1;
}
.tactic-import-status { flex-basis: 100%; margin: 0; color: var(--win); }
.tactic-import-status.is-error { color: var(--draw); }
.tactic-import-status[hidden] { display: none; }

/* Tactics editor: decode-a-code helper (the primary way to add a tactic) */
.tactic-decode {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 20px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
}
.tactic-decode-code { flex: 0 1 240px; min-width: 200px; margin: 0; }
.tactic-decode-code .auth-field { margin: 0; }
.tactic-decode-steps { flex: 1 1 260px; min-width: 220px; }
.tactic-decode-title { display: block; font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.tactic-decode-hint { margin: 0 0 6px; }
.tactic-decode-steps li { margin-bottom: 2px; }
.tactic-decode-steps a { color: var(--accent); font-weight: 700; text-decoration: none; }
.tactic-decode-steps a:hover { text-decoration: underline; }
.tactic-decode-steps b { color: var(--heading); }

.tactic-import-alt { margin-bottom: 12px; }
.tactic-import-alt > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted-dim); list-style: none; padding: 2px 0; }
.tactic-import-alt > summary::-webkit-details-marker { display: none; }
.tactic-import-alt > summary::before { content: '▸ '; color: var(--accent); }
.tactic-import-alt[open] > summary::before { content: '▾ '; }
.tactic-import-alt .tactic-import { margin-top: 8px; margin-bottom: 0; }

.admin-edit-spoiler-fields { display: flex; flex-direction: column; gap: 10px; margin: -4px 0 4px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
/* Tactics editor: role + focus pickers per position */
.tactic-roles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.tactic-role-row { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 8px; align-items: center; }
.tactic-role-pos { font-size: 11px; font-weight: 800; color: var(--accent); text-align: center; background: var(--surface-3); border-radius: 6px; padding: 8px 0; }
.tactic-role-row select, .auth-field select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--heading);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  color-scheme: dark;
}
.tactic-role-row select:focus, .auth-field select:focus { border-color: var(--border-strong); }
.tactic-role-row select { height: 36px; }
.auth-field input[type="range"] { padding: 0; accent-color: var(--accent); }

/* ---------- Compare Players ---------- */
.compare-widget { display: flex; align-items: center; gap: 8px; padding: 0 4px; }

.compare-select {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 6px;
}

.compare-vs { font-size: 10.5px; font-weight: 800; color: var(--muted-dim); flex-shrink: 0; }

.btn-compare {
  display: block;
  width: calc(100% - 8px);
  margin: 10px 4px 0;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-compare:hover { border-color: var(--accent); color: var(--accent); }

.dashboard-card-sub { color: var(--muted); font-size: 12.5px; line-height: 1.4; padding: 0 4px; }

/* ---------- Compare Players preview card (homepage sidebar) ---------- */
a.dashboard-card.compare-preview-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.dashboard-card.compare-preview-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.compare-preview-card .panel-title { color: var(--accent); }

/* Each slot is one connected box — silhouette and "Search" label sharing
   the same border/background, like .compare-picker on the full compare
   page — rather than a floating circle sitting above a separate button. */
.compare-preview-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.compare-preview-slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}

.compare-preview-avatar {
  position: relative;
  overflow: hidden;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--surface-3), var(--surface-2));
  color: var(--muted-dim);
}

/* Real silhouette artwork, once dropped into images/compare/, overlays the
   generic person-icon fallback via the usual .avatar-photo/.has-photo
   pattern. Cropped from the top so the head stays in frame instead of a
   center-crop landing on the neck/shoulders. */
.compare-preview-avatar .avatar-photo { object-position: top center; }
.compare-preview-avatar.has-photo svg { display: none; }

.compare-preview-avatar svg { width: 22px; height: 22px; }

.compare-preview-vs {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compare-preview-search-chip {
  display: block;
  padding: 6px 4px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted-dim);
  font-size: 10.5px;
  font-weight: 700;
}


.compare-result { margin: 12px 4px 0; border-top: 1px solid var(--border); padding-top: 12px; }
.compare-result[hidden] { display: none; }

.compare-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 0;
}

.compare-row .cr-label { text-align: center; color: var(--muted-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.compare-row .cr-a { text-align: right; color: var(--text); font-weight: 600; }
.compare-row .cr-b { text-align: start; color: var(--text); font-weight: 600; }
.compare-row .cr-a.better, .compare-row .cr-b.better { color: var(--accent); }

/* ---------- Compare page ---------- */
/* Big two-tier card (hero photo + name/team strip) at the top of the
   page. Once you scroll past the intro heading — see
   #compareStickySentinel + IntersectionObserver — it's replaced by the
   compact .compare-sticky-bar below, so exactly one of the two designs
   is showing at any given time. */
.compare-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.compare-picker-grid[hidden] { display: none; }

.compare-picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}

/* Once a player is picked, the avatar box is the only thing left inside
   .compare-picker (the search box is hidden) — round all its corners so
   it reads as a complete card instead of leaving square corners poking
   out past the outer card's rounded ones. */
.compare-picker:has(.compare-search-box[hidden]) .compare-picker-avatar {
  border-radius: 9px;
}

.compare-picker-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, var(--surface-3), var(--surface-2));
  color: var(--muted-dim);
}
.compare-picker-avatar svg { width: 32px; height: 32px; }
.compare-picker-avatar.has-photo svg { display: none; }

/* Source photos aren't pre-cut transparent renders, so a hard rectangular
   crop looks jarring floating free — fade the bottom edge into the card
   instead of cutting it off sharply. */
.compare-picker-avatar .avatar-photo {
  object-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 94%);
}

/* No circular frame — the photo just floats free over the crest. */
.compare-picker-avatar .profile-avatar {
  background: none;
  border: none;
  border-radius: 0;
  width: 96px;
  height: 96px;
  z-index: 1;
}

/* Team crest watermark, sitting behind the photo (see teamLogoUrl). Kept in
   the upper half of the box — behind the opaque top of the photo — rather
   than centered, so it never shows through the fade at the bottom edge and
   read as sitting "in front of" the photo instead of behind it. */
.compare-avatar-team-bg {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

.compare-picker-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-picker-clear[hidden] { display: none; }
.compare-picker-clear:hover { background: rgba(0,0,0,0.7); }

.compare-picker .compare-search-box {
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
}
.compare-picker .compare-selected {
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
}

.compare-search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.compare-search-box[hidden] { display: none; }
.compare-search-box svg { color: var(--muted-dim); flex-shrink: 0; width: 13px; height: 13px; }

.compare-page-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--heading);
  font-size: 12.5px;
  font-family: inherit;
}
.compare-page-search::placeholder { color: var(--muted-dim); }

.compare-selected {
  padding: 12px 14px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.compare-selected[hidden] { display: none; }
.cs-name { font-size: 15px; font-weight: 800; color: var(--heading); }
.cs-sub { font-size: 11.5px; color: var(--muted-dim); margin-top: 2px; }

/* Compact sticky bar — hidden until #compareStickySentinel scrolls out
   of view (see the IntersectionObserver in initComparePage), at which
   point the big cards above get `hidden` and this takes their place. */
.compare-sticky-bar {
  position: sticky;
  top: 65px;
  z-index: 40;
  margin-bottom: 20px;
}
.compare-sticky-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare-sticky-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  min-height: 52px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.compare-sticky-card[hidden] { display: none; }
.compare-sticky-team-bg {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.16;
  pointer-events: none;
}
.compare-sticky-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--heading);
}
.compare-sticky-avatar .avatar-photo { border-radius: 50%; }
.compare-sticky-text { min-width: 0; }
.compare-sticky-name { display: block; font-size: 13px; font-weight: 800; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-sticky-sub { display: block; font-size: 10.5px; color: var(--muted-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-sticky-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-sticky-clear:hover { background: rgba(0,0,0,0.7); }

.compare-rows .compare-row { padding: 7px 0; font-size: 12px; border-bottom: 1px solid var(--border); }
.compare-rows .compare-row:last-child { border-bottom: none; }

/* All / Online / LAN switch above the Compare tabs */
.compare-venue { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.compare-venue .mlist-seg { padding: 5px 12px; font-size: 12.5px; }
/* Players / Nations / Clubs switch, and the Nations / Clubs view. */
.compare-mode-segs { margin-top: 12px; }
.compare-team-picks { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 18px; }
.compare-team-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.compare-team-pick-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); font-weight: 800; color: var(--muted); overflow: hidden; }
.compare-team-pick-icon:empty { display: none; }
.compare-team-pick-icon .flag-inline { width: 24px; height: auto; margin: 0; border-radius: 2px; }
.compare-team-pick-icon .team-logo-inline { width: 24px; height: 24px; object-fit: contain; margin: 0; }
.compare-team-pick select { flex: 1; min-width: 0; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; font: 600 14px var(--font); padding: 8px 10px; }
.compare-team-vs { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted-dim); }
.compare-team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.compare-team-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.compare-team-col h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.compare-team-col h4 .flag-inline, .compare-team-col h4 .team-logo-inline { margin: 0; }
.compare-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.compare-team-list li span { color: var(--muted); font-weight: 600; font-size: 12px; margin-left: 4px; }
.compare-team-list a { color: inherit; text-decoration: none; }
.compare-team-list a:hover { color: var(--accent); }
.compare-team-none { color: var(--muted); font-weight: 600 !important; }
.compare-team-list { gap: 10px; }
.compare-team-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.compare-team-thumb { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 800; overflow: hidden; }
.compare-team-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-team-thumb.is-logo { border-radius: 8px; background: none; }
.compare-team-thumb.is-logo img { object-fit: contain; }
.compare-team-text { display: flex; flex-direction: column; min-width: 0; }
.compare-team-text > span { margin-left: 0 !important; }
/* Compare Teams picker cards: the flag / crest where the player photo goes. */
.compare-team-avatar { display: flex; align-items: center; justify-content: center; }
.compare-team-big { width: 84px; height: 84px; object-fit: contain; }
.compare-team-big.is-flag { width: 100px; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.compare-team-initial { font-size: 36px; font-weight: 800; color: var(--muted); }
.compare-team-grid .search-dropdown { max-height: 320px; overflow-y: auto; }
.compare-team-grid .search-result-avatar .flag-inline { width: 22px; height: auto; margin: 0; }
.compare-team-grid .search-result-avatar .team-logo-inline { width: 22px; height: 22px; object-fit: contain; margin: 0; }
/* Team pickers: the player-search box look, with a caret for "open the list". */
.compare-team-search { position: relative; flex: 1; min-width: 0; }
.compare-team-caret { flex: 0 0 auto; color: var(--muted); pointer-events: none; }
.compare-team-search .search-dropdown { max-height: 320px; overflow-y: auto; }
.compare-team-search .search-result-avatar .flag-inline { width: 22px; height: auto; margin: 0; }
.compare-team-search .search-result-avatar .team-logo-inline { width: 22px; height: 22px; object-fit: contain; margin: 0; }
.rep-team-link { display: inline-flex; align-items: center; gap: 6px; }
.rep-team-link .flag-inline, .rep-team-link .team-logo-inline { margin: 0; }
@media (max-width: 600px) {
  .compare-team-picks { grid-template-columns: 1fr; }
  .compare-team-vs { text-align: center; }
  .compare-team-cols { grid-template-columns: 1fr; }
}
/* Head to Head / Overall segmented control (see renderCompareResult) */
.compare-tabs {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}
.compare-tab {
  flex: 1;
  padding: 7px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}
.compare-tab.active { background: var(--surface-3); color: var(--heading); }
.compare-tab-panel[hidden] { display: none; }

/* "WINS" bar (see winsBarHtml) — real counts from match data, never fabricated. */
.compare-wins-label {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 12px 0 10px;
}
.compare-wins-track { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.compare-wins-count { font-size: 13px; font-weight: 800; color: var(--heading); flex-shrink: 0; width: 18px; }
.compare-wins-count.a { text-align: right; }
.compare-wins-count.b { text-align: start; }
/* Player 1's wins in their chart colour (accent), draws grey in the middle,
   player 2's wins in theirs (loss red, as .futr-rating-series-b); each
   segment's flex-grow is its game count. No games → plain track. */
.compare-wins-bar { flex: 1; display: flex; gap: 2px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.compare-wins-fill { flex: 0 1 0; min-width: 4px; height: 100%; background: var(--accent); }
.compare-wins-fill.d { background: var(--muted); }
.compare-wins-fill.b { background: var(--loss); }
.compare-wins-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.compare-wins-key-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.compare-wins-key-item b { color: var(--heading); font-weight: 800; }
.compare-wins-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; background: var(--accent); }
.compare-wins-swatch.d { background: var(--muted); }
.compare-wins-swatch.b { background: var(--loss); }

.compare-results-label { position: relative; }
.crl-search-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 20px; height: 20px; padding: 0;
  background: none; border: none; color: var(--accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.crl-search-toggle:hover { color: var(--heading); }
.compare-results-label.is-searching .crl-text { visibility: hidden; }
.crl-search-input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  background: transparent; border: none; outline: none; color: var(--heading);
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: normal;
  padding: 0 30px 0 12px; text-align: start; font-family: inherit;
}
.crl-search-input[hidden] { display: none; }
.crl-search-input::placeholder { color: var(--muted-dim); text-transform: none; font-weight: 600; }

.compare-h2h-list { margin-top: 10px; display: flex; flex-direction: column; }

/* Head-to-head result (see compareH2hRowHtml): A's W/L/D badge on the
   left, B's on the right; "A [photo] score [photo] B" centred with the
   winner bold, competition · round underneath. */
.compare-h2h-list .h2h-row:first-child .profile-match-row { border-top: none; }
.ch2h-res {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
}
.ch2h-res.win { background: rgba(92, 224, 138, 0.16); color: var(--win); }
.ch2h-res.loss { background: rgba(242, 114, 114, 0.16); color: var(--loss); }
.ch2h-res.draw { background: rgba(255, 152, 56, 0.16); color: #ff9838; }
.ch2h-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ch2h-line { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.ch2h-name { flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch2h-name.ch2h-a { text-align: right; }
.ch2h-name.won { font-weight: 800; color: var(--heading); }
.ch2h-avatar { width: 24px; height: 24px; border-radius: 5px; font-size: 10px; }
.ch2h-score { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 44px; }
.ch2h-score .pmr-score { font-size: 14px; font-weight: 800; color: var(--heading); white-space: nowrap; }
.ch2h-meta { max-width: 100%; justify-content: center; }
@media (max-width: 480px) {
  .ch2h-line { gap: 5px; }
  .ch2h-avatar { display: none; }
  .ch2h-name { font-size: 12px; }
}
/* Spoiler mode: names stay, the score and both badges are covered — and
   the winner isn't bolded until that score is revealed. */
.ch2h-score .spoiler-veil.pmr-veil { margin: 0; align-self: center; }
body.spoilers-hidden .ch2h-row.has-spoiler:not(.revealed) .pmr-score { display: none; }
body.spoilers-hidden .ch2h-row.has-spoiler:not(.revealed) .ch2h-res { background: var(--surface-3); color: transparent; }
body.spoilers-hidden .ch2h-row.has-spoiler:not(.revealed) .ch2h-name.won { font-weight: 600; color: var(--muted); }

/* "PaceFC Rating" trend line (see futrRatingChartHtml) — two overlaid
   per-player recent-form lines, each point linking to its match. */
.futr-rating-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px 4px; }
.futr-rating-chart { display: block; width: 100%; height: auto; overflow: visible; }
.futr-rating-grid { stroke: var(--border); stroke-width: 1; }
.futr-rating-axis { font-size: 9px; fill: var(--muted-dim); font-family: inherit; }
.futr-rating-series-a { color: var(--accent); }
.futr-rating-series-b { color: var(--loss); }
.futr-rating-chart a { cursor: pointer; }
.futr-rating-chart a circle { transition: r 0.15s ease; }
.futr-rating-chart a:hover circle { r: 6; }
.futr-rating-legend { display: flex; justify-content: center; gap: 18px; margin-top: 8px; padding-bottom: 6px; }
.frl-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.frl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.frl-item.a .frl-dot { background: var(--accent); }
.frl-item.b .frl-dot { background: var(--loss); }

@media (max-width: 700px) {
  .compare-picker-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

.matches-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.panel-head-right { display: flex; align-items: center; gap: 16px; }

.panel-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.panel-link:hover { color: var(--accent-dim); }

.tabs-compact { justify-content: flex-start; margin: 0 0 14px; gap: 4px; }
.tabs-compact .tab { padding: 6px 14px; font-size: 12px; }

/* ---------- Matches panel: date strip + recent results ---------- */
.match-date-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.date-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 3px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-dim);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.date-chip:hover { background: var(--surface-2); }

.date-chip-dow {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.date-chip-day { font-size: 13px; font-weight: 800; color: var(--text); }

.date-chip.active { background: var(--surface-3); border-color: var(--border-strong); }
.date-chip.active .date-chip-dow,
.date-chip.active .date-chip-day { color: var(--heading); }

.date-chip.is-today:not(.active) .date-chip-day { color: var(--accent); }

.date-strip-nav {
  flex: 0 0 22px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted-dim);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.date-strip-nav:hover { background: var(--surface-2); color: var(--text); }

.date-chip.has-matches::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 1px;
}

/* Generic small uppercase divider used to break a list into named groups
   (Recent Results below the match date strip; Live/Upcoming/Past in the
   Events card). */
.section-label {
  margin: 12px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* No divider line needed when a section-label opens the list itself
   (e.g. the first Events group right under its own panel-head). */
#competitionsList .section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.match-cards-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.match-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  overflow-x: visible;
}

.match-cards-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.match-cards-list .match-card { flex: none; width: 100%; }

/* Tournament page Matches tab: a round's games side by side instead of one
   full-width row each. The tournament name on every card is dropped (it's
   this page's own tournament); Swiss rounds split into record pools, and a
   round mixing regions gets a sub-header per region. */
.tournament-stages-list .match-cards-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.tournament-stages-list .match-card-league { display: none; }
.mstage-nav { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mstage-nav .mstage-switch { margin-bottom: 0; align-self: flex-start; max-width: 100%; overflow-x: auto; }
.mstage-switch .stage-switch-btn { white-space: nowrap; }
.mstage-nav .stage-toolbar { margin-bottom: 0; flex-wrap: nowrap; }
.mstage-nav .stage-toolbar .mstage-switch { min-width: 0; }
.mstage-nav .stage-toolbar .stage-search { flex: none; }
/* Matches tab "Find a player": only their cards stay, their side marked. */
.match-card[hidden], .stage-pool[hidden], .stage-region[hidden], .stage-section[hidden] { display: none; }
.match-card-team.is-search-hit { box-shadow: inset 3px 0 0 var(--accent); background: rgba(var(--accent-rgb), 0.12); border-radius: 4px; }
/* Round picker: "All" on the left, then one segmented bar per row
   (Round [1 2 3…] / Upper [R1 R2 Final] / Lower [R1 … Final]). */
.mstage-rounds { display: flex; align-items: flex-start; gap: 10px; }
.mstage-rounds[hidden] { display: none; }
.mstage-round-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.mstage-round-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mstage-row-title {
  flex: none;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.mstage-seg {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.mstage-round-btn {
  flex: none; min-width: 34px; padding: 5px 9px; border: none; border-radius: 5px;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; cursor: pointer;
}
.mstage-round-btn:hover { color: var(--text); }
.mstage-round-btn.active { background: var(--surface-3); color: var(--heading); }
.mstage-all {
  min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.mstage-all.active { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.stage-section[hidden] { display: none; }
.stage-round { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.stage-round.has-regions { gap: 16px; }
.stage-region { display: flex; flex-direction: column; gap: 10px; padding-left: 10px; border-left: 2px solid var(--border-strong); }
.stage-region-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.stage-pool { display: flex; flex-direction: column; gap: 6px; }
.stage-pool-label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
}
.stage-pool-label span { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }

/* Header gear menu (spoilers / light mode / language) — phones/tablets, built
   by initPhoneSettings and shown in the max-width: 900px homepage block. */
.phone-settings { display: none; position: relative; }

/* Homepage Upcoming / Results switcher — phones/tablets (shown in the
   max-width: 600px homepage block). */
.home-match-tabs,
.home-upcoming-cards { display: none; }
.home-match-tabs { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.home-match-tab { background: none; border: 0; color: var(--muted); font: 700 11.5px var(--font); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.home-match-tab.active { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }

.match-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 216px;
  scroll-snap-align: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
  /* --tourney-glow-a defaults to 0 so a card with no matched tournament
     logo shows no tint at all, rather than a stray black wash from an
     unset --tourney-glow rgb() triple. See .match-card::before below. */
  --tourney-glow-a: 0;
}

.match-card:hover {
  border-color: var(--border-strong, var(--accent));
  background: var(--surface-3, var(--surface-2));
}

/* Tinted with the average color read straight from that match's tournament
   logo (see extractDominantColor in script.js) — set as --tourney-glow (an
   "r, g, b" triple) and --tourney-glow-a inline per card. */
.match-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 100% 0%, rgba(var(--tourney-glow, 0, 0, 0), var(--tourney-glow-a)), transparent 65%);
}

.match-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-dim);
  padding-bottom: 3px;
  margin-bottom: 1px;
  border-bottom: 1px solid var(--border);
}

.match-card-date { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Final / 3rd-place marker — same thin line icons as the rest of the site,
   gold for the final, bronze for the 3rd-place play-off. Shows even with
   spoilers on: it's the round, not the result. */
:root { --bronze: #c48a5a; --bronze-rgb: 196, 138, 90; }
:root[data-theme="light"] { --bronze: #9a5f2e; --bronze-rgb: 154, 95, 46; }
.final-badge {
  --fb: var(--accent); --fb-rgb: var(--accent-rgb);
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fb);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  flex-shrink: 0;
}
.final-badge--third { --fb: var(--bronze); --fb-rgb: var(--bronze-rgb); }
/* Qualifying round: silver, so it reads apart from the gold/bronze podium. */
.final-badge--qual { --fb: var(--text); --fb-rgb: var(--ink-rgb, 240, 240, 240); }
:root:not([data-theme="light"]) .final-badge--qual { --fb-rgb: 240, 240, 240; }
.final-badge svg { display: block; flex-shrink: 0; }
.match-card-head .final-badge {
  padding: 2px 6px 2px 5px; border-radius: 4px;
  background: rgba(var(--fb-rgb), 0.1);
  border: 1px solid rgba(var(--fb-rgb), 0.35);
}
.match-card-head .final-badge svg { width: 11px; height: 11px; }
.match-card.is-final { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: inset 2px 0 0 var(--accent); }
.match-card.is-third { border-color: rgba(var(--bronze-rgb), 0.45); box-shadow: inset 2px 0 0 var(--bronze); }
.mlist-row.is-final { box-shadow: inset 2px 0 0 var(--accent); }
.mlist-row.is-third { box-shadow: inset 2px 0 0 var(--bronze); }
.match-card.is-qual { border-color: var(--border-strong); box-shadow: inset 2px 0 0 var(--muted); }
.mlist-row.is-qual { box-shadow: inset 2px 0 0 var(--muted); }
.mlist-row.is-final .mlist-round, .mlist-row.is-third .mlist-round, .mlist-row.is-qual .mlist-round { font-weight: 700; color: var(--text); }
.mlist-round .final-badge { vertical-align: -2px; margin-right: 6px; }
.mlist-round .final-badge svg { width: 14px; height: 14px; }

.match-card-date .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--loss);
  flex-shrink: 0;
}

.match-card-league {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 60%;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.match-card-league img { width: 12px; height: 12px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.match-card-league span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spoiler veil covers only the players + scores — the date and tournament
   header stay visible, since a match existing isn't itself a spoiler. */
.match-card-body { display: flex; flex-direction: column; gap: 3px; border-radius: 6px; }
.match-card-body .spoiler-veil { flex-direction: row; gap: 6px; padding: 4px 8px; font-size: 10px; }
.match-card-body .spoiler-veil svg { width: 14px; height: 14px; }
.match-card-team { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.match-card-team .team-badge { width: 17px; height: 17px; font-size: 8px; }
.match-card-team .mc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--muted); }
.match-card-team.winner .mc-name { color: var(--heading); }
.match-card-team.is-futr .mc-name { color: var(--accent); }
.match-card-team .mc-score { font-size: 12.5px; font-weight: 800; color: var(--muted-dim); font-variant-numeric: tabular-nums; }
.match-card-team.winner .mc-score { color: var(--heading); }
/* Club tie found by one of its players: the player's name beside the club. */
.match-card-team .mc-search-players { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--accent); }
.match-card-team .mc-search-players[hidden] { display: none; }

.match-card-meta { font-size: 11px; color: var(--muted-dim); }

.news-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}

.news-list-compact { display: flex; flex-direction: column; }

.news-panel-more {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.news-panel-more:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-3); }

/* ---------- Stats ---------- */
.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 36px 24px;
}

.stat { text-align: center; }

.stat-num {
  display: block;
  font-weight: 800;
  font-size: 36px;
  color: var(--heading);
  letter-spacing: -0.02em;
}

.stat-label {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; }

/* Detail pages (player/match/article) go straight from the header into
   content with just a back-link — no .intro title above to justify the
   full 88px .section padding, so it read as a big empty gap. */
.section-top-tight { padding-top: 32px; }
.section-top-flush { padding-top: 0; }
.intro-compact { padding: 28px 0 16px; }
.intro-compact h1.eyebrow {
  font-size: 13px;
  line-height: normal;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0;
}
.section-alt { background: var(--surface); }

.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 28px;
}

.tab, .ranking-tab, .scene-tab, .sub-tab {
  padding: 9px 20px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.tab:hover, .ranking-tab:hover, .scene-tab:hover, .sub-tab:hover { color: var(--text); }
.tab.active, .ranking-tab.active, .scene-tab.active, .sub-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.tabs-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; }
.tabs-row .tabs { margin-bottom: 0; }

/* Pro Settings: search box with the Pros / Creators tabs beside it. */
.settings-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.settings-toolbar .rankings-filter, .settings-toolbar .tabs { margin: 0; }
.settings-toolbar .rankings-filter { flex: 1 1 220px; }

/* ---------- Standings table ---------- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  overflow-x: auto;
}

.standings-table { width: 100%; border-collapse: collapse; min-width: 560px; }

.standings-table thead th {
  text-align: start;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-dim);
  font-weight: 700;
  padding: 12px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.standings-table th.form-col, .standings-table td.form-col { text-align: right; }
.standings-table thead th:not(:first-child):not(:nth-child(2)) { text-align: center; }

.standings-table tbody tr { background: var(--surface); border-bottom: 1px solid var(--border); }
.standings-table tbody tr:last-child { border-bottom: none; }
.standings-table tbody tr.is-futr { background: rgba(var(--accent-rgb), 0.07); }

.standings-table td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text);
}

.standings-table td:not(:first-child):not(:nth-child(2)) { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }

.rank-num { font-weight: 700; color: var(--muted); }
.team-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--heading); transition: color 0.15s ease; }
a.team-cell:hover { color: var(--accent); }

.settings-table { min-width: 900px; }
/* "Swipe for more" hint — phones/tablets only (max-width: 900px block). */
.table-swipe-hint { display: none; }
/* Team column styled like the rankings table's: centred, muted, one line */
.settings-table thead th:nth-child(2) { text-align: center; }
.settings-table td:nth-child(2) { text-align: center; color: var(--muted); white-space: nowrap; }
/* Club and org stacked one per line (any number) so the column stays narrow. */
.settings-affil { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.settings-player-cell { align-items: center; }
/* Admin-only edit cog at the end of each row */
.settings-player-wrap { display: flex; align-items: center; gap: 10px; }
.settings-player-wrap .settings-row-cog { flex: 0 0 auto; }
.settings-row-cog {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.settings-row-cog:hover { color: var(--heading); border-color: var(--border-strong); }
.settings-row-cog.is-busy { opacity: 0.5; cursor: progress; }
.settings-player-name { display: block; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--heading); }
.settings-player-rank { display: block; font-size: 11px; color: var(--muted-dim); font-weight: 500; margin-top: 1px; }

/* Dropped into any relatively-positioned avatar/badge container to show a
   real photo over the initial-letter fallback. Removes itself on 404 via
   the inline onerror handler, so the fallback shows through automatically. */
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Club crests (images/teams/ or an uploaded team-logos file) are rarely
   square: fit the whole crest inside the box instead of cropping it, with
   a little room so a round box doesn't clip its corners (VBL clubs). */
.avatar-photo[src*="images/teams/"],
.avatar-photo[src*="/team-logos/"] { object-fit: contain; padding: 12%; }

/* Once a photo has actually loaded (see onload handler on .avatar-photo),
   hide the initial-letter fallback text so it can never show through. */
.has-photo {
  color: transparent;
}

.team-badge {
  position: relative;
  overflow: hidden;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.is-futr .team-badge { background: var(--accent); color: var(--on-accent); }
/* .team-badge's own color is declared after the generic .has-photo rule, so
   re-hide the initial here or it shows through transparent photo edges. */
.team-badge.has-photo,
.is-futr .team-badge.has-photo { color: transparent; }

.pts-cell { font-weight: 800; color: var(--heading) !important; }

.form-dots { display: flex; gap: 4px; justify-content: flex-end; }

.form-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.form-dot.W { background: var(--win); }
.form-dot.L { background: var(--loss); }
.form-dot.D { background: var(--draw); }

.rankings-filter {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}

.rankings-toolbar { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 0 0 20px; }
.rankings-toolbar .rankings-filter { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
.rankings-toolbar .tourney-filter-icon-btn.match-filter-btn { height: 40px; }
.rankings-filter::placeholder { color: var(--muted-dim); }
.rankings-filter:focus { outline: none; border-color: var(--border-strong); }

.change-badge {
  display: inline-block;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.change-badge.up { color: var(--win); background: rgba(92, 224, 138, 0.12); }
.change-badge.down { color: var(--loss); background: rgba(242, 114, 114, 0.12); }
.change-badge.flat { color: var(--muted-dim); background: var(--surface-3); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 24px;
}

.pagination button {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pagination button:hover:not(:disabled):not(.active) { border-color: var(--border-strong); color: var(--heading); }
.pagination button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* ---------- News feed (news.html) ---------- */
/* One big headline-only featured hero — click through to article.html for
   the actual read. On news.html the rest follow as photo cards (see
   .news-subfeatured); the homepage panel lists them as rows. */

.news-feed-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 12px;
  overflow: hidden;
  min-height: 320px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), var(--surface-3) 55%, var(--surface-2));
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}

.news-feed-hero:hover { border-color: var(--accent); }

.news-feed-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.news-feed-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.05) 0%, rgba(var(--bg-rgb), 0.45) 55%, rgba(var(--bg-rgb), 0.94) 100%);
}

.news-feed-hero h2 { position: relative; font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; color: var(--heading); letter-spacing: -0.02em; max-width: 620px; line-height: 1.15; }

.news-feed-section { margin-top: 28px; }
.news-feed-section-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
}

.news-feed-day-tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--heading);
  font-size: 10px;
}

.news-feed-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s ease;
}

.news-feed-row:last-child { border-bottom: none; }
.news-feed-row:hover .news-feed-row-title { color: var(--accent); }

.news-feed-row-badge {
  position: relative;
  overflow: hidden;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

/* A team/tournament logo (see newsLogoUrl in script.js) covers the
   category-letter fallback once it loads; on a broken/missing path the
   <img> removes itself and the fallback stays visible underneath. Just
   the bare logo — no boxed/background badge behind it. */
.news-feed-row-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.news-feed-row-badge.has-logo .news-feed-row-badge-fallback { display: none; }
.news-feed-row-badge:not(.has-logo) { background: rgba(var(--accent-rgb), 0.14); }

.news-feed-row-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* News page (news.html): full-width hero, then every other story as a
   photo card in a 3-column grid (one column of compact rows on phones). */
.news-page .news-feed-hero { min-height: 440px; padding: 36px; }
.news-page .news-feed-hero h2 { font-size: clamp(24px, 3.4vw, 40px); max-width: 760px; }

.news-subfeatured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  margin-top: 16px;
}
.news-sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}
.news-sub-card:hover { border-color: var(--accent); }
.news-sub-card:hover .news-sub-title { color: var(--accent); }
.news-sub-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), var(--surface-3) 55%, var(--surface-2));
}
.news-sub-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.news-sub-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
}
.news-sub-fallback img { width: 34%; height: 50%; object-fit: contain; }
.news-sub-media.has-photo .news-sub-fallback { display: none; }
.news-sub-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.news-sub-date { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.news-sub-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}

@media (max-width: 900px) {
  .news-page .news-feed-hero { min-height: 300px; padding: 22px; }
  .news-subfeatured { grid-template-columns: 1fr; gap: 12px; }
  .news-sub-card { flex-direction: row; }
  .news-sub-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 92px; }
  .news-sub-body { padding: 12px; justify-content: center; }
  .news-sub-title { font-size: 14px; }
}

/* Compact variant inside the homepage's News panel (sidebar-width) — a
   fixed height so the photo (object-fit: cover) always fills the box
   cleanly; aspect-ratio scaling was tried here and made the box grow too
   wide/short at large viewports and cramped at narrow ones. Past ~1150px
   the panel's own column has already hit its max width (.container-wide
   caps at 1180px), so it stays a fixed 570px-ish wide there regardless of
   how much wider the window gets — safe to just bump the height up a
   second fixed step for that case, same predictable box, just bigger. */
.news-panel .news-feed-hero { min-height: 190px; padding: 18px; }
.news-panel .news-feed-hero h2 { font-size: clamp(16px, 1.8vw, 19px); max-width: 100%; }
.news-panel .news-feed-row-title { font-size: 12.5px; }

/* Homepage: two compact cards (small thumbnail + title) under the hero. */
.news-panel .news-subfeatured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 2px; }
.news-panel .news-sub-card { flex-direction: row; align-items: center; border-radius: 8px; }
.news-panel .news-sub-media { flex: 0 0 76px; aspect-ratio: auto; height: 56px; min-height: 0; }
.news-panel .news-sub-fallback { font-size: 18px; }
.news-panel .news-sub-body { gap: 0; padding: 6px 10px; justify-content: center; min-width: 0; }
.news-panel .news-sub-date { display: none; }
.news-panel .news-sub-title { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; }
@media (max-width: 600px) {
  .news-panel .news-subfeatured { grid-template-columns: 1fr; }
}

@media (min-width: 1150px) {
  .news-panel .news-feed-hero { min-height: 280px; padding: 22px; }
  .news-panel .news-feed-hero h2 { font-size: clamp(19px, 1.8vw, 23px); }
}

/* ---------- News article (article.html) ---------- */
.news-article-date { margin-top: 4px; }
.news-article-photo-wrap { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; margin: 20px 0; overflow: hidden; }
.news-article-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-article-body p { color: var(--text); font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
.news-article-body p:last-child { margin-bottom: 0; }

/* ---------- Roster ---------- */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.player-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.player-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.player-photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-3), var(--surface));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-initial {
  font-size: 40px;
  font-weight: 800;
  color: rgba(var(--accent-rgb), 0.35);
}

.player-rank {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(var(--bg-rgb), 0.85);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
}

.player-info { padding: 16px 18px; }
.player-info h3 { font-size: 17px; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; }
.player-real { color: var(--muted-dim); font-size: 12px; margin-top: 2px; }
.player-role {
  color: var(--accent);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
  font-weight: 700;
}
.player-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ---------- Tournaments page (card grid) ---------- */
/* Title + search + filters all live in one bordered bar, matching the
   compact single-row toolbar design — wraps to multiple rows on narrow
   viewports rather than staying forced onto one line. */
.tourney-toolbar-section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.tourney-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; }

/* Heading gives way (subtitle wraps) so longer FR/BG labels don't push
   the controls onto their own row. */
.tourney-page-heading { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
.tourney-page-icon { font-size: 26px; line-height: 1; }
.tourney-page-heading h1 { margin: 0; font-size: 21px; }
.tourney-page-heading .intro-sub { margin-top: 1px; font-size: 12px; }

.tourney-toolbar-controls, .matches-toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Each chip row (status/category/year) reads as one connected segmented
   control, not loose separate pills — shared bordered background, inner
   buttons borderless with the active one picking up the accent fill. */
.tourney-toolbar-controls .tier-category-chips {
  margin: 0;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.tourney-toolbar-controls .scene-tab {
  padding: 6px 13px;
  font-size: 12px;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
}
.tourney-toolbar-controls .scene-tab.active { border-color: transparent; }

/* Independent "more filters" popup — a plain icon-only square button,
   separate from the Status/Category chips which stay inline and always
   visible. Opens its own dropdown panel, not tied to the chips at all. */
.tourney-filter-popup-wrap { position: relative; flex-shrink: 0; }
.tourney-filter-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  transition: all 0.15s ease;
}
.tourney-filter-icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.tourney-filter-icon-btn.active { color: var(--accent); border-color: var(--accent); }

.tourney-filter-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.tourney-filter-popup[hidden] { display: none; }
/* "?" help button on tournaments.html → links to the Formats / Tiers pages. */
.tourney-help-btn { font-size: 15px; font-weight: 800; cursor: pointer; }
.tourney-help-popup { gap: 4px; padding: 6px; width: min(290px, calc(100vw - 32px)); min-width: 0; }
.tourney-help-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none;
}
.tourney-help-link:hover { background: var(--surface-2); }
.tourney-help-title { font-size: 13px; font-weight: 700; }
.tourney-help-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tourney-filter-popup-empty { font-size: 12.5px; color: var(--muted); text-align: center; }

.tourney-filter-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
  margin-bottom: 8px;
}
.tourney-filter-section .tier-category-chips { flex-wrap: wrap; }

.tourney-search-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.tourney-search-wrap svg { position: absolute; left: 10px; color: var(--muted-dim); pointer-events: none; }
.tourney-search-wrap input {
  width: 168px;
  padding: 8px 10px 8px 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}
.tourney-search-wrap input::placeholder { color: var(--muted-dim); }
.tourney-search-wrap input:focus { outline: none; border-color: var(--border-strong); }

.tourney-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.tourney-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.tourney-card:hover { border-color: var(--border-strong); }

.tourney-card-banner {
  position: relative;
  height: 120px;
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
}
.tourney-card-banner .avatar-photo {
  position: absolute;
  inset: auto;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  object-fit: contain;
}

.tourney-live-badge {
  position: absolute; top: 10px; left: 10px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(242, 114, 114, 0.16);
  color: var(--loss);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 9px 4px 7px;
  border-radius: 20px;
}

.tourney-tier-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--surface-3);
  color: var(--tier-color, var(--accent));
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 20px;
}

.tourney-card-body { padding: 14px 16px 16px; }
.tourney-card-body h3 { font-size: 15px; font-weight: 800; color: var(--heading); margin-bottom: 8px; }

.tourney-meta-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.tourney-meta-row svg { flex-shrink: 0; color: var(--muted-dim); }

.tourney-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tourney-prize-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); }
.tourney-prize-amount { font-size: 14px; font-weight: 800; color: var(--accent); }

@media (max-width: 900px) { .tourney-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .tourney-grid { grid-template-columns: 1fr; }
  .tourney-page-icon { font-size: 28px; }
}

/* ---------- Tournaments: event list (tournaments.html) ---------- */
/* Month-banded rows, one panel for Live & Upcoming and one for Completed. */
.tevents { display: flex; flex-direction: column; gap: 20px; }

.tevent-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 10px;
}
.tevent-panel-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; }
.tevent-panel-head h2 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.tevent-panel.is-completed .tevent-panel-head h2 { color: var(--muted); }
.tevent-count {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border-radius: 20px; padding: 2px 8px;
}

.tevent-month {
  background: var(--surface-3);
  border-radius: 6px;
  padding: 7px 12px;
  margin: 6px 0 2px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}

.tevent-row {
  display: grid;
  grid-template-columns: 64px 40px minmax(0, 1fr) 28px 80px 110px 150px 116px;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.tevent-row:last-child { border-bottom: none; }
.tevent-row:hover { background: var(--row-hover-bg); }
.tevent-row:hover .tevent-name { color: var(--accent); }

.tevent-when { font-size: 12px; font-weight: 600; color: var(--muted); }
.tevent-when.is-past { color: var(--muted-dim); }
.tevent-live {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(242, 114, 114, 0.16); color: var(--loss);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 9px 4px 7px; border-radius: 20px;
}

.tevent-logo {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tevent-logo-initial { font-size: 15px; font-weight: 800; color: var(--tier-color, var(--muted)); }
.tevent-logo .avatar-photo { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.tevent-logo.has-photo { background: transparent; }
.tevent-logo.has-photo .tevent-logo-initial { visibility: hidden; }

.tevent-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tevent-name { font-size: 14px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.12s ease; }
.tevent-dates { font-size: 12px; color: var(--muted); }

.tevent-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tevent-stat strong { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tevent-stat strong.has-prize { color: var(--accent); }
.tevent-stat span { font-size: 10.5px; color: var(--muted-dim); }
.tevent-stat .flag-inline { flex-shrink: 0; border-radius: 2px; }

.tevent-cat { display: flex; justify-content: flex-end; }

/* Copy-link button (tournament rows + homepage Tournaments card). */
.copy-link-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 6px;
  color: var(--muted-dim);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.copy-link-btn:hover, .copy-link-btn:focus-visible { color: var(--accent); background: var(--surface-3); outline: none; }
.copy-link-btn.is-copied { color: var(--win, var(--accent)); }
.competition-copy { width: 22px; height: 22px; margin-left: -2px; }
.competition-copy svg { width: 12px; height: 12px; }
.tevent-cat .tourney-tier-badge { position: static; text-align: center; line-height: 1.3; border-radius: 10px; }

/* Player profile Tournaments tab: the same list, with the player's finish
   (Champion / 2nd / Top 8 … and their W-D-L) in place of the Players count. */
.profile-tourney-controls { margin-bottom: 14px; }
.tevent-stat-finish { border-radius: 6px; }
.tevent-stat-finish strong.is-top-1 { color: var(--accent); }
.tevent-stat-finish strong.is-top-2, .tevent-stat-finish strong.is-top-3 { color: var(--heading); }
.tevent-stat-finish .spoiler-veil { flex-direction: row; gap: 5px; padding: 4px 6px; font-size: 10px; }
.tevent-stat-finish .spoiler-veil svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
  .tevent-row { grid-template-columns: 58px 36px minmax(0, 1fr) 28px 96px 84px; }
  .tevent-logo { width: 36px; height: 36px; }
  .tevent-stat-players, .tevent-stat-region { display: none; }
}
@media (max-width: 600px) {
  .tevent-panel { padding: 10px 8px 6px; }
  .tevent-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "logo main prize" "logo when cat"; row-gap: 4px; gap: 4px 10px; padding: 10px 6px; }
  .tevent-logo { grid-area: logo; }
  .tevent-main { grid-area: main; }
  .tevent-when-col { grid-area: when; }
  .tevent-stat-prize { grid-area: prize; text-align: right; }
  .tevent-stat-prize strong { justify-content: flex-end; }
  .tevent-stat-prize span { display: none; }
  .tevent-cat { grid-area: cat; }
  /* Copy-link shares the "when" line, pushed to its right end. */
  .tevent-copy { grid-area: when; justify-self: end; width: 24px; height: 24px; }
  /* Profile rows: the finish takes the prize's corner — it's the point of the tab. */
  .tevent-row:has(.tevent-stat-finish) .tevent-stat-prize { display: none; }
  .tevent-stat-finish { grid-area: prize; text-align: right; }
  .tevent-stat-finish strong { justify-content: flex-end; }
}


/* An umbrella (e.g. FC PRO Open 27 Regional Qualifiers): one row that drops
   down the tournaments under it. */
.tevent-series { border-bottom: 1px solid var(--border); }
.tevent-series:last-child { border-bottom: none; }
.tevent-series-head {
  width: 100%; background: none; border: 0; border-bottom: 1px solid transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.tevent-series-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tevent-series .tevent-cat { align-items: center; gap: 8px; }
.tevent-series-chevron { flex-shrink: 0; color: var(--muted); transition: transform 0.15s ease; }
.tevent-series.is-open .tevent-series-chevron { transform: rotate(180deg); color: var(--accent); }
.tevent-series.is-open > .tevent-series-head { background: var(--row-hover-bg); }
.tevent-series-kids {
  margin: 4px 0 8px 22px; padding-left: 10px;
  border-left: 2px solid var(--accent);
}
.tevent-series-kids .tevent-row:last-of-type { border-bottom: 1px solid var(--border); }
.tevent-series-empty { margin: 8px 12px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 600px) {
  .tevent-series-kids { margin-left: 8px; padding-left: 6px; }
}
/* ---------- Sponsors ---------- */
.sponsor-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sponsor-badge {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 38px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- CTA / Contact ---------- */
.cta-section { text-align: center; }
.cta-inner p { color: var(--muted); margin: 14px 0 0; }
.cta-inner h2 { font-size: clamp(28px, 4vw, 40px); color: var(--heading); font-weight: 800; letter-spacing: -0.02em; }

.social-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 34px;
}

.social-row a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.social-row a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 0;
}

.footer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-row .footer-brand { flex-shrink: 0; gap: 6px; }
.footer-brand .brand-mark { width: 20px; height: 20px; }
.footer-brand .brand-name { font-size: 16px; }

.footer-disclaimer-text {
  flex: 1;
  min-width: 220px;
  color: var(--muted-dim);
  font-size: 10.5px;
  line-height: 1.5;
}

.footer-links { display: flex; gap: 16px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.footer-links a:hover { color: var(--accent); }
.footer-links a.active { color: var(--accent); }

.footer-socials { display: flex; gap: 6px; flex-shrink: 0; }

.footer-socials a {
  position: relative;
  overflow: hidden;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Inline SVGs (same clean vector set as .profile-socials on player.html)
   rather than the raster PNGs — those looked rough shrunk to 26px. */
.footer-socials a svg { display: block; }

.footer-socials a:hover { color: var(--accent); border-color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted-dim);
  font-size: 11px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav { display: none; }

/* ---------- Responsive ---------- */
/* Squeeze the header in stages so nothing ever needs a scrollbar. */
@media (max-width: 1240px) {
  .header-row { gap: 16px; }
  .header-left { gap: 20px; }
  .main-nav-inline { gap: 18px; }
  .account-email-label { max-width: 96px; }
}
@media (max-width: 1080px) {
  .header-search kbd { display: none; }
  .btn-spoiler [data-i18n="header.spoilers"] { display: none; }
  .account-email-label { max-width: 72px; }
  .main-nav-inline { gap: 14px; }
}
@media (max-width: 900px) {
  .main-nav-inline { display: none; }
  .header-search { flex-basis: auto; }
  .header-search kbd { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .sidebar-stack { position: static; }
  .competitions-list { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .competition-item { position: relative; flex-direction: column; align-items: flex-start; gap: 6px; flex: 0 0 132px; background: var(--surface-2); border-radius: 8px; }
  .competition-copy { position: absolute; top: 4px; right: 4px; margin: 0; }
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 1fr; text-align: start; gap: 10px; }
  .event-dates { text-align: start; }
  .profile-overview-grid { grid-template-columns: 1fr; }
  .profile-quick-stats { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: 1fr; }
  .profile-header { flex-wrap: wrap; }
  .profile-actions { width: 100%; align-items: flex-start; }
  .match-detail-two-col { grid-template-columns: 1fr; }
  .tactics-board-head { flex-wrap: wrap; }
  .tactics-layout { grid-template-columns: 1fr; }
  /* Taller pitch on small screens so the bigger player cards don't overlap. */
  .tactics-board { aspect-ratio: auto; height: 470px; }
  .tactics-card { width: 64px; }
  .tactics-card-shield { padding: 6px 2px 10px; height: 94px; }
  .tactics-card-avatar { width: 22px; height: 22px; }
  .tactics-card-role { font-size: 8.5px; height: 32px; overflow-wrap: anywhere; }
  .tactics-card-style { font-size: 7px; letter-spacing: 0; }
  .tactics-card-pos { font-size: 9px; padding: 1.5px 7px; }
  .tactics-board-brand { font-size: 28px; }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    color: var(--muted-dim);
    font-size: 10px;
    font-weight: 600;
  }
  button.bottom-nav-item { background: none; border: 0; font-family: var(--font); cursor: pointer; }
  .bottom-nav-more[aria-expanded="true"] { color: var(--accent); }

  /* "More" sheet: slides up above the tab bar (built by initBottomMoreSheet). */
  .bottom-more-backdrop { position: fixed; inset: 0; z-index: 118; background: rgba(0, 0, 0, 0.55); }
  .bottom-more-sheet {
    position: fixed; left: 0; right: 0; z-index: 119;
    bottom: calc(57px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0; padding: 14px 12px 12px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  }
  .bottom-more-backdrop[hidden], .bottom-more-sheet[hidden] { display: none; }
  .bottom-more-link {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 4px; border-radius: 10px; background: var(--surface-2);
    border: 1px solid var(--border); color: var(--text); font-size: 11.5px; font-weight: 600; text-align: center;
  }
  .bottom-more-link svg { color: var(--muted); }
  .bottom-more-link.active { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }
  .bottom-more-link.active svg { color: var(--accent); }

  .bottom-nav-item:hover, .bottom-nav-item:active, .bottom-nav-item.active { color: var(--accent); }

  body { padding-bottom: 64px; }
}

/* Phone + tablet (the bottom-tab-bar layout, 900px and below) homepage: Matches → News → Player of the Month (→ Birthdays);
   Tournaments and Compare Players are dropped. */
@media (max-width: 900px) {
  .dashboard-grid { display: flex; flex-direction: column; align-items: stretch; }
  .dashboard-grid > .sidebar-stack { display: contents; }
  .dashboard-grid .matches-panel { order: 1; }
  .dashboard-grid .news-panel { order: 2; }
  .dashboard-grid .potm-card { order: 3; }
  .dashboard-grid .birthdays-card { order: 4; }
  .dashboard-grid .home-tournaments-card,
  .dashboard-grid a.dashboard-card.compare-preview-card { display: none; }

  /* Matches: Upcoming / Results tabs + one sideways-scrolling row of cards. */
  .matches-panel .home-match-tabs { display: inline-flex; }
  .matches-panel #matchDateStrip,
  .matches-panel #matchCards,
  .matches-panel .home-results-label { display: none; }
  .matches-panel #homeUpcomingCards,
  .matches-panel #recentResultsCards {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -4px;
    padding: 0 4px 2px;
  }
  .matches-panel #homeUpcomingCards::-webkit-scrollbar,
  .matches-panel #recentResultsCards::-webkit-scrollbar { display: none; }
  .matches-panel #homeUpcomingCards .match-card,
  .matches-panel #recentResultsCards .match-card { flex: 0 0 min(72%, 280px); width: auto; }
  .matches-panel #recentResultsCards { display: none; }
  .matches-panel.show-results #recentResultsCards { display: flex; }
  .matches-panel.show-results #homeUpcomingCards { display: none; }

  /* Header: logo + search + spoilers + settings gear + Login. Light mode
     and language move into the gear's menu (spoilers is in there too). */
  .header-right #langDropdown,
  .header-right #themeToggle { display: none; }
  /* Search shows as a real "Search" bar filling the gap after the logo
     (tapping it still opens the full-width bar from the 600px block above). */
  .header-row > .header-right { flex: 1; justify-content: flex-end; margin-inline-start: 14px; }
  .header-right .header-search:not(.is-expanded) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 12px;
    justify-content: flex-start;
  }
  /* The field covers the whole bar (icon included) so a tap anywhere on it
     lands on the input, not on the icon or padding around it. */
  .header-search:not(.is-expanded) input { position: absolute; inset: 0; width: 100%; opacity: 1; padding: 0 12px 0 35px; border-radius: inherit; }
  .header-search svg { pointer-events: none; }
  .header-right > :not(.header-search) { flex-shrink: 0; }

  /* Footer: everything stacked and centred. */
  .footer-row { flex-direction: column; text-align: center; gap: 14px; }
  .footer-disclaimer-text { min-width: 0; }
  .footer-links, .footer-socials { justify-content: center; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }

  /* Brackets: full height (the page scrolls, not a box inside it), swipe
     sideways with columns snapping into place, and round buttons pinned
     under the header to jump between rounds (initBracketRoundNav). */
  .tournament-bracket-wrap { max-height: none; overflow-y: hidden; scroll-snap-type: x proximity; }
  .tournament-bracket > .bracket-col { scroll-snap-align: start; scroll-margin-left: 4px; }
  .bracket-round-nav {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: var(--header-h); z-index: 20;
    margin: 0 -4px 6px; padding: 8px 4px;
    background: var(--surface);
  }
  .bracket-round-nav::-webkit-scrollbar { display: none; }
  /* Round « / +N » buttons: a bigger tap target on phones. */
  .bracket-round-toggle { flex: none; height: 24px; min-width: 26px; padding: 0 6px; margin: 0 5px 0 0; font-size: 10.5px; }
  /* Narrow columns: the name wraps beside the buttons instead of being cut. */
  .bracket-col .stage-breakdown-round-label:has(.bracket-round-toggle) {
    display: flex; align-items: center; justify-content: center;
    white-space: normal; line-height: 1.25; text-align: left;
  }
  .bracket-round-toggle svg { width: 14px; height: 14px; }
  .bracket-round-chip {
    flex-shrink: 0; padding: 6px 12px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--muted); font: 700 11px var(--font); letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; cursor: pointer;
  }
  /* Pro Settings table: player column pinned while swiping, a fade on the
     right edge and a hint while more columns are off-screen
     (initSettingsSwipeHint). */
  .settings-table th:first-child,
  .settings-table td:first-child { position: sticky; left: 0; z-index: 2; transition: box-shadow 0.15s ease; }
  .settings-table th, .settings-table td { padding-left: 12px; padding-right: 12px; }
  .settings-table th:first-child { background: var(--surface-2); }
  .settings-table td:first-child { background: var(--surface); }
  .settings-table tr.is-futr td:first-child { background: linear-gradient(rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0.07)), var(--surface); }
  .table-wrap.is-scrolled .settings-table th:first-child,
  .table-wrap.is-scrolled .settings-table td:first-child { box-shadow: 8px 0 10px -8px rgba(0, 0, 0, 0.7); }
  .table-wrap.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
  .table-swipe-hint:not([hidden]) {
    display: flex; margin: 0 0 8px auto; padding: 6px 12px;
    background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 999px;
    font: 700 11.5px var(--font); color: var(--accent); cursor: pointer;
    animation: swipe-hint-nudge 1.6s ease-in-out infinite;
  }
  .table-swipe-hint[data-label^="←"] { animation: none; }
  @keyframes swipe-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  /* Page headers: get to the content faster. Lean intros (News, Players,
     Pro Settings) drop the eyebrow + description and show the title as a
     gold label, like Rankings / Meta; every intro gets tighter spacing. */
  .intro { padding: 16px 0 8px; }
  .intro-compact { padding: 16px 0 8px; }
  .intro + .section-top-tight { padding-top: 8px; }
  .intro-lean p.eyebrow,
  .intro-lean .intro-sub { display: none; }
  .intro-lean h1 {
    font-size: 13px; line-height: normal; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  }
  .intro-lean .data-attribution { margin-top: 6px; }

  /* Compare: the two player pickers share the width instead of their search
     boxes pushing the page wider than the screen. */
  .compare-picker-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare-picker { min-width: 0; }
  .bracket-round-chip.active { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.1); }

  .phone-settings { display: block; }
  .phone-settings-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px;
    background: none; color: var(--muted); cursor: pointer;
  }
  .phone-settings-btn[aria-expanded="true"] { color: var(--accent); background: var(--surface-2); }
  .phone-settings-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 150; width: 230px;
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
    background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
  .phone-settings-menu[hidden] { display: none; }
  .phone-settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font: 600 13px var(--font); cursor: pointer;
  }
  .phone-settings-state { font-size: 12px; font-weight: 800; color: var(--muted); }
  .phone-settings-row[data-pref="spoilers"] .phone-settings-state { color: var(--win); }
  body.spoilers-hidden .phone-settings-row[data-pref="spoilers"] .phone-settings-state { color: var(--loss); }
  .phone-settings-langs { display: flex; gap: 6px; }
  .phone-settings-lang {
    flex: 1; padding: 9px 0; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
    color: var(--muted); font: 700 12px var(--font); cursor: pointer;
  }
  .phone-settings-lang.active { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); }
}

/* Rankings on phones/tablets (900px and below, where the 6-column table gets cramped):
   each row becomes a two-line entry — rank · player · points, then
   flag · team · change underneath — so nothing sits off-screen. */
@media (max-width: 900px) {
  #standingsTable { min-width: 0; display: block; }
  #standingsTable thead { display: none; }
  #standingsTable tbody { display: block; }
  #standingsTable tbody tr {
    display: grid;
    grid-template-columns: 26px auto minmax(0, 1fr) auto;
    grid-template-areas: "rank player player pts" "rank country team change";
    align-items: center; column-gap: 8px; row-gap: 3px;
    padding: 10px 12px;
  }
  #standingsTable td { padding: 0; min-width: 0; text-align: start; }
  #standingsTable td:nth-child(1) { grid-area: rank; align-self: center; font-size: 13px; }
  #standingsTable td:nth-child(2) { grid-area: player; min-width: 0; }
  #standingsTable td:nth-child(2) .team-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Country: just the flag, lined up under the player's name. */
  #standingsTable td:nth-child(3) { grid-area: country; font-size: 0; padding-inline-start: 42px; line-height: 0; }
  #standingsTable td:nth-child(3) .flag-inline { margin: 0; }
  #standingsTable td:nth-child(4) {
    grid-area: team; font-size: 12px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #standingsTable td:nth-child(4) .team-inline { display: inline; }
  #standingsTable td:nth-child(4) .team-logo-inline { vertical-align: -2px; }
  #standingsTable td:nth-child(5) { grid-area: pts; text-align: end; font-size: 14px; }
  #standingsTable td:nth-child(6) { grid-area: change; text-align: end; }
}

/* ---------- Tier List page ---------- */
.tier-main-tabs { max-width: 420px; margin-bottom: 20px; }
.tier-main-tabs[hidden] { display: none; }

.btn-ghost-sm {
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-sm[hidden] { display: none; }

/* Promos & PlayStyles: expert-curated, added over time via data/tier-promos.json
   — starts empty, never shows fabricated tier lists in the meantime. */
.tier-promo-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.tier-promo-search { max-width: none; flex: 1; margin: 0; }

.tier-category-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tier-category-chips .scene-tab { padding: 7px 16px; font-size: 12.5px; }
/* matches.html: All/Live/Scheduled/Finished switcher, Game + Tournament
   dropdowns, and the match list grouped under tournament bars. */
.mlist-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.mlist-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mlist-segs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.mlist-seg { background: none; border: 0; color: var(--muted); font: 600 13px var(--font); padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mlist-seg + .mlist-seg { box-shadow: inset 1px 0 0 var(--border); }
.mlist-seg:hover { color: var(--text); }
.mlist-seg.active { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.mlist-seg.active + .mlist-seg { box-shadow: none; }

.match-results-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.match-filter { position: relative; }
.mms-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--muted); cursor: pointer; font-family: var(--font); }
.mms-btn:hover, .match-filter.is-open .mms-btn { border-color: var(--border-strong); }
.match-filter.has-value .mms-btn { border-color: rgba(var(--accent-rgb), 0.6); }
.match-filter-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mms-value { flex: 1; min-width: 0; max-width: 210px; text-align: start; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mms-btn svg { flex-shrink: 0; transition: transform .15s ease; }
.match-filter.is-open .mms-btn svg { transform: rotate(180deg); }
.mms-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: max(100%, 240px); padding: 6px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
.mms-menu[hidden] { display: none; }

.mlist { display: flex; flex-direction: column; gap: 10px; }
.mlist-empty { color: var(--muted); font-size: 14px; padding: 28px 0; text-align: center; margin: 0; }
.mlist-head { display: flex; align-items: center; gap: 10px; background: var(--surface-3); border-radius: 8px; padding: 9px 14px; cursor: pointer; user-select: none; }
.mlist-head:hover .mlist-toggle { color: var(--text); }
.mlist-open { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: -4px; border-radius: 4px; color: var(--muted-dim); flex-shrink: 0; }
.mlist-open:hover { color: var(--accent); background: var(--row-hover-bg); }
.mlist-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.mlist-title { font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.mlist-title:hover { color: var(--accent); }
.mlist-sub { font-size: 11.5px; color: var(--muted-dim); white-space: nowrap; }
.mlist-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font: 500 11.5px var(--font); cursor: pointer; padding: 2px 0; white-space: nowrap; }
.mlist-toggle:hover { color: var(--text); }
.mlist-toggle svg { transition: transform .15s ease; }
.mlist-group.is-closed .mlist-toggle svg { transform: rotate(-90deg); }
.mlist-group.is-closed .mlist-body { display: none; }

.mlist-row { display: grid; grid-template-columns: 76px minmax(0, 320px) minmax(0, 1fr); align-items: center; gap: 16px; padding: 11px 14px; color: var(--text); text-decoration: none; transition: background .15s ease; }
.mlist-row + .mlist-row { border-top: 1px solid var(--border); }
.mlist-row:hover { background: var(--row-hover-bg); }
.mlist-row.is-extra { display: none; }
.mlist-group.is-expanded .mlist-row.is-extra { display: grid; }
.mlist-when { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.mlist-time { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mlist-state { font-size: 11px; color: var(--muted-dim); }
.mlist-live { background: var(--loss); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.mlist-players { display: flex; flex-direction: column; gap: 6px; border-radius: 6px; min-width: 0; }
.mlist-player { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.mlist-player .team-badge { width: 22px; height: 22px; font-size: 10px; }
.mlist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlist-score { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.mlist-player.loser { color: var(--muted); font-weight: 600; }
.mlist-players .spoiler-veil { flex-direction: row; font-size: 10px; }
.mlist-round { justify-self: end; text-align: right; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mlist-more-btn, .compare-h2h-more { display: block; margin: 4px auto 2px; background: none; border: 0; color: var(--accent); font: 600 12.5px var(--font); cursor: pointer; padding: 6px 12px; }
.mlist-more-btn:hover, .compare-h2h-more:hover { text-decoration: underline; }
.compare-h2h-more[hidden] { display: none; }
@media (max-width: 640px) {
  .mlist-panel { padding: 10px; }
  .mlist-segs { width: 100%; }
  .mlist-seg { flex: 1; padding: 7px 6px; }
  .match-results-filters, .match-filter { width: 100%; }
  .match-results-filters .match-filter { flex: 1; min-width: 0; width: auto; }
  .mms-value { max-width: none; }
  .mms-menu { left: 0; right: auto; width: 100%; min-width: 220px; }
  .match-filter + .match-filter .mms-menu { left: auto; right: 0; }
  .mlist-sub { display: none; }
  .mlist-row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 10px 8px; }
  .mlist-round { grid-column: 2; justify-self: start; text-align: start; font-size: 11.5px; }
}

.tier-promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.tier-promo-card {
  display: block;
  width: 100%;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.tier-promo-card:hover { border-color: var(--accent); }

.tpc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tpc-title { font-size: 14.5px; font-weight: 800; color: var(--heading); }
.tpc-category {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tpc-thumbs { display: flex; gap: 8px; margin-bottom: 12px; }
.tpc-thumb {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.tpc-thumb .avatar-photo { border-radius: 5px; object-fit: contain; }

.tpc-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted-dim); }

/* Tournament tier-list builder — client-side only for now, resets on reload.
   Picker is a two-column Upcoming/Completed event list (see reference: a
   VLR.gg-style events browse); picking a row swaps to the S–D board. */
.tier-tournament-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tier-col-label.upcoming { color: var(--accent); }
.tier-col-label.completed { color: var(--muted); }
.tier-tournament-list { display: flex; flex-direction: column; gap: 10px; }

.tier-tournament-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: start;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.tier-tournament-row:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.tier-tournament-row h3 { font-size: 14px; font-weight: 800; color: var(--heading); }
.ttr-meta { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.ttr-status { font-weight: 800; }
.ttr-status.ongoing { color: var(--loss); }
.ttr-status.upcoming { color: var(--accent); }
.ttr-status.completed { color: #a78bfa; }
.ttr-logo {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--muted-dim);
  flex-shrink: 0;
}
.ttr-logo .avatar-photo { object-fit: contain; }

/* Builder view (S–D board), shown after a tournament is picked */
.tier-builder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tier-builder-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tier-builder-heading-icon {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tier-builder-heading-icon:empty { display: none; }
.tier-builder-heading-icon .avatar-photo { object-fit: contain; }
.tier-builder-heading h2 { font-size: 18px; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; }
.tier-builder-hint { color: var(--muted); font-size: 12.5px; margin-bottom: 18px; }

.tier-board[hidden] { display: none; }
.tier-row { display: flex; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.tier-row-label {
  flex-shrink: 0;
  width: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: var(--on-accent);
  background: var(--tier-color, var(--surface-3));
}
.tier-row-slots {
  flex: 1;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px;
  padding: 10px;
  min-height: 56px;
}
.tier-row.tier-pool-row { border-style: dashed; }
.tier-row.tier-pool-row .tier-row-label { background: var(--surface-3); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.tier-row-slots.drop-target { background: rgba(var(--accent-rgb), 0.08); }

.tier-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: border-color 0.15s ease;
}
.tier-chip:hover { border-color: var(--accent); }
.tier-chip.static { cursor: default; touch-action: auto; }
.tier-chip.dragging {
  cursor: grabbing;
  z-index: 1000;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  border-color: var(--accent);
  pointer-events: none;
}
.tier-chip-avatar {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--muted-dim);
}
.tier-chip-avatar .avatar-photo { border-radius: 50%; }
.tier-chip-avatar.tier-chip-icon { border-radius: 5px; }
.tier-chip-avatar.tier-chip-icon .avatar-photo { border-radius: 5px; object-fit: contain; }

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .roster-grid { grid-template-columns: 1fr; }
  .brand-name { display: none; }
  .profile-header { flex-wrap: wrap; }
  .profile-actions { width: 100%; }
  .btn-compare-link { flex: 1; text-align: center; }
  .tier-promo-grid { grid-template-columns: 1fr; }
  .tier-row-label { width: 40px; font-size: 15px; }
  .tier-tournament-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* Pro verification: "contact us" nudge */
.pro-verify-contact { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.22); color: var(--text); font-size: 12.5px; line-height: 1.5; }
.pro-verify-contact b { color: var(--heading); }
.pro-verify-contact a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Several tactics per player: editor tabs + the pills on the profile */
.tactic-tabs, .tactic-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.tactic-tab, .tactic-pill {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tactic-tab:hover, .tactic-pill:hover { color: var(--heading); border-color: var(--border-strong); }
.tactic-tab.active, .tactic-pill.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tactic-tab-add { border-style: dashed; color: var(--accent); background: transparent; }
.tactic-pill-star { margin-right: 5px; color: #ffcc4d; }
.tactic-pill.active .tactic-pill-star { color: var(--on-accent); }
.tactic-tab-note { margin: 0 0 8px; color: #ffcc4d; }
.tactic-tab-note:empty { display: none; }
.tactic-tab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tactic-tab-actions [hidden] { display: none; }
.tactic-primary-tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 204, 77, 0.14); color: #ffcc4d; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.tactics-board-wrap > .tactic-pills { margin: 0 0 12px; }

/* Flag and country name always sit side by side, never stacked. */
.flag-inline { display: inline-block; flex-shrink: 0; }
.standings-table td:nth-child(3) { white-space: nowrap; }
@media (max-width: 600px) {
  /* Tighter cells so more of the table (flag + country included) fits without side-scrolling. */
  .standings-table thead th { padding: 10px 10px; }
  .standings-table td { padding: 12px 10px; font-size: 13px; }
  .standings-table { min-width: 0; }
}

/* Type-to-filter dropdown (js/ingame-form.js) */
.combo { position: relative; display: block; }
.combo input { width: 100%; cursor: pointer; padding-right: 30px !important; }
.combo::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.combo input:focus { cursor: text; }
.combo-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 232px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.combo-list[hidden] { display: none; }
.combo-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.combo-item.is-active { background: var(--surface-2); color: var(--accent); }
.combo-item.is-selected { font-weight: 700; color: var(--accent); }
.combo-empty { padding: 8px 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* Create Account (signup.html) */
.signup-card {
  max-width: 720px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.signup-card[hidden] { display: none; }
.signup-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.signup-steps[hidden] { display: none; }
.signup-steps li { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted-dim); }
.signup-steps li span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--surface-3);
  color: var(--muted);
}
.signup-steps li.is-current { color: var(--heading); }
.signup-steps li.is-current span { background: var(--accent); color: var(--on-accent); }
.signup-steps li.is-done { color: var(--muted); }
.signup-steps li.is-done span { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); }
.signup-step[hidden] { display: none; }
.signup-step-title { font-size: 16px; font-weight: 800; color: var(--heading); margin-bottom: 14px; }
.signup-step .account-settings-hint { margin-top: -8px; }
.signup-field-note { color: var(--muted-dim); font-size: 11.5px; font-weight: 500; }
.signup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.signup-type { border: none; padding: 0; margin: 6px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signup-type legend { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.signup-type-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-3);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.signup-type-option:hover { border-color: var(--border-strong); }
.signup-type-option:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.signup-type-option input { accent-color: var(--accent); margin-top: 2px; }
.signup-type-body { display: flex; flex-direction: column; gap: 4px; }
.signup-type-body b { color: var(--heading); font-size: 13.5px; }
.signup-type-body small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.signup-picked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.08);
}
.signup-picked[hidden] { display: none; }
.signup-picked-name { flex: 1; font-size: 13.5px; color: var(--text); }
.signup-picked-name b { color: var(--heading); }
.signup-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 14px; }
.social-input > span:first-child { display: flex; align-items: center; gap: 7px; }
.social-input-icon { display: inline-flex; color: var(--text); }
.social-input-icon svg { width: 14px; height: 14px; }
.signup-note {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.signup-note b { color: var(--heading); }
.signup-done-text { color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 560px; }
.signup-done-text b { color: var(--heading); }
.signup-done-text a { color: var(--accent); }
.signup-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.signup-nav[hidden] { display: none; }
.signup-nav .btn-login { margin-left: auto; min-width: 140px; height: 40px; }
.signup-nav .btn-login:disabled { opacity: 0.6; cursor: default; }
.signup-login[hidden] { display: none; }
@media (max-width: 560px) {
  .signup-card { padding: 18px 16px; }
  .signup-pair, .signup-type { grid-template-columns: 1fr; }
}
#suTactics > .pro-form-group-title:first-child { display: none; }
.account-socials-form { max-width: 720px; }
.account-profile-socials { margin-top: 10px; }
.account-profile-socials[hidden] { display: none; }
.signup-kind { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 9px; }
.signup-kind-option { position: relative; cursor: pointer; }
.signup-kind-option input { position: absolute; opacity: 0; pointer-events: none; }
.signup-kind-option span { display: block; padding: 7px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.signup-kind-option input:checked + span { background: var(--accent); color: var(--on-accent); }
.signup-kind-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pro-verify-new .pvr-name { font-weight: 500; }
.pro-verify-new .pvr-name b { font-weight: 800; color: var(--heading); }
.pro-verify-new .pvr-initial { color: var(--accent); }
.admin-claim-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
/* signup.html: centre the heading and the form card */
.signup-card { margin: 0 auto; }
.signup-intro .container { max-width: 720px; text-align: center; }
#signupSignedIn { max-width: 720px; margin: 0 auto; }
.signup-intro .container > * { margin-left: auto; margin-right: auto; }

/* Penalty shootout score shown after a match score, e.g. "1 (4)". */
.score-pens { font-size: 0.8em; font-weight: 700; opacity: 0.75; }

/* ---------- Tournament stages: groups (round-robin + GSL) and stage switch ---------- */
.stage-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.stage-switch-btn { padding: 6px 14px; border: none; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.stage-switch-btn:hover { color: var(--text); }
.stage-switch-btn.active { background: var(--surface-3); color: var(--heading); }
[data-stage-pane][hidden] { display: none; }
/* "Find a player" over the Tournament Stages (wireStageSearch in js/script.js). */
.stage-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stage-toolbar[hidden] { display: none; }
.stage-toolbar .stage-switch { margin-bottom: 0; }
.stage-toolbar.is-search-only { justify-content: flex-end; }
.stage-search-dropdown { width: max(100%, 280px); max-height: min(380px, 60vh); }
.stage-search { position: relative; display: flex; align-items: center; height: 38px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--muted); }
.stage-search[hidden] { display: none; }
.stage-search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); }
.stage-search-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: none; background: transparent; color: inherit; cursor: pointer; border-radius: 9px; }
.stage-search-btn:hover { color: var(--heading); }
.stage-search.is-open .stage-search-btn { color: var(--accent); }
.stage-search-input { width: 0; min-width: 0; padding: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; outline: none; transition: width 0.18s ease; }
.stage-search.is-open .stage-search-input { width: 180px; padding-right: 8px; }
.stage-search-status { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.stage-search:not(.is-open) .stage-search-status, .stage-search-status:empty { display: none; }
.stage-search.is-open .stage-search-status { padding-right: 10px; }
.is-searching .bracket-match:not(.is-search-match),
.is-searching .bracket-qualified:not(.is-search-match) { opacity: 0.3; }
.bracket-side.is-search-hit { color: var(--heading); box-shadow: inset 3px 0 0 var(--accent); background: rgba(var(--accent-rgb), 0.18); }
.is-searching .bracket-match.is-search-match,
.is-searching .bracket-qualified.is-search-match { border-color: rgba(var(--accent-rgb), 0.7); }
.group-standings tr.is-search-hit > td { background: rgba(var(--accent-rgb), 0.08); }
/* One player found: the bracket shows only their run (applyStageSearch). */
.tournament-bracket .is-path-off { display: none !important; }
.tournament-bracket.is-path .bracket-col.is-collapsed:not(.is-path-off) { display: flex; }
.tournament-bracket.is-path .bracket-round-toggle { display: none; }
.bracket-round-nav:has(+ .tournament-bracket-wrap .tournament-bracket.is-path) { display: none !important; }
.tournament-bracket.is-path .bracket-match { opacity: 1; }
.stage-switch-btn.has-search-hit::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; margin-bottom: 16px; }
/* GSL groups two to a row: each little bracket shrinks to its card (two
   columns sharing the width) instead of a fixed 200px per column. */
.group-grid.is-gsl { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.group-card .tournament-bracket.is-gsl { gap: 14px; width: auto; min-width: 0; }
.group-card .tournament-bracket.is-gsl .bracket-tier-cols { gap: 24px; }
.group-card .tournament-bracket.is-gsl .bracket-col { flex: 1 1 0; min-width: 130px; max-width: none; }
.group-card .tournament-bracket.is-gsl .bracket-col .stage-breakdown-round-label { margin: 0 -12px 6px; padding: 6px 12px 4px; }
.group-card .tournament-bracket.is-gsl .bracket-col:last-child .stage-breakdown-round-label { margin-right: 0; padding-right: 0; }
.group-card .tournament-bracket.is-gsl .bracket-tier-label { margin-bottom: 4px; }
/* GSL groups sit on a surface-2 card, so their round labels match it. */
.group-card .bracket-col .stage-breakdown-round-label { background: var(--surface-2); }
.group-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; min-width: 0; }
.group-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.group-card-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); }
.group-card-kind { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 10px; padding: 2px 7px; }
.group-standings-wrap { margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
.group-standings { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.group-standings th { white-space: nowrap; text-align: start; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); padding: 0 4px 8px; }
.group-standings td { padding: 10px 4px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; white-space: nowrap; }
.group-standings td:first-child, .group-standings th:first-child { width: 18px; color: var(--muted-dim); }
.group-standings td:nth-child(2) { width: 100%; max-width: 0; }
.group-standings-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.group-standings tr.is-qualified td:first-child { color: var(--win); }
.group-standings tr.is-eliminated td { color: var(--muted-dim); }
/* Even, centred number columns; Pts stands out. */
.group-standings th:nth-child(n+3), .group-standings td:nth-child(n+3) { min-width: 24px; text-align: center; padding-left: 4px; padding-right: 4px; font-variant-numeric: tabular-nums; }
.group-standings td:nth-child(n+3) { color: var(--muted); }
.group-standings td:last-child { color: var(--heading); }
.group-standings td:first-child, .group-standings th:first-child { text-align: center; }
/* Table places that go through: a bar on the place number (key below the grid). */
.group-standings tr.is-through td:first-child, .group-standings tr.is-second td:first-child { box-shadow: inset 3px 0 0 var(--zone); color: var(--zone); }
.group-standings tr.is-through { --zone: var(--win); }
.group-standings tr.is-second { --zone: var(--accent); }
.group-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: -4px 0 16px; font-size: 11px; font-weight: 700; color: var(--muted); }
.group-legend span { display: inline-flex; align-items: center; gap: 6px; }
.group-legend i { width: 3px; height: 12px; border-radius: 2px; background: var(--win); }
.group-legend i.is-second { background: var(--accent); }
/* Swiss standings: 3-loss players are out. */
.group-standings tr.is-out td { color: var(--muted-dim); }
.group-standings tr.is-out td:first-child { box-shadow: inset 3px 0 0 var(--loss); color: var(--loss); }
.group-legend i.is-out { background: var(--loss); }
.group-standings td b { color: var(--heading); }
.group-standings tr.is-out td b { color: inherit; }
/* Click a player → their matches in that stage open under the row. */
.group-standings tr.has-matches { cursor: pointer; transition: background 0.15s ease; }
.group-standings tr.has-matches:hover, .group-standings tr.has-matches.is-open { background: var(--row-hover-bg); }
.group-standings tr.has-matches:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-standings tr.standings-matches td { width: auto; max-width: none; padding: 4px 6px 8px; text-align: start; white-space: normal; color: var(--text); background: var(--row-hover-bg); border-top: none; box-shadow: none; }
.standings-match { display: grid; grid-template-columns: 22px minmax(0, 110px) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 12px; }
.standings-match + .standings-match { border-top: 1px solid var(--border); }
.standings-match:hover { background: var(--surface-3); }
.standings-match-res { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 10px; font-weight: 800; color: var(--muted-dim); background: var(--surface-3); }
.standings-match-res.is-w { color: var(--win); background: rgba(92, 224, 138, 0.16); }
.standings-match-res.is-l { color: var(--loss); background: rgba(242, 114, 114, 0.14); }
.standings-match-res.is-d { color: var(--muted); }
.standings-match-round { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings-match-opp { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.standings-match-score { font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.standings-match-none { display: block; padding: 6px 8px; font-size: 12px; color: var(--muted-dim); }
@media (max-width: 480px) { .standings-match { grid-template-columns: 22px minmax(0, 1fr) auto; } .standings-match-round { display: none; } }
/* One table (league phase / Swiss) takes the full width. */
.group-grid.is-single { grid-template-columns: 1fr; }
.group-card-sub { font-size: 10px; font-weight: 700; color: var(--muted-dim); }
.group-tag { display: inline-block; min-width: 18px; text-align: center; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 1px 4px; }
.group-tag-q { background: rgba(92, 224, 138, 0.16); color: var(--win); }
.group-tag-e { background: rgba(242, 114, 114, 0.14); color: var(--loss); }
.group-card-matches .stage-breakdown-row { margin: 0 -6px; padding: 6px; }
.group-match-slot { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); margin-top: 8px; }
.match-detail-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.match-detail-games span { font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface-3); border-radius: 6px; padding: 3px 8px; }
.match-detail-games small { color: var(--muted-dim); font-weight: 800; margin-right: 4px; }

/* ---------- Tournament page admin: bar, edit mode, editor sheet, stage builder (js/admin-edit.js) ---------- */
.tourney-admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 12px; background: rgba(var(--accent-rgb), 0.06); border: 1px dashed rgba(var(--accent-rgb), 0.45); border-radius: 10px; }
.tourney-admin-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-right: 4px; }
.tourney-admin-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.tourney-admin-toggle b { color: var(--text); }
.tourney-admin-toggle.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.tourney-admin-toggle.active b { color: var(--accent); }
.tourney-admin-open { display: inline-flex; align-items: center; gap: 6px; }
.tourney-admin-hint { font-size: 12px; color: var(--muted); }
.tourney-admin-status { font-size: 12px; color: var(--muted); margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border-strong); }
.tourney-admin-status b { color: var(--text); }
.tourney-admin-status[data-pickem-status="live"] b { color: var(--accent); }
.tourney-admin-freeze { padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface, transparent); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tourney-admin-frozen { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.pickem-stage-lock { display: inline-flex; vertical-align: 1px; margin-left: 4px; opacity: 0.6; }
.tourney-admin-hint[hidden] { display: none; }
body.tourney-edit-mode #tournamentContent .spoiler-veil { display: none; }
body.tourney-edit-mode #tournamentContent a[href^="match.html#id="] { outline: 1px dashed rgba(var(--accent-rgb), 0.55); outline-offset: -1px; cursor: pointer; }
body.tourney-edit-mode #tournamentContent a[href^="match.html#id="]:hover { outline: 2px solid var(--accent); }
body.tourney-edit-mode #tournamentContent a[href^="match.html#id="]::after {
  content: '\270E'; position: absolute; top: 3px; right: 5px; z-index: 3;
  font-size: 11px; line-height: 1; color: var(--accent); opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
body.tourney-edit-mode #tournamentContent a[href^="match.html#id="]:hover::after { opacity: 1; }
.admin-danger-btn:hover { border-color: var(--loss); color: var(--loss); }
.admin-merge-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.admin-merge-public { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

.tourney-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; }
.tourney-editor-format { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 700; }
.tourney-editor-format select { height: 32px; padding: 0 8px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: inherit; font-size: 12px; }
.tourney-editor-stages { display: flex; flex-direction: column; gap: 14px; }
.tourney-editor-stage { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.tourney-editor-stage + .tourney-editor-stage, .tourney-editor-stages + .tourney-editor-stage { margin-top: 0; }
.tourney-editor-stages + .tourney-editor-stage { margin-top: 14px; }
.tourney-editor-stage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tourney-editor-stage-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); }
.tourney-editor-stage-head small { font-size: 11.5px; color: var(--muted-dim); }
.tourney-editor-stage-actions { display: flex; gap: 6px; margin-left: auto; }
.tourney-editor-stage-actions .btn-ghost-sm { padding: 5px 10px; font-size: 11.5px; }
.tourney-editor-match {
  display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto minmax(0, 1fr) 72px 64px; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px; border: none; border-top: 1px solid var(--border); background: transparent;
  color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; text-align: start; cursor: pointer; border-radius: 6px;
}
.tourney-editor-match:hover { background: var(--row-hover-bg); box-shadow: var(--row-hover-glow); }
.tem-sub { font-size: 10.5px; color: var(--muted-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tem-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.tem-name-b { text-align: start; }
.tem-name.is-winner { color: var(--heading); font-weight: 800; }
.tem-score { font-weight: 800; color: var(--text); white-space: nowrap; }
.tem-status { font-size: 11px; color: var(--muted-dim); }
.tem-tag { justify-self: end; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 10px; padding: 2px 7px; color: var(--muted-dim); border: 1px solid var(--border-strong); }
.tem-tag-edited { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); }
.tourney-hidden-note { margin-top: 14px; padding: 9px 12px; border: 1px dashed rgba(var(--accent-rgb), 0.45); border-radius: 10px; font-size: 12.5px; color: var(--muted); }
.tourney-hidden-note[hidden] { display: none; }
.tourney-hidden-note b, .admin-hidden-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-right: 6px; }
.admin-hidden-tag { margin: 0 0 0 6px; padding: 2px 6px; border: 1px solid rgba(var(--accent-rgb), 0.5); border-radius: 5px; vertical-align: 1px; }
.tem-tag-added { color: var(--win); border-color: rgba(92, 224, 138, 0.45); }
.tourney-editor-hidden { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }

.override-versus { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--heading); }
.override-versus small { font-size: 11px; font-weight: 700; color: var(--muted-dim); text-transform: uppercase; }
.override-tag { color: var(--accent); }
.override-score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.game-score-block { margin-bottom: 12px; }
.game-score-block[hidden] { display: none; }
.game-score-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.game-score-row > span:first-child { width: 60px; }
.game-score-row input { width: 70px; height: 34px; padding: 0 8px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px; color: var(--heading); font-family: inherit; font-size: 13px; }
.game-score-sep { color: var(--muted-dim); }

.stage-builder-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.stage-builder-opts:empty { display: none; }
.stage-builder-fill { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.stage-builder-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.stage-builder-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.stage-builder-group-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); margin-bottom: 8px; }
.stage-builder-slot { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted-dim); }
.stage-builder-slots input, .stage-builder-pair input { width: 100%; height: 34px; padding: 0 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px; color: var(--heading); font-family: inherit; font-size: 13px; box-sizing: border-box; min-width: 0; }
.stage-builder-slots input:focus, .stage-builder-pair input:focus { outline: none; border-color: var(--border-strong); }
.stage-builder-pairs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 16px; }
.stage-builder-pair { display: flex; align-items: center; gap: 8px; }
.stage-builder-pair-n { width: 18px; flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--muted-dim); }
.stage-builder-pair small { font-size: 10px; font-weight: 700; color: var(--muted-dim); text-transform: uppercase; }

/* Double-elimination brackets: the upper bracket (ending in the Grand
   Final) on one row, the lower bracket below it. Connector lines are drawn
   per row — see drawBracketConnectors. */
.tournament-bracket.is-tiered { flex-direction: column; gap: 28px; }
.bracket-tier-label { margin-bottom: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.named-bracket + .named-bracket { margin-top: 28px; }
.named-bracket-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.bracket-tier-cols { display: flex; gap: 56px; }

/* Tournament workspace (admin-edit.js openTournamentWorkspace):
   Details → Players → Results, everything saved as it's entered. */
.admin-modal.admin-modal-wide { max-width: 1240px; }
.tb-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; align-items: end; }
.tb-settings .admin-edit-check { grid-column: 1 / -1; }
/* Tournament details: placement → qualifies for another tournament (qual_paths). */
.qual-paths { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px; margin: 4px 0 16px; min-width: 0; }
.qual-paths legend { padding: 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.qual-path-row { display: grid; grid-template-columns: 90px 90px 1fr; gap: 0 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--border); }
.qual-path-row .qual-path-players { grid-column: 1 / -1; }
.qual-path-row .qual-path-players textarea { min-height: 0; }
.qual-path-row [data-qp-remove] { justify-self: start; }
.qual-path-row.is-top-x { grid-template-columns: 90px 1fr auto; padding: 8px 0 0; border-top: 0; }
.qual-path-row.is-top-x [data-qm-remove] { margin-bottom: 14px; }
[data-qm-add] { margin: 2px 0 8px; }
@media (max-width: 520px) { .qual-path-row { grid-template-columns: 1fr 1fr; } .qual-path-row .qual-path-target { grid-column: 1 / -1; } }
.tb-steps { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tb-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.tb-step span {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 11.5px; font-weight: 800;
}
.tb-step small { font-size: 11px; color: var(--muted-dim); font-weight: 700; }
.tb-step:hover { border-color: var(--border-strong); color: var(--text); }
.tb-step.is-done span { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); }
.tb-step.is-active { border-color: var(--accent); color: var(--heading); background: rgba(var(--accent-rgb), 0.1); }
.tb-step.is-active span { background: var(--accent); color: var(--on-accent); }
.tb-step.is-locked { opacity: 0.45; cursor: not-allowed; }
.tb-step.is-locked:hover { border-color: var(--border); color: var(--muted); }

.tb-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.tb-footer .account-settings-hint { margin: 0; }
.tb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.tb-toolbar .account-settings-hint { margin: 0; }
.tb-inline-num { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tb-inline-num input { width: 64px; height: 32px; padding: 0 8px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px; color: var(--heading); font-family: inherit; font-size: 13px; }
.tb-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; }
.tb-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.tb-round-sub { margin: 12px 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-dim); }
.tb-zone-empty { font-size: 12px; color: var(--muted-dim); }

/* Players step: chips dragged into groups / seeding order. */
.tb-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.tb-board-head .account-settings-hint { margin: 0; flex: 1 1 320px; }
.tb-board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tb-zone {
  padding: 10px; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--border-strong);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tb-zone.is-over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.tb-zone-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); }
.tb-zone-title small { font-size: 11px; color: var(--muted-dim); }
.tb-zone-title small.is-warn { color: var(--draw); }
.tb-zone-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: flex-start; }
.tb-pool { margin-bottom: 10px; }
.tb-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tb-group-grid .tb-zone { border-style: solid; border-color: var(--border); }
.tb-group-grid .tb-zone.is-over { border-color: var(--accent); }
.tb-group-grid .tb-zone-chips { flex-direction: column; align-items: stretch; min-height: 60px; }
.tb-seed-list { display: flex; flex-direction: column; gap: 6px; border-style: solid; border-color: var(--border); }
.tb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: 9px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--heading);
  cursor: grab; user-select: none;
}
.tb-chip > span:not(.pvr-avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-chip .pvr-avatar { width: 26px; height: 26px; border-radius: 7px; }
.tb-chip .pvr-initial { font-size: 11px; }
.tb-chip button { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1; }
.tb-chip button:hover { color: #fff; background: var(--loss); }
.tb-chip.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); }
.tb-chip.is-dragging { opacity: 0.4; }
.tb-chip.is-tbd { background: transparent; border-style: dashed; color: var(--muted); }
.tb-chip.is-tbd.is-picked { border-style: solid; }
.tb-search-row { display: flex; align-items: flex-end; gap: 10px; }
.tb-search-row .auth-field { flex: 1; min-width: 0; margin-bottom: 0; }
.tb-search-row > .btn-ghost-sm { flex-shrink: 0; height: 40px; }
.tb-seed-n { min-width: 22px; text-align: center; font-size: 11px; color: var(--accent); }
.tb-ko-seeds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.tb-ko-seeds .tb-chip { cursor: default; padding: 5px 10px 5px 4px; }
/* Participants step → "Who they represent": avatar · name · nation/club box. */
.tb-represents { margin-top: 14px; border-style: solid; border-color: var(--border); }
.tb-represents > .account-settings-hint { margin: 0 0 10px; }
.tb-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.tb-rep-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 6px 5px 5px; border-radius: 9px;
  background: var(--surface-3); border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}
.tb-rep-row:focus-within { border-color: var(--border-strong); }
.tb-rep-row .pvr-avatar { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.tb-rep-row .pvr-initial { font-size: 11px; }
.tb-rep-name { flex: 0 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--heading); }
.tb-rep-row input {
  flex: 1 1 0; min-width: 0; height: 32px; padding: 0 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--heading); font-size: 12.5px; font-family: inherit; outline: none;
  transition: border-color 0.15s ease;
}
.tb-rep-row input::placeholder { color: var(--muted-dim); opacity: 1; }
.tb-rep-row input:focus { border-color: var(--accent); }
@media (max-width: 900px) { .tb-rep-grid { grid-template-columns: 1fr; } }

/* Results step */
.tb-stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.tb-stage-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-dim); }
.tb-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.tb-seg button { padding: 7px 16px; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.tb-seg button:hover { color: var(--heading); }
.tb-seg button.is-active { background: var(--accent); color: var(--on-accent); }
.tb-save-hint { margin: 0 0 0 auto; }
.tb-next-stage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding: 14px 16px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.06); border: 1px dashed rgba(var(--accent-rgb), 0.45);
}
.tb-next-stage .account-settings-hint { margin: 2px 0 0; }

.tb-round-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tb-round-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.tb-round-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
}
.tb-round-tabs button small { font-size: 10.5px; color: var(--muted-dim); }
.tb-round-tabs button.is-done small { color: var(--win); }
.tb-round-tabs button:hover { color: var(--heading); border-color: var(--border-strong); }
.tb-round-tabs button.is-active { border-color: var(--accent); color: var(--heading); background: rgba(var(--accent-rgb), 0.1); }
.tb-round-title { font-size: 15px; color: var(--heading); margin-right: 4px; }
.tb-round-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; align-items: start; }
.tb-round-layout aside .tb-round-sub { margin-top: 0; }

.tb-group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; }
.tb-group-card { padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.tb-group-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tb-group-card header b { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); }
.tb-group-card header small { font-size: 11.5px; color: var(--muted-dim); }
.tb-group-cards.is-gsl { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.tb-group-card .tb-tier-label { margin-top: 12px; }
.tb-gsl-places td:last-child { font-size: 11px; color: var(--muted-dim); white-space: nowrap; }
.tb-standings.tb-gsl-places td:nth-child(3) { width: 40px; }
.tb-group-tools { margin-left: auto; display: flex; gap: 6px; }
.tb-group-tools .btn-ghost-sm { padding: 4px 10px; font-size: 11.5px; }

.tb-standings { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
.tb-standings th { text-align: start; padding: 4px 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted-dim); }
.tb-standings td { padding: 5px 6px; border-top: 1px solid var(--border); color: var(--text); font-weight: 600; }
.tb-standings td:nth-child(n+3), .tb-standings th:nth-child(n+3) { text-align: center; width: 30px; }
.tb-standings tr.is-through td:first-child { box-shadow: inset 3px 0 0 var(--win); }
.tb-standings tr.is-playoff td:first-child { box-shadow: inset 3px 0 0 var(--draw); }
.tb-standings tr.is-out td { color: var(--muted-dim); }
/* Players level on points: drag into a hand-made order. */
.tb-standings tr.is-movable { cursor: grab; }
.tb-standings tr.is-movable:hover td { background: var(--surface-2, rgba(var(--ink-rgb), 0.03)); }
.tb-standings tr.is-dragging { opacity: 0.45; }
.tb-standings tr.is-over-above td { box-shadow: inset 0 2px 0 var(--accent, var(--win)); }
.tb-standings tr.is-over-below td { box-shadow: inset 0 -2px 0 var(--accent, var(--win)); }
.tb-row-grip { color: var(--muted-dim); margin-right: 4px; font-size: 11px; }
.tb-tiebreak-bar { flex-wrap: wrap; }
.tb-chip.is-playoff .tb-seed-n { color: var(--draw); }

/* A match, edited in place. Side by side for group / Swiss / league
   rounds; stacked inside the knockout bracket. */
.tb-match-list { display: flex; flex-direction: column; gap: 8px; }
.tb-match {
  position: relative; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.tb-match.is-finished { border-color: rgba(var(--accent-rgb), 0.25); }
.tb-match.is-saving { opacity: 0.6; }
.tb-match-title { margin-bottom: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); }
.tb-sides { display: flex; align-items: center; gap: 8px; }
.tb-match-v .tb-sides { flex-direction: column; align-items: stretch; gap: 4px; }
.tb-side {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  padding: 3px; border-radius: 8px; border: 1px solid transparent;
}
.tb-match-h .tb-side + .tb-vs + .tb-side { flex-direction: row-reverse; }
.tb-side.is-winner { background: rgba(var(--accent-rgb), 0.1); }
.tb-side.is-winner select { color: var(--heading); }
.tb-side.is-over { border-color: var(--accent); border-style: dashed; }
.tb-side.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3); }
.tb-side.is-dragging { opacity: 0.4; }
.tb-side.is-pinned select { font-style: italic; text-decoration: underline dotted rgba(var(--accent-rgb), 0.7); text-underline-offset: 3px; }
.tb-grip { flex-shrink: 0; cursor: grab; display: flex; }
.tb-grip .pvr-avatar { width: 30px; height: 30px; border-radius: 8px; }
.tb-grip .pvr-initial { font-size: 12px; }
.tb-side select {
  flex: 1; min-width: 0; height: 32px; padding: 0 6px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.tb-score, .tb-pens input {
  width: 44px; height: 32px; flex-shrink: 0; padding: 0 4px; text-align: center;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px;
  color: var(--heading); font-family: inherit; font-size: 14px; font-weight: 800;
  -moz-appearance: textfield;
}
.tb-score::-webkit-inner-spin-button, .tb-pens input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-score:focus, .tb-pens input:focus, .tb-side select:focus { outline: none; border-color: var(--accent); }
.tb-side.is-winner .tb-score { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.tb-vs { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--muted-dim); text-transform: uppercase; }
.tb-pens { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--draw); }
.tb-pens[hidden] { display: none; }
.tb-pens input { width: 38px; height: 28px; font-size: 12.5px; }
.tb-match-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-height: 18px; }
.tb-state { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); }
.tb-match.is-finished .tb-state { color: var(--win); }
.tb-more { padding: 2px 6px; background: none; border: 0; border-radius: 5px; color: var(--muted-dim); font-size: 11px; font-weight: 700; cursor: pointer; }
.tb-more:hover { color: var(--accent); background: var(--surface-3); }
/* A VBL tie: the clubs' score is the two player match-ups (G1, G2) below
   it, added up — so it's shown, not typed. */
.tb-score.is-total { background: transparent; border-style: dashed; cursor: default; }
.tb-matchups { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px 10px; padding-left: 10px; border-left: 2px solid rgba(var(--accent-rgb), 0.3); }
.tb-mu { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.tb-mu-no { flex-shrink: 0; width: 22px; font-size: 11px; font-weight: 800; color: var(--muted-dim); }
.tb-mu-sides { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.tb-mu-side { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 2px; border-radius: 7px; }
.tb-match-h .tb-mu-side + .tb-vs + .tb-mu-side { flex-direction: row-reverse; }
.tb-mu-side.is-winner { background: rgba(var(--accent-rgb), 0.1); }
.tb-mu-side.is-winner .tb-score { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.tb-mu-side .pvr-avatar { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.tb-mu-side .pvr-initial { font-size: 10.5px; }
.tb-mu-side select {
  flex: 1; min-width: 0; height: 30px; padding: 0 6px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700;
}
.tb-mu-side select:focus { outline: none; border-color: var(--accent); }
.tb-mu-side .tb-score { width: 38px; height: 30px; font-size: 13px; }
/* In a bracket column: each match-up's two players stack. */
.tb-match-v .tb-matchups { margin-left: 4px; padding-left: 8px; }
.tb-match-v .tb-mu { align-items: flex-start; }
.tb-match-v .tb-mu-no { padding-top: 8px; }
.tb-match-v .tb-mu-sides { flex-direction: column; align-items: stretch; gap: 3px; }
.tb-match-v .tb-mu .tb-vs { display: none; }

.tb-tier-label { margin: 18px 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.tb-named-bracket { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.tb-named-bracket:first-of-type { border-top: 0; padding-top: 0; }
.tb-bracket { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; }
.tb-bracket-col { flex: 0 0 250px; display: flex; flex-direction: column; }
.tb-bracket-col .tb-round-sub { margin-top: 0; white-space: nowrap; }
.tb-round-rename { margin-left: 4px; padding: 0 4px; border: 0; background: none; color: var(--muted-dim); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.55; }
.tb-round-rename:hover, .tb-round-rename:focus-visible { opacity: 1; color: var(--accent); }
.tb-bracket-items { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.tb-qualified-col { flex-basis: 210px; }
.tb-qualified { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); }
.tb-qualified.is-through { border-style: solid; border-color: rgba(var(--accent-rgb), 0.5); }
.tb-qualified > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-qualified b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-qualified small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.tb-match-missing { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--muted-dim); border-style: dashed; }
.tb-ko-create { padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.tb-ko-create h3 { margin: 0 0 12px; font-size: 15px; color: var(--heading); }

@media (max-width: 760px) {
  .tb-round-layout { grid-template-columns: 1fr; }
  .tb-group-cards { grid-template-columns: 1fr; }
  .tb-save-hint { margin-left: 0; }
  .tb-match-h .tb-sides { flex-direction: column; align-items: stretch; }
  .tb-match-h .tb-side + .tb-vs + .tb-side { flex-direction: row; }
  .tb-vs { display: none; }
}

@media (max-width: 640px) {
  .tourney-editor-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .tem-sub, .tem-status, .tem-tag { display: none; }
  .tourney-editor-format { margin-left: 0; }
  .stage-builder-pairs { grid-template-columns: 1fr; }
}

/* Public user profile (profile.html) — badges + Pick'em history */
.uprofile-section { padding: 36px 0 88px; }
.uprofile[hidden] { display: none; }
.uprofile { display: flex; flex-direction: column; gap: 18px; }
.uprofile-hero {
  --tc: var(--accent);
  position: relative; display: flex; align-items: center; gap: 22px;
  padding: 26px; border-radius: 16px; border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 60%), var(--surface-2);
}
.uprofile-avatar {
  width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-size: 34px; font-weight: 900;
}
.uprofile-avatar.has-tier { box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--tc); }
.uprofile-info { flex: 1; min-width: 0; }
.uprofile-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uprofile-name-row h1 { font-size: 28px; font-weight: 900; color: var(--heading); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.uprofile-emblem { position: relative; display: inline-flex; }
.uprofile-emblem .badge-tip { top: calc(100% + 10px); left: -12px; }
.uprofile-meta { color: var(--muted); font-size: 13px; margin-top: 5px; }
.uprofile-linked { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.uprofile-linked a { color: var(--accent); font-weight: 700; }
.uprofile-socials { margin-top: 12px; }
.uprofile-actions { display: flex; gap: 8px; flex-shrink: 0; align-self: flex-start; }
.uprofile-btn {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.uprofile-btn:hover { border-color: var(--accent); color: var(--accent); }
.uprofile-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.uprofile-btn.is-primary:hover { background: var(--accent-dim); color: var(--on-accent); }

.uprofile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.uprofile-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.uprofile-stat strong { font-size: 24px; font-weight: 900; color: var(--heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uprofile-stat span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dim); }

.uprofile-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px 20px; }
.uprofile-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.uprofile-panel-head h2 { font-size: 15px; font-weight: 800; color: var(--heading); }
.uprofile-empty { color: var(--muted); font-size: 13px; }
.uprofile-empty a { color: var(--accent); font-weight: 700; }

.uprofile-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.uprofile-badge {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 16px 10px 12px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border);
  transition: border-color .15s ease, transform .15s ease;
}
.uprofile-badge:hover { border-color: var(--tc); transform: translateY(-2px); }
.uprofile-badge.is-featured { border-color: var(--tc); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 22%, transparent); }
.uprofile-badge .pickem-badge-card { margin-bottom: 6px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.uprofile-badge-event { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.uprofile-badge-rank { font-size: 11px; color: var(--muted-dim); font-variant-numeric: tabular-nums; }
.uprofile-badge-flag {
  position: absolute; top: 7px; right: 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); padding: 2px 6px; border-radius: 10px;
}
.uprofile-badge .badge-tip { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }

.uprofile-picks { display: flex; flex-direction: column; }
.uprofile-pick-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 64px; align-items: center; gap: 14px;
  padding: 10px 10px; border-bottom: 1px solid var(--border); border-radius: 6px; color: inherit; text-decoration: none;
  transition: background .12s ease;
}
.uprofile-pick-row:last-child { border-bottom: none; }
.uprofile-pick-row:hover { background: var(--row-hover-bg); }
.uprofile-pick-row:hover .uprofile-pick-name { color: var(--accent); }
.uprofile-pick-logo {
  position: relative; width: 40px; height: 40px; border-radius: 8px; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.uprofile-pick-logo .avatar-photo { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.uprofile-pick-logo.has-photo { background: transparent; }
.uprofile-pick-logo.has-photo .tevent-logo-initial { visibility: hidden; }
.uprofile-pick-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uprofile-pick-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uprofile-pick-sub { font-size: 12px; color: var(--muted-dim); }
.uprofile-pick-status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 20px; background: rgba(var(--accent-rgb), .14); color: var(--accent);
}
.uprofile-pick-status.is-live { background: rgba(242, 114, 114, .16); color: var(--loss); }
.uprofile-pick-status.is-done { background: var(--surface-3); color: var(--muted); }
.uprofile-pick-points { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; }
.uprofile-pick-points strong { font-size: 17px; font-weight: 900; color: var(--heading); font-variant-numeric: tabular-nums; }
.uprofile-pick-points span { font-size: 11px; color: var(--muted-dim); }

/* Account Settings: link from the account card to the public profile */
.account-profile-view { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.account-profile-view[hidden] { display: none; }


@media (max-width: 720px) {
  .uprofile-hero { flex-wrap: wrap; padding: 20px; gap: 16px; }
  .uprofile-avatar { width: 64px; height: 64px; font-size: 26px; }
  .uprofile-name-row h1 { font-size: 22px; }
  .uprofile-actions { width: 100%; }
  .uprofile-actions .uprofile-btn { flex: 1; justify-content: center; }
  .uprofile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uprofile-pick-row { grid-template-columns: 36px minmax(0, 1fr) 54px; }
  .uprofile-pick-status { display: none; }
}
/* account-settings.html: account card + pro verification side by side, sized like the cards below */
.account-settings-section { padding-top: 4px; }
.account-top-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.account-top-row:not(:has(> :not([hidden]))) { display: none; }
.account-top-row > .account-profile-card,
.account-top-row > .pro-verify-card { max-width: none; margin: 0; background: var(--surface); padding: 22px 24px; }
.account-top-row > .pro-verify-card { align-self: stretch; }
@media (min-width: 900px) {
  .account-top-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Meta page (see initMetaPage) ---------- */
.meta-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.meta-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex: 1 1 560px; min-width: 0; }
.meta-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.meta-stat span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.meta-stat b { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-stat small { display: block; margin-top: 2px; font-size: 12px; color: var(--accent); }

.meta-block { margin-bottom: 32px; }
.meta-events { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.meta-events[hidden] { display: none; }
.meta-event { flex: 1 0 190px; display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 8px 14px 8px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-align: start; transition: background 0.15s ease, border-color 0.15s ease; }
.meta-event:hover { background: var(--row-hover-bg); }
.meta-event.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.meta-event-logo { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-3); color: var(--muted); overflow: hidden; }
.meta-event-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.meta-event-overall, .meta-event.active .meta-event-logo { color: var(--accent); }
.meta-event-text { display: flex; flex-direction: column; min-width: 0; }
.meta-event-text b { font-size: 13px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-event-text small { font-size: 11px; color: var(--muted); }
.meta-event.active .meta-event-text small { color: var(--accent); }
.meta-event-tip { position: fixed; z-index: 300; width: max-content; max-width: 280px; padding: 11px 13px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.5); pointer-events: none; }
.meta-event-tip[hidden] { display: none; }
.meta-event-tip b { display: block; font-size: 13px; font-weight: 800; color: var(--heading); }
.meta-event-tip-label { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.meta-event-tip p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.meta-block-head { margin-bottom: 12px; }
.meta-block-head h2 { font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.meta-block-head p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.meta-note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }

.meta-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: stretch; }
.meta-board, .tactics-layout .meta-board { aspect-ratio: 6 / 5; height: auto; min-height: 520px; width: 100%; }
.meta-side { padding: 18px 20px; align-self: stretch; }
.meta-slot-rating { font-size: 14px; font-weight: 900; color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.meta-slot .tactics-card-style { color: var(--accent); }
.meta-slot.is-empty .tactics-card-role { color: var(--muted-dim); }
.meta-team-list { display: flex; flex-direction: column; }
.meta-team-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.meta-team-row:first-child { border-top: none; }
.meta-team-pos { font-size: 11px; font-weight: 800; color: var(--muted); }
.meta-team-name { color: var(--heading); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-team-name em { font-style: normal; font-size: 11px; color: var(--muted-dim); }
.meta-team-row b { color: var(--accent); font-weight: 800; }

.meta-pos-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.meta-pos-tabs[hidden] { display: none; }
.meta-block-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.meta-dd { position: relative; flex: 0 0 auto; }
.meta-dd[hidden] { display: none; }
.meta-dd-trigger { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--heading); font-size: 13px; font-weight: 700; transition: border-color 0.15s ease, background 0.15s ease; }
.meta-dd-trigger:hover, .meta-dd-trigger[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-2); }
.meta-dd-trigger small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }
.meta-dd-trigger svg { color: var(--muted); transition: transform 0.15s ease; }
.meta-dd-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.meta-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 150; width: 290px; max-height: 340px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--popup-shadow); display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.meta-dd-menu[hidden] { display: none; }
.meta-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 6px; background: none; border: none; color: var(--text); text-align: start; transition: background 0.15s ease; }
.meta-dd-item:hover, .meta-dd-item:focus-visible { background: var(--surface-2); outline: none; }
.meta-dd-item:hover b, .meta-dd-item.active b { color: var(--accent); }
.meta-dd-logo { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--surface-3); color: var(--muted); overflow: hidden; }
.meta-dd-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.meta-dd-item.active .meta-dd-logo { color: var(--accent); }
.meta-dd-text { display: flex; flex-direction: column; min-width: 0; }
.meta-dd-text b { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s ease; }
.meta-dd-text small { font-size: 11px; color: var(--muted); }
@media (max-width: 600px) { .meta-dd, .meta-dd-trigger { width: 100%; } .meta-dd-trigger { justify-content: space-between; } .meta-dd-menu { left: 0; width: auto; } }
.meta-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.meta-card { display: grid; grid-template-columns: 18px 52px minmax(0, 1fr) 48px; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.meta-card-rank { font-size: 12px; font-weight: 800; color: var(--muted-dim); text-align: center; }
.meta-card-face { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px 8px 14px 14px; background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.06)); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.meta-card-face b { font-size: 20px; font-weight: 900; color: var(--heading); line-height: 1; }
.meta-card-face span { margin-top: 4px; font-size: 9px; font-weight: 800; color: var(--accent); text-align: center; line-height: 1.2; padding: 0 2px; }
.meta-card-body { min-width: 0; }
.meta-card-name { font-size: 14px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-card-sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Names shorten with "…" but the "+N more" count always shows. */
.meta-used { display: flex; gap: 4px; }
.meta-used > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meta-used > b { flex-shrink: 0; font-weight: inherit; }
.meta-card-pct { text-align: right; font-size: 16px; font-weight: 800; color: var(--accent); }
.meta-bar { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meta-bar > * { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

.meta-formations { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.meta-formation { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr) 42px; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-align: start; transition: background 0.15s ease, border-color 0.15s ease; }
.meta-formation:hover { background: var(--row-hover-bg); }
.meta-formation.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.meta-formation .meta-bar { margin-top: 0; }
.meta-formation-name { font-size: 13.5px; font-weight: 800; color: var(--heading); }
.meta-formation-pct { font-size: 13px; font-weight: 800; color: var(--accent); text-align: right; }
.meta-styles { margin-top: 14px; padding: 4px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.meta-styles .psg-row:first-child, .meta-styles-head + .psg-row { border-top: none; }
.meta-styles-head { margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.meta-styles-head b { color: var(--accent); font-weight: 800; }
.meta-styles .psg-row b { font-size: 12.5px; text-align: right; }
.meta-styles small { color: var(--accent); font-weight: 700; }
.meta-formation-detail .meta-board { margin-bottom: 12px; }
/* Keep the top-row cards inside the pitch (they hang above it otherwise). */
.meta-board .tactics-board-cards { inset: 7% 0 3% 0; }
.meta-side h4 a { color: inherit; }
.meta-side h4 a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .meta-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-layout, .meta-formations { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .meta-stat b { font-size: 18px; }
  .meta-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Meta page tabs + Overview (see initMetaPage) */
.meta-tabs { max-width: 560px; margin-bottom: 24px; }
@media (min-width: 901px) { .intro-compact + .meta-page, .intro-compact + .news-page-section { padding-top: 4px; } }
.meta-page .meta-stats { margin-bottom: 20px; }
.meta-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.meta-overview-grid .tournament-side-card { margin-bottom: 0; }
.meta-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.meta-card-head .section-label { margin: 0; }
.meta-more { background: none; border: none; padding: 0; color: var(--accent); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.meta-more:hover { color: var(--accent-dim); }
.meta-ov-sub { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.meta-formation + .meta-ov-sub { margin-top: 10px; }
.meta-ov-empty { margin: 0; padding: 18px 0; font-size: 13px; color: var(--muted-dim); text-align: center; }
.meta-ov-card { display: grid; grid-template-columns: 16px 40px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.meta-ov-card:first-child { border-top: none; padding-top: 0; }
.meta-ov-rank { font-size: 12px; font-weight: 800; color: var(--muted-dim); text-align: center; }
.meta-ov-face { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px 6px 11px 11px; background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.06)); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.meta-ov-face b { font-size: 15px; font-weight: 900; color: var(--heading); line-height: 1; }
.meta-ov-face small { margin-top: 2px; font-size: 8.5px; font-weight: 800; color: var(--accent); }
.meta-ov-name { min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-ov-name em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted-dim); }
.meta-ov-name .meta-bar { margin-top: 6px; }
.meta-ov-pct { text-align: right; font-size: 14px; font-weight: 800; color: var(--accent); }
.meta-link { color: var(--accent); font-weight: 700; }
.meta-link:hover { color: var(--accent-dim); }
.meta-breakdown-link { margin-top: 14px; }
.meta-restrictions { margin-bottom: 18px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; }
.meta-restrictions p { margin: 2px 0 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.meta-cut-switch { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-bottom: 18px; }
.meta-mini-rating { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: var(--accent); }
@media (max-width: 860px) { .meta-overview-grid { grid-template-columns: minmax(0, 1fr); } }
.meta-pros { margin-top: 4px; }
.meta-pros-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.meta-pros-head b { color: var(--heading); }
.meta-pros-head small { color: var(--muted-dim); font-size: 12px; }
.meta-pros-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); width: 220px; max-width: 100%; transition: border-color 0.15s ease; }
.meta-pros-search:focus-within { border-color: var(--border-strong); }
.meta-pros-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--heading); font-size: 13px; font-family: inherit; }
.meta-pros-search input::placeholder { color: var(--muted-dim); }
.meta-pro-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.meta-pro { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 10px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); transition: background 0.15s ease, border-color 0.15s ease; }
.meta-pro:hover { background: var(--row-hover-bg); border-color: rgba(var(--accent-rgb), 0.4); }
.meta-pro[hidden], .meta-pros:not(.show-all):not(.is-searching) .meta-pro.is-extra { display: none; }
.meta-pro-avatar { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted-dim); }
.meta-pro-avatar .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cut-out photos are transparent: hide the initial behind them. */
.meta-pro-avatar.has-photo { color: transparent; }
.meta-pro-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-pro-rank { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--accent); }
.meta-pros-none { margin: 6px 0 0; font-size: 13px; color: var(--muted-dim); }
.meta-pros-none[hidden], .meta-pros.is-searching .meta-pros-all { display: none; }
.meta-pros-all { margin-top: 10px; }
.meta-squad-side { display: flex; flex-direction: column; min-height: 0; }
.meta-squad-pros { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.meta-squad-pros .meta-pros-head { margin-bottom: 8px; }
.meta-squad-pros .meta-pros-search { width: 100%; margin-bottom: 8px; }
.meta-squad-pro-list { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.meta-squad-pro { width: 100%; text-align: start; font-family: inherit; }
.meta-squad-pro.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.meta-squad-pro .meta-pro-name small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.meta-tactic-label { margin: 0 0 4px; }
.meta-tactic-grid .psg-row:nth-child(-n+2) { border-top: 1px solid var(--border); }
.meta-tactic-grid .psg-row:first-child { border-top: none; }
.meta-slot .tactics-card-style { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; box-sizing: border-box; }
button.meta-pro { width: 100%; text-align: start; font-family: inherit; cursor: pointer; }
.meta-pro.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.meta-viewing { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 12px; }
.meta-viewing-avatar { width: 42px; height: 42px; font-size: 15px; box-shadow: 0 0 0 2px var(--accent); }
.meta-viewing-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.meta-viewing-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.meta-viewing-text b { font-size: 15px; font-weight: 800; color: var(--heading); }
.meta-viewing-text b em { font-style: normal; font-size: 12px; color: var(--accent); margin-left: 4px; }
.meta-viewing-text small { font-size: 12px; color: var(--muted); }
.meta-viewing-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.meta-viewing-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 16px; line-height: 1; }
.meta-viewing-close:hover { color: var(--heading); border-color: var(--border-strong); }
.meta-overall-avatar { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.meta-squad-hint { margin: 10px 0 0; }

/* Card library: rarity colours, card images, By player / By card switch */
.meta-rarity { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 800; color: #0b0b0b; background: var(--rarity, var(--accent)); line-height: 1.5; }
.meta-card-sub em { font-style: normal; font-weight: 700; color: var(--text); margin-right: 4px; }
.meta-card-face, .meta-ov-face { background: linear-gradient(160deg, color-mix(in srgb, var(--rarity, var(--accent)) 45%, transparent), color-mix(in srgb, var(--rarity, var(--accent)) 8%, transparent)); border-color: color-mix(in srgb, var(--rarity, var(--accent)) 60%, transparent); }
.meta-card-face span, .meta-card-face small, .meta-ov-face small { color: var(--rarity, var(--accent)); }
.meta-card-face small { margin-top: 4px; font-size: 9px; font-weight: 800; text-align: center; line-height: 1.2; padding: 0 2px; }
.meta-card-face.has-img, .meta-ov-face.has-img { background: none; border: none; height: auto; overflow: visible; }
.meta-card-face.has-img img { width: 52px; height: auto; display: block; }
.meta-ov-face.has-img img { width: 40px; height: auto; display: block; }
.meta-slot .tactics-card-shield { border-top: 3px solid var(--rarity, transparent); }
.meta-slot .meta-slot-rating { color: var(--rarity, var(--accent)); }
.meta-slot-img { width: 92px; }
.meta-slot-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45)); }
.meta-slot-sub { margin-top: 2px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,0.65); font-size: 9.5px; font-weight: 800; color: var(--accent); white-space: nowrap; }
@media (max-width: 760px) { .meta-slot-img { width: 62px; } }

/* Add squad from screenshot (js/meta-import.js) */
.mi-open { margin-top: 10px; }
.mi-backdrop { align-items: flex-start; overflow-y: auto; }
.mi-modal { position: relative; width: 100%; max-width: 1040px; margin: 20px auto; padding: 24px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.mi-modal h2 { font-size: 20px; font-weight: 800; color: var(--heading); margin-bottom: 6px; }
.mi-status { font-size: 13px; color: var(--muted); }
.mi-status.is-error { color: var(--loss); }
.mi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin-top: 14px; }
.mi-shot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 22px 16px; border: 2px dashed var(--border); border-radius: 12px; text-align: center; transition: border-color .15s, background .15s; }
.mi-shot.is-over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.mi-shot-title { font-size: 14px; font-weight: 600; color: var(--text); }
.mi-shot-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mi-hint { font-size: 12.5px; color: var(--muted); }
.mi-prompt { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.4); font-size: 13px; color: var(--text); }
.mi-prompt b { color: var(--accent); }
.mi-canvas-wrap { margin-bottom: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.mi-canvas-wrap canvas { display: block; max-width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.mi-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-bottom: 14px; }
.mi-slot { display: grid; grid-template-columns: 40px 74px minmax(0, 1fr) 58px 120px; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.mi-slot.active { border-color: var(--accent); }
.mi-slot input { height: 32px; min-width: 0; padding: 0 8px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; color: var(--heading); font-size: 12.5px; font-family: inherit; }
.mi-thumb { width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.mi-thumb canvas { display: block; width: 40px; height: auto; }
.mi-pos { font-size: 12px; font-weight: 800; color: var(--accent); }
.mi-match { grid-column: 3 / -1; font-size: 11px; color: var(--muted); min-height: 0; }
.mi-match:empty { display: none; }
.mi-match.is-known { color: var(--win); }
@media (max-width: 860px) { .mi-grid { grid-template-columns: minmax(0, 1fr); } .mi-slots { grid-template-columns: minmax(0, 1fr); } }
.meta-admin-only { display: none; }
body.is-meta-admin .meta-admin-only { display: flex; }
.meta-squad-admin { gap: 8px; margin: 2px 0 10px; }
.meta-danger:hover { border-color: var(--loss); color: var(--loss); }
.mi-thumb img { display: block; width: 40px; height: auto; }

/* A squad shown small (match page Squads Used, profile Drafted Teams) */
.meta-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.meta-mini { display: flex; flex-direction: column; gap: 10px; }
.meta-mini-grid .meta-mini { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
[data-match-squad] .meta-mini { padding: 12px 14px 14px; }
.meta-mini-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meta-mini-head b { font-size: 14px; font-weight: 800; color: var(--heading); }
.meta-mini-head b:empty { display: none; }
.meta-mini-head span { font-size: 12px; color: var(--muted); }
.meta-board.meta-board-compact { aspect-ratio: 5 / 6; min-height: 0; }
.meta-board-compact .tactics-card { width: 56px; }
.meta-board-compact .tactics-card-shield { height: 72px; padding: 5px 2px 9px; }
.meta-board-compact .tactics-card-avatar { width: 20px; height: 20px; margin-bottom: 3px; font-size: 10px; }
.meta-board-compact .tactics-card-role { font-size: 8px; height: 22px; overflow-wrap: anywhere; }
.meta-board-compact .tactics-card-style { font-size: 6.5px; letter-spacing: 0; }
.meta-board-compact .tactics-card-pos { font-size: 8px; padding: 1px 6px; margin-top: -7px; }
.meta-board-compact .meta-slot-img { width: 54px; }
.meta-board-compact .meta-slot-sub { font-size: 7px; padding: 0 5px; }
.meta-board-compact .tactics-board-brand { font-size: 26px; }
.mi-thumb-wrap { position: relative; display: block; cursor: pointer; }
.mi-thumb img { display: block; width: 40px; height: auto; }
.mi-thumb-add { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 900; line-height: 1; }
.mi-thumb-wrap:hover .mi-thumb { outline: 1px solid var(--accent); }
.meta-mini-head { align-items: center; justify-content: flex-start; gap: 10px; }
.meta-mini-logo { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-3); overflow: hidden; }
.meta-mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.meta-mini-logo:empty::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted-dim); }
.meta-mini-title { display: flex; flex-direction: column; min-width: 0; }
.meta-mini-title b { font-size: 14px; font-weight: 800; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-mini-title b:empty { display: none; }
.meta-mini-title span { font-size: 12px; color: var(--muted); }
.meta-mini-link { font-size: 14px; font-weight: 800; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s ease; }
.meta-mini-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* No logo uploaded for the tournament: a trophy instead. */
.meta-mini-logo:empty::before { content: ''; width: 18px; height: 18px; border: none; border-radius: 0; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E") center / contain no-repeat; }
.meta-board.meta-board-overview { aspect-ratio: 1 / 1; margin-top: 4px; }
.meta-ov-wide { grid-column: 1 / -1; }
.meta-ov-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; align-items: start; }
.meta-ov-team .meta-board-overview { margin-top: 0; aspect-ratio: 6 / 5; }
@media (max-width: 860px) { .meta-ov-team { grid-template-columns: minmax(0, 1fr); } }
.mi-backdrop { z-index: 420; }

/* Teams: tournament editor Meta step, profile add / edit controls, recognised cards */
.tb-meta-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tb-meta-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.tb-meta-name { font-size: 14px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-meta-state { font-size: 12px; font-weight: 700; color: var(--muted-dim); }
.tb-meta-state.is-done { color: var(--win); }
/* Tournament editor: Prize money step */
.tb-prize-row { grid-template-columns: 64px auto minmax(0, 1fr) auto; }
.tb-prize-place { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-prize-amount { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tb-prize-amount input { width: 96px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--heading); font: inherit; text-align: right; }
.tb-prize-note .btn-ghost-sm { margin-left: 6px; }
.qual-path-row.prize-spread-row { grid-template-columns: 90px 90px 1fr auto; padding: 8px 0 0; border-top: 0; }
.qual-path-row.prize-spread-row [data-ps-remove] { margin-bottom: 14px; }
@media (max-width: 520px) {
  .qual-path-row.prize-spread-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qual-path-row.prize-spread-row [data-ps-remove] { grid-column: 1 / -1; justify-self: start; }
  .tb-prize-row { grid-template-columns: 52px auto minmax(0, 1fr); }
  .tb-prize-amount { grid-column: 2 / -1; }
}

/* Tournament editor → Battlefy step (renderBattlefyStep in js/admin-edit.js) */
.tb-bf { display: flex; flex-direction: column; gap: 12px; }
.tb-bf .account-settings-hint { margin: 0; }
.tb-bf-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text); }
.tb-bf-steps a { color: var(--accent); }
.tb-bf-bookmark { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.12); border: 1px dashed rgba(var(--accent-rgb), 0.7); color: var(--accent); font-weight: 800; text-decoration: none; cursor: grab; }
.tb-bf-last { margin: 0; font-size: 12px; color: var(--muted); }
.tb-bf-help { padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); }
.tb-bf-help summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.tb-bf-help p { margin: 8px 0 4px; }
.tb-bf-help ol { margin: 4px 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.tb-bf-paste { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; padding: 10px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.tb-bf-paste:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.7); }
.tb-bf-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tb-bf-card { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); }
.tb-bf-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--heading); }
.tb-bf-card p { margin: 4px 0; }
.tb-bf-card summary { cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 700; margin-top: 6px; }
.tb-bf-sub { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-dim); }
.tb-bf-names { margin: 4px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; font-size: 12px; color: var(--muted); }
.tb-bf-rounds { width: 100%; border-collapse: collapse; font-size: 12px; }
.tb-bf-rounds th, .tb-bf-rounds td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--border); }
.tb-bf-rounds th:first-child, .tb-bf-rounds td:first-child { text-align: left; }
.tb-bf-rounds th { color: var(--muted-dim); font-weight: 700; }
.tb-bf-stale { margin-top: 8px; font-size: 12px; }
.tb-bf-check .tb-bf-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.tb-bf-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 16px; }
.tb-bf-map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.tb-bf-map-bf { font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-bf-map-arrow { color: var(--muted-dim); }
.tb-bf-map-row input { min-width: 0; padding: 6px 9px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 12.5px; }
.tb-bf-map-row input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.7); }
.tb-bf-map-row input:placeholder-shown { border-style: dashed; }
.tb-bf-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-bf-status { margin: 0; font-size: 12.5px; color: var(--muted); }
.tb-bf-warn { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; color: var(--text); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.45); }
.tb-bf-ok { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--win); background: var(--surface); border: 1px solid var(--border); }
.meta-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.meta-profile-head .meta-note { margin: 0; }
.meta-profile-add { margin-top: 12px; display: flex; justify-content: center; }
.meta-squad-owner { display: flex; gap: 8px; }
.meta-squad-owner[hidden] { display: none; }
.meta-mini-wrap { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.meta-mini-grid .meta-mini-wrap .meta-mini { padding: 0; background: none; border: none; }
.mi-slot.is-recognised { border-color: rgba(92, 224, 138, 0.5); }
/* Importer: player search under each position's name box */
.mi-name-wrap { position: relative; min-width: 0; }
.mi-name-wrap input { width: 100%; box-sizing: border-box; }
.mi-suggest { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: max(100%, 280px); max-height: 300px; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.mi-suggest[hidden] { display: none; }
.mi-suggest-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px 6px; background: none; border: none; border-radius: 6px; color: var(--text); text-align: start; font-family: inherit; cursor: pointer; }
.mi-suggest-item:hover { background: var(--surface-2); }
.mi-suggest-item img { width: 30px; height: auto; flex: 0 0 auto; }
.mi-suggest-item span { display: flex; flex-direction: column; min-width: 0; }
.mi-suggest-item b { font-size: 13px; font-weight: 700; color: var(--heading); }
.mi-suggest-item small { font-size: 11px; color: var(--muted); }
.mi-suggest-none { margin: 0; padding: 8px; font-size: 12px; color: var(--muted); }
.mi-slots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }

/* ---------- News languages ---------- */
/* Post editor's per-language tabs (js/admin-edit.js openPostEditor). The dot
   marks a language still missing its title or post; a tick, one that's done. */
.news-lang-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.news-lang-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; background: none; border: none; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.news-lang-tab:hover { color: var(--text); }
.news-lang-tab.active { background: var(--surface-3); color: var(--heading); }
.news-lang-tab-status { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.6; }
.news-lang-tab.done .news-lang-tab-status { width: auto; height: auto; border: none; border-radius: 0; opacity: 1; color: #4ade80; }
.news-lang-tab.done .news-lang-tab-status::before { content: '✓'; font-size: 11px; }
.news-lang-pane[hidden], .news-lang-spoiler[hidden] { display: none; }
.news-article-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* Team / org / country links (profile bio line, player tables, compare) and
   their pages (team.html, country.html — see renderAffiliationPage). */
.affil-link { color: inherit; text-decoration: none; transition: color .15s; }
.affil-link:hover { color: var(--accent); }
.affil-link:hover .team-inline span { text-decoration: underline; text-underline-offset: 3px; }
.affil-header { align-items: center; margin-bottom: 24px; }
.affil-eyebrow { margin-bottom: 4px; }
.affil-avatar .avatar-photo { object-fit: contain; padding: 12px; background: var(--surface-2); }
.affil-avatar.is-flag .avatar-photo { object-fit: cover; padding: 0; }
/* An uploaded logo was already fitted to the square in the crop dialog: fill the box. */
.affil-avatar.is-uploaded .avatar-photo { object-fit: cover; padding: 0; }
/* Team page you manage: the whole logo box is the "change logo" button. */
.affil-avatar.is-editable { cursor: pointer; }
.affil-avatar.is-editable:hover .avatar-edit-btn,
.affil-avatar.is-editable:focus-visible .avatar-edit-btn { border-color: var(--accent); background: var(--surface-3); }
.affil-avatar.is-editable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.affil-avatar.is-busy { opacity: 0.6; cursor: progress; pointer-events: none; }
.affil-stats { display: flex; gap: 10px; flex-shrink: 0; }
.affil-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 96px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.affil-stat-value { font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; }
.affil-group-title { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: 16px; font-weight: 800; color: var(--heading); }
.affil-group-title:first-of-type { margin-top: 0; }
.affil-group-title span { font-size: 12px; font-weight: 700; color: var(--muted-dim); }
.affil-table-wrap + .affil-table-wrap { margin-top: 16px; }
/* Country / club page: all-time national-team / club competitions record. */
.rep-record-stats { margin-bottom: 14px; }
.rep-record-stats .affil-stat { align-items: flex-start; }
.rep-record-logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.rep-record-players { font-size: 13px; }
.rep-record-players .affil-link, .rep-record-player { display: inline-flex; }
.rep-record-player { align-items: center; gap: 7px; margin: 2px 14px 2px 0; font-weight: 700; }
.rep-record-player .compare-team-thumb { width: 26px; height: 26px; font-size: 11px; }
.rep-record-title { font-size: 14px; }
.rep-record-compare { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.rep-record-compare:hover { text-decoration: underline; text-underline-offset: 3px; }
.affil-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-dim); }
@media (max-width: 760px) {
  .affil-header { flex-direction: column; align-items: stretch; }
  .affil-stats { width: 100%; }
  .affil-stat { flex: 1; min-width: 0; align-items: flex-start; }
}

/* Team pages run by the team (supabase/team_claims.sql): About, links, claim + manage tools */
.team-about { margin: -8px 0 22px; display: flex; flex-direction: column; gap: 12px; }
.team-about-text { color: var(--text); font-size: 14.5px; line-height: 1.65; max-width: 760px; white-space: pre-line; overflow-wrap: anywhere; }
.team-links a { color: var(--muted); transition: color .15s; }
.team-links a:hover { color: var(--accent); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--heading); }
.team-claim { margin: -10px 0 20px; font-size: 13px; }
.team-claim-open { color: var(--muted); text-decoration: none; }
.team-claim-open:hover { color: var(--accent); text-decoration: underline; }
.team-claim-note { margin: -10px 0 20px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; }
.team-manage { margin: 0 0 22px; }
.team-manage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 10px; background: rgba(var(--accent-rgb), 0.06); }
.team-manage-note { font-size: 13px; font-weight: 700; color: var(--heading); }
.team-manage-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.team-manage-panel { margin-top: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.team-manage-panel[hidden] { display: none; }
.team-manage-panel textarea { width: 100%; resize: vertical; padding: 10px 12px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; color: var(--heading); font: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.5; outline: none; }
.team-manage-panel textarea:focus { border-color: var(--border-strong); }
.team-manage-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.team-claim-form .team-manage-hint { margin: 0 0 12px; }
.team-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.team-add-row { display: flex; gap: 8px; }
.team-add-row input { flex: 1; min-width: 0; }
.team-add-row input, .team-add-row select { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; }
.team-add-results .team-badge { flex-shrink: 0; }
.team-add-results .pvr-name { text-align: start; }
.team-roster-actions { width: 1%; text-align: right; white-space: nowrap; }
.team-roster-remove { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.team-roster-remove:hover { border-color: #e5484d; color: #e5484d; }
.affil-group-title.team-tournaments-title { margin-top: 36px; }
.team-former { margin-top: 18px; }
.team-former-until { color: var(--muted); font-size: 12px; }
.team-logo-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.team-logo-edit .team-logo-preview { width: 72px; height: 72px; flex: none; }
.team-logo-edit-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.team-logo-edit-body .team-manage-hint { margin: 0; }
.team-logo-pick { cursor: pointer; }
.team-former-edit { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.team-former-edit-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--heading); }
.team-former-edit > .team-manage-hint:first-of-type { margin: 4px 0 12px; }
.team-former-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.team-former-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.team-former-list .team-cell { flex: 1; min-width: 0; }
.team-former-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.team-former-date input { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); font: inherit; font-size: 12.5px; }
.team-former-add .team-former-date input { padding: 8px 10px; }
.team-former-results .team-badge { flex-shrink: 0; }
.team-former-results .pvr-name { text-align: start; }

/* Team page "Edit page" button (above the stats, like a player's Edit profile)
   and the editor window it opens (openTeamEditor in js/script.js). */
.affil-side { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; }
.affil-side > .affil-edit-btn { margin-right: 0; }
@media (max-width: 760px) {
  .affil-side { width: 100%; }
}
.team-edit-rows { display: grid; gap: 6px; margin: 0 0 10px; }
.team-edit-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.team-edit-row.is-new { border-color: rgba(var(--accent-rgb), 0.45); }
.team-edit-row .team-cell { flex: 1; min-width: 0; font-size: 13.5px; }
.team-edit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-edit-row select { flex: none; width: auto; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); font: inherit; font-size: 12.5px; }
.team-edit-row .team-roster-remove { flex: none; }
.team-edit-locked { flex: none; font-size: 12px; color: var(--muted); }
.team-edit-form .team-add-row { margin-top: 4px; }
.team-edit-form .pro-verify-results:not(:empty) { margin-top: 8px; }
.team-edit-form .team-former-date input { width: auto; }

/* "Profile photo" / "Logo" at the top of the edit windows: saves on its own. */
.admin-photo-edit-title { margin-top: 14px; }
.admin-photo-edit { display: flex; align-items: center; gap: 16px; }
.admin-photo-edit-preview {
  position: relative; flex: none; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  font-size: 26px; font-weight: 800; color: var(--muted);
}
.admin-photo-edit-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-photo-edit-preview.is-logo img { object-fit: contain; padding: 8px; }
.admin-photo-edit-preview.has-photo > span { visibility: hidden; }
.admin-photo-edit-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.admin-photo-edit-body .admin-edit-actions { margin: 0; }
.admin-photo-edit-pick { cursor: pointer; }
.admin-photo-edit-pick.is-busy { opacity: 0.6; pointer-events: none; }
.admin-photo-edit-status { margin: 0; color: var(--win, #3fb950); }
.admin-photo-edit-status.is-error { color: #e5484d; }
.free-agents-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.free-agents-search input { width: 220px; max-width: 100%; }
@media (max-width: 560px) { .free-agents-search { flex: 1 1 100%; } .free-agents-search input { width: 100%; } }
.free-agents-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.free-agents-count[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 560px) {
  .team-add-row { flex-direction: column; }
}

/* ---------- About page ---------- */
.about-section { padding: 0 0 40px; }
.about-section-last { padding-bottom: 72px; }
.about-container > p { color: var(--text); font-size: 15px; line-height: 1.7; max-width: 720px; margin-bottom: 14px; }
.about-h2 { font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; margin: 8px 0 12px; }
.about-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.about-feature { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background .15s; }
.about-feature:hover { border-color: rgba(var(--accent-rgb), 0.45); background: var(--surface-2); }
.about-feature strong { color: var(--heading); font-size: 14px; font-weight: 700; }
.about-feature span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.about-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.about-people:empty { display: none; }
.about-person { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.about-avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.about-person h3 { font-size: 16px; font-weight: 800; color: var(--heading); }
.about-role { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.about-bio { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.about-empty { padding: 18px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text); font-size: 14.5px; line-height: 1.65; }
.about-empty a { color: var(--accent); font-weight: 600; }
.about-empty a:hover { text-decoration: underline; }
.about-volunteers:has(.about-person) .about-empty { display: none; }
.about-main.is-loading { visibility: hidden; }
.about-empty p + p { margin-top: 10px; }
.about-avatar-img { object-fit: cover; padding: 0; }
.about-person h3 a:hover { color: var(--accent); }
.about-bio a, .about-container > p a, .about-intro .intro-sub a { color: var(--accent); font-weight: 600; }
.about-bio + .about-bio { margin-top: 6px; }
.about-intro { position: relative; }
.about-edit-btn { position: absolute; top: 0; right: 16px; margin: 0; }

/* About page editor (js/about.js) */
.about-edit-group { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 6px; margin: 0 0 16px; min-width: 0; }
.about-edit-group legend { padding: 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.about-edit-form .auth-field textarea { min-height: 0; }
.about-edit-hint { font-size: 11.5px; font-weight: 500; color: var(--muted-dim); }
.about-edit-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.about-edit-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.about-edit-list:empty { display: none; }
.about-edit-item { position: relative; padding: 12px 14px 0; background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; }
.about-edit-item-tools { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 6px; }
.about-edit-item-tools .btn-ghost-sm { padding: 4px 10px; }
.about-edit-item .auth-field input, .about-edit-item .auth-field textarea { background: var(--surface-2); }
.about-edit-add { margin-bottom: 14px; }
.about-edit-person { display: flex; gap: 16px; align-items: flex-start; }
.about-edit-person-fields { flex: 1; min-width: 0; }
.about-edit-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 112px; flex-shrink: 0; padding-top: 4px; }
.about-edit-photo-preview, .about-edit-photo .about-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; font-size: 30px; }
.about-edit-photo-preview { border: 1px solid var(--border-strong); }
.about-edit-photo-preview[hidden], .about-edit-photo .about-avatar[hidden], .about-edit-photo-remove[hidden] { display: none; }
.about-edit-photo .btn-ghost-sm { width: 100%; text-align: center; cursor: pointer; padding: 6px 8px; }
.about-edit-photo-btn.is-busy { opacity: 0.6; pointer-events: none; }
.about-edit-reset { margin-left: auto; }
@media (max-width: 600px) {
  .about-edit-btn { position: static; margin-top: 14px; }
  .about-edit-person { flex-direction: column; align-items: stretch; }
  .about-edit-photo { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .about-edit-photo .btn-ghost-sm { width: auto; }
}

/* Admin Inbox → Site stats (js/admin.js loadStats) */
.admin-view-tabs { max-width: 320px; margin-bottom: 24px; }
.admin-stats[hidden], #adminInboxView[hidden] { display: none; }
.admin-stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.admin-stats-head .admin-card-hint { margin: 0; }
.admin-stats-range { margin: 0; min-width: 280px; }
#adminStatsBody.is-loading { opacity: 0.5; transition: opacity 0.15s ease; }
.admin-stats-tiles { margin-bottom: 8px; }
.admin-stats-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.asc-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.asc-bar > span { display: block; width: 100%; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.85; }
.asc-bar:hover > span { opacity: 1; }
.admin-stats-chart-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 28px; }
.admin-stats-col { min-width: 0; }
.admin-stats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-stats-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 70px auto; align-items: center; gap: 10px; padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.asl-rank { color: var(--muted-dim); font-weight: 700; font-size: 11.5px; }
.asl-name { color: var(--heading); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asl-name a { color: inherit; text-decoration: none; }
.asl-name a:hover { color: var(--accent); }
.asl-vs { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.asl-bar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.asl-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.asl-count { font-weight: 800; color: var(--heading); text-align: right; white-space: nowrap; }
.asl-count small { font-weight: 500; color: var(--muted); font-size: 11px; }
.admin-stats-since { margin-top: 24px; }
@media (max-width: 600px) {
  .admin-stats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stats-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-stats-list li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .asl-bar { display: none; }
  .admin-stats-range { min-width: 0; width: 100%; }
}

/* ---------- Tournament tiers (S/A/B/C/D/E) ---------- */
.tier-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; font-size: 11px; font-weight: 900; line-height: 1; color: var(--on-accent); background: var(--tier-c); }
.tier-mark.is-s { background: var(--accent); }
.tier-mark.is-a { background: var(--tier-a); }
.tier-mark.is-b { background: var(--tier-b); }
.tier-mark.is-c { background: var(--tier-c); }
.tier-mark.is-d { background: var(--tier-d); }
.tier-mark.is-e { background: var(--tier-e); }
.tourney-tier-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; text-decoration: none; }
.tourney-tier-link:hover { color: var(--heading); }
.tourney-tier-link:hover .tier-mark { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); }
.tier-guide-list { display: grid; gap: 14px; margin: 18px 0 8px; max-width: 760px; }
.tier-guide-item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.tier-guide-item:target { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
.tier-guide-item .tier-mark { width: 56px; height: 56px; font-size: 28px; border-radius: 10px; }
.tier-guide-item h3 { font-size: 17px; font-weight: 800; color: var(--heading); margin: 2px 0 6px; }
.tier-guide-item p { font-size: 14px; line-height: 1.65; color: var(--text); margin: 0 0 8px; }
.tier-guide-item ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.tier-guide-item.is-target { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
.format-mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 10px; font-size: 15px; font-weight: 900; letter-spacing: 0.02em; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.format-guide-tagline { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }
.format-guide-item p a, .format-guide-item li a { color: var(--accent); font-weight: 600; }
.tourney-format-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.tourney-format-link:hover { color: var(--heading); border-bottom-style: solid; }
@media (max-width: 560px) {
  .tier-guide-item { grid-template-columns: 40px 1fr; gap: 12px; padding: 14px; }
  .tier-guide-item .tier-mark { width: 40px; height: 40px; font-size: 20px; }
  .format-mark { width: 40px; height: 40px; font-size: 12px; }
}

/* tournaments.html (admins): manual tournaments with no matches yet / hidden */
.tourney-disclaimer {
  margin-bottom: 20px; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.tourney-disclaimer strong { color: var(--accent); font-weight: 700; }
.tourney-drafts { margin-bottom: 24px; }
.tourney-drafts[hidden] { display: none; }
.tourney-drafts-title { font-size: 15px; color: var(--heading); margin: 0 0 10px; }
.tourney-drafts-title small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.tourney-drafts .admin-claim-list { max-width: none; }
@media (max-width: 600px) {
  .tourney-drafts .admin-claim { flex-direction: column; align-items: flex-start; }
}

/* ---------- Arabic (right to left) ----------
   js/i18n.js sets <html lang="ar" dir="rtl"> and loads Cairo for the Arabic
   letters (Inter has none; Latin text stays in Inter). Flex/grid layouts
   flip on their own; these are the spots that need help. */
:root[lang="ar"] { --font: 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* Arabic letters join up — letter-spacing pulls them apart. */
:root[lang="ar"] body * { letter-spacing: 0 !important; }
[dir="rtl"] .potm-photo { right: auto; left: -12px; }
[dir="rtl"] .potm-photo-fade { background: linear-gradient(270deg, var(--surface) 0%, var(--surface) 38%, rgba(var(--surface-rgb), 0.35) 62%, transparent 100%); }


/* Share images (js/share-cards.js): "Share run" button and the fut.gg-style
   "Download assets" bottom sheet — one preview card per format. */
.share-run-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); font: 700 12.5px var(--font); cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease; }
.share-run-btn svg { color: var(--accent); }
.share-run-btn:hover { border-color: var(--accent); color: var(--heading); }
.share-run-btn[hidden] { display: none; }
body.share-sheet-open { overflow: hidden; }
.share-sheet-backdrop { position: fixed; inset: 0; z-index: 450; background: rgba(4, 6, 10, 0.72); display: flex; align-items: flex-end; justify-content: center; }
.share-sheet { width: 100%; max-height: 92vh; overflow: auto; background: var(--surface); border-top: 1px solid var(--border-strong); border-radius: 18px 18px 0 0; padding: 10px 24px 24px; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5); animation: share-sheet-up .22s ease; }
@keyframes share-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.share-sheet-grab { width: 48px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 0 auto 12px; }
.share-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.share-sheet-icon { color: var(--accent); display: inline-flex; }
.share-sheet-head h2 { font-size: 16px; font-weight: 800; color: var(--heading); margin: 0; }
.share-sheet-sub { color: var(--muted); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-sheet-close { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; }
.share-sheet-close:hover { color: var(--heading); }
.share-sheet-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 16px; }
.share-ctl { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.share-ctl select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; font: 600 13px var(--font); max-width: 220px; }
.share-ctl-check { cursor: pointer; }
.share-ctl-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.share-sheet-cards { display: grid; grid-template-columns: 1.6fr 0.9fr 0.68fr; gap: 14px; align-items: stretch; }
.share-card { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-width: 0; }
.share-card-title { font-size: 13px; font-weight: 800; color: var(--heading); }
.share-card-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.share-card-preview { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 8px; padding: 8px; min-height: 0; }
.share-card-preview canvas { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
/* Wide fills the card width; its height follows the canvas ratio. A height
   cap here squashed it (full width + capped height = stretched preview). */
.share-card[data-kind="wide"] .share-card-preview canvas { width: 100%; max-height: none; }
.share-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.share-card-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 700 13px var(--font); cursor: pointer; transition: background .15s ease; }
.share-card-btn:hover { background: var(--accent-dim); }
.share-card-btn.is-icon { flex: 0 0 auto; background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
.share-card-btn.is-icon:hover { border-color: var(--accent); }
.share-card-btn.is-done { color: var(--win); border-color: var(--win); }
@media (max-width: 900px) {
  .share-sheet { padding: 8px 14px 18px; }
  .share-sheet-cards { grid-template-columns: 1fr 1fr; }
  .share-card[data-kind="wide"] { grid-column: 1 / -1; }
  .share-card-preview canvas { max-height: 38vh; }
  .share-card[data-kind="wide"] .share-card-preview canvas { max-height: none; }
  .share-ctl { flex-wrap: wrap; }
}
.share-panel-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* Login box: "Forgot password?" under the password field, and small inline
   text buttons (Resend confirmation email / Resend email on signup). */
.auth-forgot {
  display: block;
  margin: -8px 0 14px auto;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.auth-forgot:hover { color: var(--accent); }
.auth-forgot[hidden] { display: none; }
.auth-inline-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-inline-btn:hover { color: var(--accent-dim); }
.auth-inline-btn:disabled { opacity: 0.6; cursor: default; }
.signup-resend { color: var(--muted); font-size: 13px; margin-top: 14px; }
.reset-lead { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.auth-resend-line { margin-top: 6px; }
.auth-resend-line[hidden] { display: none; }