/* ================================================================
   Friendly Matches — restyles the match history to match the landing
   page (kicker + Bricolage title, rounded soft-shadow cards, mono
   scores, hover lifts, brand-glow primary button).

   Scoped entirely under #matchesPage. No JS or DOM changes. The
   rules are purely visual, so they apply at every width; a small
   ≤700px block compacts the header for phones.
   ================================================================ */
#matchesPage{
  --fx-sky:#f1f4fb; --fx-line:#e4e7ee; --fx-line2:#d2d7e1;
  --fx-ink:#14171f; --fx-soft:#5b626f; --fx-faint:#8a909c;
  --fx-blue:#3a55e6; --fx-blue-deep:#2b40c4; --fx-blue-wash:#eef0fe;
  --fx-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fx-mono:'JetBrains Mono',ui-monospace,monospace;
  --fx-shadow:0 12px 30px -18px rgba(32,38,75,.40);
  --fx-shadow-lg:0 26px 56px -30px rgba(32,38,75,.42);
  background:var(--fx-sky);min-height:100vh;
}

/* ── header ──────────────────────────────────────────────────── */
#matchesPage .dash-title{
  font-family:var(--fx-display);font-weight:800;font-size:32px;
  letter-spacing:-.03em;color:var(--fx-ink);
}
#matchesPage .dash-title::before{
  content:'History';display:block;
  font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.02em;
  color:var(--fx-blue);margin-bottom:7px;
}
#matchesPage .dash-sub{color:var(--fx-soft);font-weight:600}
#matchesPage .setup-btn.primary{
  border-radius:13px;font-weight:800;border-color:var(--fx-blue);
  box-shadow:0 12px 26px -12px rgba(58,85,230,.9);
  transition:transform .15s ease,background .15s ease;
}
#matchesPage .setup-btn.primary:hover{transform:translateY(-1px);background:var(--fx-blue-deep);border-color:var(--fx-blue-deep)}

/* ── match cards ─────────────────────────────────────────────── */
#matchesPage .match-card{
  border-radius:20px;border-color:var(--fx-line);box-shadow:var(--fx-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#matchesPage .match-card:hover{
  transform:translateY(-2px);border-color:#c5cdfb;box-shadow:var(--fx-shadow-lg);
}
#matchesPage .match-card.selected{
  border-color:var(--fx-blue);box-shadow:0 0 0 3px var(--fx-blue-wash),var(--fx-shadow-lg);
}
#matchesPage .match-card-comp{font-family:var(--fx-mono);font-weight:700;color:var(--fx-faint)}
#matchesPage .match-card-teams{
  font-family:var(--fx-display);font-weight:800;letter-spacing:-.02em;color:var(--fx-ink);
}
#matchesPage .match-card-score span,
#matchesPage .match-card-score-val{border-radius:10px}
#matchesPage .status-badge{font-family:var(--fx-mono);font-weight:700}
#matchesPage .mc-btn{border-radius:11px;border-color:var(--fx-line2)}
#matchesPage .mc-btn.primary{
  border-color:var(--fx-blue);box-shadow:0 10px 20px -10px rgba(58,85,230,.9);
}
#matchesPage .mc-btn.primary:hover{background:var(--fx-blue-deep);border-color:var(--fx-blue-deep)}
#matchesPage .empty-note{border-radius:16px;border-color:var(--fx-line2);background:#fff}

/* ── phone: compact header, cards keep the friendly look ─────── */
@media (max-width:700px){
  #matchesPage .matches-head{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:18px}
  #matchesPage .dash-title{font-size:24px}
  #matchesPage .dash-title::before{font-size:12px;margin-bottom:5px}
  #matchesPage .dash-sub{font-size:13px}
  #matchesPage .setup-btn.primary{height:48px;font-size:15px}
  #matchesPage .match-card{border-radius:18px}
}