/* persons.css — Player Profile page only
   - Uses same base theme as rankings
   - Competition cards restored
   - H2H tab styled like rankings vibe
*/

.psPage { padding-top: 18px; }

.psTopRow { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.psBackBtn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  font-weight:900;
}

.psCard{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; box-shadow:0 14px 34px rgba(0,0,0,.05); }
.psHero{ padding:16px; }
.psHeroTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.psName{ margin:0; font-size:28px; line-height:1.15; font-weight:1000; letter-spacing:.2px; }
.psCrumbs{ margin-top:6px; color:rgba(0,0,0,.6); font-weight:800; font-size:12px; }

.psIdBox{
  display:flex; flex-direction:column; align-items:flex-end;
  min-width:120px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(0,0,0,.02), rgba(0,0,0,.00));
}
.psIdLabel{ font-size:12px; font-weight:1000; opacity:.65; letter-spacing:.4px; }
.psIdValue{ font-size:18px; font-weight:1000; }

.psHeroStats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.psStat{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.psStatLabel{ font-size:12px; font-weight:1000; opacity:.65; }
.psStatVal{ margin-top:6px; font-size:22px; font-weight:1000; }

.psTabsCard{ margin-top:14px; padding:10px; }
.psTabs{ display:flex; gap:10px; flex-wrap:wrap; }
.psTab{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:10px 12px;
  border-radius:14px;
  font-weight:1000;
  cursor:pointer;
}
.psTab.on{
  background:#111;
  color:#fff;
  border-color:#111;
}

.psSection{ margin-top:14px; }
.psSectionHead{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px; }
.psSectionTitle{ font-weight:1000; font-size:16px; letter-spacing:.2px; }

.psBlock{ padding:12px; }

/* PR table */
.psPrHead{
  display:grid;
  grid-template-columns: 1.1fr .5fr .6fr .6fr .5fr;
  gap:10px;
  padding:10px 10px;
  font-weight:1000;
  color:rgba(0,0,0,.65);
  border-bottom:1px solid rgba(0,0,0,.10);
}
.psPrRow{
  display:grid;
  grid-template-columns: 1.1fr .5fr .6fr .6fr .5fr;
  gap:10px;
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  align-items:center;
  font-weight:900;
}
.psPrRow:last-child{ border-bottom:none; }
.psPrEvent{ font-weight:1000; }
.psPrRow .right{ text-align:right; }

.psPrMobile{ display:none; }
.psPrMobCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:12px;
  background: rgba(0,0,0,.02);
  margin-bottom:10px;
}
.psPrMobTop{ display:flex; justify-content:space-between; gap:10px; }
.psPrMobEvent{ font-weight:1000; font-size:16px; }
.psPrMobGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.psMiniLabel{ font-size:11px; font-weight:1000; opacity:.65; }
.psMiniVal{ font-weight:1000; }

/* Competitions section bar */
.psEventBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.psPills{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.psPill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-weight:1000;
  cursor:pointer;
}
.psPill.on{
  background:#111; color:#fff; border-color:#111;
}

.psModeTabs{ display:flex; gap:8px; }
.psModeBtn{
  padding:8px 10px;
  border-radius:12px;
  font-weight:1000;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  cursor:pointer;
}
.psModeBtn.on{
  background: linear-gradient(135deg, rgba(219,39,119,.18), rgba(124,58,237,.12));
  border-color: rgba(219,39,119,.30);
}

/* Lists */
.psList{ display:grid; gap:12px; }
.psEmpty{
  padding:14px;
  border-radius:16px;
  border:1px dashed rgba(0,0,0,.20);
  background: rgba(0,0,0,.02);
  font-weight:1000;
  color: rgba(0,0,0,.70);
}
.psError{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(194,14,14,.25);
  background: rgba(194,14,14,.06);
  color:#8b0a0a;
  font-weight:1000;
}

/* ============================
   Competition cards (RESTORED)
   Uses CSS vars set by JS:
   --psA, --psB for gradient,
   --psText, --psInk, --psRing
   ============================ */

.psCompCard{
  border-radius:20px;
  border:1px solid rgba(0,0,0,.10);
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.06);
}

.psCompInner{
  --psA: rgba(219,39,119,.16);
  --psB: rgba(124,58,237,.10);
  --psInk: #111;
  --psText: rgba(0,0,0,.72);
  --psRing: rgba(0,0,0,.10);

  padding:14px;
  background: linear-gradient(135deg, var(--psA), var(--psB));
  border:1px solid var(--psRing);
}

