/* 舟読み — モバイル前提のスタイル。
   デザインの軸は競艇の枠番カラー(1=白/2=黒/3=赤/4=青/5=黄/6=緑)。
   ファンには一目で意味が通る記号なので、これを情報設計の骨にする。

   ============ デザインの土台(2026-08-06) ============
   ここにある変数以外の「生の値」を新しく書かないこと。
   - 色: 意味色は base / -soft(薄い背景) / -border(枠線) / -tint(暗い背景で読める明るい字)
     の4形で使う。「この青の28%透過…」のような直書きが40箇所に散っていた反省から。
   - 文字: --fs-3xs〜--fs-3xl の10段階だけ。以前は35種類あった。
   - 角丸: --r-s(小部品) / --r-m(入力・行) / --r(カード) / --r-full(丸)の4段階。
   - 動き: すべて var(--t)。速さの個性は出さない(誠実・実直がブランド)。 */

/* 数字専用の書体(場内の電光掲示の趣)。数字+記号だけの7KBサブセットを自前配信。
   日本語はシステムフォントに任せる(Webフォントにすると数MBになるため)。 */
/* ロゴタイプ「舟読み」専用。**この3文字しか入っていない**サブセット(2KB)。
   システムのゴシックのままだと「作りかけのWebページ」に見えるのが
   チープさの正体だった(2026-08-06)。明朝の端正さは「数字に正直」という
   立ち位置とも噛み合う。本文には絶対に使わない(3文字しか無いため) */
@font-face {
  font-family: "Funayomi Brand";
  src: url("fonts/zenoldmincho-brand.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* 土台の色(下の層ほど暗い)。無彩色の黒ではなく「ナイターの水面」の紺。
     2026-08-06、frontend-designスキルの指摘で刷新: 元の配色は
     「ほぼ黒+単色アクセント」というAI生成デザインの典型で、題材との接点が無かった */
  --bg: #0b141f;
  /* 画面上部の「ナイターの照明の滲み」。ライトでは白の滲みに差し替える
     (紺のまま残すと灰色のムラに見える。2026-09-05に実際に起きた) */
  --bg-glow: #17293e;
  --bg-soft: #121d2b;
  --card: #172432;
  --card-2: #1e2c3c;
  /* 罫線は「白の薄膜」にする。ベタ塗りの線より上質に見え、どの面の上でも馴染む。
     2026-09-05: 「紺一色でメリハリが無い」との指摘で、面の分離(線・輪郭・面の明度)を
     一段強めた。値は+0.03〜0.07刻み——一気に上げると安っぽい白枠になる */
  --line: rgba(233, 240, 248, .14);
  /* カードの輪郭(--edge)と上端のハイライト(--edge-top)。
     上から光が当たっている気配を作る。安っぽさの正体は「光の方向が無い」こと */
  --edge: rgba(233, 240, 248, .15);
  --edge-top: rgba(233, 240, 248, .25);
  /* 浮いている面(カード)は上が明るい微グラデーション。凹んでいる面は --bg-soft のベタ */
  --surface: linear-gradient(180deg, #223345 0%, #182634 100%);
  /* 主役カード(ヒーロー・遊び方・章の宣言など)用: アクセントの光を上からうっすら。
     多用すると効かなくなるので「1画面に1枚」が目安。
     2026-09-05「まだ弱い」の指摘で.12→.2に増量、専用の濃い枠線も追加 */
  --surface-hi: linear-gradient(180deg, rgba(60, 200, 192, .2) 0%, rgba(60, 200, 192, .05) 45%, rgba(60, 200, 192, 0) 100%),
                linear-gradient(180deg, #223345 0%, #182634 100%);
  --accent-border-hi: rgba(60, 200, 192, .5);

  /* 文字(3段階) */
  --fg: #eaf1f8;
  --fg-dim: #a2b1c5;
  /* 2026-09-02: #69788d(カード上3.5:1)はWCAG AA不合格で、小さい注記が
     実質読めなかった(利用者層は中高年が多い)。カード上約4.6:1へ引き上げ */
  --fg-faint: #8494a8;
  --muted: var(--fg-faint);   /* 旧名。3箇所が未定義のまま参照していたバグの修正を兼ねる */

  /* 意味色: 判断(アクア) / 良い(緑) / 注意(琥珀) / 悪い(赤) / 夢枠(金)
     アクセントを青→アクアに変えた理由: 旧 #4da3ff は4号艇の枠番カラー(#1273e8系)と
     同系で、この題材では紛らわしい。水を思わせ、6つの枠番カラーの誰とも被らない色。 */
  --accent: #3cc8c0;
  --accent-soft: rgba(60, 200, 192, .09);
  --accent-border: rgba(60, 200, 192, .32);
  --accent-tint: #a8ece7;
  --accent-ink: #04211e;      /* accent の上に載せる文字色 */
  --good: #3ddc97;
  --good-soft: rgba(61, 220, 151, .09);
  --good-border: rgba(61, 220, 151, .35);
  --good-tint: #9af0c9;
  --warn: #ffb648;
  --warn-soft: rgba(255, 182, 72, .09);
  --warn-border: rgba(255, 182, 72, .3);
  --warn-tint: #ffd79a;
  --warn-ink: #1b1200;
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, .1);
  --bad-border: rgba(255, 107, 107, .38);
  --bad-tint: #ffb3b3;
  --gold: #f5c400;
  --gold-soft: rgba(245, 196, 0, .07);
  --gold-border: rgba(245, 196, 0, .4);

  /* 枠番カラー(公式)。変更禁止 — ファンの共通言語 */
  --lane1: #ffffff; --lane1-fg: #111;
  --lane2: #1c1c1c; --lane2-fg: #fff;
  --lane3: #e2261c; --lane3-fg: #fff;
  --lane4: #1273e8; --lane4-fg: #fff;
  --lane5: #f5c400; --lane5-fg: #111;
  --lane6: #00a95f; --lane6-fg: #fff;

  /* 文字の大きさ(10段階) */
  --fs-3xs: .62rem;   /* 最小の添え字。これ未満は読めないので作らない */
  --fs-2xs: .68rem;   /* バッジ・ラベル */
  --fs-xs: .74rem;    /* 補足・注記 */
  --fs-s: .8rem;      /* 小さめ本文 */
  --fs-m: .87rem;     /* 本文 */
  --fs-base: .95rem;  /* 大きめ本文・ボタン */
  --fs-l: 1.05rem;    /* 小見出し・強調数字 */
  --fs-xl: 1.15rem;   /* 見出し */
  --fs-2xl: 1.35rem;  /* 画面タイトル・R番号 */
  --fs-3xl: 1.55rem;  /* 最重要の数字(回収率など) */

  /* 角丸(4段階+シート) */
  --r-s: 8px;
  --r-m: 12px;
  --r: 14px;
  --r-l: 18px;
  --r-full: 999px;

  /* 余白 */
  --pad: 16px;

  /* 影(浮いている高さ)と動き。shadow-1は上端のハイライトを含む =
     これが付いた面は自動的に「上から光が当たった」見た目になる */
  /* 半透明バー(上部バー・下部ナビ)。テーマで差し替えるためトークン化(2026-08-24) */
  --bar-top: rgba(11, 20, 31, .86);
  --bar-bottom: rgba(14, 17, 22, .94);

  --shadow-1: inset 0 1px 0 var(--edge-top), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-2: inset 0 1px 0 var(--edge-top), 0 6px 18px rgba(0, 0, 0, .4);
  --shadow-3: 0 10px 30px rgba(0, 0, 0, .5);
  --t: .15s ease;

  /* 数字の書体。R番号・オッズ・回収率など「数字が主役」の場所だけに使う。
     本文の中の数字には使わない(和文と混ざって浮くため)。 */
  --font-num: "Barlow Condensed", -apple-system, "Segoe UI", sans-serif;
}

/* 動きを減らす設定の端末では、装飾的な動きを全て止める(品質の床) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden属性を**必ず**効かせる。ブラウザ既定の [hidden]{display:none} は
   ユーザーエージェント側の規則なので、こちらが書いた display:flex/block に
   負ける。つまり .foo{display:flex} を持つ要素は el.hidden=true にしても
   消えない——JSは動いているのに画面が変わらないので、原因が非常に見えにくい。
   実際にオンボーディングで踏み、「今日のレースを見るが無反応」になった
   (2026-08-18)。個別に .foo[hidden] を足して回るのは漏れるので、ここで一度だけ塞ぐ。 */
[hidden] { display: none !important; }

/* キーボード・スイッチ操作の現在地。マウス/タップでは出ない(:focus-visible)。
   ストア審査のアクセシビリティ項目でもあるが、それ以前に品質の基本 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

html, body {
  margin: 0; padding: 0;
  /* ナイターの水面: 画面上部に遠くの照明の淡い滲みを置く。
     はっきり見えたら失敗で、「なんとなく上が明るい」程度に抑える */
  background:
    radial-gradient(120% 50% at 50% -12%, var(--bg-glow) 0%, transparent 62%),
    var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic UI", "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
}

/* --- 上部バー --- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bar-top);
  backdrop-filter: saturate(160%) blur(12px);
  padding-top: env(safe-area-inset-top);
}
/* シグネチャー: 枠番6色の帯。ファンには一目で「競艇のアプリ」と通じる、
   この題材にしか使えない記号。目立つ装飾はこれ1つに絞る(他は静かに保つ) */
.topbar::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg,
    var(--lane1) 0 16.66%, var(--lane2) 0 33.33%, var(--lane3) 0 50%,
    var(--lane4) 0 66.66%, var(--lane5) 0 83.33%, var(--lane6) 0 100%);
}
.topbar-inner {
  max-width: 720px; margin: 0 auto;
  padding: 10px var(--pad);
  display: flex; align-items: baseline; gap: 10px;
}
.brand {
  font-family: "Funayomi Brand", -apple-system, "Hiragino Mincho ProN", serif;
  font-size: var(--fs-xl); font-weight: 900; margin: 0;
  letter-spacing: .06em;      /* 明朝は字間を空けた方が締まる */
}
/* ヘッダーの丸マーク。**アプリのアイコンと同じ絵**を使う(別々の絵にすると
   ホーム画面とアプリ内で別ブランドに見える)。白縁が輪郭になるので小さくても形が残る */
.brand-mark { width: 24px; height: 24px; align-self: center; flex: 0 0 auto; display: block; }
.tagline { font-size: var(--fs-xs); color: var(--fg-faint); }

/* --- ビュー --- */
main { max-width: 720px; margin: 0 auto; padding: var(--pad); }
.view { display: none; }
.view.active { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* --- コントロール --- */
.controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--fg-faint); font-weight: 600; }
select {
  appearance: none; width: 100%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2397a3b6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px;
  color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 13px 40px 13px 14px; font-size: 1rem; font-family: inherit;
}
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; background: var(--surface); border: 1px solid var(--edge);
  color: var(--fg-dim); border-radius: var(--r-full); padding: 8px 15px;
  font-size: var(--fs-m); font-family: inherit; cursor: pointer; transition: var(--t);
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* --- レース一覧 --- */
.race-list { display: grid; gap: 10px; }
.race-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 14px var(--pad);
  cursor: pointer; transition: var(--t); text-align: left; width: 100%;
  font-family: inherit; color: inherit;
  box-shadow: var(--shadow-1);
}
.race-card:active { transform: scale(.985); background: var(--card-2); }
@media (hover: hover) {
  .race-card:hover { border-color: var(--fg-faint); }
}
.rno { font-family: var(--font-num); font-size: 1.7rem; font-weight: 700; min-width: 2.6em; letter-spacing: -.02em; }
.race-meta { flex: 1; min-width: 0; }
.race-venue { font-weight: 600; }
.race-sub { font-size: var(--fs-s); color: var(--fg-dim); }
.race-right { text-align: right; font-size: var(--fs-s); color: var(--fg-dim); white-space: nowrap; }
.badge {
  display: inline-block; font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-full);
  background: var(--bg-soft); color: var(--fg-faint); border: 1px solid var(--line);
}
.badge.done { color: var(--fg-faint); }
.badge.soon { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.badge.wait { color: var(--fg-faint); }
/* 締切10分以内だけ赤で点灯させる(2026-08-13)。
   締切前をすべて琥珀にしていた頃は、144件のどれが「いま急ぐやつ」なのか
   右端の色から読めなかった。1色増やすだけで、視線を動かさずに現在地が分かる。
   点滅ではなく淡い呼吸にする。並んだ何十個が一斉に点滅すると画面が騒がしい。 */
.badge.soon.urgent {
  background: var(--bad-soft); color: var(--bad-tint);
  border-color: var(--bad); font-weight: 700;
  animation: urgent-pulse 2.4s ease-in-out infinite;
}
@keyframes urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 107, 107, .16); }
}
@media (prefers-reduced-motion: reduce) { .badge.soon.urgent { animation: none; } }

