/* ===========================================================
   FPL侍 データサイト スタイル
   スマホ最優先（縦画面で表が見やすいこと）でデザインしています
   =========================================================== */

* {
  box-sizing: border-box;
}

:root {
  --pl-purple: #37003c;
  --pl-green: #00ff87;
  --pl-cyan: #04f5ff;
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #1b1b1f;
  --muted: #6b6b73;
  --border: #e3e3e8;
  --easy: #1aa260;
  --normal: #c8860a;
  --hard: #d23c3c;
  --topbar-h: 50px;   /* トップバーの高さ（JSで実測して上書き）。見出し固定の基準 */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 共通の色（ゴールド） ---------- */
:root { --gold: #d4af37; --gold-soft: #e9d9b0; }
.updated {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: #cbb8d2;
}

/* SNSリンク（ヘッダー） */
.sns-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
/* 白文字＋白14%の背景は、濃いヘッダー用の配色。明るい本文背景(#f5f5f7)の上では
   実質「白地に白」(1.08:1)で見えなかったため、ブランドの紫に変更した(13.3:1)。
   44pxはタップ目標の推奨サイズ。 */
.sns-links .sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--pl-purple);
  background: rgba(55, 0, 60, 0.08);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.sns-links .sns:active { transform: scale(0.92); }
/* ホバーで地色が濃くなるので、文字色も白へ返す（紫のままだと読めなくなる） */
.sns-links .sns.x:hover { background: #000; color: #fff; }
.sns-links .sns.yt:hover { background: #ff0000; color: #fff; }

/* ルール解説ページ */
.rules-doc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 16px 16px;
  line-height: 1.7;
}
.rules-doc h3 {
  font-size: 1.02rem;
  color: var(--pl-purple);
  border-left: 4px solid var(--pl-green);
  padding-left: 8px;
  margin: 44px 0 8px;   /* セクション間は約1行分の余白を追加 */
}
.rules-doc h3:first-child { margin-top: 16px; }  /* 先頭（FPLとは？）は詰める */
.rules-doc p { margin: 6px 0; font-size: 0.9rem; }
.rules-doc ul { margin: 6px 0; padding-left: 1.3em; }
.rules-doc ol { margin: 6px 0; padding-left: 1.5em; }
.rules-doc li { font-size: 0.9rem; margin: 3px 0; }
/* ミニリーグの招待コード */
.rules-code {
  background: #f3ecf5;
  border: 1px solid #ddc9e2;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pl-purple);
  line-height: 1.6;
}
.rules-code .rules-sub { display: block; font-weight: 500; margin-top: 2px; }

/* 目次（ルール解説の冒頭。タップで各セクションへ） */
.rules-toc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px 14px;
  margin: 0 0 14px;
}
.rules-toc .toc-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px;
}
.rules-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rules-toc li {
  margin: 10px 0;   /* 項目ごとの余白 */
}
.rules-toc li:first-child { margin-top: 4px; }
.rules-toc li:last-child { margin-bottom: 0; }
.rules-toc a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pl-purple);
  text-decoration: none;
}
.rules-toc a:hover { text-decoration: underline; }
/* 目次から飛んだとき、固定ヘッダーに見出しが隠れないように */
.rules-doc h3 { scroll-margin-top: 110px; }

/* セクション末の誘導ボタン（データタブへ） */
.rules-cta {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  color: var(--pl-purple);
  background: #f6f2f8;
  border: 1px solid var(--pl-purple);
  border-radius: 8px;
  cursor: pointer;
}
.rules-cta:hover { background: #efe9f1; }
.rules-cta:active { opacity: 0.85; }

/* よくある質問（タップで開閉） */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfafc;
  margin: 8px 0;
  padding: 0 12px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pl-purple);
  padding: 10px 0;
}
.faq-item p { margin: 0 0 10px; }

/* 見出し横の「▶ 動画 0:46〜」リンク（該当タイムスタンプへ） */
.rules-time {
  font-size: 0.72rem;
  font-weight: 600;
  color: #ff0000;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
}
.rules-time:hover { text-decoration: underline; }
.rules-doc b { color: var(--pl-purple); }
.rules-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.85rem;
}
.rules-table th, .rules-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: center;
}
.rules-table th { background: #efe9f1; color: var(--pl-purple); }
.rules-table td:first-child { text-align: left; }
.rules-sub { font-size: 0.82rem; color: var(--muted); }
.rules-foot {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

/* ---------- トップバー（タイトル＋メニュー横並び） ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  background: var(--pl-purple);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 0;
  flex: 0 0 auto;
}
/* <picture> は WebP と PNG を出し分けるためだけの入れ物。レイアウト上は無かったことにして、
   中の <img> がそのまま flex の子になるようにする。box を作らせると行ボックスのぶん
   数px高くなり、--topbar-h（表の固定見出しの基準）がずれる。 */
picture { display: contents; }

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  object-fit: cover;
  background: #fff;
}
.brand-title {
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tabs {
  display: flex;
  flex: 1 1 auto;
  overflow-x: auto;
}
.tab {
  flex: 1 0 auto;
  text-decoration: none;   /* ルールタブは <a>（/rules/ へのリンク）なので下線を消す */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 10px;
  border: none;
  background: transparent;
  color: #cbb8d2;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab.is-active {
  color: #fff;
  border-bottom-color: var(--pl-green);
}
/* タブのアイコン（濃いグレー素材を白く反転して表示） */
.tab-ic {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  flex: 0 0 auto;
}
.tab.is-active .tab-ic { opacity: 1; }
/* スマホ：タイトルを1段目、メニューを2段目に */
@media (max-width: 700px) {
  .topbar {
    gap: 0;
    padding: 0;
  }
  .brand {
    flex: 1 1 100%;
    justify-content: center;
    padding: 10px 0;
  }
  .tabs {
    flex: 1 1 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overflow-x: visible;   /* 6タブを等分して収めるので横スクロール不要 */
  }
  /* 各タブを「アイコン上・文字下」の2段にして横幅を詰め、全タブを画面内に収める */
  .tab {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px 5px;
    font-size: 0.66rem;
    letter-spacing: -0.02em;
  }
  .tab-ic {
    width: 20px;
    height: 20px;
  }
}

/* ---------- ホーム（プロフィール／リンク集） ---------- */
/* .profile はホームタブ全体（h1・説明文・目次・カード・プロフィール・YouTube）を
   包んでいる。プロフィールカードだけだった頃の名残で max-width:480px が付いていたが、
   それだとホームだけ他タブ(690px)より狭くなるので外した。 */
.profile {
  margin: 0 auto;
  text-align: center;
}
.profile-logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  object-fit: cover;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.profile-name {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 12px 0 4px;
  letter-spacing: 0.04em;
}
.profile-tag {
  font-size: 0.9rem;
  color: var(--pl-purple);
  font-weight: 700;
  margin: 0 0 10px;
}
.profile-bio {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 18px;
}
.sns-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 20px;
}
.sns-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pl-purple);
  color: #fff;
  transition: transform 0.15s, opacity 0.15s;
}
.sns-links a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
.sns-links svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.linkcard {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s;
}
.linkcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.lc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex: 0 0 auto;
  color: #fff;
}
.lc-ic svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.lc-ic.yt {
  background: #ff0000;
}
.lc-ic.x {
  background: #000;
}
.lc-ic.data {
  background: var(--pl-purple);
}
/* 質問箱（マシュマロ）＝ピンクの角丸に白いマシュマロ */
.lc-ic.msmr {
  background: #f56a79;
}
.lc-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lc-title {
  font-weight: 700;
  font-size: 0.92rem;
}
.lc-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
/* ホーム先頭の見出し。ページの1行目として初見の人が最初に読む場所なので、
   区切りラベル(.profile-section)より強く出す。左揃えなのは、下のカードが
   左揃えで並ぶため（中央揃えだとカード群と軸がずれて浮く）。 */
