/* ==================================================
   野球チームメーカー  style.css

   ・スマートフォン優先（モバイルファースト）
   ・組み方は部屋の他のページと同じで、新聞・雑誌の紙面に寄せている。
     影で浮かせたカードを重ねるのではなく、罫線・余白・文字の大小で組む。
   ・数字と欧文だけ Archivo（可変フォント）を読む。日本語は端末のもの。
   ・明るい配色が基本。右上のボタンで暗い配色にも切り替えられる
     （設定はページをまたいで残る）
   ・色は :root の変数にまとめてあるので、雰囲気を変えたいときはそこだけ直す
   ================================================== */

/* ---------- 欧文・数字（Archivo / SIL Open Font License 1.1）
     ライセンス本文は fonts/Archivo-OFL.txt。部屋の他のページと同じ1本。 ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../../fonts/archivo-var.woff2') format('woff2');
  font-weight: 380 800;
  font-stretch: 70% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D,
                 U+2026, U+2032-2033, U+2212;
}

/* ---------- 明るい配色（既定） ---------- */
:root {
  --c-bg:        #f4f2ec;   /* 紙の色 */
  --c-bg-2:      #e8e5dc;
  --c-panel:     #fbfaf7;   /* 一段持ち上げた面 */
  --c-panel-2:   #edeae2;   /* 一段沈めた面 */
  --c-line:      #d3cec3;   /* 本罫 */
  --c-line-2:    #e4e0d6;   /* うす罫 */
  --c-text:      #16181a;   /* 基本の文字 */
  --c-text-dim:  #6b7076;   /* 補足の文字 */
  --c-text-faint:#979ba1;   /* さらに弱い文字 */

  --c-accent:    #17466e;   /* 見出し・大きい数字 */
  --c-accent-ink:#ffffff;
  --c-accent-2:  #0e5f66;   /* 差し色 */
  --c-accent-2-ink: #ffffff;

  --c-take:      #2c6a45;   /* 取る */
  --c-take-ink:  #ffffff;
  --c-take2:     #26557f;   /* 野手として取る */
  --c-take2-ink: #ffffff;
  --c-pass:      #a23127;   /* 見送る */
  --c-pass-ink:  #ffffff;

  --c-ok-bg:     #e3efe8;
  --c-ok-ink:    #2c6a45;
  --c-ng-bg:     #f6e4e1;
  --c-ng-ink:    #a23127;
  --c-warn-bg:   #f8eed8;
  --c-warn-ink:  #855510;

  /* 影は「本当に浮いているもの」だけに使う。
     並んだカードを一枚ずつ浮かせるのはやめた。 */
  --shadow:      0 14px 34px rgba(20, 18, 12, .18);
  --radius:      4px;
  --maxw:        560px;
  --appbar-h:    48px;

  /* 能力値のS〜Gの色 */
  --c-rank-s: #bf2f24; --c-rank-a: #cf5c15; --c-rank-b: #9d7000; --c-rank-c: #2c7148;
  --c-rank-d: #26637f; --c-rank-e: #3a539c; --c-rank-f: #64548c;

  color-scheme: light;
}

/* ---------- 暗い配色 ---------- */
:root[data-theme="dark"] {
  --c-bg:        #121316;
  --c-bg-2:      #0b0c0e;
  --c-panel:     #191b1e;
  --c-panel-2:   #24262a;
  --c-line:      #34373c;
  --c-line-2:    #24262a;
  --c-text:      #e7e6e2;
  --c-text-dim:  #9a9ea5;
  --c-text-faint:#6d7278;

  --c-accent:    #7fb0da;
  --c-accent-ink:#0e1216;
  --c-accent-2:  #56c2be;
  --c-accent-2-ink: #08201f;

  --c-take:      #63c98d;
  --c-take-ink:  #062312;
  --c-take2:     #74b6ee;
  --c-take2-ink: #071a2a;
  --c-pass:      #e58175;
  --c-pass-ink:  #2b0d09;

  --c-ok-bg:     #1b2e23;
  --c-ok-ink:    #8ddcae;
  --c-ng-bg:     #32201d;
  --c-ng-ink:    #f0a094;
  --c-warn-bg:   #332a17;
  --c-warn-ink:  #e5c383;

  --shadow:      0 14px 34px rgba(0, 0, 0, .55);

  --c-rank-s: #ff8a80; --c-rank-a: #ffab6b; --c-rank-b: #e8c86a; --c-rank-c: #7fd6a0;
  --c-rank-d: #7fc7e8; --c-rank-e: #97acf0; --c-rank-f: #c0aee8;

  color-scheme: dark;
}

/* 配色を選んでいないときは、端末の設定に合わせる */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #121316; --c-bg-2: #0b0c0e; --c-panel: #191b1e; --c-panel-2: #24262a;
    --c-line: #34373c; --c-line-2: #24262a;
    --c-text: #e7e6e2; --c-text-dim: #9a9ea5; --c-text-faint: #6d7278;
    --c-accent: #7fb0da; --c-accent-ink: #0e1216;
    --c-accent-2: #56c2be; --c-accent-2-ink: #08201f;
    --c-take: #63c98d; --c-take-ink: #062312;
    --c-take2: #74b6ee; --c-take2-ink: #071a2a;
    --c-pass: #e58175; --c-pass-ink: #2b0d09;
    --c-ok-bg: #1b2e23; --c-ok-ink: #8ddcae;
    --c-ng-bg: #32201d; --c-ng-ink: #f0a094;
    --c-warn-bg: #332a17; --c-warn-ink: #e5c383;
    --shadow: 0 14px 34px rgba(0, 0, 0, .55);
    --c-rank-s: #ff8a80; --c-rank-a: #ffab6b; --c-rank-b: #e8c86a; --c-rank-c: #7fd6a0;
    --c-rank-d: #7fc7e8; --c-rank-e: #97acf0; --c-rank-f: #c0aee8;
    color-scheme: dark;
  }
}