/* 結果バッジ: 着順3つ(枠色のミニチップ)+3連単の配当。
   「結果待ち」の代わりに置く。1から始まるか+金額で、荒れ具合が一覧から一目で分かる */
.badge.res { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; }
.badge.res .rl {
  width: 15px; height: 15px; border-radius: 3px; flex: 0 0 auto;
  display: grid; place-items: center; font-style: normal;
  font-weight: 800; font-size: var(--fs-3xs);
  border: 1px solid rgba(128,128,128,.35);
}
.badge.res .rl-1 { background: var(--lane1); color: var(--lane1-fg); }
.badge.res .rl-2 { background: var(--lane2); color: var(--lane2-fg); }
.badge.res .rl-3 { background: var(--lane3); color: var(--lane3-fg); }
.badge.res .rl-4 { background: var(--lane4); color: var(--lane4-fg); }
.badge.res .rl-5 { background: var(--lane5); color: var(--lane5-fg); }
.badge.res .rl-6 { background: var(--lane6); color: var(--lane6-fg); }
.badge.res .res-amt {
  margin-left: 2px; font-weight: 700; color: var(--fg-dim);
  font-feature-settings: "tnum";
}

/* --- 台帳のレース行(今日の予想・日別内訳で共通) ---
   表(5列)だとスマホ幅で横スクロールになるので、1レース=2行のリスト。
   上段: 締切・レース・判定・結果(右寄せ)、下段: 買い目3点 */
.trk-list { display: flex; flex-direction: column; }
.trk-row { padding: 7px 0 6px; border-bottom: 1px solid var(--line); }
.trk-row:last-child { border-bottom: none; }
.trk-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trk-time { font-size: var(--fs-xs); color: var(--fg-dim); font-feature-settings: "tnum"; flex: 0 0 auto; }
.trk-race { font-size: var(--fs-s); font-weight: 700; flex: 0 0 auto; }
.trk-main .pill { flex: 0 0 auto; }
.trk-res {
  margin-left: auto; text-align: right; font-size: var(--fs-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* 買い目は行の主役(2026-09-04)。予想1着バッジ+買い目3点を本文サイズで。 */
.trk-picks {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--fg-dim); margin-top: 4px;
}
.trk-head {
  width: 22px; height: 22px; font-size: .8rem;
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.trk-headlbl { font-size: var(--fs-xs); color: var(--fg-dim); margin-right: 2px; }
.trk-pick {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-base); font-weight: 700; color: var(--fg);
  letter-spacing: .5px; font-feature-settings: "tnum";
}
/* カレンダー過去日の結果カード(2026-09-04) */
.day-result-card { border: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; }
.day-result-card:active { transform: scale(.99); }
/* 左上ロゴはホームに戻るボタンでもある(2026-09-04) */
.topbar-inner { cursor: pointer; }
/* プロフィールアイコン(2026-09-04) */
.ava {
  display: inline-grid; place-items: center; border-radius: 50%;
  vertical-align: -5px; margin-right: 5px; flex: 0 0 auto;
}
.ava svg { width: 70%; height: 70%; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-btn {
  background: none; border: 2px solid transparent; border-radius: 50%;
  padding: 3px; cursor: pointer; line-height: 0; transition: var(--t);
}
.avatar-btn .ava { margin: 0; vertical-align: 0; }
.avatar-btn.on { border-color: var(--accent); }
.avatar-btn:active { transform: scale(.92); }
/* アカウントのプロフィールヘッダー(2026-09-04) */
.acc-profile { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.acc-avatar {
  background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
  border-radius: 50%; flex: 0 0 auto;
}
.acc-avatar .ava { margin: 0; vertical-align: 0; }
.acc-avatar:active { transform: scale(.94); }
.ava-empty {
  background: var(--bg-soft); border: 1.5px dashed var(--fg-faint);
  color: var(--fg-faint); font-size: 1.2rem;
}
.acc-id { min-width: 0; }
.acc-name { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 2px; }
.acc-mail { margin: 2px 0 0; font-size: var(--fs-s); word-break: break-all; }
.acc-sub { margin: 2px 0 0; font-size: var(--fs-xs); }
/* .laneの基本(34px・大きい字)より必ず勝つよう .lane.rank-boat の二重指定にする。
   .rank-boat単体だと定義順で.laneに負け、小さい箱に大きい数字=数字が切れる(実際に起きた) */
.lane.rank-boat {
  display: inline-grid; place-items: center; border-radius: 6px;
  font-size: .62rem; line-height: 1; vertical-align: -4px; margin-left: 4px;
  overflow: hidden; flex: 0 0 auto;
}
/* 名前横の鉛筆(ユーザー名編集の入口・2026-09-05) */
.acc-edit {
  background: none; border: none; padding: 4px; margin-left: 2px; cursor: pointer;
  color: var(--fg-dim); line-height: 0; border-radius: 6px;
}
.acc-edit:active { transform: scale(.9); }
/* アカウント編集ポップアップ(2026-09-05) */
.acc-modal {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(4, 10, 16, .6);
  backdrop-filter: blur(2px);
}
.acc-modal-card {
  width: min(360px, 100%); background: var(--surface); border: 1px solid var(--edge-top);
  border-radius: 18px; padding: 16px 18px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.acc-modal-head {
  display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px;
}
.acc-modal-x {
  background: none; border: none; color: var(--fg-dim); font-size: 1rem;
  padding: 4px 8px; cursor: pointer; border-radius: 8px;
}

/* --- AIアシスタント(しくみページのチャット) --- */
.ask-card { margin-bottom: 14px; }
.ask-log { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; max-height: 55vh; overflow-y: auto; }
.ask-log:empty { display: none; }
.ask-msg {
  padding: 8px 12px; border-radius: var(--r-m); font-size: var(--fs-s);
  white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}
.ask-msg.ask-q { align-self: flex-end; max-width: 85%; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.ask-msg.ask-a { align-self: flex-start; max-width: 95%; background: var(--bg-soft); border: 1px solid var(--line); }
.ask-msg.ask-err { align-self: flex-start; color: var(--warn); border: 1px solid var(--warn-border); background: var(--warn-soft); }
.ask-code-row { margin-bottom: 6px; }
.ask-code {
  width: 100%; padding: 8px 10px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg);
  font-size: var(--fs-s);
}
.ask-row { display: flex; gap: 8px; align-items: stretch; }
.ask-input {
  flex: 1; min-width: 0; resize: vertical; padding: 8px 10px;
  border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--fg); font-size: var(--fs-s);
  font-family: inherit;
}
.ask-send {
  flex: 0 0 auto; padding: 0 16px; border-radius: var(--r-s); border: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: var(--fs-s);
  cursor: pointer;
}
.ask-send:disabled { opacity: .5; }

/* --- 日別成績の開閉行(日付タップでその日の内訳を展開) --- */
.day-row { cursor: pointer; }
.day-row:hover td, .day-row:active td { background: var(--bg-soft); }
.day-chev {
  display: inline-block; margin-right: 5px; color: var(--fg-faint);
  transition: transform var(--t, .15s);
}
.day-row.open .day-chev { transform: rotate(90deg); }
.day-detail-cell { padding: 0 0 10px 12px; }
.day-detail-cell .day-detail { margin-top: 2px; }
.day-detail-cell .day-detail th { font-size: var(--fs-3xs); }

/* --- 今日の舟読みAI(一覧への重ね合わせ) --- */
/* 「荒れ注意」= 1号艇が飛ぶかもしれないレース(2026-08-19、利用者要望)。
   勝負(アクア)とは別の意味なので別の色にする。ただし**赤は締切間近**で使っているので
   紫寄りに寄せる。同じ画面に2つの赤があると、どちらも急かしているように見える。
   高配当の合図ではない(万舟率はほぼ変わらない)ので、金は使わない。 */
.badge.alert {
  background: rgba(167, 139, 250, .12); color: #c4b5fd;
  border-color: rgba(167, 139, 250, .45); font-weight: 700;
}
.badge.ai-buy {
  background: var(--accent-soft); color: var(--accent-tint);
  border-color: var(--accent-border); font-weight: 700;
}
/* 一覧の先頭に置く「今日の勝負」(2026-08-13、ai-strip の後継)。
   1行の帯だった頃は、勝負の件数しか言えていなかった。
   参考にした投票アプリのAI予想は入口で実測の的中率をゲージで見せていて、
   それが信頼の作り方になっていた。舟読みは台帳に本物の数字があるので、
   同じ場所に**実測の的中率と回収率**を出す。回収率を隠さないのが要点。 */
.hero {
  background: var(--surface-hi); border: 1px solid var(--accent-border-hi);
  border-radius: var(--r); padding: 12px var(--pad) 10px; margin-bottom: 4px;
  box-shadow: var(--shadow-1);
}
/* ボタン群は幅が足りなければまとまって2行目へ落ちる(右寄せ)。
   タイトルの途中折り返し(「今日の舟/読みAI」)を防ぐため */
.hero-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.hero-title { white-space: nowrap; }
.hero-top-btns { display: flex; gap: 6px; margin-left: auto; }
.hero-top img { border-radius: var(--r-full); flex: 0 0 auto; }
.hero-title { font-size: var(--fs-l); font-weight: 800; min-width: 0; }
.hero-title span {
  display: block; font-size: var(--fs-xs); color: var(--fg-dim);
  font-weight: 400; margin-top: 2px;
}
.hero-title .badge { vertical-align: 1px; }
.hero-body { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* ゲージは幅を固定して、隣の文章が何行になっても位置が動かないようにする */
.hero-gauge { flex: 0 0 108px; position: relative; text-align: center; }
.hero-gauge .gauge { width: 108px; height: 61px; display: block; }
.gauge-bg, .gauge-fg { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge-bg { stroke: var(--bg-soft); }
.gauge-fg { stroke: var(--accent); transition: stroke-dasharray .6s var(--ease, ease-out); }
/* 半円の内側に数字を置く。弧の下端(y=60)より少し上 */
.hero-gauge-v {
  position: absolute; left: 0; right: 0; top: 30px;
  font-family: var(--font-num); font-size: 1.35rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hero-gauge-k { font-size: var(--fs-3xs); color: var(--fg-faint); margin-top: -2px; }
.hero-facts { flex: 1; min-width: 0; }
/* ゲージの隣は数字だけ。回収率を的中率と同じ面・同じ大きさで出すのが要点で、
   ここを小さくしたり畳んだりしたら「都合の悪い数字を隠した」ことになる */
.hero-stats { display: grid; gap: 7px; }
.hero-stats > div { display: flex; align-items: baseline; gap: 7px; }
.hero-stats span { font-size: var(--fs-2xs); color: var(--fg-faint); flex: 0 0 auto; }
.hero-stats b { font-size: var(--fs-m); font-variant-numeric: tabular-nums; }
.hero-stats > div:first-child b { font-family: var(--font-num); font-size: 1.15rem; }
.hero-stats > div:last-child b { font-size: var(--fs-xs); color: var(--fg-dim); font-weight: 500; }
.hero-note {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.5;
}
.hero-note b { color: var(--warn-tint); }
/* 次の勝負レースへの導線。ここが一覧の実質的な「今すぐ見る」ボタン */
.hero-next {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: var(--r-m); padding: 9px 11px;
  font-family: inherit; color: var(--fg); text-align: left; cursor: pointer;
  font-size: var(--fs-s); transition: var(--t);
}
.hero-next:active { transform: scale(.985); }
.hero-next.is-done {
  background: var(--bg-soft); border-color: var(--line);
  color: var(--fg-faint); cursor: default; font-size: var(--fs-xs);
}
.hero-next-k { color: var(--fg-dim); font-size: var(--fs-xs); flex: 0 0 auto; }
.hero-next b { flex: 1; min-width: 0; }
.hero-chev { color: var(--fg-faint); font-size: var(--fs-l); flex: 0 0 auto; }
/* AIに聞く・台帳は見出し行の右端の中サイズボタン(2026-09-05)。
   一度は下段の大ボタン2つにしたが「タイトル横がちょうどいい、少し小さくてOK」
   との指摘で戻した。最初の極小チップ(3px 8px)よりは大きく保つ。 */
.hero-btn {
  flex: 0 0 auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--fg); font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: var(--t);
}
.hero-btn:active { transform: scale(.96); }
.hero-btn svg { flex: 0 0 auto; }
/* ランキングの遊び方カード(2026-09-05) */
.rank-intro p { font-size: var(--fs-s); }
/* 無料→プロ動線(2026-09-05) */
.ask-pro-link, .trk-lock {
  background: none; border: 1px solid var(--accent-border); color: var(--accent-tint);
  border-radius: var(--r-full); padding: 2px 9px; font-family: inherit;
  font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
/* プラン比較表(Pairs型・2026-09-05)。プロ列だけ色付きで浮かせる */
.plan-grid {
  display: grid; grid-template-columns: 1.5fr .7fr .8fr .9fr;
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
  font-size: var(--fs-xs);
}
.pg-h, .pg-k, .pg-v {
  padding: 9px 6px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1px;
}
.pg-k { align-items: flex-start; text-align: left; color: var(--fg-dim); padding-left: 10px; }
.pg-h { font-weight: 800; background: var(--bg-soft); }
.pg-h span { font-size: var(--fs-3xs); color: var(--fg-faint); font-weight: 600; }
.pg-h.pg-pro, .pg-v.pg-pro { background: var(--accent-soft); }
.pg-h.pg-pro { color: var(--accent-tint); }
.pg-h.pg-pro span { color: var(--accent-tint); }
.plan-grid > :nth-last-child(-n+4) { border-bottom: none; }

/* プラン選択カード(Pairs型) */
.plan-card {
  display: flex; align-items: center; gap: 10px; position: relative;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 16px; margin-bottom: 10px; cursor: pointer;
  transition: var(--t);
}
.plan-card:active { transform: scale(.99); }
.plan-card.best { border: 1.5px solid var(--accent-border-hi); background: var(--surface-hi); }
.plan-off {
  position: absolute; top: -9px; left: 12px;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-3xs); font-weight: 800; padding: 2px 9px; border-radius: var(--r-full);
}
.plan-main { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plan-main > b { font-size: var(--fs-l); }
.plan-price { font-variant-numeric: tabular-nums; text-align: right; }
.plan-price s { color: var(--fg-faint); font-size: var(--fs-xs); margin-right: 4px; }
.plan-price b { font-size: var(--fs-xl); }
.plan-price span { color: var(--fg-dim); font-size: var(--fs-xs); }
.plan-chev { color: var(--fg-faint); font-size: var(--fs-l); }
.plan-note { color: var(--fg-faint); font-size: var(--fs-xs); margin: 4px 0 0; }
/* vs 舟読みAI(成績→あなた・2026-09-06)。1対1の対決を大きく見せる */
.vsai { margin-bottom: 12px; }
.vsai-win { background: var(--surface-hi); border-color: var(--accent-border-hi); }
.vsai-row { display: flex; align-items: center; gap: 10px; }
.vsai-side {
  flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.vsai-side i { font-style: normal; font-size: var(--fs-xs); color: var(--fg-dim); }
.vsai-side b {
  font-family: var(--font-num); font-size: var(--fs-3xl);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.vsai-side span { font-size: var(--fs-2xs); color: var(--fg-faint); }
.vsai-mid { flex: 0 0 auto; font-weight: 800; color: var(--fg-faint); font-size: var(--fs-l); }
/* 公式検証アカウントの印。ユーザーと見分けが付くよう枠線だけの控えめな形 */
.bot-pill {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-full);
  border: 1px solid var(--accent-border); color: var(--accent-tint);
  font-size: var(--fs-3xs); font-weight: 700; vertical-align: 1px;
}
.rank-steps { margin: 0; padding-left: 20px; font-size: var(--fs-s); }
.rank-steps li { margin: 4px 0; }

/* 「勝負だけ」の絞り込み(2026-08-19)。
   会場チップと同じ列に置くと会場の一種に見えるので、行を分けて別の操作だと示す。 */
.list-filter { margin-top: 8px; }
/* 「勝負だけ」も同じ理由で大きくした。押せるものだと分かる大きさが要る。
   切り替えなので、入/切がひと目で分かるようにONは塗りつぶしにする
   (枠線だけの差だと、明るい場所で見分けが付かない)。 */
.filter-buy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--fg); font-family: inherit; font-size: var(--fs-base); cursor: pointer;
  transition: var(--t);
}
.filter-buy .filter-dot {
  width: 11px; height: 11px; border-radius: var(--r-full);
  background: var(--fg-faint); flex: 0 0 auto; transition: var(--t);
}
.filter-buy .filter-n { font-size: var(--fs-s); color: var(--fg-faint); }
.filter-buy.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 800;
}
.filter-buy.on .filter-dot { background: var(--accent-ink); }
.filter-buy.on .filter-n { color: var(--accent-ink); opacity: .75; }
.filter-buy:active { transform: scale(.97); }

/* 開催グレード(2026-08-19、利用者要望)。会場名のすぐ横に小さく置く。
   一般は出さない(サーバ側で落としている)ので、付いていること自体が情報になる。
   SGとG1だけ金にして、他は控えめな枠線だけ。全部を派手にすると差が消える。 */
.grade-tag {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  border-radius: 3px; border: 1px solid var(--line);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .04em;
  color: var(--fg-dim); vertical-align: 1px;
}
.grade-tag.grade-SG, .grade-tag.grade-PG1 {
  background: var(--gold); border-color: var(--gold); color: #1b1200;
}
.grade-tag.grade-G1 { background: var(--gold-soft); border-color: var(--gold-border); color: var(--gold); }
.grade-tag.grade-G2, .grade-tag.grade-G3 {
  border-color: var(--accent-border); color: var(--accent-tint);
}

/* --- 月間スケジュール(2026-08-19、利用者要望) ---
   最初は「会場×日」の帯グラフにしたが、1日26pxの格子は小さすぎて
   「見づらい・選びにくい」と言われた。日付を選ぶのが主目的なので、
   **見慣れた月グリッド**に作り替えた。開催の一覧は下に別で置く。
   日付のプルダウン(30日ぶん)はこれで役目が終わったので廃止した。 */
/* 日付ボタンは**この画面で一番押される場所**なので大きく取る。
   最初は小さなチップにしていたが「小さくて見づらい」と言われた(2026-08-19)。
   プルダウンを廃止した以上、ここが唯一の日付の入口なので幅いっぱいの帯にする。 */
.date-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 13px 14px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--edge);
  color: var(--fg); font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-1); transition: var(--t);
}
.date-btn:active { transform: scale(.99); }
.date-btn svg { color: var(--fg-dim); flex: 0 0 auto; }
.date-btn b {
  font-family: var(--font-num); font-weight: 700;
  font-size: var(--fs-2xl); letter-spacing: .01em;
}
/* 「今日」の札は今日を見ているときだけ出す。別の日にいることに気づける */
.date-btn-today {
  display: none; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-2xs); font-weight: 800;
}
.date-btn.is-today .date-btn-today { display: inline-block; }
.date-btn-chev {
  margin-left: auto; color: var(--fg-dim); font-size: var(--fs-s); white-space: nowrap;
}

