:root {
  color-scheme: dark;
  --canvas: #070a10;
  --surface: #0d131d;
  --surface-raised: #121a27;
  --surface-hover: #172233;
  --border: #263246;
  --border-strong: #3a4a61;
  --text: #f3f6fb;
  --muted: #9aa7b8;
  --accent: #8cff4f;
  --accent-hover: #b2ff82;
  --accent-soft: rgba(140,255,79,.10);
  --info: #66a8ff;
  --warning: #f4c95d;
  --danger: #ff7a8a;
  --rank-gold: #ffd166;
  --rank-silver: #d7e0ee;
  --rank-bronze: #e8a56c;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-panel: 12px;
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  --control-height: 44px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 72px; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse 600px 360px at 100% 0, rgba(140,255,79,.035), transparent), var(--canvas);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--canvas); }
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, summary {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
button, summary { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
svg { display: inline-block; vertical-align: middle; flex: none; }
h1, h2, h3, p, dl { margin-top: 0; }
h1 { margin-bottom: var(--space-2); font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
h2 { margin-bottom: var(--space-1); font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; }
h3 { margin-bottom: var(--space-2); font-size: 1rem; line-height: 1.4; }
p { margin-bottom: var(--space-3); }
small { font-size: 12px; }
code { padding: 2px var(--space-1); border: 1px solid var(--border); border-radius: 4px; background: var(--surface-raised); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link { position: fixed; top: var(--space-2); left: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--accent); color: var(--canvas); transform: translateY(-200%); font-weight: 700; }
.skip-link:focus { transform: none; color: var(--canvas); }

/* Shared shell and navigation. */
.shell { width: min(1280px, calc(100% - 32px)); margin-inline: auto; padding-block: 24px; }
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 56px; padding-block: 0; }
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 44px; font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.nav-brand svg { width: 24px; height: 24px; }
.nav-brand small { display: none; color: var(--muted); font-size: 11px; font-weight: 500; }
.nav-links { display: flex; flex: none; gap: var(--space-1); }
.nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); color: var(--muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.nav-links a:hover { background: var(--surface-hover); color: var(--text); }
.nav-links a[aria-current="page"] { border-color: var(--border-strong); background: var(--accent-soft); color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.site-footer .shell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-block: var(--space-4); }
.site-footer b { color: var(--accent); font-size: 11px; letter-spacing: .04em; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.site-footer a:hover { color: var(--accent-hover); }
.hero, .profile-header, .replay-header { margin-bottom: var(--space-5); }
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hero > *, .profile-banner > *, .toolbar > *, .section-header > * { min-width: 0; }
.subtitle, .section-note, .profile-metadata { color: var(--muted); overflow-wrap: anywhere; }
.subtitle { max-width: 680px; margin-bottom: 0; }
.section-note { margin-block: var(--space-1) var(--space-3); font-size: 13px; }
.hero-actions, .refresh-actions, .filter-actions, .upload-actions, .teammate-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.refresh-actions { color: var(--muted); font-size: 13px; }
#refresh-status:empty { display: none; }
.back-link { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--muted); }
.replay-back { margin-bottom: var(--space-3); }

/* Controls and accessible states. */
.button, .primary, .secondary, .filter-clear, .vote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.primary { border-color: var(--accent); background: var(--accent); color: var(--canvas); }
.primary:not(:disabled):hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--canvas); }
.secondary:not(:disabled):hover, .button:not(.primary):not(:disabled):hover, .vote-button:not(:disabled):hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.primary svg, .secondary svg { width: 16px; height: 16px; }
.filter-clear { border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline; }
.filter-clear:hover { color: var(--text); }
.field, .filter-field, .search, .period-field, .comment-form label { display: grid; align-content: start; min-width: 0; gap: var(--space-1); }
.field > span, .filter-field > span, .search > span, .period-field > span, .comment-form label > span,
.metric-card > span, .card-metrics dt, .card-secondary dt, .matchup-metrics dt, .result-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
}
input:not([type="radio"]):not([type="file"]), select, textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--canvas);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}
select { cursor: pointer; }
textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.chip, .stats-chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; padding: 2px var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 600; vertical-align: middle; overflow-wrap: anywhere; }
.stats-chip.is-complete, .stats-chip.complete { border-color: var(--border-strong); background: var(--accent-soft); color: var(--accent); }
.chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.filter-chip { min-height: var(--control-height); padding-inline: var(--space-2); font-size: 12px; }
.filter-chip::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 2px; }
.filter-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.filter-chip[aria-pressed="true"]::before { content: "✓"; height: auto; border-color: transparent; line-height: 1; }
.segmented-control { display: flex; align-items: stretch; gap: var(--space-1); width: 100%; min-width: 0; margin: 0; padding: var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--canvas); }
.segmented-control label { position: relative; display: flex; flex: 1; min-width: 0; cursor: pointer; }
.segmented-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented-control label > span { display: flex; align-items: center; justify-content: center; min-height: var(--control-height); width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid transparent; border-radius: 4px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.segmented-control input:checked + span { border-color: var(--border-strong); background: var(--surface-hover); color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.segmented-control input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented-control label:hover > span { color: var(--text); }
.state-panel { margin-bottom: var(--space-5); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.state-message { margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.state-error, .upload-error { border-color: var(--danger); color: var(--danger); }
.state-panel .button, .state-panel .secondary, .state-panel .back-link { margin-right: var(--space-2); }
.empty { margin: 0; padding: var(--space-5) var(--space-4); color: var(--muted); text-align: center; }

/* Panels, compact metrics, and real tables. */
.panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.section-header, .toolbar { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.section-header p, .toolbar p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-2); margin: 0 0 var(--space-5); }
.metric-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-1); min-width: 0; min-height: 80px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.metric-card strong { max-width: 100%; font-size: 22px; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.metric-date strong, #last-import { font-size: 15px; }
.scroll-region { min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: var(--border-strong) var(--canvas); }
.desktop-table { display: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.35; }
caption { text-align: left; }
.data-table th, .data-table td { height: 42px; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.data-table thead th { position: sticky; top: 0; z-index: 3; height: 36px; background: var(--surface-raised); color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.data-table thead tr + tr th { top: 36px; }
.data-table tbody tr { --row-surface: var(--surface); background: var(--row-surface); }
.data-table tbody tr:nth-child(even) { --row-surface: var(--surface-raised); }
.data-table tbody tr:hover, .data-table tbody tr:focus-within { --row-surface: var(--surface-hover); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody th { font-weight: 600; }
.data-table .number { text-align: right; }
.data-table td.number { font-weight: 600; }
.data-table th button { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-1); min-height: 32px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.data-table th.number button { justify-content: flex-end; }
.data-table th button:hover, .data-table th[aria-sort] button { color: var(--accent); }
.sort-icon { display: inline-block; width: 12px; text-align: center; }
.player-name, .player-col { font-weight: 650; }
.player-name a, .player-col a, .card-header a, .rival-name, .matchup-name a, .teammate-summary a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.player-name a:hover, .player-col a:hover, .card-header a:hover, .rival-name:hover, .matchup-name a:hover, .teammate-summary a:hover { color: var(--accent-hover); text-decoration: underline; }
.platform, .incomplete, .most-played small { color: var(--muted); }
.kill-count, .change-positive, .replay-kd, .stat-good strong, .stat-good dd { color: var(--accent); }
.death-count, .change-negative, .stat-bad strong, .stat-bad dd { color: var(--danger); }
.stat-warn strong, .stat-warn dd { color: var(--warning); }
.session-kd { font-weight: 750; }
.rank { position: relative; isolation: isolate; min-width: 28px; color: var(--muted); text-align: center; font-size: 12px; }
.top-rank { font-weight: 750; }
.rank-1, .rank-2, .rank-3 { color: var(--canvas); }
.rank-1::before, .rank-2::before, .rank-3::before { position: absolute; z-index: -1; top: 50%; left: 50%; width: 28px; height: 28px; border-radius: var(--radius-control); transform: translate(-50%, -50%); content: ""; }
.rank-1::before { background: var(--rank-gold); }
.rank-2::before { background: var(--rank-silver); }
.rank-3::before { background: var(--rank-bronze); }

/* Semantic mobile cards and shared classic-script list helpers. */
.data-list, .identity-list, .teammates, .comment-list, .history-list { display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mobile-cards { display: grid; }
.panel > .mobile-cards { margin: 0 var(--space-4) var(--space-4); }
.data-card, .list-card { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.data-card { padding: var(--space-3); }
.card-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.card-header > a, .card-header > strong, .card-header > .player-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.card-header a { display: inline-flex; align-items: center; min-height: 44px; }
.card-header .chip, .card-header .stats-chip { flex: none; }
.card-header time { overflow-wrap: anywhere; }
.card-metrics, .matchup-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.card-metrics > div, .card-secondary > div, .matchup-metrics > div { min-width: 0; }
.card-metrics dd, .matchup-metrics dd { margin: var(--space-1) 0 0; font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.card-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.card-secondary dd { margin: var(--space-1) 0 0; font-size: 13px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.list-disclosure { margin: var(--space-2) 0 0; border-top: 1px solid var(--border); }
summary { min-height: var(--control-height); padding-block: var(--space-2); color: var(--muted); font-size: 13px; font-weight: 600; }
summary:hover { color: var(--text); }
summary::marker { color: var(--accent); }
.list-content, .list-body { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3); overflow-wrap: anywhere; }
.data-card .list-content { padding: var(--space-2) 0 0; }
.list-content p, .list-body p { margin-bottom: 0; }
.list-card > header, .list-disclosure > summary:has(.list-title) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.list-title { min-width: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.list-metrics { display: flex; flex: none; align-items: center; gap: var(--space-3); }
.list-metrics > span { display: flex; flex-direction: column; text-align: right; font-size: 13px; }
.list-metrics small { color: var(--muted); font-size: 11px; }
.list-disclosure > summary:has(.list-title)::after { content: "+"; color: var(--accent); }
.list-disclosure[open] > summary:has(.list-title)::after { content: "−"; }

/* Player directory. */
.directory-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); margin: 0 var(--space-4) var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.directory-filters .search-field { grid-column: 1 / -1; }
.advanced-filters { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.filter-summary { width: max-content; max-width: 100%; min-height: var(--control-height); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.filter-summary:hover { color: var(--text); }
.filter-controls { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-3); padding-top: var(--space-3); }
.advanced-filters.is-open .filter-controls { display: grid; }
.filter-controls > div.filter-field { grid-column: 1 / -1; }
.filter-actions { grid-column: 2; grid-row: 2; align-self: start; justify-content: flex-end; gap: var(--space-1); }
.filter-actions .button, .filter-clear { padding-inline: var(--space-2); font-size: 12px; }
.filter-clear-long { display: none; }
.mobile-sort { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); margin: 0 var(--space-4) var(--space-4); padding: 0; }
.mobile-sort .filter-field, .mobile-sort .field { min-width: 0; }
.players-table-wrap { max-height: min(72vh, 760px); border-top: 1px solid var(--border); }
.players-table { min-width: 1000px; }
.players-table .rank-col, .players-table .rank { width: 48px; min-width: 48px; text-align: center; }
.players-table .player-col { width: 208px; min-width: 208px; max-width: 208px; white-space: normal; overflow-wrap: anywhere; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.pagination button { flex: none; }
.pagination span { text-align: center; }

/* Identity-first profile. */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.profile-banner { display: flex; align-items: center; gap: var(--space-3); }
.monogram { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent); font-size: 24px; font-weight: 750; text-transform: uppercase; }
.profile-header h1 { margin-block: var(--space-1) var(--space-2); }
.profile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.profile-name-row h1 { margin-block: var(--space-1) var(--space-2); }
.profile-name-row .copy-username { min-height: 32px; padding: var(--space-1) var(--space-2); font-size: 12px; }
.profile-metadata { margin: var(--space-2) 0 0; font-size: 13px; }
.profile-section-nav { position: sticky; top: 56px; z-index: 30; display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-5); padding: var(--space-1); overflow-x: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--panel-shadow); }
.profile-platform { margin: 0; color: var(--muted); font-size: 13px; }
.profile-section-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: none; padding-inline: var(--space-3); border-radius: 4px; color: var(--muted); font-size: 13px; text-decoration: none; }
.profile-section-nav a:hover, .profile-section-nav a:focus-visible { background: var(--surface-hover); color: var(--text); }
#overview, #identity, #rivals-section, #history, #community { scroll-margin-top: 124px; }
.profile-section { margin-bottom: var(--space-5); }
.profile-summary .metric-card { min-height: 84px; }
.percentile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0 var(--space-4) var(--space-4); }
.percentile-grid article { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.percentile-card-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3); color: var(--text); text-decoration: none; }
.percentile-card-link > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.percentile-card-link small { grid-column: 1 / -1; color: var(--muted); }
.percentile-rank { display: flex; align-items: baseline; gap: var(--space-1); }
.percentile-rank strong { color: var(--accent); font-size: 22px; line-height: 1.2; }
.percentile-rank-label { color: var(--muted); font-size: 11px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "names" "accounts" "teammates"; align-items: start; gap: var(--space-4); }
.known-names-panel { grid-area: names; }
.connected-accounts-panel { grid-area: accounts; }
.teammates-panel { grid-area: teammates; }
.profile-panel { min-width: 0; padding: var(--space-4); }
.profile-panel > h2 { margin-bottom: var(--space-2); }
.identity-list-scroll, .teammates-scroll { max-height: 420px; }
.known-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-2); }
.identity-platform, .identity-dates, .badge-date { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.identity-platform { text-align: right; }
.identity-dates { grid-column: 1 / -1; font-size: 11px; }
.account-badge-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-height: 44px; padding: var(--space-2); }
.badge-title-wrap { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.badge-logo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: var(--muted); }
.badge-logo svg { width: 20px; height: 20px; }
.teammate-card { display: grid; gap: var(--space-2); padding: var(--space-2); }
.teammate-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.teammate-summary > a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.shared-replays { flex: none; color: var(--muted); font-size: 11px; }
.teammate-actions { gap: var(--space-2); }
.teammate-actions > * { flex: 1; }
.rivals-list { margin: 0 var(--space-4) var(--space-4); }
.rival-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.rival-name { display: inline-flex; align-items: center; min-height: var(--control-height); font-weight: 650; }
.rival-row > .player-detail-profile { justify-self: start; }
.period-panel { margin-bottom: var(--space-5); }
.period-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.period-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.period-arrow { display: none; }
.period-note { margin: 0; color: var(--muted); font-size: 13px; }
.period-grid { margin: 0 var(--space-4) var(--space-4); }
.period-grid .metric-card { background: var(--surface-raised); }
.profile-history-table { max-height: 560px; margin: 0 var(--space-4) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); }
.profile-history-table table { min-width: 880px; }
.history-note { margin: 0 var(--space-4) var(--space-3); }
.data-table .between-sessions > *, .data-card.between-sessions { border-top: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong); background: var(--surface-raised); color: var(--warning); }
.data-card.between-sessions .card-header, .data-card.between-sessions .card-metrics dt { color: var(--warning); }
.list-content .between-sessions { padding-top: var(--space-3); border-top: 1px dashed var(--border-strong); color: var(--warning); }
.list-content .between-sessions .card-metrics dt { color: var(--warning); }
.recording-row .stats-chip { margin-left: var(--space-2); }
.feedback-panel { padding: var(--space-4); }
.feedback-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--border); }
.feedback-toolbar .section-note { margin-bottom: 0; }
.player-votes { display: flex; align-items: center; gap: var(--space-2); }
.vote-button { flex: 1; }
.vote-button svg { width: 18px; height: 18px; fill: currentColor; }
.vote-button[aria-pressed="true"] { border-style: double; border-width: 3px; padding: 6px 10px; background: var(--accent-soft); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.vote-down[aria-pressed="true"] { border-color: var(--danger); background: var(--surface-hover); color: var(--danger); }
.comment-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.comment-submit-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); grid-column: 1 / -1; }
.feedback-status { margin: 0; color: var(--accent); font-size: 13px; }
.feedback-status:empty { display: none; }
.feedback-status.is-error { color: var(--danger); }
.comments-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4) var(--space-3); }
.comments-heading h3 { margin: 0; }
.comments-heading span { color: var(--muted); font-size: 12px; }
.comment-list > li { min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.comment-list header { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.comment-list strong, .comment-list p { overflow-wrap: anywhere; }
.comment-list p { margin-bottom: 0; line-height: 1.5; white-space: pre-wrap; }
.comment-list time { color: var(--muted); font-size: 12px; }
.comment-list .comment-empty { color: var(--muted); text-align: center; }

/* Replay comparison, grouped participants, and the independently scrolling matrix. */
.replay-kill-pairs { margin-bottom: var(--space-5); }
.replay-player-view { margin: 0 var(--space-4) var(--space-4); }
.matchup-player-control { width: 100%; max-width: 360px; }
.replay-player-view h3 { margin-block: var(--space-4) var(--space-3); overflow-wrap: anywhere; }
.matchup-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-3); }
.matchup-summary .metric-card { background: var(--surface-raised); }
.matchup-list { gap: 0; border: 1px solid var(--border); border-radius: var(--radius-card); }
.matchup-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(128px, .9fr); align-items: center; column-gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border); }
.matchup-row:last-child { border-bottom: 0; }
.matchup-row:nth-child(even) { background: var(--surface-raised); }
.matchup-row:hover, .matchup-row:focus-within { background: var(--surface-hover); }
.matchup-name { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.matchup-name a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.matchup-metrics { gap: var(--space-1); text-align: right; }
.matchup-metrics dd { margin-top: 0; font-size: 13px; }
.matchup-metrics dt { font-size: 11px; letter-spacing: 0; }
.matchup-context { grid-column: 1 / -1; margin: 0 0 var(--space-1); color: var(--muted); font-size: 12px; }
.matchup-no-contact .matchup-name, .matchup-no-contact .matchup-metrics { color: var(--muted); }
.matchup-matrix-title { margin: 0 var(--space-4) var(--space-2); }
.matchup-matrix-help { margin: 0 var(--space-4) var(--space-3); }
.replay-kill-table-wrap { --matrix-label-width: 136px; --matrix-cell-width: 44px; max-height: min(68vh, 720px); margin: 0 var(--space-4) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); }
.replay-kill-table-wrap table { width: max-content; min-width: 100%; }
.replay-kill-table-wrap th, .replay-kill-table-wrap td { width: var(--matrix-cell-width); min-width: var(--matrix-cell-width); height: 44px; padding: var(--space-1); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; font-size: 12px; }
.replay-kill-table-wrap th { background: var(--surface-raised); color: var(--muted); font-weight: 600; text-transform: none; }
.replay-kill-table-wrap thead th { position: sticky; top: 0; z-index: 3; }
.replay-kill-table-wrap tbody th { position: sticky; left: 0; z-index: 2; text-align: left; }
.replay-kill-table-wrap th:first-child { width: var(--matrix-label-width); min-width: var(--matrix-label-width); max-width: var(--matrix-label-width); border-right-color: var(--border-strong); }
.replay-kill-table-wrap thead th:first-child { left: 0; z-index: 4; }
.matrix-player-label { display: flex; align-items: center; gap: var(--space-1); }
.matrix-number { flex: 0 0 24px; color: var(--muted); text-align: center; }
.matrix-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; color: var(--text); }
.matrix-name a { display: inline-flex; align-items: center; min-height: var(--control-height); color: inherit; text-decoration: none; }
.matrix-name a:hover { color: var(--accent); text-decoration: underline; }
.matrix-separator { padding-inline: 2px; color: var(--muted); }
.replay-kill-table-wrap .is-zero { color: var(--muted); }
.replay-kill-table-wrap .has-activity { background: var(--accent-soft); font-weight: 700; }
.matrix-row-score { color: var(--accent); }
.matrix-column-score { color: var(--danger); }
.replay-kill-table-wrap .is-diagonal, .replay-kill-table-wrap .is-redundant { background: var(--canvas); color: var(--muted); }
.replay-kill-table-wrap .is-matchup-active, .replay-kill-table-wrap .is-axis-active { background: var(--surface-hover); outline: 1px solid var(--accent); outline-offset: -1px; }
.replay-kill-table-wrap .is-axis-active { color: var(--accent); }
.replay-kill-table-wrap :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.replay-participant-table-wrap { max-height: 680px; margin: 0 var(--space-4) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); }
.replay-participant-table-wrap table { min-width: 980px; }
.replay-participant-table-wrap th[scope="colgroup"] { text-align: center; border-bottom-color: var(--border-strong); }
.replay-participant-table-wrap th[scope="colgroup"] + th, .replay-participant-table-wrap .lifetime-start { border-left: 1px solid var(--border-strong); }
.replay-participant-table-wrap .player-name { min-width: 240px; }
.replay-participant-table-wrap .player-name .stats-chip { margin-left: var(--space-2); }
.method-note { margin: 0 var(--space-4) var(--space-4); padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); }
.method-note p { margin-bottom: var(--space-3); color: var(--muted); font-size: 13px; }