/* ==================================================
   土台
   ================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* hidden を付けた要素は必ず隠す。
   ボタンなどに display を指定していると、それに負けてしまうため。 */
[hidden] { display: none !important; }

body {
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  /* Archivo を先頭に置くのは、数字と英字だけそちらで出すため。
     かなと漢字は次のヒラギノ／游ゴシックに落ちる。 */
  font-family: 'Archivo',"Hiragino Sans","Hiragino Kaku Gothic ProN",
               "Yu Gothic Medium","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .015em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* 見出しは字間を詰める。palt が無いと「」や、。のまわりが間延びする */
.hero__title, .pagehead__title, .card__name, .pd__name, .final__label,
.complete__big, .set__title, .section__title, .rank-lead, .slot__name {
  font-feature-settings: "palt" 1;
}

/* 数字は桁を縦にそろえる */
.figs .fig b, .stat-table .num, .pd__table td, .score-table td,
.slot__order, .row__order, .sr-row__order, .gamebar__team strong,
.pw__rank, .pw__num, .final__record b {
  font-variant-numeric: tabular-nums;
}

a { color: var(--c-accent); }

.screen { display: none; overflow-anchor: none; }
.screen.is-active { display: block; animation: fade-in .25s ease; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--appbar-h) + 20px) 18px calc(48px + env(safe-area-inset-bottom));
}
.container--game { padding-top: calc(var(--appbar-h) + 80px); }

/* 補充ドラフトの説明 */
.draft-lead {
  margin: 0 0 14px; text-align: center;
  font-size: 12.5px; line-height: 1.7; color: var(--c-text-dim);
}


/* ==================================================
   どの画面にも出ているヘッダー
   ================================================== */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: calc(var(--appbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: var(--c-bg);
  border-bottom: 1.5px solid var(--c-text);
  box-shadow: 0 3px 0 -2px var(--c-line);
}
.appbar__home {
  flex: 0 0 auto; font-size: 13px; font-weight: 700;
  text-decoration: none; color: var(--c-text-dim);
}
.appbar__title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13.5px; font-weight: 800; text-align: center;
  letter-spacing: .1em;
  padding: 4px 2px; margin: 0; cursor: pointer;
  background: none; border: 0; color: inherit; font-family: inherit;
}
.appbar__title:active { opacity: .6; }
.appbar__title--link { text-decoration: none; display: block; line-height: 1.4; }
.appbar__icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid var(--c-line);
  color: var(--c-text-dim); font-size: 14px; cursor: pointer;
}
.appbar__restart {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--c-line);
  color: var(--c-text-dim); font-family: inherit; font-size: 12px; font-weight: 700;
}
.appbar__restart:active { transform: scale(.96); }


/* ==================================================
   トップ画面
   ================================================== */
.hero { text-align: center; padding: 20px 0 10px; }
.hero__eyebrow {
  margin: 0 0 12px; font-size: 10.5px; letter-spacing: .3em;
  color: var(--c-text-dim); font-weight: 700;
}
.hero__title {
  /* 狭い画面でも1行に収まる大きさにする。
     大きすぎると「メーカー」の最後だけ次の行に落ちてしまう。 */
  margin: 0; font-size: clamp(23px, 7.4vw, 44px); line-height: 1.2;
  font-weight: 900; letter-spacing: 0;
  white-space: nowrap;
}
.hero__title-main { color: var(--c-text); }
.hero__lead {
  margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--c-line);
  font-size: 15px; color: var(--c-text-dim); font-weight: 500;
}

.rules {
  margin-top: 28px; padding: 0;
  border-top: 1.5px solid var(--c-text);
}
.rules__heading {
  margin: 0; padding: 11px 2px 12px; font-size: 11px; letter-spacing: .2em;
  color: var(--c-text-dim); font-weight: 800;
  border-bottom: 1px solid var(--c-line);
}
.rules__list { margin: 0; padding: 0; list-style: none; }
.rules__list li {
  display: flex; align-items: flex-start; gap: 12px; font-size: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--c-line-2);
}
/* 文章はひとかたまりにしておく。
   flex の中に地の文と <b> を直接置くと、それぞれが別の箱になって
   横に並んでしまい、行がばらばらに割れる。 */
.rules__text { flex: 1 1 auto; min-width: 0; }
.rules__list b { color: var(--c-accent); }
.rules__num {
  flex: 0 0 auto; margin-top: 1px;
  color: var(--c-text-faint); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-align: left;
}
.rules__note { margin: 14px 2px 0; font-size: 12px; line-height: 1.8; color: var(--c-text-dim); }


/* --- トップ画面の選択肢（ドラフト候補を混ぜるか） --- */
.option {
  margin-top: 22px; padding: 14px 16px;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.option__heading {
  margin: 0 0 12px; font-size: 11px; letter-spacing: .2em;
  color: var(--c-text-dim); font-weight: 800;
}
.option__row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.option__row + .option__row { margin-top: 12px; }
.option__row input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--c-accent); cursor: pointer;
}
.option__body { flex: 1 1 auto; min-width: 0; }
.option__name { display: block; font-size: 14px; font-weight: 800; }
.option__note {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.6; color: var(--c-text-dim);
}
.option__warn {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--c-line);
  font-size: 11px; line-height: 1.7; color: var(--c-text-dim);
}


/* ==================================================
   ボタン
   ================================================== */
.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; padding: 15px 18px; border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: .06em;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, opacity .2s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn__sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; opacity: .85; }

