/* 関連するページ。選手ページの足元（2026-08-31）。
   スマホでは見出しを上に置いて縦に流す。 */
.rel{margin-top:4px}
.relrow{display:grid;grid-template-columns:150px 1fr;gap:10px;
  padding:11px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.relrow:last-child{border-bottom:0}
.relk{font-size:12.5px;color:#6b7684;padding-top:2px}
.relv{font-size:14.5px;line-height:1.9}
@media (max-width:560px){.relrow{grid-template-columns:1fr;gap:2px}}
:root{
  --paper:#ecedef;
  --panel:#ffffff;
  --ink:#101419;
  --ink-2:#3b4450;
  --muted:#6d7684;
  --rule:#0b18240f;
  --rule-s:#0b182422;
  --plus:#0a6b5c;
  --minus:#ac1533;
  --night:#0d1116;
  --night-2:#191f27;
  --night-ink:#e8ecf1;
  --night-muted:#8e9aa9;
  --plus-lit:#33d3ae;
  --minus-lit:#ff6f88;
  --red:#d1402f;
  --blue:#3161cf;
  --zero:#98a2b0;
  --focus:#1b6acb;
  --paper-veil:#ecedefe8;
  --panel-soft:#ffffff9c;
  --row-hover:#f5f7f9;
  --ph:#dfe3e8;
  --shadow:#0b182426;
  --w:1120px;
  --rail:172px;
  color-scheme:light;
}

/* ── 暗い見た目 ───────────────────────────────────
   ★色の名前は変えない。中身だけ差し替える。
   　「紙」を黒くすると入口の黒い盤面と地続きになって境目が消えるので、
   　盤面のほうを一段だけ暗くして段差を残す。
   　プラス／マイナスは暗い地では沈むので、明るい側の色に切り替える。 */
html[data-theme="dark"]{
  --paper:#0f1419;
  --panel:#171d24;
  --ink:#e9eef4;
  --ink-2:#b6c1cd;
  --muted:#8b97a5;
  --rule:#ffffff14;
  --rule-s:#ffffff29;
  --plus:#33d3ae;
  --minus:#ff6f88;
  --night:#080b0e;
  --night-2:#12171d;
  /* REDとBLUEは元の濃さだと暗い地で沈むので、明るい側へ寄せる */
  --red:#ff8f7d;
  --blue:#8fb2ff;
  --zero:#6b7684;
  --focus:#5aa2ff;
  --paper-veil:#0f1419e8;
  --panel-soft:#1d242c;
  --row-hover:#1d242c;
  --ph:#232b34;
  --shadow:#00000080;
  color-scheme:dark;
}
/* 暗いときだけの手当て。明るい地を前提に決め打ちしていた所を戻す。 */
html[data-theme="dark"] .lchart .zhit.on{fill:#ffffff14;stroke:#ffffff4d}
html[data-theme="dark"] .lchart .ztip{background:#000;border-color:#ffffff45}
html[data-theme="dark"] .lchart .zplot svg polygon{fill:#ffffff}
html[data-theme="dark"] .lchart polyline{stroke:#93a1b1}
html[data-theme="dark"] .lchart line[stroke="#0b182440"]{stroke:#ffffff54}
html[data-theme="dark"] .tc.p img,html[data-theme="dark"] .pcard img{
  filter:grayscale(.12) contrast(1.02) brightness(.94)}
/* 札の下地。暗い地では元の薄い塗りが沈むので明るい側へ寄せる。
   文字色は --red / --blue の差し替えで効くので、ここでは触らない。 */
html[data-theme="dark"] .lg.red,html[data-theme="dark"] td.red .ev{
  background:#ff6a5522}
html[data-theme="dark"] .lg.blue,html[data-theme="dark"] td.blue .ev{
  background:#5a8cff26}
html[data-theme="dark"] .lg.rookie{background:#33d3ae1f}
html[data-theme="dark"] .mark .seven{color:#ff6f88}
html[data-theme="dark"] .crow button{color:#0f1419}
html[data-theme="dark"] .nav a[aria-current]{color:#0f1419}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",
    "Meiryo",system-ui,sans-serif;
  font-size:16px;line-height:1.85;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}

/* 数字は必ず符号つき・等幅・大きく。ページの主役 */
.n{font-family:"Anton","Roboto Mono",sans-serif;font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:.005em}
.mono{font-family:"Roboto Mono",Consolas,monospace;font-variant-numeric:tabular-nums}
.pos{color:var(--plus)}
.neg{color:var(--minus)}

/* ── ヘッダ ──────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:var(--paper-veil);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule-s)}
.top .wrap{display:flex;align-items:center;gap:16px;height:58px;
  flex-wrap:nowrap}
.mark{display:flex;align-items:baseline;gap:7px;text-decoration:none;
  white-space:nowrap}
.mark .seven{font-family:"Anton",sans-serif;font-size:21px;letter-spacing:.03em;
  color:var(--minus)}
.mark .w{font-family:"Dela Gothic One",sans-serif;font-size:14px}
.mark .sub{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.08em}
/* ★min-width:0 を付ける。付けないと中身の合計幅が縮まらず、
   　右隣の切り替えボタンが押し出されて次の行へ落ちる。 */
.nav{display:flex;gap:1px;margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;
  mask-image:linear-gradient(to right,#000 88%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:5px 11px;border-radius:2px;font-size:13.5px;font-weight:500;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule-s)}
.nav a[aria-current]{color:var(--ink);font-weight:700;
  border-bottom-color:var(--minus)}
.nav .narrow{display:none}
/* 明るさの切り替え。太陽と月のかわりに「紙と盤面」の四角を出す。 */
.theme{flex:none;margin-left:10px;width:34px;height:34px;padding:0;
  background:transparent;border:1px solid var(--rule-s);border-radius:2px;
  cursor:pointer;display:grid;place-items:center}
.theme:hover{border-color:var(--ink)}
.theme .ic{width:15px;height:15px;border:2px solid var(--ink);
  border-radius:2px;background:linear-gradient(90deg,
    var(--ink) 0 50%,transparent 50% 100%)}
html[data-theme="dark"] .theme .ic{background:linear-gradient(90deg,
  transparent 0 50%,var(--ink) 50% 100%)}
@media (max-width:880px){
  .theme{width:30px;height:30px;margin-left:8px}
  .nav{mask-image:linear-gradient(to right,#000 84%,transparent)}
}

/* ── 区切り：左に小さな見出し、右に本文 ─────────── */
.sec{padding:52px 0;border-top:1px solid var(--rule-s)}
.sec:first-child{border-top:0}
.rail{display:grid;grid-template-columns:var(--rail) 1fr;gap:34px;
  align-items:start}
.lab{position:sticky;top:78px;display:flex;flex-direction:column;gap:1px;
  padding-top:5px}
/* 飛び先の手前に空ける高さ。ヘッダーは上に貼り付いているので、
   これが無いと飛んだ先の見出しがヘッダーの下に隠れる。
   スマホはヘッダーが2段（ロゴ＋タブ）ぶん高い。 */
html{scroll-padding-top:74px}
@media (max-width:880px){html{scroll-padding-top:114px}}
.lab .l{font-size:12.5px;font-weight:700;letter-spacing:.08em;
  font-family:"Barlow Semi Condensed","Zen Kaku Gothic New",sans-serif;
  color:var(--ink-2)}
.lab b{font-family:"Anton",sans-serif;font-weight:400;font-size:19px;
  line-height:1.2;color:var(--ink);letter-spacing:.01em}
.col{min-width:0}
h1{font-family:"Dela Gothic One",sans-serif;font-weight:400;
  font-size:clamp(27px,5.6vw,52px);line-height:1.24;margin:0 0 14px;
  letter-spacing:.002em;overflow-wrap:anywhere}
h2{font-family:"Dela Gothic One",sans-serif;font-weight:400;
  font-size:clamp(20px,3.5vw,27px);line-height:1.4;margin:0 0 10px;
  overflow-wrap:anywhere}
h3{font-size:14px;font-weight:700;margin:0 0 8px;letter-spacing:.06em;
  color:var(--ink-2)}
.lead{color:var(--ink-2);margin:0 0 4px;max-width:40em;font-size:15.5px}
.note{color:var(--muted);font-size:13.5px;line-height:1.8;margin:14px 0 0;
  max-width:48em}
.note a{text-underline-offset:3px}

/* 選手ページの公式プロフィール（好きな機種・立ち回りスタイル）。
   ★箱で囲わない。薄い罫線で1項目ずつ区切るだけにする。 */
.prof{margin:2px 0 0;border-top:1px solid var(--rule-s)}
.prof>div{padding:13px 0;border-bottom:1px solid var(--rule-s)}
.prof .k{display:block;color:var(--muted);font-size:12px;font-weight:700;
  letter-spacing:.08em;margin:0 0 5px}
.prof .v{display:block;font-size:16.5px;line-height:1.75;font-weight:500;
  color:var(--ink);overflow-wrap:anywhere}
.prof ul{list-style:none;margin:0;padding:0}
.prof li{position:relative;padding-left:15px}
.prof li+li{margin-top:3px}
.prof li::before{content:"";position:absolute;left:0;top:.78em;
  width:8px;height:2px;background:var(--minus);opacity:.65}
.band .prof .v{color:var(--night-ink)}
.more{display:inline-block;margin-top:18px;font-size:13.5px;font-weight:700;
  text-decoration:none;border-bottom:2px solid var(--minus);padding-bottom:1px}
.more:hover{color:var(--minus)}

/* ── 入口：黒い盤面 ─────────────────────────────── */
.band{background:var(--night);color:var(--night-ink);border-top:0;
  padding:58px 0 46px}
.band .lab .l{color:var(--night-muted)}
.band .lab b{color:#fff}
.band .lead{color:#b9c3d0}
.band .note{color:var(--night-muted)}
/* 黒い盤面の中の但し書き。本文より一段落として読み飛ばせるようにする。 */
.band .cap.ex{font-size:12px;line-height:1.85;opacity:.74;margin-top:12px;
  max-width:34em}
.band .cap.ex a{color:inherit}
.band .pos{color:var(--plus-lit)}
.band .neg{color:var(--minus-lit)}
.band h1{color:#fff}
.ask{font-size:clamp(15px,2.6vw,17.5px);font-weight:500;color:#aab6c4;
  margin:0 0 22px;max-width:34em}
.answer{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:26px 0 0}
.answer .big{font-family:"Anton",sans-serif;font-size:clamp(58px,15vw,132px);
  line-height:.86;letter-spacing:-.005em}
.answer .unit{font-size:clamp(14px,2.6vw,17px);font-weight:700;color:#98a4b3;
  letter-spacing:.04em}
.cap{font-size:13.5px;color:var(--night-muted);margin:14px 0 0;
  max-width:44em;line-height:1.85}

/* ── ゼロ線チャート ─────────────────────────────── */
/* ★単位は目盛りの上に重ねない。最上段の数字と必ずぶつかるので、
   グリッドの1行目として独立させる。 */
.zeroline{display:grid;grid-template-columns:58px 1fr;
  grid-template-rows:auto 1fr;gap:0;align-items:stretch}
.zunit{grid-column:1/-1;font-size:12px;color:#67727f;
  letter-spacing:.04em;margin:0 0 7px}
.zaxis{position:relative;height:186px}
.zaxis span{position:absolute;right:9px;transform:translateY(-50%);
  font-family:"Roboto Mono",monospace;font-size:11.5px;color:#7d8896;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.zaxis span.z0{color:#c2ccd8;font-weight:700}
.zplot{position:relative;height:186px}
.zplot svg{display:block;width:100%;height:100%;overflow:hidden}
.zhit{cursor:pointer}
.zhit.on{fill:#ffffff14;stroke:#ffffff73;stroke-width:1}
.zmarks{position:absolute;inset:0;pointer-events:none}
.zmarks span{position:absolute;top:0;margin-left:5px;
  font-family:"Anton",sans-serif;font-size:12.5px;color:#eaf0f7;
  letter-spacing:.02em;background:#ffffff21;padding:2px 7px 1px}
/* ★width は max-content にする。絶対配置の既定（shrink-to-fit）は
   left から親の右端までを幅の上限にするため、右寄りの棒だと細く潰れる。 */
.ztip{position:absolute;z-index:3;pointer-events:none;width:max-content;
  transform:translateX(-50%);background:#0c1115;border:1px solid #ffffff3d;
  padding:7px 10px;font-size:11.5px;line-height:1.55;color:#e9eff6;
  white-space:nowrap;box-shadow:0 8px 24px #000000a6}
.ztip b{display:block;font-weight:700;font-size:12.5px}
.ztip i{font-style:normal;color:#9aa6b4}
@media (max-width:880px){
  .zeroline{grid-template-columns:50px 1fr}
  .zaxis,.zplot{height:150px}
  .zaxis span{font-size:11.5px;right:7px}
  .zmarks span{font-size:11.5px;padding:1px 5px}
  .ztip{white-space:normal;max-width:62vw;font-size:12px;padding:6px 9px}
}
/* 折れ線（選手ページ）はゼロ線チャートの仕組みを流用するが、明るい紙の上に
   置く。★縦横比を保つ（preserveAspectRatio を切らない）。切ると点の丸が
   縦長の楕円に潰れる。高さは grid の stretch で軸側へ伝える。 */
.lchart .zaxis,.lchart .zplot{height:auto}
.lchart .zplot svg{height:auto;aspect-ratio:1000/460}
.lchart .zaxis span{color:var(--muted)}
.lchart .zaxis span.z0{color:var(--ink-2)}
.lchart .zunit{color:var(--muted)}
.lchart .zhit.on{fill:#0b18240a;stroke:#0b182433}
.lchart .ztip{background:var(--ink);border-color:#ffffff2e;color:#fff}
.lchart .ztip i{color:#b9c2cd}
/* ── 固有名詞を途中で割らない ─────────────────────
   日本語は既定だと文字単位でどこでも改行する。人名・法人名・店名が
   「ス／ロミックエイキ」「ルーキ／ー戦2」のように割れて読めなくなるので、
   固有名詞が入る場所は word-break:keep-all にして、区切り（・／空白）で
   だけ改行させる。1語が幅を超えたときだけ overflow-wrap で逃がす。
   ★文章（.lead .cap .ask .note）には掛けない。句読点でしか改行できず
   　行末がガタガタになるため。 */
.stat .k,.stat .v,.stat .s,
.bar .nm,.bar .v,
.tc .nm,.tc .tm,.tc .s,.tc .kv,
.pcard .n,.pcard .t,
.who,.crumb,
td,th,
.zmarks span,.ztip,
.tlab .R,
.subhead h3{word-break:keep-all;overflow-wrap:anywhere}

/* 人名など、途中で割ってはいけない塊 */
.nw{white-space:nowrap}
/* 名前の並びから選手ページへ飛ぶリンク。押せると分かる程度に控えめにする。
   ★下線を引きっぱなしにすると、名前が並ぶ場所（チーム・収録日）で
   　線だらけになって読みにくい。薄い罫線1本にとどめる。 */
a.pl{text-decoration:none;border-bottom:1px solid var(--rule-s);
  padding-bottom:1px}
a.pl:hover,a.pl:focus-visible{color:var(--minus);border-bottom-color:var(--minus)}
.band a.pl{border-bottom-color:#ffffff33}
.band a.pl:hover{color:var(--minus-lit);border-bottom-color:var(--minus-lit)}
/* 名前や機種を「・」「→」でつないだ並び。スマホの表ではセルが flex に
   なるため、1つの箱にまとめて中で折り返させる（直下に置くと横並びの
   部品として扱われ、折り返さずに右へはみ出す）。 */
.names{display:block;min-width:0;text-align:right}
/* トップの「出場」欄のように、箱の中で折り返させたい場所 */
.stat .v .names{text-align:left;line-height:1.5}
/* 所属つきの並び。★1人1行にして、名前の右にチームを薄く添える。
   横につなげると、どこまでが1人ぶんか読み取れない。 */
/* ★狭い画面では札が入りきらないので折り返させる。1行に押し込むと
   　320px幅で右へはみ出す（実測で10件出た）。 */
.names.col .nw{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;white-space:normal;overflow-wrap:anywhere;line-height:1.65;
  flex-wrap:wrap;row-gap:2px}
/* ★札つきの並びは「札｜名前」の2列にして、札の幅を固定する。
   　名前の右に札を置くと、名前の長さで札の位置が毎行ずれる。 */
.names.col.chipped .nw{display:grid;grid-template-columns:68px 1fr;
  gap:0 9px;align-items:baseline;white-space:normal}
/* ★札は幅を固定する。「伸ばす」指定に頼ると、リンクになっている段の札
   　（a要素）だけ別の指定に負けて縮み、「新規」だけ広く見える（実測で確認）。
   　法人の行とも同じ幅にして、左端も右端もそろえる。 */
.names.col.chipped .chip,.ttier .chip{width:68px;box-sizing:border-box;
  justify-self:start;text-align:center}
/* ★名前のリンクは列いっぱいに伸ばさない。下線が名前の先まで引かれてしまう。 */
.names.col.chipped .nw > a.pl{justify-self:start}
.names.col .nw i{font-style:normal;font-size:.62em;font-weight:700;
  color:var(--muted);font-family:"Zen Kaku Gothic New",sans-serif;
  letter-spacing:.02em;margin-left:auto;flex:none}
.band .names.col .nw i{color:var(--night-muted)}
/* 機種名に付く「[11連1,069枚]」などの但し書き。機種名とは切り離して置く。
   ★nowrap にする。付けないと狭い欄で1文字ずつ縦に潰れる。 */
.sub{color:var(--muted);font-size:.92em;font-style:normal;white-space:nowrap;
  margin-left:4px}
.arrow{color:var(--muted)}
/* 打った機種。PCは横に、狭い画面では前編・中編・後編を縦に積む。 */
.ks .k{display:inline-block;margin:0 16px 0 0;vertical-align:top}
.ks .k em{font-style:normal;color:var(--muted);font-size:.86em;
  margin-right:5px;letter-spacing:.02em}
.zdots{position:absolute;inset:0;pointer-events:none}
.zdot{position:absolute;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);border:1.8px solid var(--panel);
  box-sizing:border-box}
/* ★折れ線のときは点を小さくする。10pxのままだと20戦の選手で点の間隔が
   20px弱しかなく、点と背景色の縁に線が覆われて「線が無い」ように見える。 */
.lchart .zdot{width:7px;height:7px;border-width:1.3px}
.zdot.p{background:var(--plus)}
.zdot.m{background:var(--minus)}

/* ── 連絡フォーム ───────────────────────────────── */
.cform{margin:22px 0 0;max-width:34em}
.cform label{display:block;margin:0 0 16px}
.cform label>span{display:block;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;color:var(--muted);margin:0 0 5px}
.cform label>span i{font-style:normal;font-weight:400;letter-spacing:0}
.cform input,.cform select,.cform textarea{
  display:block;width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--rule-s);border-radius:0;padding:10px 12px;
  font-family:inherit;font-size:15px;line-height:1.7}
.cform textarea{resize:vertical;min-height:120px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:2px solid var(--focus);outline-offset:-1px}
.cform input[type=file]{padding:9px 10px;font-size:13px;background:transparent;
  border-style:dashed;cursor:pointer}
.cform input[type=file]::file-selector-button{font-family:inherit;font-size:13px;
  border:1px solid var(--rule-s);background:var(--panel);color:var(--ink);
  padding:6px 12px;margin-right:10px;cursor:pointer}
.cfiles{margin:0 0 16px}
.cfile{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--rule-s);font-size:12.5px;color:var(--muted)}
.cfile img{width:44px;height:44px;object-fit:cover;flex:none;
  background:var(--ph);border:1px solid var(--rule-s)}
.cfile span{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.5}
.cfile .x{flex:none;background:transparent;color:var(--minus);border:0;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  padding:4px 2px;letter-spacing:0}
.cfile .x:hover{text-decoration:underline}
/* ★罠の欄。display:none だと機械に見分けられるので画面の外へ出す。 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.crow button{background:var(--ink);color:var(--panel);border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.06em;
  padding:12px 26px;line-height:1.4}
.crow button:hover{background:var(--ink-2)}
.crow button[disabled]{background:var(--zero);cursor:default}
.cmsg{font-size:13px;line-height:1.6}
.cmsg.ok{color:var(--plus);font-weight:700}
.cmsg.ng{color:var(--minus);font-weight:700}
@media (max-width:880px){
  .cform{max-width:none}
  .crow button{width:100%;padding:14px 20px}
  .crow{gap:10px}
}

.zl-legend{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:14px;
  font-size:11.5px;letter-spacing:.04em;color:var(--night-muted)}
.chart{background:var(--panel);border:1px solid var(--rule-s);padding:16px 14px}
.chart svg{display:block;width:100%;height:auto}
/* ── 図の中の文字（2026-08-30 新設）───────────────────
   ★SVGの中に文字を置くと、座標系ごと縮む。この図は viewBox 1000 を
     スマホでは301pxで出すので0.30倍になり、13が実質3.9pxまで潰れていた。
     幅が2.8倍変わる以上、SVGの中では全画面で読める大きさを保てない。
     そこで「点と線はSVG・文字はHTML」に分けた。文字は画面幅と無関係になる。 */
/* ★軸の説明は図に重ねず、図の外の行に置く（2026-08-30）。
   　重ねると、端まで伸びた点と文字が必ずぶつかる。実際に右端の点が
   　「店が出た →」と「+1,366枚」の下に潜っていた（谷川さん指摘）。
   　行に出せば、画面幅がいくつでも重なりようがない。 */
.scat > b,.scat .sxrow b{display:block;font-weight:400;font-size:12px;
  color:var(--muted);white-space:nowrap}
.scat .sy{text-align:center}
.scat .sy.t{margin:0 0 7px}
.scat .sy.b{margin:7px 0 0}
.scat .sxrow{display:flex;justify-content:space-between;gap:10px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--rule-s)}
.scat .smax{text-align:right;margin-top:6px;
  font-family:"Roboto Mono",monospace;color:var(--dim,#98a2b0)}
/* ── 相関のものさし ────────────────────────────── */
.ruler .rh{display:flex;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--muted);line-height:1.5}
/* ★丸・目盛り・値は同じ内枠に入れて、％の基準をそろえる。
   　左右を18px空けているのは、端の目盛りが半分ずれて外へ出るため。 */
.ruler .rbody{position:relative;margin:18px 18px 0;padding-bottom:32px}
.ruler .rline{position:relative;height:2px;background:var(--zero)}
/* ★丸は13px。18pxだと物差しの主役に見えてしまい、目盛りより目立つ
   　（2026-08-30 谷川さん指摘）。上端は (線の2px − 13px) ÷ 2 で中央に合わせる。 */
.ruler .rline i{position:absolute;top:-5.5px;width:13px;height:13px;
  border-radius:50%;background:var(--minus);transform:translateX(-50%)}
.ruler .rt{position:relative;height:1.6em;margin-top:12px}
.ruler .rt span{position:absolute;transform:translateX(-50%);
  font-size:12px;color:var(--muted);font-family:"Roboto Mono",monospace}
/* ★両端の目盛りだけは中央合わせにしない。合わせると右端の「+1」が
   　枠から7pxはみ出す（2026-08-31 実測）。端に寄せて内側へ収める。 */
.ruler .rt span:first-child{transform:none}
.ruler .rt span:last-child{transform:translateX(-100%)}
.ruler .rv{position:absolute;bottom:4px;transform:translateX(-50%);
  font-size:13px;font-weight:700;color:var(--minus);
  font-family:"Roboto Mono",monospace}
@media (max-width:520px){
  /* 狭い画面では左右の説明が中央とぶつかる。中央だけ隠して端を残す */
  .ruler .rh span:nth-child(2){display:none}
  .scat > b,.scat .sxrow b{font-size:11.5px}
}

/* ── 数字の並び（箱で囲わず、罫線の格子で置く）──── */
/* ★左線は「1つ目のセル」ではなく枠そのものに引く。セルに引くと、
   3項目を2列で並べたときの2行目（下段）の左端に線が来ない。 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,152px),1fr));
  border-top:1px solid var(--rule-s);border-left:1px solid var(--rule-s);
  margin-top:20px}
.stat{padding:15px 18px 17px;border-bottom:1px solid var(--rule-s);
  border-right:1px solid var(--rule-s);text-decoration:none;display:block;
  min-width:0}
/* ★2列に並ぶ幅のとき、最後の1つが下段に単独で残るなら横いっぱいに伸ばす。
   伸ばさないと右半分が空いたままになり、枠が閉じずに線が欠けて見える。 */
@media (max-width:560px){
  .stats:not(.one) > .stat:nth-child(odd):last-child{grid-column:1/-1}
}
/* ★3つ並べる組はスマホで1列にする。自動の折り返しだと2＋1になり、
   最後の1つがはぐれて右半分が空く。 */
@media (max-width:880px){
  .stats.one{grid-template-columns:1fr}
}
a.stat:hover{background:var(--panel-soft)}
.band .stats,.band .stat{border-color:#ffffff1f}
.stat .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  color:var(--muted)}
.band .stat .k{color:var(--night-muted)}
.stat .v{display:block;font-family:"Anton",sans-serif;font-size:34px;
  line-height:1.16;margin-top:5px;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.stat .v.sm{font-size:20px;font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:700;line-height:1.35}
.stat .s{display:block;font-size:12px;color:var(--muted);margin-top:4px;
  line-height:1.7}
.band .stat .s{color:var(--night-muted)}

/* ── 棒（0から左右へ）───────────────────────────── */
.bars{margin:18px 0 0;border-top:1px solid var(--rule-s)}
.bar{display:grid;grid-template-columns:24px 178px 1fr 104px;align-items:center;
  gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);
  text-decoration:none}
.bar:hover{background:#ffffffa0}
.bar .rk{font-family:"Anton",sans-serif;font-size:13px;color:var(--muted);
  text-align:right}
.bar .nm{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bar .nm small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;
  letter-spacing:.04em}
.bar .v{font-family:"Anton",sans-serif;font-size:19px;text-align:right;
  font-variant-numeric:tabular-nums}
.track{position:relative;height:14px}
.track::before{content:"";position:absolute;left:50%;top:-9px;bottom:-9px;
  width:1px;background:var(--zero)}
.track i{position:absolute;top:1px;height:12px;display:block}
.track i.p{background:var(--plus);left:50%}
.track i.m{background:var(--minus);right:50%}
.bars .gap{display:grid;grid-template-columns:24px 178px 1fr 104px;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--rule);color:var(--muted);
  font-size:12px;align-items:center}
.bars .gap .mid{text-align:center;letter-spacing:.1em}
.axis0{display:grid;grid-template-columns:24px 178px 1fr 104px;gap:14px;
  font-size:11px;color:var(--muted);margin-top:7px;letter-spacing:.06em}
.axis0 .mid{text-align:center}

/* ── 表 ─────────────────────────────────────────── */
.tablewrap{overflow:auto;background:var(--panel);border:1px solid var(--rule-s);
  margin-top:18px}
/* 選手一覧の名前セル。写真と名前をひと組にして、誰の行かを一目で分かるようにする。 */
table.roster td.pn a{display:flex;align-items:center;gap:9px;text-decoration:none;
  color:inherit}
table.roster td.pn a:hover span{text-decoration:underline;text-underline-offset:3px}
table.roster td.pn picture{float:none;display:block;flex:none}
table.roster td.pn img{width:26px;height:26px;object-fit:cover;
  object-position:top center;background:var(--ph);display:block;border-radius:2px}
/* 列が多く、余白12pxのままだと表が親を越えて名前が切れる（実測890>868）。 */
table.roster th,table.roster td{padding-left:8px;padding-right:8px}
table.roster td.pn{min-width:158px}
table.roster td.pn span{font-weight:700;white-space:normal}
/* 旧名は名前の下へ。横に続けると枠を越えて切れる（実測+26px）。 */
table.roster td.pn .was{display:block;font-weight:400;font-size:12px;
  color:var(--muted);line-height:1.45}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);
  white-space:nowrap}
th{position:sticky;top:0;background:var(--panel);font-size:12.5px;
  font-family:"Barlow Semi Condensed","Zen Kaku Gothic New",sans-serif;
  color:var(--ink-2);letter-spacing:.03em;font-weight:700;z-index:2;
  border-bottom:1px solid var(--rule-s)}
th.s{cursor:pointer;user-select:none}
th.s:hover{color:var(--ink)}
th.s[data-dir]::after{content:"↑";margin-left:5px;color:var(--minus)}
th.s[data-dir="desc"]::after{content:"↓"}
/* ★数字の書体（2026-08-31 に入れ替え）。等幅の Roboto Mono は線が細く、
   13pxだと数字が痩せて読みにくかった（谷川さん指摘）。
   細長いサンセリフに替えると、同じ列幅のままでも3px大きくできる。 */
td.r,th.r{text-align:right;font-family:"Barlow Semi Condensed",
  "Roboto Condensed",Arial,sans-serif;font-weight:600;
  font-variant-numeric:tabular-nums;font-size:16px;letter-spacing:.01em}
tbody tr:hover{background:var(--row-hover)}
td a{font-weight:700;text-underline-offset:3px}
/* 機種名や選手の並びが入る列。1つの名前の途中では折らず、
   区切り（→ ・ ／）で改行させる。入りきらない名前だけ逃がす。 */
td.wrapok,th.wrapok{white-space:normal;min-width:15em;line-height:1.6;
  word-break:keep-all;overflow-wrap:anywhere}
.search{width:100%;max-width:340px;padding:9px 13px;border:1px solid var(--rule-s);
  background:var(--panel);font:inherit;font-size:14px;border-radius:0;margin-top:14px}
.search:focus{border-color:var(--ink)}

/* ── 切り替えタブ ───────────────────────────────── */
/* ★JSが動く前は全部のペインを見せておく。CSSで先に隠すと、
   JSが落ちたときに中身へ二度とたどり着けなくなる。 */
.tabs{display:flex;gap:0;margin:20px 0 4px;border-bottom:1px solid var(--rule-s)}
.tab{background:transparent;border:0;border-bottom:3px solid transparent;
  font-family:inherit;color:var(--muted);cursor:pointer;text-align:left;
  padding:9px 15px 8px;font-size:15px;font-weight:700;line-height:1.35;
  margin-bottom:-1px}
.tab i{display:block;font-style:normal;font-size:12px;font-weight:400;
  letter-spacing:.04em;opacity:.85}
.tab:hover{color:var(--ink-2)}
.tab.on{color:var(--ink);border-bottom-color:var(--minus)}
.pane{padding-top:22px}
.pane + .pane{border-top:1px solid var(--rule-s);margin-top:34px}
.pane[hidden]{display:none}
.pane[hidden] + .pane{border-top:0;margin-top:0}

/* シーズンへ飛ぶ並び。押すとそのシーズンの先頭へ移動する。
   ★いま画面に出ているシーズンを濃く出す（JSが .on を付け替える）。 */
/* ★飛んだ先が上の帯（sticky）に隠れないよう、節の上に余白を確保する。
   これが無いと見出しが帯の裏に入り、押した先が本文の途中から始まって見える。 */
section[id]{scroll-margin-top:64px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.jump a{font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.03em;
  text-decoration:none;color:var(--muted);padding:5px 14px;
  border:1px solid var(--rule-s);background:var(--panel);line-height:1.4}
.jump a:hover{color:var(--ink);border-color:var(--ink)}
.jump a.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
html[data-theme="dark"] .jump a.on{color:#0f1419}

/* 段の数字が何の数字かを、段の並びのすぐ上で1度だけ言う */
.unitnote{margin:16px 0 -4px;font-size:12px;color:var(--muted);
  letter-spacing:.03em}

.msort{display:none}
/* ── スマホでは表を縦積みのカードに変える ───────────
   横スクロールしないと読めない表はUIとして良くない。
   見出し行は隠し、各セルに「項目 : 値」の形で見出しを付け直す
   （data-l は JS が thead から自動で写すので、列を足しても同期が崩れない）。*/
@media (max-width:880px){
  .tablewrap{overflow-x:hidden}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;
    width:100%}
  table.stack thead{display:none}
  table.stack tr{padding:11px 13px 12px;border-bottom:1px solid var(--rule-s);
    display:flex;flex-direction:column}
  table.stack td.hd{order:-1}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{display:flex;justify-content:space-between;align-items:baseline;
    gap:14px;padding:2px 0;border:0;white-space:normal;text-align:right;
    font-size:13.5px}
  table.stack td::before{content:attr(data-l);color:var(--muted);font-size:12px;
    font-weight:700;letter-spacing:.08em;text-align:left;flex:none;
    font-family:"Zen Kaku Gothic New",sans-serif}
  table.stack td.r{font-size:14px}
  table.stack td.hd{display:block;text-align:left;font-size:16px;font-weight:700;
    padding:0 0 6px;line-height:1.4}
  table.stack td.hd::before{content:none}
  table.stack td.hd a{text-decoration:underline;text-underline-offset:3px}
  table.stack td.empty-cell{display:none}
  /* 値だけで意味が通るセルは、スマホでは見出しを出さない
     （「回戦 1回戦目」のように同じ言葉が2回出るのを避ける）。
     PCの表では列見出しとして必要なので、thead はそのまま。 */
  table.stack td.nolab::before{content:none}
  table.stack td.nolab{justify-content:flex-end}
  /* ── 選手一覧のスマホ表示 ─────────────────────
     ★見出しを左・値を右端に飛ばすのをやめた。1行を使うと間に大きな空白が
     　でき、どの見出しの値なのか目で追えない（谷川氏の指摘・2026-08-25）。
     　見出しは小さく上、値はそのすぐ下に置く。
     ★9行の縦積みを3行の組みにする。順位（#）は並びが示すので出さない。 */
  table.stack.roster tr{display:grid;grid-template-columns:1fr 1fr 1fr;
    column-gap:12px;row-gap:11px;padding:15px 15px 16px}
  table.stack.roster td{display:block;text-align:left;padding:0;font-size:16px;
    font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
  table.stack.roster td::before{display:block;content:attr(data-l);
    font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);
    margin:0 0 3px;text-align:left}
  /* 通算順位。所属と同じ右上の枠に、所属を上・順位を下で重ねて置く。
     ★見出しは「通算」に縮める。「通算順位 1位」だと右上で2行になる。 */
  table.stack.roster td:nth-child(1){grid-area:1/3/2/4;align-self:end;
    text-align:right;font-size:13px;color:var(--muted)}
  table.stack.roster td:nth-child(1)::before{content:"通算";display:inline;
    margin-right:5px}
  table.stack.roster td:nth-child(1)::after{content:"位";font-size:12px;
    margin-left:1px}
  table.stack.roster td.hd{grid-area:1/1/2/3;font-size:19px;padding:0}
  table.stack.roster td.hd::before{content:none}
  table.stack.roster td.hd img{width:38px;height:38px}
  table.stack.roster td:nth-child(3){grid-area:1/3/2/4;align-self:start;
    text-align:right;font-size:12px;font-weight:400;color:var(--muted)}
  table.stack.roster td:nth-child(3)::before{content:none}
  table.stack.roster td:nth-child(7){grid-area:2/1/3/2;font-size:23px;
    font-family:"Anton",sans-serif;font-weight:400;letter-spacing:.01em}
  table.stack.roster td:nth-child(9){grid-area:2/2/3/3}
  table.stack.roster td:nth-child(8){grid-area:2/3/3/4}
  table.stack.roster td:nth-child(4){grid-area:3/1/4/2}
  table.stack.roster td:nth-child(5){grid-area:3/2/4/3}
  table.stack.roster td:nth-child(6){grid-area:3/3/4/4}
  table.stack.roster td:nth-child(n+4):nth-child(-n+6){font-size:14.5px}
  table.stack.roster td.empty-cell{display:block}
  table.stack.roster td::before{font-size:12px}
  /* ★色は「通算」と「シーズン別」だけに残す。1戦平均と実戦まで緑にすると
     　1枚に色が5つ並び、どこを見ればよいか分からなくなる。符号で読ませる。 */
  table.stack.roster td:nth-child(9),
  table.stack.roster td:nth-child(9).pos,
  table.stack.roster td:nth-child(9).neg,
  table.stack.roster td:nth-child(8){color:var(--ink)}
  /* 写真と名前がまとめて押せるので、名前の下線は出さない。 */
  table.stack.roster td.hd a{text-decoration:none}
  table.stack.roster td.hd a:active span{text-decoration:underline}
  /* 台数の多い表は、数字を2つずつ並べて縦に伸びすぎないようにする */
  table.stack.pair tr{flex-direction:row;flex-wrap:wrap;column-gap:14px}
  table.stack.pair td.hd{width:100%}
  table.stack.pair td{width:calc(50% - 7px)}
  /* 会場名など長い値は半分の幅に入らず折り返すので、1行まるごと使う。
     ★ただし値は右端へ飛ばさない。1行を使うぶん見出しとの間が大きく空き、
     　どの見出しの値なのか目で追えなくなる。見出しのすぐ隣に置く。 */
  table.stack.pair td.wrapok,table.stack.pair td.full{width:100%}
  table.stack.pair td.full{justify-content:flex-start;gap:16px;
    text-align:left}
  /* ★中身が多い欄（出場選手・打った機種）は見出しを上、値を下にする。
     見出しの右に押し込むと欄が細くなり、文字が縦1列に潰れる。 */
  table.stack.pair td.wrapok{display:block;text-align:left;padding:4px 0 2px}
  table.stack.pair td.wrapok::before{display:block;margin:0 0 2px}
  table.stack.pair td.wrapok .names{text-align:left;padding-left:2px}
  /* 機種は前編・中編・後編を縦に積む */
  .ks .k{display:block;margin:0;line-height:1.7}
  .ks .k em{display:inline-block;width:2.6em}
  /* 並べ替えはスマホでは見出しを押せないので、専用の操作を出す */
  .msort{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
}
.msort select{font:inherit;font-size:13.5px;padding:7px 10px;background:var(--panel);
  border:1px solid var(--rule-s);border-radius:0;max-width:60%}
.msort button{font:inherit;font-size:13px;font-weight:700;padding:7px 12px;
  background:var(--panel);border:1px solid var(--rule-s);cursor:pointer}
.msort button:hover{border-color:var(--ink)}
.msort .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--muted)}
/* カードの並べ替え。表の .msort はスマホでしか出さないので、こちらは別に持つ。 */
.csort{display:flex;align-items:center;gap:10px;margin:16px 0 0;flex-wrap:wrap}
.csort select{font:inherit;font-size:13.5px;padding:7px 10px;background:var(--panel);
  border:1px solid var(--rule-s);border-radius:0;color:inherit}
.csort button{font:inherit;font-size:13px;font-weight:700;padding:7px 12px;
  background:var(--panel);border:1px solid var(--rule-s);cursor:pointer;color:inherit}
.csort button:hover{border-color:var(--ink)}
.csort .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.msort .onlyone{font-size:13.5px;font-weight:700}

/* ── 割合の対比（相関の言い換え）───────────────── */
.rates{margin-top:18px;border-top:1px solid var(--rule-s)}
.rate{display:grid;grid-template-columns:150px 1fr 92px;gap:6px 16px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--rule-s)}
.rate .rl{font-size:15px;font-weight:700}
.rate .rt{position:relative;height:20px;background:#0b18240d}
.rate .rt i{position:absolute;left:0;top:0;bottom:0;background:var(--plus);
  display:block}
.rate .rv{font-family:"Anton",sans-serif;font-size:34px;line-height:1;
  text-align:right;font-variant-numeric:tabular-nums}
.rate .rv span{font-size:16px;margin-left:2px}
.rate .rn{grid-column:2 / -1;font-size:12px;color:var(--muted);margin-top:-2px}
.band .rate{border-color:#ffffff1f}
.band .rate .rt{background:#ffffff14}
@media (max-width:880px){
  .rate{grid-template-columns:1fr 84px;gap:5px 12px}
  .rate .rl{grid-column:1 / -1}
  .rate .rv{font-size:28px}
  .rate .rn{grid-column:1 / -1}
}

/* ── 札 ─────────────────────────────────────────── */
.chip{display:inline-block;padding:0 7px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;border:1px solid var(--rule-s);color:var(--muted);
  vertical-align:2px}
.chip.RED{border-color:var(--red);color:var(--red)}
/* 1st〜3rdの本戦に出ていない選手。段ではないので色は付けない。 */
/* 段の札もボタンにそろえる。1px の面取りと薄い落ち影だけで浮かせる。 */
.chip.tier,.chip.new{border-radius:5px;padding:1px 8px 2px;
 background-image:linear-gradient(180deg,#ffffff59 0%,#ffffff1f 34%,
   #ffffff00 50%,#00000021 62%,#00000040 100%);
 box-shadow:inset 0 1px 0 #ffffff96,inset 0 -2px 0 #00000038,
   0 1px 1px #00000024,0 3px 5px -2px #00000038}
.chip.new{background-color:#dfe3e8;border-color:#c3c9d1;color:#59626f}
html[data-theme="dark"] .chip.new{background-color:#2b323b;
 border-color:#414a55;color:#a9b3c0}
.chip.BLUE{border-color:var(--blue);color:var(--blue)}
/* ティア表の段（S〜F）の札。色は帯と同じものを、明るい紙用と暗い画面用の
   2つとも札に持たせておき、切り替えはここでやる。 */
.chip.tier{background:var(--tc);border-color:var(--tce);color:var(--tcf);
  text-decoration:none}
html[data-theme="dark"] .chip.tier{background:var(--tcd);
  border-color:var(--tcd);color:var(--tcdf)}
a.chip.tier:hover{outline:2px solid var(--ink);outline-offset:1px}
/* ★上位3段は金属の板にする（谷川氏の指示・2026-08-25）。
   　S=金・A=銀・B=銅。順位そのものがメダルの色になる。
   ★金属に見えるかどうかは「明暗の帯が縦に何度も入れ替わるか」で決まる。
   　1色を明るくしても金には見えない。上から 白光り → 濃い金 → 沈み →
   　もう一度光る、と8段のグラデーションを敷いている。
   ★文字は板の中央（いちばん暗い帯）に乗るので、明るい字を置く。
   ★光を走らせるのは金と銀だけ。銅まで光らせると3段とも同じに見えて
   　順位の差が消える。 */
.chip.tier.gold,.tlab.gold,.pcard.gold,
html[data-theme="dark"] .chip.tier.gold,
html[data-theme="dark"] .tlab.gold,
html[data-theme="dark"] .pcard.gold{
  background-color:#4a3708;
  background-image:
    linear-gradient(180deg,#fff2c0 0%,#e8c766 10%,#a8801c 26%,#6d5211 44%,
      #4a3708 54%,#8a6a16 68%,#f0d383 84%,#4a3708 100%);
  color:#fff6d8;border-color:#f0d383;
  text-shadow:0 1px 2px #00000091;
  position:relative;overflow:hidden;isolation:isolate}
.chip.tier.silver,.tlab.silver,.pcard.silver,
html[data-theme="dark"] .chip.tier.silver,
html[data-theme="dark"] .tlab.silver,
html[data-theme="dark"] .pcard.silver{
  background-color:#48525b;
  background-image:
    linear-gradient(180deg,#ffffff 0%,#dfe7ee 10%,#a8b4c0 26%,#69757f 44%,
      #48525b 54%,#8e9aa6 68%,#e2eaf1 84%,#48525b 100%);
  color:#ffffff;border-color:#e2eaf1;
  text-shadow:0 1px 2px #0000009e;
  position:relative;overflow:hidden;isolation:isolate}
.chip.tier.bronze,.tlab.bronze,.pcard.bronze,
html[data-theme="dark"] .chip.tier.bronze,
html[data-theme="dark"] .tlab.bronze,
html[data-theme="dark"] .pcard.bronze{
  background-color:#573212;
  background-image:
    linear-gradient(180deg,#f7cfa8 0%,#dda06a 10%,#b06e35 26%,#7a4a1e 44%,
      #573212 54%,#96602a 68%,#dda06a 84%,#573212 100%);
  color:#ffe3c6;border-color:#dda06a;
  text-shadow:0 1px 2px #00000091;
  position:relative;overflow:hidden;isolation:isolate}
.chip.tier.gold{box-shadow:inset 0 1px 0 #fff2c073,inset 0 -1px 0 #00000059,
  0 1px 2px #0000002e}
.chip.tier.silver{box-shadow:inset 0 1px 0 #ffffff8c,inset 0 -1px 0 #00000059,
  0 1px 2px #0000002e}
.chip.tier.bronze{box-shadow:inset 0 1px 0 #f7cfa873,inset 0 -1px 0 #00000059,
  0 1px 2px #0000002e}
.tlab.gold{box-shadow:inset 0 1px 0 #fff6d8b8,inset 0 -2px 0 #00000073,
  0 2px 3px #00000024,0 8px 20px -9px #e8c76694}
.tlab.silver{box-shadow:inset 0 1px 0 #ffffffc4,inset 0 -2px 0 #00000073,
  0 2px 3px #00000024,0 8px 20px -9px #cdd7e08c}
.tlab.bronze{box-shadow:inset 0 1px 0 #f7cfa8ad,inset 0 -2px 0 #00000073,
  0 2px 3px #00000024,0 8px 20px -9px #b06e3585}
.tlab.gold .R,.tlab.silver .R,.tlab.bronze .R{opacity:1}
/* ★光は「斜め左上から斜め右下へ」走らせる（谷川氏の指示・2026-08-25）。
   ★棒そのものを rotate で傾けてはいけない。段の帯や選手カードは
   　「細長い縦の板」で、傾けると棒の横の広がりが板の幅を超え、端から端まで
   　抜け切れずに「途中から光って途中で止まる」ように見える（実測で確認）。
   　代わりに、板より一回り大きい面に 135deg のグラデーションを敷き、
   　その面ごと translate(x,y) で斜めに動かす。棒の傾きは板の縦横比に
   　左右されず常に45度で、動く距離も板の外から外まで足りる。 */
.chip.tier.gold::before,.tlab.gold::before,.pcard.gold::before,
.chip.tier.silver::before,.tlab.silver::before,.pcard.silver::before{
  content:"";position:absolute;z-index:-1;
  top:-75%;bottom:-75%;left:-75%;right:-75%;
  background:linear-gradient(135deg,#fff0 42%,#fff6d666 47%,#ffffff 50%,
    #fff6d666 53%,#fff0 58%);
  transform:translate(-50%,-50%);
  animation:shine 5s linear infinite}
/* 銀は白の光。金より冷たく、少し遅らせて2枚が同時に光らないようにする。 */
.chip.tier.silver::before,.tlab.silver::before,.pcard.silver::before{
  background:linear-gradient(135deg,#fff0 42%,#eaf3ff73 47%,#ffffff 50%,
    #eaf3ff73 53%,#fff0 58%);
  animation-delay:1.6s}
/* 止まっている時間を長くとって、たまに一度だけ端から端まで渡る。
   ★動かす量は板の外へ抜け切る最小限にする。大きくしすぎると、同じ秒数の
   　うち板の上にいる時間だけが短くなり、渡らずに一瞬光っただけに見える
   　（±70%だと板の上は0.3秒しかなかった・実測 2026-08-25）。 */
@keyframes shine{
  0%,68%{transform:translate(-50%,-50%)}
  86%,100%{transform:translate(50%,50%)}}
@media (prefers-reduced-motion:reduce){
  .chip.tier.gold::before,.tlab.gold::before,.pcard.gold::before,
  .chip.tier.silver::before,.tlab.silver::before,.pcard.silver::before{
    animation:none;transform:translate(0,0);opacity:.55}}
html[data-theme="dark"] a.chip.tier:hover{outline-color:var(--night-ink)}

/* ── 選手 ───────────────────────────────────────── */
/* ★選手カードはその選手の段の色そのものにする。ティアは写真の上に重ね、
   　下に「通算差枚」「平均差枚」を並べる（谷川氏の指示・2026-08-25）。
   ★数字はプラス緑・マイナス臙脂の色分けをやめて段の文字色で出す。段の色の
   　上に緑や赤を乗せると読めない組み合わせが出るため。符号で読ませる。 */
.plist{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));
  gap:9px;margin-top:18px}
.pcard{position:relative;display:block;overflow:hidden;border-radius:12px;
  padding:0 0 13px;text-decoration:none;
  background-color:var(--tc);color:var(--tcf);
  background-image:
    linear-gradient(90deg,#0000001f 0%,#ffffff00 10%,#ffffff00 90%,#00000026 100%),
    linear-gradient(180deg,#ffffff4d 0%,#ffffff1a 24%,#ffffff00 46%,
      #0000001c 62%,#0000004d 100%);
  box-shadow:inset 0 1px 0 #ffffff9e,inset 0 -5px 0 #00000030,
    0 2px 4px #00000024,0 10px 20px -10px #00000073;
  transition:transform .12s,box-shadow .12s}
.pcard:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -5px 0 #00000030,
    0 3px 6px #0000002e,0 14px 26px -10px #00000082}
/* ★<picture> は中の <img> にサイズを持たせて、自分は素通しにする。
   display:contents は使わない。gridの中で source まで列に数えられてしまい、
   .teamrow のような「46px + 残り」の2列が崩れる（実測で確認）。 */
picture{display:inline}
.pcard picture{display:block}
.lab.photo picture{display:block}
.tc.p picture{float:left;margin:0 10px 4px 0}
.tc.t picture{flex:none}
.pcard .ph{position:relative;display:block}
.pcard img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top center;
  background:var(--ph);display:block}
/* ★ティアは写真に重ねず、写真の「上」の行に置く（谷川氏の指示・2026-08-25）。
   　カードそのものが段の色なので、札の形にすると同色で沈む。段の文字色で
   　字だけを見せ、下に細い罫線を引いて写真と切り分ける。 */
.pcard .tg{display:block;text-align:center;line-height:1;
  font-size:11px;font-weight:700;letter-spacing:.14em;
  padding:9px 6px 9px;border-bottom:1px solid #00000026}
/* ★名前は削らずに折り返す。「ayasi（元:五十嵐マリア）」のように
   長い名前があり、末尾を…で切ると誰なのか読めなくなる。 */
/* 名前が長いときだけ字を詰める。ティア表の .tc.p .nm と同じ考え方。 */
.pcard .n.s1{font-size:.94em;letter-spacing:-.015em}
.pcard .n.s2{font-size:.88em;letter-spacing:-.025em}
.pcard .n.s3{font-size:.8em;letter-spacing:-.035em}
.pcard .n{display:block;font-size:13.5px;font-weight:700;margin:10px 11px 0;
  line-height:1.35;overflow-wrap:anywhere}
.pcard .n .was{display:block;font-size:12px;font-weight:400;opacity:.78}
.pcard .t{display:block;font-size:12px;letter-spacing:.04em;margin:2px 11px 0;
  opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .kv{display:block;margin:8px 11px 0}
.pcard .kv i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.07em;
  opacity:.78;line-height:1.4}
.pcard .kv b{display:block;font-family:"Anton",sans-serif;font-size:19px;
  line-height:1.1;font-variant-numeric:tabular-nums}
/* 総合点はティアを決めている数字なので、いちばん大きく出す。 */
.pcard .kv.big{margin-top:10px;padding-bottom:9px;
  border-bottom:1px solid #00000026}
.pcard .kv.big b{font-size:25px}
/* ★実戦数・1位・平均順位は1行に詰めない。狭いカードだと「1位 9／回」の
   　ように途中で折り返して読めなくなる。1項目ずつ行を分ける。 */
/* 段の中の連番（A1・A2…）。見出しの一部なので小さく添える。 */
.tc .tno{font-size:12px;font-weight:700;letter-spacing:.06em;
  color:inherit;opacity:.85}
.pcard .kxs{display:block;margin:9px 11px 0;font-size:12px;line-height:1.65;
  opacity:.78}
.pcard .kxs i{display:block;font-style:normal;white-space:nowrap}
.lab.photo{position:static;padding-top:0}
.lab.photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top center;
  background:var(--ph);display:block}
.who{font-size:13px;color:var(--muted);letter-spacing:.04em;margin:0 0 4px}

/* ── ちいさな仕切り ─────────────────────────────── */
.subhead{display:flex;align-items:baseline;gap:10px;margin:34px 0 0;
  padding-bottom:7px;border-bottom:1px solid var(--rule-s)}
.subhead h3{margin:0}
.subhead .c{font-family:"Anton",sans-serif;font-size:13px;color:var(--muted)}
/* ★横に2つ並べるのをやめ、縦に順番に積む（谷川さん指示・2026-08-31）。
   　並べると中の表が半分の幅に押し込まれ、右へスクロールしないと
   　数字が出てこなかった。積めば、どの幅でもそのまま読める。 */
.two{display:grid;grid-template-columns:1fr;gap:16px;margin-top:6px}
.list{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-s)}
.list li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:15px;
  color:var(--ink-2);overflow-wrap:anywhere}
.teamrow{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;
  align-items:start;padding:18px 0;border-bottom:1px solid var(--rule)}
.teamrow img{width:46px;height:46px;object-fit:contain}
.teamrow .tn{font-size:16px;font-weight:700;margin:0}
.teamrow .tc{font-size:12px;color:var(--muted);margin:0}
.teamrow .tg{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  gap:12px 20px;margin-top:12px}
.teamrow .tg > div{border-left:1px solid var(--rule-s);padding-left:13px}
.teamrow .tg .k{display:block;font-size:12px;letter-spacing:.08em;
  color:var(--muted);font-weight:700}
.teamrow .tg .v{display:block;font-family:"Anton",sans-serif;font-size:23px;
  line-height:1.3;margin-top:2px;font-variant-numeric:tabular-nums}
.teamrow .tg .s{display:block;font-size:11.5px;color:var(--muted);
  line-height:1.7;margin-top:2px}
/* 獲得ptの内訳。★合計だけ置くと「なぜこの数字なのか」が読めない。
   差枚ぶんと、それ以外（順位pt・ホームpt）に割って見せる。
   項目名を左・数字を右端にそろえ、2行の桁位置を合わせる。 */
.teamrow .tg .bd{list-style:none;margin:5px 0 0;padding:0;font-size:11.5px;
  line-height:1.85;color:var(--muted)}
.teamrow .tg .bd li{display:flex;align-items:baseline;gap:10px;
  white-space:nowrap}
.teamrow .tg .bd b{margin-left:auto;font-weight:700;
  font-variant-numeric:tabular-nums}
/* チームの選手一覧。全員を「差枚・チーム内順位・全体順位」で並べる。
   ★最高と最低だけ出すと、間の選手がどこにいるのか分からない。 */
.tmem{margin:12px 0 0;padding:12px 0 0;list-style:none;
  border-top:1px solid var(--rule-s)}
.tmem li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;
  align-items:baseline;padding:5px 0;line-height:1.6}
.tmem li + li{border-top:1px solid var(--rule)}
.tmem .nm{font-size:13.5px;font-weight:700}
.tmem .v{font-family:"Anton",sans-serif;font-size:17px;
  font-variant-numeric:tabular-nums;text-align:right}
.tmem .rk{grid-column:1/-1;font-size:11.5px;color:var(--muted);
  letter-spacing:.02em}
.tmem .rk i{font-style:normal;opacity:.8}

/* 4thのメンバー。役割ごとに1行で、見出しの位置を列で揃える。 */
.mem{margin:9px 0 0;padding:0;list-style:none;font-size:13.5px}
.mem li{display:grid;grid-template-columns:5.2em 1fr;gap:0 10px;
  align-items:baseline;padding:2px 0;line-height:1.7}
.mem li em{font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--muted)}
.mem li .names{text-align:left}
/* ★法人のティアは名前の行に混ぜず、独立した行に置く。チーム名の長さで
   札の位置が法人ごとにばらつくのを防ぐ。下のリーダー・メンバーの行と
   同じ列割りにして、どれが法人ぶんの札か見分けられるようにする。 */
.ttier{display:grid;grid-template-columns:5.2em 1fr;gap:0 10px;
  align-items:baseline;margin:10px 0 0;font-size:13.5px;line-height:1.7}
.ttier em{font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--muted)}
.ttier + .mem{margin-top:2px}

/* ── 収録カレンダー ─────────────────────────────── */
.cals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
 gap:14px;margin-top:20px}
.mon{background:var(--panel);border:1px solid var(--rule-s);padding:10px 11px 12px}
.mt{font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.02em;
 padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--rule-s)}
table.cal{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11.5px}
table.cal th{position:static;padding:2px 0;text-align:center;font-size:11.5px;
 letter-spacing:0;border:0;background:transparent;color:var(--muted)}
table.cal th.sat{color:var(--blue)}
table.cal th.sun{color:var(--red)}
table.cal td{padding:1px;border:0;vertical-align:top;height:34px;
 white-space:normal}
table.cal td .d{display:block;text-align:center;font-family:"Roboto Mono",monospace;
 font-size:10.5px;color:var(--muted);line-height:1.5}
table.cal td.sat .d{color:var(--blue)}
table.cal td.sun .d{color:var(--red)}
table.cal td.empty{background:transparent}
.ev{display:block;text-decoration:none;border-radius:2px;padding:2px 2px 3px;
 line-height:1.15;text-align:center;font-family:"Anton",sans-serif;
 font-size:13px;letter-spacing:.02em}
td.red .ev{background:#c93a2b18;color:var(--red)}
td.blue .ev{background:#2b57b818;color:var(--blue)}
td.rookie .ev{background:#0a6b5c18;color:var(--plus)}
td.past .ev{filter:grayscale(1);opacity:.5}
td.red .d,td.blue .d,td.rookie .d{color:var(--ink);font-weight:700}
.lg{display:inline-block;font-family:"Anton",sans-serif;font-size:12px;
 padding:0 5px;border-radius:2px;vertical-align:1px}
.lg.red{background:#c93a2b18;color:var(--red)}
.lg.blue{background:#2b57b818;color:var(--blue)}
.lg.rookie{background:#0a6b5c18;color:var(--plus)}
/* ★飛んだ先の強調行。明るい黄色を敷くと、暗い画面では文字色が明るいまま
   　なので読めなくなる（谷川氏の指摘・2026-08-25）。
   ★色は計算で決めた。地の色に黄を薄く混ぜ、左に太い帯を足して「ここ」を示す。
   　濃い色で塗らないので、行の中の文字はふだんの読みやすさを保てる。
   ★薄字だけは強調行の上でコントラストが 4.3:1 まで落ちるので、
   　その行の中だけ --muted を強めた値に差し替える（暗い画面6.0:1／
   　明るい紙6.1:1・実測）。 */
tr:target{background:#fff6d7;box-shadow:inset 4px 0 0 #e0a500;--muted:#565e69}
html[data-theme="dark"] tr:target{background:#333329;
  box-shadow:inset 4px 0 0 #ffd54a;--muted:#a6b3c1}

/* ── ティア表 ───────────────────────────────────── */
.tiers{margin-top:20px;border-top:1px solid var(--rule-s)}
/* ★段の帯は88pxに詰めた（2026-08-30）。104pxだと、札の中身が70px程度
   　しかないのに帯だけが縦に700px以上伸びて、空きが目立っていた。 */
.trow{display:grid;grid-template-columns:88px 1fr;gap:14px;
 padding:14px 0;border-bottom:1px solid var(--rule-s)}
/* ★段はボタンのように「浮いて」見せる。上に光沢、下に影、内側に面取り。
   　平らな色板だと7段が横並びの帯にしか見えず、押せそうな粒立ちが出ない。 */
/* ★段の札は上に寄せ、スクロールしても貼り付くようにする（2026-08-30）。
   　中央寄せだと、その段に法人が2つ入るだけで帯が750px近くになり、
   　巨大な空きの真ん中に文字が1つ浮く形になっていた（谷川さん指摘）。
   　上に寄せて貼り付かせると、同じ空きが「いまどの段を見ているか」の
   　目印として働く。 */
.tlab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 padding:12px 4px 14px;border-radius:10px;
 background-color:var(--tc);color:var(--tcf);
 /* 上に光沢、下に沈み。左右にもわずかに陰を入れて円筒のように丸みを出す。 */
 background-image:
   linear-gradient(90deg,#00000024 0%,#ffffff00 12%,#ffffff00 88%,#0000002e 100%),
   linear-gradient(180deg,#ffffff59 0%,#ffffff26 30%,#ffffff00 48%,
     #0000001f 58%,#00000047 100%);
 /* 下端の厚い縁＝押せる板の側面。落ち影は2段にして浮きを強くする。 */
 box-shadow:inset 0 1px 0 #ffffff9e,inset 0 -5px 0 #00000038,
   inset 0 -6px 1px #00000024,
   0 1px 1px #0000001f,0 3px 5px #00000024,0 12px 22px -10px #00000073}
/* ★暗い画面では帯も暗い画面用の段に切り替える。紙用の濃い色のままだと
   　黒地に沈んで、段の並びが読めなくなる。 */
html[data-theme="dark"] .tlab{background:var(--tcd);color:var(--tcdf)}
.tlab .L{font-family:"Anton",sans-serif;font-size:38px;line-height:.9;
 position:sticky;top:14px}
.tlab .R{font-size:12px;font-weight:700;text-align:center;margin-top:5px;
 line-height:1.5;opacity:.9;position:sticky;top:56px}
/* 1行目＝枚数、2行目＝件数。どちらも1行に収める。
   ★枚数は割らない。「+500〜+9／99枚」になると範囲が読めなくなる。 */
.tlab .rng,.tlab .cnt{display:block;white-space:nowrap;font-weight:700}
.tlab .cnt{opacity:.82;font-weight:400}
.tcards{display:flex;flex-wrap:wrap;gap:8px;align-content:center}
/* ── 段の色の凡例 ──────────────────────────────
   ★「S＝金・A＝銀…」と文章で書いても、実物の色と結び付かない
   　（谷川氏の指摘・2026-08-25）。実際に使っている板をそのまま並べる。
   ★7つを1行に収める。折り返すと段の順（上から下）が読めなくなる。 */
.legend{display:flex;align-items:flex-start;gap:12px;margin:16px 0 0;
  padding:12px 0 0;border-top:1px solid var(--rule-s)}
.legend .lgl{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--muted);padding-top:7px}
.legend .lgs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  flex:1 1 auto;min-width:0}
.lgi{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lgi .chip.tier{display:flex;align-items:center;justify-content:center;
  width:100%;height:30px;padding:0;border-radius:5px;
  font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.02em;
  border-width:1px;border-style:solid}
.lgi i{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
@media (max-width:430px){
  /* 打った機種の欄。15emを確保すると320pxの端末で表が溢れる。
     名前の途中で折らない指定も、この幅では守りきれないので緩める。 */
  td.wrapok,th.wrapok{min-width:0;word-break:normal}
  .ks .k,.names.ks{word-break:normal;overflow-wrap:anywhere}
  /* 機種名そのものが nowrap で包まれている。この幅では折らせる。 */
  .ks .k .nw,.ks .k .sub{white-space:normal}
  /* ★縦積みにするときは align-items を stretch へ戻す。flex-start のままだと
     　子の幅が中身なりに縮み、7つの板が細く潰れる（実測 2026-08-25）。
     　横並び用の align-items は、縦積みでは「幅」の意味に変わる。 */
  .legend{flex-direction:column;gap:7px;align-items:stretch}
  .legend .lgl{padding-top:0}
  .lgi .chip.tier{height:27px;font-size:13.5px}
  .lgi i{font-size:12px}
}
/* ── 折りたたみの説明 ───────────────────────────
   ★長い文章は畳む。畳んだだけでは分かりやすくならないので、開いた先は
   　実在の1人を式に当てはめた形・順位が点になる表・上位度の目盛りを置く。 */
.ex{margin:14px 0 4px;border-top:1px solid var(--rule-s);
  border-bottom:1px solid var(--rule-s)}
.ex summary{list-style:none;cursor:pointer;padding:11px 2px;
  font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.ex summary::-webkit-details-marker{display:none}
.ex summary::before{content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.ex[open] summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
.ex summary:hover{color:var(--ink)}
.ex summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.exb{padding:2px 2px 16px}
.exn{font-size:12.5px;line-height:1.85;color:var(--muted);margin:9px 0 0}
/* 式。3つの札を「＋」「＝」でつなぐ。狭い画面では縦に積む。 */
.fx{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:4px 0 0}
.fx .f{flex:1 1 150px;min-width:0;padding:10px 11px 11px;
  background:var(--panel);border:1px solid var(--rule-s)}
.fx .f i{display:block;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--muted)}
.fx .f b{display:block;font-family:"Anton",sans-serif;font-weight:400;
  font-size:22px;line-height:1.25;margin-top:3px;
  font-variant-numeric:tabular-nums}
.fx .f em{display:block;font-style:normal;font-size:12px;line-height:1.5;
  color:var(--muted);margin-top:4px}
.fx .f.tot{border-color:var(--ink)}
.fx .op{flex:none;align-self:center;font-size:15px;color:var(--muted)}
/* 小さい表 */
.mini{width:auto;margin:7px 0 0;background:var(--panel);
  border:1px solid var(--rule-s);font-size:12.5px;
  border-collapse:separate;border-spacing:0}
/* 単位の表は中身が長いので折り返させる。 */
.mini.units{width:100%;table-layout:fixed}
.mini.units td{white-space:normal;vertical-align:top;line-height:1.6}
/* ★見出しは折らない。「単位」が「単/位」と縦に割れて読めなくなる。 */
.mini.units th{white-space:nowrap;vertical-align:bottom}
.mini.units th:nth-child(1),.mini.units td:nth-child(1){width:6.4em}
.mini.units th:nth-child(2),.mini.units td:nth-child(2){width:3.4em;white-space:nowrap}
.mini.units td:nth-child(1),.mini.units td:nth-child(2){font-weight:700}
.mini th,.mini td{padding:6px 12px;position:static}
.mini th{font-size:11.5px}
/* 上位度の目盛り */
.gauge{margin:12px 0 0}
.gbar{position:relative;height:10px;
  background:linear-gradient(90deg,var(--minus) 0%,var(--rule) 50%,var(--plus) 100%)}
.gbar .gz{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;
  background:var(--ink);opacity:.7}
.gl{display:flex;justify-content:space-between;margin-top:5px;
  font-size:10.5px;color:var(--muted);line-height:1.5}
.gl span{flex:1 1 0;min-width:0}
.gl span.mid{text-align:center}
.gl span.hi{text-align:right}
.gl em{display:block;font-style:normal}
.gl b{display:block;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
@media (max-width:520px){
  /* ★縦に積むときは flex-basis を外す。横並び用の 150px は、縦積みにすると
     　「高さ150px」の意味になり、札が間延びして中身が上に張り付く。 */
  .fx{flex-direction:column;gap:5px;align-items:stretch}
  .fx .f{flex:0 0 auto}
  .fx .op{align-self:flex-start;margin-left:11px}
  .fx .f b{font-size:20px}
  .mini{width:100%}
  .mini th,.mini td{padding:6px 8px}
}
/* ── ティア表の選手（表） ─────────────────────────
   ★カードをやめて表にした（谷川氏の指示・2026-08-25）。34人を上下に
   　比べるには数字の桁位置がそろっている必要がある。
   ★スマホは3列だけ。列を詰めると横スクロールになり、段の帯と並ぶ
   　狭い幅では読めなくなる。残りの数字は名前の下の小さな1行へ回す。 */
/* ★border-collapse:collapse だと、表の外枠と行の区切り線が1本に溶け合い、
   　行の線が外枠の真ん中で終わる。端末の画素に落とすとき半画素ぶんずれて、
   　右の縦線が途切れて見える（谷川氏の指摘・実測で 367.5 と 368.0・2026-08-25）。
   　separate にすると行の線は外枠の内側いっぱいまで引かれ、端がそろう。 */
.ptab{background:var(--panel);border:1px solid var(--rule-s);font-size:14px;
  border-collapse:separate;border-spacing:0}
/* ★段ごとに別の表なので、幅を中身に任せると段をまたいだ瞬間に列がずれる
   （谷川氏の指摘・2026-08-25）。数字を上下で比べられなくなるので、
   　列の幅を決め打ちにして、どの段でも同じ位置に来るようにする。
   ★幅を書かない1列目（選手）が残りを全部もらう。 */
.ptab th:nth-child(2){width:92px}
.ptab th{padding:7px 8px;font-size:12.5px;letter-spacing:.03em;
  font-family:"Barlow Semi Condensed","Zen Kaku Gothic New",sans-serif;
  color:var(--ink-2);position:static}
.ptab td{padding:7px 8px;vertical-align:middle}
.ptab tbody tr:last-child td{border-bottom:0}
.ptab td.who{padding:6px 6px 6px 8px;white-space:normal;overflow:hidden}
.ptab td.who a{display:flex;align-items:center;gap:9px;text-decoration:none;
  color:inherit;font-weight:400}
.ptab td.who a:hover .n{text-decoration:underline}
.ptab td.who picture{float:none;display:block;flex:none}
.ptab td.who img{width:34px;height:34px;object-fit:cover;object-position:top center;
  background:var(--ph);display:block;border-radius:2px}
.ptab .nb{display:block;min-width:0}
.ptab .n{display:block;font-size:15px;font-weight:700;line-height:1.4}
.ptab .n .was{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.ptab .tm{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.ptab .tm .tg{margin-left:6px;font-weight:700;opacity:.85}
@media (max-width:880px){.ptab .tm .tg.c2{display:none}}
/* ★補足はセルの中に入れない。名前の列はスマホで82pxしか無く、
   　中に入れると折り返して読めない（実測・2026-08-25）。表いっぱいを
   　使う下の行に置く。広い画面では列として出るので、この行は隠す。 */
/* ★行の主役は「総合点」ひとつ。大きさの比べやすさはゼロ線の棒に持たせ、
   　数字の色はやめた。段の中はもともと全員が同じ符号なので、緑と赤を
   　重ねても何も区別できず、画面が色で埋まるだけだった。
   ★棒は段の色で描く。1行につき色は1か所だけにする。 */
.ptab tr.subr td{padding:0 10px 9px;border-bottom:1px solid var(--rule);
  white-space:normal}
.ptab .track{display:block;height:9px;margin:0 0 5px}
/* ★ゼロの縦線は必ず見せる。棒だけだと「どこから伸びているか」が
   　分からず、左右どちらへ出ているのかも読めない。 */
.ptab .track::before{top:-3px;bottom:-3px;width:1px;background:var(--zero);
  opacity:.85}
.ptab .track i{top:0;height:9px;background:var(--tc)}
html[data-theme="dark"] .ptab .track i{background:var(--tcd)}
.ptab .brk{display:block;font-size:13px;color:var(--ink-2);line-height:1.65;
  font-variant-numeric:tabular-nums}
.ptab .brk em{font-style:normal;opacity:.75}
.ptab tbody tr:nth-last-child(2) td{border-bottom:0}
.ptab tr:not(.subr) td{border-bottom:0}
.ptab td.sc{font-size:24px;font-weight:400;font-family:"Anton",sans-serif;
  letter-spacing:.01em;color:var(--ink)}
.ptab td.sc.pos,.ptab td.sc.neg,.ptab td.pos,.ptab td.neg{color:var(--ink)}
.ptab td.r{color:var(--ink)}
/* ⚠️ 「1st・2nd・3rd」と入る行だけ10pxほど広くなり、そこが表からはみ出す
   （2026-08-31 実測）。この列だけ折り返しを許して幅を吸収させる。 */
.ptab td.ss{font-family:inherit;font-size:12.5px;color:var(--ink-2);
  white-space:normal;line-height:1.45}
/* 段の帯と並ぶので、表の外枠は段の色に寄せず素のままにしておく。 */
.trow .ptab{margin:0}
.none{color:var(--muted);font-size:13px;margin:12px 2px}
.tc{background:var(--panel);border:1px solid var(--rule-s);padding:9px 10px 10px;
 text-decoration:none;display:block}
a.tc:hover{border-color:var(--ink)}
.tc.p{width:158px}
/* 名前が1行に入るよう、字数に応じて詰める（クラスは build_site.py が付ける）。
   カードの名前欄はスマホで113pxしかなく、詰めないと名前の途中で割れる。 */
.tc.p .nm.s1{font-size:12px;letter-spacing:-.015em}
.tc.p .nm.s2{font-size:11px;letter-spacing:-.025em}
.tc.p .nm.s3{font-size:9.5px;letter-spacing:-.035em;line-height:1.5}
.tc.p .nm .was{display:block;font-size:11.5px;font-weight:400;
  letter-spacing:0;color:var(--muted);line-height:1.5}
.tc.p img{width:40px;height:40px;object-fit:cover;object-position:top center;
 background:var(--ph);float:left;margin:0 8px 0 0}
/* ★カードの中の文字は10.5pxまで落ちていて、本文15pxに対して小さすぎた
   　（2026-08-30 谷川さん指摘）。下限を12pxに上げ、名前とのめりはりを付ける。
   　10px台前半は「読めるが読む気にならない」大きさで、実測で本文の7割だった。 */
.tc .nm{display:block;font-size:15px;font-weight:700;line-height:1.3}
.tc .tm{display:block;font-size:12.5px;color:var(--muted);line-height:1.55}
/* シーズン別の順位。★1シーズン1行の縦並びで、シーズン名と順位を列で揃える。
   横につなぐと折り返し位置が法人ごとに変わり、どこを見ればよいか迷う。 */
.tc .tm .srs{display:block;margin-top:2px}
.tc .tm .sr{display:flex;align-items:baseline;gap:8px;
  white-space:nowrap;line-height:1.75}
.tc .tm .sr em{font-style:normal;font-weight:700;flex:none;width:30px}
.tc .tm .sr b{font-weight:700;color:var(--ink);flex:none;
  width:34px;text-align:right}
.tc .tm .sr i{font-style:normal;opacity:.62}
/* 大きい数字が何なのかを数字の直前に書く。★カードの数字は通算差枚と
   紛らわしいので、単位の説明を別の場所に1度だけ書くやり方では足りない。 */
.tc.p .lab{padding-top:7px;line-height:1.25}
.tc.p .lab + .v{padding-top:1px}
/* シーズン別の差枚。順位と同じ行の右端にそろえる。 */
.tc .tm .sr .d u{text-decoration:none;font-weight:400;font-size:.78em;
  margin-left:1px;opacity:.7}
.tc .tm .sr .d{margin-left:auto;font-weight:700;
  font-variant-numeric:tabular-nums}
.tc .v{display:block;font-family:"Anton",sans-serif;font-size:24px;line-height:1.15;
 clear:both;padding-top:6px;font-variant-numeric:tabular-nums}
.tc .s{display:block;font-size:12px;color:var(--muted);
 font-variant-numeric:tabular-nums}
.tc.t{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.tc.t img{width:46px;height:46px;object-fit:contain;flex:none}
/* ★名前を大きくしたぶん、この列も広げる（2026-08-30）。170pxのままだと
   　「テンガイゴールデンメインズ」が2行に折れて、法人名が読みにくくなる。 */
.tc.t .tn{flex:1;min-width:236px}
/* ★数字の並びは grid で桁に関係なく列を固定する。flex + 右寄せだと
   桁数の違いで見出しの折り返し位置が変わり、行が段違いになる。
   各ますは「見出しが上・数字が下」で、上端を揃える。 */
.tc.t .tvs{display:grid;grid-template-columns:repeat(3,minmax(78px,auto));
 gap:10px 16px;flex:none;align-items:start}
.tc.t .tvs > div{text-align:left}
/* 法人カードの所属選手。★最も稼いだ1人だけだと、残りが何人でどれくらい
   だったのかが見えない。全員を差枚の多い順に並べ、名前を左・数字を右端に
   そろえる。数字の桁位置がそろっていないと多い少ないが読み取れない。 */
/* ★所属選手表は必ずカードの下段に全幅で置く。flexの子として横に
   並ぶと幅が余りもの（実測30px前後）になり、選手名が1文字ずつ縦に
   割れていた（2026-08-26・PC幅で発生）。 */
.tc.t .memblock{flex:0 0 100%;width:100%;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--rule-s)}
/* 所属選手も表にする。名前・通算・1戦平均・実戦数を列でそろえる。 */
.memtab{background:transparent;border:0;font-size:13.5px;margin-top:4px}
.memtab td{padding:4px 0;border-bottom:1px solid var(--rule-s);white-space:nowrap}
.memtab tbody tr:last-child td{border-bottom:0}
.memtab td.who{width:100%;white-space:normal;font-weight:700}
.memtab td.r{padding-left:10px;font-size:13.5px}
.memtab td.av{opacity:.9}
.memtab td.g{color:var(--muted);font-size:12px}
/* ★見出しは9.5pxだった。表の中でいちばん小さく、何の列か読めなかった */
.memtab th{padding:0 0 3px;position:static;font-size:11.5px;letter-spacing:.06em;
  background:transparent;border-bottom:1px solid var(--rule-s)}
.memtab th.r{padding-left:10px}
.tc.t .mem2{list-style:none;margin:3px 0 0;padding:0;
  font-size:13px;line-height:2}
.tc.t .mem2 li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;
  white-space:nowrap;word-break:keep-all}
.tc.t .mem2 li > span{overflow:hidden;text-overflow:ellipsis}
.tc.t .mem2 b{margin-left:auto;flex:none;font-weight:700;
  font-variant-numeric:tabular-nums}
/* 1戦平均は名前の下に1行を分けて置く。通算と横に並べると、狭い画面で
   数字どうしがくっついてどちらの値か読めなくなる。 */
.tc.t .mem2 em{flex:0 0 100%;margin:-4px 0 4px;font-style:normal;
  font-size:12px;line-height:1.5;color:var(--muted);
  font-variant-numeric:tabular-nums}
.tc.t .mem2 em i{font-style:normal;font-weight:700}
.tc.t .tvs .s{margin:0 0 1px;white-space:nowrap}
.tc .kv{display:block;font-family:"Anton",sans-serif;font-size:19px;line-height:1.15;
 font-variant-numeric:tabular-nums}
.tc .kv.sm{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
 font-size:13px;line-height:1.5}
.tc .kv.sm b{font-family:"Anton",sans-serif;font-weight:400;font-size:16px;
 margin-left:3px;font-variant-numeric:tabular-nums}
.tc.t .v{padding-top:0;font-size:22px}
@media (min-width:881px){
  /* 1列目にも必ず幅を持たせる。table-layout:fixed では幅未指定の列に
     「残り」が回るだけなので、数字列の合計が表幅に届くと0pxに潰れ、
     td.who の overflow:hidden で写真も名前も消える（実際に消えていた）。
     数字列の合計は表の実幅810pxに対して588pxに収めてある。 */
  /* 横幅があるときは4つ横一列。 */
  .tc.t .tvs{grid-template-columns:repeat(3,minmax(86px,auto)) minmax(148px,auto)}
}

/* 補助の列は1140px未満では隠す。列が入りきらないと名前の列だけが
   潰れて写真も名前も消えるため（実測で確認）。 */
@media (max-width:1139px){.ptab .c2{display:none}}

/* ★ここから下はティア表の表組み。段ラベルと表を横に並べると870px要る。
   画面1120px未満では欄の幅がそこまで届かず、必ずはみ出す。 */
@media (min-width:1140px){
  .ptab{table-layout:fixed}
  .ptab tr.subr{display:none}
  .ptab tr td{border-bottom:1px solid var(--rule)}
  .ptab td,.ptab th{padding-left:7px;padding-right:7px}
  .ptab th:nth-child(1){width:180px}
  .ptab th:nth-child(2){width:78px}
  .ptab th:nth-child(3){width:80px}
  .ptab th:nth-child(4){width:58px}
  .ptab th:nth-child(5){width:60px}
  .ptab th:nth-child(6){width:40px}
  .ptab th:nth-child(7){width:48px}
  .ptab th:nth-child(8){width:76px}
  .ptab th:nth-child(9){width:48px}
  .ptab th:nth-child(10){width:76px}
}

/* 見に来た数。控えめに、フッターの中に1行だけ。 */
.cnt1{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.9}
.cnt1 b{font-family:"Anton",sans-serif;font-weight:400;font-size:17px;
  color:var(--ink);margin:0 3px;font-variant-numeric:tabular-nums}
/* よく見られているページ。読む人の道しるべとして置く。 */
.pop{margin:22px 0 0}
.pop ul{list-style:none;margin:6px 0 0;padding:0}
.pop li{border-bottom:1px solid var(--rule-s)}
.pop li:last-child{border-bottom:0}
/* 行ごと押せる面にする(2026-08-28)。
   ★右端の「→」は 2026-08-28 に谷川氏の指示で外した（うるさい）。
   ★クラス名は popl。pl は選手リンクとホール名で先に使われている。 */
.pop .popl{display:flex;align-items:baseline;gap:10px;font-size:13.5px;
  padding:7px 2px 7px 0;color:inherit;text-decoration:none;border-bottom:0;
  transition:background .13s ease,padding-left .13s ease}
.pop a.popl:hover{background:var(--panel);padding-left:7px}
.pop a.popl span{border-bottom:1px solid transparent}
.pop a.popl:hover span{border-bottom-color:var(--rule)}
.pop li b{margin-left:auto;font-family:"Anton",sans-serif;font-weight:400;
  font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pop .nt{font-size:11.5px;color:var(--muted);margin:7px 0 0}

/* ============================================ 三段組（本文と左右の袖） */
/* ★ 2026-08-31。左に書いている人のカード、右に新着とよく見られているページ。
   ⚠️ HTMLの並びは 本文 → 右袖 → 左袖。狭い画面ではこの順に上から流れるので、
      足元に近い位置に出る。左右へ振り分けるのは広い画面だけで、
      並べ替えは grid の座標で行う（HTMLの順番は変えない）。 */
/* ⚠️ ここで section をまとめて余白を上書きしない。書いている人のカードも
   section なので、内側の余白まで消えて枠線と文字が重なる
   （2026-08-31 に実際そうなった）。新着と人気の枠だけを狙う。 */
.side>.pop{padding:0 22px}
.side-l>.xcard{margin:0 22px}
.side-l{margin:26px 0 0}
.side .pop{margin:26px 0 0}
/* ★ 幅の判断を「画面の幅」から「本文の列の幅」へ移す（2026-08-31）。
   袖が付くと、画面が広くても本文の列は狭い。画面の幅で列を出し入れすると、
   狭い列に10列の表が出て袖の上へ重なる（実際にそうなった）。
   ここでは列の幅そのものを見て畳む。 */
.shell>.mainc{container-type:inline-size;container-name:main}
/* 見出しの柱（左のラベル）は、列が1060pxを切ったら上へ回す。
   柱に202px取られるとティア表が入りきらない。 */
@container main (max-width:1100px){
  .shell>.mainc .rail{grid-template-columns:1fr;gap:12px}
  .shell>.mainc .lab{position:static;flex-direction:row;align-items:baseline;
    gap:10px;padding-top:0}
}
/* 段の帯は、列が900pxを切ったら縦の柱から横の帯へ。
   柱に102px取られると、ティア表がその列に入りきらない。
   ⚠️ 幅390pxのときに使っている作りをそのまま流用している。 */
@container main (max-width:900px){
  .shell>.mainc .trow{grid-template-columns:1fr;gap:8px}
  .shell>.mainc .tlab{flex-direction:row;align-items:baseline;
    justify-content:flex-start;gap:12px;padding:9px 14px 11px}
  .shell>.mainc .tlab .R{display:flex;align-items:baseline;gap:10px;
    margin-top:0;margin-left:auto;text-align:right}
  .shell>.mainc .tlab .L{font-size:30px}
  .shell>.mainc .tlab .R{font-size:11.5px}
}
/* 最後の手当て。ここまで狭いと表そのものが入らないので、副の列を落とす。 */
@container main (max-width:740px){
  .shell>.mainc .ptab .c2{display:none}
}
/* 2段組み。画面がここまで狭いときは左の袖を右へ回し、本文の幅を守る。
   ⚠️ 本文の列を850pxより狭くしない。狭くすると表が入りきらず袖へ重なる。 */
@media(min-width:1240px){
  .shell{max-width:1620px;margin:0 auto;padding:0 20px;
    display:grid;grid-template-columns:minmax(0,1fr) 256px;
    column-gap:20px;align-items:start}
  .shell>.mainc{grid-area:1/1/3/2}
  /* ★右袖も左袖と同じく貼り付かせる（谷川さん指示・2026-08-31）。
     ⚠️ 中身が画面より高くなることがあるので、高さの上限と
        内側のスクロールを付ける。付けないと下が読めなくなる。 */
  .shell>.side-r{grid-area:1/2/2/3;padding-top:52px;
    position:sticky;top:74px;max-height:calc(100vh - 96px);
    overflow-y:auto;overscroll-behavior:contain;
    /* ⚠️ 送り棒（スクロールバー）は出さない。袖の中に灰色の棒が立って
       中身に重なる（谷川さん指摘・2026-08-31）。送れることは残したまま
       棒だけ消す。お手本の saz.wiki も棒は出していない。 */
    scrollbar-width:none;-ms-overflow-style:none}
  .shell>.side-r::-webkit-scrollbar{width:0;height:0}
  .shell>.side-l{grid-area:2/2/3/3;margin:26px 0 0}
  .shell>.side>.pop{padding:0}
  .shell>.side-l>.xcard{margin:0}
  .shell>.side .pop:first-child{margin-top:0}
  .shell>.mainc .wrap{max-width:none;padding:0}
}
/* 3段組み。左に書いている人、右に新着とよく見られているページ。 */
@media(min-width:1360px){
  .shell{grid-template-columns:208px minmax(0,1fr) 256px;column-gap:20px}
  .shell>.mainc{grid-area:1/2/2/3}
  .shell>.side-r{grid-area:1/3/2/4}
  /* 左袖は短いので貼り付かせる。右袖は長くなるので流れるままにする */
  .shell>.side-l{grid-area:1/1/2/2;position:sticky;top:74px;
    margin:0;padding-top:52px}
}
/* 新着の1行。日付・題・ひとこと */
.recl{display:flex;align-items:baseline;gap:10px;padding:8px 2px 8px 0;
  color:inherit;text-decoration:none;border-bottom:0;
  transition:background .13s ease,padding-left .13s ease}
.pop a.recl:hover{background:var(--panel);padding-left:7px}
.recl time{flex:none;width:40px;font-family:"Roboto Mono",monospace;
  font-size:11.5px;color:var(--muted)}
.recl span{display:block;min-width:0}
.pop li .recl b{margin-left:0;display:block;font-family:inherit;
  font-size:13.5px;font-weight:700;line-height:1.55;color:var(--ink)}
.recl em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
  margin-top:2px;line-height:1.5}

/* ==================================================== 書いている人のカード */
/* ⚠️ Xの公式ウィジェットは使わない。外のJavaScriptを1本読み込むことになり、
   表示が遅くなるうえ、見た人の情報が向こうへ渡る。ただのリンクなら起きない。 */
.xcard{border:1px solid var(--rule-s);background:var(--panel);
  padding:16px 17px}
.xcard .xh{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);
  letter-spacing:.02em}
.xcard .xh::before{content:"";display:inline-block;width:4px;height:12px;
  background:var(--red);margin-right:9px;vertical-align:-1px}
.xcard .xb{margin:9px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink-2)}
/* ⚠️ 袖では幅が狭く、名前・ID・「フォロー」の札が1行に並ばない。
   入らないときは札を次の行へ落とす（row-gap は折り返したときだけ効く）。 */
.xcard .xf+.xf{margin-top:8px}
.xcard .xft i{display:block;font-style:normal;font-size:11.5px;
  color:var(--muted);margin-top:2px;line-height:1.6}
.xcard .xf{display:flex;align-items:center;gap:11px;flex-wrap:wrap;row-gap:8px;
  margin-top:13px;
  padding:9px 11px;border:1px solid var(--rule-s);background:var(--paper);
  text-decoration:none;color:inherit;
  transition:border-color .13s ease,background .13s ease}
.xcard .xf:hover{border-color:var(--ink-2)}
.xcard .xfm{flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--panel);font-weight:700;font-size:15px}
.xcard .xft{display:block;min-width:0;line-height:1.45;overflow:hidden}
/* ⚠️ 袖は幅が狭い。折り返すと名前が2行に割れる（2026-08-31）。
   入らないときは三点で切る。札は row-gap で次の行へ落ちる。 */
.xcard .xft b,.xcard .xft em{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcard .xft b{display:block;font-size:13px;font-weight:700}
.xcard .xft em{display:block;font-style:normal;font-size:11.5px;
  color:var(--muted);font-family:"Roboto Mono",monospace}
.xcard .xfc{margin-left:auto;flex:none;padding:5px 13px;border-radius:99px;
  background:var(--ink);color:var(--panel);font-size:12px;font-weight:700}
.xcard .xn{margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.75}
.xcard .xl{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:5px 14px;
  font-size:11.5px;line-height:1.7}
.xcard .xl a{color:var(--muted);border-bottom:1px solid var(--rule-s);
  text-decoration:none}
.xcard .xl a:hover{color:var(--ink);border-bottom-color:var(--ink-2)}
/* 日程一覧の画像を落とす案内。押す面積を大きく取る。 */
.dlimg{margin:16px 0 6px;display:flex;flex-direction:column;gap:8px}
.dlimg a{display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--panel);border:1px solid var(--rule-s);padding:14px 16px;
  color:inherit}
.dlimg a:hover{border-color:var(--ink-2)}
.dlimg .i{flex:none;font-size:12px;font-weight:700;letter-spacing:.08em;
  border:1px solid var(--rule);padding:6px 9px;color:var(--muted)}
.dlimg .t{display:block;min-width:0}
.dlimg .t b{display:block;font-size:14.5px;line-height:1.5}
.dlimg .t em{display:block;font-style:normal;font-size:12px;color:var(--muted);
  margin-top:3px;line-height:1.6}
/* 次の収録。日程表で最初に知りたいのはここなので、上に大きく置く。 */
.nxs{display:flex;flex-direction:column;gap:9px;margin:6px 0 4px}
.nx{background:var(--panel);border:1px solid var(--rule-s);padding:13px 15px 14px}
.nx.top{border-color:var(--ink-2);border-left:3px solid var(--plus)}
.nx .hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nx .w{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.nx.top .w{color:var(--plus)}
.nx .k{font-size:12px;color:var(--muted)}
.nx .dt{font-family:"Anton",sans-serif;font-size:22px;line-height:1.2;
  margin-top:7px;font-variant-numeric:tabular-nums}
.nx.top .dt{font-size:28px}
.nx .dt i{font-style:normal;font-size:14px;color:var(--muted);margin-left:6px}
.nx .pl{font-size:17px;font-weight:700;margin-top:5px;line-height:1.4}
.nx.top .pl{font-size:20px}
.nx .mb{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.7}
footer{border-top:1px solid var(--rule-s);padding:34px 0 60px;
  color:var(--muted);font-size:12.5px;line-height:1.9}
footer p{margin:0 0 6px;max-width:52em}
footer a{color:var(--ink-2);text-underline-offset:3px}
.crumb{font-size:12.5px;color:var(--muted);padding-top:22px}
.crumb a{color:var(--ink-2);text-underline-offset:3px}

@media (max-width:880px){
  .rail{grid-template-columns:1fr;gap:12px}
  .lab{position:static;flex-direction:row;align-items:baseline;gap:10px;
    padding-top:0}
  .sec{padding:38px 0}
  .band{padding:40px 0 34px}
  .two{grid-template-columns:1fr;gap:8px}
  .lab.photo img{width:88px;aspect-ratio:1/1}
  .bar{grid-template-columns:20px 1fr 88px;gap:4px 9px;
    grid-template-areas:"rk nm v" "tr tr tr"}
  .bar .rk{grid-area:rk}.bar .nm{grid-area:nm}.bar .v{grid-area:v}
  .bar .track{grid-area:tr;margin-top:2px}
  .bars .gap{grid-template-columns:20px 1fr 88px;gap:9px}
  .axis0{display:block;text-align:center}
  .axis0 .mid{display:block}
  .bar .nm{white-space:normal}
  .bar .v{font-size:17px}
  /* ★段の帯を縦の柱から横の帯へ。柱のままだと幅390pxのうち76pxを
     　占めて、本文が286pxしか使えず数字が詰まって読めなかった。 */
  .trow{grid-template-columns:1fr;gap:8px}
  .tlab{flex-direction:row;align-items:baseline;justify-content:flex-start;
    gap:12px;padding:9px 14px 11px}
  .tlab .R{display:flex;align-items:baseline;gap:10px;margin-top:0;
    margin-left:auto;text-align:right}
  .tlab .L{font-size:30px}
  .tlab .R{font-size:11.5px}
  .tc.p{width:calc(50% - 4px);padding:8px 8px 9px}
  /* ★スマホでは写真を回り込ませない。写真の右だと名前に65pxしか残らず、
     「諸積ゲンズブール」のような名前が途中で割れる。写真の下へ回して
     カードの幅いっぱいを名前に使わせる。
     ★★float は img ではなく picture に掛かっている（.tc.p picture）。
     　img 側だけ float:none にしても picture が回り込んだままで、名前欄が
     　28pxしか残らず4文字の名前まで割れていた（幅320pxで54件・実測で確定
     　2026-08-25）。picture 側を必ずいっしょに解除すること。 */
  .tc.p picture{float:none;display:block;margin:0 0 6px}
  .tc.p img{float:none;display:block;width:36px;height:36px;margin:0 0 6px}
  .tc .nm{font-size:14px}
  .tc .v{font-size:21px}
  .tc.t{flex-wrap:wrap;gap:10px}
  /* ★狭い画面は2列×2段にする（2026-08-30）。3列のままだと4つ目の
     　「延べ実戦」だけが1段を独り占めして、右側が大きく空く。 */
  .tc.t .tvs{width:100%;justify-content:space-between;gap:8px;text-align:left;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc.t .tvs > div,.tc.t .tvs > div:last-child{min-width:0}
  .cals{grid-template-columns:1fr}
  .plist{grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr))}
  .pcard{padding:0 0 11px}
  .pcard .n{font-size:12px;margin:8px 8px 0}
  .pcard .t{margin:2px 8px 0}
  .pcard .kv{margin:6px 8px 0}
  .pcard .kv i{font-size:11.5px}
  .pcard .kv b{font-size:16px}
  .pcard .kv.big b{font-size:21px}
  .pcard .kxs{margin:7px 8px 0;font-size:11.5px}
  .stat{padding:13px 14px 15px}
  .stat .v{font-size:26px}
  .stat .v.sm{font-size:17px}
}
@media (max-width:880px){
  /* ★スマホは「ロゴの行」と「タブの行」の2段。切り替えボタンは
     　ロゴの行の右端へ置く（そのままだと3段目に落ちる）。 */
  .top .wrap{display:grid;grid-template-columns:1fr auto;
    grid-template-rows:auto auto;height:auto;padding:0;align-items:center}
  .mark{grid-row:1;grid-column:1;height:42px;padding:0 16px;gap:6px}
  .top .theme{grid-row:1;grid-column:2;margin:0 12px 0 0}
  .nav{grid-row:2;grid-column:1/-1}
  .nav{margin:0;display:grid;grid-template-columns:repeat(7,1fr);
    overflow:visible;mask-image:none;gap:0;
    border-top:1px solid var(--rule-s);background:var(--panel)}
  .nav a{padding:0 1px;height:42px;display:flex;align-items:center;
    justify-content:center;text-align:center;border-bottom:0;
    border-left:1px solid var(--rule-s);
    font-size:clamp(10.5px,2.9vw,13px);letter-spacing:-.02em;
    font-weight:600;line-height:1.15}
  .nav a:first-child{border-left:0}
  .nav a:hover{border-bottom:0}
  .nav a[aria-current]{background:var(--ink);color:var(--panel);font-weight:700}
  .nav .wide{display:none}
  .nav .narrow{display:inline}
  .lab{top:auto}
}
@media (max-width:880px){
  /* ★ティア表の選手は3列だけ。残りは名前の下の1行へ回す。 */
  .ptab{font-size:12px}
  .ptab td{padding:6px 7px}
  .ptab td.sc{font-size:14px}
  .memtab td.g,.memtab th.g{display:none}
}
@media (max-width:430px){
  .mark .sub{display:none}
  /* ★スマホでは選手カードを1列の縦並びにする（谷川氏の指示・2026-08-25）。
     2列だと1枚が96pxしかなく、名前も数字も窮屈だった。
     幅がひらくので写真は左へ戻し、右に名前と数字を置く横長の札にする。
     ★431〜880pxは2列のまま。1列にするとタブレットで札が間延びする。 */
}
@media (prefers-reduced-motion:no-preference){
  .zeroline .tick{animation:grow .55s cubic-bezier(.2,.85,.3,1) backwards}
}
@keyframes grow{from{transform:scaleY(.02)}to{transform:scaleY(1)}}
@media print{.top,.nav{display:none}body{background:#fff}}