.cal-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.cal-head b { flex: 1; text-align: center; font-size: var(--fs-l); }
.cal-prev, .cal-next {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--fg-dim); font-size: var(--fs-l); cursor: pointer;
}
.cal-note { font-size: var(--fs-xs); margin: 8px 0 0; line-height: 1.6; }

.cal-grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cd-w { text-align: center; font-size: var(--fs-2xs); color: var(--fg-faint); padding: 2px 0; }
.cd-w.sat { color: #7fb6ff; }
.cd-w.sun { color: var(--bad-tint); }
/* 1マスは指で押せる大きさを確保する。ここを詰めると前の版と同じ失敗になる */
.cd {
  min-height: 46px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 4px 2px;
  border-radius: var(--r-m); border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--fg); font-family: inherit; cursor: pointer;
}
.cd.empty { border: 0; background: none; min-height: 0; }
.cd b { font-family: var(--font-num); font-size: var(--fs-m); font-weight: 700; }
.cd.sat b { color: #7fb6ff; }
.cd.sun b { color: var(--bad-tint); }
/* 出走表が無い日は押せない。押せる/押せないを色で分けておく */
.cd.no { opacity: .32; cursor: default; }
.cd.today { border-color: var(--accent); }
.cd.sel { background: var(--accent); border-color: var(--accent); }
.cd.sel b, .cd.sel.sat b, .cd.sel.sun b { color: var(--accent-ink); }
.cd-n { font-size: var(--fs-3xs); color: var(--fg-faint); font-style: normal; }
.cd.sel .cd-n { color: var(--accent-ink); }
.cd-g {
  font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .02em;
  padding: 0 3px; border-radius: 2px; border: 1px solid var(--line); color: var(--fg-dim);
}
.cd-g.grade-SG, .cd-g.grade-PG1 { background: var(--gold); border-color: var(--gold); color: #1b1200; }
.cd-g.grade-G1 { border-color: var(--gold-border); color: var(--gold); }
.cd-g.grade-G2, .cd-g.grade-G3 { border-color: var(--accent-border); color: var(--accent-tint); }

/* 今月の開催一覧。カレンダーだけだと「何をやっているか」が分からない */
.cal-h3 { font-size: var(--fs-base); margin: 18px 0 8px; color: var(--accent); }
.cal-items { display: grid; gap: 6px; }
/* 1行に詰めると開催名で横に溢れる(375pxで446pxになった)。
   上段=会場+グレード+期間、下段=開催名 の2行にして幅を固定する */
.cal-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0;
  padding: 9px 11px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--edge);
  color: var(--fg-dim); font-family: inherit; font-size: var(--fs-xs);
  text-align: left; cursor: pointer;
}
.cal-item:active { transform: scale(.99); }
.cal-item-top { display: flex; align-items: center; gap: 6px; width: 100%; }
.cal-item-v { color: var(--fg); font-weight: 700; flex: 0 0 auto; }
.cal-item-d { margin-left: auto; font-family: var(--font-num); color: var(--fg-faint); }
.cal-item-t {
  display: block; width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item .grade-tag { margin-left: 0; }

/* --- 時間順タブ(全会場を締切順に並べる) --- */
/* 会場チップと同じ形だが、区切りとして少し離し、選択時は色を変えて
   「会場ではない別の見方」だと分かるようにする。 */
.chip-time { margin-right: 6px; }
.chip-time.on { background: var(--warn); border-color: var(--warn); color: var(--warn-ink); }
/* 時刻は "08:32" と5文字あり、"1R" 用の幅だと窮屈なので少し広げて字を詰める */
.rno-time { font-family: var(--font-num); font-size: 1.25rem; font-weight: 600; min-width: 3.4em; font-variant-numeric: tabular-nums; }
/* 時間順のときは会場名の横にR番号を小さく添える(枠を増やさずに情報だけ足す) */
.rno-inline { font-size: var(--fs-s); color: var(--fg-dim); font-weight: 700; margin-left: 2px; }
/* 次に締切が来る1レースだけ枠を目立たせる。144件の中の現在地になる */
.race-card.is-next { border-color: var(--warn); background: var(--warn-soft); }
.badge.next-tag { background: var(--warn); color: var(--warn-ink); border-color: var(--warn); font-weight: 700; }
/* 終わったレースは下にまとめる。見えなくはせず、色だけ落として主役から外す */
.race-card.is-done { opacity: .62; }
.race-card.is-done:hover, .race-card.is-done:active { opacity: 1; }
.list-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 2px 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--fg-faint);
}
.list-divider span {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 1px 8px; font-size: var(--fs-2xs);
}