/* 各タブの見出し(.panel h2)と同じ見え方に揃える。
   ホームの1行目だけ紫にすると、他タブの見出しと書式が食い違って浮くため。
   サイズ・色・余白すべて .panel h2（1.15rem / 既定の文字色 / 4px 0 6px）と同一。
   下線は引かない。直下の「目次」(.profile-section)が点線で区切るので、
   ここにも線を引くと紫のトップバーと合わせて横線が3本重なる。 */
/* ホームの説明文。.profile が text-align:center なので、
   h1・カードと同じ左揃えに戻す（他タブの .note は親が中央揃えでないため既定で左）。 */
#panel-home .note { text-align: left; }

.home-lead {
  text-align: left;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 4px 0 6px;
}
/* 運営者ブロックはデータ導線より下なので、寸法も一段落とす。
   ここを大きいままにすると h1 より目立ち、主従が逆転する
   （元は名前1.6rem・ロゴ110pxで、h1より大きかった）。 */
/* 上に「プロフィール」の区切り(.profile-section: margin 22px 0 10px)が入るので、
   ロゴ側で改めて上余白は取らない。取ると区切りとの間が開きすぎる。 */
.profile-logo { width: 46px; height: 46px; border-width: 2px; margin-top: 2px; }
.profile-name { font-size: 0.98rem; margin: 6px 0 2px; }
.profile-tag  { font-size: 0.74rem; margin-bottom: 5px; }
.profile-bio  { font-size: 0.74rem; }
.profile-section {
  text-align: left;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.nav-card .lc-ic.data {
  font-size: 1.2rem;
  font-weight: 800;
}
/* ホームのカード内アイコン（濃いグレー素材を白く反転して紫の角丸に乗せる） */
.lc-ic-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ---------- ホームのYouTube欄 ---------- */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 6px;
}
.yt-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}
.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-card:hover .yt-thumb img { opacity: 0.9; }
.yt-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--pl-green);
  color: var(--pl-purple);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 27px;
  background: rgba(255, 0, 0, 0.92);
  border-radius: 6px;
}
.yt-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.yt-title {
  font-size: 0.72rem;
  line-height: 1.3;
  margin-top: 5px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- ホームのYouTube欄（横動画カード） ---------- */
.yt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yt-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.yt-thumb-h {
  position: relative;
  flex: 0 0 45%;
  max-width: 180px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.yt-thumb-h img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-card-h:hover .yt-thumb-h img { opacity: 0.9; }
.yt-title-h {
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 本文 ---------- */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}
.panel {
  display: none;
}
.panel.is-active {
  display: block;
}
.panel h2,
.panel h1.rules-title {   /* /rules/ は独立ページなので見出しが h1。見た目は h2 と同じ */
  font-size: 1.15rem;
  margin: 4px 0 6px;
}

/* /rules/ 末尾からトップへ戻る導線 */
.rules-back {
  margin: 24px 0 8px;
  font-size: 0.9rem;
}
.note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 12px;
}
/* 説明文が空のときは余白ごと消す（表を上に詰める） */
.note:empty { display: none; }

/* ---------- サブタブ（選手ランキングの中の切り替え） ---------- */
.subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.subtab {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.subtab.is-active {
  background: var(--pl-purple);
  color: #fff;
  border-color: var(--pl-purple);
}

/* サブタブが多いとき横スクロールできるように */
.subtabs.scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subtabs.scrollable .subtab {
  flex: 0 0 auto;
}

/* ⚙列の表示・並び替えの下の余白を、上（サブタブとの間＝12px）と同じにする */
#col-manager { margin-bottom: 12px; }

/* 「直近」タブ内の期間切替（1/3/5/10試合）のセグメントボタン */
.recent-seg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.recent-seg-l {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-right: 2px;
}
.recent-seg button {
  flex: 1 1 0;
  min-width: 56px;
  padding: 7px 4px;
  /* タップ前：全試合・直近などのサブタブと同じ（白背景＋グレー文字） */
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.recent-seg button.is-on {
  /* タップ後：背景は総合ポイントと同じ薄紫、文字はサブタブ選択時と同じ白 */
  background: #57215c;
  border-color: #57215c;
  color: #fff;
}

/* ---------- 高機能テーブル（選手・全試合） ---------- */
.data-table-wrap {
  overflow: auto;              /* 列が多いので横スクロール＋縦スクロール */
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  /* 枠内を縦スクロールにして、見出し行を枠の上端に固定する */
  max-height: calc(100vh - var(--topbar-h) - 8px);
  /* dvh＝アドレスバーを除いた実際に見えている高さ（横画面で特に重要。非対応ブラウザは上のvhが残る） */
  max-height: calc(100dvh - var(--topbar-h) - 8px);
  /* 枠ごとトップバー直下に貼り付ける。こうしないとページを下までスクロールしたとき、
     枠が画面上へ抜けて見出し行だけメニューの裏に隠れてしまう（横画面で顕著）。
     stickyが動くための「余地」は JS の syncTableStickyRoom() が親(.fullbleed)に作る */
  position: sticky;
  top: var(--topbar-h);
}
table.rich {
  font-size: 0.8rem;
  /* 幅は中身ぴったり。列を減らすと表全体が縮む（各列は引き伸ばさない）。
     はみ出す分は横スクロール、収まるときは左寄せで自然な幅になる */
  width: max-content;
  min-width: 0;
  margin-inline: auto;   /* 列が少なく画面に収まるときは中央寄せ（広いときは左端＋横スクロール） */
  /* 固定列(position:sticky)を効かせるため collapse/overflow を上書き */
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}
table.rich th,
table.rich td {
  white-space: nowrap;
  padding: 8px 8px;
}
/* 数値列の最低幅（見出し＋矢印スペースが収まる幅を確保。固定列はインライン指定が優先） */
table.rich th.num, table.rich td.num { min-width: 46px; }
/* 並べ替えできる見出し（左寄せにして、矢印スペースを右に常時確保。列幅が動かない） */
table.rich th.sortable {
  cursor: pointer;
  user-select: none;
  text-align: left;
}
table.rich th.sortable:hover {
  background: #e2d6e6;
}
/* 見出しはキーボードでも並び替えできる（tabindex=0 + Enter/Space）。
   どこにフォーカスがあるか分かるように枠を出す。 */
table.rich th.sortable:focus-visible {
  outline: 2px solid var(--pl-purple);
  outline-offset: -2px;
}
.arr {
  display: inline-block;
  width: 12px;           /* 昇順↑/降順↓の有無に関わらず常にこの幅を確保 */
  margin-left: 3px;
  text-align: left;
  font-weight: 700;
}
/* 矢印は淡い紫の見出し(#efe9f1)の上に出る。--pl-green(#00ff87) はその上ではコントラスト
   1.12:1 で、どの列をどちら向きに並べているか判別できなかったため濃い緑に変更した。 */
.arr-desc { color: #49b605; }           /* 大きい順↓＝緑 */
.arr-asc { color: var(--hard); }        /* 小さい順↑＝赤 */
/* 見出し行（1行目）は枠の上端に固定。フィルタ行(.filter-row td)は固定しない */
table.rich thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 4;
}
/* 固定列（コストまで左に固定）。位置と幅はJSが指定。ここでは背景と重なり順 */
table.rich th.frz { background: #efe9f1; z-index: 3; }
/* 見出し1行目かつ固定列＝左上の角。縦横どちらにも固定するので最前面 */
table.rich thead tr:first-child th.frz { z-index: 6; }
table.rich tbody td.frz { background: var(--card); z-index: 2; }
table.rich tbody tr:nth-child(even) td.frz { background: #faf8fb; }
table.rich .filter-row td.frz { background: #f4eff6; }
table.rich td.frz,
table.rich th.frz { box-shadow: 1px 0 0 var(--border); }   /* 固定列の右に区切り線 */

.col-photo { text-align: center; }
.player-photo {
  width: 34px;
  height: 43px;
  object-fit: cover;
  border-radius: 4px;
  background: #e8e8ec;
  display: inline-block;
}
.col-name { overflow: hidden; }
.col-name .name,
.col-name .sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 表をページ全体の幅に広げる（中央寄せのmainから外に出す） */
.fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.fullbleed .data-table-wrap { border-radius: 0; }

/* 列の表示・並び替えパネル（動画用） */
details.col-manager > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pl-purple);
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.col-manager .cm-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
  padding: 8px 12px;
}
.cm-title {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  margin: 4px 0 6px;
}
.coltoggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  margin: 3px 10px 3px 0;
}
.colitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #f0eef2;
  background: var(--card);
  /* 長押しでつかむので、選択・長押しメニューは出さない */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* ⠿ グリップ（ここは長押し不要ですぐつかめる） */
.cm-grip {
  color: #767080;   /* #b9b2bd は白地で2.07:1しかなく、つまみが見えなかった */
  font-size: 1rem;
  padding: 2px 8px 2px 2px;
  cursor: grab;
  touch-action: none;
}
.colitem .coltoggle { flex: 1 1 auto; }
/* つかんでいる列 */
.colitem.is-drag {
  background: #f3e9f6;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  opacity: 0.95;
}
.colitem.is-drag .cm-grip { cursor: grabbing; }
/* ドラッグ中はリスト内のスクロールを止める */
.cm-dragging { touch-action: none; }
.colmove button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 5px;
  padding: 2px 9px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 0.9rem;
}
.colmove button:disabled { opacity: 0.3; cursor: default; }
.cm-freeze {
  width: 100%;
  max-width: 280px;
  padding: 7px 10px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.cm-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 4px;
}
.cm-reset {
  padding: 6px 14px;
  border: 1px solid var(--pl-purple);
  background: #fff;
  color: var(--pl-purple);
  border-radius: 6px;
  cursor: pointer;
}
/* データ列の「全て選択」は先頭に置き、下に区切りを入れて一覧と分ける */
.cm-all {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0eef2;
  width: 100%;
  font-weight: 700;
}

/* フィルタ行 */
.filter-row td.filter-cell {
  background: #f4eff6;
  padding: 4px 6px;
}
.filter-row .fnum {
  width: 46px;
  padding: 3px 4px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  display: block;
  margin: 1px 0;
}
.filter-row #f-name {
  width: 100px;
  padding: 4px 6px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 5px;
}
/* チーム・POSの絞り込みドロップダウン：列幅(46px)に収める・統一 */
.filter-row td.col-team,
.filter-row td.col-position { padding: 4px 2px; }
.filter-row .colsel {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 2px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  text-align: center;
}
/* チーム／POSの複数選択ボタン（選択中は色付き） */
.filter-row .fsel {
  background: #fff;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-row .fsel.is-on {
  background: var(--pl-purple);
  border-color: var(--pl-purple);
  color: #fff;
  font-weight: 700;
}
/* チェックボックス一覧（body直下に出すので表の枠に隠れない） */
.fsel-panel {
  position: fixed;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 8px 10px 10px;
  min-width: 150px;
  max-width: 240px;
}
.fsel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--pl-purple);
}
.fsel-head b { flex: 1 1 auto; }
.fsel-toggle, .fsel-close {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.74rem;
  cursor: pointer;
  color: var(--muted);
}
.fsel-list {
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fsel-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid #f4f2f6;
}
.fsel-item:last-child { border-bottom: none; }
/* チーム列（ロゴを中央表示。ロゴが無い場合はチーム名を中央寄せ・小さめ） */
table.rich td.col-team {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 400;
}
.team-badge {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
}
/* チーム列の幅をPOS列と同じに揃える */
table.rich th.col-team, table.rich td.col-team,
table.rich th.col-position, table.rich td.col-position {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
}

