/* ==================================================
   高校野球  style.css

   見た目の方針は「モダンなレトロゲーム風」。
   青空の下、青い太枠のパネルに白い見出し帯、黄色の決定ボタン。
   野球ゲームの画面のように、枠・帯・押しボタンで情報を整理する。
   （画面の並びと遊び方は変えていない。変えたのは色と形だけ）

   ・色の役割は決めてある。色だけで意味を伝えず、文字やラベルも必ず添える
       青   … 枠と見出し帯。ヘッダー・パネル・スコアボード
       黄   … 「今」と「決定」。決定ボタン・選択中・今の回・今の打者・今の手順
       緑   … 攻撃中・上がった能力・勝利
       金   … 優勝・覚醒・本塁打・得点
       赤   … 危ないこと。消す・足りない・引き抜き失敗・アウト
       灰青 … 補足の文字・罫線
   ・能力の評価（S〜G）の色はパワプロの並びに合わせた別枠で、意味があるので変えない
   ・スマートフォン優先。横に長い表は .tablewrap に入れて、そこだけ横にスクロールさせる
   ・明るい配色（昼の試合）が基本。右上のボタンから暗い配色（ナイター）にも切り替えられる
   ・画面の幅の区切り（変数にできないのでここに書いておく）
       380px 未満 … いちばん細いスマートフォン。試合中の表をもう一段詰める
       440px 未満 … ふつうのスマートフォン
       720px 以上 … タブレット・パソコン。2列に並べる
   ================================================== */

/* ---------- 欧文・数字（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 {
  /* --- 空（画面の地） --- */
  --sky-1:     #3f93e6;   /* 上のほうの空 */
  --sky-2:     #a6d4fb;
  --sky-3:     #d9ecfd;
  --sky-4:     #e8f3fe;   /* 下のほう。ここに文字が載っても読める明るさ */
  --cloud:     rgba(255, 255, 255, .85);

  /* --- 面・文字 --- */
  --bg:        #d9ecfd;   /* 空の色が出せないところの地 */
  --bg-2:      #dfeafa;   /* へこんだ面・押せる面の地 */
  --panel:     #ffffff;   /* パネルの中身の面 */
  --panel-2:   #eaf3ff;   /* 表の見出し・パネルの中の帯 */
  --ink:       #10264f;
  --ink-mute:  #3c5277;
  --ink-faint: #4f6286;   /* 白地でも水色の地でも 4.5:1 を保つ、いちばん薄い文字 */
  --line:      #b6cce8;
  --line-soft: #d9e6f6;

  /* --- 青（枠と見出し帯） --- */
  --frame:       #5c9ded;   /* パネルの太枠。中の文字（能力の評価）より目立たない明るさ */
  --frame-rim:   #ffffff;   /* 太枠の外側のふち（二重の縁取りに見せる） */
  --blue-hi:     #2a6cd8;   /* 帯のグラデーションの明るいほう（白い文字が 4.5:1 を保つ） */
  --blue-lo:     #1446a6;   /* 帯のグラデーションの暗いほう */
  --blue-deep:   #0b2c73;   /* 押しボタンの下の影・文字の縁取り */
  --brand:       #1648a8;   /* 文字・線に使う青 */
  --brand-fill:  #1a56c4;   /* 塗りに使う青 */
  --brand-ink:   #ffffff;
  --brand-soft:  #e1edff;
  /* パネルの見出し帯。薄い水色に紺の文字（濃い帯だと表の中の評価の色が埋もれるため） */
  --strip-hi:    #eaf4ff;
  --strip-lo:    #d3e6fd;
  --strip-ink:   #10264f;
  --strip-edge:  #a9cbf3;

  /* --- 黄（今・決定） --- */
  --yel-hi:      #ffe45c;
  --yel-lo:      #ffb703;
  --yel-edge:    #c47a00;   /* 黄色いボタンのふちと下の影 */
  --yel-ink:     #10264f;   /* 黄色の上の文字 */
  --yel-soft:    #fff4c2;

  --good:        #17803a;   /* 緑。上がった・勝ち・攻撃中 */
  --good-fill:   #178038;
  --good-soft:   #e0f5e5;
  --gold:        #8f5d00;   /* 金。白地で読める濃さ */
  --gold-fill:   #ffc21a;
  --gold-soft:   #fff1c7;
  --danger:      #c3112d;
  --danger-fill: #dc2741;
  --danger-soft: #ffe3e7;

  /* --- スコアボード・掲示板（濃い青の面） --- */
  --board:       #1a4aa6;
  --board-2:     #2560c4;
  --board-ink:   #ffffff;
  --board-mute:  #e3eeff;
  --board-line:  rgba(255, 255, 255, .18);
  --board-now:   #ffd43b;   /* 今の回・今の手順 */
  --board-now-ink:#10264f;
  --board-hot:   #ffd43b;   /* 点の合計など、目立たせる数字 */
  --board-edge:  #7cc4ff;   /* 掲示板のふち */

  /* 前からある名前。JS（走者の色）や古いルールが参照しているので残す */
  --accent:     var(--brand);
  --accent-ink: var(--brand-ink);
  --crimson:    var(--gold);
  --ok:         var(--good);
  --ng:         var(--danger);

  /* --- 文字 --- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Archivo', "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
               "Noto Sans JP", Meiryo, sans-serif;
  /* 見出しは丸ゴシック（端末に入っていれば）。ゲームの画面らしさを出す。
     読み込む字体は増やさない */
  --font-display: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "BIZ UDPGothic",
               "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-num:  'Archivo', -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --fs-2xs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  14px;
  --fs-base:16px;
  --fs-lg:  18px;
  --fs-xl:  21px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --lh-tight: 1.3;
  --lh:       1.6;
  --lh-loose: 1.85;

  /* --- 余白（4の倍数） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* --- 幅・線・角・影 --- */
  --maxw:      860px;
  --maxw-wide: 1080px;
  --bw:        1px;
  --bw-strong: 2px;
  --bw-frame:  3px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* 影は「下にずらした濃い影」＋「ぼかした影」。押しボタンやパネルが浮いて見える */
  --shadow-sm: 0 2px 0 rgba(11, 44, 115, .22), 0 4px 10px rgba(11, 44, 115, .12);
  --shadow:    0 3px 0 rgba(11, 44, 115, .28), 0 8px 20px rgba(11, 44, 115, .16);
  --shadow-lg: 0 4px 0 rgba(11, 44, 115, .3), 0 24px 56px rgba(11, 44, 115, .32);

  /* --- 操作する部品の大きさ --- */
  --btn-h:    50px;
  --btn-h-sm: 38px;
  --input-h:  46px;
  --focus:    0 0 0 3px #ffffff, 0 0 0 6px #ff7a00;

  /* 能力の評価の色。パワプロの並びに合わせてある。
     白い地の上でも読めるように、黄色と水色だけ少し濃くしてある */
  --r-s: #b9850f;   /* 金（Sだけ塗りつぶし） */
  --r-a: #cf1487;   /* ピンク */
  --r-b: #d11f1f;   /* 赤 */
  --r-c: #d4700b;   /* オレンジ */
  --r-d: #a88300;   /* 黄 */
  --r-e: #23893d;   /* 緑 */
  --r-f: #2b8fbd;   /* 薄い水色 */
  --r-g: #858c95;   /* 灰 */
  --r-s-ink: #fffbe8;
}

/* 暗い配色（ナイター）。右上のボタンで選んだとき */
:root[data-theme="dark"] {
  --sky-1:     #040b22;
  --sky-2:     #0a1d4c;
  --sky-3:     #0c2156;
  --sky-4:     #0b1c49;
  --cloud:     rgba(160, 200, 255, .10);
  --bg:        #0b1c49;
  --bg-2:      #16275a;
  --panel:     #162c62;
  --panel-2:   #1f3876;
  --ink:       #eef4ff;
  --ink-mute:  #bfd0f0;
  --ink-faint: #9db2da;
  --line:      #38559a;
  --line-soft: #2a4482;
  --frame:       #3d86f0;
  --frame-rim:   #0a1a45;
  --blue-hi:     #2f6fd8;
  --blue-lo:     #143d96;
  --blue-deep:   #030d2c;
  --brand:       #9cc6ff;
  --brand-fill:  #2a66d4;
  --brand-soft:  #23407f;
  --strip-hi:    #2a4c92;
  --strip-lo:    #213f7d;
  --strip-ink:   #eef4ff;
  --strip-edge:  #3d86f0;
  --yel-soft:    #3a3110;
  --good:        #6fdc8e;
  --good-fill:   #1a7d3c;
  --good-soft:   #123a24;
  --gold:        #ffd04d;
  --gold-soft:   #3a3110;
  --danger:      #ff8a98;
  --danger-fill: #d42640;
  --danger-soft: #3d1422;
  --board:       #0f2d70;
  --board-2:     #1a3d8a;
  --board-edge:  #3d86f0;
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .35);
  --shadow:    0 3px 0 rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .4);
  --shadow-lg: 0 4px 0 rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .6);
  --focus:     0 0 0 3px #0b1c49, 0 0 0 6px #ffb347;
  --r-s: #e3b53f;
  --r-a: #f45bb5;
  --r-b: #f2564e;
  --r-c: #f5a33a;
  --r-d: #efd749;
  --r-e: #5fcb6e;
  --r-f: #7fd0ee;
  --r-g: #8b9197;
  --r-s-ink: #241a04;
}
/* 何も選んでいないときは、端末の設定に合わせる（中身は上と同じ） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-1:     #040b22;
    --sky-2:     #0a1d4c;
    --sky-3:     #0c2156;
    --sky-4:     #0b1c49;
    --cloud:     rgba(160, 200, 255, .10);
    --bg:        #0b1c49;
    --bg-2:      #16275a;
    --panel:     #162c62;
    --panel-2:   #1f3876;
    --ink:       #eef4ff;
    --ink-mute:  #bfd0f0;
    --ink-faint: #9db2da;
    --line:      #38559a;
    --line-soft: #2a4482;
    --frame:       #3d86f0;
    --frame-rim:   #0a1a45;
    --blue-hi:     #2f6fd8;
    --blue-lo:     #143d96;
    --blue-deep:   #030d2c;
    --brand:       #9cc6ff;
    --brand-fill:  #2a66d4;
    --brand-soft:  #23407f;
    --strip-hi:    #2a4c92;
    --strip-lo:    #213f7d;
    --strip-ink:   #eef4ff;
    --strip-edge:  #3d86f0;
    --yel-soft:    #3a3110;
    --good:        #6fdc8e;
    --good-fill:   #1a7d3c;
    --good-soft:   #123a24;
    --gold:        #ffd04d;
    --gold-soft:   #3a3110;
    --danger:      #ff8a98;
    --danger-fill: #d42640;
    --danger-soft: #3d1422;
    --board:       #0f2d70;
    --board-2:     #1a3d8a;
    --board-edge:  #3d86f0;
    --shadow-sm: 0 2px 0 rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .35);
    --shadow:    0 3px 0 rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .4);
    --shadow-lg: 0 4px 0 rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .6);
    --focus:     0 0 0 3px #0b1c49, 0 0 0 6px #ffb347;
    --r-s: #e3b53f;
    --r-a: #f45bb5;
    --r-b: #f2564e;
    --r-c: #f5a33a;
    --r-d: #efd749;
    --r-e: #5fcb6e;
    --r-f: #7fd0ee;
    --r-g: #8b9197;
    --r-s-ink: #241a04;
  }
}

/* =========================================================
   土台
   ========================================================= */
* { box-sizing: border-box; }

/* 地は青空。上は濃い青、下へ行くほど明るくして、下のほうの文字も読めるようにする。
   雲は飾り（画像は使わず、ぼかした楕円で描く） */
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--sky-4);
  background-image:
    radial-gradient(ellipse 200px 46px at 12% 150px, var(--cloud), transparent 70%),
    radial-gradient(ellipse 130px 34px at 24% 128px, var(--cloud), transparent 70%),
    radial-gradient(ellipse 260px 56px at 86% 230px, var(--cloud), transparent 70%),
    radial-gradient(ellipse 150px 36px at 74% 210px, var(--cloud), transparent 70%),
    linear-gradient(180deg, var(--sky-1) 0, var(--sky-2) 280px, var(--sky-3) 560px, var(--sky-4) 900px);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
body.is-modal { overflow: hidden; }

h1, h2, h3, h4 { font-feature-settings: "palt" 1; letter-spacing: 0; }
table, .stat__num, .result-score, .scoreboard, .train-meta b, .verdict__score,
.rankval, .gr__up, .tcard__up, .cardline__up { font-variant-numeric: tabular-nums; }