/* Upload stays a single, bounded task. */
.upload-body main.shell { max-width: 760px; }
.upload-panel, #upload-form { display: grid; gap: var(--space-4); }
.upload-panel { padding: var(--space-4); }
.upload-drop { display: grid; justify-items: center; align-content: center; gap: var(--space-1); width: 100%; min-width: 0; min-height: 160px; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--canvas); color: var(--text); text-align: center; }
.upload-drop:not(:disabled):hover { border-color: var(--accent); background: var(--surface-hover); }
.upload-drop.is-dragover, .upload-drop.has-file { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.upload-drop.is-error { border-color: var(--danger); border-style: double; }
.drop-icon { width: 32px; height: 32px; color: var(--muted); }
.upload-drop.has-file .drop-icon, .upload-drop.is-dragover .drop-icon { color: var(--accent); }
.upload-drop.is-error .drop-icon { color: var(--danger); }
.drop-hint { font-size: 13px; line-height: 1.35; color: var(--muted); }
.drop-file { max-width: 100%; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.drop-meta { color: var(--muted); font-size: 11px; }
.upload-actions > * { flex: 1; }
.upload-progress { display: grid; gap: var(--space-2); }
.upload-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 13px; }
.upload-progress-row > span, #upload-progress-bytes { color: var(--muted); font-size: 12px; }
#upload-progress-bar { display: block; appearance: none; width: 100%; height: 10px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--canvas); accent-color: var(--accent); }
#upload-progress-bar::-webkit-progress-bar { background: var(--canvas); }
#upload-progress-bar::-webkit-progress-value { background: var(--accent); }
#upload-progress-bar::-moz-progress-bar { background: var(--accent); }
.upload-error { margin: 0; padding: var(--space-3); border: 1px solid var(--danger); border-radius: var(--radius-control); background: var(--surface-raised); font-size: 13px; overflow-wrap: anywhere; }
.upload-error > span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: var(--space-1); border: 1px solid currentColor; border-radius: 50%; font-weight: 750; }
#upload-retry { justify-self: start; }
.upload-result { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface-raised); }
.result-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.result-head > div { min-width: 0; }
.result-head h2 { margin-bottom: var(--space-1); }
.result-head .section-note { margin-bottom: 0; }
.result-check { width: 32px; height: 32px; color: var(--accent); }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.result-grid .stat { min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.result-grid dd { margin: var(--space-1) 0 0; font-size: 22px; font-weight: 750; line-height: 1.2; }
.upload-history h2 { margin-bottom: var(--space-3); }
.history-list { gap: 0; }
.history-list > li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-block: var(--space-2); border-bottom: 1px solid var(--border); }
.history-list > li:last-child { border-bottom: 0; }
.history-list strong { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.history-list span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

@media (min-width: 521px) {
  :root { --control-height: 36px; }
  .shell { width: min(1280px, calc(100% - 48px)); padding-block: 28px; }
  .nav-brand { font-size: 15px; }
  .nav-brand small { display: inline; }
  .nav-links a { min-height: 36px; padding-inline: var(--space-3); }
  .site-footer .shell { flex-direction: row; align-items: center; justify-content: space-between; }
  .site-footer a { min-height: 32px; }
  .hero { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero-actions { flex: none; }
  input:not([type="radio"]):not([type="file"]), select, textarea { font-size: 13px; }
  .button, .primary, .secondary, .vote-button { padding-block: var(--space-1); }
  .vote-button[aria-pressed="true"] { padding-block: 2px; }
  .section-header, .toolbar { flex-direction: row; align-items: center; }
  .desktop-table { display: block; }
  .mobile-cards { display: none; }
  .metric-grid { gap: var(--space-3); }
  .profile-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .players-table .rank-col, .players-table .rank { position: sticky; left: 0; z-index: 1; background: var(--row-surface, var(--surface-raised)); }
  .players-table .player-col { position: sticky; left: 48px; z-index: 1; background: var(--row-surface, var(--surface-raised)); border-right: 1px solid var(--border-strong); }
  .players-table thead .rank-col, .players-table thead .player-col { z-index: 4; }
  .percentile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .percentile-card-link { grid-template-columns: minmax(0, 1fr); }
  .percentile-rank { flex-wrap: wrap; }
  .monogram { width: 64px; height: 64px; }
  .profile-section-nav a { min-height: 36px; }
  .account-badge-card { flex-direction: row; align-items: center; justify-content: space-between; }
  .badge-date { font-size: 11px; }
  .teammate-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 44px; padding: var(--space-1) var(--space-2); }
  .teammate-summary { display: grid; gap: 0; }
  .teammate-summary > a { min-height: 0; }
  .teammate-actions { flex-wrap: nowrap; }
  .teammate-actions > * { flex: none; min-height: 32px; padding: var(--space-1) var(--space-2); font-size: 12px; }
  .rival-row { grid-template-columns: minmax(0, 1fr) minmax(208px, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-1) var(--space-2); }
  .rival-row .card-metrics { text-align: right; }
  .rival-row .card-metrics dd { margin-top: 0; font-size: 13px; }
  .rival-row > .player-detail-profile { min-height: 32px; padding: var(--space-1) var(--space-2); font-size: 12px; }
  .player-votes { flex: none; }
  .comment-submit-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .comment-list header { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
  .comment-list time { flex: none; }
  .segmented-control { width: auto; flex: none; }
  .segmented-control label { flex: none; }
  .matchup-row { grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); min-height: 44px; padding-inline: var(--space-3); }
  .matchup-name a { min-height: 36px; }
  .replay-kill-table-wrap { --matrix-label-width: 176px; --matrix-cell-width: 42px; }
  .replay-kill-table-wrap th, .replay-kill-table-wrap td { height: 42px; font-size: 13px; }
  .replay-kill-table-wrap thead th { height: 36px; }
  .matrix-name a { min-height: 32px; }
  .upload-drop { min-height: 180px; }
  .upload-actions > * { flex: none; }
  .result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-list > li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 42px; }
  .history-list span { text-align: right; }
}

