/* ── Players list page ── */
    .players-hero { padding: 2rem 1.5rem 3rem; max-width: 1600px; margin: 0 auto; }
    .players-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-top: 1.5rem; }
    .players-hero h1 span { color: var(--primary); }
    .players-hero p { margin-top: 0.75rem; font-size: 1rem; color: var(--muted-foreground); }

    .players-controls {
      max-width: 1600px; margin: 0 auto; padding: 0 1.5rem 1.5rem;
      display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    }
    .players-search {
      flex: 1; min-width: 200px; max-width: 340px;
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.55rem 1rem;
      color: var(--foreground); font-size: 0.88rem; outline: none;
      transition: border-color 0.2s;
    }
    .players-search:focus { border-color: var(--primary); }
    .players-search::placeholder { color: var(--muted-foreground); }

    .sort-select {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.55rem 1rem;
      color: var(--foreground); font-size: 0.88rem; outline: none;
      cursor: pointer; transition: border-color 0.2s;
    }
    .sort-select:focus { border-color: var(--primary); }

    .players-count {
      font-size: 0.78rem; color: var(--muted-foreground); margin-left: auto;
    }

    /* ── Cards grid ── */
    .players-grid {
      max-width: 1600px; margin: 0 auto; padding: 0 1.5rem 5rem;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1.25rem;
    }
    @media (max-width: 1200px) { .players-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 800px)  { .players-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 520px)  { .players-grid { grid-template-columns: repeat(2, 1fr); } }

    /* ── Card ── */
    .player-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      display: flex; flex-direction: column;
      cursor: pointer;
      transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
      position: relative;
    }
    .player-card:hover {
      border-color: var(--primary);
      transform: translateY(-3px);
      box-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
    }

    /* Colour accent line at bottom of photo area */
    .pc-photo-wrap {
      position: relative;
      width: 100%; height: 260px;
      background: var(--pc-bg, oklch(0.14 0.03 240));
      overflow: hidden; flex-shrink: 0;
    }
    /* Subtle radial glow behind the player */
    .pc-photo-wrap::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--pc-color, var(--primary)) 0%, transparent 70%);
      opacity: 0.18; pointer-events: none;
    }
    .pc-photo-wrap::after {
      content: '';
      position: absolute; inset: auto 0 0 0; height: 120px;
      background: linear-gradient(to top, oklch(0.25 0.08 145 / 0.35), transparent);
      pointer-events: none;
    }

    /* Player photo — stands at bottom, full height */
    .pc-photo {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      height: 100%; width: auto; max-width: 160%;
      object-fit: contain; object-position: bottom center;
      user-select: none; pointer-events: none;
    }

    /* Fallback avatar (shown when no photo) */
    .pc-avatar {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 90px; height: 90px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem; font-weight: 900; color: #fff; letter-spacing: -0.02em;
      bottom: 50%; transform: translate(-50%, 50%);
    }

    /* Rank badge (shown only when sorted by wins/winrate) */
    .pc-rank {
      position: absolute; top: 0.6rem; left: 0.7rem;
      font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em;
      background: var(--pc-color, var(--primary));
      color: oklch(0.12 0.02 0); padding: 0.18rem 0.5rem;
      border-radius: 9999px; z-index: 2;
    }

    /* Nickname in stats block */
    .pc-name-overlay {
      display: inline-block;
      align-self: flex-start;
      font-size: 0.72rem; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--primary);
      background: oklch(0.82 0.22 145 / 0.12);
      border: 1px solid oklch(0.82 0.22 145 / 0.4);
      border-radius: 9999px;
      padding: 0.22rem 0.7rem;
      line-height: 1.3;
    }

    /* ── Stats area ── */
    .pc-stats {
      padding: 0.85rem 1rem 1rem;
      display: flex; flex-direction: column; gap: 0.65rem;
      border-top: 1px solid var(--border);
    }

    /* Win rate bar */
    .pc-winrate-wrap { width: 100%; }
    .pc-winrate-label {
      display: flex; justify-content: space-between;
      font-size: 0.65rem; color: var(--muted-foreground); margin-bottom: 0.28rem;
    }
    .pc-winrate-label strong { color: var(--primary); font-weight: 800; }
    .pc-winrate-bar {
      height: 4px; border-radius: 99px;
      background: var(--border); overflow: hidden;
    }
    .pc-winrate-fill {
      height: 100%; border-radius: 99px;
      background: var(--primary);
    }

    /* W/D/L */
    .pc-wdl { display: flex; gap: 0; }
    .pc-wdl-item {
      display: flex; flex-direction: column; align-items: center;
      flex: 1; gap: 0.05rem;
    }
    .pc-wdl-val { font-size: 1.05rem; font-weight: 900; line-height: 1; }
    .pc-wdl-lbl { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
    .pc-wdl-item.w .pc-wdl-val { color: var(--primary); }
    .pc-wdl-item.d .pc-wdl-val { color: oklch(0.78 0.12 60); }
    .pc-wdl-item.l .pc-wdl-val { color: oklch(0.65 0.18 20); }

    /* Goals row */
    .pc-goals {
      display: flex; gap: 0; width: 100%;
      border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
      overflow: hidden;
    }
    .pc-goals-item {
      flex: 1; padding: 0.35rem 0.4rem; text-align: center;
      display: flex; flex-direction: column; gap: 0.05rem;
    }
    .pc-goals-item:not(:last-child) { border-right: 1px solid var(--border); }
    .pc-goals-val { font-size: 0.88rem; font-weight: 800; }
    .pc-goals-lbl { font-size: 0.58rem; color: var(--muted-foreground); letter-spacing: 0.05em; text-transform: uppercase; }

    /* Tournaments */
    .pc-tours { display: flex; flex-wrap: wrap; gap: 0.25rem; }

    /* ── Compare button ── */
    .compare-btn {
      display: flex; align-items: center; gap: 0.45rem;
      padding: 0.55rem 1rem; border-radius: var(--radius);
      border: 1px solid var(--border); background: transparent;
      color: var(--muted-foreground); font-size: 0.88rem; font-weight: 700;
      cursor: pointer; transition: all 0.2s; white-space: nowrap;
    }
    .compare-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
    .compare-btn:hover { border-color: var(--primary); color: var(--primary); background: oklch(0.82 0.22 145 / 0.07); }
    .compare-btn.active { border-color: var(--primary); color: var(--primary); background: oklch(0.82 0.22 145 / 0.12); }

    .compare-hint {
      display: none; align-items: center; gap: 0.4rem;
      font-size: 0.75rem; color: var(--primary); font-weight: 700;
      padding: 0.3rem 0.85rem; border-radius: 9999px;
      background: oklch(0.82 0.22 145 / 0.1); border: 1px solid oklch(0.82 0.22 145 / 0.25);
    }

    /* Compare mode card states */
    .players-grid.compare-mode .player-card { cursor: crosshair; }
    .player-card.compare-selected {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 2px var(--primary), 0 12px 32px oklch(0 0 0 / 0.35) !important;
    }
    .player-card.compare-selected .pc-photo-wrap::before { opacity: 0.4 !important; }

    /* ── H2H Modal ── */
    .h2h-modal {
      position: fixed; inset: 0; z-index: 1100;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
    }
    .h2h-modal.open { pointer-events: all; }
    .h2h-backdrop {
      position: absolute; inset: 0;
      opacity: 0;
      background: oklch(0 0 0 / 0.7);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .h2h-modal.open .h2h-backdrop {
      opacity: 1;
    }
    .h2h-card {
      position: relative; z-index: 1;
      background: oklch(0.2 0.04 160); border: 1px solid var(--border);
      border-radius: calc(var(--radius) * 2);
      width: min(960px, calc(100vw - 2rem));
      max-height: 92vh; overflow: hidden;
      display: flex; flex-direction: column;
      opacity: 0;
      transform: translateY(18px) scale(0.98);
      transition:
        opacity 0.32s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .h2h-modal.open .h2h-card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Two player columns + VS divider */
    .h2h-players {
      display: flex; align-items: stretch;
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .h2h-player {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 0.6rem; padding: 1.25rem 1rem 1.25rem;
    }
    .h2h-photo-wrap {
      position: relative; width: 100%; height: 320px; overflow: hidden;
      border-radius: calc(var(--radius) - 2px);
      background: oklch(0.14 0.03 240);
    }
    .h2h-photo-wrap::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--pc-color, var(--primary)), transparent 70%);
      opacity: 0.22; pointer-events: none;
    }
    .h2h-photo-img {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      height: 100%; width: auto; max-width: 200%;
      object-fit: contain; object-position: bottom center;
    }
    .h2h-photo-avatar {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 60px; height: 60px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; font-weight: 900; color: #fff;
    }
    .h2h-player-name {
      font-size: 0.95rem; font-weight: 900; text-align: center; line-height: 1.2;
    }
    .h2h-player-record { display: flex; gap: 0.35rem; align-items: center; font-size: 0.82rem; font-weight: 800; }
    .h2h-w { color: var(--primary); }
    .h2h-d { color: oklch(0.78 0.12 60); }
    .h2h-l { color: oklch(0.65 0.18 20); }
    .h2h-sep { color: var(--muted-foreground); }
    .h2h-player-goals { font-size: 0.72rem; color: var(--muted-foreground); font-weight: 600; }

    .h2h-vs-badge {
      padding: 1rem 0.75rem; display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem; font-weight: 900; color: var(--muted-foreground);
      letter-spacing: 0.05em; flex-shrink: 0;
    }

    /* Battle bar */
    .h2h-bar-section { padding: 1.1rem 1.5rem 0.4rem; flex-shrink: 0; }
    .h2h-bar-labels {
      display: flex; justify-content: space-between;
      font-size: 0.68rem; font-weight: 700; color: var(--muted-foreground); margin-bottom: 0.4rem;
    }
    .h2h-bar {
      height: 10px; border-radius: 99px; overflow: hidden;
      display: flex; background: var(--border);
    }
    .h2h-bar-a { height: 100%; background: var(--primary); transition: width 0.4s; }
    .h2h-bar-d { height: 100%; background: oklch(0.78 0.12 60); transition: width 0.4s; }
    .h2h-bar-b { height: 100%; background: oklch(0.65 0.18 20); transition: width 0.4s; }
    .h2h-bar-legend {
      display: flex; justify-content: space-between;
      font-size: 0.68rem; font-weight: 700; margin-top: 0.35rem;
    }

    /* Match history */
    .h2h-matches-wrap { flex: 1; overflow-y: auto; padding: 0 1.5rem 1.5rem; }
    .h2h-matches-title {
      font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted-foreground); margin: 0.9rem 0 0.5rem;
      padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
    }
    .h2h-match-row {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.55rem 0; border-bottom: 1px solid oklch(0.35 0.04 160 / 0.2);
      font-size: 0.8rem;
    }
    .h2h-match-row:last-child { border-bottom: none; }
    .h2h-match-date { color: var(--muted-foreground); font-size: 0.68rem; white-space: nowrap; min-width: 5rem; }
    .h2h-match-teams { flex: 1; font-size: 0.78rem; }
    .h2h-match-vs { color: var(--muted-foreground); font-size: 0.7rem; margin: 0 0.2rem; }
    .h2h-match-score {
      font-weight: 900; font-size: 1rem; font-variant-numeric: tabular-nums;
      min-width: 3rem; text-align: center;
    }
    .h2h-match-score.a-win { color: var(--primary); }
    .h2h-match-score.b-win { color: oklch(0.65 0.18 20); }
    .h2h-match-score.draw  { color: oklch(0.78 0.12 60); }
    .h2h-no-matches {
      text-align: center; color: var(--muted-foreground);
      padding: 2.5rem; font-size: 0.9rem;
    }
    #h2hBody {
      display: flex; flex-direction: column; flex: 1; overflow: hidden;
    }

    /* ── Stat comparison rows ── */
    .cmp-section-title {
      font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted-foreground); margin: 1rem 0 0.55rem;
      padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
    }
    .cmp-row {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.45rem 0; border-bottom: 1px solid oklch(0.35 0.04 160 / 0.15);
    }
    .cmp-row:last-child { border-bottom: none; }
    .cmp-val {
      width: 3.5rem; font-size: 0.9rem; font-weight: 900;
      text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums;
    }
    .cmp-val.right { text-align: left; }
    .cmp-val.cmp-winner { color: var(--primary); }
    .cmp-center {
      flex: 1; display: flex; flex-direction: column; gap: 0.2rem; align-items: center;
    }
    .cmp-label {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--muted-foreground);
    }
    .cmp-bar {
      width: 100%; height: 6px; border-radius: 99px; overflow: hidden;
      background: var(--border); display: flex;
    }
    .cmp-bar-a { height: 100%; background: var(--primary); border-radius: 99px 0 0 99px; }
    .cmp-bar-b { height: 100%; background: oklch(0.65 0.18 20); border-radius: 0 99px 99px 0; }

    /* Loading / empty */
    .players-empty {
      text-align: center; color: var(--muted-foreground);
      font-size: 0.9rem; padding: 3rem; grid-column: 1/-1;
    }