/* --- 選手図鑑 --- */
.field-wide { flex: 1 1 100%; }
.racer-search {
  width: 100%; background: var(--surface); border: 1px solid var(--edge);
  color: var(--fg); border-radius: var(--r-m); padding: 9px 12px;
  font-size: var(--fs-base); font-family: inherit;
}
.racer-search:focus { outline: none; border-color: var(--accent); }
.racer-count { font-size: var(--fs-xs); color: var(--fg-faint); margin: 2px 2px 8px; }
.racer-count .muted { margin-left: 6px; }
.racer-list { display: grid; gap: 8px; }
.racer-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 10px var(--pad);
}
/* 星は行を開くボタンとは別に押せる必要がある(押し間違えると毎回詳細が開く) */
.fav-btn {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--fg-faint); font-size: var(--fs-xl); line-height: 1;
  padding: 4px; border-radius: var(--r-s); font-family: inherit;
}
.fav-btn.on { color: var(--warn); }
.fav-btn:active { transform: scale(.9); }
.fav-big { font-size: var(--fs-3xl); }
.racer-open {
  flex: 1; min-width: 0; text-align: left; background: none; border: none;
  color: inherit; font-family: inherit; cursor: pointer; padding: 0;
}
.racer-name { display: block; font-weight: 700; font-size: var(--fs-base); }
.racer-cls {
  font-size: var(--fs-3xs); font-weight: 700; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--r-full); background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--fg-dim); vertical-align: 1px;
}
.racer-cls.cls-A1 { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.racer-cls.cls-A2 { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.racer-line2 { display: block; font-size: var(--fs-xs); color: var(--fg-dim); margin-top: 2px; }
.racer-nums { text-align: right; white-space: nowrap; font-size: var(--fs-base); }
.racer-nums .muted { display: block; font-size: var(--fs-2xs); }
/* --- 同じ会場のR番号レール(2026-08-13) ---
   隣のレースへ行くのに一覧まで戻らせない。チップは締切状態を持ち、
   終わったレースは沈め、締切間近だけ赤にする(一覧の色文法と同じ意味)。
   スクロールバーは消す。12個並ぶだけなので、指で流せれば足りる。 */
.rail {
  display: flex; gap: 6px; overflow-x: auto; margin: 8px 0 2px;
  padding-bottom: 2px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-chip {
  flex: 0 0 auto; padding: 5px 11px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--fg-dim); font-family: var(--font-num); font-size: var(--fs-s);
  font-weight: 600; cursor: pointer; transition: var(--t);
}
.rail-chip.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 800; cursor: default;
}
.rail-chip.past { opacity: .45; }
.rail-chip.urgent { border-color: var(--bad); color: var(--bad-tint); }
.rail-chip:active { transform: scale(.94); }

/* --- 買い目タブ(結局どれを買えばいいか) --- */
/* 券種名ではなく「どうなれば当たるか」で説明する枠 */
.pick-howto {
  font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.6;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 9px 11px; margin-bottom: 8px;
}
.pick-howto b { color: var(--fg); }
/* 「当たればいくら戻るか」の帯。各行の小さい字を見比べずに済ませる */
.payout-band {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  background: var(--good-soft); border: 1px solid var(--good-border);
  border-radius: var(--r-m); padding: 8px 11px; margin-bottom: 10px;
}
.payout-band b {
  font-family: var(--font-num); font-size: var(--fs-l);
  font-weight: 700; color: var(--good-tint); font-variant-numeric: tabular-nums;
}
.payout-band-l { font-size: var(--fs-xs); color: var(--fg-dim); }
.payout-band-r { font-size: var(--fs-2xs); color: var(--fg-faint); }
.payout-band-r b { font-size: var(--fs-2xs); color: var(--warn-tint); }
/* 当たっても元が取れない点が混ざる並びは、緑で祝わない */
.payout-band.thin { background: var(--warn-soft); border-color: var(--warn-border); }
.payout-band.thin b { color: var(--warn-tint); }
.pick-head {
  border-radius: var(--r); padding: 12px var(--pad); margin-bottom: 12px;
  border: 1px solid var(--line); background: var(--card);
}
/* 「買っていい」と「見送り」を色で即断できるようにする。
   同じ形のまま文字だけ変えると、急いでいるとき読み違える */
.pick-head.go { border-color: var(--accent); background: var(--accent-soft); }
.pick-head.hold { border-color: var(--warn); background: var(--warn-soft); }
.pick-verdict { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 4px; }
.pick-conf { font-size: var(--fs-s); color: var(--fg-dim);
  display: flex; align-items: baseline; gap: 8px; }
.pick-conf .muted { font-size: var(--fs-xs); }
.pick-conf-v { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; }
.pick-head.go .pick-conf-v { color: var(--accent); }
.pick-head.hold .pick-conf-v { color: var(--warn); }
.pick-ask { margin-top: 12px; }
/* 読みやすさのゲージ。目盛りが「見送りの境目」 */
.pick-gauge {
  position: relative; height: 6px; border-radius: var(--r-full);
  background: var(--bg-soft); margin-top: 8px; overflow: visible;
}
.pick-gauge i {
  display: block; height: 100%; border-radius: var(--r-full); background: var(--accent);
}
.pick-head.hold .pick-gauge i { background: var(--warn); }
.pick-mark {
  position: absolute; top: -3px; width: 2px; height: 12px;
  background: var(--fg-faint); border-radius: 1px;
}
.pick-stage { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 6px; }
.pick-list { display: grid; gap: 8px; }
.pick-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 12px var(--pad);
}
.pick-rank {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800;
}
.pick-row:first-child .pick-rank {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.pick-combo { flex: 1; display: flex; align-items: center; gap: 2px; }
.pick-arrow { color: var(--fg-faint); font-size: var(--fs-2xs); margin: 0 1px; }
.pick-nums { text-align: right; white-space: nowrap; margin-left: auto; }
.pick-nums b { font-size: 1.45rem; color: var(--accent); font-weight: 800; }
.pick-nums .muted { display: block; font-size: var(--fs-2xs); }
.pick-why { margin-top: 12px; }
.pick-why summary {
  cursor: pointer; font-size: var(--fs-s); color: var(--fg-dim);
  padding: 8px 0;
}
.pick-why p { font-size: var(--fs-s); margin: 6px 0; }

/* 選手ページの見出しは星を左に置くので横並びにする */
.racer-head { display: flex; align-items: flex-start; gap: 8px; }
/* いまの調子(直近90日 / 今期 / 今節)を3枠で並べる */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form-cell {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 8px 6px; text-align: center;
}
.form-cell b { display: block; font-size: var(--fs-xl); margin: 2px 0 1px; }
.form-label { font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--fg-faint); font-weight: 600; }
.form-sub { display: block; font-size: var(--fs-3xs); color: var(--fg-faint); }

/* --- レース詳細 --- */
.back {
  background: none; border: none; color: var(--accent);
  font-size: var(--fs-m); padding: 4px 0 12px; cursor: pointer; font-family: inherit;
}
.race-title { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 2px; }
.race-facts { color: var(--fg-dim); font-size: var(--fs-s); margin-bottom: 14px; }

.tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--bg-soft); border: 1px solid var(--edge);
  border-radius: var(--r-m); padding: 4px;
}
.tab {
  flex: 1; background: none; border: none; color: var(--fg-dim);
  border-radius: var(--r-s); padding: 9px 6px; font-size: var(--fs-m);
  font-family: inherit; cursor: pointer; transition: var(--t);
}
.tab.active {
  background: var(--accent-soft); color: var(--accent-tint); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);   /* アクアの下線 = 現在地 */
}
.tabpanel { display: none; }
.tabpanel.active { display: block; }

/* --- 艇カード --- */
.boat {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--shadow-1);
}
.boat-head { display: flex; align-items: center; gap: 12px; padding: 12px var(--pad); }
.lane {
  width: 34px; height: 34px; border-radius: var(--r-s); flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-l);
  border: 1px solid rgba(255,255,255,.15);
}
.lane-1 { background: var(--lane1); color: var(--lane1-fg); }
.lane-2 { background: var(--lane2); color: var(--lane2-fg); }
.lane-3 { background: var(--lane3); color: var(--lane3-fg); }
.lane-4 { background: var(--lane4); color: var(--lane4-fg); }
.lane-5 { background: var(--lane5); color: var(--lane5-fg); }
.lane-6 { background: var(--lane6); color: var(--lane6-fg); }

/* 艇カードの左端に枠色の背骨。艇のカウリングの色がそのまま構造になる。
   :has() でHTMLを触らずに実現(JSの変更なし) */
.boat:has(.lane-1) { border-left: 3px solid var(--lane1); }
.boat:has(.lane-2) { border-left: 3px solid #555; }   /* 黒は背景に沈むので少し持ち上げる */
.boat:has(.lane-3) { border-left: 3px solid var(--lane3); }
.boat:has(.lane-4) { border-left: 3px solid var(--lane4); }
.boat:has(.lane-5) { border-left: 3px solid var(--lane5); }
.boat:has(.lane-6) { border-left: 3px solid var(--lane6); }
.boat-name { flex: 1; min-width: 0; }
.boat-name b { font-size: var(--fs-l); }
.boat-name .sub { display: block; font-size: var(--fs-xs); color: var(--fg-dim); }
.boat-rank { font-size: var(--fs-s); color: var(--fg-dim); text-align: right; }
.boat-rank .r1 { color: var(--good); font-weight: 800; font-size: var(--fs-xl); }

.why { padding: 0 var(--pad) 14px; }
.why-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.why-label { font-size: var(--fs-xs); color: var(--fg-dim); width: 6.6em; flex: 0 0 auto; }
.bar { flex: 1; height: 7px; background: var(--bg-soft); border-radius: var(--r-full); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--good)); }
.why-val { font-size: var(--fs-s); font-variant-numeric: tabular-nums; width: 5.4em; text-align: right; flex: 0 0 auto; }
.why-note { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill {
  font-size: var(--fs-xs); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 4px 9px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.pill b { color: var(--fg); }
.recent { letter-spacing: .18em; font-variant-numeric: tabular-nums; }

/* --- 期待値 --- */
.notice {
  border-radius: var(--r-m); padding: 12px 14px; font-size: var(--fs-s); line-height: 1.65;
  margin-bottom: 12px; border: 1px solid;
}
.notice.warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-tint); }
.notice.info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-tint); }

/* 期待値の行(2026-09-05に2段グリッドへ)。
   上段: 買い目 | 期待値 | ＋   下段: 内訳(ラベル付きの数字、折り返し可)
   1行に全部詰めると375px幅でラベル同士が重なった。 */
.ev-row {
  display: grid; grid-template-columns: 1fr auto auto;
  column-gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-m); padding: 10px 12px; margin-bottom: 8px;
}
.combo {
  grid-column: 1; grid-row: 1;
  font-weight: 800; font-size: var(--fs-l); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ev-val {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ev-val b { font-size: var(--fs-xl); line-height: 1.2; }
.ev-k { font-style: normal; font-size: var(--fs-3xs); color: var(--fg-faint); letter-spacing: .05em; }
.ev-net { font-size: var(--fs-3xs); color: var(--fg-faint); }
.slip-add { grid-column: 3; grid-row: 1 / span 2; }
.ev-mid {
  grid-column: 1 / span 2; grid-row: 2; margin-top: 4px;
  font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.7;
}
/* 数字は必ずラベル付きで。<i>がラベル、<b>が値 */
.ev-stat { white-space: nowrap; margin-right: 8px; }
.ev-stat i {
  font-style: normal; font-size: var(--fs-3xs); color: var(--fg-faint);
  margin-right: 3px; letter-spacing: .04em;
}
.ev-stat b { color: var(--fg); font-weight: 700; }
.ev-stat.sub { font-size: var(--fs-2xs); }
.ev-hi b { color: var(--good); }
.ev-mid2 b { color: var(--fg); }
.ev-lo b { color: var(--fg-dim); }
.flag { font-size: var(--fs-2xs); color: var(--warn); }

.metric-row { display: flex; gap: 10px; margin-bottom: 12px; }
.metric {
  flex: 1; background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-m); padding: 12px; text-align: center;
}
.metric .k { font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--fg-faint); font-weight: 600; }
.metric .v { font-family: var(--font-num); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* パーセントのすぐ下に円換算を添える。%だけだと「で、いくら?」が残る */
.metric .s { font-size: var(--fs-2xs); color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* 期待値タブの言い換え。「期待値」と「回収率」が同じものだと伝わっていなかった */
.ev-howto {
  font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.65;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 10px 11px; margin-bottom: 10px;
}
.ev-howto b { color: var(--fg); }
.ev-howto .muted { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--fg-faint); }

/* 「舟読みAIに聞く」。説明が難しい場所そのものに置く。
   AIは「しくみ」の最上部にあったのに6日間まったく使われなかった。
   奥にあったのではなく、詰まった瞬間に入口が無かったのが理由だと見ている。 */
.ask-jump {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  width: 100%; margin-top: 9px; padding: 8px 11px;
  background: var(--accent-soft); border: 1px dashed var(--accent-border);
  border-radius: var(--r-m); cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  color: var(--accent-tint); text-align: left;
}
.ask-jump:active { transform: scale(.99); }
.ask-jump-q { font-weight: 400; font-size: var(--fs-2xs); color: var(--fg-dim); }
/* ヒーローの中では字が小さいので、枠だけ控えめにする */
.hero-note .ask-jump { margin-top: 8px; }
/* 「検討したけれど入れなかったもの」。効かなかった記録も成果物として並べる。
   小さな注記に埋めていた頃は、検討した事実そのものが見えなかった */
.rejected-card { margin-bottom: 12px; }
.rejected-card h3 { font-size: var(--fs-l); }
.rejected-card > p { font-size: var(--fs-s); color: var(--fg-dim); line-height: 1.6; }
.rejected-card > p b { color: var(--fg); }
.rejected { display: grid; gap: 8px; margin: 10px 0 4px; }
.rej {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--fg-faint);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: 9px 11px;
}
/* 利用者の提案から検証したものは色で立てる。ここが一番読んでほしい */
.rej:first-child { border-left-color: var(--accent); background: var(--accent-soft); }
.rej b { display: block; font-size: var(--fs-s); margin-bottom: 3px; }
.rej span { display: block; font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.65; }
.rej span b { display: inline; font-size: inherit; margin: 0; color: var(--fg); }

