/* /players/ (templates/players-index.php). Desktop PlayersIndexDesktop.dc.html, phone PlayersIndexPhone.dc.html,
   states in ListStates.dc.html ("Players index"). */

.cd-pidx-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-top: 64px; align-items: end; }
.cd-pidx-h1 { grid-column: span 8; font-size: 160px; line-height: 0.88; }
.cd-pidx-total { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.cd-pidx-total .cd-num { font-size: 96px; line-height: 0.9; color: var(--cd-accent); }
.cd-pidx-total p:last-child { font-size: 15px; color: var(--cd-muted); max-width: 320px; }

.cd-pidx-tools { display: flex; gap: 12px; align-items: center; padding-top: 40px; flex-wrap: wrap; }
.cd-pidx-search { flex: 0 1 560px; min-width: 0; padding: 4px 4px 4px 20px; min-height: 52px; background: var(--cd-raised); }
.cd-pidx-search input { font-size: 17px; min-height: 44px; }
.cd-pidx-search__go { min-height: 44px; padding: 10px 20px; }

/* Team multi-check dropdown */
.cd-pidx-ms { position: relative; }
.cd-pidx-ms__box { position: relative; }
.cd-pidx-ms__btn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; background: var(--cd-chip); border: var(--cd-line) solid var(--cd-border); border-radius: 999px; color: var(--cd-text); font-size: 15px; cursor: pointer; list-style: none; user-select: none; white-space: nowrap; }
.cd-pidx-ms__btn::-webkit-details-marker { display: none; }
.cd-pidx-ms__btn:hover, .cd-pidx-ms__box[open] .cd-pidx-ms__btn { border-color: var(--cd-border-hover); }
.cd-pidx-ms__btn .cd-icon { color: var(--cd-text-2); transition: transform .15s; }
.cd-pidx-ms__box[open] .cd-pidx-ms__btn .cd-icon { transform: rotate(180deg); }
.cd-pidx-ms__panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 380px; max-width: calc(100vw - 2 * var(--cd-gutter)); background: var(--cd-raised); border: var(--cd-line) solid var(--cd-border-strong); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; }
.cd-pidx-ms__top { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cd-hair); }
.cd-pidx-ms__top button, .cd-pidx-ms__list button { background: none; border: 0; color: var(--cd-accent); font-size: 14px; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 8px; border-radius: 8px; }
.cd-pidx-ms__top button:hover, .cd-pidx-ms__list button:hover { background: var(--cd-chip); color: var(--cd-text); }
.cd-pidx-ms__list { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow-y: auto; }
.cd-pidx-ms__list li { display: flex; align-items: center; gap: 2px; padding: 0 8px 0 12px; }
.cd-pidx-ms__list li:hover { background: var(--cd-chip); }
.cd-pidx-ms__list label { flex-grow: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; min-width: 0; }
.cd-pidx-ms__list input { width: 18px; height: 18px; accent-color: var(--cd-accent); flex-shrink: 0; }
.cd-pidx-ms__list button { font-weight: 500; color: var(--cd-text-2); font-size: 13px; padding: 0 6px; }
.cd-pidx-ms__foot { padding: 10px 12px; border-top: 1px solid var(--cd-hair); display: flex; justify-content: flex-end; }

/* A–Z bar */
.cd-pidx-az { display: flex; justify-content: space-between; gap: 4px; padding-top: 20px; }
.cd-pidx-az a, .cd-pidx-az span { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: var(--cd-line) solid var(--cd-hair); font-family: var(--cd-display); font-size: 20px; }
.cd .cd-pidx-az a { color: var(--cd-text); }
.cd .cd-pidx-az a:hover { border-color: var(--cd-accent); color: var(--cd-accent); }
.cd .cd-pidx-az .is-current { background: var(--cd-accent); border-color: var(--cd-accent); color: var(--cd-on-accent); }
.cd-pidx-az span { color: var(--cd-muted); opacity: 0.4; }

