@layer components {
  /* League Best XI — only ships the bits that diverge from the shared
     team-bestxi surface. The pitch, triple selector, metric chips and
     bench all inherit team-bestxi styles directly from the template
     class prefix. What's here is the pitch skeleton shown while the
     controller swaps (team × scope × period) — same grass chrome, blank
     markers. */

  .league-bestxi__pitch-skeleton {
    position: relative;
    background:
      repeating-linear-gradient(
        180deg,
        rgb(22 78 40 / 45%) 0,
        rgb(22 78 40 / 45%) 32px,
        rgb(26 92 50 / 45%) 32px,
        rgb(26 92 50 / 45%) 64px
      ),
      linear-gradient(180deg, #0d1f14 0%, #0a1a10 100%);
    min-height: 480px;
    margin: 0 16px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 32px 16px;
    overflow: hidden;
  }

  .league-bestxi__pitch-skeleton[hidden] {
    display: none;
  }

  .league-bestxi__pitch-skeleton-lines {
    position: absolute;
    inset: 0;
    border: 2px solid rgb(255 255 255 / 12%);
    border-radius: 12px;
    pointer-events: none;
  }

  .league-bestxi__pitch-skeleton-circle {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
  }

  .league-bestxi__pitch-skeleton-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
  }

  .league-bestxi__pitch-skeleton-marker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(255 255 255 / 10%);
  }
}