.btn--primary { background: var(--c-text);    color: var(--c-bg); }
.btn--take    { background: var(--c-take);    color: var(--c-take-ink); }
.btn--take2   { background: var(--c-take2);   color: var(--c-take2-ink); }
.btn--pass    { background: var(--c-pass);    color: var(--c-pass-ink); }
/* Xのボタン。黒く塗ると本命（もう1年やる）と同じ重さになってしまうので、
   枠だけにして一段下げる。暗い配色でも見えるよう、色は変数から取る。 */
.btn--x       { background: transparent;     color: var(--c-text); border-color: var(--c-text); }
/* オーバーレイの上にも置くので、背景は透かさず塗っておく */
.btn--ghost   { background: var(--c-panel);   color: var(--c-text); border-color: var(--c-line); }
.btn--xl      { padding: 19px; font-size: 20px; }

.cta { margin-top: 20px; }
.cta--row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta--row .btn { font-size: 15px; padding: 14px 8px; }

/* いちばん静かな抜け道（「トップに戻る」など）。
   同じ見た目のボタンを並べると、どれが本命か分からなくなる。 */
.btn--text-quiet {
  background: transparent; border-color: transparent;
  color: var(--c-text-dim); font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--c-line);
}
.btn--text-quiet:hover { color: var(--c-text); }

.btn-text {
  background: none; border: none; color: var(--c-text-dim);
  font-family: inherit; font-size: 13px; text-decoration: underline;
  cursor: pointer; padding: 8px 10px;
}


/* ==================================================
   獲得画面・補充ドラフト
   ================================================== */