.ask-code-hint {
  display: block; margin-top: 4px; font-size: var(--fs-2xs);
  color: var(--fg-faint); line-height: 1.5;
}

/* --- 汎用 --- */
.card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); padding: var(--pad); margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
/* --- 初回のオンボーディング(2026-08-17) ---
   全面に出す。波アートは暗幕を重ねてから文字を載せる。写真の上に直接置くと
   どの端末でも読める保証が無く、情報密度の高い画面では可読性が崩れる
   (だから常用はせず、ここと一覧のヒーローだけに限る)。 */
.onboard {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(11,20,31,.72) 0%, rgba(11,20,31,.93) 46%, #0b141f 100%),
    url("splash_art.jpg") center/cover no-repeat, #0b141f;
  overscroll-behavior: contain;
  /* 背景は常に濃色でハードコード。だから文字色もテーマトークン(ライトで濃色に反転)
     ではなく固定の明色にする。でないとライトテーマで濃色背景に濃色文字=見えない
     (2026-08-30、スマホ・ライトで文字が読めない不具合の修正)。 */
  color: #eaf1f8;
}
body.onboarding { overflow: hidden; }
/* 登録ウォール(2026-09-05): 中身が背の低い画面からはみ出しても
   「あとで」に必ず届くようにスクロール可能にする(逃げ道が見えない事故の防止) */
#regwall .onboard-inner { overflow-y: auto; max-height: 100dvh; padding-bottom: 24px; }
#regwall .lock-perks li { border-bottom: none; padding-top: 4px; padding-bottom: 4px; }
.onboard-inner {
  padding: 0 var(--pad) calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.onboard-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.onboard-head img { border-radius: var(--r-full); align-self: center; }
.onboard-brand { font-family: var(--font-brand, inherit); font-size: 1.5rem; letter-spacing: .04em; color: #eaf1f8; }
.onboard-tag { font-size: var(--fs-s); color: #4fd6cd; letter-spacing: .06em; }

/* 3枚は横スワイプ。scroll-snap に任せると前へ/次へボタンが要らない */
.onboard-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin: 0 calc(-1 * var(--pad));
}
.onboard-track::-webkit-scrollbar { display: none; }

/* プロ限定のロックカード(402)。締切後無料の逃げ道を必ず添える */
/* 有料への最重要接点。主役カードの光+アクセント枠で「特別な場所」に見せる */
.lock-card {
  background: var(--surface-hi); border: 1px solid var(--accent-border-hi);
  border-radius: var(--r-l); padding: 26px 22px; text-align: center; color: var(--fg);
  box-shadow: var(--shadow-2);
}
.lock-badge {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-weight: 800; letter-spacing: .12em; font-size: var(--fs-2xs);
  padding: 3px 12px; border-radius: var(--r-full); margin-bottom: 10px;
}
.lock-title { display: block; font-size: var(--fs-2xl); margin-bottom: 4px; }
.lock-lead { color: var(--fg-dim); font-size: var(--fs-s); margin: 0 0 14px; }
.lock-perks {
  list-style: none; margin: 0 auto 14px; padding: 0; max-width: 300px; text-align: left;
}
.lock-perks li {
  padding: 7px 0 7px 26px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-m); font-weight: 700; position: relative;
}
.lock-perks li:last-child { border-bottom: none; }
.lock-perks li::before {
  content: "✓"; position: absolute; left: 4px; color: var(--accent); font-weight: 800;
}
.lock-price { font-size: var(--fs-s); color: var(--fg-dim); margin: 0 0 12px; }
.lock-price b { color: var(--fg); font-size: var(--fs-l); }
.lock-price span { color: var(--accent-tint); font-weight: 700; }
.lock-card .acc-btn { width: 100%; padding: 13px; border-radius: var(--r-full); font-weight: 800; }
.lock-note { color: var(--fg-faint); font-size: var(--fs-xs); margin: 12px 0 0; }

/* 舟読みプロ紹介ページ(有料機能の動線)。ロックから直行して、
   何が得られるか→価格→登録/課金 を1画面で見せる。 */
.pro-hero { text-align: center; padding: 8px 0 18px; }
.pro-badge-lg {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-weight: 800; letter-spacing: .12em; font-size: .8rem;
  padding: 4px 14px; border-radius: var(--r-full); margin-bottom: 12px;
}
.pro-hero h2 { font-size: 1.4rem; line-height: 1.4; margin: 0; }
.pro-benefits { list-style: none; margin: 0 0 18px; padding: 0; }
.pro-benefits li {
  position: relative; background: var(--surface); border: 1px solid var(--edge-top);
  border-radius: 14px; padding: 14px 16px 14px 46px; margin-bottom: 10px;
}
.pro-benefits li::before {
  content: "✓"; position: absolute; left: 15px; top: 14px;
  color: var(--accent-ink); background: var(--accent); font-weight: 800; font-size: .8rem;
  width: 20px; height: 20px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
}
.pro-benefits li b { display: block; margin-bottom: 2px; color: var(--fg); }
.pro-benefits li span { color: var(--fg-dim); font-size: .86rem; }
.pro-cta { display: flex; flex-direction: column; gap: 10px; }
.pro-cta .acc-btn { width: 100%; padding: 14px; border-radius: var(--r-full); font-size: var(--fs-l); }
.pro-current {
  text-align: center; color: var(--accent-tint); font-weight: 700;
  background: var(--accent-soft); border-radius: 12px; padding: 12px; margin-bottom: 4px;
}
.pro-honest {
  color: var(--fg-faint); font-size: .8rem; line-height: 1.7; text-align: center;
  margin: 16px 0 0;
}
.pro-honest b { color: var(--fg-dim); }

/* プロ加入直後のウェルカム。買った直後の不安(ちゃんと通った?)を消す */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(4, 10, 16, .72);
  backdrop-filter: blur(3px);
}
.welcome-card {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--edge-top);
  border-radius: 22px; padding: 30px 26px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.welcome-card h2 { margin: 14px 0 8px; font-size: 1.35rem; }
.welcome-card .w-lead { color: var(--fg-dim); font-size: .92rem; margin: 0 0 16px; }
.w-perks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.w-perks div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 10px; padding: 9px 14px;
}
.w-perks b { font-size: .92rem; }
.w-perks span { color: var(--fg-dim); font-size: .78rem; }
.w-note { color: var(--fg-faint); font-size: .78rem; margin: 0 0 16px; }
.w-confetti {
  position: absolute; top: -20px; border-radius: 2px; pointer-events: none;
  animation: w-fall linear forwards; opacity: .95;
}
@keyframes w-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .7; }
}

.w-cta {
  width: 100%; padding: 13px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1rem;
}

/* アカウント(設定内)。入力+ボタンの1行構成 */
.acc-row { display: flex; gap: 8px; }
.acc-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg);
  font-size: 16px;   /* 16px未満だとiOSが入力時に画面を拡大してしまう */
}
.acc-btn {
  padding: 10px 16px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; white-space: nowrap;
}
.acc-btn.sub { background: transparent; color: var(--fg-dim); border: 1px solid var(--line); }

/* しくみ→会場一覧への入口ボタン */
.go-venues {
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  color: var(--accent-tint); border-radius: 10px; padding: 9px 14px;
  font-family: inherit; font-size: .9rem; cursor: pointer;
}

/* マイ収支 */
.mybet-add {
  width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  font-family: inherit; font-size: .95rem; cursor: pointer;
}
.mybet-add:disabled { background: var(--bg-soft); color: var(--fg-faint); cursor: default; }
.mybet-nums { margin-bottom: 14px; }
.mybet-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.mybet-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.mybet-main .muted { font-size: .74rem; }
.mybet-combos { font-size: .8rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.mybet-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: .9rem; }
.mybet-right .good { color: var(--good); }
.mybet-right .bad { color: var(--fg-faint); }
.mybet-del {
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg-faint); padding: 4px 9px; font-size: .74rem; cursor: pointer;
}
.num .good { color: var(--good); }
.num .bad { color: var(--bad); }

/* ランキングの強調: 舟読みAI(アクセント)と自分(枠+バッジ)が主役 */
.rank-table .rank-row { cursor: pointer; }
.rank-table .rank-ai td {
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-border); border-bottom: 1px solid var(--accent-border);
}
.rank-name-ai { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-tint); }
.rank-name-ai img { border-radius: 5px; }
.rank-table .rank-me td {
  background: var(--good-soft);
  border-top: 1px solid var(--good-border); border-bottom: 1px solid var(--good-border);
}
.rank-name-me { display: inline-flex; align-items: center; gap: 7px; }
.rank-name-me i {
  font-style: normal; font-size: .68rem; font-weight: 700; color: var(--good);
  border: 1px solid var(--good-border); border-radius: 999px; padding: 1px 7px;
}

/* パスキー一覧(設定内) */
.pk-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.pk-row i { font-style: normal; color: var(--fg-faint); font-size: .75rem; margin-left: 8px; }
.pk-del {
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg-dim); padding: 4px 10px; font-size: .78rem; cursor: pointer;
}

/* 空状態の挿絵(夜の休み舟)。文字だけの空白より「今日は休み」が伝わる */
.empty-art { display: block; width: min(220px, 62%); margin: 14px auto 16px;
  border-radius: 16px; opacity: .92; }
