/* 案B — Perfect Game 型
   上に選手情報の帯、その下にタブ。データベースの1レコードとして読ませる。
   米国の大学コーチが一番見慣れている形。装飾は最小限で、情報密度で勝負する。 */

.top{border-bottom:1px solid var(--line);background:var(--surface);padding:0 var(--pad)}
.top .in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:10px;height:52px}
.top .brand{display:flex;align-items:center;gap:9px}
.top .brand img{width:24px;height:auto}
.top .brand span{font-size:13px;font-weight:600;color:var(--ink)}
.top .acts{margin-left:auto}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}

/* 見出し帯 */
.hd{padding:24px 0 20px;border-bottom:1px solid var(--line)}
.hd .row1{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.hd .ph{width:104px;height:104px;border-radius:6px;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);flex:none}
.hd .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hd .txt{flex:1;min-width:240px}
.hd .n{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.hd .ja{font-size:14px;color:var(--muted);margin-top:4px}
.hd .line{font-size:14px;font-weight:600;color:var(--body);margin-top:10px;
  letter-spacing:.01em;text-transform:uppercase}
/* 同上。案Bは背景が --bg なのでさらに悪く 1.43:1 だった */
.hd .line .sep{color:var(--muted);margin:0 8px;font-weight:400}
.hd .status{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.hd .acts{margin-left:auto;display:flex;flex-direction:column;gap:8px;min-width:190px}
@media (max-width:720px){.hd .acts{margin-left:0;width:100%}}

/* 順位ボックス（PG の NATIONAL / STATE RANKING に相当） */
/* 3項目。auto-fit だと390pxで2列になり空きセルが灰色の板として出る */
.ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin-top:20px}
.ranks > div{background:var(--surface);padding:13px 14px;text-align:center}
.ranks .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ranks .n{font-size:27px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1.15;margin-top:5px}
.ranks .n sup{font-size:.44em;font-weight:600;color:var(--muted);margin-left:1px;vertical-align:super}
.ranks .s{font-size:11.5px;color:var(--muted);margin-top:3px}

/* 属性の帯 */
/* 8項目。auto-fit だと 7/6/5/3 列に落ちる幅で最終行に空きセルができ、
   背景の var(--line) が灰色の板として露出する（962〜1096px が最悪）。
   8 を割り切る列数だけを使う。学校名セルが行高を押し上げる問題も解消する。 */
.attrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin-top:12px}
.attrs > div{background:var(--surface);padding:11px 13px;min-width:0}
.attrs .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.attrs .v{font-size:14px;font-weight:600;color:var(--ink);margin-top:3px}
.attrs .v.jp{font-weight:500}

/* タブ */
.tabs{display:flex;gap:0;margin-top:22px;border-bottom:1px solid var(--line-2);overflow-x:auto}
.tabs button{font-size:13.5px;font-weight:600;color:var(--muted);padding:11px 17px;
  border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s}
.tabs button:hover{color:var(--body)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--red)}

.pane{display:none;padding:22px 0 8px}
.pane.on{display:block}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}

/* グリッドの子が中身の最小幅で膨らむのを防ぐ */
.two > *{min-width:0}

@media (max-width:900px){.attrs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ranks{grid-template-columns:1fr}}