/* =========================================================
   選手名鑑（?mode=players）
   読み込み: _template/category.php/_common/players_body.html の先頭。
   競技トップの区画（top_pickleball.html の .players-top）と大会リーフの入賞選手（tourney_leaf.html の .tleaf-players）も
   区画の中で読み込む（カード・アバターの規則は :is(.players-page,.players-top) で共用）
   色は community_top.css のトークンだけ（--acc / --acc-ink / --clay / --clay-soft / --ink / --muted / --line-s / --surface / --bg）。
   body の st-{category} で競技色に切り替わる。新しい色は足さない。
   モバイルを主に作る（〜767px でカード・16px の左右余白・入力欄 16px 以上）。
   ========================================================= */

/* body に競技の写真（{code}_back.jpg）が敷かれているので、本文の地を画面の端まで塗って隠す */
.players-page{background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);min-height:calc(100vh - 160px);text-align:left}
.players-page .wrap{max-width:1080px;padding:0 28px}
/* 固定ヘッダー（.site-header・高さ 50px）の下から始める */
.players-page .pl-block{padding:84px 0 64px}

.players-page .pl-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:18px}
.players-page .pl-crumbs a{text-decoration:underline}
.players-page .pl-crumbs [aria-current]{color:var(--ink);font-weight:700}

.players-page .pl-h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,40px);line-height:1.3;margin:8px 0 10px;color:var(--ink);text-align:left}
.players-page .pl-h2{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.4;margin-bottom:12px;padding-left:12px;border-left:3px solid var(--clay)}
.players-page .pl-lead{color:var(--muted);font-size:15px;max-width:44em}
:is(.players-page,.players-top) .pl-more{margin-top:28px;text-align:center}

/* ---------- 絞り込み・検索 ---------- */
.players-page .pl-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 18px}
.players-page .pl-tabs{display:flex;align-items:center;gap:8px;min-height:0}
.players-page .pl-tab{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--ink);font-weight:700;font-size:14px;color:var(--ink);background:var(--surface)}
.players-page .pl-tab.is-on{background:var(--ink);color:var(--surface)}
.players-page .pl-search{display:flex;gap:8px;flex:1 1 320px;max-width:420px}
.players-page .pl-search-input{flex:1;min-width:0;font-size:16px;line-height:1.4;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-s);background:var(--surface);color:var(--ink)}
.players-page .pl-search-input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.players-page .pl-search-btn{font-size:16px;font-weight:700;padding:10px 20px;border-radius:999px;border:0;background:var(--ink);color:var(--surface);cursor:pointer}
.players-page .pl-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.players-page .pl-count{font-size:14px;color:var(--muted);margin-bottom:12px}
.players-page .pl-empty{padding:40px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line-s);border-radius:16px}

/* ---------- カード ---------- */
:is(.players-page,.players-top) .pl-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
:is(.players-page,.players-top) .pl-card{display:flex;align-items:flex-start;gap:14px;height:100%;padding:16px;background:var(--surface);border:1px solid var(--line-s);border-radius:16px;transition:border-color .18s var(--ease),transform .18s var(--ease)}
:is(.players-page,.players-top) .pl-card:hover{border-color:var(--ink);transform:translateY(-2px)}
:is(.players-page,.players-top) .pl-card:focus-visible,.players-page a:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
:is(.players-page,.players-top) .pl-card-body{display:flex;flex-direction:column;min-width:0}
:is(.players-page,.players-top) .pl-card-name{font-weight:900;font-size:16px;line-height:1.35;color:var(--ink)}
:is(.players-page,.players-top) .pl-card-kana{font-size:12px;color:var(--muted)}
:is(.players-page,.players-top) .pl-card-en{font-family:var(--disp);font-size:13px;color:var(--muted)}
:is(.players-page,.players-top) .pl-card-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:12.5px;color:var(--ink)}
:is(.players-page,.players-top) .pl-badge{align-self:flex-start;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-size:12px;font-weight:800}

/* アバター（写真は使わない・§4.8）。競技色の円に頭文字 */
:is(.players-page,.players-top) .pavatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:900;font-size:22px;line-height:1}
.players-page .pavatar--lg{width:88px;height:88px;font-size:38px}

/* ---------- ページ送り ---------- */
.players-page .pl-pager{min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.players-page .pl-pg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line-s);background:var(--surface);font-weight:700}
.players-page .pl-pg.is-on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* ---------- 詳細 ---------- */
.players-page .pl-head{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.players-page .pl-head-body{min-width:0}
.players-page .pl-pro{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--clay)}
.players-page .pl-name{margin:2px 0 2px}
.players-page .pl-flag{font-size:.7em;vertical-align:middle}
.players-page .pl-kana{font-size:13px;color:var(--muted)}
.players-page .pl-en{font-family:var(--disp);font-size:15px;color:var(--muted)}
.players-page .pl-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.players-page .pl-links a{display:inline-flex;padding:4px 12px;border-radius:999px;border:1px solid var(--line-s);background:var(--surface);font-size:13px;font-weight:700}

.players-page .pl-cta{margin:4px 0 32px}
.players-page .pl-cta-btn{min-height:46px}
.players-page .pl-cta--lesson .pl-cta-btn{background:var(--acc);color:var(--acc-ink)}
.players-page .pl-cta--lesson .pl-cta-btn:hover{background:var(--ink);color:var(--surface)}
.players-page .pl-cta-link{font-weight:700;text-decoration:underline;text-underline-offset:3px}