.onboard-slide {
  flex: 0 0 100%; scroll-snap-align: start; padding: 0 var(--pad);
}
.onboard-slide h2 {
  font-size: 1.35rem; line-height: 1.4; margin: 0 0 10px; letter-spacing: .01em;
  color: #ffffff;                       /* 濃色オーバーレイ上=固定の明色 */
}
.onboard-slide p { margin: 0; font-size: var(--fs-m); line-height: 1.75; color: #c7d2de; }
.onboard-slide b { color: #4fd6cd; }
/* 使い方カードの小見出しと、本文に埋め込む判定バッジの見本 */
.onboard-kicker {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em;
  color: #4fd6cd; margin: 0 0 6px !important;
}
.onboard-badge {
  display: inline-block; border-radius: 6px; padding: 1px 8px; font-size: .82em;
  font-weight: 700; background: rgba(255,255,255,.12); color: #c7d2de;
  border: 1px solid rgba(255,255,255,.24);
}
.onboard-badge.on { background: #3cc8c0; color: #06231f; border-color: transparent; }
/* 前へ/次へ(PCはスワイプできないので必須)。ドットの両脇に置く */
.onboard-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.onboard-arrow {
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  color: #eaf1f8; font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.onboard-arrow:disabled { opacity: .3; cursor: default; }
.onboard-arrow:active { transform: scale(.94); }
.onboard-dots { display: flex; gap: 6px; justify-content: center; }
.onboard-dots i {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: #ffffff; opacity: .35; transition: var(--t); cursor: pointer;
}
.onboard-dots i.on { opacity: 1; background: #3cc8c0; width: 18px; }
/* 主役は1つだけ。読み飛ばしたい人がいつでも押せるよう、常に同じ場所に置く */
.onboard-go {
  padding: 14px; border-radius: var(--r-full); border: 0;
  background: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-size: var(--fs-l); font-weight: 800; cursor: pointer;
  box-shadow: var(--shadow-2);
}
.onboard-go:active { transform: scale(.985); }
.onboard-guide {
  padding: 4px; background: none; border: 0; font-family: inherit;
  color: var(--fg-dim); font-size: var(--fs-s); cursor: pointer; text-decoration: underline;
}
.onboard-note {
  margin: 0; font-size: var(--fs-2xs); color: #9fb0bf; line-height: 1.5; text-align: center;
}
.onboard-guide { color: #c7d2de; }
@media (min-height: 720px) {
  .onboard { justify-content: center; }
  .onboard-inner { gap: 18px; }
}
/* AI質問の履歴バー(残数+履歴を消す) */
.ask-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.ask-clear {
  background: none; border: 0; color: var(--fg-faint); font-size: 12px;
  text-decoration: underline; cursor: pointer; font-family: inherit; padding: 2px;
}

/* しくみページの章立て(2026-09-02)。目次 → 第1章(読み物) → 各章(リード+折りたたみ) */
.guide-toc {
  background: var(--surface); border: 1px solid var(--edge-top); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 4px;
}
.guide-toc-title {
  margin: 0 0 4px; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; color: var(--fg-faint);
}
.guide-toc button {
  text-align: left; background: none; border: 0; padding: 5px 2px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-s); color: var(--accent-tint);
}
/* 章見出しはアクセントの縦棒で「章が変わった」を一目で(2026-09-05、メリハリ強化) */
.guide-group {
  font-size: var(--fs-xl); font-weight: 800; color: var(--fg);
  margin: 30px 0 10px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--accent); border-bottom: none;
}
.guide-group:first-of-type { margin-top: 6px; }
.guide-ch-no {
  display: block; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .12em; color: var(--accent); margin-bottom: 2px;
}
.guide-lead {
  color: var(--fg-dim); font-size: var(--fs-m); line-height: 1.8; margin: 0 2px 12px;
}
.guide-ch1 { margin-bottom: 12px; background: var(--surface-hi); border-color: var(--accent-border-hi); }
/* 主役カード(遊び方・AI質問)もアクセントの光と枠で立たせる */
.rank-intro, .ask-card { background: var(--surface-hi); border-color: var(--accent-border-hi); }
.prose h2 { font-size: var(--fs-xl); margin: 0 0 8px; }
.prose h3 { font-size: var(--fs-base); margin: 18px 0 6px; color: var(--accent); }
.prose p, .prose li { font-size: var(--fs-m); color: var(--fg-dim); }
.prose b, .prose strong { color: var(--fg); }
.prose .lead { font-size: 1rem; color: var(--fg); }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--accent); }
.muted { color: var(--fg-faint); font-size: var(--fs-xs); }

.btn {
  width: 100%; background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: var(--r-m); padding: 14px; font-size: var(--fs-base); font-weight: 700;
  font-family: inherit; cursor: pointer; transition: var(--t);
  box-shadow: var(--shadow-1);
}
.btn:active:not(:disabled) { transform: scale(.98); filter: brightness(1.08); }
.btn:disabled { background: var(--card-2); color: var(--fg-faint); box-shadow: none; }
.btn.ghost { background: var(--card); color: var(--fg); border: 1px solid var(--line); }

.loading { text-align: center; color: var(--fg-dim); font-size: var(--fs-m); padding: 26px 0; }
.spinner {
  width: 22px; height: 22px; margin: 0 auto 10px;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--fg-faint); padding: 34px 0; font-size: var(--fs-m); }

table.mini { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
table.mini th, table.mini td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); }
table.mini th { color: var(--fg-dim); font-weight: 500; font-size: var(--fs-xs); }
table.mini td:first-child, table.mini th:first-child { text-align: left; }
table.mini td { font-variant-numeric: tabular-nums; }

/* --- 下部ナビ --- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: var(--bar-bottom);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.navbtn {
  flex: 1; background: none; border: none; color: var(--fg-faint);
  padding: 9px 0 8px; font-size: var(--fs-2xs); font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.navbtn .ico { font-size: var(--fs-xl); line-height: 1; }
.navbtn svg {
  width: 22px; height: 22px; display: block;
  padding: 3px 14px; border-radius: var(--r-full);
  box-sizing: content-box; transition: var(--t);
}
.navbtn.active svg { background: var(--accent-soft); }
.navbtn.active { color: var(--accent); }

@media (min-width: 640px) {
  body { padding-bottom: 0; }
  .tabbar { position: sticky; bottom: 0; }
}

/* --- 予想ゲーム --- */
.pick-head { font-weight: 700; font-size: var(--fs-base); }
.pick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pickbtn {
  border: 2px solid transparent; border-radius: var(--r-m); padding: 9px 0 7px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit; cursor: pointer; transition: var(--t);
  filter: saturate(.55) brightness(.72);
}
.pickbtn.on { filter: none; border-color: var(--accent); transform: translateY(-2px); }
.pb-no { font-size: var(--fs-xl); font-weight: 800; line-height: 1; }
.pb-p { font-size: var(--fs-3xs); opacity: .82; font-variant-numeric: tabular-nums; }

.pick-result.won { border-color: var(--good-border); background: var(--good-soft); }
.pick-result.lost { border-color: var(--line); }
.pick-body { margin: 4px 0 10px; font-size: var(--fs-m); color: var(--fg-dim); }
.score-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-s); color: var(--fg-dim);
}
.score-line b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.metric .v.pos { color: var(--good); }
.metric .v.neg { color: var(--bad); }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.badge-item {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 10px 12px; opacity: .38;
}
.badge-item.got { opacity: 1; border-color: var(--accent-border); background: var(--accent-soft); }
.bi-label { font-weight: 700; font-size: var(--fs-m); }
.bi-desc { font-size: var(--fs-2xs); color: var(--fg-dim); }

/* --- 夢枠 --- */
/* 夢枠は「配当の大きさ」だけでなく「なぜその配当なのか」まで見せる。
   外枠(.dream-card)が1点ぶん、その中が見出し(.dream)と根拠(.dream-body)。 */
.dream-card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); margin-bottom: 10px; overflow: hidden;
}
.dream-card.top { border-color: var(--gold-border); background: var(--gold-soft); }
.dream {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
}
.dream-card.top .dream { border-bottom: 1px solid var(--gold-border); }
.dream-card .dream { border-bottom: 1px solid var(--line); }
.dream-body { padding: 12px 15px 14px; }
.dl-title {
  font-size: var(--fs-xs); color: var(--fg-dim); font-weight: 600;
  letter-spacing: .06em; margin: 4px 0 8px;
}
.dl-boat {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-s); margin-bottom: 5px;
  background: var(--bg-soft);
}
/* 全国平均でいちばん起きにくい着順 = 高配当の理由。ここだけ目立たせる */
.dl-boat.gate { background: var(--warn-soft); border: 1px solid var(--warn-border); }
.dl-name { flex: 1; min-width: 0; }
.dl-name b { font-size: var(--fs-base); }
.dl-sub { display: block; font-size: var(--fs-2xs); color: var(--fg-faint); }
.dl-pos { text-align: right; font-size: var(--fs-xs); color: var(--fg-dim); flex: 0 0 auto; }
.dl-pos b { color: var(--fg); font-variant-numeric: tabular-nums; }
.dl-gate-note {
  font-size: var(--fs-xs); color: var(--warn-tint); margin: 8px 0 2px; line-height: 1.6;
}
.dl-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-s); color: var(--fg-dim); margin-bottom: 4px;
}
.dl-row > span:first-child { width: 3em; flex: 0 0 auto; }
.dl-row b { color: var(--fg); font-variant-numeric: tabular-nums; }
.dl-n { margin-left: auto; font-size: var(--fs-2xs); color: var(--fg-faint); }
.dream-rank { font-size: var(--fs-l); color: var(--warn); width: 1.4em; text-align: center; }
.dream-main { flex: 1; min-width: 0; }
.dream-combo { font-family: var(--font-num); font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.dream-sub { font-size: var(--fs-xs); color: var(--fg-dim); }
.dream-pay { text-align: right; }
.dream-pay b { display: block; font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
.dream-pay span { font-size: var(--fs-2xs); color: var(--fg-dim); }

/* --- 実力と現実の2つの数字 --- */
.roi-card { border-color: var(--accent-border); }
.roi-pair { display: flex; align-items: stretch; gap: 8px; margin: 12px 0 4px; }
.roi-box {
  flex: 1; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 12px 10px; text-align: center;
}
.roi-box.pos { border-color: var(--good-border); background: var(--good-soft); }
.roi-box.pos .roi-v { color: var(--good); }
.roi-box.neg .roi-v { color: var(--fg); }
.roi-k { font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--fg-faint); font-weight: 600; }
.roi-v { font-family: var(--font-num); font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.roi-note { font-size: var(--fs-3xs); color: var(--fg-faint); }
.roi-arrow {
  align-self: center; font-size: var(--fs-2xs); color: var(--bad);
  font-weight: 700; white-space: nowrap; padding: 0 2px;
}

.warn-text { color: var(--warn); }

/* --- しくみ(折りたたみセクション) --- */
.acc {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); margin-bottom: 10px; overflow: hidden;
}
.acc > summary {
  list-style: none; cursor: pointer; padding: 14px var(--pad);
  font-weight: 700; font-size: var(--fs-base); display: flex;
  align-items: center; justify-content: space-between; gap: 10px;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid var(--fg-dim); border-bottom: 2px solid var(--fg-dim);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.acc[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc-body { padding: 12px var(--pad) var(--pad); }
.acc-body p { font-size: var(--fs-m); color: var(--fg-dim); margin: 0 0 10px; }
.acc-body p:last-child { margin-bottom: 0; }
.acc-body b { color: var(--fg); }
.acc-body ul { padding-left: 1.2em; margin: 0; }
.acc-body li { font-size: var(--fs-m); color: var(--fg-dim); margin-bottom: 6px; }
.acc-body a { color: var(--accent); }

/* --- 選手ページ(下から出るシート) --- */
.racer-link { cursor: pointer; }
.racer-chev { color: var(--fg-faint); font-weight: 400; margin-left: 3px; }
.racer-link:active { opacity: .6; }

.sheet {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(0, 0, 0, .55);
}
.sheet.open { display: block; }
.sheet-inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86vh; overflow-y: auto;
  background: var(--bg-soft); border-top: 1px solid var(--line);
  border-radius: var(--r-l) var(--r-l) 0 0;
  /* 下端はタブバーに隠れるので、その高さぶん余白を足す */
  padding: 14px var(--pad) calc(var(--pad) + 72px);
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(18px); opacity: .4 } to { transform: none; opacity: 1 } }

/* メモの掴みバー。スマホでは見出し、PCではドラッグの取っ手 */
.sheet-grip {
  display: flex; align-items: center; gap: 9px;
  /* パネルの縁まで届く「バー」にする(paddingぶん外へ広げる) */
  margin: -14px calc(-1 * var(--pad)) 12px;
  padding: 11px var(--pad);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-l) var(--r-l) 0 0;
  font-size: var(--fs-m); color: var(--fg);
}
.sheet-grip .grip-dots { color: var(--accent); font-size: 1.15rem; line-height: 1; }
.sheet-grip .grip-n { color: var(--fg-faint); font-size: var(--fs-s); }
.sheet-grip .sheet-close { margin-left: auto; float: none; padding: 5px 12px; }
@media (min-width: 1020px) {
  .sheet-grip { cursor: grab; user-select: none; touch-action: none; }
  .sheet-grip:active { cursor: grabbing; }
}

/* PC: メモは画面を覆わず右下の浮動パネルに。他のページを見ながら金額を調整できる */
@media (min-width: 1020px) {
  .sheet.open { background: transparent; pointer-events: none; }
  .sheet-inner {
    pointer-events: auto;
    left: auto; right: 18px; bottom: 18px;
    width: 400px; max-height: 72vh;
    border: 1px solid var(--edge-top); border-radius: var(--r-l);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
    padding-bottom: var(--pad);
  }
}
.sheet-close {
  float: right; background: var(--card); color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 6px 14px; font-size: var(--fs-s);
}
.racer-head { margin-bottom: 12px; }
.racer-head b { font-size: var(--fs-xl); display: block; }
.racer-head .sub { font-size: var(--fs-s); color: var(--fg-dim); }
#racer-body h4 {
  font-size: var(--fs-s); color: var(--fg-dim); font-weight: 600;
  margin: 16px 0 8px; letter-spacing: .04em;
}
.racer-bars .why-row { margin-bottom: 6px; }
.racer-n { font-size: var(--fs-xs); color: var(--fg-faint); width: 44px; text-align: right; }

/* --- オッズの鮮度と更新 ---
   バグの記録(2026-08-07): 中身を2行構造(状態行+説明文)にしたとき、親を
   display:flex のまま放置したため、行と説明文が「横に」並び、
   「オッズ 19秒前」が縦書きに潰れて更新ボタンと文字が重なっていた。
   親はblock、横並びは .odds-bar-row の仕事。

   さらに**画面上部に貼り付く**(sticky)。スクロールしても「何秒前のオッズか」と
   更新ボタンが常に見える・押せる(更新はこの画面で一番大事な操作のため)。 */