.players-pagination-shell { padding: 0 1.5rem 4rem; max-width: 1600px; margin: 0 auto; }

@media (max-width: 640px) {
  .players-hero {
    padding: 1.5rem 1rem 1.75rem;
  }
  .players-hero h1 {
    margin-top: 0.75rem;
    font-size: 2rem;
    overflow-wrap: anywhere;
  }
  .players-hero p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .players-controls {
    padding: 0 1rem 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
  }
  .players-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .sort-select,
  .compare-btn {
    width: 100%;
    min-width: 0;
  }
  .compare-btn {
    justify-content: center;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .compare-hint,
  .players-count {
    grid-column: 1 / -1;
    margin-left: 0;
  }
  .players-grid {
    padding: 0 1rem 3rem;
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .player-card:hover { transform: none; }
  .pc-photo-wrap { height: min(88vw, 340px); }
  .players-pagination-shell { padding: 0 1rem 3rem; }

  .h2h-card {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .h2h-player {
    min-width: 0;
    padding: 0.75rem 0.4rem;
    gap: 0.4rem;
  }
  .h2h-photo-wrap { height: 170px; }
  .h2h-player-name {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }
  .h2h-player-record { font-size: 0.7rem; }
  .h2h-player-goals { font-size: 0.62rem; text-align: center; }
  .h2h-vs-badge { padding: 0.5rem 0.25rem; font-size: 0.75rem; }
  .h2h-summary { padding: 0 0.75rem; }
  .h2h-matches-wrap { padding: 0 0.75rem 0.75rem; }
  .h2h-match-row { gap: 0.35rem; }
  .h2h-match-date { min-width: 3.5rem; font-size: 0.58rem; }
  .h2h-match-teams { font-size: 0.68rem; }
}