@layer components {
  /* ===========================================================================
     Ranking FIFA — full leaderboard rows.
     The modal CHROME (backdrop, sheet, header, title, close, search) reuses the
     canonical `.select-modal-*` component; this file only styles the
     FIFA-specific rows + the medal accent for the top 3.
     =========================================================================== */

  .fifa-lb {
    /* component-scoped podium accents (not global tokens) */
    --fifa-gold: oklch(0.82 0.15 90);
    --fifa-silver: oklch(0.82 0.02 250);
    --fifa-bronze: oklch(0.68 0.1 55);
  }

  /* count next to the modal title */
  .fifa-lb__count {
    margin-left: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
  }

  /* list (sits on `.select-modal-options` for scroll/padding) */
  .fifa-lb__list {
    list-style: none;
    margin: 0;
  }

  /* --- row --- */
  .fifa-lb__row {
    display: grid;
    grid-template-columns: 30px 30px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
    color: inherit;
  }

  .fifa-lb__row.is-hidden {
    display: none;
  }

  .fifa-lb__row--self {
    background: color-mix(in srgb, var(--team-color-1, var(--color-accent)) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--team-color-1, var(--color-accent));
  }

  .fifa-lb__rank {
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .fifa-lb__row--gold .fifa-lb__rank {
    color: var(--fifa-gold);
  }

  .fifa-lb__row--silver .fifa-lb__rank {
    color: var(--fifa-silver);
  }

  .fifa-lb__row--bronze .fifa-lb__rank {
    color: var(--fifa-bronze);
  }

  .fifa-lb__flag {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 0 0 1px var(--color-border-subtle);
  }

  .fifa-lb__main {
    min-width: 0;
  }

  .fifa-lb__name {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fifa-lb__peak {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
  }

  .fifa-lb__right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .fifa-lb__points {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .fifa-lb__points-unit {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-left: 2px;
  }

  .fifa-lb__move {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    min-width: 24px;
    justify-content: flex-end;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .fifa-lb__move svg {
    width: 11px;
    height: 11px;
  }

  .fifa-lb__move--up {
    color: var(--color-positive, oklch(0.7 0.16 150));
  }

  .fifa-lb__move--down {
    color: var(--color-negative, oklch(0.65 0.2 25));
  }

  /* --- empty state --- */
  .fifa-lb__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 14px;
  }

  .fifa-lb__empty[hidden] {
    display: none;
  }

  /* --- skeleton --- */
  .fifa-lb__skeleton {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
  }

  .fifa-lb__skeleton-row {
    height: 46px;
    margin: 0 16px;
    border-radius: 8px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-text) 6%, transparent) 25%,
      color-mix(in srgb, var(--color-text) 11%, transparent) 37%,
      color-mix(in srgb, var(--color-text) 6%, transparent) 63%
    );
    background-size: 400% 100%;
    animation: fifa-lb-shimmer 1.4s ease infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .fifa-lb__skeleton-row {
      animation: none;
    }
  }

  @keyframes fifa-lb-shimmer {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }
}