@media (min-width: 901px) {
  .shell { width: min(1280px, calc(100% - 64px)); padding-block: 32px; }
  .directory-metrics, .replay-summary, .period-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .directory-filters { position: sticky; top: 56px; z-index: 20; grid-template-columns: minmax(0, 1fr) auto; background: var(--surface); box-shadow: var(--panel-shadow); }
  .directory-filters .search-field { grid-column: 1; }
  .filter-actions { grid-column: 2; grid-row: 1; align-self: end; }
  .filter-clear-short { display: none; }
  .filter-clear-long { display: inline; }
  .filter-summary { display: none; }
  .advanced-filters { display: contents; }
  .advanced-filters > .filter-controls { display: grid; grid-column: 1 / -1; grid-row: 2; }
  .filter-controls { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) minmax(110px, 1.2fr); padding-top: 0; }
  .filter-controls > div.filter-field { grid-column: auto; }
  .platform-filter .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); scrollbar-gutter: stable; }
  .filter-chip { flex: none; white-space: nowrap; }
  .filter-chip { min-height: 32px; }
  .players-table .rank-col, .players-table .rank, .players-table .player-col { position: static; }
  .players-table thead .rank-col, .players-table thead .player-col { position: sticky; top: 0; left: auto; z-index: 3; }
  .players-table .player-col { border-right: 0; }
  .profile-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); grid-template-areas: "names teammates" "accounts teammates"; grid-template-rows: min-content 1fr; }
  .period-toolbar { flex-direction: row; align-items: flex-end; }
  .period-inputs { grid-template-columns: repeat(2, minmax(0, 180px)); flex: none; }
  .period-note { flex: 1; padding-bottom: var(--space-2); }
  .feedback-toolbar { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .comment-form { grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); }
  .replay-participants .search { width: min(320px, 45%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}