.odds-bar {
  display: block;
  position: sticky;
  top: calc(env(safe-area-inset-top) + 52px);   /* 上部バー(約49px)+6色帯の下 */
  z-index: 40;                                   /* 上部バー(50)の下に潜る */
  padding: 7px 12px; margin-bottom: 10px;
  background: var(--card-2); border: 1px solid var(--edge);
  border-radius: var(--r-m); font-size: var(--fs-s); color: var(--fg-dim);
  box-shadow: var(--shadow-1);
}
.odds-age { flex: 1 1 auto; white-space: nowrap; }
.odds-age b { color: var(--fg); font-variant-numeric: tabular-nums; }
.odds-age b.stale { color: var(--warn); }
.odds-auto { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; cursor: pointer; }
.odds-auto input { accent-color: var(--accent); width: 15px; height: 15px; }
.odds-btn {
  flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-tint);
  border: 1px solid var(--accent-border); border-radius: var(--r-full);
  padding: 5px 14px; font-size: var(--fs-s); font-weight: 600;
}
.odds-btn:disabled { opacity: .5; }
.odds-btn:active:not(:disabled) { background: var(--line); }

/* --- 見立て(舟読み vs オッズ) --- */
.outlook-label { font-weight: 700; color: var(--fg); }
.bar-model { background: linear-gradient(90deg, #f5c400, #ff8a3d) !important; }
.outlook-sep { border-bottom: 1px dashed var(--line); margin: 10px 0 2px; }
.split-note {
  font-size: var(--fs-xs); color: var(--warn-tint); margin-top: 6px;
}
.boat-split { border-color: var(--warn-border); }

/* --- 広い画面(PC): 1ペインでも幅を活かす(2026-08-30、利用者指摘) ---
   スマホ最適の720px中央寄せは、PCでは「真ん中の細い柱」に見える。
   レース一覧だけ2列に広げ、読み物系のビューは行長が伸びすぎて読みにくく
   ならない880pxまでに留める。2ペイン分割中(.split)は従来どおり。 */
@media (min-width: 1020px) {
  .topbar-inner { max-width: 1100px; }
  main.panes:not(.split) { max-width: 1100px; }
  .panes:not(.split) .view { max-width: 880px; margin: 0 auto; }
  .panes:not(.split) .view-list { max-width: none; }
  .panes:not(.split) .race-list { grid-template-columns: 1fr 1fr; gap: 12px; column-gap: 14px; }
  .panes:not(.split) .race-list > .hero,
  .panes:not(.split) .race-list > .list-divider { grid-column: 1 / -1; }
  .panes:not(.split) .hero { max-width: 880px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* --- PC: メニューをヘッダー右側へ(2026-08-30) ---
   下タブはスマホの親指のための配置。マウスでは上が定石なので、
   広い画面ではJSがタブバーをヘッダー内へ移し、body.topnav が付く。 */
body.topnav { padding-bottom: 24px; }
body.topnav .topbar-inner { align-items: center; }
body.topnav .tabbar {
  position: static; width: auto; background: none; border: none;
  backdrop-filter: none; padding: 0; margin-left: auto; gap: 2px;
}
body.topnav .navbtn {
  flex: none; flex-direction: row; gap: 7px; padding: 7px 13px;
  border-radius: 999px; font-size: .84rem;
}
body.topnav .navbtn svg { width: 18px; height: 18px; }
body.topnav .navbtn.active { background: var(--accent-soft); }
body.topnav .navbtn.active svg { background: none; }

/* --- 分割ビュー(ペイン) ---
   ＋を押すとペインが増える。1枚のときは今までどおり普通のページ、
   2枚以上のときだけグリッドに切り替えて各ペインが独立にスクロールする。
   スマホの縦画面で左右に割ると1枚187pxしかなく読めないので、
   狭いときは上下、横長のときは左右に並べる。 */
.panes { max-width: 720px; margin: 0 auto; padding: var(--pad); }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pane-bar { display: none; }
.pane-body { min-height: 0; }

.panes.split {
  max-width: 1400px; padding: 8px; gap: 8px; display: grid;
  /* 画面いっぱいに収め、はみ出しはペインの中でスクロールさせる */
  height: calc(100dvh - 46px - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.panes.split .pane {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-m); overflow: hidden;
}
.panes.split .pane.focused { border-color: var(--accent); }
.panes.split .pane-bar {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--line);
  background: var(--card);
}
.panes.split .pane.focused .pane-bar { background: var(--card-2); }
.pane-title {
  flex: 1; min-width: 0; font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane-close {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--fg-dim);
  font-size: var(--fs-m); line-height: 1; padding: 0; cursor: pointer;
}
.panes.split .pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
/* 分割中はページ全体をスクロールさせない(各ペインの中だけが動く) */
body.split-mode { overflow: hidden; }

/* 3画面は「上に1枚・下に2枚」で固定する。
   4分割はスマホだと1枚が小さすぎて実用にならなかったので上限を3にした。 */
.panes.split[data-n="3"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.panes.split[data-n="3"] .pane:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
.panes.split[data-n="3"] .pane:nth-child(2) { grid-column: 1; grid-row: 2; }
.panes.split[data-n="3"] .pane:nth-child(3) { grid-column: 2; grid-row: 2; }

@media (min-width: 720px) {
  .panes.split[data-n="2"] { grid-template-columns: 1fr 1fr; }
}

/* 並べ替え: 見出しの⠿を掴んで、入れ替えたい画面の上で離す */
.pane-grip {
  flex: 0 0 auto; color: var(--fg-faint); font-size: var(--fs-m);
  padding: 2px 4px; cursor: grab; touch-action: none; user-select: none;
}
.pane.dragging { opacity: .55; }
.pane.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

@keyframes menu-pop { from { opacity: 0; transform: translateY(6px) } to { opacity: 1 } }
.navbtn:disabled { opacity: .3; }
.navbtn-add .ico { font-weight: 700; }

/* --- 買い目メモ --- */
.slip-add {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-full);
  background: var(--accent-soft); border: 1.5px solid var(--accent-border); color: var(--accent);
  font-size: 1.25rem; font-weight: 700; line-height: 1; padding: 0; cursor: pointer;
  font-family: inherit;
}
.slip-add.added { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dream .slip-add { margin-left: 8px; }

.slip-chip {
  position: fixed; right: 14px; z-index: 55;
  bottom: calc(72px + env(safe-area-inset-bottom));
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: var(--r-full); padding: 10px 16px; font-size: var(--fs-s); font-weight: 700;
  font-family: inherit; box-shadow: var(--shadow-2); cursor: pointer;
}
.slip-group { margin-bottom: 14px; }
.slip-race { font-size: var(--fs-s); font-weight: 700; margin-bottom: 6px; }
.slip-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-s); padding: 8px 10px; margin-bottom: 5px;
}
.slip-type { font-size: var(--fs-2xs); color: var(--fg-dim); flex: 0 0 3.4em; }
.slip-combo { flex: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.slip-odds { font-size: var(--fs-xs); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.slip-del {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--fg-dim);
  font-size: var(--fs-s); line-height: 1; padding: 0; cursor: pointer;
}

/* --- ブラウザ画面 --- */
/* hidden属性より class の display が強いので、明示的に打ち消す。
   これを書き忘れて「＋メニューが常に画面に出たまま」になっていた。 */
.add-menu {
  position: fixed; right: 8px; z-index: 70;
  bottom: calc(66px + env(safe-area-inset-bottom));
  animation: menu-pop .14s ease-out;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 6px; box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 4px;
}
.add-menu button {
  background: none; border: none; color: var(--fg); font-family: inherit;
  font-size: var(--fs-m); padding: 10px 14px; border-radius: var(--r-s);
  text-align: left; white-space: nowrap; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
}
/* 絵文字をやめて線画に統一(端末ごとに絵柄が変わるのが既製品感の原因) */
.add-menu button svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--fg-dim); }
.add-menu button:active { background: var(--bg-soft); }

.pane-web { min-height: 0; }
.web-bar {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--card);
}
.web-lock { font-size: var(--fs-xs); flex: 0 0 auto; }
.web-url {
  flex: 1; min-width: 0; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 6px 9px; font-size: var(--fs-xs); font-family: inherit;
}
.web-go, .web-ext {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-s);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--fg-dim);
  font-size: var(--fs-s); line-height: 26px; text-align: center; text-decoration: none;
  padding: 0; cursor: pointer; font-family: inherit;
}
.web-body { flex: 1; min-height: 0; position: relative; background: #fff; }
/* 拡大縮小。zoom を掛けた要素の中では % が既に 1/z されて解決されるので、
   width/height は 100% のままでよい(自分で 1/z すると二重に効いて枠がはみ出す)。
   結果、見た目は画面いっぱいのまま、中のページの表示領域だけが
   広く(縮小時)または狭く(拡大時)なる = 本物のズームと同じ挙動になる。 */
.web-frame {
  width: 100%; height: 100%;
  border: 0; display: block; zoom: var(--z, 1);
}
.web-start, .web-msg {
  padding: 14px; background: var(--bg); height: 100%; overflow-y: auto;
}
.web-start .why-note, .web-msg .why-note { color: var(--fg-dim); }

/* 画面ごとの拡大縮小 */
.pane-body { zoom: var(--z, 1); }
.pane-zoom {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-s);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--fg-dim);
  font-size: var(--fs-s); line-height: 1; padding: 0; cursor: pointer; font-family: inherit;
}
.pane-zoom:active { background: var(--line); }

/* 小さいボタンの当たり判定を、見た目を変えずに広げる(2026-09-02)。
   .slip-del(22px)・.wallet-del(約24px)は破壊的操作なのに指より小さかった。
   ::beforeのinsetで透明な判定領域だけを足す。**隣接ボタンのgapを超えて広げない**
   (超えると「ズームを狙って閉じるを押す」逆効果になる。gapは5〜8px)。 */
.slip-del, .pane-close, .pane-zoom, .wallet-del, .fav-btn, .web-go, .web-ext, .stake-step {
  position: relative;
}
/* 周りに余白がある孤立ボタン: 大きく広げる(→38px級) */
.wallet-del::before, .fav-btn::before {
  content: ""; position: absolute; inset: -8px;
}
/* slip-delは左隣が+100ボタン(gap8px)。-5pxなら重ならない(22→32px) */
.slip-del::before { content: ""; position: absolute; inset: -5px; }
/* 5〜8px間隔で密集しているボタン: 触れ合わない範囲だけ広げる */
.pane-close::before, .pane-zoom::before, .web-go::before, .web-ext::before,
.stake-step::before {
  content: ""; position: absolute; inset: -2px;
}

/* 的中率のバー(成績画面の主役) */
.hit-bar {
  height: 12px; background: var(--bg-soft); border-radius: var(--r-full);
  overflow: hidden; margin: 10px 0 12px;
}
.hit-bar > i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--good));
}

/* 期待値: 大きい数字がオッズ基準、その下に舟読み基準 */
.ev-net { display: block; font-size: var(--fs-3xs); color: var(--fg-faint); font-weight: 400; }

/* 舟読みの期待値(単勝のみ) */
.ev-model { display: block; font-size: var(--fs-3xs); color: var(--warn); font-weight: 400; }
.ev-model.hot { color: var(--good); font-weight: 700; }
.ev-sort { margin-bottom: 8px; }

/* 夢枠の倍率選択 */
.dream-min { margin-bottom: 10px; }

/* 前付け(枠番より内に入ること)。起きるとレースが荒れる */
.pill.mae { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad-tint); }
.pill.mae b { color: var(--bad-tint); }
.mae-note { font-size: var(--fs-xs); color: var(--bad-tint); margin-top: 6px; line-height: 1.55; }
.boat-mae { border-color: var(--bad-border); }