.players-page .pl-sec{margin-top:32px}
.players-page .pl-profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;background:var(--surface);border:1px solid var(--line-s);border-radius:16px;padding:6px 18px}
.players-page .pl-profile > div{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-s)}
.players-page .pl-profile dt{flex:none;width:7.5em;font-size:13px;color:var(--muted)}
.players-page .pl-profile dd{font-weight:700;min-width:0;overflow-wrap:anywhere}
.players-page .pl-intro{font-size:15px;line-height:1.9;max-width:44em}
.players-page .pl-highlights{padding-left:1.3em}
.players-page .pl-highlights li{margin:4px 0}
.players-page .pl-highlights li::marker{color:var(--clay)}

.players-page .pl-results{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-s);border-radius:16px;overflow:hidden;font-size:14px}
.players-page .pl-results th{background:var(--ink);color:var(--surface);font-weight:700;text-align:left;padding:10px 12px;font-size:13px}
.players-page .pl-results td{padding:10px 12px;border-top:1px solid var(--line-s);vertical-align:top}
.players-page .pl-res-name a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.players-page .pl-res-place{font-weight:800}

.players-page .pl-verified{font-size:13px;color:var(--muted);margin-bottom:6px}
.players-page .pl-source-list{padding-left:1.3em;font-size:13px}
.players-page .pl-source-list a{text-decoration:underline;overflow-wrap:anywhere}
/* Instagram の投稿（公式の埋め込み・中央寄せ） */
.players-page .pl-insta{margin-bottom:8px}
.players-page .pl-insta .instagram-media{background:var(--surface);border:1px solid var(--line-s);border-radius:12px;margin:0 auto 16px;padding:16px;text-align:center}
.players-page .pl-insta .instagram-media a{color:var(--ink);text-decoration:underline;font-weight:700}
.players-page .pl-claim{background:var(--surface);border:1px solid var(--line-s);border-radius:16px;padding:18px}
.players-page .pl-claim p{font-size:14px;margin-top:6px}

@media (prefers-reduced-motion: reduce){
  :is(.players-page,.players-top) .pl-card{transition:none}
  :is(.players-page,.players-top) .pl-card:hover{transform:none}
}

@media (max-width:1023px){
  :is(.players-page,.players-top) .pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- モバイル（〜767px） ---------- */
@media (max-width:767px){
  .players-page .wrap{padding:0 16px}
  .players-page .pl-block{padding:72px 0 48px}
  .players-page .pl-tools{flex-direction:column;align-items:stretch}
  .players-page .pl-tabs .pl-tab{flex:1;justify-content:center}
  .players-page .pl-search{max-width:none;flex:none}
  :is(.players-page,.players-top) .pl-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .players-page .pl-head{gap:14px}
  .players-page .pavatar--lg{width:68px;height:68px;font-size:30px}
  .players-page .pl-cta-btn{width:100%;justify-content:center}
  .players-page .pl-profile{grid-template-columns:minmax(0,1fr)}

  /* 戦績の表をカードに組み替える */
  .players-page .pl-results,.players-page .pl-results tbody,.players-page .pl-results tr,.players-page .pl-results td{display:block;width:100%}
  .players-page .pl-results{background:transparent;border:0;border-radius:0}
  .players-page .pl-results thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .players-page .pl-results tr{background:var(--surface);border:1px solid var(--line-s);border-radius:16px;padding:10px 14px;margin-bottom:10px}
  .players-page .pl-results td{border:0;padding:3px 0;display:flex;gap:10px}
  .players-page .pl-results td::before{content:attr(data-label);flex:none;width:5.5em;font-size:12px;color:var(--muted)}
}

/* ---------- 競技トップの区画（.players-top・設計 §4.7）。見出しとボタンは community_top.css の .head / .btn ---------- */
.sport-top .players-top{text-align:left}

/* ---------- 大会リーフの入賞選手（.tleaf-players・設計 §4.5）。見た目は直前の結果表（.tleaf-rtable）に合わせる ---------- */
.sport-top .tleaf-players{padding-block:0 72px;text-align:left}
.sport-top .tleaf-plist{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.sport-top .tleaf-plist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-s);font-size:14.5px;line-height:1.6}
.sport-top .tleaf-plist .n{font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sport-top .tleaf-plist .n:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.sport-top .tleaf-plist .e{color:var(--ink)}
.sport-top .tleaf-plist .e small{color:var(--muted);font-size:12.5px}
.sport-top .tleaf-plist .pl{font-weight:800;color:var(--clay)}
@media (max-width:767px){
  .sport-top .tleaf-players{padding-block:0 48px}
  .sport-top .tleaf-plist li{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 0}
  .sport-top .tleaf-plist .e{grid-column:1 / -1;grid-row:2}
}

/* ---------- 大会一覧のヒーローの「選手名鑑」リンク（.tourney-players・設計 §4.5）。色はヒーローの文字色を受け継ぐ ---------- */
.sport-top .hero .tourney-players{margin-top:4px;font-size:14px}
.sport-top .tourney-players-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:4px}
.sport-top .tourney-players-link:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
/* 写真ヒーローの上は暗いので、キッカーと同じ差し色にする */
.sport-top .hero--photo .tourney-players-link{color:var(--acc)}