/* Public Data stats pages on the scrim / tournament sets: Maps, Players, Compare Players, Records, Regions (shared; pstats.js).
   Colours / spacing come from index.css; the page head and filter bar are repeated per the per-page-CSS convention of the site. */

.ps-page { max-width: 1200px; margin: 0 auto; padding: 56px var(--pad) 96px; }

.page-head { margin-bottom: 28px; text-align: center; }
.eyebrow { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.page-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 400; line-height: 1; letter-spacing: 0.01em; text-align: center; }
.page-lead { margin: 10px auto 0; max-width: 640px; text-align: center; color: var(--text-dim); }
.muted { color: var(--text-muted); }
.notice--error { padding: 12px 16px; margin-bottom: 16px; background: rgba(255, 122, 122, 0.08); border: 1px solid rgba(255, 122, 122, 0.35); border-radius: var(--radius-sm); color: #ff7a7a; font-size: 14px; font-weight: 600; }
.h2h-credit { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); text-align: center; }
[hidden] { display: none !important; }

/* ---------- filters ---------- */

.ps-filters { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 14px; margin-bottom: 20px; }
.ps-filters .fld { display: flex; flex-direction: column; gap: 4px; }
.ps-filters .fld > span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ps-filters select, .ps-filters input {
    padding: 7px 8px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    color-scheme: dark; font-size: 13px; max-width: 220px;
}
.ps-summary { margin-bottom: 14px; font-size: 12px; text-align: center; }
.ps-empty { padding: 24px 0; text-align: center; }

/* ---------- cards, tiles ---------- */

.ps-card { margin-top: 18px; padding: 18px 20px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-width: 0; }
.ps-card:first-child { margin-top: 0; }
.ps-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.ps-card-head h2, .ps-card-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.ps-note { font-size: 12px; color: var(--text-muted); }
.ps-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.ps-grid2 > .ps-card { margin-top: 0; }
.ps-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.ps-tile { display: flex; flex-direction: column; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ps-tile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ps-tile strong { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.ps-tile small { font-size: 11px; }
.is-hot { color: #7ee07a; }
.is-cold { color: #ff8a80; }

/* ---------- pictures ---------- */

.ps-logo { width: 28px; height: 28px; flex: none; border-radius: 7px; object-fit: contain; background: var(--surface-3); }
.ps-logo--text { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--text-dim); }
.ps-logo--lg { width: 56px; height: 56px; border-radius: 12px; }
.ps-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; object-position: top; background: var(--surface-3); }
.ps-avatar--text { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-dim); }
.ps-avatar--lg { width: 84px; height: 84px; }
.ps-flag { width: 20px; height: 14px; flex: none; border-radius: 2px; object-fit: cover; }
.ps-brawler { width: 32px; height: 32px; flex: none; border-radius: 8px; object-fit: cover; background: var(--surface-3); }
.ps-brawler--blank { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-muted); }
.ps-brawler--lg { width: 44px; height: 44px; border-radius: 10px; }
.ps-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; font-weight: 600; }
.ps-who:hover { color: var(--primary); }
.ps-who small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
/* (`break-word`, not `anywhere`: with `anywhere` a name counts as one letter wide when a table decides how narrow its columns can get, so a
   table wider than its box squeezed the name column to a sliver and broke every name letter by letter; now the table scrolls instead) */
.ps-who > span { min-width: 0; overflow-wrap: break-word; }

/* ---------- bars and rates ---------- */

.ps-bar { display: inline-block; width: 64px; height: 6px; flex: none; border-radius: 99px; background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.ps-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.ps-bar--hot i { background: #7ee07a; }
.ps-bar--cold i { background: #ff8a80; }
.ps-rate { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ps-rate b { min-width: 44px; text-align: right; }

/* ---------- tables ---------- */

.ps-table-wrap { overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ps-table th { padding: 8px 10px; text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.ps-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-table .ps-c { text-align: center; width: 28%; }
.ps-table th.is-sort { cursor: pointer; user-select: none; }
.ps-table th.is-sort:hover, .ps-table th.is-on { color: var(--primary); }
.ps-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.ps-table tr.is-click { cursor: pointer; }
.ps-rank { width: 34px; color: var(--text-muted); text-align: center !important; font-variant-numeric: tabular-nums; }
.ps-table .ps-rank--1 { color: #ffd166; font-weight: 800; }
.ps-pics { display: inline-flex; gap: 4px; }
.ps-more { margin-top: 12px; text-align: center; }

/* ---------- segmented control / chips ---------- */

.ps-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.ps-seg button { padding: 6px 14px; background: transparent; border: 0; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ps-seg button.is-on { background: var(--primary); color: var(--primary-ink); }
.ps-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ps-result { display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; text-align: center; }
.ps-result--W { background: rgba(126, 224, 122, 0.16); color: #7ee07a; }
.ps-result--L { background: rgba(255, 138, 128, 0.16); color: #ff8a80; }

/* ---------- charts ---------- */

.ps-chart-wrap { position: relative; }
.ps-chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ps-chart text { fill: var(--text-muted); font-size: 11px; }
.ps-chart .grid { stroke: var(--border); stroke-width: 1; }
.ps-chart .ref { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.ps-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }
.ps-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: baseline; }
.ps-chart-tip { position: absolute; top: 4px; transform: translateX(-50%); padding: 7px 10px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 8px; font-size: 12px; line-height: 1.4; pointer-events: none; white-space: nowrap; z-index: 2; }

/* ---------- dialog ---------- */

.ps-dialog { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 24px); padding: 0; background: var(--bg-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.ps-dialog::backdrop { background: rgba(4, 6, 10, 0.72); }
.ps-dialog-body { position: relative; padding: 22px 24px 24px; overflow-y: auto; max-height: calc(100vh - 34px); max-height: calc(100dvh - 26px); }
.ps-dialog-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; }

@media (max-width: 800px) {
    .ps-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    /* a phone: filters sit two to a row (a search box, and the long ones - "Scrim + Tournaments" - take the full width) instead of one at a time,
       which pushed the table a whole screen down */
    .ps-filters { gap: 10px; }
    .ps-filters .fld { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .ps-filters .fld:has(input:not([type="date"]):not([type="number"])), .ps-filters .fld:has(#matchType), .ps-filters .fld:has(#sinceSelect) { flex-basis: 100%; }
    .ps-filters .fld:has(input[type="date"]) { flex-basis: calc(50% - 5px); }
    .ps-filters select, .ps-filters input { width: 100%; max-width: none; }
    .ps-page { padding-top: 36px; }
    .ps-card { padding: 14px; }
    .ps-hide-s { display: none; }
}