/* キーボードで動かしたときの枠。押せるものはすべて同じ枠を出す */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.btn:focus-visible, .speedbtn:focus-visible, .sortbtn:focus-visible, .skip:focus-visible,
.spick__item:focus-visible, .swapitem:focus-visible, .lutab:focus-visible { box-shadow: var(--focus); }
tr.prow:focus-visible { box-shadow: inset 0 0 0 3px #ff7a00; }

/* 縁取り文字。レトロゲームの見出しのように、太い縁と下の影を付ける */
.outline-text, .hero__title, .verdict__word, .champ__title, .opening__title, .nextup__title, .curtain b {
  text-shadow:
    2px 0 0 var(--blue-deep), -2px 0 0 var(--blue-deep), 0 2px 0 var(--blue-deep), 0 -2px 0 var(--blue-deep),
    2px 2px 0 var(--blue-deep), -2px 2px 0 var(--blue-deep), 2px -2px 0 var(--blue-deep), -2px -2px 0 var(--blue-deep),
    0 5px 0 var(--blue-deep);
}

/* =========================================================
   ヘッダー（青のグラデーションの帯に黄色の下線。中身は広い画面でも中央の幅にそろえる）
   ========================================================= */
.appbar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px max(16px, calc((100% - var(--maxw-wide)) / 2 + 20px));
  background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue-lo) 100%);
  color: #ffffff;
  border-bottom: 3px solid var(--yel-lo);
  box-shadow: 0 2px 0 var(--blue-deep), 0 6px 14px rgba(11, 44, 115, .25);
  position: sticky; top: 0; z-index: 40;
}
.appbar__home {
  flex: none; display: inline-flex; align-items: center; min-height: 36px;
  color: #d6e7ff; text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap;
}
.appbar__title {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 9px;
  margin-left: 2px; padding: 4px 0;
  border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .03em;
  text-shadow: 0 2px 0 var(--blue-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 本塁ベースの形の印（黄）。どの画面でもこのゲームだと分かる目印 */
.appbar__title::before {
  content: ''; flex: none; width: 16px; height: 17px;
  background: var(--yel-hi);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  filter: drop-shadow(0 2px 0 var(--blue-deep));
}
.appbar__icon, .appbar__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 36px; min-width: 36px; padding: 0 12px;
  border: 2px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  color: #ffffff; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 0 var(--blue-deep);
  transition: background .15s ease, border-color .15s ease;
}
.appbar__icon { padding: 0; }
.appbar__btn span { font-size: var(--fs-sm); font-weight: 700; }
.appbar__icon:active, .appbar__btn:active { transform: translateY(2px); box-shadow: none; }
.appbar :focus-visible { box-shadow: 0 0 0 2px var(--blue-lo), 0 0 0 5px var(--yel-hi); }
@media (max-width: 379px) {
  .appbar { gap: 6px; }
  .appbar__title { font-size: 15.5px; }
  .appbar__btn { padding: 0 9px; }
}

/* =========================================================
   画面
   ========================================================= */
#app { min-height: 50vh; }
.screen { display: none; }
.screen.is-active { display: block; animation: fade .22s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.is-active { animation: none; } }

.container { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
@media (min-width: 440px) { .container { padding-left: var(--sp-5); padding-right: var(--sp-5); } }
.container--wide { max-width: var(--maxw-wide); }

/* =========================================================
   見出し・文章
   ========================================================= */
/* 画面の見出し。青いリボンに白い文字、頭に黄色の印 */
.section-title {
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  margin: 4px 0 var(--sp-3); padding: 7px 18px 7px 12px;
  background: linear-gradient(180deg, #3f8ae8, var(--blue-hi));
  color: #ffffff;
  border: 2px solid var(--frame-rim); border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--frame), 0 3px 0 2px var(--blue-lo);
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: var(--lh-tight);
  text-shadow: 0 2px 0 var(--blue-deep);
}
.section-title::before {
  content: ''; flex: none; width: 6px; align-self: stretch; min-height: 20px; border-radius: 3px;
  background: var(--yel-hi); box-shadow: 0 2px 0 var(--yel-edge);
}
/* 引き抜きの成功・失敗は、リボンの色でも分かるように */
#poach-title.is-win { background: linear-gradient(180deg, #2fb35a, #15793a); }
#poach-title.is-lose { background: linear-gradient(180deg, #e8425a, #a5102a); }
.section-lead { margin: 0 0 var(--sp-4); font-size: var(--fs-md); color: var(--ink-mute); line-height: 1.75; }
.section-lead b { color: var(--ink); font-weight: 800; }
/* 小見出し。表や一覧の上に置く、青い帯 */
.sub {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  margin: var(--sp-6) 0 var(--sp-2); padding: 5px 12px;
  background: linear-gradient(180deg, var(--strip-hi), var(--strip-lo));
  border: 2px solid var(--strip-edge); border-left: 6px solid var(--frame);
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; color: var(--strip-ink);
}
.sub__note { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-mute); }
.note { font-size: 13px; color: var(--ink-mute); }
.tiny { font-size: 11px; color: var(--ink-mute); }

/* =========================================================
   パネルの共通の形
   白い中身に青い太枠、その外に白いふち。ゲームのウィンドウのように見せる
   ========================================================= */
.dataset, .lineupcard, .capbox, .traincard, .incoming, .gr, .retire, .growthbox,
.rosterbox, .field--boxed, .taken, .verdict__box, .soccer-log, .rules, .about, .form,
.stage, .tablewrap, .palogwrap {
  background: var(--panel);
  border: var(--bw-frame) solid var(--frame);
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--frame-rim), var(--shadow);
}

/* 濃い青の掲示板の面（表紙・開幕・次の試合・点数・対戦カード） */
.hero, .opening, .nextup, .champ, .result-score, .section-lead.vs, .verdict__score, .sclock {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(180deg, var(--board-2), var(--board));
  color: var(--board-ink);
  border: var(--bw-frame) solid var(--board-edge);
  box-shadow: 0 0 0 2px var(--frame-rim), var(--shadow);
}

/* =========================================================
   トップ
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  margin: 4px 0 0; padding: 34px 20px 46px; text-align: center;
  border-radius: var(--radius-lg);
}
/* 内野の白線（飾り） */
.hero::before {
  content: ''; position: absolute; left: 50%; bottom: -170px; width: 300px; height: 300px;
  transform: translateX(-50%) rotate(45deg);
  border: 3px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04);
  pointer-events: none;
}
/* 下に芝の帯 */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 24px, transparent 24px 48px),
    linear-gradient(180deg, #3fbf5f, #1f8a3e);
  border-top: 3px solid #ffffff;
}
.hero > * { position: relative; }
.hero__eyebrow {
  display: inline-block; margin: 0; padding: 2px 12px; border-radius: var(--radius-pill);
  background: var(--yel-hi); color: var(--yel-ink); box-shadow: 0 2px 0 var(--yel-edge);
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; font-family: var(--font-num);
}
.hero__title {
  margin: 14px 0 12px; font-family: var(--font-display);
  font-size: clamp(30px, 8.6vw, 54px); font-weight: 800;
  letter-spacing: .03em; line-height: 1.15; text-wrap: balance; color: #ffffff;
}
.hero__lead { margin: 0; font-size: 16px; font-weight: 700; color: var(--board-mute); line-height: 1.6; }
.hero__lead b { color: var(--yel-hi); font-weight: 800; }

/* 1年の流れ。番号つきの札を並べる */
.rules { margin: var(--sp-5) 0 0; padding: var(--sp-4); }
.rules__heading {
  margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; color: var(--brand);
}
.flow {
  list-style: none; margin: 0; padding: 0; counter-reset: flow;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px;
}
.flow li {
  counter-increment: flow; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line);
  font-size: var(--fs-md);
}
.flow li::before {
  content: counter(flow); flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); color: var(--yel-ink);
  border: 2px solid var(--yel-edge);
  font: 800 12px/1 var(--font-num);
}
.flow b { font-weight: 800; }

/* =========================================================
   ボタン（押すと沈む押しボタン）
   ========================================================= */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--sp-6) 0 6px; }
.actions--modal { margin-top: var(--sp-4); }
.btn {
  flex: 1 1 auto; min-height: var(--btn-h); padding: 10px 20px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 2px solid var(--frame); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2)); color: var(--brand);
  box-shadow: 0 4px 0 var(--blue-lo);
  margin-bottom: 4px;
  font: inherit; font-family: var(--font-display); font-size: 15.5px; font-weight: 800; line-height: 1.35;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .08s ease;
  /* すばやく連打したときにダブルタップのズームと誤認されて
     タップが取りこぼされることがあるので、ここでは単発タップだけを見る */
  touch-action: manipulation;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-lo); }
/* 決定は黄色。右に「›」を付けて「次へ進む」ボタンだと分かるようにする */
.btn--primary {
  background: linear-gradient(180deg, var(--yel-hi) 0%, var(--yel-lo) 100%);
  border-color: var(--yel-edge); color: var(--yel-ink);
  box-shadow: 0 4px 0 var(--yel-edge), 0 6px 14px rgba(196, 122, 0, .3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.btn--primary::after {
  content: '›'; margin-left: 10px; font-size: 1.35em; font-weight: 800; line-height: 1; transform: translateY(-1px);
}
.btn--primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--yel-edge); }
/* 押せないときは灰色にする（黄色のままだと押せそうに見える） */
.btn--primary:disabled {
  background: var(--bg-2); border-color: var(--line); color: var(--ink-mute);
  box-shadow: 0 4px 0 var(--line); text-shadow: none; opacity: 1;
}
.btn--wide { flex-basis: 100%; }
.btn--danger {
  background: linear-gradient(180deg, var(--panel), var(--danger-soft));
  border-color: var(--danger-fill); color: var(--danger); box-shadow: 0 4px 0 #8f0c22;
}
.btn--danger:active:not(:disabled) { box-shadow: 0 1px 0 #8f0c22; }
.btn--small { flex: none; min-height: var(--btn-h-sm); padding: 4px 14px; font-size: 13.5px; box-shadow: 0 3px 0 var(--blue-lo); }
.btn--small.btn--primary { box-shadow: 0 3px 0 var(--yel-edge); }
.btn--tiny {
  min-height: 26px; padding: 1px 7px; margin-bottom: 2px; font-size: 12px; font-weight: 800; flex: none;
  border-width: 1.5px; border-radius: 6px; box-shadow: 0 2px 0 var(--blue-lo);
}
.btn--tiny.btn--primary::after, .btn--small.btn--primary::after { content: none; }
.btn[hidden] { display: none; }
.linkbtn {
  border: 0; background: none; padding: 0; color: var(--brand);
  font: inherit; font-size: inherit; font-weight: 700; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
  text-underline-offset: 3px; cursor: pointer;
}

/* =========================================================
   表
   ========================================================= */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 10px; }