.gamebar {
  position: fixed; z-index: 30;
  top: calc(var(--appbar-h) + env(safe-area-inset-top)); left: 0; right: 0;
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
.gamebar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 18px 7px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gamebar__label { display: block; font-size: 10px; letter-spacing: .2em; color: var(--c-text-dim); font-weight: 700; }
.gamebar__team strong { font-size: 22px; font-weight: 800; font-stretch: 86%; color: var(--c-text); }
.gamebar__need {
  display: inline-block; margin-left: 8px; font-size: 11px;
  color: var(--c-text-dim); font-weight: 700; vertical-align: 3px;
}
.gamebar__pass {
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  background: var(--c-ng-bg); color: var(--c-ng-ink);
  border-radius: 999px; padding: 5px 13px;
}
.gamebar__progress { height: 2px; background: var(--c-line-2); }
.gamebar__progress i { display: block; height: 100%; width: 0; background: var(--c-text); transition: width .3s ease; }

.flash {
  position: fixed; left: 50%; z-index: 35;
  top: calc(var(--appbar-h) + env(safe-area-inset-top) + 64px);
  transform: translate(-50%, -8px);
  padding: 8px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 800; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.flash.is-on { opacity: 1; transform: translate(-50%, 0); }
.flash--ok   { background: var(--c-take); color: var(--c-take-ink); }
.flash--pass { background: var(--c-pass); color: var(--c-pass-ink); }


/* ---------- 選手カード ---------- */
.card {
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 16px;
  animation: card-in .25s ease;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.card--twoway { border-color: var(--c-accent); border-width: 2px; }

.card__top { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; align-items: center; }
.card__id { min-width: 0; }
.card__name { overflow-wrap: anywhere; }
.card__avatar { width: 58px; height: 58px; }
.avatar { width: 100%; height: 100%; display: block; border-radius: 2px; }

.card__pos {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  background: var(--c-accent-2); color: var(--c-accent-2-ink);
  border-radius: 999px; padding: 3px 11px;
}
.card__pos small { font-size: 10px; opacity: .85; }
.card__name { margin: 6px 0 0; font-size: 23px; font-weight: 800; line-height: 1.25; }
.card__team { margin: 0; font-size: 12px; color: var(--c-text-dim); }
.card__team small { display: block; font-size: 10.5px; font-weight: 700; }


.card__bars { margin-top: 14px; }

/* 能力値（S〜G）。成績から計算したもの */
.pw {
  display: grid; gap: 6px;
  /* auto-fit なので、打者の5つも投手の3つも等分に並ぶ */
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
}
/* 二刀流は投手の段と野手の段を分けて出すので、段どうしの間を空ける */
.pw + .pw { margin-top: 6px; }
.pw__item {
  min-width: 0;
  display: grid; justify-items: center; gap: 1px;
  padding: 6px 4px 5px; border-radius: var(--radius);
  background: var(--c-panel-2); border: 1px solid var(--c-line);
}
.pw__label { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--c-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pw__rank { font-size: 20px; font-weight: 800; line-height: 1.1; }
.pw__num { text-decoration: none; font-size: 9.5px; font-weight: 700; color: var(--c-text-dim); }

.pw__rank--S { color: var(--c-rank-s); }
.pw__rank--A { color: var(--c-rank-a); }
.pw__rank--B { color: var(--c-rank-b); }
.pw__rank--C { color: var(--c-rank-c); }
.pw__rank--D { color: var(--c-rank-d); }
.pw__rank--E { color: var(--c-rank-e); }
.pw__rank--F { color: var(--c-rank-f); }
.pw__rank--G { color: var(--c-text-dim); }

.card__fits {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.card__fits-label { font-size: 11px; color: var(--c-text-dim); margin-right: 2px; }

/* 一軍・二軍 */
.levels { margin-top: 14px; display: grid; gap: 5px; }
.level {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 7px 10px; border-radius: var(--radius);
  background: var(--c-panel-2); font-size: 14px; font-weight: 700;
}
.level--farm { font-size: 13px; opacity: .92; }
.level--none { opacity: .6; }
.level__tag {
  flex: 0 0 auto; min-width: 32px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  background: var(--c-accent-2); color: var(--c-accent-2-ink);
  border-radius: 2px; padding: 2px 6px;
}
.level--farm .level__tag { background: var(--c-line); color: var(--c-text-dim); }
.level__item { white-space: nowrap; }
.level__item i {
  font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--c-text-dim); margin-right: 3px;
}
.level__empty { font-size: 12px; font-weight: 600; color: var(--c-text-dim); }

/* 適性 */
.fit {
  display: inline-block; font-size: 11px; font-weight: 800;
  border-radius: 2px; padding: 2px 8px; white-space: nowrap; border: 1px solid transparent;
}
.fit--A { background: var(--c-ok-bg);   color: var(--c-ok-ink); }
.fit--B { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.fit--C { background: var(--c-warn-bg); color: var(--c-warn-ink); opacity: .85; }
.fit---, .fit--none { background: var(--c-ng-bg); color: var(--c-ng-ink); }

/* 取る／見送る */
.choice { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
.choice .btn { padding: 19px 12px; font-size: 20px; }
.choice--twoway { grid-template-columns: 1fr 1fr; }
.choice--twoway .btn { font-size: 17px; padding: 16px 8px; }
.choice--twoway .btn--pass { grid-column: 1 / -1; font-size: 18px; }

/* 獲得済み */
.roster { margin-top: 26px; }
.roster__heading {
  margin: 0 0 10px; padding-bottom: 8px;
  font-size: 11px; letter-spacing: .2em; color: var(--c-text-dim); font-weight: 800;
  border-bottom: 1.5px solid var(--c-text);
}
.roster__list { display: flex; flex-wrap: wrap; gap: 6px; }
.roster__empty { margin: 0; font-size: 12px; color: var(--c-text-dim); }

/* --- 守備8か所の埋まり具合 ---
   どこに守れる選手がいて、どこがまだ空いているかを一目で出す。
   色は選手カードの「守れる所」（.fit）と同じにしてある。 */
.cover { margin: 0 0 14px; }
.cover__grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
}
.cover__cell {
  display: grid; justify-items: center; gap: 1px;
  padding: 6px 2px 5px; border-radius: var(--radius);
  border: 1px solid var(--c-line); background: var(--c-panel);
}
.cover__cell b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.cover__cell i { font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.2; }
.cover__cell.is-A { background: var(--c-ok-bg);   border-color: var(--c-ok-ink);   color: var(--c-ok-ink); }
.cover__cell.is-B { background: var(--c-warn-bg); border-color: var(--c-warn-ink); color: var(--c-warn-ink); }
.cover__cell.is-none {
  background: transparent; border-style: dashed; color: var(--c-text-faint);
}
.cover__note { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.7; color: var(--c-text-dim); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: 999px; padding: 4px 11px 4px 5px; font-size: 12px; font-weight: 700;
}
.chip b {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--c-accent-2); color: var(--c-accent-2-ink); font-size: 11px;
}


/* ==================================================
   守備位置ごとの色
   ================================================== */
.row__pos[data-pos="投"], .chip[data-pos="投"] b { background:#d1603d; color:#fff; }
.row__pos[data-pos="捕"], .chip[data-pos="捕"] b { background:#b8860b; color:#fff; }
.row__pos[data-pos="一"], .chip[data-pos="一"] b { background:#3f8a4f; color:#fff; }
.row__pos[data-pos="二"], .chip[data-pos="二"] b { background:#1f8a86; color:#fff; }
.row__pos[data-pos="三"], .chip[data-pos="三"] b { background:#2a6fa8; color:#fff; }
.row__pos[data-pos="遊"], .chip[data-pos="遊"] b { background:#6b52b8; color:#fff; }
.row__pos[data-pos="左"], .chip[data-pos="左"] b { background:#b1478f; color:#fff; }
.row__pos[data-pos="中"], .chip[data-pos="中"] b { background:#b9711a; color:#fff; }
.row__pos[data-pos="右"], .chip[data-pos="右"] b { background:#2f7fa8; color:#fff; }
.row__pos[data-pos="内"], .chip[data-pos="内"] b { background:#5f6b7a; color:#fff; }
.row__pos[data-pos="外"], .chip[data-pos="外"] b { background:#7a6a5f; color:#fff; }
.row__pos[data-pos="Ｄ"], .chip[data-pos="Ｄ"] b { background:#4a4a4a; color:#fff; }


/* ==================================================
   見出し・区切り
   ================================================== */
.pagehead {
  text-align: center; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1.5px solid var(--c-text);
}
.pagehead__eyebrow {
  margin: 0 0 7px; font-size: 10.5px; letter-spacing: .3em;
  color: var(--c-text-dim); font-weight: 700;
}
.pagehead__title { margin: 0; font-size: 27px; font-weight: 800; line-height: 1.35; }
.pagehead__lead { margin: 11px 0 0; font-size: 13px; color: var(--c-text-dim); line-height: 1.8; }

.section { margin-top: 30px; }
.section__title {
  margin: 0 0 10px; padding-bottom: 8px;
  font-size: 11px; letter-spacing: .2em; color: var(--c-text-dim); font-weight: 800;
  border-bottom: 1.5px solid var(--c-text);
}
.section__lead { margin: 0 0 12px; font-size: 12.5px; color: var(--c-text-dim); line-height: 1.8; }

.warn {
  margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 700;
  background: var(--c-ng-bg); color: var(--c-ng-ink);
}
.warn--ok { background: var(--c-ok-bg); color: var(--c-ok-ink); }
.warn:empty { display: none; }
.ok-note {
  margin: 0; padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 700;
  background: var(--c-ok-bg); color: var(--c-ok-ink);
}
.next-note { margin: 20px 0 0; text-align: center; font-size: 13.5px; color: var(--c-text-dim); }


/* ==================================================
   一覧（メンバー確認・結果）
   ================================================== */
.rows {
  list-style: none; margin: 16px 0 0; padding: 0;
  border-top: 1px solid var(--c-line);
}
.row {
  display: grid; grid-template-columns: 24px 28px minmax(0, 1fr); gap: 10px; align-items: center;
  border-bottom: 1px solid var(--c-line-2);
  padding: 9px 2px;
}
.rows--plain .row { grid-template-columns: 28px minmax(0, 1fr); }
.row__order { font-size: 15px; font-weight: 800; color: var(--c-text-faint); text-align: center; }
.row__pos {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-accent-2); color: var(--c-accent-2-ink); font-size: 14px; font-weight: 900;
}
.row__name { font-size: 14.5px; font-weight: 800; line-height: 1.35; min-width: 0; }
.row__name small { display: block; font-size: 10.5px; color: var(--c-text-dim); font-weight: 600; }

/* --- 投手のセット選び --- */
.set {
  margin-top: 14px; padding: 14px;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.set__head { margin-bottom: 10px; }
.set__title { margin: 0; font-size: 16.5px; font-weight: 800; }
.set__sub { margin: 3px 0 0; font-size: 11.5px; color: var(--c-text-dim); font-weight: 600; }
.set__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.setrow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.setrow__name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 800; line-height: 1.35;
}
.setrow__name small {
  display: block; font-size: 10px; color: var(--c-text-dim); font-weight: 600;
}
.setrow__abs { flex: 0 0 auto; display: flex; gap: 4px; }
.setrow__ab {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 9.5px; font-style: normal; font-weight: 700; color: var(--c-text-dim);
}
.setrow__ab b { font-size: 12.5px; font-weight: 800; }
/* セットは5つとも対等な選択肢なので、塗りつぶしたボタンを5つ並べない。
   全部が同じ強さで主張すると、どれを選べばいいのか分からなくなる。
   枠だけにして「並んだ選択肢」に見せ、押したときだけ塗る。 */
.set .btn--take {
  padding: 12px 10px; font-size: 15px;
  background: transparent; color: var(--c-take); border-color: var(--c-take);
}
.set .btn--take:hover { background: var(--c-ok-bg); }
.set .btn--take:active { background: var(--c-take); color: var(--c-take-ink); }


/* --- 「もう1年」の入れ替え --- */
.pagehead__fixed {
  margin: 8px 0 0; font-size: 13px; font-weight: 800; color: var(--c-accent);
}
.swap__heading {
  margin: 14px 0 8px; font-size: 12px; letter-spacing: .1em;
  color: var(--c-text-dim); font-weight: 800;
}
.swap { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.swap__row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.swap__name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700; line-height: 1.35;
}
.swap__name small {
  display: block; font-size: 10.5px; color: var(--c-text-dim); font-weight: 600;
}
.btn--mini {
  flex: 0 0 auto; width: auto; padding: 6px 12px; border-radius: var(--radius);
  font-size: 12px; font-weight: 800;
  background: var(--c-panel); border: 1px solid var(--c-line); color: var(--c-text);
}
.btn--mini:disabled { opacity: .4; }

.tag-tw, .tag-own, .tag-pr {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 2px;
  font-size: 10px; font-style: normal; font-weight: 800; vertical-align: 1px;
}
.tag-tw  { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.tag-own { background: var(--c-ok-bg);   color: var(--c-ok-ink); }
.tag-pr  { background: var(--c-panel-2);  color: var(--c-accent-2); border: 1px solid var(--c-line); }

/* 残りの候補選手（おまけ） */
.rest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; opacity: .85; }
.rest-item {
  display: grid; grid-template-columns: 52px 28px minmax(0, 1fr); gap: 9px; align-items: center;
  background: var(--c-panel); border: 1px dashed var(--c-line);
  border-radius: var(--radius); padding: 8px 12px;
}
.rest-item__no { font-size: 11px; color: var(--c-text-dim); font-weight: 700; }


/* ==================================================
   打順・守備位置
   ================================================== */
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot {
  position: relative;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 10px 10px 10px 8px;
}
.slot--dup { border-color: var(--c-pass); background: var(--c-ng-bg); }
.slot__body { min-width: 0; }
.slot__name { font-size: 15px; font-weight: 800; line-height: 1.35; }
.slot__meta { display: block; font-size: 10.5px; color: var(--c-text-dim); font-weight: 600; }
.slot__pick { margin-top: 7px; display: flex; align-items: center; gap: 7px; }

/* 打順を入れ替えるつまみ。指でつかんで上下に動かす */
.slot__grip {
  align-self: stretch;
  display: grid; justify-items: center; align-content: center; gap: 5px;
  padding: 8px 2px; margin: 0;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel-2); color: var(--c-text);
  font-family: inherit; cursor: grab;
  touch-action: none;            /* つまんだ指でページが動かないように */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slot__grip:active { cursor: grabbing; }
.slot__grip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.slot__order { font-size: 22px; font-weight: 800; font-stretch: 86%; color: var(--c-text); line-height: 1; }
.slot__order small { display: block; margin-top: 1px; font-size: 9px; color: var(--c-text-dim); font-weight: 700; }
.slot__grip-bars {
  width: 16px; height: 9px; opacity: .65;
  background:
    linear-gradient(var(--c-text-dim), var(--c-text-dim)) left top / 100% 2px no-repeat,
    linear-gradient(var(--c-text-dim), var(--c-text-dim)) left center / 100% 2px no-repeat,
    linear-gradient(var(--c-text-dim), var(--c-text-dim)) left bottom / 100% 2px no-repeat;
}

/* 動かしている行 */
.slots.is-sorting { touch-action: none; }
.slot.is-dragging {
  z-index: 5; cursor: grabbing;
  border-color: var(--c-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.slot.is-dragging .slot__grip { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.slot.is-dragging .slot__order { color: #fff; }
.slot.is-dragging .slot__order small,
.slot.is-dragging .slot__grip-bars { color: #fff; }
.slot.is-dragging .slot__grip-bars {
  opacity: .9;
  background:
    linear-gradient(#fff, #fff) left top / 100% 2px no-repeat,
    linear-gradient(#fff, #fff) left center / 100% 2px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 100% 2px no-repeat;
}
.slot.is-dragging .slot__order small { color: rgba(255, 255, 255, .85); }

.slot__fixed {
  flex: 1 1 auto; padding: 8px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 800;
  background: var(--c-warn-bg); color: var(--c-warn-ink);
}

select, .textinput {
  background: var(--c-panel); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 9px 10px; font-family: inherit; font-size: 14px; font-weight: 700;
}
.slot__pick select { flex: 1 1 auto; min-width: 0; width: 100%; }
.slot__pick { min-width: 0; }
select { max-width: 100%; }
.textinput { width: 100%; font-size: 16px; padding: 12px 14px; }

.fixed-slot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.fixed-slot__label { font-size: 11px; color: var(--c-text-dim); font-weight: 800; }
.fixed-slot__note { flex: 1 1 100%; font-size: 11px; color: var(--c-text-dim); }
.fixed-slot select { flex: 1 1 auto; min-width: 0; }


/* ==================================================
   シーズン開始前
   ================================================== */
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio { display: block; position: relative; cursor: pointer; }
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio span {
  display: block; padding: 14px 10px; text-align: center; border-radius: var(--radius);
  background: var(--c-panel); border: 1px solid var(--c-line);
  font-size: 15px; font-weight: 800;
}
.radio input:checked + span {
  background: var(--c-text); border-color: var(--c-text); color: var(--c-bg);
}

.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rolerow {
  display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 9px; align-items: center;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 9px 12px;
}
.rolerow__name { font-size: 14.5px; font-weight: 800; line-height: 1.35; }
.rolerow__name small { display: block; font-size: 10.5px; color: var(--c-text-dim); font-weight: 600; }


/* ==================================================
   シーズン結果
   ================================================== */
/* 見出しの下のタブは、新聞の柱のように罫で示す */
.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--c-text);
}
.tabs button {
  padding: 10px 4px 9px; border: 0; cursor: pointer;
  background: transparent; color: var(--c-text-dim);
  font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .06em;
  border-bottom: 3px solid transparent; margin-bottom: -1.5px;
  -webkit-tap-highlight-color: transparent;
}
.tabs button.is-on { color: var(--c-text); border-bottom-color: var(--c-text); }

.sr-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--c-line);
}
.sr-row {
  border-bottom: 1px solid var(--c-line);
  padding: 13px 2px 14px;
}
.sr-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sr-row__order { flex: 0 0 auto; min-width: 20px; font-size: 15px; font-weight: 800; color: var(--c-text-faint); text-align: center; }
.sr-row__name { font-size: 15px; font-weight: 800; line-height: 1.3; min-width: 0; }
.sr-row__name small { display: block; font-size: 10.5px; color: var(--c-text-dim); font-weight: 600; }

.figs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.figs .fig { display: flex; align-items: baseline; gap: 5px; }
.figs .fig i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--c-text-dim); }
.figs .fig b { font-size: 20px; font-weight: 800; font-stretch: 86%; }
.figs--sub {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-line-2);
  font-size: 12px; color: var(--c-text-dim); font-weight: 700; gap: 5px 14px;
}

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: var(--radius); }
.tablewrap .stat-table { border: 0; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; background: var(--c-panel); }
.stat-table th, .stat-table td { padding: 8px 9px; border-bottom: 1px solid var(--c-line-2); }
.stat-table thead th {
  position: sticky; top: 0; background: var(--c-panel-2);
  font-size: 10.5px; color: var(--c-text-dim); font-weight: 800; letter-spacing: .06em;
  border-bottom: 1.5px solid var(--c-text);
}
.stat-table tbody tr:last-child td { border-bottom: none; }
/* 成績の数字は幅を詰める。列が多い表でも横に伸びない */
.stat-table .num { text-align: right; font-stretch: 88%; }
.stat-table .strong { font-weight: 800; color: var(--c-text); }
.stat-table .nm { font-weight: 800; }
.stat-table tr.is-me { background: var(--c-ok-bg); }
.stat-table tr.is-me .nm { color: var(--c-ok-ink); }

/* スコア表 */
.score-table th, .score-table td { padding: 7px 8px; text-align: center; }
.score-table thead th { font-size: 11px; }
.score-table .nm { text-align: left; position: sticky; left: 0; background: var(--c-panel); }
.score-table tr.is-me .nm { background: var(--c-ok-bg); }

/* 日本シリーズを最後まで飛ばすボタン（画面の右端に貼りつけておく） */
.ng-skip {
  position: fixed; z-index: 32;
  right: 0; bottom: calc(env(safe-area-inset-bottom) + 22px);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 9px 11px 11px;
  background: var(--c-panel); color: var(--c-text);
  border: 1px solid var(--c-line); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow);
  font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1.35;
  text-align: center; cursor: pointer;
}
.ng-skip:active { background: var(--c-panel-2); }
.ng-skip__arrow { font-size: 14px; line-height: 1; }

/* 勝敗投手・セーブ */
.decide { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.decide__item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: var(--c-panel); border: 1px solid var(--c-line);
}
.decide__item b { font-size: 11px; color: var(--c-text-dim); }
.dec { margin-left: 5px; font-size: 11px; }
.dec--w { color: var(--c-take); }
.dec--l { color: var(--c-pass); }
.dec--s { color: var(--c-accent-2); }
.table-note { margin: 10px 2px 0; font-size: 11px; line-height: 1.8; color: var(--c-text-dim); }
.rank-lead { margin: 0 0 14px; text-align: center; font-size: 16px; font-weight: 600; }
.rank-lead b { font-size: 30px; font-weight: 800; font-stretch: 82%; color: var(--c-text); }

.series {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--c-line);
}
.series__text { flex: 1 1 auto; min-width: 0; }
.series li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line-2);
  padding: 11px 2px; font-size: 13.5px; font-weight: 600;
}
.series__label {
  font-size: 10px; letter-spacing: .08em; font-weight: 800; padding: 2px 7px; border-radius: 2px;
  background: var(--c-accent-2); color: var(--c-accent-2-ink);
}
.series__sub { display: block; width: 100%; font-size: 11px; color: var(--c-text-dim); font-weight: 500; }
.series b { margin-left: auto; color: var(--c-text); font-weight: 800; }

.final {
  margin-top: 26px; padding: 28px 18px; text-align: center;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-text);
  border-radius: 0 0 var(--radius) var(--radius);
}
/* 日本一のときは、墨で塗って白抜きにする（号外の見出しのつもり） */
.final--gold {
  background: var(--c-text); border-color: var(--c-text); color: var(--c-bg);
}
.final__eyebrow {
  margin: 0; font-size: 10.5px; letter-spacing: .28em; font-weight: 700;
  color: var(--c-text-dim);
}
.final--gold .final__eyebrow { color: rgba(255, 255, 255, .6); }
:root[data-theme="dark"] .final--gold .final__eyebrow { color: rgba(0, 0, 0, .55); }
.final__label {
  margin: 12px 0 0; font-size: clamp(24px, 7vw, 34px); font-weight: 800;
  letter-spacing: .02em;
}
.final--gold .final__label { color: var(--c-bg); }
.final--gold .final__record { color: rgba(255, 255, 255, .68); }
.final--gold .final__record b { color: var(--c-bg); }
:root[data-theme="dark"] .final--gold .final__record { color: rgba(0, 0, 0, .62); }
.copy-msg { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--c-accent-2); }
.share-note { margin: 6px 0 0; text-align: center; font-size: 11.5px; color: var(--c-text-dim); }
.final__record { margin: 14px 0 0; font-size: 14px; color: var(--c-text-dim); }
.final__record b { font-size: 21px; font-weight: 800; font-stretch: 88%; color: var(--c-text); }


/* ==================================================
   演出・オーバーレイ
   ================================================== */
.complete {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--c-bg); opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.complete.is-on { opacity: .98; pointer-events: auto; cursor: pointer; }
.complete__inner { text-align: center; padding: 20px; }
/* 触れば飛ばせることを、小さく書いておく（黙って待たせない） */
.complete__inner::after {
  content: '画面に触れると進みます';
  display: block; margin-top: 26px;
  font-size: 11px; letter-spacing: .18em; color: var(--c-text-dim);
}
.complete__big {
  margin: 0; font-size: clamp(28px, 8.5vw, 44px); font-weight: 800; color: var(--c-text);
  letter-spacing: .04em;
  animation: pop .42s cubic-bezier(.16, .84, .44, 1);
}
.complete__sub { margin: 12px 0 0; font-size: 15px; color: var(--c-text-dim); }
/* 跳ね返る動き（elastic）は使わない。素早く出て、そこで止まる */
@keyframes pop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- 確かめの窓 ---
   ブラウザの confirm はページの外に出るので、せっかくの紙面が途切れる。
   ここだけは自前で出す。ただし、本当に取り返しがつかないときにだけ使うこと。
   何にでも「よろしいですか？」を出すと、読まずに押す癖がついて意味が無くなる。 */
.ask {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(20, 18, 12, .55);
}
.ask__panel {
  width: 100%; max-width: 380px;
  background: var(--c-panel); color: var(--c-text);
  border: 1px solid var(--c-line); border-top: 3px solid var(--c-text);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px 18px;
  animation: ask-in .18s ease-out;
}
@keyframes ask-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ask__title {
  margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.5;
  font-feature-settings: "palt" 1;
}
.ask__body {
  margin: 0 0 20px; font-size: 13.5px; line-height: 1.9; color: var(--c-text-dim);
}
.ask__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask__actions .btn { font-size: 15px; padding: 13px 10px; }

.overlay {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  background: rgba(0,0,0,.6); display: none; padding: 20px 14px;
}
.overlay.is-on { display: block; }
.overlay__panel { max-width: 420px; margin: 0 auto; }
.overlay__box img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.overlay__hint { margin: 12px 0; text-align: center; font-size: 12px; color: #fff; }
.overlay__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: env(safe-area-inset-bottom); }
.overlay__panel--tall .overlay__actions { grid-template-columns: 1fr; }


/* --- 選手の詳しい画面 --- */
.pd {
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.pd__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pd__avatar { flex: 0 0 56px; width: 56px; }
.pd__avatar .avatar { width: 56px; height: 56px; display: block; }
.pd__name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.pd__sub { margin: 3px 0 0; font-size: 12px; color: var(--c-text-dim); font-weight: 600; }
.pd__sec { margin-top: 18px; }
.pd__title {
  margin: 0 0 9px; padding-bottom: 6px; font-size: 10.5px; letter-spacing: .2em;
  color: var(--c-text-dim); font-weight: 800;
  border-bottom: 1px solid var(--c-line);
}
.pd__note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.7; color: var(--c-text-dim); }
.pd__diff { margin-left: 4px; font-size: 9.5px; font-weight: 800; text-decoration: none; }
.pd__diff--up { color: var(--c-ok-ink); }
.pd__diff--down { color: var(--c-ng-ink); }
.pd__titles { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pd__none { margin: 0 0 10px; font-size: 11.5px; color: var(--c-text-dim); font-weight: 600; }
.pd__crown { margin-left: 3px; font-size: 10px; font-style: normal; color: var(--c-warn-ink); }
.pd__table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.pd__table th, .pd__table td {
  padding: 5px 7px; border-bottom: 1px solid var(--c-line-2); text-align: right;
  font-stretch: 88%;
}
.pd__table thead th {
  font-size: 10px; color: var(--c-text-dim); font-weight: 800; letter-spacing: .06em;
  border-bottom: 1.5px solid var(--c-text); font-stretch: 100%;
}
.pd__table tbody th { font-stretch: 100%; }
.pd__table tbody th { text-align: left; font-weight: 800; }
.pd__sec + .pd__sec .tablewrap { margin-top: 6px; }

/* --- タイトルの小さな札 --- */
.title-tag {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 2px;
  background: var(--c-warn-bg); color: var(--c-warn-ink);
  font-size: 9.5px; font-style: normal; font-weight: 800; vertical-align: 2px;
}
/* 通算成績のところに出す、取ったタイトルの札 */
.pd__titles .title-tag {
  margin-left: 0; padding: 4px 9px; font-size: 11.5px; line-height: 1.35;
}
.pd__titles .title-tag u {
  margin-left: 3px; font-size: 10px; text-decoration: none; opacity: .85;
}
.pd__titles .title-tag s {
  display: block; margin-top: 1px; font-size: 9.5px; font-weight: 700;
  text-decoration: none; opacity: .8;
}

/* --- 名前を押せる行 --- */
.sr-row__head--tap {
  width: 100%; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.sr-row__head--tap .sr-row__name {
  text-decoration: underline dotted; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--c-line);
}
.sr-row__head--tap .sr-row__name small { text-decoration: none; }
.sr-row__head--tap:active { opacity: .6; }


/* ==================================================
   広告枠・フッター・その他
   ================================================== */
/* 中身は部屋（クイズ・ドラフト）と同じ ../js/ads.js が入れる。
   本文とボタンから誤タップが起きない距離を必ず空けること。
   高さを先に確保しておき、配信が始まってもレイアウトがずれないようにする。 */
.ad-slot { margin: 18px 0; text-align: center; }
.ad-slot[hidden] { display: none; }

.ad-slot--room { display: block; max-width: var(--maxw); margin: 8px auto 24px; padding: 0 18px; text-align: center; }
.ad-slot--room .ad-label { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: .16em; color: var(--c-text-dim); }
.ad-slot--room img, .ad-slot--room iframe { max-width: 100%; border: 0; }

.ad-slot .ad-body { min-height: 100px; overflow: hidden; }
@media (min-width: 640px) { .ad-slot .ad-body { min-height: 90px; } }
/* 受け取ったタグは幅が固定されていることがあるので、はみ出さないようにする。
   収まらない分は ads.js が縮める（.ad-scale） */
.ad-slot .ad-body .ad-scale { width: max-content; max-width: none; transform-origin: top left; }
/* タグ側が白背景を前提に作られているので、枠の中だけ文字色を固定する（ダークでも読める） */
.ad-slot .ad-body { color: #333; }
.ad-slot .ad-body a { color: #1a5fb4; }
/* ?adtest=1 のときだけ出る、位置を確かめるための枠 */
.ad-slot.is-placeholder .ad-body {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--c-line); border-radius: var(--radius);
  color: var(--c-text-dim); font-size: 12px;
}
/* 結果画面のものは、ボタンから離して置く */
#ad-result { margin-top: 36px; }
.ad-disclosure { max-width: var(--maxw); margin: 0 auto 28px; padding: 0 18px; text-align: center; font-size: 11px; line-height: 1.7; color: var(--c-text-dim); }

.footer {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--c-line);
  text-align: center; font-size: 12px; color: var(--c-text-dim);
}
.footer p { margin: 6px 0; }
.footer__small { font-size: 11px; line-height: 1.8; opacity: .9; }
.footer__nav { margin-top: 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
.footer__nav a { color: var(--c-text-dim); font-size: 12px; }

.placeholder {
  margin-top: 40px; padding: 36px 20px;
  border: 1px dashed var(--c-line); border-radius: var(--radius);
  text-align: center; color: var(--c-text-dim); font-size: 14px;
}


/* ==================================================
   画面が広いとき
   ================================================== */
@media (min-width: 640px) {
  .hero__lead { font-size: 16px; }
}

/* 入れ替えのカードに添える「この◯年の変化」 */
.grow {
  margin: 8px 0 0; padding: 8px 10px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel-2);
  font-size: 11px; line-height: 1.9; color: var(--c-text);
}
.grow b { display: block; font-size: 10px; color: var(--c-text-dim); }
.grow__item { display: inline-block; margin-right: 10px; white-space: nowrap; }

/* 弾道・最速・変化球（S〜Gでは表さない数字） */
.ex {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin-top: 6px;
}
.ex__item {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-panel-2);
  font-size: 10.5px; line-height: 1.4; white-space: nowrap;
}
.ex__item i { font-style: normal; color: var(--c-text-dim); }
.ex__item b { font-size: 12.5px; font-weight: 800; color: var(--c-text); }
.ex__item s { text-decoration: none; font-size: 9.5px; color: var(--c-text-dim); }
.ex__item--ball b { color: var(--c-accent-2); }

/* 名球会 */
.pd__meikyukai {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--c-warn-bg); border: 1px solid var(--c-warn-ink);
  color: var(--c-warn-ink);
}
.pd__meikyukai b { font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.pd__meikyukai span { font-size: 11px; }

/* NPBの記録達成（名球会とは別枠） */
.pd__records {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.pd__records b {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: var(--c-text-dim); margin-right: 2px;
}
.pd__records i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--c-ok-bg); color: var(--c-ok-ink);
  border: 1px solid var(--c-ok-ink);
}