.psCompTop{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.psCompTitle{ margin:0; font-size:18px; font-weight:1000; color:var(--psInk); }
.psCompMeta{ margin-top:6px; font-weight:900; font-size:12px; color:var(--psText); }

.psCompBadges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.psBadge{
  padding:7px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size:12px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}
.psBadgeStrong{
  background:#111; color:#fff; border-color:#111;
}

.psCompMid{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.psCompPills{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.psChip{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.78);
  font-weight:1000;
  font-size:12px;
}
.psCompNums{ display:flex; gap:14px; flex-wrap:wrap; }
.psNumLabel{ font-weight:1000; opacity:.65; }
.psNumVal{ font-weight:1000; }

.psCompBottom{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.psBtn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  font-weight:1000;
  cursor:pointer;
}
.psBtn:disabled{ opacity:.55; cursor:not-allowed; }

.psSolves{
  margin-top:10px;
  display:none;
  border-top:1px solid rgba(0,0,0,.10);
  padding-top:10px;
}
.psSolves.on{ display:block; }

.psSolveRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.psSolvePill{
  padding:8px 10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  font-weight:1000;
  min-width:78px;
  text-align:center;
}

/* ============================
   H2H (Rankings-style design)
   ============================ */

.psH2HMatch{
  border-radius:20px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.06);
}
.psH2HMatchTop{
  padding:14px;
  background: linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
  border-bottom:1px solid rgba(0,0,0,.08);
}
.psH2HTitleBlock{ display:flex; flex-direction:column; gap:4px; }
.psH2HRound{ font-weight:1000; font-size:13px; opacity:.75; }
.psH2HGroup{ font-weight:1000; font-size:12px; opacity:.60; }

.psH2HScoreLine{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap:10px;
  align-items:center;
}
.psH2HName{
  font-weight:1000;
  color:#111 !important;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.psH2HName.win{ color:#0a7a2f !important; }
.psH2HName.lose{ color:#c20e0e !important; }

.psH2HScore{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-weight:1000;
  display:flex;
  gap:10px;
  align-items:center;
}
.psH2HScore .sep{ opacity:.45; }

.psH2HSetsWrap{ display:none; padding:14px; }
.psH2HSetsWrap.on{ display:block; }

.psH2HSetLabel{
  font-weight:1000;
  margin-top:8px;
  margin-bottom:8px;
  opacity:.75;
}
.psH2HPlayersGrid{
  display:grid;
  grid-template-columns: 150px 1fr;
  gap:10px;
  align-items:start;
  margin-bottom:12px;
}
.psH2HPlayerName a{ font-weight:1000; text-decoration:none; color:#111 !important; }
.psH2HPillsRow{ display:flex; flex-wrap:wrap; gap:8px; }
.psH2HPill{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-weight:1000;
  min-width:78px;
  text-align:center;
}

/* Mobile */
@media (max-width: 900px){
  .psHeroStats{ grid-template-columns: 1fr; }
  .psPrDesktop{ display:none; }
  .psPrMobile{ display:block; }

  .psH2HScoreLine{
    grid-template-columns: 1fr auto 1fr;
  }
  .psH2HScoreLine .psBtn{ grid-column: 1 / -1; width:100%; }
  .psH2HPlayersGrid{ grid-template-columns: 1fr; }
}

/* --- PR alignment fix (clean grid + consistent) --- */
.psPrHead, .psPrRow{
  grid-template-columns: 1.2fr .55fr .65fr .65fr .55fr;
}

/* --- Solves toggle behaviour --- */
.psSolves{ display:none; margin-top:10px; border-top:1px solid rgba(0,0,0,.10); padding-top:10px; }
.psSolves.on{ display:block; }

.psCompBottom{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.psCompBottomHint{ font-weight:1000; opacity:.65; font-size:12px; }

/* --- Solve pill coloring (NAo5 best/worst) --- */
.psSolvePill.best{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color: #0a7a2f;
}
.psSolvePill.worst{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color: #c20e0e;
}
.psSolvePill.dnf{
  opacity:.65;
}

/* --- H2H solve win/lose --- */
.psH2HPill.win{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color: #0a7a2f;
}
.psH2HPill.lose{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color: #c20e0e;
}
.psH2HPill.neutral{
  opacity:.85;
}

/* --- H2H set header row --- */
.psH2HSetHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  margin-bottom:8px;
}
.psH2HSetResult{
  font-weight:1000;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.psH2HSetResult.win{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color: #0a7a2f;
}
.psH2HSetResult.lose{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color: #c20e0e;
}

/* --- Mobile optimizations --- */
@media (max-width: 900px){
  .psPrHead{ display:none; }
  .psPrRow{
    grid-template-columns: 1fr;
    gap:6px;
  }
  .psPrRow .right{ text-align:left; }
  .psCompBottom{
    flex-direction:column;
    align-items:stretch;
  }
  .psCompBottom .psBtn{
    width:100%;
  }
}

/* ---------- Better card typography ---------- */
.psCompTitle{ font-size:18px; line-height:1.1; }
.psCompSub{ font-size:12px; font-weight:1000; opacity:.65; margin-top:4px; }
.psCompMid{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.psCompNums{ display:flex; gap:18px; }
.psCompNums > div{ display:flex; flex-direction:column; gap:2px; }
.psNumLabel{ font-size:11px; font-weight:1000; opacity:.6; }
.psNumVal{ font-size:16px; font-weight:1100; }

.psCompRanks{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.medal{
  font-weight:1100;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color:#111;
}
.medal.gold{ background: rgba(255,215,0,.18); border-color: rgba(255,215,0,.35); }
.medal.silver{ background: rgba(192,192,192,.22); border-color: rgba(192,192,192,.40); }
.medal.bronze{ background: rgba(205,127,50,.18); border-color: rgba(205,127,50,.35); }

/* ---------- Solves toggle ---------- */
.psSolves{ display:none; margin-top:10px; border-top:1px solid rgba(0,0,0,.10); padding-top:10px; }
.psSolves.on{ display:block; }

/* ---------- Solve coloring (normal rounds) ---------- */
.psSolvePill.empty{ opacity:.55; }
.psSolvePill.best{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color: #0a7a2f;
}
.psSolvePill.worst{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color: #c20e0e;
}

/* ---------- H2H set score + solve coloring ---------- */
.psH2HSetScore{
  font-weight:1100;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.psH2HPill.win{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color: #0a7a2f;
}
.psH2HPill.lose{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color: #c20e0e;
}
.psH2HPill.neutral{ opacity:.85; }

/* ---------- PR alignment ---------- */
.psPrHead, .psPrRow{ grid-template-columns: 1.1fr .55fr .65fr .65fr .55fr; }

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .psCompMid{ flex-direction:column; align-items:stretch; }
  .psCompNums{ justify-content:space-between; }
  .psBtn{ width:100%; }
  .psCompRanks{ justify-content:flex-start; }
  .psPrHead{ display:none; }
  .psPrRow{ grid-template-columns: 1fr; gap:6px; }
  .psPrRow .right{ text-align:left; }
}

/* -------- PR plain text, centered -------- */
.psPrHead, .psPrRow{
  grid-template-columns: 1.1fr .6fr .8fr .6fr .8fr;
}
.psPrHead > div, .psPrRow > div{ text-align:center; }
.psPrRow .psPrEvent{ font-weight:1100; }

/* Remove pill look if any from older CSS */
.psPrRow .medal{ display:none; } /* PR is plain text only */

/* -------- Competition cards better spacing -------- */
.psCompTitle{ font-size:18px; line-height:1.1; }
.psCompSub{ font-size:12px; font-weight:1000; opacity:.65; margin-top:4px; }
.psCompMid{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.psCompNums{ display:flex; gap:18px; }
.psCompNums > div{ display:flex; flex-direction:column; gap:2px; }
.psNumLabel{ font-size:11px; font-weight:1000; opacity:.6; }
.psNumVal{ font-size:16px; font-weight:1100; }

.psCompRanks{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.medal{
  font-weight:1100;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color:#111;
}
.medal.gold{ background: rgba(255,215,0,.18); border-color: rgba(255,215,0,.35); }
.medal.silver{ background: rgba(192,192,192,.22); border-color: rgba(192,192,192,.40); }
.medal.bronze{ background: rgba(205,127,50,.18); border-color: rgba(205,127,50,.35); }

.psSolves{ display:none; margin-top:10px; border-top:1px solid rgba(0,0,0,.10); padding-top:10px; }
.psSolves.on{ display:block; }

/* Solve pills */
.psSolvePill.neutral{ opacity:.9; }
.psSolvePill.best{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color: #0a7a2f;
}
.psSolvePill.worst{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color: #c20e0e;
}

/* -------- H2H: Competition grouped blocks -------- */
.psH2HCompBlock{
  margin-bottom:16px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.psH2HCompHead{
  padding:14px 14px;
  background: linear-gradient(135deg, var(--psA), var(--psB));
}
.psH2HCompTitle{ font-weight:1200; font-size:18px; }
.psH2HCompSub{ font-weight:1000; opacity:.7; font-size:12px; margin-top:2px; }
.psH2HCompMatches{ padding:12px; display:flex; flex-direction:column; gap:12px; }

/* Match header visibility */
.psH2HMainLine{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.psH2HRoundStrong{
  font-weight:1200;
  font-size:14px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}
.psH2HMetaStrong{
  font-weight:1100;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.35);
}

/* Names extreme left/right + clickable */
.psH2HScoreLine{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.psH2HName{
  font-weight:1200;
  text-decoration:none;
  color:#111;
}
.psH2HName.win{ color:#0a7a2f; }
.psH2HName.lose{ color:#c20e0e; }
.psH2HScore{ font-weight:1300; }

/* Sets wrap toggle */
.psH2HSetsWrap{ display:none; margin-top:10px; border-top:1px solid rgba(0,0,0,.10); padding-top:10px; }
.psH2HSetsWrap.on{ display:block; }

/* Set header with score */
.psH2HSetHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  margin-bottom:8px;
}
.psH2HSetScore{
  font-weight:1100;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.psH2HSetResult{
  font-weight:1100;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.psH2HSetResult.win{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color:#0a7a2f;
}
.psH2HSetResult.lose{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color:#c20e0e;
}

/* --- Fixed scroller comparison for mobile --- */
.psH2HPlayersGrid{
  display:grid;
  grid-template-columns: 140px 1fr 140px;
  gap:10px;
  align-items:center;
}
.psH2HNameLeft, .psH2HNameRight{
  font-weight:1200;
  text-decoration:none;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.psH2HNameRight{ text-align:right; }

.psH2HScrollRow{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  padding:8px;
}
.psH2HPillsRow{ display:flex; gap:8px; min-width:max-content; }

.psH2HPill.win{
  border-color: rgba(10,122,47,.35);
  background: rgba(10,122,47,.10);
  color:#0a7a2f;
}
.psH2HPill.lose{
  border-color: rgba(194,14,14,.35);
  background: rgba(194,14,14,.08);
  color:#c20e0e;
}
.psH2HPill.neutral{ opacity:.85; }

/* Mobile tweaks */
@media (max-width: 900px){
  .psCompMid{ flex-direction:column; align-items:stretch; }
  .psBtn{ width:100%; }
  .psCompRanks{ justify-content:flex-start; }

  .psH2HScoreLine{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "l s r"
      "b b b";
  }
}

/* =========================
   PR section: clean center
========================= */
.psPrHead, .psPrRow{
  display:grid;
  grid-template-columns: 1.1fr .8fr .9fr .9fr .9fr;
  gap:10px;
  align-items:center;
}
.psPrHead{
  font-weight:1200;
  opacity:.75;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.psPrRow{
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.center{ text-align:center; }

/* =========================
   Mobile PR: slider
========================= */
.psPrSlider{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:6px 2px 2px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.psPrSlide{
  min-width: 88%;
  scroll-snap-align:start;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:14px;
}
.psPrSlideTop{
  font-weight:1200;
  font-size:16px;
  margin-bottom:10px;
}
.psPrSlideGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (min-width: 901px){
  .psPrSlider{ display:none; } /* desktop uses table */
}

/* =========================
   Competition card: ranks layout
========================= */
.psCompTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.psCompRanks{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

/* =========================
   Make solve pills smaller so 5 fits in one line
========================= */
.psSolveRow{ display:flex; gap:8px; flex-wrap:nowrap; }
.psSolvePill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

/* on very small phones */
@media (max-width: 420px){
  .psSolvePill{ font-size:11px; padding:6px 8px; }
}

/* =========================
   H2H: up/down rows + scroller
========================= */
.psH2HRow{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:12px;
  align-items:center;
  margin:10px 0;
}
.psH2HRowName{
  font-weight:1200;
  text-decoration:none;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.psH2HScrollRow{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  padding:8px;
}
.psH2HPillsRow{
  display:flex;
  gap:8px;
  min-width:max-content;
}
@media (max-width: 700px){
  .psH2HRow{ grid-template-columns: 120px 1fr; }
}

/* Desktop solves: bigger + slightly rectangular */
@media (min-width: 901px){
  .psSolvePill{
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 12px; /* ✅ rectangular */
  }
}


.psH2HScoreLine{
  display:flex !important;
  align-items:center;
  gap:12px;
}
.psH2HScoreLine .psH2HName:first-child{ margin-right:auto; } /* left name stays left */
.psH2HScoreLine .psH2HName:last-child{ margin-left:auto; text-align:right; } /* ✅ opponent hard right */

@media (max-width: 900px){
  .psCompRanks{
    flex-wrap: nowrap !important;  /* ✅ always same line */
    gap: 8px;
    justify-content:flex-start;
  }
  .psCompRanks .medal{
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

@media (max-width: 520px){
  .psSolveRow{
    gap:6px;
  }
  .psSolvePill{
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 10px; /* ✅ rectangular */
    min-width: 0;
  }
}
@media (max-width: 420px){
  .psSolvePill{
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 10px;
  }
}


/* H2H set: ONE scroller for both players (mobile-first) */
.psH2HSetWrap{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  align-items:start;
  margin:10px 0 14px;
}
.psH2HNamesCol{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:6px;
}
.psH2HSetScroller{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  padding:8px;
}
.psH2HSetSolves{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:max-content;
}

/* Desktop can keep normal layout (optional) */
@media (min-width: 901px){
  .psH2HSetWrap{ grid-template-columns: 180px 1fr; }
}


/* Disabled event pills in H2H mode */
.psPill.disabledH2H{
  opacity:.45;
  cursor:not-allowed;
}

/* H2H score line — centered score, names at ends, button on right */
.psH2HScoreLineCenter{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:10px;
}
.psH2HScoreLineCenter .psH2HName:first-child{ margin-right:auto; }
.psH2HScoreLineCenter .psH2HScoreCenter{ margin:0 auto; }
.psH2HScoreLineCenter .psH2HName:nth-child(3){ margin-left:auto; text-align:right; }

/* Winner/loser colors like your screenshot */
.psH2HName.h2hWin{ color:#0a7a2f; font-weight:800; }
.psH2HName.h2hLose{ color:#b00000; font-weight:800; }
.psH2HScoreCenter{ font-size:34px; font-weight:900; letter-spacing:.5px; }
.psH2HScoreCenter .h2hWin{ color:#0a7a2f; }
.psH2HScoreCenter .h2hLose{ color:#b00000; }
.psH2HScoreCenter .sep{ color:#111; opacity:.65; padding:0 10px; }

/* Mobile: solves text a bit bigger when open but still fit */
@media (max-width: 520px){
  .psCompCard.solvesOpen .psSolvePill{
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 10px;
  }
}

/* =========================================================
   MOBILE H2H FIXES + TOGGLE SPACING
   Paste at END of persons.css
========================================================= */

/* Ensure the Mode toggle block is clearly below event pills and not merging */
.psModeBar,
#psModeBar,
.psModeBtns,
.psModes {
  margin-top: 12px !important;
  padding-top: 6px !important;
}

/* If your layout wraps event pills + mode buttons in the same section,
   force spacing between them */
#psEventPills + .psModeBar,
#psEventPills + #psModeBar,
#psEventPills + .psModeBtns,
#psEventPills + .psModes {
  margin-top: 14px !important;
}

/* Add breathing room below mode toggles so it doesn't touch content */
.psModeBar,
#psModeBar,
.psModeBtns,
.psModes {
  margin-bottom: 10px !important;
}

/* ---------- MOBILE H2H: Score smaller + aligned properly ---------- */
@media (max-width: 520px){

  /* Score line becomes compact */
  .psH2HScoreLineCenter{
    gap: 10px !important;
    padding-top: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Make names smaller and prevent wrapping */
  .psH2HScoreLineCenter .psH2HName{
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    max-width: 42% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ✅ Score smaller + still bold + centered */
  .psH2HScoreCenter{
    font-size: 22px !important;    /* was too big on mobile */
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    flex: 0 0 auto !important;
    min-width: 70px !important;
    text-align: center !important;
  }
  .psH2HScoreCenter .sep{
    padding: 0 7px !important;
  }

  /* Button smaller so it doesn't break layout */
  .psH2HScoreLineCenter .psBtn{
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
  }

  /* ✅ Winner/Loser name coloring (per match) */
  .psH2HName.h2hWin{ color:#0a7a2f !important; font-weight: 900 !important; }
  .psH2HName.h2hLose{ color:#b00000 !important; font-weight: 900 !important; }

  /* ✅ Winner/Loser score coloring */
  .psH2HScoreCenter .h2hWin{ color:#0a7a2f !important; }
  .psH2HScoreCenter .h2hLose{ color:#b00000 !important; }

  /* Optional: keep match chips from taking too much space on mobile */
  .psH2HChips{
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding-bottom: 6px !important;
  }
  .psH2HChips .psChip{
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }

/* =========================================================
   MOBILE H2H — CLEAN "Name  Score|Score  Name" + CLEAN SETS
   Paste at END of persons.css
========================================================= */

@media (max-width: 520px){

  /* ---------- MATCH HEADER: grid layout ---------- */
  .psH2HScoreLineCenter{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas:
      "left score right"
      "btn  btn   btn" !important;
    align-items: center !important;
    gap: 10px 10px !important;
    padding-top: 8px !important;
  }

  /* Left name */
  .psH2HScoreLineCenter .psH2HName:first-child{
    grid-area: left !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* Score center */
  .psH2HScoreLineCenter .psH2HScoreCenter{
    grid-area: score !important;
    justify-self: center !important;
    text-align: center !important;
    font-size: 20px !important;     /* cleaner on phone */
    font-weight: 900 !important;
    min-width: 72px !important;
    line-height: 1 !important;
  }
  .psH2HScoreCenter .sep{
    padding: 0 6px !important;
    opacity: .65 !important;
  }

  /* Right name */
  .psH2HScoreLineCenter .psH2HName:nth-child(3){
    grid-area: right !important;
    justify-self: end !important;
    text-align: right !important;
    margin: 0 !important;
  }

  /* Names: clamp + ellipsis */
  .psH2HScoreLineCenter .psH2HName{
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    font-weight: 900 !important;
  }

  /* ✅ Winner/Loser name colors */
  .psH2HName.h2hWin{ color:#0a7a2f !important; }
  .psH2HName.h2hLose{ color:#b00000 !important; }

  /* ✅ Winner/Loser score colors */
  .psH2HScoreCenter .h2hWin{ color:#0a7a2f !important; }
  .psH2HScoreCenter .h2hLose{ color:#b00000 !important; }

  /* Show sets button below, full width */
  .psH2HScoreLineCenter .psBtn{
    grid-area: btn !important;
    width: 100% !important;
    justify-self: stretch !important;
    margin-top: 6px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }

  /* ---------- CHIPS: keep tidy ---------- */
  .psH2HChips{
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 6px !important;
  }
  .psH2HChips .psChip{
    font-size: 11.5px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }

  /* ---------- SETS: stack cleanly on phone ---------- */
  .psH2HSetWrap{
    display: block !important;      /* instead of side-by-side */
    padding: 10px 0 !important;
  }

  /* Names row in a single line: left/right */
  .psH2HNamesCol{
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  .psH2HRowName{
    font-size: 13.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 48% !important;
  }

  /* One scroller per set: full width */
  .psH2HSetScroller{
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }

  /* Keep both rows sliding together */
  .psH2HSetSolves{
    min-width: max-content !important;
  }

  /* Pills: slightly smaller + more rectangular so they fit better */
  .psH2HPill{
    font-size: 12px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    min-width: 56px !important;
    text-align: center !important;
  }

  /* Set header compact */
  .psH2HSetHeader{
    padding: 8px 0 !important;
  }
  .psH2HSetLabel{ font-size: 13px !important; }
  .psH2HSetScore{ font-size: 13px !important; }
}

/* =========================================================
   MOBILE H2H — VERTICAL "NAME → SOLVES" COMPARISON
   Final clean layout
========================================================= */

@media (max-width: 520px){

  /* ---------- SET WRAPPER ---------- */
  .psH2HSetWrap{
    display: block !important;
    padding: 8px 0 12px !important;
  }

  /* ---------- NAME + SOLVES STACK ---------- */
  .psH2HNamesCol{
    display: none !important; /* hide old name column */
  }

  .psH2HSetScroller{
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    padding: 6px 4px !important;
  }

  /* Stack solver rows vertically */
  .psH2HSetSolves{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: max-content !important;
  }

  /* ---------- EACH SOLVER ROW ---------- */
  .psH2HPillsRow{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Inject solver name before each solve row */
  .psH2HPillsRow::before{
    content: attr(data-name);
    font-weight: 900;
    font-size: 13.5px;
    min-width: 120px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Winner / loser coloring for names */
  .psH2HPillsRow.win::before{ color:#0a7a2f; }
  .psH2HPillsRow.lose::before{ color:#b00000; }

  /* ---------- SOLVE PILLS ---------- */
  .psH2HPill{
    font-size: 12px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    min-width: 54px !important;
    text-align: center !important;
  }

  /* ---------- SET HEADER ---------- */
  .psH2HSetHeader{
    padding: 6px 0 !important;
  }
  .psH2HSetLabel{ font-size: 13px !important; }
  .psH2HSetScore{ font-size: 13px !important; }

}


/* =========================================================
   ✅ HOME-CLEAN GLOBAL THEME OVERRIDES (applied across pages)
   - Keeps your existing selectors + logic intact
   - Unifies tokens so all pages instantly match the home-clean vibe
========================================================= */
:root{
  --ink:#0f172a;
  --muted: rgba(15,23,42,.68);
  --line-soft: rgba(15,23,42,.10);
  --line: rgba(15,23,42,.14);

  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface2:#fbfbfd;

  --shadow: 0 16px 40px rgba(15,23,42,.10);
  --shadow2: 0 8px 22px rgba(15,23,42,.10);

  --r:22px;
  --r2:16px;

  --violet:#6d28d9;
  --cyan:#0891b2;
  --pink:#db2777;

  --goldBg: rgba(255,247,220,.92);
  --goldBd: rgba(184,134,11,.22);
  --goldTx: #7a5a10;

  --amberBg: rgba(245,158,11,.16);
  --amberBd: rgba(245,158,11,.30);
  --amberTx: #8a5a00;

  --greenBg: rgba(22,163,74,.12);
  --greenBd: rgba(22,163,74,.22);
  --greenTx: #14532d;

  --purpleBg: rgba(109,40,217,.10);
  --purpleBd: rgba(109,40,217,.22);

  --pinkBg: rgba(219,39,119,.10);
  --pinkBd: rgba(219,39,119,.20);

  --cyanBg: rgba(14,165,233,.10);
  --cyanBd: rgba(14,165,233,.20);
}

/* Global base feel */
html, body{
  background: var(--bg);
  color: var(--ink);
}

/* Keep your bold-heavy aesthetic consistent */
body, body *{
  letter-spacing: .02px;
}

/* Generic cards/buttons/pills fallback (non-destructive) */
.card, .panel, .box,
.detailCard, .rulesCard,
.cvCard, .rkCard, .resCard,
.psCard{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
}

.btn, button, .button, .rkTab, .resChip, .rkChip, .psBtn{
  border-radius: 14px;
}

.pill, .chip, .rkChip, .resChip{
  border-radius: 999px;
}


/* =========================================================
   ✅ HOME-CLEAN THEME — STRONG OVERRIDES (V3)
   Purpose: make the change UNMISSABLE even if other CSS wins.
   - Uses !important on tokens + base elements
   - Gives a very clear background + card style
========================================================= */
:root{
  --ink:#0f172a !important;
  --muted: rgba(15,23,42,.68) !important;
  --line-soft: rgba(15,23,42,.10) !important;
  --line: rgba(15,23,42,.14) !important;

  /* UNMISSABLE page background */
  --bg:#f7f9fc !important;
  --surface:#ffffff !important;
  --surface2:#fbfbfd !important;

  --shadow: 0 16px 40px rgba(15,23,42,.10) !important;
  --shadow2: 0 8px 22px rgba(15,23,42,.10) !important;

  --r:22px !important;
  --r2:16px !important;

  --violet:#6d28d9 !important;
  --cyan:#0891b2 !important;
  --pink:#db2777 !important;

  /* map hc vars so if any page uses them, it still matches */
  --hc-bg: var(--bg) !important;
  --hc-card: var(--surface) !important;
  --hc-text: var(--ink) !important;
  --hc-muted: #52627a !important;
  --hc-accent: #2563eb !important;
  --hc-accent2: var(--violet) !important;
  --hc-yellow: #ffd400 !important;
  --hc-gold: #d7b100 !important;
  --hc-border: rgba(15, 23, 42, 0.10) !important;
  --hc-shadow: 0 8px 24px rgba(2, 6, 23, 0.08) !important;
  --hc-radius: 18px !important;
}

/* Force background + base typography */
html, body{ background: var(--bg) !important; color: var(--ink) !important; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
}

/* Force common containers to look like home-clean */
.container, .wrap, .shell, .page, .main, .rkWrap, .resWrap, .psPage, .cvShell{
  background: transparent !important;
}

/* Force cards across your app */
.card, .panel, .box,
.detailCard, .rulesCard,
.cvCard, .rkCard, .resCard,
.psCard,
.controlsCard, .featuredCard,
.compCard, .wideSliderArea,
.psCompCard, .psH2HMatch,
.rkTableWrap, .rkList, .resTableWrap{
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
}

/* Buttons */
.btn, button, .button, a.btn, input[type="button"], input[type="submit"]{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 18px rgba(2,6,23,.06) !important;
}
.btn.primary, button.primary, .button.primary{
  background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(109,40,217,.90)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Pills/Chips */
.pill, .chip, .rkChip, .resChip, .psPill, .psChip, .hc-pill, .hc-chip{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(15,23,42,.04) !important;
  color: rgba(15,23,42,.92) !important;
}
.pill.registered{ background: rgba(22,163,74,.12) !important; border-color: rgba(22,163,74,.22) !important; color: #14532d !important; }
.pill.closed{ background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.22) !important; color: #7f1d1d !important; }

/* Headings get tighter tracking like home-clean */
h1, h2, h3{ letter-spacing: -0.02em !important; }

/* Optional: subtle top glow so you can instantly tell CSS loaded */
body::before{
  content:"";
  position: fixed;
  left:0; right:0; top:0;
  height: 240px;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(900px 240px at 85% 0%, rgba(109,40,217,.10), transparent 55%);
  z-index: 0;
}
/* keep page content above glow */
body > *{ position: relative; z-index: 1; }

/* =========================================================
   HOME-CLEAN THEME OVERLAY (NON-DESTRUCTIVE) — GLOBAL
   - Appended to the existing page CSS
   - DOES NOT remove/replace any prior rules, only overrides visuals
   - Keeps all existing selectors/classes/IDs intact (NO logic changes)
========================================================= */

/* Map to home-clean tokens (with safe fallbacks) */
:root{
  --hc-bg: var(--hc-bg, #f7f9fc);
  --hc-card: var(--hc-card, #ffffff);
  --hc-text: var(--hc-text, #0f172a);
  --hc-muted: var(--hc-muted, #52627a);
  --hc-accent: var(--hc-accent, #2563eb);
  --hc-accent2: var(--hc-accent2, #6d28d9);
  --hc-yellow: var(--hc-yellow, #ffd400);
  --hc-gold: var(--hc-gold, #d7b100);
  --hc-border: var(--hc-border, rgba(15, 23, 42, 0.10));
  --hc-shadow: var(--hc-shadow, 0 8px 24px rgba(2, 6, 23, 0.08));
}

/* Page base */
html, body{
  background: var(--hc-bg) !important;
  color: var(--hc-text) !important;
}

/* Subtle top glow like home-clean */
body::before{
  content:"";
  position: fixed;
  left:0; right:0; top:0;
  height: 240px;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(900px 240px at 85% 0%, rgba(109,40,217,.10), transparent 55%);
  z-index: 0;
}
body > *{ position: relative; z-index: 1; }

/* Generic card surfaces (covers your page cards without needing HTML edits) */
.card,
.rkHero, .rkTabs, .rkControls, .rkTableWrap,
.resHero, .resControls, .resTableWrap,
.rulesCard,
.psCard, .psTabsCard{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid var(--hc-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--hc-shadow) !important;
}

/* Inputs / selects */
input, select, textarea,
.rkSelect, .rkSearch, .rkMiniSelect,
.resSelect, .resSearch, .resMiniSelect{
  background:#fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 14px !important;
}

/* Chips / pills — home-clean vibe */
.pill, .chip,
.rkChip, .resChip,
.psPill, .psChip,
.rkModeBtn, .rkTab,
.psTab, .psModeBtn{
  border-radius: 999px !important;
}

.rkChip.on, .resChip.on, .rkModeBtn.on{
  background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.16) !important;
}

/* Buttons */
.btn, .rkBtn, .resBtn, .rkShowSolves, .resShowSolves, .psBtn{
  border-radius: 14px !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 10px 18px rgba(2,6,23,.06) !important;
}
.btn.primary{
  background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Section headers accents */
.rkTitle, .resTitle, .rulesTitle, .psName{
  letter-spacing: -0.02em !important;
}

/* Muted text normalization */
.rkSub, .resSub, .sub, .psCrumbs,
.rkSmall, .resSmall,
.rkMetaMuted, .resMetaMuted{
  color: var(--hc-muted) !important;
}

/* Tables: softer header + zebra consistent */
.rkTableHead, .resTableHead{
  background: rgba(15,23,42,.04) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}
.rkRow, .resRow{
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}


/* --- Persons: soften black tabs into home-clean gradient while preserving on-state --- */
.psTab{
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.10) !important;
}
.psTab.on{
  background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent2)) !important;
  border-color: transparent !important;
}
.psModeBtn.on{
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(109,40,217,.12)) !important;
  border-color: rgba(37,99,235,.22) !important;
}