/* results */
.cd-pidx-results { padding-top: 56px; display: flex; flex-direction: column; gap: 56px; }
.cd-pidx-group { display: flex; flex-direction: column; gap: 28px; }
.cd-pidx-group__head { display: flex; align-items: baseline; gap: 20px; padding-top: 24px; border-top: 1px solid var(--cd-hair); flex-wrap: wrap; }
.cd-pidx-group__title { font-family: var(--cd-display); font-weight: 400; font-size: 96px; line-height: 0.9; color: var(--cd-accent); }
.cd-pidx-group__title--q { font-size: 56px; color: var(--cd-text); text-transform: none; overflow-wrap: anywhere; }
.cd-pidx-group__head p { font-size: 17px; color: var(--cd-text-2); }
.cd-pidx-results > .cd-pidx-group__head { margin-bottom: -28px; }
.cd-pidx-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; }
.cd-pidx-card { display: flex; flex-direction: column; gap: 12px; color: var(--cd-text) !important; min-width: 0; }
.cd-pidx-card > .cd-icon { display: none; }
.cd-pidx-card__photo { display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--cd-raised); }
.cd .cd-pidx-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cd-pidx-card__none { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--cd-border-strong); border-radius: 16px; color: var(--cd-muted); }
.cd-pidx-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-pidx-card__name { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.cd-pidx-card:hover .cd-pidx-card__name { color: var(--cd-accent); }
.cd-pidx-card__team { font-size: 14px; color: var(--cd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-pidx-results .cd-pager { margin-top: 0; }

.cd-pidx-letters { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid var(--cd-hair); }
.cd-pidx-letters .cd-btn { min-height: 48px; font-weight: 700; }
.cd-pidx-letters__where { font-size: 15px; color: var(--cd-muted); }

@media (max-width: 1099px) {
  .cd-pidx-hero { padding-top: 48px; }
  .cd-pidx-h1 { font-size: 112px; }
  .cd-pidx-total .cd-num { font-size: 72px; }
  .cd-pidx-az { flex-wrap: wrap; justify-content: flex-start; }
  .cd-pidx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .cd-pidx-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 32px; }
  .cd-pidx-h1 { font-size: 76px; line-height: 0.9; }
  .cd-pidx-total { align-items: flex-start; text-align: left; flex-direction: row; align-items: baseline; gap: 10px; }
  .cd-pidx-total .cd-num { font-size: 32px; }
  .cd-pidx-total p:last-child { font-size: 14px; }
  .cd-pidx-tools { flex-direction: column; align-items: stretch; padding-top: 16px; }
  .cd-pidx-search { flex-basis: auto; }
  .cd-pidx-search input { font-size: 16px; }
  .cd-pidx-ms__btn { justify-content: space-between; }
  .cd-pidx-ms__panel { width: 100%; max-width: none; }
  .cd-pidx-az { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 6px; margin-inline: calc(-1 * var(--cd-gutter)); padding: 20px var(--cd-gutter) 4px; scrollbar-width: none; }
  .cd-pidx-az::-webkit-scrollbar { display: none; }
  .cd-pidx-results { padding-top: 32px; gap: 32px; }
  .cd-pidx-group { gap: 0; }
  .cd-pidx-group__head { gap: 14px; padding-top: 0; padding-bottom: 12px; border-top: 0; }
  .cd-pidx-group__title { font-size: 56px; }
  .cd-pidx-group__title--q { font-size: 36px; }
  .cd-pidx-group__head p { font-size: 15px; }
  .cd-pidx-group__by { display: none; }
  .cd-pidx-results > .cd-pidx-group__head { margin-bottom: -32px; }
  .cd-pidx-grid { display: flex; flex-direction: column; gap: 0; }
  .cd-pidx-card { flex-direction: row; align-items: center; gap: 14px; padding: 10px 0; min-height: 72px; border-top: 1px solid var(--cd-hair); }
  .cd-pidx-card > .cd-icon { display: block; color: var(--cd-muted); }
  .cd-pidx-card__photo { width: 56px; height: 72px; aspect-ratio: auto; flex-shrink: 0; border-radius: 10px; }
  .cd-pidx-card__none { border-radius: 10px; }
  .cd-pidx-card__text { flex-grow: 1; gap: 2px; }
  .cd-pidx-letters { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 24px; }
  .cd-pidx-letters .cd-btn { width: 100%; }
  .cd-pidx-letters [rel="next"] { order: -1; }
  .cd-pidx-letters .is-disabled { display: none; }
  .cd-pidx-letters__where { text-align: center; }
}
@media (min-width: 768px) and (max-width: 1099px) { .cd-pidx-ms__panel { left: auto; right: 0; } }