/* 前付けの全パターン表。上がった枠と下がった枠を色で示す */
.mae-matrix { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mae-matrix td.up { color: var(--good); }
.mae-matrix td.dn { color: var(--bad); }

/* 検証用の長文セクション。見出しで区切って読めるようにする */
.acc-body h4 {
  font-size: var(--fs-s); color: var(--accent); margin: 16px 0 6px; font-weight: 700;
}
.acc-body h4:first-child { margin-top: 4px; }
.acc-body code {
  background: var(--bg-soft); padding: 1px 5px; border-radius: 4px;
  font-size: .78em; color: var(--fg);
}

/* 「もし前付けしてきたら」の試算 */
.sim-box {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 12px var(--pad); margin-bottom: 12px;
}
.sim-head { font-size: var(--fs-s); font-weight: 700; margin-bottom: 8px; }
.sim-chips { margin-bottom: 6px; }
.sim-label { color: #c9a6ff !important; }
.bar-sim { background: linear-gradient(90deg, #a06bff, #d9a6ff) !important; }

/* 前付けの起こりやすさを織り込んだ見立て */
.blend-label { color: var(--bad-tint) !important; }
.bar-blend { background: linear-gradient(90deg, #ff6b6b, #ffb648) !important; }
.blend-note { font-size: var(--fs-xs); }

/* レース結果の速報(正式な成績は翌朝、それまでの繋ぎ) */
.result-box {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-m);
  background: var(--good-soft); border: 1px solid var(--good-border);
}
.result-head { font-weight: 700; font-size: var(--fs-base); display: flex; align-items: center; gap: 8px; }
.result-tag {
  font-size: var(--fs-2xs); font-weight: 600; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--good-soft); color: var(--good-tint);
}
.result-order { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.result-item { display: flex; align-items: center; gap: 5px; }
.result-item .lane { width: 24px; height: 24px; font-size: var(--fs-s); }
.result-rank { font-size: var(--fs-s); color: var(--muted); }
.result-item.dq .result-rank { color: #ff9a9a; }
.result-facts { margin-top: 8px; font-size: var(--fs-s); }

/* 実績(公開台帳)。買い目の組番は等幅で桁を揃える */
/* 台帳の表。**セル内で折り返さない**(改行すると行がガタガタで読めない)。
   はみ出す分は外側の overflow-x:auto が横スクロールで受ける。
   旧クラス .track-body は成績ハブ統合で消えており、この指定が半年間
   どこにも当たっていなかった(2026-08-10 テスター指摘で発覚) */
.track-table td, .track-table th { white-space: nowrap; }
.track-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; letter-spacing: .02em;
}
.track-table .pill { white-space: nowrap; }

/* データ更新の遅延掲示(メンテナンス告知)。目立つが叫ばない琥珀色 */
.health-banner {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, #b45309 18%, var(--card));
  border-bottom: 1px solid #b45309;
  padding: 8px 14px; font-size: var(--fs-m); line-height: 1.5;
}
.health-banner b { color: #d97706; }
.health-banner .hb-detail { opacity: .85; }

/* 買い目メモの金額入力と収支記録 */
.slip-stake { width: 4.2em; padding: 8px 6px; border: 1px solid var(--line);
  border-radius: var(--r-s); background: var(--bg); color: var(--fg); text-align: right;
  font-size: 16px; }   /* 16px未満だとiOSが入力時に拡大する */
.slip-stake-wrap { font-size: var(--fs-m); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; }
.stake-step {
  width: 34px; height: 34px; border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--fg); font-size: 1.05rem; line-height: 1;
  cursor: pointer; font-family: inherit; flex: 0 0 auto;
}
.wallet-del { border: none; background: none; color: var(--muted); font-size: 1rem;
  cursor: pointer; padding: 2px 6px; }

/* 成績ハブの切り替え(あなた / 舟読みAI) */
.seg { display: flex; gap: 6px; margin-bottom: 6px; }
.seg-btn { flex: 1; padding: 9px 0; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--card); color: var(--muted); font-size: var(--fs-base); cursor: pointer; }
.seg-btn.active { background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 700; }
.seg-note { margin: 0 0 12px; font-size: var(--fs-s); }

/* オッズバー: 状態と「なぜその間隔か」を2行で出す */
.odds-bar-row { display: flex; align-items: center; gap: 10px; }
.odds-note {
  font-size: var(--fs-2xs); color: var(--fg-faint); line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.odds-note:empty { display: none; }


/* --- トースト(2026-08-13) ---
   押した手応えを返す場所を1つに決める。以前は「＋」の字が一瞬変わる、
   オッズバーの注記が差し替わる、と場所も形もバラバラで、
   気づかれない知らせがあった。下部ナビの少し上、買い目メモのチップと同じ高さ帯。
   z-index は下部ナビ(60)より上、ペイン追加メニュー(70)より下。 */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(8px);
  bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 65;
  display: flex; align-items: center; gap: 8px;
  max-width: min(92vw, 420px);
  background: rgba(10, 14, 20, .95); color: #eaf1f8;
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 10px 16px; font-size: var(--fs-s); line-height: 1.4;
  box-shadow: var(--shadow-2); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;                       /* 下の操作を邪魔しない */
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-icon {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: 800;
}
.toast.warn .toast-icon { background: var(--warn); color: var(--warn-ink); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .01s; } }

/* デスクトップのスクロールバー。既定の白い太バーは夜の画面で悪目立ちする */
@media (min-width: 640px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--card-2); border-radius: 999px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ---- 会場の傾向(会場×コースの着順率。2026-08-19の要望) ----
   率を棒で見せる。24会場×6コースの数字だけを並べても差が読み取れないため。 */
.filter-ven {
  padding: 11px 16px; font-size: var(--fs-base); font-weight: 700;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); cursor: pointer;
}
.filter-ven:hover { border-color: var(--accent); }
.ven-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 8px; padding: 0 12px;
}
.ven-item > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0; cursor: pointer; list-style: none;
}
.ven-item > summary::-webkit-details-marker { display: none; }
.ven-item > summary::after { content: "›"; margin-left: auto; color: var(--muted); }
.ven-item[open] > summary::after { content: "⌄"; }
.ven-in { font-size: var(--fs-sm); color: var(--muted); }
.ven-in b { color: var(--fg); font-family: var(--font-num); }
.vbar {
  display: inline-block; width: 64px; height: 7px; border-radius: 4px;
  background: var(--line); overflow: hidden; vertical-align: middle; margin-left: 6px;
}
.vbar i { display: block; height: 100%; background: var(--accent); }
.ven-table { width: 100%; margin: 4px 0 10px; }
.ven-table .num { text-align: right; font-family: var(--font-num); white-space: nowrap; }
.ven-table b { font-size: var(--fs-base); }

/* ---- 設定(2026-08-24) ---- */
.set-label { margin: 12px 0 6px; font-size: var(--fs-s); color: var(--fg-dim); }
.set-label:first-of-type { margin-top: 0; }

/* ---- 文字サイズ「大きめ」。トークンが全部remなので、根っこを1割広げるだけで全体が揃って拡大する ---- */
html.font-large { font-size: 110%; }

/* ---- ライトテーマ(2026-08-24) ----
   ダークの各トークンを昼の紙面へ写像する。生の色をコンポーネント側に書かない
   規律(このファイル冒頭)を守ってきたおかげで、ここの上書きだけで全画面が切り替わる。
   アクセント等は暗い背景用より濃い版にする(白地でのコントラスト確保)。 */
html[data-theme="light"] {
  --bg: #eef2f7;
  --bg-glow: #ffffff;
  --bg-soft: #e4eaf1;
  --card: #ffffff;
  --card-2: #f3f6fa;
  --line: rgba(16, 38, 64, .13);
  --edge: rgba(16, 38, 64, .10);
  --edge-top: rgba(255, 255, 255, .95);
  --surface: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  /* 主役カード用(2026-09-05)。ダーク側で新設したトークンはここにも必ず対で足すこと——
     忘れるとライトだけ紺カードが出る事故になる(実際に起きた) */
  --surface-hi: linear-gradient(180deg, rgba(15, 159, 150, .14) 0%, rgba(15, 159, 150, .03) 45%, rgba(15, 159, 150, 0) 100%),
                linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  --accent-border-hi: rgba(15, 159, 150, .5);
  --fg: #17222f;
  --fg-dim: #4c5d72;
  --fg-faint: #66788e;  /* 2026-09-02: 白カード上3.5:1→約4.6:1へ(AA対応) */
  --accent: #0f9f96;
  --accent-soft: rgba(15, 159, 150, .10);
  --accent-border: rgba(15, 159, 150, .42);
  --accent-tint: #0b6e68;
  --accent-ink: #ffffff;
  --good: #149463;
  --good-soft: rgba(20, 148, 99, .10);
  --good-border: rgba(20, 148, 99, .38);
  --good-tint: #0d6b47;
  --warn: #c07a00;
  --warn-soft: rgba(192, 122, 0, .12);
  --warn-border: rgba(192, 122, 0, .36);
  --warn-tint: #8a5800;
  --warn-ink: #ffffff;
  --bad: #d23f3f;
  --bad-soft: rgba(210, 63, 63, .10);
  --bad-border: rgba(210, 63, 63, .42);
  --bad-tint: #a32626;
  --gold: #b08e00;
  --gold-soft: rgba(176, 142, 0, .10);
  --gold-border: rgba(176, 142, 0, .45);
  --bar-top: rgba(255, 255, 255, .88);
  --bar-bottom: rgba(250, 252, 254, .95);
  --shadow-1: inset 0 1px 0 var(--edge-top), 0 1px 3px rgba(16, 38, 64, .14);
  --shadow-2: inset 0 1px 0 var(--edge-top), 0 6px 18px rgba(16, 38, 64, .16);
  --shadow-3: 0 10px 30px rgba(16, 38, 64, .24);
}
/* 1号艇の白は白地に溶けるので、ライトでは薄い輪郭を足す(枠番カラー自体は変更禁止) */
html[data-theme="light"] .lane-1,
html[data-theme="light"] .badge.res .rl-1 {
  box-shadow: inset 0 0 0 1px rgba(16, 38, 64, .3);
}

/* 課金開始前の正直な注記(プロページ) */
.pro-freenote { border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 12px; margin: 0 0 16px;
  font-size: 13px; line-height: 1.7; color: var(--fg); background: var(--card); }
.pro-freenote b { display: block; margin-bottom: 2px; }

/* 台帳のレース行: 手堅い買い方(単勝)の1行(2026-09-20) */
.trk-tan { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: var(--fs-2xs); color: var(--fg-dim); }
.trk-tan .lane { transform: scale(0.85); }

/* 選手図鑑の絞り込み: 3軸(対象/級別/男女)を軸ごとにまとめて表示(2026-09-21) */
/* 3軸が全部見えるように、この行だけは横スクロールでなく折り返す(男女の軸が画面外に隠れると組み合わせに気づけない) */
.racer-filters { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.racer-filters .chip-group { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: 10px; }
.racer-filters .chip-group:last-child { margin-right: 0; }

/* Googleでログインのボタン(2026-09-26)。hidden は display 指定に負けるので明示する */
.g-signin { display: flex; justify-content: center; min-height: 44px; margin: 0 0 10px; }
.g-signin[hidden], .g-or[hidden] { display: none; }
.g-or { text-align: center; font-size: 12px; margin: 0 0 10px; }

/* 「今日の舟読みAI」の3つの数字(2026-09-26)。中央の対市場スコアが主役、左右の的中率と回収率は同じ大きさ。
   回収率を小さくしたり畳んだりしない(スコアだけ見せて実際の回収率を隠さない約束) */
.hero-kpis { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; margin-top: 12px; align-items: stretch; }
.kpi-t {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 9px 4px 8px; text-align: center; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.kpi-t .k { font-size: var(--fs-2xs); color: var(--fg-faint); white-space: nowrap; }
.kpi-t b {
  font-family: var(--font-num); font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 3px; white-space: nowrap;
}
.kpi-t .s { font-size: var(--fs-3xs); color: var(--fg-faint); margin-top: 3px; white-space: nowrap; }
.kpi-t.is-main { background: var(--accent-soft); border-color: var(--accent-border); }
.kpi-t.is-main .k { color: var(--accent); font-weight: 600; }
.kpi-t.is-main b { font-size: 2.35rem; }
.kpi-t b.good { color: var(--good); }
.kpi-t .kpi-bar { display: block; height: 4px; flex: 0 0 4px; border-radius: 2px; background: var(--line); margin: 6px 10px 0; overflow: hidden; }
.kpi-t .kpi-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.hero-basis { font-size: var(--fs-2xs); color: var(--fg-faint); text-align: center; margin-top: 7px; }
/* 的中率は半円メーター(以前のヒーローと同じ部品)。タイルの背景と弧の下地が同じ色なので、下地だけ線の色にする */
.kpi-gauge { position: relative; width: 92px; max-width: 100%; margin: 4px auto 0; }
.kpi-gauge .gauge { width: 100%; height: auto; display: block; }
.kpi-gauge .gauge-bg { stroke: var(--line); }
.kpi-gauge b { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font-size: 1.15rem; }