/* 表内の文字は中央寄せ（選手名・チーム名だけ左寄せ） */
table.rich th, table.rich td,
table.squad th, table.squad td { text-align: center; }
table.rich td.col-name, table.rich th.col-name,
table.squad td.col-name { text-align: left; }
/* 「チーム」見出しも左寄せに統一（並び替えは無いが他の見出しと揃える） */
table.rich th.col-team { text-align: left; }
.name, .sub, .name-ja { text-align: left; }

/* チームデータ用テーブル：幅は中身ぴったり（列を減らしても引き伸ばさない） */
table.rich.teamtbl { min-width: 0; }
/* 数値列の最低幅（見出し＋矢印スペース分。順位・チーム列はそれぞれの固定幅が優先） */
table.rich.teamtbl th:not(.rank):not(.col-name),
table.rich.teamtbl td:not(.rank):not(.col-name) { min-width: 46px; }

/* チーム列の幅を選手タブ（順位42px・チーム46px）と合わせ、順位〜チーム列を左に固定 */
table.rich.teamtbl th.rank, table.rich.teamtbl td.rank {
  width: 42px; min-width: 42px; max-width: 42px;
  position: sticky; left: 0; z-index: 3;
}
/* 順位列のある表（合計・直近・ホーム・アウェイ）：チーム列は順位列(42px)の右に固定・広め */
table.rich.teamtbl:not(.tbl-gw) th.col-name,
table.rich.teamtbl:not(.tbl-gw) td.col-name {
  width: 68px; min-width: 68px; max-width: 68px;
  position: sticky; left: 42px; z-index: 3;
  box-shadow: 1px 0 0 var(--border);   /* 固定列の右に区切り線 */
}
/* チーム表のエンブレムは列幅に合わせて大きめに */
table.rich.teamtbl .team-badge {
  width: 38px;
  height: 38px;
}
/* 節別の表（順位列なし）：先頭の節列を左端に固定 */
table.rich.teamtbl.tbl-gw th.col-name,
table.rich.teamtbl.tbl-gw td.col-name {
  position: sticky; left: 0; z-index: 3;
  box-shadow: 1px 0 0 var(--border);
}
/* 固定列の背景（横スクロールで下の列が透けないように） */
table.rich.teamtbl td.rank, table.rich.teamtbl td.col-name { background: var(--card); }
table.rich.teamtbl tbody tr:nth-child(even) td.rank,
table.rich.teamtbl tbody tr:nth-child(even) td.col-name { background: #faf8fb; }
table.rich.teamtbl th.rank, table.rich.teamtbl th.col-name { background: #efe9f1; }
/* 見出し行かつ固定列＝左上の角は最前面（縦横どちらにも固定） */
table.rich.teamtbl thead tr:first-child th.rank,
table.rich.teamtbl thead tr:first-child th.col-name { z-index: 6; }

/* 次の3試合（1GW/2GW/3GW）：相手の3文字略称＋(H/A)。背景は対戦難易度で色分け */
table.rich td.fx-cell {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 8px 6px;
  min-width: 60px;
}
table.rich th.col-gw1, table.rich th.col-gw2, table.rich th.col-gw3 { text-align: center; }
/* FDRの並び替え矢印は他の表と逆の意味づけ（小さい＝日程が楽なので昇順が緑） */
.arr-easy { color: var(--easy); }
.arr-hard { color: var(--hard); }

/* FDRタブ：節の見出しは中央・狭め。ダブルGWは2行になるので行間を詰める */
table.rich.tbl-fdr th.col-fdr { text-align: center; min-width: 56px; }
table.rich.tbl-fdr td.fx-cell { line-height: 1.25; }
table.rich.tbl-fdr td.fdr-none { background: var(--card); }
/* 難易度列は選択節ぶんの合計。1〜5の色分けは当てはまらないのでグレー固定 */
table.rich.tbl-fdr td.fdr-total {
  background: #e7e7e7;
  color: #1b1b1f;
  font-size: 0.85rem;
}
table.rich.tbl-fdr tbody tr:nth-child(even) td.fdr-total { background: #e7e7e7; }

/* 公式FDRの5段階（1=とても弱い … 5=とても強い） */
table.rich td.fx-cell.fdr-1 { background: #12fc7a; color: #1b1b1f; }
table.rich td.fx-cell.fdr-2 { background: #8ef5b7; color: #1b1b1f; }
table.rich td.fx-cell.fdr-3 { background: #e7e7e7; color: #1b1b1f; }
table.rich td.fx-cell.fdr-4 { background: #fe1752; color: #fff; }
table.rich td.fx-cell.fdr-5 { background: #81072d; color: #fff; }

/* セットプレー担当（チーム＝ロゴ、PK/直接FK/CK・間接FKの3列をスマホ幅に等幅で収める） */
table.setpiece { table-layout: fixed; width: 100%; }
table.setpiece th, table.setpiece td { padding: 6px 3px; }
table.setpiece td { vertical-align: top; }
table.setpiece th { font-size: 0.76rem; line-height: 1.25; }
/* 担当者列（PK/直接FK/CK・間接FK）は番号1〜4を列内の左側に揃える（チーム列だけ中央） */
table.setpiece th:not(.sp-team), table.setpiece td:not(.sp-team) { text-align: left; }
/* チーム列はロゴ1個ぶんの細幅、残り3列は均等 */
table.setpiece th.sp-team, table.setpiece td.sp-team { width: 40px; text-align: center; }
table.setpiece td.sp-team .team-badge { width: 30px; height: 30px; }
/* 担当者名は列内で折り返して3列に収める（長い英名対策） */
.sp-taker { white-space: normal; overflow-wrap: anywhere; font-size: 0.8rem; line-height: 1.35; margin-bottom: 2px; }
.sp-no {
  display: inline-block;
  background: #efe9f1;
  color: var(--pl-purple);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 4px;
}

/* チーム選択のプルダウン */
.picker {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}

/* ---------- 表 ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 10px;
  /* 見出し行を固定(sticky)するため overflow:hidden は使わない */
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: 0.88rem;
}
thead th {
  background: #efe9f1;
  color: var(--pl-purple);
  text-align: left;
  padding: 10px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  /* 単純な表：ページをスクロールしても見出し行をトップバー直下に固定 */
  position: sticky;
  top: var(--topbar-h);
  z-index: 4;
}
tbody td {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:nth-child(even) {
  background: #faf8fb;
}
.rank {
  font-weight: 700;
  color: var(--pl-purple);
  text-align: center;
  width: 2.2em;
}
/* 上位3位を目立たせる */
.rank-1 { color: #c79a00; }
.rank-2 { color: #8a8a8a; }
.rank-3 { color: #b5662f; }

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.main-num {
  font-weight: 700;
  color: var(--pl-purple);
}
.name {
  font-weight: 600;
}
.sub {
  font-size: 0.72rem;
  color: var(--muted);
}
/* 選手名のカタカナ（チーム名と同じ色） */
.name-ja {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- 選手の比較（レーダーチャート） ---------- */
.cmp { margin-top: 4px; }
.cmp-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 10px 2px;
  line-height: 1.5;
}
.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  border-radius: 999px;
  padding: 6px 6px 6px 12px;
}
.cmp-chip-sub {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.85;
}
.cmp-x {
  border: 0;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.cmp-clear {
  border: 0.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}
.cmp-search input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  background: var(--card);
}
/* 候補は枠内スクロール（下のチャートが遠くならないように） */
.cmp-cands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-cands:empty { margin-top: 0; }
@media (max-width: 480px) {
  .cmp-cands { grid-template-columns: 1fr; }
}
.cmp-cand {
  display: block;
  text-align: left;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  min-width: 0;
}
.cmp-cand-name {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.cmp-cand-ja {
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--muted);
  margin-left: 6px;
}
.cmp-cand-sub {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}
.cmp-diff {
  display: inline-block;
  margin-left: 6px;
  background: #ffe0ea;
  color: #b0003a;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  font-size: 0.68rem;
}
.cmp-confirm {
  background: #fff6f9;
  border: 1px solid #ffc9dc;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.84rem;
  line-height: 1.6;
}
.cmp-confirm-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.cmp-yes, .cmp-no {
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.cmp-yes { background: #ff2882; color: #fff; }
.cmp-no { background: #ececf0; color: var(--text); }
/* 軸の切り替え（プルダウン＋「スタッツを選ぶ」のときだけ出るチェックリスト） */
.cmp-axis-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.cmp-axis-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  flex: none;
}
.cmp-axis-mode {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font-size: 0.9rem;
  color: var(--text);
}
.cmp-axis-list {
  margin-top: 8px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px 10px;
}
.cmp-axis-count {
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.cmp-axis-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmp-axis-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.82rem;
  cursor: pointer;
}
.cmp-axis-item.on {
  border-color: var(--pl-purple);
  background: #f3ecf5;
  color: var(--pl-purple);
  font-weight: 700;
}
.cmp-axis-item.off { opacity: 0.45; cursor: default; }
.cmp-axis-item input { margin: 0; }

.cmp-actions { margin: 10px 0 4px; text-align: center; }
.cmp-save {
  border: 0;
  background: var(--pl-purple);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
}
.cmp-canvas {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* 説明文を表の下に移したので、表の上の note は空になる。余白だけ残らないよう畳む */
.note:empty { display: none; }

/* 表の下に置く説明文・計算式。表とひとかたまりに見えるよう上を詰めて下に余白を取る */
.table-note {
  margin: 2px 0 18px;
  line-height: 1.7;
}

/* ---------- 節の見出し（日程・予測の共通） ---------- */
/* 第◯節は左、移籍締切は行の中央。右の空セルで中央を画面中央に保つ */
.gw-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
}
.gw-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-purple);
}
.gw-deadline {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 10試合の並べ方 ---------- */
/* スマホは1列（日程順にそのまま縦）。721px以上で2列×5試合にして
   左上→左下→右上→右下の順（＝前半5試合が左列、後半5試合が右列）にする */
.two-cols { display: grid; }
.two-col { min-width: 0; }
.two-col:nth-child(2) .pred-head { display: none; }   /* 1列のときの見出し重複を防ぐ */

/* ---------- 次節の予測（対戦カード形式） ---------- */
.pred-head,
.pred-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 56px;
  gap: 6px;
  align-items: center;
}
.pred-head {
  padding: 0 4px 6px;
}
.pred-head span {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
}
/* 狭い画面では「クリーンシート％」が3行に折れてしまうので CS％ と出す */
.pred-h-long { display: none; }
.pred-match {
  background: var(--card);
  border: 0.5px solid #ececf0;
  border-radius: 10px;
  padding: 2px 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pred-row { padding: 8px 0; }
.pred-row + .pred-row { border-top: 0.5px solid #f0eef2; }
.pred-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* チーム名は折り返さず1行。日本語チーム名は最長8文字（クリスタルパレス／
   ブレントフォード／マンユナイテッド）で、文字送りは約7.97em ぶん。
   1列表示なら320px幅でも名前欄が117px取れるので 0.85rem(13.6px＝約108px)で収まる */
.pred-tname {
  flex: 1 1 auto;      /* 親の幅をすべて使う（既定の flex:0 1 auto だと文字ぶんしか取らない） */
  min-width: 0;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pred-cell {
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  background: #f1f1f3;
  border-radius: 8px;
  padding: 9px 4px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 721px) {
  .two-cols { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .two-col:nth-child(2) .pred-head { display: grid; }
  /* 2列でも本文コンテナが696px固定なので幅は足りる。見出しは正式名称に戻し、
     数値セルもその文字数に合わせる。名前欄は常に96.7pxで、最長「マンユナイテッド」の
     約7.97em が収まる上限は12.13pxなので余裕をみて0.72rem */
  .pred-head, .pred-row { grid-template-columns: minmax(0, 1fr) 84px 92px; gap: 8px; }
  .pred-h-long { display: inline; }
  .pred-h-short { display: none; }
  .pred-tname { font-size: 0.72rem; }
}
.pred-cell.hi-goal { background: #fbe7c4; }   /* ゴール期待値が高い */
.pred-cell.hi-cs { background: #d7eede; }      /* クリーンシート率が高い */

/* ---------- 次節の予測：選手別ゴール期待値ランキング TOP10 ---------- */
.pgr-title {
  margin: 22px 0 4px;
  font-size: 1rem;
  color: var(--pl-purple);
}
.pgr {
  background: var(--card);
  border: 0.5px solid #ececf0;
  border-radius: 10px;
  padding: 2px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pgr-head,
.pgr-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 104px 54px 60px;
  gap: 8px;
  align-items: center;
}
.pgr-head { padding: 8px 0 6px; }
.pgr-head span {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}
.pgr-head span:nth-child(2) { text-align: left; }
.pgr-row { padding: 7px 0; }
.pgr-row + .pgr-row { border-top: 0.5px solid #f0eef2; }
.pgr-rank {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.pgr-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pgr-photo {
  width: 28px;
  height: 35px;
  object-fit: cover;
  border-radius: 4px;
  background: #e8e8ec;
  flex: none;
}
.pgr-names { min-width: 0; }
.pgr-name {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.pgr-ja {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* 所属チームと対戦相手は2段。1行に並べると対戦列(スマホ72px)に収まらない */
.pgr-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
/* 所属チームは3文字略称（エンブレムは18pxでも列に収まらず左右が切れるため使わない） */
.pgr-team {
  max-width: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pgr-opp {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.pgr-xg,
.pgr-exp {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.pgr-xg { color: var(--muted); }
/* 「3試合」など、平均に使った試合数（5試合未満のときだけ出る） */
.pgr-xg-n {
  display: block;
  font-size: 0.62rem;
  line-height: 1.1;
  color: var(--muted);
}
.pgr-exp {
  font-weight: 700;
  background: #fbe7c4;
  border-radius: 8px;
  padding: 7px 4px;
}
@media (max-width: 480px) {
  .pgr-head,
  .pgr-row { grid-template-columns: 20px minmax(0, 1fr) 72px 44px 56px; gap: 5px; }
  .pgr-head span { font-size: 0.68rem; }
  .pgr { padding: 2px 6px; }
  .pgr-team { font-size: 0.72rem; }
  .pgr-opp { font-size: 0.72rem; }
  .pgr-xg { font-size: 0.8rem; }
  .pgr-photo { width: 24px; height: 30px; }
}

/* ---------- 次節の日程（カード形式） ---------- */
.match-card {
  background: var(--card);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.match-time {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-align: center;
}
/* 「クリスタルパレス 普通 vs マンシティ 強い」を1行に収める。
   中身の寸法はすべて em にしてあるので、この font-size を変えれば行ごと拡縮できる。
   最悪ケース（両チーム名8文字＋「とても強い」2つ）で必要な幅は実測で28.4em ぴったり。
   ちょうどだと文字幅のわずかな差で切れるので、29.5em ぶんあるものとして
   カード内寸(画面幅−56px)の 1/29.5＝3.39vw−1.90px を上限にする（約4%の余裕）。 */
.match-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  white-space: nowrap;
  font-size: clamp(0.5rem, 3.39vw - 1.9px, 0.85rem);
}
.match-team {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
}
.match-team .tname {
  font-weight: 700;
  font-size: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-vs {
  color: var(--muted);
  font-size: 0.8em;
  flex: none;
}
@media (min-width: 721px) {
  /* 2列だとカード内寸は308px固定。308/29.5≒10.4px */
  .match-teams { font-size: 0.65rem; }
}
/* 親(.match-teams)の font-size に追従させるため em で指定する */
.strength {
  display: inline-block;
  flex: none;
  font-size: 0.72em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  color: #fff;
}
.strength.easy { background: var(--easy); }
.strength.normal { background: var(--normal); }
.strength.hard { background: var(--hard); }
/* 相手の強さ 4段階の色分け（濃い背景＝白文字／明るい背景＝黒文字） */
.strength.st-vhard { background: #81072d; color: #fff; }
.strength.st-hard  { background: #fe1752; color: #fff; }
.strength.st-mid   { background: #e7e7e7; color: #1b1b1f; }
.strength.st-weak  { background: #12fc7a; color: #1b1b1f; }

/* ---------- マイチーム検索 ---------- */
.idform {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
}
.idform input {
  flex: 1;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.idform button {
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--pl-purple);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.idform button:active { opacity: 0.85; }

.team-summary {
  background: linear-gradient(135deg, var(--pl-purple), #5a0a63);
  color: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.team-title { font-size: 1.15rem; font-weight: 700; }
.team-summary .sub { color: #d9c8df; }
.team-stats {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.stat {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.stat-label { font-size: 0.7rem; color: #d9c8df; }
.stat-value { font-size: 1.05rem; font-weight: 700; color: var(--pl-green); }

.mt-h3 {
  font-size: 1rem;
  margin: 18px 0 6px;
  color: var(--pl-purple);
}
table.squad { font-size: 0.85rem; }
.bench-sep {
  background: #efe9f1 !important;
  color: var(--pl-purple);
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
}
.cap {
  display: inline-block;
  background: var(--pl-purple);
  color: var(--pl-green);
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  vertical-align: middle;
}
.cap.vice { background: #8a8a8a; color: #fff; }
.lg-btn {
  padding: 5px 12px;
  font-size: 0.75rem;
  border: 1px solid var(--pl-purple);
  color: var(--pl-purple);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
tr.me-row td { background: #eafff3 !important; }

/* ---------- マイチーム：ピッチ表示（編集可） ---------- */
.mt-bar {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 2px 0 8px;
}
.mt-msg {
  font-size: 0.78rem;
  color: var(--pl-purple);
  background: #f4eff6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  text-align: center;
}
/* 計画タブの操作説明／通知。スカッドの下・移籍プランの上に置く。
   スカッドより下なので高さ固定は不要（説明文と通知はどちらも1行）。 */
.mt-info-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0 8px;
}
.mt-info-slot .mt-actions,
.mt-info-slot .mt-msg,
.mt-info-slot .mt-hint { margin-bottom: 0; }
/* 常時表示の説明文（両タブ共通デザイン） */
.mt-hint {
  font-size: 0.78rem;
  color: var(--pl-purple);
  background: #f4eff6;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
/* 説明文中の⇅✕アイコン（スカッドのカードに付くものと同じ見た目の縮小版） */
/* ⇅と✕でグリフの高さが違うので、円内をflexで中央寄せし、文字の上で位置を揃える */
.mt-hint-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 0 1.5px #fff;
  vertical-align: 0;
  margin: 0 2px;
}
.mt-hint-ic.ic-swap { background: var(--pl-purple); }
.mt-hint-ic.ic-x { background: var(--hard); }
.mt-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;   /* 1行に収めてバーの高さを一定に（スカッドが動かないように） */
  gap: 6px;
  background: #f4eff6;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
}
.mt-sel-name {
  font-weight: 700;
  color: var(--pl-purple);
  margin-right: auto;
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* 長い名前は…で省略して折り返さない */
}
.mt-actions button {
  flex: 0 0 auto;
  border: 1px solid var(--pl-purple);
  background: #fff;
  color: var(--pl-purple);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.mt-actions button[data-act="transfer"] { background: var(--pl-purple); color: #fff; }
.mt-actions button:active { opacity: 0.85; }

/* マイチームのサブタブ（直近節／計画） */
.mt-subtabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.mt-subtab {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--pl-purple);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.mt-subtab.is-active {
  background: var(--pl-purple);
  color: #fff;
  border-color: var(--pl-purple);
}
/* 直近節・計画でスカッドの開始位置を揃えるための共通ヘッダー領域 */
.mt-head {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 8px;
}
.mt-head-center { align-items: center; text-align: center; }
.mt-loading-msg {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
/* 計画タブのステータス（チップ／移籍／資金／コスト）＝前/次と同じ図形 */
.mt-stats {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.mt-stat {
  flex: 1;
  border: 1px solid var(--pl-purple);
  border-radius: 8px;
  background: #fff;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.mt-stat-l { font-size: 0.6rem; color: var(--muted); }
.mt-stat-v { font-size: 0.85rem; font-weight: 800; color: var(--pl-purple); }
.mt-stat-v.neg { color: var(--hard); }
/* タップで変更できるステータス（移籍/FT）。破線下線で「押せる」ことを示す */
button.mt-stat-btn {
  font: inherit;
  cursor: pointer;
}
button.mt-stat-btn .mt-stat-v {
  border-bottom: 1.5px dashed var(--pl-purple);
}
/* WC・FHの節はFTが∞になるので、手動変更のボタンは無効化する */
button.mt-stat-btn:disabled { opacity: 0.45; cursor: default; }
button.mt-stat-btn:disabled .mt-stat-v { border-bottom-color: transparent; }
/* チップ選択（節ごとに1つ）。見た目は他のステータスと揃え、破線で「選べる」ことを示す */
.mt-stat-chip { cursor: pointer; }
.mt-stat-chip select {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--pl-purple);
  border: none;
  border-bottom: 1.5px dashed var(--pl-purple);
  border-radius: 0;
  background: transparent;
  padding: 0;
  max-width: 100%;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

/* この節の移籍プラン（OUT→IN一覧）＋リセット */
.mt-transfers {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-top: 12px;
  padding: 10px 12px;
}
.mt-tr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pl-purple);
  margin-bottom: 6px;
}
.mt-tr-head button {
  border: 1px solid var(--hard);
  color: var(--hard);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.mt-tr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #f0eef2;
  font-size: 0.85rem;
  font-weight: 600;
}
.mt-tr-side { flex: 1; min-width: 0; }
.mt-tr-side .sub { margin-left: 4px; }
.mt-tr-side.in { text-align: right; }
.mt-tr-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 5px;
  vertical-align: middle;
}
.mt-tr-side.out .mt-tr-tag { background: #fde8e8; color: var(--hard); }
.mt-tr-side.in .mt-tr-tag { background: #e6f7ee; color: var(--easy); }
.mt-tr-arrow { color: var(--muted); flex: 0 0 auto; }
.mt-tr-none { font-size: 0.8rem; color: var(--muted); padding: 4px 0; }
/* 計画タブのGWナビ（LiveFPL風 ‹前／第N節／次›） */
.mt-gwnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  min-height: 38px;   /* 前/次ボタンの有無で高さが変わらないよう固定し、下のステータス位置を揃える */
}
.mt-gw-cur {
  font-weight: 800;
  color: var(--pl-purple);
  font-size: 1.05rem;
  min-width: 5em;
  text-align: center;
}
.mt-gw-btn {
  border: 1px solid var(--pl-purple);
  background: #fff;
  color: var(--pl-purple);
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
}
.mt-gw-btn:disabled { opacity: 0.4; cursor: default; }
/* 直近節はカードをタップで得点内訳を開けるので、押せる見た目（指カーソル）にする */
.mt-readonly .mt-card { cursor: pointer; }

/* スカッドの背景はピッチ画像（ヘッダー・ゴール・薄緑ベンチ枠込み）。
   選手は画像の上に重ね、ベンチは下部の薄緑エリアに配置。 */
/* pitch.png は上端に透明な余白（画像の6%）を含むため、その分だけスカッドを引き上げて
   情報スロットの上下の余白が見た目でそろうようにする。
   負マージンの%は「親の幅」基準なので、親(.mt-pitch-outer)を枠と同じ最大幅にして計算を合わせる。 */
.mt-pitch-outer {
  max-width: 100%;         /* 上限は本文コンテナの内寸（main 720px − padding 24px ＝ 696px） */
  margin: 0 auto;
}
.mt-pitch-wrap {
  position: relative;
  max-width: 100%;
  margin: -5.78% auto 0;   /* 透明帯 = 幅の5.78%（67/1110 × 1220/1274） */
  aspect-ratio: 1274 / 1220;
  background: url("pitch.png") center / 100% 100% no-repeat;
  /* 透明帯が情報スロットに重なるので、枠自体はタップを受けない（カードだけ受ける） */
  pointer-events: none;
  /* GW◯／◯ptバッジの大きさをピッチ幅に追従させる（cqwの基準） */
  container-type: inline-size;
}
.mt-pitch-wrap .mt-card { pointer-events: auto; }

/* ピッチ幅に合わせて選手カードを比率そのままで拡縮するための単位。
   1単位 = 従来の1px（ピッチ幅440pxのとき）。440pxを超えるとピッチ幅に比例して伸び、
   440px未満では 1px 止まり＝従来どおりの大きさを保つ（下限は現状と同じ）。
   cqw は自分自身のコンテナを参照できないので .mt-pitch-wrap ではなくその子で定義する。
   cqw 非対応の端末は --u:1px のまま＝従来の固定サイズで表示される。 */
.mt-pitch,
.mt-bench,
.mt-badge { --u: 1px; }
@supports (width: 1cqw) {
  .mt-pitch,
  .mt-bench,
  .mt-badge { --u: max(1px, 0.227273cqw); }   /* 0.227273% = 1/440 */
}
/* 直近節タブだけ、ピッチの左上に「GW◯」右上に「◯pt」を白い角丸で重ねる
   （計画タブには出さない）。角丸と余白は em で font-size 1つに追従させ、
   枠線だけは選手カード（.mt-photo-wrap / .mt-name）と同じ 1.5px #1b1b1f に固定する。
   大きさは「箱の角がペナルティエリアの縦線にちょうど触れる」ところに合わせてある。
   pitch.png 実測で左のPA縦線は x=-0.2877y+376.2、右は x=0.30y+887（画像1274×1110座標）。
   左上バッジは 左辺11.5%・上辺16.5% 固定なので、font-size を 3.55cqw にすると
   右下の角が (304.0, 250.7) となり左のPA縦線 x=304.1 に一致する。右上バッジも同寸で、
   左下の角が右のPA縦線から6.7pxだけ内に入る（＝ピッチ幅の0.5%。文字数が違うため）。
   cqw は .mt-pitch-wrap のコンテナ幅基準なので、画面幅やピッチの440px上限に関係なく
   この関係が保たれる。cqw 非対応の古い端末向けに vw のフォールバックを先に置く。 */
.mt-badge {
  position: absolute;
  top: 16.5%;
  background: #fff;
  border: calc(1.5 * var(--u)) solid #1b1b1f;
  border-radius: 0.45em;
  padding: 0.1em 0.5em;
  font-weight: 800;
  font-size: clamp(0.85rem, 3.9vw, 1.3rem);   /* cqw 非対応時のフォールバック */
  font-size: 3.55cqw;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #1b1b1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 3;
}
/* フィールドのタッチライン(白線)の内側に収める。pitch.png は上端に67pxの透明帯があり、
   その下がヘッダー帯(y68-143)、フィールド上端の白線が y170-175。画像は 1110px高を
   1220px高の枠に伸ばして敷いているので、白線の下端 y176 は枠の15.9%。バッジの上を
   16.5%に置くと白線のすぐ下に入る。左右のタッチラインはその高さで x130／x1134
   （＝10.2%／89.0%）なので、少し内側の 11.5%／12% にしている。 */
.mt-badge.gw { left: 11.5%; }
.mt-badge.pts { right: 12%; }
/* スタメン（GK/DF/MF/FW）をピッチ部分に縦等間隔で配置 */
.mt-pitch {
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  bottom: 24%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 2%;
}
.mt-row {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: calc(2 * var(--u));
}
/* ベンチは下部の薄緑枠に配置 */
.mt-bench {
  position: absolute;
  left: 0;
  right: 0;
  /* BBのグラデーション枠（線幅3px）の内側にカードが収まるよう下げる。
     元々カードが線の上端より約1px上にあったので、線幅+1pxぶん下げている */
  bottom: calc(2% - 4 * var(--u));
  /* 背景のベンチ（薄緑）は左右非対称（左12.87%／右11.77%）なので、ピッチ幅で中央寄せすると
     左端カードだけ枠線に深くかかる。枠の中心(50.55%)に合わせるぶんだけ右へずらす
     （padding-left の半分だけ中央がずれるので 0.55%×2＝1.1%） */
  padding-left: 1.1%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(18 * var(--u));   /* カード左右の⇅✕アイコンが隣と重ならない間隔 */
}
.mt-card {
  width: calc(52 * var(--u));
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mt-photo-wrap {
  position: relative;
  height: calc(24 * var(--u));
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #e7e7ec;
  border: calc(1.5 * var(--u)) solid #1b1b1f;
  border-bottom: none;
  border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0;
  overflow: visible;          /* 頭が箱の上にはみ出す */
}
.mt-photo {
  height: calc(33 * var(--u)); /* 箱より高く＝頭がはみ出し、肩から下は名前バーで隠れる */
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.mt-photo.is-kit { height: calc(22 * var(--u)); }
.mt-cv {
  position: absolute;
  top: calc(-7 * var(--u));
  left: calc(-7 * var(--u));
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  line-height: calc(17 * var(--u));
  border-radius: 50%;
  font-size: calc(9.6 * var(--u));
  font-weight: 800;
  text-align: center;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff;
  z-index: 2;
}
.mt-cv.v { background: #000; color: #fff; }
.mt-name {
  width: 100%;
  background: #fff;
  color: #1b1b1f;
  font-size: calc(8 * var(--u));
  font-weight: 700;
  padding: calc(1 * var(--u));
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: calc(1.5 * var(--u)) solid #1b1b1f;
  border-right: calc(1.5 * var(--u)) solid #1b1b1f;
}
.mt-pts {
  width: 100%;
  background: #f1f1f3;
  color: #1b1b1f;
  font-size: calc(9.92 * var(--u));
  font-weight: 700;
  border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u));
  padding: calc(1 * var(--u)) calc(2 * var(--u));
  border: calc(1.5 * var(--u)) solid #1b1b1f;
  border-top: none;
}
.mt-pts.pneg { background: #fe1752; color: #1b1b1f; }
.mt-pts.p23 { background: #e7e7e7; color: #1b1b1f; }
.mt-pts.p49 { background: #12fc7a; color: #1b1b1f; }
.mt-pts.p10 { background: #49b605; color: #1b1b1f; }
/* 計画タブのカード下段＝その節の対戦相手（例 COV(H)）。ダブルGWでも1行に収める */
.mt-fx {
  font-size: calc(8.8 * var(--u));
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 背景色は次節タブの「相手の強さ」バッジ（.strength.st-*）と同じ配色に揃える */
.mt-fx.st-vhard { background: #81072d; color: #fff; }
.mt-fx.st-hard  { background: #fe1752; color: #fff; }
.mt-fx.st-mid   { background: #e7e7e7; color: #1b1b1f; }
.mt-fx.st-weak  { background: #12fc7a; color: #1b1b1f; }
/* TC（トリプルキャプテン）：C/Vバッジの枠線と中身の色を反転 */
.mt-pitch-wrap.chip-3xc .mt-cv,
.mt-pitch-wrap.chip-3xc .mt-cv.v {
  background: #fff;
  color: #000;
  box-shadow: 0 0 0 calc(2 * var(--u)) #000;
}
/* BB（ベンチブースト）：背景画像のベンチ枠（薄緑の箱）をグラデーションの線で囲う。
   位置は pitch.png のベンチ（薄緑の箱）の実測値（画像1274x1110 中 x164-1123 / y919）。
   下辺は引かない（コの字）。
   ::before なのでカードより奥に描かれ、選手の上に線が乗らない。 */
.mt-pitch-wrap.chip-bboost::before {
  content: "";
  position: absolute;
  left: 12.87%;
  right: 11.77%;
  top: 82.79%;
  bottom: 0;
  border-radius: 10px 10px 0 0;
  /* = 線の太さ。下だけ0にして下辺の線を消す。
     ::before は .mt-pitch-wrap の疑似要素で、--u（子で定義）を受け取れないため
     パーセントで書く。padding の % は包含ブロック＝ピッチ幅基準なので
     0.682% がピッチ幅440pxのとき3pxになり、以降は幅に比例する（下限は3px）。 */
  padding: max(3px, 0.682%) max(3px, 0.682%) 0;
  background: linear-gradient(90deg, #5de0e6, #004aad);
  /* 中身をくり抜いて「枠線だけ」にする（グラデーションはborderに直接指定できないため） */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* 直近節タブ：カードタップで出る得点内訳ポップアップ（ピッチ枠の中に収め、下端をフィールド下端に合わせる） */
.mt-bd-overlay {
  position: absolute;
  /* pitch.png の上端67pxは透明帯で、枠はその分だけ上にはみ出している（負マージンで持ち上げ済み）。
     inset:0 だとその透明部分まで暗くなり、上のチップ／移籍／資金の行にかぶるので、
     画像が実際に始まる 67/1110＝6.036% から下だけを覆う（下端は画像下端＝枠の下端）。 */
  top: 6.036%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  pointer-events: auto;
  background: rgba(10, 20, 15, 0.5);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}
.mt-bd-overlay.is-open { opacity: 1; }
.mt-bd-sheet {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px 14px 0 0;
  padding: 12px 14px 14px;
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
.mt-bd-overlay.is-open .mt-bd-sheet { transform: translateY(0); }
.mt-bd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.mt-bd-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee;
  flex: none;
}
.mt-bd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mt-bd-id { flex: 1; display: flex; flex-direction: column; }
.mt-bd-name { font-size: 15px; font-weight: 700; color: var(--text); }
.mt-bd-c { color: var(--pl-purple); }
.mt-bd-meta { font-size: 12px; color: var(--muted); }
/* 名前の右側の◯ptバッジ（四辺すべて黒枠） */
.mt-bd-total {
  flex: none;
  width: auto;
  font-size: 15px;
  padding: 3px 10px;
  border: 1.5px solid #1b1b1f;
  border-radius: 8px;
  white-space: nowrap;
}
/* 計画タブ：名前の右のC/V選択バッジ（◯ptと同じスタイル。選択中は黒で塗る） */
.mt-bd-cv { flex: none; display: flex; gap: 6px; }
.mt-bd-cvbtn {
  min-width: 32px;
  font-size: 15px;
  font-weight: 800;
  padding: 3px 8px;
  border: 1.5px solid #1b1b1f;
  border-radius: 8px;
  background: #fff;
  color: #1b1b1f;
  cursor: pointer;
}
.mt-bd-cvbtn.is-on { background: #000; color: #fff; }
/* ×ボタンはキャプテン©と同じスタイル（黒丸・白文字・白フチ） */
.mt-bd-close {
  flex: none;
  width: 24px;
  height: 24px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
  padding: 0;
}
.mt-bd-body { padding-top: 6px; }
.mt-bd-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text);
  padding: 5px 0;
  border-bottom: 1px solid #f0eef2;   /* 各項目の下に下線 */
}
.mt-bd-row span:first-child { color: var(--muted); }
/* 合計行：太字（区切り線は上の行の下線を流用し、二重線にしない） */
.mt-bd-total-row {
  border-bottom: none;
  padding-top: 7px;
  font-weight: 700;
}
.mt-bd-total-row span:first-child,
.mt-bd-total-row span:last-child { color: var(--text); }
.mt-bd-none { text-align: center; color: var(--muted); font-size: 13px; padding: 12px 0; }
/* 詳細表示中（カード本体タップ）はカード全体を黄色枠で囲む（名前バーは通常の色のまま） */
.mt-card.is-sel {
  outline: 2.5px solid #fff001;
  outline-offset: 2px;
  border-radius: 6px;
}
/* 移籍候補を表示中の選手（OUT対象）は半透明で示す */
.mt-card.is-out { opacity: 0.5; }
/* ⇅の入れ替え中：元の選手は赤枠、入れ替えできる相手は緑枠 */
.mt-card.is-swapsrc {
  outline: 2.5px solid var(--hard);
  outline-offset: 2px;
  border-radius: 6px;
}
.mt-card.is-swapok {
  outline: 2.5px solid var(--pl-green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 計画タブ：カード左上の⇅（入れ替え）・右上の✕（移籍）アイコン（LiveFPL風） */
.mt-ctrl {
  position: absolute;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  line-height: calc(18 * var(--u));
  border-radius: 50%;
  font-size: calc(11.2 * var(--u));
  font-weight: 800;
  text-align: center;
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff;
  cursor: pointer;
  z-index: 3;
}
.mt-ctrl-swap { top: calc(-8 * var(--u)); left: calc(-8 * var(--u)); background: var(--pl-purple); color: #fff; }
.mt-ctrl-x { top: calc(-8 * var(--u)); right: calc(-8 * var(--u)); background: var(--hard); color: #fff; }
.mt-ctrl:active { opacity: 0.8; }
/* 計画タブではC/Vバッジを⇅アイコンの下に配置 */
.mt-card.is-plan .mt-cv { top: calc(12 * var(--u)); left: calc(-8 * var(--u)); }
/* 移籍ピッカー */
.mt-picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 12px;
  background: var(--card);
  overflow: hidden;
}
.mt-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--pl-purple);
  color: #fff;
  padding: 8px 12px;
  font-size: 0.85rem;
}
.mt-picker-head button {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.9rem;
}
#mt-picker-q {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 0.9rem;
}
.mt-picker-list { max-height: 360px; overflow-y: auto; }
.mt-pick-item { border-bottom: 1px solid var(--border); background: #fff; }
.mt-pick-item.is-open { background: #faf8fc; }
.mt-pick-row { display: flex; align-items: center; }
.mt-pick-row:active { background: #f4eff6; }
/* 行の本体（写真＋名前＋スタッツ）。タップで詳細プルダウンを開閉 */
.mt-pick-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.mt-pick-kit { flex: 0 0 26px; height: 30px; display: flex; align-items: center; }
.mt-pick-kit img { height: 30px; width: auto; }
.mt-pick-name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; }
/* 英語名の右にそえる日本語名（補助情報なので薄く小さく） */
.mt-pick-ja {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
/* スタッツ絞り込み時に＋の左へ出る値 */
.mt-pick-stat {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pl-purple);
  min-width: 52px;
  text-align: right;
}
/* ピッカーのツール行（チーム・スタッツ・コスト絞り込み） */
.mt-picker-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 10px 8px;
}
.mt-fteam,
.mt-fstat,
.mt-maxwrap {
  font-size: 0.75rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mt-fteam select,
.mt-fstat select {
  padding: 4px 6px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  max-width: 120px;
}
.mt-maxwrap input {
  width: 54px;
  padding: 4px 6px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* 候補行の＋ボタン（クイック追加） */
.mt-pick-add {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin: 0 12px 0 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--easy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.mt-pick-row.over .mt-pick-add { background: #c9c9cf; }
/* 候補タップで開く詳細プルダウン（差額＋ポジション別スタッツ＋入れる） */
.mt-pick-detail { padding: 6px 12px 12px; }
.mt-pick-tr {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: #ece5f0;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}
.mt-pick-tr .bad { color: var(--hard); }
.mt-pick-drow {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 4px 0;
  border-bottom: 1px solid #f0eef2;
}
.mt-pick-drow span:first-child { color: var(--muted); }
.mt-pick-do {
  margin-top: 10px;
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 8px;
  background: var(--easy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}
code {
  background: #efe9f1;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ---------- お知らせ・空状態 ---------- */
.empty {
  background: var(--card);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}

/* ---------- フッター ---------- */
.site-footer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 20px 16px 40px;
}
.site-footer p { margin: 2px 0; }