/* パネルの中の表は、パネルの枠をそのまま使う */
.dataset .tablewrap, .lineupcard .tablewrap, .incoming .tablewrap, .modal .tablewrap,
.rosterbox .tablewrap, .retire .tablewrap, .palogwrap .tablewrap, .taken .tablewrap {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
thead th {
  font-size: var(--fs-2xs); font-weight: 800;
  color: var(--brand); background: var(--panel-2);
  border-bottom: 2px solid var(--line); text-align: center;
}
td.c, th.c { text-align: center; }
td.nm, th.nm { text-align: left; min-width: 5.6em; }
/* 細い画面では余白を詰める。詰めないと打撃成績の右はし（盗塁・通算打率）が
   画面の外に出てしまい、横に送らないと読めなくなる */
@media (max-width: 439px) {
  .box th, .box td { padding: 5px 3px; }
  .box td.nm, .box th.nm { min-width: 4.6em; }
}
@media (max-width: 379px) {
  .box th, .box td { padding: 5px 1px; font-size: 11.5px; }
  .box thead th { font-size: 10px; }
  .box td.nm, .box th.nm { min-width: 4.2em; }
}
td.hl { font-weight: 800; }
.roster tbody tr, .box tbody tr, .lineup tbody tr { cursor: pointer; }
.ord { color: var(--ink-faint); font-size: 11px; font-family: var(--font-num); font-weight: 800; }
.hand { font-size: 10.5px; color: var(--ink-mute); }
/* 変化球の欄。行の高さが揃うように1行に収め、はみ出すぶんは
   表ごと横にスクロールさせる（球種の数で行の高さが変わらない） */
.t-break { font-size: 11px; white-space: nowrap; }
.t-break .luball { display: inline-block; margin: 0 2px 0 0; vertical-align: middle; }
.roster td, .roster th { vertical-align: middle; }
/* 狭い画面では少しでも多く収まるように詰める */
@media (max-width: 540px) {
  .roster th, .roster td { padding: 6px 4px; }
  .roster .hand { font-size: 10px; }
  .roster .luball { font-size: 10px; padding: 0 2px; }
}
.g1 { color: var(--ink-faint); }
.g3 { font-weight: 800; }
.awake-dot { font-style: normal; color: var(--gold); font-size: 9px; margin-left: 3px; vertical-align: 2px; }

/* 能力の評価（S〜G）。文字の色と文字そのものの両方で見分けられる */
.rank, .stat__rank {
  display: inline-block; min-width: 1.15em; text-align: center;
  font-weight: 800; font-size: 13.5px; letter-spacing: 0; font-family: var(--font-num);
}
/* S は金色。文字をそのまま金の縦グラデーションにして、ほかの色より目立たせる */
.rank-S, .stat__rank.rank-S {
  color: #e0a400;
  background: linear-gradient(180deg, #ffe680 0%, #f7bd00 48%, #d18a00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 .5px rgba(190, 125, 0, .8));
  font-weight: 900;
}

/* 守備適性の文字は色を付けない（能力の評価と見分けるため） */
.apt-letter {
  display: inline-block; min-width: 1.15em; text-align: center;
  font-weight: 700; font-size: 12px; color: var(--ink);
}
.rank + .rank { margin-left: 3px; }
.rank-A, .stat__rank.rank-A { color: var(--r-a); }
.rank-B, .stat__rank.rank-B { color: var(--r-b); }
.rank-C, .stat__rank.rank-C { color: var(--r-c); }
.rank-D, .stat__rank.rank-D { color: var(--r-d); }
.rank-E, .stat__rank.rank-E { color: var(--r-e); }
.rank-F, .stat__rank.rank-F { color: var(--r-f); }
.rank-G, .stat__rank.rank-G { color: var(--r-g); }

/* =========================================================
   パネルの見出し帯（薄い水色に紺の文字）
   濃い青の帯にすると、表の中の能力の評価（S〜G）の色が埋もれるので薄くしてある
   ========================================================= */
.dataset__head, .lineupcard__title, .traincard__kind, .verdict__where {
  background: linear-gradient(180deg, var(--strip-hi), var(--strip-lo));
  color: var(--strip-ink);
  border-bottom: 2px solid var(--strip-edge);
}

/* =========================================================
   チーム作り（候補の一覧）
   ========================================================= */
.setlist { display: flex; flex-direction: column; gap: var(--sp-6); }
.dataset { padding: 0 0 6px; overflow: hidden; }
.dataset__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; }
.dataset__no {
  margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 800; flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
}
.dataset__no::before { content: ''; width: 6px; height: 20px; border-radius: 3px; background: var(--frame); }
.dataset__meta { margin: 0; flex: 1 1 100%; order: 3; font-size: 12px; color: var(--ink-mute); }
.dataset__best { color: var(--ink); font-weight: 800; }
.dataset__pick { flex: 0 0 auto; min-height: 40px; font-size: 14px; padding: 6px 14px; margin-bottom: 4px; }
.dataset .tablewrap { margin: 0; }

/* =========================================================
   オーダー（スタメン表）
   ========================================================= */
.lineupcard { padding: 0 0 12px; overflow: hidden; }
.lineupcard__title { margin: 0; padding: 9px 14px; font-family: var(--font-display); font-size: 15.5px; font-weight: 800; }
.lineupcard .tablewrap { margin: 0; }
.lineupcard__p { margin: 10px 14px 2px; font-size: 12px; color: var(--ink-mute); white-space: normal; line-height: 1.65; }
.lineupcard__p .pitname { font-weight: 800; }

/* 打順表の見出し。数字の列が何なのかは、書いておかないと分からない */
.lineup thead th {
  font-size: 10px; font-weight: 800;
  color: var(--brand); white-space: nowrap;
  padding: 5px 4px; text-align: center;
}
.lineup thead th.nm { text-align: left; }
.lineup td.nm { font-weight: 800; }

/* 先発を選ぶ列 */
.spick { margin: 12px 14px 0; border-top: 2px dashed var(--line); padding-top: 10px; }
.spick__head { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; color: var(--brand); margin-bottom: 6px; }
.spick__list { display: flex; flex-direction: column; gap: 8px; }
.spick__item {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 1px 8px; width: 100%; text-align: left;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: 0 3px 0 var(--line);
  padding: 8px 10px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
/* 選んでいるものは黄色 */
.spick__item.is-on {
  border-color: var(--yel-edge); background: linear-gradient(180deg, #fff6c8, var(--yel-hi));
  box-shadow: 0 3px 0 var(--yel-edge); color: var(--yel-ink);
}
.spick__item.is-on .spick__meta, .spick__item.is-on .spick__fat { color: var(--yel-ink); }
.spick__nm { font-size: 13.5px; font-weight: 800; }
.spick__item.is-on .spick__nm::after {
  content: '先発'; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 800; vertical-align: 1px;
  background: var(--brand-fill); color: #ffffff;
}
.capsel .spick__item.is-on .spick__nm::after { content: '主将'; }
.spick__meta { grid-column: 1 / -1; font-size: 11px; color: var(--ink-mute); }
.spick__balls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }

/* 変化球の札（名前＋切れ味） */
.pball {
  display: inline-flex; align-items: baseline; gap: 2px;
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--panel);
  font-size: 10px; color: var(--ink-mute); white-space: nowrap;
}
.pball b { font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* スタメンの下に出す先発の一行 */
.spmeta { display: block; margin-top: 2px; }
.spballs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.spfat { color: var(--ink-faint); }
.spfat.is-tired { color: var(--danger); font-weight: 800; }
.spick__fat { grid-column: 2; font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.spick__fat.is-tired { color: var(--danger); font-weight: 800; }
.twocol { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .twocol { grid-template-columns: 1fr 1fr; } }
/* 「A校 対 B校」。対戦カードの帯にする */
.section-lead.vs {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 0;
  padding: 12px 14px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #ffffff;
  text-shadow: 0 2px 0 var(--blue-deep);
}
.vs i {
  font-style: normal; margin: 0 12px; padding: 2px 9px; border-radius: 6px;
  background: var(--yel-hi); color: var(--yel-ink); box-shadow: 0 2px 0 var(--yel-edge);
  font-size: 12px; font-weight: 800; text-shadow: none;
}

/* =========================================================
   特訓
   ========================================================= */
/* 残りの回数。数を大きく出して、あと何回選べるかがすぐ分かるようにする */
.train-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--sp-4); }
.train-meta > span {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--board-2), var(--board)); color: var(--board-mute);
  border: 2px solid var(--board-edge); box-shadow: 0 3px 0 var(--blue-deep);
  font-size: 12px; font-weight: 800;
}
.train-meta b { color: var(--board-hot); font-size: 20px; font-family: var(--font-num); font-weight: 800; }
.train-meta b:first-child { margin-left: auto; }
.card-slot { min-height: 190px; }
.traincard {
  padding: 0 16px 10px; overflow: hidden;
  animation: cardin .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes cardin { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .traincard { animation: none; } }
/* 効き目の段階で枠の色が変わる。猛特訓はひと目で分かるように */
.traincard--l { border-color: var(--good-fill); }
.traincard--xl { border-color: var(--yel-lo); box-shadow: 0 0 0 2px var(--frame-rim), 0 0 0 5px color-mix(in srgb, var(--yel-lo) 45%, transparent), var(--shadow); }
/* カードの頭。何の練習かを帯に書く */
.traincard__kind {
  margin: 0 -16px 4px; padding: 10px 16px 9px;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.traincard--l .traincard__kind { background: linear-gradient(180deg, color-mix(in srgb, var(--good-soft) 60%, var(--panel)), var(--good-soft)); border-bottom-color: var(--good-fill); }
.traincard--xl .traincard__kind { background: linear-gradient(180deg, color-mix(in srgb, var(--yel-soft) 60%, var(--panel)), var(--yel-soft)); border-bottom-color: var(--yel-lo); }
.traincard__n { font-size: 11px; font-weight: 700; color: var(--ink-mute); }

/* 札（ラベル）。状態や種類を短い言葉で示す。色に頼らず文字で読めるようにする */
.traincard__tier, .traincard__multi, .capmark, .gr__awake, .retire__draft, .tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; border-radius: 6px; border: 2px solid currentColor;
  font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .04em; line-height: 1.5;
  white-space: nowrap; text-shadow: none;
}
.traincard__tier { color: #0d5426; background: #c9f2d4; border-color: #0d5426; }
.traincard--xl .traincard__tier { color: var(--yel-ink); background: var(--yel-hi); border-color: var(--yel-edge); }

/* 主将の印。選手の詳細に出す */
.capmark { color: var(--brand); background: var(--brand-soft); }

/* キャプテンの欄 */
.capbox {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0; padding: 12px 14px;
}
.capbox.is-empty { border-color: var(--danger-fill); background: var(--danger-soft); }
.capbox__label {
  padding: 2px 9px; border-radius: 6px;
  background: var(--brand-fill); color: #ffffff;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em;
}
.capbox.is-empty .capbox__label { background: var(--danger-fill); }
/* 文字がつぶれないよう最低幅を持たせ、入らなければボタンを次の行へ送る */
.capbox__name { flex: 1 1 9em; min-width: 0; font-size: 15px; }
.capbox__name b { font-weight: 800; }
.capbox__name span { display: block; font-size: 11.5px; color: var(--ink-mute); }
.capbox__none { flex: 1 1 9em; font-size: 13px; color: var(--danger); font-weight: 800; }
.capbox .btn { flex: 0 0 auto; margin-left: auto; }
.capwarn {
  margin: 10px 0 0; text-align: center; font-size: 13px;
  color: var(--danger); font-weight: 800;
}
/* キャプテンを選ぶ一覧は少し詰めて、多くの部員が一度に見えるようにする */
.capsel { max-height: 58vh; overflow-y: auto; padding: 2px 2px 4px; }

/* 「複数」の札。猛特訓とは別に引いているので、並べて出す */
.traincard__multi { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
/* 「複数」と「猛特訓」が重なったときだけ、枠ごと目立たせる */
.traincard.is-multi.traincard--xl {
  box-shadow: 0 0 0 2px var(--frame-rim), 0 0 0 6px color-mix(in srgb, var(--yel-lo) 60%, transparent), var(--shadow-lg);
}
.traincard__list { list-style: none; margin: 0; padding: 0; }
.cardline {
  display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px;
  align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft);
}
/* 特訓カードの1人ぶん。能力をひと通り並べ、上がるものだけ目立たせる */
.tcard { padding: 10px 0; border-top: 2px dashed var(--line-soft); }
.tcard:first-child { border-top: 0; }
.tcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tcard__head b { font-size: 15px; }
.tcard__head span { font-size: 11px; color: var(--ink-faint); }
.tcard__up {
  margin-left: auto; font-style: normal; font-size: 14.5px; font-weight: 800; color: var(--good);
  white-space: nowrap;
}
.traincard--xl .tcard__up { color: #c74a00; }
.tcard__stats { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 5px; }
.ts { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.ts i { font-style: normal; margin-right: 2px; }
.ts em { font-style: normal; color: var(--ink-faint); margin: 0 1px; }
.ts.is-up {
  color: var(--ink); font-weight: 800;
  background: var(--good-soft); border: 1.5px solid var(--good-fill);
  border-radius: 5px; padding: 0 5px;
}
.traincard--xl .ts.is-up { background: var(--yel-soft); border-color: var(--yel-lo); }
.cardline:first-child { border-top: 0; }
.cardline__name { font-size: 15px; font-weight: 800; }
.cardline__name i { font-style: normal; font-size: 11px; color: var(--ink-faint); margin-left: 6px; }
.cardline__stat { font-size: 13px; color: var(--ink-mute); }
.cardline__up { font-size: 17px; font-weight: 800; color: var(--good); }
.cardline__now { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-faint); }
/* いまの能力。特訓で誰を伸ばすか決める材料なので、カードに出しておく */
.cardline__abil {
  grid-column: 1 / -1; font-size: 11px; line-height: 1.7; color: var(--ink-mute);
  padding-top: 2px; border-top: 1px dotted var(--line-soft); white-space: normal;
}
.cardline__abil .rank { font-size: 11.5px; margin: 0 1px 0 2px; }
/* 対象が多いカードは1人1行に詰める */
.cardline--tight { padding: 4px 0; grid-template-columns: 1fr auto auto; }
.cardline--tight .cardline__name { font-size: 13.5px; }
.cardline--tight .cardline__up { font-size: 15px; }
.cardline--tight .cardline__now { font-size: 11px; }
/* 評価の横に出す素の数字。評価の文字（S〜G）のほうが目立つよう、細く薄めにする */
.rankval { font-weight: 500; font-size: 11.5px; color: var(--ink-mute); margin-left: 1px; }
td.role { font-size: 11px; color: var(--ink-mute); }
.roster td.c .rankval { font-size: 11px; color: var(--ink-mute); }
/* 引き抜かれた選手のお知らせ（オフシーズン画面の頭） */
.taken { margin: 0 0 22px; padding: 14px 16px; border-color: var(--danger-fill); }
.taken__title {
  display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 6px;
  background: var(--danger-fill); color: #ffffff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
}
.taken__lead { margin: 0 0 12px; font-size: 14px; }
.taken__lead b { font-size: 17px; }

.growth td.up b { color: var(--good); }
.growth td.up i { font-style: normal; color: var(--ink-faint); font-size: 11px; }

/* =========================================================
   大会の開幕・次の試合・特訓期間のお知らせ（濃い青の掲示板）
   ========================================================= */
.opening, .nextup {
  position: relative; overflow: hidden; text-align: center;
  margin: 8px 0 0; padding: 40px 20px 44px;
  border-radius: var(--radius-lg);
}
/* 下に芝の帯 */
.opening::after, .nextup::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 24px, transparent 24px 48px),
    linear-gradient(180deg, #3fbf5f, #1f8a3e);
  border-top: 3px solid #ffffff;
}
.opening__eyebrow, .nextup__eyebrow {
  display: inline-block; margin: 0; padding: 2px 12px; border-radius: var(--radius-pill);
  background: var(--yel-hi); color: var(--yel-ink); box-shadow: 0 2px 0 var(--yel-edge);
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
}
.opening__title {
  margin: 16px 0 14px; font-family: var(--font-display);
  font-size: clamp(26px, 7.5vw, 38px); font-weight: 800; line-height: 1.3; color: #ffffff;
}
.opening__lead { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--board-mute); }
.nextup__title {
  margin: 14px 0 14px; font-family: var(--font-display);
  font-size: clamp(22px, 6.5vw, 32px); font-weight: 800; line-height: 1.35; color: #ffffff;
}
.nextup__vs { margin: 0; font-size: 15px; font-weight: 700; color: var(--board-mute); }
.nextup__vs b { color: var(--yel-hi); font-size: 20px; font-weight: 800; }
/* 特訓期間のお知らせは、掲示板の中にキャプテンの欄とボタンが入る */
.nextup .capbox { color: var(--ink); text-align: left; margin-top: var(--sp-5); }
.nextup .capwarn { color: #ffc2cb; }
.nextup .actions { margin-bottom: 0; }
.nextup .btn--primary:disabled { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: var(--board-mute); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
/* サッカー部の画面の小見出し（掲示板の外で使う） */
#screen-soccer .nextup__eyebrow { margin-bottom: 8px; }

/* 開幕前に挟む幕 */
.curtain {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(180deg, var(--blue-hi), var(--blue-lo) 60%, var(--board));
  color: #ffffff;
  opacity: 0; transition: opacity .32s ease;
}
/* hidden のときは display:grid が勝ってしまうので、明示的に消す
   （消さないと透明な幕がボタンの上に残り、押せなくなる） */
.curtain[hidden] { display: none; }
.curtain.is-in { opacity: 1; }
.curtain.is-out { opacity: 0; }
.curtain__inner { text-align: center; transform: translateY(8px) scale(.96); transition: transform .5s cubic-bezier(.2,1.4,.3,1); }
.curtain.is-in .curtain__inner { transform: none; }
.curtain b { display: block; font-family: var(--font-display); font-size: clamp(30px, 9vw, 44px); font-weight: 800; color: var(--yel-hi); }
.curtain span { display: block; margin-top: 12px; font-size: 16px; font-weight: 800; letter-spacing: .1em; }
.curtain__inner::after { content: ''; display: block; width: 80px; height: 6px; margin: 18px auto 0; background: var(--yel-hi); border-radius: 3px; box-shadow: 0 2px 0 var(--yel-edge); }

/* =========================================================
   スコアボード（濃い青の掲示板に白と黄の数字）
   ========================================================= */
.tablewrap:has(> .scoreboard) {
  background: var(--board); border-color: var(--board-edge);
}
.scoreboard { width: auto; min-width: 100%; background: var(--board); color: var(--board-ink); font-family: var(--font-num); }
.scoreboard tbody tr:nth-child(even) { background: transparent; }
.scoreboard th, .scoreboard td {
  border: 1px solid var(--board-line); padding: 3px 5px; text-align: center;
  font-size: 13.5px; font-weight: 800; line-height: 1.5; background: transparent; color: var(--board-ink);
}
.scoreboard thead th { color: var(--board-mute); font-size: 11px; background: var(--board-2); }
.scoreboard .sb-team {
  text-align: left; font-family: var(--font-sans); font-weight: 800; font-size: 12.5px;
  min-width: 5.6em; background: var(--board-2); color: var(--board-ink);
}
.scoreboard thead .sb-team { color: var(--board-mute); }
.scoreboard .sb-tot { font-weight: 800; background: var(--board-2); color: var(--board-hot); }
.scoreboard thead .sb-tot { color: var(--board-mute); }
.scoreboard thead .is-now { background: var(--board-now); color: var(--board-now-ink); }

/* =========================================================
   試合中
   ========================================================= */
/* 速さの切り替え。1打席ずつを選ぶと、タップするまで止まる */
.speedbar { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
/* スキップは速さの並びの右はし。行を1つ増やさずに済む */
.speedbar .skip { margin-left: auto; }
/* 「〜まで」の2つは、狭い画面でも1行に横並びにする。
   並びの最後に回して、スキップを速さと同じ1行目に置く（試合中の縦の長さを1行ぶん減らす） */
.speedbar__row { display: flex; gap: 6px; flex-basis: 100%; order: 2; }
.speedbar__row .speedbtn { flex: 1 1 0; min-width: 0; }
.speedbar__label { font-size: var(--fs-2xs); font-weight: 800; color: var(--ink-mute); margin-right: 2px; }
/* 細い画面では「速さ」の文字を落とす。これが無いとスキップが
   下の行に落ちてしまい、そのぶんオーダーが画面から押し出される */
@media (max-width: 439px) { .speedbar__label { display: none; } }
.speedbtn {
  min-height: 32px;
  border: 2px solid var(--frame); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--brand); font: inherit; font-size: 12px; font-weight: 800;
  padding: 2px 9px; cursor: pointer; box-shadow: 0 2px 0 var(--blue-lo);
  touch-action: manipulation;
}
/* 選んでいる速さは黄色 */
.speedbtn.is-on {
  background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); border-color: var(--yel-edge);
  color: var(--yel-ink); box-shadow: 0 2px 0 var(--yel-edge);
}
.taphint {
  width: fit-content; margin: 0 auto 8px; padding: 3px 14px; border-radius: var(--radius-pill);
  text-align: center; font-size: 12px; font-weight: 800;
  background: var(--brand-fill); color: #ffffff; box-shadow: 0 2px 0 var(--blue-deep);
  cursor: pointer; animation: blink 1.6s ease-in-out infinite;
  touch-action: manipulation;
}
.taphint[hidden] { display: none; }
@keyframes blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .taphint { animation: none; } }
.stage.is-tappable { cursor: pointer; border-color: var(--yel-lo); }

/* いまの打席。試合の「今」をいちばん目立たせる */
.stage {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  margin: 10px 0; padding: 8px 12px 8px 14px;
  min-height: 66px;
  /* 1打席ずつのときにタップで進めるが、連打がダブルタップズームと
     誤認されるとタップが1回分消えてしまうので、単発タップだけを見る */
  touch-action: manipulation;
}
.stage__half, .stage__sub, .stage__end { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--brand); }
.stage__sub, .stage__end { color: var(--ink-mute); }
.stage__play { animation: pop .26s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pop { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.stage__meta { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-mute); }
/* 何を投げたか。打席結果のすぐ上に小さく */
.stage__ball { display: block; font-size: 11px; color: var(--ink-faint); }
.stage__ball b { font-weight: 800; color: var(--ink-mute); }
.stage__text { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: .04em; line-height: 1.3; color: var(--ink); }
.stage__play.is-good .stage__text { color: var(--good); }
.stage__play.is-bad .stage__text { color: var(--ink-mute); }
.stage__play.is-hr .stage__text { color: #e05a00; animation: flash .5s ease 2; }
@keyframes flash { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .stage__play, .stage__play.is-hr .stage__text { animation: none; } }
/* 入った点。黄色の札にする */
.stage__runs {
  display: inline-block; margin-left: 10px; padding: 0 8px; border-radius: 6px; vertical-align: 3px;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
  background: var(--yel-hi); color: var(--yel-ink); border: 2px solid var(--yel-edge);
}

/* グラウンドの絵。打球が飛んでいくのが見える */
.fieldview { text-align: center; display: flex; align-items: center; gap: 6px; }
.fieldview__main { text-align: center; }
/* 守備・走者・投球・打球 */
.fv-fielder { fill: #1d2024; stroke: #fff; stroke-width: 1.2; }
.fv-runner { stroke: #fff; stroke-width: 1.6; }
.fv-pitch { fill: var(--ink); }
.fv-hit { fill: var(--ink); stroke: var(--bg); stroke-width: 1.4; }
.fv-hit.is-hr { fill: #e05a00; }
.fv-burst { fill: none; stroke: #ffc94a; stroke-width: 2.4; opacity: 0; }
.fieldview svg { width: 60px; height: 56px; overflow: visible; }
@media (max-width: 399px) { .fieldview svg { width: 52px; height: 49px; } }
@media (min-width: 720px) { .fieldview svg { width: 92px; height: 86px; } }
.fv-grass { fill: #4cc06a; stroke: none; }
.fv-fence { fill: none; stroke: #1f7a3a; stroke-width: 2.4; }
.fv-inf { fill: #d9a066; stroke: #ffffff; stroke-width: 1.4; }
.fv-base { fill: #ffffff; stroke: #5a6b8c; stroke-width: 1.4; }
.fv-base.is-on { fill: var(--yel-hi); stroke: var(--yel-edge); }
.fv-home { fill: #ffffff; }
/* 打者。本塁のうしろに立たせておき、打ったときだけバットを振る。
   右打ちは三塁側（図の左）、左打ちは一塁側（図の右）に立つ、
   シルエットだけの簡略な絵（流麗さより、小さく出しても崩れないことを優先） */
.bt-legs, .bt-body, .bt-head { fill: var(--ink-mute); }
.bt-bat line { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
/* バットの先は打者と同じ地味な色にしておく。打球の軌跡（アクセント色）
   と色を分けておかないと、本塁から飛んでいるのかバットから飛んでいるのか
   紛らわしくなる */
.bt-bat circle { fill: var(--ink-mute); }
.bt-bat { transform: rotate(-15deg); }
.bt-bat.is-flip { transform: rotate(15deg); }
.bt-bat.is-swing { animation: batswing .5s cubic-bezier(.3,.6,.25,1) both; }
.bt-bat.is-flip.is-swing { animation-name: batswing-flip; }
.bt-bat.is-bunt { animation: batbunt .5s ease both; }
.bt-bat.is-flip.is-bunt { animation-name: batbunt-flip; }
@keyframes batswing {
  0%   { transform: rotate(-15deg); }
  40%  { transform: rotate(80deg); }
  100% { transform: rotate(95deg); }
}
@keyframes batswing-flip {
  0%   { transform: rotate(15deg); }
  40%  { transform: rotate(-80deg); }
  100% { transform: rotate(-95deg); }
}
@keyframes batbunt {
  0%   { transform: rotate(-15deg); }
  60%  { transform: rotate(18deg); }
  100% { transform: rotate(18deg); }
}
@keyframes batbunt-flip {
  0%   { transform: rotate(15deg); }
  60%  { transform: rotate(-18deg); }
  100% { transform: rotate(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-bat.is-swing, .bt-bat.is-bunt { animation: none; transform: rotate(70deg); }
  .bt-bat.is-flip.is-swing, .bt-bat.is-flip.is-bunt { transform: rotate(-70deg); }
}
/* 打球。本塁から飛んでいくのが分かるように、
   ①本塁に打点の印を出し ②そこから軌跡の線を伸ばし ③線の上をボールが走る */
.ballfrom {
  fill: none; stroke: var(--brand); stroke-width: 1.6;
  animation: hit .78s ease-out both;
}
.ballfrom.is-hr { stroke: #e05a00; animation-duration: .95s; }
@keyframes hit {
  from { opacity: .95; transform: scale(.4); transform-origin: 100px 152px; }
  to   { opacity: 0;   transform: scale(2.6); transform-origin: 100px 152px; }
}
.balltrail {
  stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; opacity: .6;
}
.balltrail.is-hr { stroke: #e05a00; opacity: .8; }
@keyframes trail { to { stroke-dashoffset: 0; } }
.ball {
  /* 拡大の中心をボール自身にする。既定のままだと図の左上（0,0）を中心に
     縮むので、飛び出しの瞬間だけ左上からやってくるように見えていた */
  transform-box: fill-box; transform-origin: center;
  fill: #ffffff; stroke: var(--ink); stroke-width: 1.4;
  animation: fly .78s cubic-bezier(.25,.75,.4,1) both;
}
.ball.is-hr { fill: #ff8a1a; animation-duration: .95s; }
@keyframes fly {
  from { transform: translate(0, 0) scale(.62); }
  to   { transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ball { animation: none; transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)); }
  .balltrail { animation: none; stroke-dashoffset: 0; }
  .ballfrom { animation: none; opacity: 0; }
}
/* アウトの数。球場の掲示板と同じく、灯った数で数える */
.outs { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 3px; }
.outs .out { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink-faint); display: inline-block; }
.outs .out.is-on { background: var(--danger-fill); border-color: #8f0c22; }
.outs span { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--ink-mute); margin-left: 3px; font-family: var(--font-num); }

/* 両校の打順。攻撃中のほうは、頭に緑の帯を付けて「攻撃」と分かるようにする */
.livelineups { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 720px) { .livelineups { gap: 12px; } }
.ll {
  background: var(--panel); border: 2px solid var(--frame); border-top-width: 5px;
  border-radius: var(--radius-sm); padding: 4px 5px; min-width: 0;
  box-shadow: 0 2px 0 var(--blue-lo);
}
@media (min-width: 720px) { .ll { padding: 6px 8px; } }
.ll.is-batting { border-color: var(--good-fill); box-shadow: 0 2px 0 #0d5426; }
.ll__title { margin: 0 0 3px; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--ink); }
.ll__title i {
  font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 10px; font-weight: 800; color: #ffffff; background: var(--brand-fill);
}
.ll.is-batting .ll__title i { color: #fff; background: var(--good-fill); }
.ll__list { list-style: none; margin: 0; padding: 0; }
.ll__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px;
  padding: 1px 3px; font-size: 11.5px; line-height: 1.25;
  border-radius: 4px; cursor: pointer; min-width: 0;
}
@media (min-width: 720px) { .ll__item { font-size: 12.5px; gap: 0 6px; padding: 2px 4px; } }
.ll__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 打席結果はその試合ぶん全部。名前・能力の下に、行を分けて並べる
   （名前 → 能力 → 打席結果の順に読めるようにするため） */
.ll__res {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 1px 3px; margin-top: 0;
}
/* まだ打席が回っていない選手は、結果の行ぶんの余白も出さない */
.ll__res:empty { display: none; }
.ll__r {
  font-style: normal; font-size: 9px; line-height: 1.2; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 2px; white-space: nowrap;
}
.ll__item.is-now .ll__r { color: inherit; border-color: currentColor; opacity: .85; }
.ll__r.is-last { font-weight: 800; }
/* いまの打者。黄色で塗る */
.ll__item.is-now {
  background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); color: var(--yel-ink); font-weight: 800;
  box-shadow: inset 0 0 0 1.5px var(--yel-edge);
}
.ll__no, .ll__pos { color: var(--ink-faint); font-size: 10.5px; flex: none; }
.ll__no { font-family: var(--font-num); font-weight: 800; }
/* 名前のすぐ下に、打つほうの能力だけ小さく。行を丸ごと折り返して下に置く */
.ll__ab {
  flex: 1 0 100%; font-size: 9px; line-height: 1.25; letter-spacing: 0;
  color: var(--ink-faint); white-space: nowrap;
}
.ll__ab b { font-weight: 800; font-style: normal; }
.ll__item.is-now .ll__ab { color: inherit; opacity: .9; }
.ll__item.is-now .ll__ab b { color: inherit; }
@media (min-width: 720px) { .ll__ab { font-size: 10px; } }
/* 細い画面では、行間と余白をひと詰めする（投手の能力を足したぶん） */
@media (max-width: 439px) {
  .ll__item { line-height: 1.2; }
  .ll { padding: 3px 5px; }
}
/* いちばん細い画面だけ、もう一段詰める。
   投手の能力と変化球を足したぶん、終盤に画面からはみ出すため */
@media (max-width: 379px) {
  .ll__ab { font-size: 8.5px; line-height: 1.15; }
  .ll__ball { line-height: 1.1; }
  .ll__stanum { font-size: 8.5px; line-height: 1.2; }
  .ll__r { font-size: 8.5px; }
  .ll__ball { font-size: 8.5px; }
  .ll__p { padding-top: 2px; }
  .ll__item { line-height: 1.2; }
  .ll { padding: 3px 4px; }
  .scoreboard th, .scoreboard td { font-size: 11.5px; }
  .fieldview svg { width: 46px; height: 43px; }
  .stage { min-height: 50px; margin: 6px 0; padding: 4px 8px 4px 10px; }
}
.ll__item.is-now .ll__no, .ll__item.is-now .ll__pos { color: inherit; opacity: .8; }
/* 投手の欄。名前・能力・変化球を、打者の行と同じ3段にそろえる */
.ll__p {
  margin: 3px 0 0; padding-top: 3px; font-size: 11px; color: var(--ink-mute);
  border-top: 2px dashed var(--line-soft);
}
.ll__pname { display: block; line-height: 1.25; }
/* 投手の名前は押せる。打者の行と同じで、押すと選手の詳細が開く */
.ll__p .llpit { font-size: 11px; font-weight: 800; }
.ll__p .ll__ab { display: block; }
/* 投手の余力。受けた打者が増えるほど減り、
   色が変わったところから球威と制球が落ちていく */
/* 余力は「余力◯% ▮▮▮▮」の1行。行を増やすと打順が画面から出てしまう */
.ll__sta { display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.ll__bar {
  flex: 1 1 auto; min-width: 24px; height: 6px; border-radius: 3px;
  background: var(--bg-2); border: 1px solid var(--line); overflow: hidden;
}
.ll__bar b { display: block; height: 100%; background: linear-gradient(180deg, #5fd67e, var(--good-fill)); }
.ll__sta.is-mid .ll__bar b { background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); }
.ll__sta.is-low .ll__bar b { background: var(--danger-fill); }
.ll__stanum { flex: none; font-size: 9px; line-height: 1.4; color: var(--ink-faint); white-space: nowrap; }
.ll__sta.is-mid .ll__stanum { color: var(--gold); font-weight: 800; }
.ll__sta.is-low .ll__stanum { color: var(--danger); font-weight: 800; }
.ll__balls { display: flex; flex-wrap: wrap; gap: 1px 3px; margin-top: 1px; }
.ll__ball {
  font-style: normal; font-size: 9px; line-height: 1.2; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 2px; white-space: nowrap;
}
.ll__ball b { font-weight: 800; color: var(--ink); margin-left: 1px; }
/* 学年は名前のすぐ右に小さく */
.ll__gr { flex: none; font-size: 9px; color: var(--ink-faint); margin-left: 2px; }
.ll__item.is-now .ll__gr { color: inherit; opacity: .85; }
.ll__hand { margin-left: 4px; letter-spacing: .02em; }
.ll__title { font-size: 12px; }
@media (min-width: 720px) { .ll__title { font-size: 13px; } }

/* スキップ。速さの並びの右はしに置く */
.skip {
  flex: none; min-height: 32px; padding: 2px 10px;
  border: 2px solid var(--blue-deep); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--blue-hi), var(--blue-lo)); color: #ffffff;
  box-shadow: 0 2px 0 var(--blue-deep);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
@media (max-width: 399px) { .skip { padding: 2px 7px; } .speedbtn { padding: 2px 6px; } }
.skip[hidden] { display: none; }

/* タイムは速さの並びの左はし。行を1つ増やさないための置き場所。
   ここが1行でも増えると、スコアとオーダーを同時に見られなくなる */
.btn--time {
  flex: none; min-height: 32px; min-width: 0; margin-bottom: 0;
  padding: 2px 12px; border-radius: var(--radius-sm); border-width: 2px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  border-color: #8f0c22; color: #ffffff;
  background: linear-gradient(180deg, #ff5a6e, var(--danger-fill));
  box-shadow: 0 2px 0 #8f0c22; text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.btn--time:active:not(:disabled) { box-shadow: none; transform: translateY(2px); }
.btn--time[hidden] { display: none; }

/* タイムのふきだし */
.time__where {
  display: inline-block; margin: 0 0 10px; padding: 2px 10px; border-radius: 6px;
  background: var(--brand-fill); color: #ffffff; font-size: 12px; font-weight: 800;
}
.time__now {
  margin: 0 0 12px; padding: 8px 10px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel-2); font-size: 12.5px; line-height: 1.9;
}
.time__menu { display: flex; flex-direction: column; gap: 6px; }
.time__menu .btn { justify-content: flex-start; }
.time__empty { margin: 12px 0; font-size: 12.5px; color: var(--ink-mute); }

/* =========================================================
   結果
   ========================================================= */
/* 試合結果の点数。掲示板と同じ濃い青の帯にする */
.result-score {
  margin: 6px 0 14px; padding: 12px 14px;
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 4px;
  font-family: var(--font-display); font-size: 17px; font-weight: 800;
  border-radius: var(--radius);
}
.result-score b { font-size: 30px; font-weight: 800; margin: 0 6px; font-family: var(--font-num); color: var(--board-hot); text-shadow: 0 2px 0 var(--blue-deep); }
.result-score i { font-style: normal; font-size: 12px; color: var(--board-mute); margin-left: 6px; }
.result-score.is-win { border-color: #5fd67e; }
.result-score.is-lose { border-color: #ff7a8a; }

/* =========================================================
   サッカー部の試合中
   ========================================================= */
/* 起きた出来事を積み上げて見せる。ゴールだけ色を変えて目立たせる */
.soccer-log {
  margin: 10px 0; max-height: 50vh; overflow-y: auto;
  cursor: pointer;
}
.soccer-log__list { list-style: none; margin: 0; padding: 4px 0; }
.soccer-log__item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-mute);
}
.soccer-log__item:last-child { border-bottom: none; }
.soccer-log__min { flex: none; font-size: 11px; font-weight: 800; color: var(--ink-faint); min-width: 32px; font-family: var(--font-num); }
.soccer-log__text { flex: 1; }
.soccer-log__item--goal { color: var(--ink); font-weight: 800; background: var(--yel-soft); }
.soccer-log__item.is-mine .soccer-log__text { color: var(--ink); }

/* 覚醒のお知らせ。金で目立たせる */
.awakebox {
  margin: 14px 0; padding: 12px 14px; border-radius: var(--radius);
  border: var(--bw-frame) solid var(--yel-lo); background: var(--yel-soft);
  box-shadow: 0 0 0 2px var(--frame-rim), var(--shadow);
}
.awakebox__title {
  display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 6px;
  background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); color: var(--yel-ink); border: 2px solid var(--yel-edge);
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
}
.awakebox__line { margin: 2px 0; font-size: 14px; }
.growthbox { margin: 14px 0; padding: 8px 14px; }
.growthbox summary, .rosterbox summary {
  cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 800; color: var(--brand); padding: 4px 0;
}
.growthlist { list-style: none; margin: 8px 0 4px; padding: 0; }
.growthlist li { display: flex; gap: 12px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.growthlist span { color: var(--ink-mute); }
.rosterbox { margin: 16px 0; padding: 8px 14px 12px; }
.tourstat p { margin: 4px 0; font-size: 13px; }
.tourstat b { font-size: 17px; font-family: var(--font-num); }

/* =========================================================
   オーダー編集
   野手13人をひとつづきの並びで出す。取っ手をつまむと行が指について動く。
   取っ手だけ touch-action を切ってあるので、ほかの場所では今までどおり
   画面をスクロールできる。
   ========================================================= */
.lineup-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.7; }
/* 打線と投手はタブで切り替える（1画面に両方は出さない） */
.lutabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.lutab {
  flex: 1; min-height: 42px; border: 2px solid var(--frame); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--brand); font: inherit; font-family: var(--font-display); font-size: 14.5px; font-weight: 800;
  padding: 6px 0; cursor: pointer; box-shadow: 0 3px 0 var(--blue-lo);
}
.lutab.is-on { background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); border-color: var(--yel-edge); color: var(--yel-ink); box-shadow: 0 3px 0 var(--yel-edge); }
.lulist { list-style: none; margin: 0 0 4px; padding: 0; }
.lurow {
  display: grid;
  grid-template-columns: 38px 2.4em 3.4em minmax(6em, 1fr) auto;
  grid-template-areas:
    "grip no pos main arrow"
    "grip stats stats stats stats"
    "grip apts apts apts apts";
  align-items: center; gap: 1px 6px;
  padding: 5px 4px 5px 0; border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
@media (min-width: 760px) {
  .lurow {
    grid-template-columns: 38px 2.4em 3.4em minmax(8em, 1.1fr) minmax(12em, 1.2fr) auto;
    grid-template-areas:
      "grip no pos main stats arrow"
      "grip apts apts apts apts apts";
  }
}
.lurow.is-bad { background: var(--danger-soft); }
/* 守備適性の一覧。どこを守れるかがひと目で分かる */
.luapts { grid-area: apts; display: flex; flex-wrap: wrap; gap: 1px 7px; padding-top: 1px; }
.luapt { display: inline-flex; align-items: baseline; gap: 1px; font-size: 10.5px; }
.luapt i { font-style: normal; color: var(--ink-faint); }
.lupitch { gap: 2px 5px; }
.luball { font-size: 10.5px; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; background: var(--panel); }
.luball b { margin-left: 2px; color: var(--ink); }
.poach-warn {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 2px solid var(--danger-fill); background: var(--danger-soft);
  font-size: 13px; line-height: 1.6; color: var(--danger); font-weight: 800;
}
.poach-warn[hidden] { display: none; }
.luwarn {
  margin: 0 0 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.6;
  border: 2px solid var(--danger-fill); border-radius: var(--radius-sm); color: var(--danger);
  background: var(--danger-soft); font-weight: 800;
}
.lufat--lo { color: var(--good); }
.lufat--mid { color: var(--r-c); }
.lufat--hi { color: var(--danger); font-weight: 800; }
.pdetail__from { font-size: 11.5px; color: var(--brand); margin-top: 2px; }
.lurow.is-bench { background: var(--panel-2); }
/* 控えの守備位置の欄は、選べることは分かるが目立たないように */
.possel.is-bench { color: var(--ink-faint); }
.lurow.is-bench .luno { color: var(--ink-faint); font-size: 11px; }
/* つまんでいる行。浮かせて、いま動かしているのが分かるようにする */
.lurow.is-dragging {
  position: relative; z-index: 3;
  background: var(--yel-soft);
  box-shadow: 0 8px 22px rgba(11, 44, 115, .35), inset 0 0 0 2px var(--yel-lo);
  border-radius: var(--radius-sm); border-bottom-color: transparent;
}
:root[data-theme="dark"] .lurow.is-dragging { box-shadow: 0 8px 22px rgba(0, 0, 0, .6), inset 0 0 0 2px var(--yel-lo); }
.lulist.is-sorting { cursor: grabbing; }
.lulist.is-sorting .lurow:not(.is-dragging) { transition: none; }

/* 取っ手。指でつまめるよう、行の高さいっぱいに広くとる */
.lugrip {
  grid-area: grip;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
  align-self: stretch; min-height: 44px;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  border-right: 2px solid var(--line); background: var(--panel-2); border-radius: 6px 0 0 6px;
}
.lugrip i { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--frame); }
.lugrip:active { cursor: grabbing; }
.lurow.is-dragging .lugrip { background: var(--yel-lo); }
.lurow.is-dragging .lugrip i { background: var(--yel-ink); }

.luno { grid-area: no; text-align: center; font-size: 16px; font-weight: 800; font-family: var(--font-num); color: var(--brand); }
.luno--wide { font-size: 11.5px; font-weight: 800; font-family: var(--font-sans); }
.lupos { grid-area: pos; }
.lupos__bench { display: block; text-align: center; font-size: 12px; color: var(--ink-faint); }
.lumain { grid-area: main; min-width: 0; display: grid; }
.lumain .pname { text-align: left; font-size: 14px; font-weight: 800; }
.lumain .tiny { display: block; }
.lustats { grid-area: stats; font-size: 11px; color: var(--ink-mute); padding: 1px 0 2px; }
.luarrow { grid-area: arrow; display: flex; flex-direction: column; gap: 3px; }
.luarrow .btn--tiny { min-height: 22px; padding: 0 7px; font-size: 10px; }

/* =========================================================
   勝敗の画面
   ========================================================= */
.verdict { padding: 8px 0 8px; text-align: center; }
.verdict__box { padding: 0 0 22px; overflow: hidden; }
/* 大会名と回戦は、頭の青い帯に書く */
.verdict__where {
  margin: 0; padding: 9px 14px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .04em;
}
/* 「勝利」「敗戦」は縁取りの大きな文字 */
.verdict__word {
  margin: 20px 0 14px; font-family: var(--font-display);
  font-size: 58px; font-weight: 800; letter-spacing: .1em; line-height: 1.1;
  animation: rise .5s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .verdict__word { animation: none; } }
.verdict__box.is-win { border-color: var(--good-fill); }
.verdict__box.is-lose { border-color: var(--danger-fill); }
.verdict__box.is-win .verdict__word { color: var(--yel-hi); }
.verdict__box.is-lose .verdict__word { color: #c7d3e8; }
/* 点数は掲示板の数字 */
.verdict__score {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  margin: 0 14px; padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 800;
}
.verdict__score b { font-size: 32px; margin: 0 2px; font-weight: 800; font-family: var(--font-num); color: var(--board-hot); line-height: 1.1; text-shadow: 0 2px 0 var(--blue-deep); }
.verdict__note {
  display: table; margin: 14px auto 0; padding: 2px 12px; border-radius: 6px;
  background: var(--brand-fill); color: #ffffff; font-size: 12.5px; font-weight: 800;
}
.verdict__lead { margin: 16px 14px 0; font-size: 14px; font-weight: 700; color: var(--ink-mute); }
/* 勝敗投手・セーブ・本塁打。スポーツニュースの速報でよく見る、
   「[勝]投手名」のように色つきの短いラベルを頭に置く形にしてある。
   1行1項目の左寄せにして、名前がどのラベルのものかが
   ひと目で分かるようにした（センター寄せで詰め込むと読みにくいため）。 */
.decisions { margin: 16px auto 0; padding: 12px 16px 0; border-top: 2px dashed var(--line-soft); max-width: 420px; text-align: left; }
.decisions__row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.decisions__badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 5px; border-radius: 6px;
  font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.decisions__badge--win  { background: var(--good-fill); }
.decisions__badge--lose { background: var(--danger-fill); }
.decisions__badge--save { background: var(--brand-fill); }
.decisions__badge--hr   { background: var(--yel-lo); color: var(--yel-ink); }
.decisions__name { color: var(--ink); font-weight: 700; }

/* =========================================================
   試合後の成長
   ========================================================= */
.grlist { display: grid; gap: 12px; }
@media (min-width: 720px) { .grlist { grid-template-columns: 1fr 1fr; } }
.gr { padding: 10px 14px; border-color: var(--good-fill); }
.gr.is-awake { border-color: var(--yel-lo); background: var(--yel-soft); }
.gr__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.gr__head b { font-size: 15.5px; }
.gr__head span { font-size: 11px; color: var(--ink-mute); }
.gr__awake { color: var(--yel-ink); background: var(--yel-hi); border-color: var(--yel-edge); }
.gr__list { list-style: none; margin: 0; padding: 0; }
.gr__list li {
  display: grid; grid-template-columns: 5.2em 3.4em 1fr; gap: 6px;
  align-items: baseline; padding: 3px 0; font-size: 12.5px; border-top: 1px dotted var(--line);
}
.gr__list li:first-child { border-top: 0; }
.gr__label { color: var(--ink-mute); font-size: 12px; }
.gr__up { font-weight: 800; color: var(--good); }
.gr__from { color: var(--ink-faint); }
.gr__to { font-weight: 800; }

/* =========================================================
   次の試合のお知らせ
   ========================================================= */
.taphint--static {
  display: block; width: auto; animation: none; margin: 18px 0 0; padding: 12px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); color: var(--yel-ink);
  border: 2px solid var(--yel-edge); box-shadow: 0 4px 0 var(--yel-edge);
  font-size: 14px;
}

/* 打席結果。左に選手名を固定して、右に回ごとの表を横スクロールさせる */
.palogwrap { display: flex; align-items: flex-start; gap: 0; margin: 8px 0 10px; overflow: hidden; }
.palognames { width: auto; flex: none; border-right: 2px solid var(--line); }
.palognames th, .palognames td { white-space: nowrap; padding: 5px 8px 5px 6px; }
.palogwrap .tablewrap { flex: 1 1 auto; min-width: 0; margin: 0; }
.palog { width: auto; min-width: 100%; }
.palog th, .palog td { padding: 5px 3px; }
/* 名前の表と回ごとの表は別の表なので、行の高さをそろえておかないと
   下に行くほど名前と結果の行がずれていく */
.palogwrap th, .palogwrap td { height: 32px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.pa-td { min-width: 3.4em; }
.pa-cell {
  display: inline-block; font-size: 10.5px; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 3px; white-space: nowrap; color: var(--ink); background: var(--panel);
}
.pa-cell + .pa-cell { margin-left: 2px; }
.pa-cell b { color: var(--gold); margin-left: 2px; }
.pa-cell.is-run { border-color: var(--yel-edge); background: var(--yel-soft); font-weight: 700; }
.retire.is-draft { border-color: var(--yel-lo); }
.retire__draft { color: var(--yel-ink); background: var(--yel-hi); border-color: var(--yel-edge); }
.retire__from { margin: 2px 0 0; font-size: 11.5px; color: var(--brand); }

/* 並び替えのボタン */
.sortbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 6px 0 6px; }
.sortbar__label { font-size: var(--fs-2xs); font-weight: 800; color: var(--ink-mute); margin-right: 3px; }
.sortbtn {
  min-height: 30px; border: 2px solid var(--frame); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--brand); font: inherit; font-size: 12px; font-weight: 800; padding: 1px 11px; cursor: pointer;
  box-shadow: 0 2px 0 var(--blue-lo);
}
.sortbtn.is-on { background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); border-color: var(--yel-edge); color: var(--yel-ink); box-shadow: 0 2px 0 var(--yel-edge); }

/* =========================================================
   引き抜き・オフシーズン
   ========================================================= */
/* 選んだ行は黄色で塗り、左に青い印を立てる（色だけでなく形でも分かるように） */
tr.prow.is-picked, tbody tr.prow.is-picked:nth-child(even) { background: linear-gradient(180deg, #fff3a8, var(--yel-hi)); color: var(--yel-ink); }
tr.prow.is-picked td:first-child { box-shadow: inset 6px 0 0 var(--brand-fill); }
tr.prow.is-picked td { font-weight: 800; }
tr.prow.is-picked .rank, tr.prow.is-picked .rankval, tr.prow.is-picked td,
tr.prow.is-picked .nmlink, tr.prow.is-picked .hand, tr.prow.is-picked .luball b { color: var(--yel-ink); }
tr.prow.is-picked .luball { background: rgba(255, 255, 255, .5); color: var(--yel-ink); border-color: var(--yel-edge); }

/* 引き抜きの手順。いまどこにいるのかを上に出す（js が data-step を付ける） */
.poachsteps {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0; counter-reset: ps;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.poachsteps li {
  counter-increment: ps; position: relative;
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 7px 8px; border-radius: var(--radius-sm);
  background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line);
  font-size: 12px; font-weight: 800; color: var(--ink-faint);
}
.poachsteps li::before {
  content: counter(ps); flex: none; display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid currentColor; font: 800 11px/1 var(--font-num);
}
.poachsteps li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poachsteps li.is-done { color: var(--good); border-color: var(--good-fill); box-shadow: 0 2px 0 var(--good-fill); }
.poachsteps li.is-now { color: var(--yel-ink); background: linear-gradient(180deg, var(--yel-hi), var(--yel-lo)); border-color: var(--yel-edge); box-shadow: 0 2px 0 var(--yel-edge); }
.poachsteps li.is-now::before { background: var(--brand-fill); color: #ffffff; border-color: var(--brand-fill); }
/* いまの状況（だれを選んだか）。手順のすぐ下の吹き出しに出す */
#screen-poach #poach-lead {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--panel); border: 2px solid var(--frame); box-shadow: 0 3px 0 var(--blue-lo);
  color: var(--ink); font-weight: 700;
}
#screen-poach[data-stage="win"] #poach-lead { border-color: var(--good-fill); background: var(--good-soft); box-shadow: 0 3px 0 #0d5426; }
#screen-poach[data-stage="lose"] #poach-lead { border-color: var(--danger-fill); background: var(--danger-soft); box-shadow: 0 3px 0 #8f0c22; }

/* 迎える選手の資料 */
.incoming { padding: 12px 14px; margin-bottom: 14px; border-color: var(--yel-lo); }
#screen-poach[data-stage="win"] .incoming { border-color: var(--good-fill); }
#screen-poach[data-stage="lose"] .incoming { border-color: var(--danger-fill); }
.swaplist { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.swapitem {
  display: grid; gap: 1px; text-align: left; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: 0 3px 0 var(--line);
  color: inherit; font: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.swapitem b { font-size: 14px; }
.swapitem span { font-size: 11.5px; color: var(--ink-mute); }

.retire { margin: 18px 0; padding: 12px 14px; }
.retire__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.retire__head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--brand); }
.retire__head span { font-size: 11.5px; color: var(--ink-mute); }
.retire__abil { margin: 4px 0 8px; font-size: 12px; color: var(--ink-mute); line-height: 1.8; }
.awake { color: var(--gold); font-weight: 800; }

.hllist { margin: 4px 0 0; padding-left: 1.4em; }
.hllist li { margin: 4px 0; font-size: 12.5px; }
.hl__where { display: block; color: var(--ink-faint); font-size: 11px; }
.hl__line { display: block; }

/* =========================================================
   優勝・出場決定
   全国（金）・地方大会（緑）・春の出場決定（水色）・出場ならず（灰）で
   見出しの色を分け、見出しの言葉でも分かるようにしてある
   ========================================================= */
.champ {
  position: relative; text-align: center; padding: 46px 16px 40px; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); margin-top: 4px;
}
/* 下に芝の帯 */
.champ::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 24px, transparent 24px 48px),
    linear-gradient(180deg, #3fbf5f, #1f8a3e);
  border-top: 3px solid #ffffff;
}
.champ__eyebrow {
  display: inline-block; margin: 0; padding: 2px 12px; border-radius: var(--radius-pill);
  background: var(--yel-hi); color: var(--yel-ink); box-shadow: 0 2px 0 var(--yel-edge);
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
}
.champ__title {
  margin: 14px 0 8px; font-family: var(--font-display);
  font-size: clamp(28px, 8.4vw, 42px); font-weight: 800; letter-spacing: .04em; line-height: 1.25;
  color: var(--yel-hi); animation: rise-pop .9s cubic-bezier(.2,.9,.3,1) both; text-wrap: balance;
}
@keyframes rise-pop {
  0% { opacity: 0; transform: translateY(20px) scale(.82); }
  55% { opacity: 1; transform: translateY(-5px) scale(1.1); }
  80% { transform: translateY(1px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .champ__title { animation: none; } }
/* 全国優勝（日本一）は、枠も金にして、いちばん格を上げる */
.champ--grand { border-color: var(--yel-lo); box-shadow: 0 0 0 2px var(--frame-rim), 0 0 0 6px color-mix(in srgb, var(--yel-lo) 55%, transparent), var(--shadow-lg); }
.champ--grand .champ__title { font-size: clamp(30px, 9vw, 48px); }
/* 紙吹雪。優勝の瞬間だけの飾りで、ゲームの判断には関わらない */
.champ__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti__piece {
  position: absolute; top: -8%; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation: confetti-fall var(--dur, 2.4s) var(--delay, 0s) ease-in both;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(var(--rot, 0deg)); opacity: 0; }
  8% { opacity: .95; }
  100% { transform: translateY(480px) rotate(calc(var(--rot, 0deg) + 360deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confetti__piece { display: none; } }
.champ__school { margin: 0 0 6px; font-family: var(--font-display); font-size: 21px; font-weight: 800; color: #ffffff; text-shadow: 0 2px 0 var(--blue-deep); }
.champ__lead { margin: 16px 0 0; font-size: 14.5px; font-weight: 700; color: var(--board-mute); }
/* 優勝の背景。まん中がほのかに明るくなるだけの控えめな光 */
.champ__rays {
  position: absolute; inset: -20% -20% auto; height: 150%; z-index: -1;
  background: radial-gradient(ellipse at 50% 34%,
    color-mix(in srgb, var(--yel-hi) 26%, transparent) 0%,
    color-mix(in srgb, var(--yel-hi) 8%, transparent) 40%,
    transparent 70%);
  animation: glow 4.5s ease-in-out infinite alternate;
}
@keyframes glow { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .champ__rays { animation: none; } }
.champ__stars { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin: 20px 0 0; padding: 0; }
.champ__stars li b { display: block; font-size: 15px; color: #ffffff; }
.champ__stars li span { display: block; font-size: 11px; color: var(--board-mute); }
.champ__stars li .champ__stat { font-size: 11.5px; color: #ffffff; }
/* 大会の戦いぶりと、ひとこと */
.champ__record { margin: 10px 0 0; font-size: 12px; color: var(--board-mute); line-height: 1.9; }
.champ__note { margin: 18px 0 0; font-size: 12.5px; color: var(--board-mute); }
.champ__note b { color: #ffffff; }

/* 地方大会の優勝は、全国とは色を変えておく（同じ色だと区別がつかない） */
.champ--local { border-color: #5fd67e; }
.champ--local .champ__title { color: #7dff9c; }
.champ--local .champ__rays {
  background: radial-gradient(ellipse at 50% 34%,
    color-mix(in srgb, #5fd67e 22%, transparent) 0%,
    color-mix(in srgb, #5fd67e 7%, transparent) 40%,
    transparent 70%);
}
/* 全国優勝（日本一）は、いちばん派手にする。光をひとまわり強く、
   速く・大きく明滅させて「優勝した」感じを出す */
.champ--grand .champ__rays {
  background: radial-gradient(ellipse at 50% 34%,
    color-mix(in srgb, var(--yel-hi) 38%, transparent) 0%,
    color-mix(in srgb, var(--yel-hi) 12%, transparent) 42%,
    transparent 72%);
  animation: glow-grand 2.6s ease-in-out infinite alternate;
}
@keyframes glow-grand { from { opacity: .85; transform: scale(.93); } to { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .champ--grand .champ__rays { animation: none; } }

/* センバツ相当の出場決定。夏（地方大会）・全国優勝とは違う色にして見分ける */
.champ--spring { border-color: #9fd3ff; }
.champ--spring .champ__title { color: #a8dcff; }
.champ--spring .champ__rays {
  background: radial-gradient(ellipse at 50% 34%,
    color-mix(in srgb, #9fd3ff 22%, transparent) 0%,
    color-mix(in srgb, #9fd3ff 7%, transparent) 40%,
    transparent 70%);
}
/* センバツ相当に出られなかった年は、派手にしない。見出しも地味な色に */
.champ--miss { border-color: #8aa0c6; }
.champ--miss .champ__title { color: #c7d3e8; animation: none; }

/* =========================================================
   選手の詳細（ふきだしの中・引き抜きの資料）
   ========================================================= */
.pdetail__head { border-bottom: 3px solid var(--frame); padding-bottom: 8px; margin-bottom: 12px; padding-right: 40px; }
.pdetail__name { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--brand); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pdetail__meta { font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.stat__label { flex: 1; font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.stat__rank { font-size: 19px; }
.stat__num { font-size: 13px; color: var(--ink-mute); min-width: 2.2em; text-align: right; font-family: var(--font-num); }
.stat__num--wide { font-size: 16px; font-weight: 800; color: var(--ink); }
.stat__init { flex: 1 0 100%; font-size: 10.5px; color: var(--ink-faint); }
.pitchlist .stat__init { grid-column: 1 / -1; }
.minor { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 12px; color: var(--ink-mute); }
.minor b { color: var(--ink); }
.aptrow { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.apt { display: inline-flex; align-items: baseline; gap: 3px; }
.apt i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.pitchlist { list-style: none; margin: 4px 0 0; padding: 0; }
.pitchlist li { display: grid; grid-template-columns: 7em 1.4em 1fr; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.pitchlist b { font-weight: 800; }
.pitchlist .bar { display: block; height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.pitchlist .bar i { display: block; height: 100%; background: linear-gradient(180deg, var(--blue-hi), var(--blue-lo)); }
.statline th, .statline td { text-align: center; font-size: 12px; padding: 5px 4px; }
/* 通算成績も細い画面でははみ出すので、そこだけ詰める */
@media (max-width: 439px) { .statline th, .statline td { padding: 5px 2px; font-size: 11.5px; } }
.statline td.hl { font-weight: 800; font-size: 13.5px; }

/* =========================================================
   ふきだし（モーダル）。ゲームのウィンドウのように太い枠
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6, 22, 60, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; width: min(100%, 720px); max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 4px solid var(--frame); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px var(--frame-rim), var(--shadow-lg); padding: 0;
  animation: modalin .22s cubic-bezier(.2,1.3,.3,1) both;
}
/* スクロールするのは中身（modal__body）だけ。×はふきだし側に付けてあるので、
   中身をどこまで送っても、スクロールで隠れたり上のバーに潜ったりしない */
.modal__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 20px 18px 22px;
}
@keyframes modalin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__panel { animation: none; } }
/* 確認のふきだしは小さく、枠は赤（消すなど、取り返しのつかない操作の確認なので） */
.modal[data-kind="confirm"] .modal__panel { width: min(100%, 420px); border-color: var(--danger-fill); }
.confirmbox { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.8; padding-right: 32px; }

/* オーダー変更は情報が多いので、画面いっぱいに広く取る */
.modal[data-kind="lineup"] { padding: 8px; }
.modal[data-kind="lineup"] .modal__panel { width: min(100%, 980px); max-height: 94vh; max-height: 94dvh; }
.modal[data-kind="lineup"] .modal__body { padding: 16px 14px 20px; }
.modal__close {
  position: absolute; top: 8px; right: 8px; z-index: 5; width: 40px; height: 40px;
  border: 2px solid var(--blue-deep); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--blue-hi), var(--blue-lo)); color: #ffffff;
  box-shadow: 0 2px 0 var(--blue-deep);
  font-size: 22px; font-weight: 800; cursor: pointer; line-height: 1;
}
.modal__close:active { transform: translateY(2px); box-shadow: none; }
.modal__title {
  margin: 0 0 14px; padding: 0 44px 8px 0; border-bottom: 3px solid var(--frame);
  font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--brand);
}

/* =========================================================
   入力
   ========================================================= */
.form { display: grid; gap: 18px; margin: 12px 0; padding: 16px; }
.field { display: grid; gap: 5px; }
.field__label { font-size: 13px; font-weight: 800; color: var(--brand); }
.field__input {
  width: 100%; min-height: var(--input-h); padding: 10px 13px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700;
  box-shadow: inset 0 2px 0 rgba(11, 44, 115, .08);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus { outline: none; border-color: var(--frame); box-shadow: 0 0 0 3px color-mix(in srgb, var(--frame) 30%, transparent); }
.field__input--inline { width: auto; max-width: 11em; font-size: 18px; font-weight: 800; }
.field__help { font-size: 12px; color: var(--ink-faint); line-height: 1.7; }
/* 入れ物の外に置く説明。ぶら下げず、行間をとって読ませる */
.field__help--block { margin: -2px 0 0; line-height: 1.8; }

/* 設定の中の小見出し。何と何の設定なのか、目で切れるようにする（青い帯） */
.set-heading {
  margin: 28px 0 8px; padding: 5px 12px;
  background: linear-gradient(180deg, var(--strip-hi), var(--strip-lo));
  border: 2px solid var(--strip-edge); border-left: 6px solid var(--frame);
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--strip-ink);
}
.field--check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.field--check input { flex: none; margin-top: 2px; width: 22px; height: 22px; accent-color: var(--brand-fill); }
.field--boxed { margin: 16px 0 0; padding: 12px 14px; }
.field--boxed i { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
.possel {
  min-height: 32px;
  border: 2px solid var(--line); border-radius: 6px; background: var(--panel);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 2px 6px;
}
/* 設定の「はじめから」は、ほかと離して置く（押しまちがえないように） */
#screen-settings .actions { gap: 14px; }

/* =========================================================
   広告枠（ボタンのすぐ隣には置かない）
   ========================================================= */
.ad-slot { display: block; max-width: var(--maxw); margin: 8px auto 24px; padding: 0 16px; text-align: center; }
.ad-slot[hidden] { display: none; }
/* 上の広告は空の濃い青の上に載るので、文字は濃い色で */
.ad-label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ink); }
.ad-slot .ad-body { min-height: 100px; overflow: hidden; color: #333; }
.ad-slot .ad-body a { color: #1a5fb4; }
.ad-slot .ad-body .ad-scale { width: max-content; max-width: none; transform-origin: top left; }
.ad-slot img, .ad-slot iframe { max-width: 100%; border: 0; }
.ad-slot.is-placeholder .ad-body {
  border: 1px dashed var(--line); color: var(--ink-faint); font-size: 12px;
  display: grid; place-items: center;
}
#screen-result .ad-slot { margin-top: 32px; }
.ad-disclosure { max-width: var(--maxw); margin: 0 auto 24px; padding: 0 16px; text-align: center; font-size: 11px; line-height: 1.7; color: var(--ink-mute); }

/* =========================================================
   フッター（青い帯）
   ========================================================= */
.site-footer {
  border-top: 3px solid var(--yel-lo); padding: 22px 16px 44px; text-align: center;
  background: linear-gradient(180deg, var(--blue-lo), var(--board));
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.footer-nav a { display: inline-block; padding: 6px 0; font-size: 12.5px; font-weight: 700; color: #d6e7ff; text-decoration: none; }
.footer-note { margin: 10px 0 0; font-size: 11px; color: #b8d2ff; }

/* =========================================================
   ホバー（マウスのある端末だけ）
   :hover をタッチ端末にもそのまま効かせると、押したところの見た目が
   触れ続けたまま戻らないことがある（スマホでタップした行や名前が、
   別の場所を押すまでグレーがかって見えるなど）。hover:hover は
   本物のポインタ操作ができる端末だけに一致するので、ここにまとめて
   スマホ・タブレットでは効かないようにしてある。
   ========================================================= */
@media (hover: hover) {
  .appbar__home:hover { color: #ffffff; }
  .appbar__icon:hover, .appbar__btn:hover { background: rgba(255, 255, 255, .26); border-color: #ffffff; }
  .btn:hover:not(:disabled) { background: var(--brand-soft); }
  .btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #fff08a, #ffc21a); }
  .btn--danger:hover:not(:disabled) { background: var(--danger-soft); }
  .btn--time:hover:not(:disabled) { background: linear-gradient(180deg, #ff7486, #e8384f); }
  .roster tbody tr:hover, .box tbody tr:hover, .lineup tbody tr:hover { background: var(--brand-soft); }
  tr.prow.is-picked:hover { background: linear-gradient(180deg, #fff3a8, var(--yel-hi)); }
  .spick__item:hover { border-color: var(--frame); }
  .spick__item.is-on:hover { border-color: var(--yel-edge); }
  .speedbtn:hover { background: var(--brand-soft); }
  .speedbtn.is-on:hover { background: linear-gradient(180deg, #fff08a, #ffc21a); }
  .skip:hover { background: linear-gradient(180deg, #4b8ff0, var(--blue-lo)); }
  .lutab:hover { background: var(--brand-soft); }
  .lutab.is-on:hover { background: linear-gradient(180deg, #fff08a, #ffc21a); }
  .sortbtn:hover { background: var(--brand-soft); }
  .sortbtn.is-on:hover { background: linear-gradient(180deg, #fff08a, #ffc21a); }
  .swapitem:hover { background: var(--brand-soft); border-color: var(--frame); }
  .footer-nav a:hover { color: #ffffff; text-decoration: underline; }
  .modal__close:hover { background: linear-gradient(180deg, #4b8ff0, var(--blue-lo)); }
}

/* =========================================================
   サッカー部の試合中（フィールド・ゴール演出）
   ========================================================= */
.sclock {
  margin: 8px 0 6px; padding: 8px 12px; text-align: center; border-radius: var(--radius);
  font-size: 16px; font-weight: 800; letter-spacing: .04em; font-family: var(--font-num);
}
.sclock .pkm { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.spitch {
  position: relative; margin: 6px 0 8px; border-radius: var(--radius); overflow: hidden;
  border: 3px solid #ffffff; box-shadow: 0 0 0 3px var(--frame), var(--shadow); background: #3f8d55; line-height: 0;
}
.spitch svg { display: block; width: 100%; height: auto; }
.spitch .sp, .spitch .sball { will-change: transform; }
.spitch .sp__num { fill: #fff; font-weight: 800; font-family: sans-serif; pointer-events: none; }
.spitch .sp--gk .sp__num { fill: #1d2024; }
.spitch.is-goal-my { animation: spitch-flash-my .6s ease-out 2; }
.spitch.is-goal-op { animation: spitch-flash-op .6s ease-out 1; }
@keyframes spitch-flash-my { 0%,100% { box-shadow: 0 0 0 3px var(--frame), var(--shadow); } 50% { box-shadow: 0 0 0 6px rgba(255,214,79,.9), 0 0 36px rgba(255,214,79,.8); } }
@keyframes spitch-flash-op { 0%,100% { box-shadow: 0 0 0 3px var(--frame), var(--shadow); } 50% { box-shadow: 0 0 0 5px rgba(229,72,60,.7); } }
.goalfx {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; color: #fff; line-height: 1.2; pointer-events: none;
  background: rgba(10, 30, 18, .45); opacity: 0;
}
.goalfx[hidden] { display: none; }
.goalfx.is-on { animation: goalfx-in .35s ease-out forwards; }
.goalfx b { font-size: clamp(34px, 11vw, 64px); font-weight: 900; letter-spacing: .08em; text-shadow: 0 3px 16px rgba(0,0,0,.55); }
.goalfx span { font-size: clamp(14px, 4vw, 20px); font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.goalfx--my { background: radial-gradient(circle at 50% 45%, rgba(255,214,79,.55), rgba(20,60,30,.6) 70%); }
.goalfx--my b { color: #ffe066; animation: goalfx-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.goalfx--op { background: rgba(60, 10, 10, .5); }
.goalfx--op b { color: #ffb4ae; }
.goalfx--small b { font-size: clamp(22px, 7vw, 36px); }
@keyframes goalfx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes goalfx-pop { from { transform: scale(.4); } to { transform: scale(1); } }
.goalfx--my::before, .goalfx--my::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, #ffd54f 0 3px, transparent 4px), radial-gradient(circle, #ffffff 0 2.5px, transparent 3.5px),
    radial-gradient(circle, #e5483c 0 3px, transparent 4px), radial-gradient(circle, #2f6fe4 0 3px, transparent 4px);
  background-size: 90px 70px, 70px 90px, 110px 80px, 80px 110px;
  background-position: 0 0, 20px 30px, 50px 10px, 10px 60px;
  animation: goalfx-fall 1.6s linear infinite; opacity: .85;
}
.goalfx--my::after { background-position: 40px 20px, 5px 70px, 80px 50px, 30px 10px; animation-duration: 2.1s; }
.goalfx--small::before, .goalfx--small::after { display: none; }
@keyframes goalfx-fall { from { transform: translateY(-40%); } to { transform: translateY(40%); } }
@media (prefers-reduced-motion: reduce) { .goalfx--my::before, .goalfx--my::after { animation: none; } }

/* サッカーの試合中の操作：一時停止・×1・×2・×3を横一列に */
.speedbar--soccer { display: flex; flex-wrap: nowrap; gap: 6px; }
.speedbar--soccer .speedbtn { flex: 1 1 0; min-width: 0; min-height: 38px; text-align: center; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.speedbar--soccer .speedbtn--pause.is-paused { background: linear-gradient(180deg, #ff5a6e, var(--danger-fill)); color: #ffffff; border-color: #8f0c22; box-shadow: 0 2px 0 #8f0c22; }

/* サッカーのオーダー変更 */
.soc-forms { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.soc-cnts { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 800; margin: 6px 0; }
.soc-cnt.is-bad { color: var(--danger); }

/* 特訓のカードの名前は押すと詳細が開く（見た目は太字の名前のまま） */
.tcard__name { font-weight: 800; font-size: 15px; color: var(--brand); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* 共有・保存の前に、作った画像を見せる */
.sharepv { margin: 8px 0 12px; text-align: center; }
.sharepv img { max-width: 100%; max-height: 52vh; border-radius: var(--radius-sm); border: 2px solid var(--line); box-shadow: var(--shadow-sm); }
.sharepv__actions { display: flex; gap: 8px; }
.sharepv__actions .btn { flex: 1 1 0; }
.sharepv__actions .btn { padding-left: 4px; padding-right: 4px; white-space: nowrap; font-size: 14px; }
.sharepv__actions .btn--primary::after { content: none; }

@keyframes fvBaseOn { to { fill: var(--yel-hi); stroke: var(--yel-edge); } }
@keyframes fvBaseOff { to { fill: #ffffff; stroke: #5a6b8c; } }
.fv-base.is-turn-on { animation: fvBaseOn .01s linear forwards; }
.fv-base.is-turn-off { animation: fvBaseOff .01s linear forwards; }

.ll__today { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
.ll__today i { font-style: normal; white-space: nowrap; }
.ll__today b { margin-left: 3px; color: var(--ink); font-weight: 800; font-family: var(--font-num); }

.fv-so { font: 900 13px/1 system-ui, -apple-system, 'Hiragino Sans', sans-serif; letter-spacing: .08em; fill: #d63a2f; stroke: #fff; stroke-width: 3px; paint-order: stroke; opacity: 0; }

.spitch .sp__name { font: 700 2.5px sans-serif; fill: #fff; stroke: rgba(10, 30, 15, .72); stroke-width: .55px; paint-order: stroke; pointer-events: none; }
.spitch .sp__cap { font: 800 2.6px sans-serif; fill: #ffe27a; stroke: rgba(10, 30, 15, .8); stroke-width: .55px; paint-order: stroke; pointer-events: none; }
.spitch .sp--act .sp__name { font-size: 3.1px; fill: #ffe27a; }

/* ゲームの紹介文（トップの下） */
.about { margin: 28px 0 8px; padding: 18px 16px 8px; }
.about__title { margin: 0 0 10px; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--brand); }
.about p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.9; color: var(--ink-mute); }
.about p b { color: var(--ink); }
.about a { color: var(--brand); font-weight: 800; text-underline-offset: 3px; }

/* =========================================================
   押しボタンの形は、押せるものだけに使う
   （下に落ちる影・つやのあるグラデーション・太くて丸い枠は、.btn などボタンだけのもの。
     見出し・数字の表示・札・手順の印は、ボタンに見えないよう平らにしてある）
   ========================================================= */
/* 画面の見出し：リボンをやめて、青い文字と下線の見出しにする */
.section-title {
  display: flex; width: auto; max-width: 100%;
  margin: 4px 0 var(--sp-3); padding: 2px 0 8px 14px;
  background: none; border: 0; border-bottom: 3px solid var(--frame); border-radius: 0; box-shadow: none;
  color: var(--ink); text-shadow: none; position: relative;
}
.section-title::before {
  position: absolute; left: 0; top: 4px; bottom: 11px; width: 5px; min-height: 0;
  background: var(--yel-lo); box-shadow: none; border-radius: 2px;
}
#poach-title.is-win { background: none; color: var(--good); border-bottom-color: var(--good-fill); }
#poach-title.is-lose { background: none; color: var(--danger); border-bottom-color: var(--danger-fill); }
/* 小見出し：枠と丸みをやめて、左に線の入った帯にする */
.sub { border: 0; border-left: 5px solid var(--frame); border-radius: 0; background: var(--panel-2); }
/* 数字の表示（選択 1/5・見送り 0/3）：ボタンでなく、計器の表示のように */
.train-meta > span {
  background: none; color: var(--ink-mute); border: 0; border-left: 4px solid var(--yel-lo);
  border-radius: 0; box-shadow: none; padding: 4px 10px;
}
.train-meta b { color: var(--brand); }
/* 流れの一覧：影のついた箱でなく、罫線で区切った一覧にする */
.flow li { background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; padding: 7px 4px; }
/* 見出しの上の小さな札 */
.hero__eyebrow, .opening__eyebrow, .nextup__eyebrow, .champ__eyebrow {
  background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; color: var(--yel-hi);
}
.vs i { background: none; box-shadow: none; border-radius: 0; padding: 0 2px; color: var(--yel-hi); }
.taphint { background: none; box-shadow: none; color: var(--ink-mute); padding: 3px 6px; border-radius: 0; }
/* パネル・札・手順の印：下に落ちる影をやめる */
.ll, .ll.is-batting, #screen-poach #poach-lead,
#screen-poach[data-stage="win"] #poach-lead, #screen-poach[data-stage="lose"] #poach-lead { box-shadow: none; }
.decisions__badge { box-shadow: none; border-radius: 3px; }
.poachsteps li, .poachsteps li.is-done, .poachsteps li.is-now { box-shadow: none; border: 0; border-bottom: 3px solid var(--line); border-radius: 0; background: none; }
.poachsteps li.is-done { border-bottom-color: var(--good-fill); }
.poachsteps li.is-now { color: var(--ink); border-bottom-color: var(--yel-lo); }
/* ラベル（札）：枠線をやめて、色のついた小さな文字にする */
.traincard__tier, .traincard__multi, .capmark, .gr__awake, .retire__draft, .tag {
  border: 0; border-radius: 3px; padding: 1px 6px;
}
.capbox__label { background: none; color: var(--brand); padding: 0; border-radius: 0; }
.capbox.is-empty .capbox__label { background: none; color: var(--danger); }
/* 上がる能力の印（特訓カード）：枠で囲まず、色を敷くだけ */
.ts.is-up, .traincard--xl .ts.is-up { border: 0; border-radius: 3px; }
/* 点数の表示（勝敗画面・試合結果・対戦カード）：濃い青の面はそのままに、
   押しボタンのような縁取りと影はなくす */
.result-score, .verdict__score, .section-lead.vs, .sclock {
  border: 0; box-shadow: none; border-radius: 4px;
}
.result-score.is-win, .result-score.is-lose { border: 0; }
.result-score.is-win { border-left: 6px solid #5fd67e; }
.result-score.is-lose { border-left: 6px solid #ff7a8a; }
.result-score b, .verdict__score b { text-shadow: none; }
/* 設定画面の小見出し・覚醒の札・タップの案内・手順の番号：どれも押せないので平らにする */
.set-heading { border: 0; border-left: 5px solid var(--frame); border-radius: 0; background: var(--panel-2); }
.awakebox__title { background: none; border: 0; border-radius: 0; padding: 0; color: var(--yel-ink); }
.taphint--static { background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--ink-mute); padding: 6px 0; }
.flow li::before { background: var(--yel-lo); border: 0; box-shadow: none; color: var(--yel-ink); }
/* サッカーの時計・タイムの場面表示：青い帯の札をやめて、文字だけにする */
.sclock { background: none; color: var(--ink); border-radius: 0; border-bottom: 3px solid var(--frame); }
.time__where { background: none; color: var(--brand); padding: 0; border-radius: 0; }


/* ===== 弾道（傾けた矢印と数字） ===== */
.traj { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; white-space: nowrap; }
.traj svg { width: 16px; height: 13px; overflow: visible; }
.traj line { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.traj path { fill: currentColor; stroke: none; }
.traj b { font-family: var(--font-num); font-size: 11.5px; }
.traj--1 { color: #2d8f5b; } .traj--2 { color: #3b82c4; }
.traj--3 { color: #d28a1c; } .traj--4 { color: #d6453d; }

/* ===== 投打を変える ===== */
.handbtn { font-weight: 700; }
.handpick { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line, #bbb); border-radius: 8px; }
.handpick__row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.handpick__row > span { width: 3em; font-size: 12px; }
.handpick .btn.is-on { outline: 2px solid currentColor; font-weight: 800; }

/* ===== オーダー変更：スタメンと控えの見出し、番号タップの入れ替え ===== */
.luhead { list-style: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 6px 4px 3px; color: var(--ink-mute, #667); border-bottom: 1px solid var(--line, #cbd); margin-top: 4px; }
.luhead--bench { margin-top: 14px; }
.luno--swap { cursor: pointer; border-radius: 6px; outline: 1px dashed transparent; }
.luno--swap:hover { outline-color: currentColor; }
.lurow.is-picked { background: rgba(255, 200, 40, .22); box-shadow: inset 0 0 0 2px #e0a400; }
.lurow.is-picked .luno--swap { font-weight: 900; }

/* ===== 引き抜きの演出 ===== */
.pcine { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(ellipse at center, rgba(14,40,100,.94), rgba(3,8,26,.97)); color: #fff; animation: pcineIn .25s ease-out; overflow: hidden; }
.pcine.is-out { opacity: 0; transition: opacity .2s; }
.pcine__card { text-align: center; padding: 22px 34px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(255,255,255,.07);
  animation: pcineCard .55s cubic-bezier(.2,1.3,.4,1); }
.pcine__label { font-size: 13px; letter-spacing: .3em; opacity: .75; }
.pcine__name { font-size: 30px; font-weight: 900; margin: 8px 0 2px; }
.pcine__meta { font-size: 14px; opacity: .8; }
.pcine__dots { margin-top: 14px; }
.pcine__dots i { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background: #fff; animation: pcineDot .9s infinite; }
.pcine__dots i:nth-child(2) { animation-delay: .15s; } .pcine__dots i:nth-child(3) { animation-delay: .3s; }
.pcine__stamp { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(.2) rotate(-8deg); opacity: 0; text-align: center;
  font-size: 40px; font-weight: 900; letter-spacing: .06em; text-shadow: 0 3px 14px rgba(0,0,0,.6); }
.pcine.is-win .pcine__card, .pcine.is-lose .pcine__card { animation: pcineCardOut .35s forwards; }
.pcine.is-win .pcine__stamp { color: #ffd43b; animation: pcineStamp .5s cubic-bezier(.2,1.5,.4,1) forwards; }
.pcine.is-lose .pcine__stamp { color: #ff8a98; animation: pcineStamp .5s ease-out forwards; }
.pcine.is-lose { animation: pcineShake .4s; filter: saturate(.4); }
.pcine.is-win { background: radial-gradient(ellipse at center, rgba(184,120,0,.9), rgba(30,14,0,.97)); }
.pcine__confetti { position: absolute; top: -12px; width: 9px; height: 15px; animation: pcineFall 1.6s ease-in forwards; }
@keyframes pcineIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcineCard { from { transform: scale(.4) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pcineCardOut { to { transform: scale(.8); opacity: 0; } }
@keyframes pcineDot { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes pcineStamp { to { transform: translateY(-50%) scale(1) rotate(-3deg); opacity: 1; } }
@keyframes pcineShake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
@keyframes pcineFall { to { transform: translateY(105vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .pcine, .pcine * { animation-duration: .01s !important; animation-delay: 0s !important; } }
.poach-none { margin-top: 16px; padding-top: 6px; border-top: 1px dashed var(--line, #bbb); }

/* ===== 「勝利」「敗戦」の文字 =====
   丸ゴシックの細い線に縁取りが重なって潰れて見えていたので、
   角のしっかりした極太のゴシックにして、斜体にして勢いを出す。
   勝利は金の縦グラデーション＋太い縁、敗戦は落ち着いた色のまま */
.verdict__word {
  font-family: "Hiragino Kaku Gothic StdN", "Hiragino Kaku Gothic ProN", "Yu Gothic Bold", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
  font-weight: 900; font-style: italic; letter-spacing: .14em;
  font-size: 64px;
  padding: 0 .1em;
}
.verdict__box.is-win .verdict__word {
  color: #ffd43b;
  background: linear-gradient(180deg, #fff3a8 0%, #ffd43b 45%, #f0a500 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(2px 0 0 var(--blue-deep)) drop-shadow(-2px 0 0 var(--blue-deep))
    drop-shadow(0 2px 0 var(--blue-deep)) drop-shadow(0 -2px 0 var(--blue-deep))
    drop-shadow(0 5px 0 var(--blue-deep));
}

/* オーダー変更の能力は1行にまとめる */
.lustats--row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 5px; font-size: 10px; white-space: nowrap; overflow: hidden; }
.lustats--row .lus { display: inline-flex; align-items: baseline; gap: 0; }
.lustats--row .lus i { font-style: normal; font-size: 9.5px; margin-right: 1px; }
.lustats--row .rank { min-width: 0; font-size: 12px; }
.lustats--row .rankval { font-size: 9.5px; margin-left: 0; }
.lustats--row .traj { margin-right: 2px; }