/* Player stats tab — filters bar (functional comp picker via
   select-modal), summary card (built on the canonical
   `.player-info-grid` 2x3 primitive), per-match rating chart
   (carousel, 5 matches/page), per-90 toggle, and stat list groups
   with tier-coloured percentil mini-bars beside the rank badge.
   All `.card` chrome comes from the canonical card component — no
   sub-design system here. */

@layer components {
  /* ---------- Filters bar ---------- */
  .player-stats-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  .player-stats-filter-wrap {
    flex: 1;
    position: relative;
  }

  .player-stats-filter {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
    text-align: left;
    transition:
      background 120ms ease,
      border-color 120ms ease;
  }

  .player-stats-filter:hover,
  .player-stats-filter:focus-visible {
    background: var(--color-surface-hover, rgb(255 255 255 / 4%));
    border-color: var(--color-border-strong, var(--color-border));
  }

  .player-stats-filter[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .player-stats-filter[disabled]:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  .player-stats-filter__logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-stats-filter__icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .player-stats-filter__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-stats-filter__chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  /* Season pill — informational chip showing the current fixed season.
     Sits beside the comp picker. Visually distinct from the comp filter
     (no border, sunken background, no chevron) so the user doesn't
     mistake it for a disabled control. */
  .player-stats-season-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-surface-sunken);
    border-radius: 10px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 40px;
  }

  .player-stats-season-pill__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-text-subtle);
  }

  .player-stats-season-pill__label {
    line-height: 1;
  }

  /* ---------- Summary card (header + 2x3 player-info-grid) ---------- */
  .player-stats-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
  }

  .player-stats-summary__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 0;
  }

  .player-stats-summary__logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-stats-summary__record {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-title);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  .player-stats-summary__record[hidden] {
    display: none;
  }

  .player-stats-summary__record-w {
    color: var(--color-accent);
    font-weight: 700;
  }

  .player-stats-summary__record-d {
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .player-stats-summary__record-l {
    color: var(--color-loss);
    font-weight: 700;
  }

  .player-stats-summary__record-sep {
    color: var(--color-border);
  }

  /* ---------- Per-match rating chart (carousel) ---------- */
  .player-stats-rating-chart {
    margin-top: 12px;
  }

  .player-stats-rating-chart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .player-stats-rating-chart__motm-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__motm-count[hidden] {
    display: none;
  }

  .player-stats-rating-chart__motm-star {
    color: #ffd700;
    font-size: 14px;
    line-height: 1;
  }

  .player-stats-rating-chart__body {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0;
  }

  .player-stats-rating-chart__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 8px;
    min-height: 44px;
    transition:
      color 120ms ease,
      background 120ms ease;
  }

  .player-stats-rating-chart__arrow svg {
    width: 20px;
    height: 20px;
  }

  .player-stats-rating-chart__arrow--hidden,
  .player-stats-rating-chart__arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
  }

  .player-stats-rating-chart__arrow:hover:not(:disabled),
  .player-stats-rating-chart__arrow:focus-visible:not(:disabled) {
    color: var(--color-text);
    background: rgb(255 255 255 / 4%);
  }

  .player-stats-rating-chart__track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    min-height: 180px;
    user-select: none;
  }

  .player-stats-rating-chart__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-width: 0;
  }

  .player-stats-rating-chart__cell--clickable {
    cursor: pointer;
  }

  .player-stats-rating-chart__cell--clickable:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .player-stats-rating-chart__opp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 18px;
    position: relative;
  }

  .player-stats-rating-chart__opp-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  .player-stats-rating-chart__opp-placeholder {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(255 255 255 / 6%);
  }

  .player-stats-rating-chart__score {
    text-align: center;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }

  .player-stats-rating-chart__score--win {
    color: var(--color-accent);
  }

  .player-stats-rating-chart__score--draw {
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__score--loss {
    color: var(--color-loss);
  }

  .player-stats-rating-chart__bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    background: rgb(255 255 255 / 4%);
    border-radius: 6px;
    padding: 3px;
    min-height: 80px;
  }

  /* Bar fills the wrap fully and `transform: scaleY()` clips it from
     the bottom up. Animating `transform` stays on the GPU compositor
     (60fps); animating `height` triggered layout on every frame and
     thrashed the carousel re-render. The fill ratio comes in via the
     `--bar-fill` custom prop set by the rating chart controller. */
  .player-stats-rating-chart__bar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: var(--color-text-muted);
    transform-origin: bottom;
    transform: scaleY(var(--bar-fill, 0));
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .player-stats-rating-chart__bar {
      transition: none;
    }
  }

  /* Rating value sits OUTSIDE the bar so it always lands on the same
     horizontal line regardless of bar height. Tier-coloured text. */
  .player-stats-rating-chart__bar-value {
    text-align: center;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--color-text);
  }

  .player-stats-rating-chart__bar-value.tier-elite {
    color: var(--color-rating-elite);
  }

  .player-stats-rating-chart__bar-value.tier-excellent {
    color: var(--color-rating-excellent);
  }

  .player-stats-rating-chart__bar-value.tier-very-good {
    color: var(--color-rating-very-good);
  }

  .player-stats-rating-chart__bar-value.tier-good {
    color: var(--color-rating-good);
  }

  .player-stats-rating-chart__bar-value.tier-above-avg {
    color: var(--color-rating-above-avg);
  }

  .player-stats-rating-chart__bar-value.tier-avg {
    color: var(--color-rating-avg);
  }

  .player-stats-rating-chart__bar-value.tier-below-avg {
    color: var(--color-rating-below-avg);
  }

  .player-stats-rating-chart__bar-value.tier-poor {
    color: var(--color-rating-poor);
  }

  .player-stats-rating-chart__bar-value.tier-none {
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__bar.tier-elite {
    background: var(--color-rating-elite);
  }

  .player-stats-rating-chart__bar.tier-excellent {
    background: var(--color-rating-excellent);
  }

  .player-stats-rating-chart__bar.tier-very-good {
    background: var(--color-rating-very-good);
  }

  .player-stats-rating-chart__bar.tier-good {
    background: var(--color-rating-good);
  }

  .player-stats-rating-chart__bar.tier-above-avg {
    background: var(--color-rating-above-avg);
  }

  .player-stats-rating-chart__bar.tier-avg {
    background: var(--color-rating-avg);
  }

  .player-stats-rating-chart__bar.tier-below-avg {
    background: var(--color-rating-below-avg);
  }

  .player-stats-rating-chart__bar.tier-poor {
    background: var(--color-rating-poor);
  }

  .player-stats-rating-chart__bar.tier-none {
    background: var(--color-text-muted);
  }

  .player-stats-rating-chart__round {
    text-align: center;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
  }

  .player-stats-rating-chart__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
  }

  .player-stats-rating-chart__dots[hidden] {
    display: none;
  }

  .player-stats-rating-chart__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition:
      background 120ms ease,
      transform 120ms ease;
  }

  .player-stats-rating-chart__dot.is-active {
    background: var(--color-text);
    transform: scale(1.2);
  }

  .player-stats-rating-chart__empty {
    text-align: center;
    padding: 40px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__empty[hidden] {
    display: none;
  }

  /* ---------- Per-90 toggle (segmented control) ---------- */
  .pst-per90-toggle {
    display: inline-flex;
    align-self: stretch;
    width: 100%;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 3px;
    margin: 0 0 12px;
    gap: 0;
  }

  .pst-per90-btn {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;

    /* Primary toggle — full WCAG touch target (44px). The sub-pills
       inside `.player-economia__comp-dim-btn` stay at 36px (secondary
       nav, jerarquía visual). */
    min-height: var(--touch-target);
    transition:
      color 120ms ease,
      background 120ms ease;
  }

  .pst-per90-btn:hover:not(.active),
  .pst-per90-btn:focus-visible:not(.active) {
    color: var(--color-text);
  }

  .pst-per90-btn.active {
    background: rgb(0 255 135 / 14%);
    color: var(--color-accent);
  }

  /* ---------- Stats list groups + per-90 visibility toggle ---------- */
  .player-stats-group__header {
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
  }

  /* Row layout: flexbox with three regions.
       - badge slot: fixed 36px on the left (empty space when unranked)
       - label: flex-grows through the middle (takes all remaining space)
       - right block: pinned to the row's right edge — value + bar
         keep the same horizontal X across every row. */
  .player-stats-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(255 255 255 / 4%);
  }

  .player-stats-row:last-child {
    border-bottom: none;
  }

  .player-stats-row__badge-slot {
    flex: 0 0 36px;
    display: flex;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
  }

  /* Interactive variant — slot becomes a button that opens the league
     leaderboard modal for this stat. Subtle hover/focus affordance via
     the badge inside (the slot itself stays invisible). */
  .player-stats-row__badge-slot--interactive {
    cursor: pointer;
  }

  .player-stats-row__badge-slot--interactive:hover .player-rank-badge,
  .player-stats-row__badge-slot--interactive:focus-visible .player-rank-badge {
    transform: scale(1.06);
    transition: transform 120ms ease;
  }

  .player-stats-row__badge-slot--interactive:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .player-stats-row__label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-stats-row__right {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .player-stats-row__value {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
  }

  /* Three-mode toggle: hide all value siblings by default and reveal
     only the one matching the active mode. Default mode `per90` is
     set on the wrapper SSR. */
  .player-stats-row__value-total,
  .player-stats-row__value-per90,
  .player-stats-row__value-percentile {
    display: none;
  }

  .player-stats[data-mode="total"] .player-stats-row__value-total,
  .player-stats[data-mode="per90"] .player-stats-row__value-per90,
  .player-stats[data-mode="percentile"] .player-stats-row__value-percentile {
    display: inline;
  }

  /* Mini progress bar — always rendered (even unranked rows) so the
     right edge stays vertically aligned across the whole stats list.
     Width 60px, height 6px. Fill width = (50 - rankNum) / 50 * 100,
     i.e. the player's position within the league top-50. Traffic-
     light scale shared with the rank badge — green ≥50% / amber
     ≥25% / red <25% — semantic colours via app tokens. */
  .player-stats-row__rank-bar {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background: rgb(255 255 255 / 6%);
    overflow: hidden;
    flex-shrink: 0;
  }

  .player-stats-row__rank-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .player-stats-row__rank-bar--empty {
    background: rgb(255 255 255 / 4%);
  }

  .player-stats-row__rank-bar--high .player-stats-row__rank-bar-fill {
    background: var(--color-accent);
  }

  .player-stats-row__rank-bar--mid .player-stats-row__rank-bar-fill {
    background: var(--color-yellow-card);
  }

  .player-stats-row__rank-bar--low .player-stats-row__rank-bar-fill {
    background: var(--color-loss);
  }

  /* ---------- Matches tab filters (comp + role) ----------
     Two `.select-trigger` siblings sat side-by-side — same chrome the
     team Stats / Matches tabs use. With two filters we span the full
     row 50/50 (each child takes `flex: 1` and the trigger inside fills
     its parent), matching the rule that paired filters always cover
     the available width. The `.role-filter` trigger has no leading
     logo, so the chevron sits flush with the label. */
  .player-matches-tab__filters {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0 0 12px;
  }

  .player-matches-tab__filters .competition-filter,
  .player-matches-tab__filters .role-filter {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }

  .player-matches-tab__filters .select-trigger {
    width: 100%;
    justify-content: flex-start;
  }

  /* Rows hidden by player-matches-filter when comp or role doesn't
     match. display:none so the list collapses cleanly. */
  [data-player-matches-filter-target="row"].is-hidden {
    display: none;
  }

  .player-matches-tab__empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
  }
}