/* ══ Players hub (players.php) ════════════════════════════════════════════════
   Builds on includes/team.css (.tpd-* cards, lists, tables, tabs) and the .tp-*
   hero in _styles.css. Versioned by filemtime like the other page stylesheets. */

.ph-page .ph-mark { width: 132px; flex: none; }
.ph-page .ph-mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.th-first { margin-top: 0; }
.th-section { margin-top: 38px; }

/* ── Search bar ───────────────────────────────────────────────────────────── */
.ph-searchbar { position: relative; z-index: 20; padding: 16px 26px; background: rgba(255,255,255,.6); border-bottom: 1px solid #dfe3e7; }
.ph-search { position: relative; max-width: 640px; margin: 0 auto; }
.ph-search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #8a929c; pointer-events: none; }
.ph-search input { box-sizing: border-box; width: 100%; padding: 14px 16px 14px 46px; border: 1px solid #d3d9de; border-radius: 12px;
                   background: #fff; font: 16px helvetica, arial, sans-serif; color: #22262b; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ph-search input:focus { outline: none; border-color: #252f52; box-shadow: 0 0 0 3px rgba(37,47,82,.15), 0 2px 8px rgba(0,0,0,.06); }
.ph-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 440px; overflow-y: auto; background: #fff;
              border: 1px solid #e3e6ea; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.2); font-family: helvetica, arial, sans-serif; }
.ph-results[hidden] { display: none; }
.ph-hit { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-bottom: 1px solid #f0f2f4; color: inherit; text-decoration: none; }
.ph-hit:hover, .ph-hit.is-active { background: #f3f6fa; }
.ph-hit .tpd-avatar { width: 34px; height: 34px; font-size: 12px; }
.ph-hit-main { flex: 1 1 auto; min-width: 0; }
.ph-hit-main b { display: block; font-size: 14px; color: #22262b; }
.ph-hit-main em { display: block; font-size: 11.5px; font-style: normal; color: #8a929c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-hit-empty { padding: 16px; font-size: 13px; color: #8a929c; text-align: center; }
.ph-hit-all { display: block; width: 100%; padding: 11px; border: 0; background: #f5f7f9; cursor: pointer;
              font: 700 11px helvetica, arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #252f52; }
.ph-hit-all:hover { background: #e9edf2; }

/* ── Avatars & crests (shared) ────────────────────────────────────────────── */
.ph-page .tpd-avatar { box-sizing: border-box; }
.ph-crests { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.ph-crests img { width: 22px; height: 22px; object-fit: contain; }
.ph-crests em { font-size: 10px; font-style: normal; font-weight: 700; color: #9aa1a9; margin-left: 2px; }

/* ── Spotlight ────────────────────────────────────────────────────────────── */
.ph-shuffle { margin-top: 0; }
.ph-spot { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ph-spot-card { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; text-decoration: none; overflow: hidden;
                border-top: 4px solid var(--c,#3d4852); transition: transform .15s ease, box-shadow .15s ease; }
.ph-spot-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.ph-spot-face { width: 62px !important; height: 62px !important; font-size: 20px !important; }
.ph-spot-main { flex: 1 1 auto; min-width: 0; }
.ph-spot-main b { display: block; font-size: 16px; color: #22262b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-spot-main > span { display: block; font-size: 11.5px; color: #8a929c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-spot-main .ph-spot-line { margin-top: 5px; font-size: 12.5px; color: #4a5058; }
.ph-spot-main .ph-spot-line b { display: inline; font-size: 12.5px; }
.ph-spot-card .ph-crests { flex-direction: column; gap: 4px; }

/* ── Rosters ──────────────────────────────────────────────────────────────── */
.ph-rosters { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; align-items: start; }
.ph-roster { overflow: hidden; }
.ph-roster-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; overflow: hidden; color: #fff; text-decoration: none;
                  background: linear-gradient(135deg,#262b33 0%,#3b434f 100%); border-top: 4px solid var(--c,#3d4852); }
.ph-roster-head:before { content: ''; position: absolute; left: -30px; top: 50%; width: 120px; height: 120px; transform: translateY(-50%); border-radius: 50%;
                         pointer-events: none; opacity: .35; background: radial-gradient(circle, var(--c,#3d4852) 0%, transparent 68%); }
.ph-roster-head img { position: relative; width: 38px; height: 38px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.ph-roster-head span { position: relative; min-width: 0; }
.ph-roster-head b { display: block; font-family: 'Josefin Sans', helvetica, arial, sans-serif; font-size: 19px; line-height: 1.05; font-weight: 600; text-transform: uppercase; }
.ph-roster-head em { display: block; font-size: 10px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ph-roster-head:hover b { text-decoration: underline; }
.ph-roster-list { list-style: none; margin: 0; padding: 4px 0; }
.ph-roster-list a { display: flex; align-items: center; gap: 7px; padding: 5px 12px; color: #3a4048; text-decoration: none; font-size: 12.5px; }
.ph-roster-list a:hover { background: #f5f7f9; color: #22262b; }
.ph-num { flex: none; width: 22px; text-align: right; font-size: 11px; font-weight: 700; color: #9aa1a9; font-variant-numeric: tabular-nums; }
.ph-rname { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ph-pos { flex: none; min-width: 16px; font-size: 10px; font-weight: 700; color: #9aa1a9; text-align: center; }
.ph-roster-list .tpd-c { margin-left: 0; }

/* ── Directory ────────────────────────────────────────────────────────────── */
.ph-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid #eef0f2; }
.ph-filter { flex: 1 1 200px; min-width: 0; padding: 8px 11px; border: 1px solid #d6dbe0; border-radius: 8px; font: 13px helvetica, arial, sans-serif; color: #22262b; }
.ph-filter:focus, .ph-select:focus { outline: none; border-color: #252f52; box-shadow: 0 0 0 3px rgba(37,47,82,.13); }
.ph-select { padding: 7px 26px 7px 9px; border: 1px solid #d6dbe0; border-radius: 8px; background: #fff; cursor: pointer;
             font: 700 12px helvetica, arial, sans-serif; color: #22262b; }
.ph-letters { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 14px; border-bottom: 1px solid #eef0f2; background: #fafbfc; }
.ph-letters button { -webkit-appearance: none; appearance: none; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 6px;
                     background: transparent; cursor: pointer; font: 700 11.5px helvetica, arial, sans-serif; color: #6a7178; }
.ph-letters button:hover { background: #e9edf0; color: #22262b; }
.ph-letters button[aria-pressed="true"] { background: #252f52; color: #fff; }
.ph-count { padding: 9px 16px 0; font-size: 11.5px; color: #8a929c; }
.ph-table td { vertical-align: middle; }
.ph-who { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ph-who .tpd-avatar { width: 32px; height: 32px; font-size: 11px; }
.ph-who b { display: block; font-size: 13px; color: #22262b; }
.ph-who em { display: block; font-size: 10.5px; font-style: normal; font-weight: 400; color: #9aa1a9; }
.ph-who:hover b { color: #252f52; text-decoration: underline; }
.ph-more-wrap { padding: 4px 16px 16px; text-align: center; }

/* ── Lists & CTA ──────────────────────────────────────────────────────────── */
.ph-lists { margin-top: 26px; }
.ph-lists .tpd-avatar { width: 34px; height: 34px; font-size: 11.5px; }
.ph-head-note { margin: 0; }
.ph-bday { font-size: 13px; }
.ph-bday.is-today { color: #b3261e; }
.ph-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 4px; padding: 20px 24px;
          border-radius: 12px; color: #fff; background: linear-gradient(135deg,#1a2036 0%,#252f52 60%,#1a2036 100%); border-top: 4px solid #3cd918;
          box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.ph-cta b { display: block; font-family: 'Josefin Sans', helvetica, arial, sans-serif; font-size: 24px; line-height: 1.1; font-weight: 600; }
.ph-cta span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.75); }
.ph-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-cta .tpd-btn { width: auto; margin-top: 0; padding: 11px 18px; background: #3cd918; color: #fff; }
.ph-cta .tpd-btn:hover { background: #32bd14; }
.ph-cta .tpd-btn.is-ghost { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.ph-cta .tpd-btn.is-ghost:hover { background: rgba(255,255,255,.1); }

@media (max-width: 900px) {
  .ph-spot { grid-template-columns: minmax(0,1fr); }
  .ph-page .ph-mark { width: 96px; }
}
@media (max-width: 620px) {
  .ph-searchbar { padding: 12px 10px; }
  .ph-search input { font-size: 16px; padding: 12px 14px 12px 42px; }
  .ph-page .ph-mark { width: 76px; }
  .ph-rosters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .ph-tools .tpd-tabs { order: 5; }
  .ph-select { flex: 1 1 30%; }
  .ph-cta { padding: 18px; }
  .ph-cta-btns, .ph-cta .tpd-btn { width: 100%; }
}
@media (max-width: 440px) {
  .ph-rosters { grid-template-columns: minmax(0,1fr); }
}