/* MAIBuilder UI — モックアップ v0.2 のトークンを引き継ぎ、UI指示書 §0/§7 を適用。
 *
 * §0 の下限 (新設禁止ラインを全体に適用):
 *   - フォントサイズ .72rem 未満を作らない (v0.2 に残っていた .62〜.70rem を .72rem に引き上げ)
 *   - タップ可能要素の高さ 44px 未満を作らない (--tap で統一)
 *   - Webフォントを読み込まない (端末フォントのみ。オフライン耐性)
 * §7 の意味論修正:
 *   - alert(赤) は「操作を要するエラー」専用。出し抜きバッジは gold、欠損警告は無彩色
 */
:root{
  --turf-900:#0B3D2C; --turf-700:#14614A; --turf-500:#2C7A5D; --turf-100:#E2EDE5;
  --paper:#F4F6F1; --card:#FFFFFF; --ink:#1F281F; --ink-soft:#5C6759;
  /* D-2: 旧値 #8B9486 は白地 3.14:1・paper 2.89:1 で、最小サイズ本文 (12.5px) には
     WCAG AA (4.5:1) 不適合だった。注記・補助ラベルは25箇所で最小サイズ × この色の
     組み合わせだったので、個別置換ではなく色そのものを AA まで暗くする。
     paper 上でも 4.78:1 を確保し、--ink-soft (5.93:1) との階層は保つ。 */
  --ink-faint:#66705C;
  --gold:#A8811C; --gold-bright:#C9A227; --gold-soft:#F6EDD2;
  /* D-2: 文字用。#A8811C は gold-soft 上で 3.09:1 で WCAG AA 不適合なので、
     テキストには 5.28:1 のこちらを使う (背景・枠線は --gold のまま) */
  --gold-text:#7A5D0F;
  --alert:#B2432F; --alert-soft:#F7E4DF;
  --line:#DCE3D8; --line-soft:#E9EEE5;
  /* D-2: 旧値 #7C8AA0 は白地 3.5:1 で不適合。基準との差 (−14pt) は判断材料なので AA まで暗くする */
  --minus:#5D6C82;
  --r-lg:14px; --r-md:10px; --r-sm:6px;
  --fs-min:.78rem;      /* 可読性の下限。競馬ユーザーの年齢層を考慮して .72 から引き上げ */
  --tap:44px;           /* タップ標的の最小高さ */
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#DDE4DA}
body{
  font-family:"Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Arial,Meiryo,"メイリオ",sans-serif;
  color:var(--ink); background:var(--paper);
  max-width:430px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column;
  box-shadow:0 0 40px rgba(20,50,35,.18);
}
.num{font-variant-numeric:tabular-nums}

/* ---------- app header ---------- */
header.app{
  background:var(--turf-900); color:#F2F6EF;
  padding:14px 18px 12px; position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:baseline; gap:8px}
.brand .logo{font-weight:800; font-size:1.15rem; letter-spacing:.02em}
.brand .logo em{font-style:normal; color:var(--gold-bright)}
.brand .date{margin-left:auto; font-size:var(--fs-min); color:#BFD2C6}
.screen-title{margin-top:10px; display:flex; align-items:baseline; gap:10px}
.screen-title h1{font-size:.95rem; font-weight:700; letter-spacing:.04em}
.screen-title .sub{font-size:var(--fs-min); color:#9DB8A8}

/* 発走時刻を常に視界に置く縮小ヘッダ */
.mini-head{margin-top:8px; padding:7px 10px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.12); color:#EAF2EC; font-size:var(--fs-min);
  font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums}

/* デモ演出中の常時バッジ (?demo=1 のみ。通常URLでは DOM から除去) */
.demo-banner{position:sticky; top:0; z-index:29; text-align:center;
  background:var(--gold-soft); color:var(--gold-text); font-size:var(--fs-min);
  font-weight:700; padding:6px 10px; border-bottom:1px solid var(--gold-bright)}

/* 検証モード (--preview) の常時バナー。結果を知った状態で印を見ていることを隠さない */
.preview-banner{position:sticky; top:0; z-index:29; text-align:center;
  background:var(--alert-soft); color:var(--alert); font-size:var(--fs-min);
  font-weight:700; padding:6px 10px; border-bottom:1px solid var(--alert)}

main{flex:1; padding:14px 14px 84px}
.screen{display:none}
.screen.active{display:block}

/* ---------- shared ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-min); font-weight:500;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft);
  background:#fff; white-space:nowrap}
.chip.ok{background:var(--turf-100); border-color:transparent; color:var(--turf-700)}
.chip.wait{background:var(--gold-soft); border-color:transparent; color:var(--gold-text)}
/* §7: 欠損カバレッジは「注意」= 無彩色。赤は操作を要するエラー専用 */
.chip.muted{background:#fff; border-color:var(--ink-faint); color:var(--ink-soft)}
/* alert は操作を要するエラーのみ (fetch 失敗など) */
.chip.alert{background:var(--alert-soft); border-color:transparent; color:var(--alert)}
.section-label{font-size:var(--fs-min); font-weight:700; letter-spacing:.14em; color:var(--ink-faint); margin:18px 2px 8px}
.note{font-size:var(--fs-min); color:var(--ink-soft); line-height:1.7}
.empty{padding:28px 18px; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg)}
.empty .t{font-weight:700; font-size:.95rem}
.empty .d{margin-top:8px; font-size:.8rem; color:var(--ink-soft); line-height:1.7}
.empty .cta{margin-top:16px}
.hidden{display:none !important}

/* 枠番チップ(JRA枠色) */
.waku{display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:5px; font-size:.78rem; font-weight:700; flex:none}
.w1{background:#FFF; color:#333; border:1px solid #BFC6BC}
.w2{background:#2B2B2B; color:#FFF}
.w3{background:#C93A2C; color:#FFF}
.w4{background:#1F5BB5; color:#FFF}
.w5{background:#E3C21F; color:#4A3E00}
.w6{background:#2E8B57; color:#FFF}
.w7{background:#E07826; color:#FFF}
.w8{background:#E890B4; color:#5A2138}

/* ---------- 警告カード (§4) ---------- */
.warns{margin-bottom:12px; display:flex; flex-direction:column; gap:8px}
.warn-card{background:var(--gold-soft); border:1px solid transparent; border-radius:var(--r-md);
  padding:12px 14px}
.warn-card .m{font-size:.82rem; font-weight:700; color:var(--gold-text); line-height:1.6}
.warn-card .h{margin-top:6px; font-size:var(--fs-min); color:var(--ink-soft); line-height:1.7}
.warn-cols{margin-top:8px; font-size:var(--fs-min); color:var(--ink-soft); line-height:1.8;
  border-top:1px solid rgba(168,129,28,.25); padding-top:7px}

/* 用語のワンタップ説明。点線下線でタップできることを見せる。
 * 説明文は labels.py が正本 (UI に複製しない)。 */
.term{font:inherit; color:var(--turf-700); background:none; border:none; cursor:pointer;
  border-bottom:1px dotted var(--turf-500); padding:0 1px; margin:0 1px; line-height:inherit}

/* ボトムシート (用語・印の説明) */
.sheet-wrap{position:fixed; inset:0; background:rgba(15,35,25,.5); display:none;
  align-items:flex-end; justify-content:center; z-index:80}
.sheet-wrap.show{display:flex}
.sheet{background:var(--card); width:100%; max-width:430px;
  border-radius:var(--r-lg) var(--r-lg) 0 0; padding:16px 18px 24px;
  max-height:76vh; overflow-y:auto}
.sheet-head{display:flex; align-items:center; gap:10px}
.sheet-head h3{font-size:1rem; font-weight:700; flex:1}
.sheet-close{background:none; border:none; font-size:1rem; color:var(--ink-soft);
  min-width:var(--tap); min-height:var(--tap); cursor:pointer; font-family:inherit}
.sheet-body{margin-top:6px; font-size:.85rem; line-height:1.85; color:var(--ink-soft)}
.sheet-row{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft)}
.sheet-row b{flex:none; min-width:5.4em; color:var(--ink)}
.sheet-foot{margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft);
  color:var(--ink-faint)}

/* A-2: 選択チップと説明ⓘは **兄弟** にする (button の入れ子を作らない) */
.pchip-wrap{display:inline-flex; align-items:stretch; gap:2px}
.pinfo{min-width:var(--tap); min-height:var(--tap); padding:0 6px; font-family:inherit;
  font-size:.8rem; color:var(--turf-700); background:none; border:none; cursor:pointer;
  flex:none}
.thin-mark{margin-left:5px; font-size:var(--fs-min); font-weight:700; color:var(--gold-text);
  background:var(--gold-soft); border-radius:999px; padding:1px 6px; white-space:nowrap}

/* STEP1 のグループ分節 */
.g-block{margin-bottom:16px}
.g-head{font-size:.9rem; font-weight:700; color:var(--turf-900)}
.g-desc{font-size:var(--fs-min); color:var(--ink-soft); margin-top:2px; line-height:1.6}

/* 「まよったら」プリセット */
.starter{background:var(--gold-soft); border-radius:var(--r-lg); padding:14px; margin-top:14px}
.starter .s-title{font-weight:700; font-size:.92rem; color:var(--gold-text)}
.starter .s-desc{font-size:var(--fs-min); color:var(--ink-soft); margin-top:4px; line-height:1.7}
.starter .s-btn{margin-top:10px; width:100%; min-height:var(--tap); padding:11px;
  font-family:inherit; font-size:.88rem; font-weight:700; color:#fff;
  background:var(--gold); border:none; border-radius:var(--r-md); cursor:pointer}

/* 印の凡例 (印リスト直上の1行) */
.legend-row{display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap);
  padding:9px 14px; margin-bottom:8px; background:var(--turf-100); border:none;
  border-radius:var(--r-md); font-family:inherit; cursor:pointer; text-align:left}
.legend-row .l-marks{flex:1; font-size:.82rem; font-weight:700; color:var(--turf-900)}
.legend-row .l-more{font-size:var(--fs-min); color:var(--turf-700);
  border-bottom:1px dotted var(--turf-500)}

/* 終了したレース */
.race-group{margin-bottom:12px}
.race-group.done{opacity:.85}
.finished{padding:18px 16px}
.finished .f-title{font-weight:700; font-size:.95rem}
.finished .f-body{margin-top:12px}
.finished .f-note{margin-top:10px; font-size:var(--fs-min); color:var(--ink-soft);
  line-height:1.7}
.res-row{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft)}
.res-row .o{font-weight:700; color:var(--gold-text); flex:none; width:3em}
.res-row .n{font-size:.9rem}

/* 順位規則カード (board が空でも常時表示) */
.rule-card{margin-top:12px; padding:14px 16px}
.rule-title{font-size:var(--fs-min); font-weight:700; letter-spacing:.12em;
  color:var(--ink-faint)}
.rule-body{margin-top:7px; font-size:.82rem; line-height:1.8}
.rule-note{margin-top:9px; font-size:var(--fs-min); color:var(--ink-soft); line-height:1.8}

/* 寄与の内訳の見出し (上げた / 下げた / 使えなかった) */
.c-head{margin:12px 0 6px; font-size:var(--fs-min); font-weight:700;
  letter-spacing:.08em; color:var(--ink-faint)}
/* 決め手の一文 — 初心者にはこれが本文 */
.decisive{margin:2px 0 4px; font-size:.85rem; line-height:1.75; font-weight:500;
  background:var(--turf-100); border-radius:var(--r-md); padding:10px 12px}

/* レース行: 1行目=名称かクラス / 2行目=施行条件 (常設) */
.race-name .cond{font-size:var(--fs-min); color:var(--ink-soft); margin-top:3px}
.race-name .rcls{margin-left:7px; font-size:var(--fs-min); font-weight:500;
  color:var(--turf-700); background:var(--turf-100); padding:1px 7px; border-radius:999px}
.race-name .meta{margin-top:4px}
/* ゲート事前判定の共通通知 (行チップの反復をやめる) */
.gate-note{background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 13px; margin-bottom:12px; font-size:var(--fs-min);
  color:var(--ink-soft); line-height:1.7}

/* 予想ヘッダの施行条件行 (常設) */
.rcond{margin-top:5px; font-size:var(--fs-min); color:#BFD2C6}
/* 適用AIの切替ボタン */
.ai-pick{margin-left:auto; min-height:var(--tap); padding:6px 10px; font-family:inherit;
  font-size:var(--fs-min); color:#BFD2C6; background:rgba(255,255,255,.12);
  border:none; border-radius:999px; cursor:pointer}
.ai-pick b{color:#fff}
/* 買い目エディタ (参加者が自分で組む)。
 * 流れは公式サイトと同じ「券種 → 買い方 → 馬(枠)」。
 * どの券種・買い方が有利かは示さない — 点数だけを出す。 */
.bed{padding:4px 14px 14px}
.bed-sec{padding:11px 0; border-bottom:1px solid var(--line-soft)}
.bed-h{display:flex; align-items:center; gap:4px; font-size:var(--fs-min);
  font-weight:700; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:8px}
.bed-n{margin-left:auto; font-size:var(--fs-min); font-weight:700; color:var(--turf-700)}
.bed-note{margin:8px 0 0; font-size:var(--fs-min); color:var(--ink-soft); line-height:1.75}
.bed-chips{display:flex; flex-wrap:wrap; gap:6px}
/* 券種は8つ並ぶので折り返す。押した券種が選択中 */
.btype-row,.bmode-row{display:flex; flex-wrap:wrap; gap:6px}
.btype{min-height:var(--tap); padding:0 13px; font-family:inherit; font-size:.86rem;
  font-weight:700; cursor:pointer; border:1.5px solid var(--line);
  border-radius:var(--r-md); background:#fff; color:var(--ink-soft); white-space:nowrap}
.btype.on{background:var(--turf-700); border-color:var(--turf-700); color:#fff}
.bmode{min-height:var(--tap); padding:0 12px; font-family:inherit;
  font-size:var(--fs-min); cursor:pointer; border:1.5px solid var(--line);
  border-radius:999px; background:#fff; color:var(--ink-soft); white-space:nowrap}
.bmode.on{background:var(--turf-100); border-color:var(--turf-700);
  color:var(--turf-700); font-weight:700}
/* 馬番・枠番チップ。タップ標的は 44px を維持する */
.bchip{display:inline-flex; align-items:center; gap:3px; min-width:var(--tap);
  min-height:var(--tap); padding:0 10px; font-family:inherit; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff;
  color:var(--ink-soft); white-space:nowrap}
.bchip .num{font-size:.95rem; font-weight:700}
.bchip.on{background:var(--turf-700); border-color:var(--turf-700); color:#fff}
.bc-m{font-size:var(--fs-min); font-weight:700; opacity:.85}
.bed-add{width:100%; margin-top:14px; min-height:var(--tap); font-family:inherit;
  font-size:.92rem; font-weight:700; cursor:pointer; border:none;
  border-radius:var(--r-md); background:var(--turf-700); color:#fff}
.bed-add:disabled{background:var(--line); color:var(--ink-faint); cursor:default}

/* 追加済みの買い目1件。**何を選んだのか**を先に見せ、点の内訳は折りたたむ。
 * 点の一覧だけだと、フォーメーションで「1着に誰を入れたか」が追えない。 */
.bs-row{padding:12px 14px; border-bottom:1px solid var(--line-soft)}
.bs-row:last-child{border-bottom:none}
.bs-head{display:flex; align-items:center; gap:8px}
.bs-k{font-size:.92rem; font-weight:700}
.bs-mode{font-size:var(--fs-min); color:var(--turf-700); background:var(--turf-100);
  border-radius:999px; padding:2px 9px; white-space:nowrap}
.bs-n{margin-left:auto; font-size:var(--fs-min); font-weight:700; color:var(--ink-soft);
  white-space:nowrap}
.bs-del{flex:none; min-width:var(--tap); min-height:var(--tap); font-family:inherit;
  font-size:var(--fs-min); cursor:pointer; background:none; border:none;
  color:var(--ink-soft)}
/* 段ごとの選択。見出しと番号を2列で並べる */
.bs-picks{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:9px 0 0}
.bs-picks dt{font-size:var(--fs-min); color:var(--ink-soft); white-space:nowrap}
.bs-picks dd{margin:0; font-size:.92rem; font-weight:700; word-break:break-all}
/* 点の内訳は既定で閉じる (照合するときだけ開く) */
.bs-pts{margin-top:8px}
.bs-pts summary{font-size:var(--fs-min); color:var(--turf-700); cursor:pointer;
  min-height:var(--tap); display:flex; align-items:center; list-style:none}
.bs-pts summary::-webkit-details-marker{display:none}
.bs-pts summary::before{content:'\25b8'; margin-right:5px}
.bs-pts[open] summary::before{content:'\25be'}
.bs-v{font-size:var(--fs-min); color:var(--ink-soft); line-height:1.8;
  word-break:break-all}
/* 合計と、まとめてのやり直し */
.bs-total{display:flex; align-items:center; gap:8px; padding:11px 14px;
  font-size:var(--fs-min); color:var(--ink-soft); border-top:1px solid var(--line-soft)}
.bs-total b{font-size:1rem; color:var(--ink)}
.bs-clear,.bs-reset{min-height:var(--tap); padding:4px 11px; font-family:inherit;
  font-size:var(--fs-min); cursor:pointer; background:none; border-radius:999px;
  white-space:nowrap}
.bs-clear{margin-left:auto; color:var(--ink-soft); border:1px solid var(--line)}
.bs-reset{color:var(--turf-700); border:1px solid var(--turf-500)}
/* 組めなかった指定は黙って消さない */
.bs-skip{display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:10px 12px;
  border-radius:var(--r-md); background:var(--gold-soft); color:var(--gold-text);
  font-size:var(--fs-min); line-height:1.7}
.bs-skip .bs-del{color:var(--gold-text); border:1px solid var(--gold);
  border-radius:999px; padding:0 10px}

/* 公式サイトへの引き渡し (STEP順の並べ替えと読み合わせ)。
 * 自動入力が入っても残す — 誤登録の最後の防波堤。 */
.hb{margin-top:10px; border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff}
.hb-head{display:flex; align-items:center; gap:8px; padding:13px 14px; min-height:var(--tap);
  font-size:.86rem; font-weight:700; cursor:pointer; list-style:none}
.hb-head::-webkit-details-marker{display:none}
.hb-head::after{content:'\25be'; margin-left:auto; color:var(--ink-soft)}
.hb[open] .hb-head::after{content:'\25b4'}
.hb-total{font-size:var(--fs-min); font-weight:700; color:var(--turf-700);
  background:var(--turf-100); border-radius:999px; padding:2px 9px; white-space:nowrap}
.hb-body{padding:0 14px 14px}
.hb-step{margin:0 0 9px; font-size:var(--fs-min); color:var(--ink-soft); line-height:1.8}
.hb-step b{color:var(--ink)}
.hb-check{padding:10px 12px; border-radius:var(--r-md); background:var(--gold-soft);
  color:var(--gold-text)}
.hb-check b{color:var(--gold-text)}
.hb-list{margin:0 0 10px; padding:0; list-style:none;
  border-top:1px solid var(--line-soft)}
.hb-item{padding:10px 0; border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-min)}
.hb-item:last-child{border-bottom:none}
.hb-top{display:flex; align-items:center; gap:8px}
.hb-t{font-weight:700; font-size:.9rem}
.hb-mode{font-size:var(--fs-min); color:var(--turf-700); background:var(--turf-100);
  border-radius:999px; padding:2px 9px; white-space:nowrap}
.hb-c{margin-top:7px; word-break:break-all; line-height:1.8}
.hb-n{margin-left:auto; font-weight:700; color:var(--ink-soft); white-space:nowrap}

/* E-1: 手動更新 (発走直前はオッズが動くので待たずに取り直せるように) */
.refresh{min-height:var(--tap); padding:6px 12px; font-family:inherit;
  font-size:var(--fs-min); font-weight:700; color:#BFD2C6;
  background:rgba(255,255,255,.12); border:none; border-radius:999px;
  cursor:pointer; white-space:nowrap}

/* このレース条件での成績1行 */
.cond-rec{margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.15);
  font-size:var(--fs-min); color:#DCEAE0; line-height:1.7}
.cond-rec b{color:#fff; font-size:.82rem}
.cond-rec.muted{color:#9DB8A8}
/* マイAI切替シートの行 */
.ai-row{display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap);
  padding:11px 4px; background:none; border:none; border-bottom:1px solid var(--line-soft);
  font-family:inherit; cursor:pointer; text-align:left}
.ai-row .an{flex:1; font-size:.88rem; font-weight:700; color:var(--ink)}
.ai-row .am{font-size:var(--fs-min); color:var(--ink-faint)}
.ai-row .ac{font-size:var(--fs-min); font-weight:700; color:var(--turf-700);
  background:var(--turf-100); padding:2px 8px; border-radius:999px}
.ai-row.on .an{color:var(--turf-700)}
/* 出走情報の行 */
.horse .entry{font-size:var(--fs-min); color:var(--ink-soft); margin-top:3px;
  font-variant-numeric:tabular-nums}
/* 馬単位のデータ薄警告 (whyカードを開かなくても見える位置) */
.thin-race{margin:0 0 8px; padding:9px 13px; border-radius:var(--r-md);
  background:var(--gold-soft); color:var(--gold-text); font-size:var(--fs-min);
  font-weight:700; line-height:1.7}
.thin-horse{margin-top:4px; font-size:var(--fs-min); font-weight:700; color:var(--gold-text);
  line-height:1.6}
/* 内訳が空のときの明示 (セクションごと消さない) */
.c-none{font-size:var(--fs-min); color:var(--ink-faint); padding:2px 0 4px}
/* 条件別内訳カード */
.cb{padding:4px 14px}
.cb-row{display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--line-soft)}
.cb-row:last-child{border-bottom:none}
.cb-k{flex:1; font-size:.85rem}
.cb-v{font-size:.85rem; text-align:right}
.cb-base{font-size:var(--fs-min); color:var(--ink-soft); margin-left:6px}
.cb-none{font-size:var(--fs-min); color:var(--ink-soft)}

/* B-1: 基準を同格に並べ、差を主表示にする */
.bt2{padding:4px 14px}
.bt2-head{display:flex; align-items:center; gap:10px; padding:9px 0 7px;
  border-bottom:1px solid var(--line-soft); font-size:var(--fs-min);
  color:var(--ink-faint)}
.bt2-head > span:first-child{flex:1}
.bt2-head > span:last-child{flex:none; width:3.4em; text-align:right}
.bt2-row{display:flex; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--line-soft)}
.bt2-row:last-child{border-bottom:none}
.bt2-k{flex:1; font-size:.82rem}
.bt2-pair{flex:none; display:flex; align-items:baseline; gap:6px}
.bt2-you,.bt2-base{font-size:.95rem; font-weight:700}
.bt2-base{color:var(--ink-soft)}
.bt2-sep{font-size:var(--fs-min); color:var(--ink-faint)}
.bt2-diff{flex:none; width:3.4em; text-align:right; font-size:.82rem; font-weight:700}
.bt2-diff.up{color:var(--turf-700)}
.bt2-diff.down{color:var(--minus)}
.bt2-diff.even{color:var(--ink-faint)}
.bt2-foot{padding:9px 0; font-size:var(--fs-min); color:var(--ink-soft); line-height:1.7}

/* B-2: 自信度は turf 系。gold は「注意・保留」専用にして意味を衝突させない */
.badge-conf.low{background:var(--gold-soft); color:var(--gold-text)}
.conf-note{margin-top:7px; font-size:var(--fs-min); color:#E8D9A8; line-height:1.7}

/* 回収率の行 — 点推定を単独で見せない (幅とレース数を必ず併記) */
.roi-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 14px 12px; font-size:var(--fs-min); color:var(--ink-soft)}
.roi-row b{font-size:.95rem; color:var(--ink)}
.roi-row.muted{color:var(--ink-faint)}
.roi-rank{font-weight:700; color:var(--turf-700); background:var(--turf-100);
  padding:2px 8px; border-radius:999px}
.roi-ci{color:var(--ink-soft)}
.roi-tie{color:var(--gold-text); background:var(--gold-soft); padding:2px 8px;
  border-radius:999px; font-weight:700}

/* 回収率ランキング (表示期間の集計) */
.rr{padding:2px 14px}
.rr-row{display:flex; align-items:center; gap:11px; padding:11px 0;
  border-bottom:1px solid var(--line-soft)}
.rr-row:last-child{border-bottom:none}
.rr-row.baseline{background:var(--turf-100); margin:0 -14px; padding:11px 14px}
.rr-rank{flex:none; width:2.6em; font-size:.85rem; font-weight:700;
  color:var(--turf-700); text-align:center}
.rr-who{flex:1; min-width:0}
.rr-name{font-size:.88rem; font-weight:700}
.rr-sub{font-size:var(--fs-min); color:var(--ink-soft); margin-top:2px}
.rr-v{flex:none; text-align:right}
.rr-v b{font-size:.95rem}

/* 全員が同順位のときの見出し (「1位」を並べても情報にならないので事実を書く) */
.rr-tied{background:var(--gold-soft); color:var(--gold-text); border-radius:var(--r-md);
  padding:10px 13px; margin-bottom:9px; font-size:var(--fs-min);
  font-weight:700; line-height:1.7}

/* 買い目・JRAスマッピーQR */
.bs{padding:4px 14px}
.bs-start{padding:14px; margin-top:8px; display:flex; align-items:center; gap:10px;
  justify-content:space-between; flex-wrap:wrap}
.bs-empty-note{margin:0; color:var(--ink-soft); font-size:.82rem; line-height:1.7}
.bs-suggest{min-height:var(--tap); padding:10px 14px; border:1.5px solid var(--turf-500);
  border-radius:var(--r-md); background:#fff; color:var(--turf-700); font-family:inherit;
  font-size:.82rem; font-weight:700; cursor:pointer}
.bs-actions{display:flex; gap:9px; margin-top:10px; flex-wrap:wrap}
.bs-copy,.bs-qr{flex:1; min-height:var(--tap); padding:11px; font-family:inherit;
  font-size:.85rem; font-weight:700; color:#fff; background:var(--turf-700);
  border:none; border-radius:var(--r-md); cursor:pointer}
.bs-qr{background:#5b3b8c}
.bs-qr:disabled{opacity:.6; cursor:wait}
.bs-link{flex:1; min-height:var(--tap); display:flex; align-items:center;
  justify-content:center; padding:11px; font-size:.85rem; font-weight:700;
  color:var(--turf-700); background:#fff; border:1.5px solid var(--turf-500);
  border-radius:var(--r-md); text-decoration:none}
.bs-note{margin-top:9px; line-height:1.8}
.bs-money{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:9px;
  padding-top:9px; border-top:1px solid var(--line-soft); font-size:var(--fs-min);
  color:var(--ink-soft); font-weight:700}
.bs-amount{width:7em; min-height:var(--tap); padding:7px 8px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--ink); font-size:.9rem; text-align:right}
.bs-amount:focus{outline:2px solid var(--turf-500); outline-offset:1px}
.bs-sub{margin-left:auto; color:var(--turf-700)}
.bs-odds-note{font-size:var(--fs-min); color:var(--ink-soft); line-height:1.6;
  padding:9px 0; margin:0; border-top:1px solid var(--line-soft)}
.bo-state{display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px;
  background:var(--turf-100); color:var(--turf-700); font-size:var(--fs-min); font-weight:700}
.bo-state.pending,.bo-odds.pending{background:var(--paper); color:var(--ink-faint)}
.bo-row{display:grid; grid-template-columns:minmax(55px,auto) minmax(110px,1fr);
  gap:3px 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft);
  font-size:.78rem}
.bo-row:last-child{border-bottom:none}
.bo-odds{justify-self:end; color:var(--turf-700); font-weight:700; padding:3px 7px;
  border-radius:999px; background:var(--turf-100)}
.bo-stake{grid-column:1/-1; color:var(--ink); font-size:var(--fs-min); text-align:right; font-weight:700}
.bo-pay{grid-column:1/-1; color:var(--ink-soft); font-size:var(--fs-min); text-align:right}
.bs-funds{margin:8px 0 4px; padding:12px; border-radius:var(--r-md); background:var(--turf-100);
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.78rem}
.bf-title{width:100%; font-weight:700; color:var(--turf-700)}
.bs-funds label{display:flex; align-items:center; gap:5px; font-weight:700; color:var(--ink-soft)}
.bf-input{width:8em; min-height:var(--tap); padding:7px 8px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--ink); font-size:.9rem; text-align:right}
.bf-apply{min-height:var(--tap); padding:9px 12px; border:0; border-radius:var(--r-sm);
  background:var(--turf-700); color:#fff; font-family:inherit; font-size:.78rem;
  font-weight:700; cursor:pointer}
.bf-apply:disabled{opacity:.48; cursor:not-allowed}

/* 共有運用: 招待・管理画面。アプリと同じ配色だが、投票QRとは明確に分ける。 */
.auth-gate{position:fixed; inset:0; z-index:1000; overflow:auto; padding:24px 14px;
  background:linear-gradient(160deg,var(--turf-900),var(--turf-700)); display:grid;
  place-items:start center}
.auth-gate[hidden]{display:none}
.auth-card{width:min(100%,560px); margin:auto; padding:24px; border-radius:var(--r-lg);
  background:#fff; box-shadow:0 20px 55px rgba(0,0,0,.24)}
.auth-logo{font-size:1.35rem; font-weight:900; letter-spacing:.04em; color:var(--turf-900)}
.auth-logo em{font-style:normal; color:var(--gold-text)}
.auth-card h2{margin:12px 0 6px; color:var(--ink)}
.auth-card p{line-height:1.7; color:var(--ink-soft)}
.auth-form,.admin-create{display:grid; gap:12px; margin-top:18px}
.auth-form label,.admin-create label{display:grid; gap:6px; color:var(--ink-soft); font-weight:700}
.auth-form input,.admin-create input{min-height:var(--tap); padding:9px 10px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); font:inherit; background:#fff; color:var(--ink)}
.auth-error{min-height:1.5em; margin:0; color:var(--alert)!important; font-weight:700}
.user-pill{min-height:var(--tap); max-width:145px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; padding:6px 10px; border:1px solid rgba(255,255,255,.4);
  border-radius:999px; background:transparent; color:#fff; font:inherit; cursor:pointer}
.admin-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.quiet-btn{min-height:var(--tap); padding:8px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--turf-700); font:inherit;
  font-weight:700; cursor:pointer}
.invite-result{margin:18px 0; padding:16px; border-radius:var(--r-lg); text-align:center;
  background:#eaf4fb; border:2px solid #2d6f9f}
.invite-result img{display:block; width:min(260px,80vw); height:auto; margin:10px auto;
  image-rendering:pixelated}
.admin-list{margin-top:18px; padding-top:10px; border-top:1px solid var(--line)}
.admin-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--line-soft)}
.admin-row span{min-width:0}.admin-row small{display:block; color:var(--ink-soft); margin-top:3px}
.bs-funds p{width:100%; margin:0; color:var(--ink-soft); font-size:var(--fs-min); line-height:1.6}
.bf-left{display:block; color:var(--gold-text); font-weight:700}
.hb-money{font-size:var(--fs-min); color:var(--ink-soft); margin-top:5px}
.smq,.smq-error{margin-top:12px; border-radius:var(--r-lg); padding:14px}
.smq{background:#fff; border:2px solid #5b3b8c; text-align:center}
.smq h3{font-size:1rem; margin:0 0 5px; color:#3f2865}
.smq-ok{font-size:var(--fs-min); color:var(--turf-700); font-weight:700; margin:0 0 10px}
.smq-img{display:block; width:min(100%,405px); height:auto; margin:0 auto;
  image-rendering:pixelated; background:#fff}
.smq-meta{font-size:var(--fs-min); color:var(--ink-soft); line-height:1.7; margin:8px 0}
.smq details{text-align:left; margin-top:8px}
.smq details summary{cursor:pointer; font-size:.82rem; font-weight:700; color:var(--turf-700)}
.smq details ul{list-style:none; padding:0; margin:8px 0}
.smq details li{display:flex; gap:8px; flex-wrap:wrap; padding:6px 0;
  border-bottom:1px solid var(--line-soft); font-size:var(--fs-min)}
.smq details li span:last-child{margin-left:auto}
.smq-warn{text-align:left; background:var(--gold-soft); color:var(--gold-text);
  border-radius:var(--r-md); padding:10px; font-size:var(--fs-min); line-height:1.7; margin:10px 0 0}
.smq-error{background:var(--alert-soft); color:var(--alert); font-size:.82rem; line-height:1.7}

/* ---------- レース一覧 ---------- */
/* 会場チップ: 3,200px の一覧を素通りさせず、タップで会場へ飛べるようにする */
.venue-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.vchip{font-size:var(--fs-min); font-weight:700; padding:11px 14px; min-height:var(--tap);
  border-radius:999px; border:1.5px solid var(--turf-500); background:#fff;
  color:var(--turf-700); font-family:inherit; cursor:pointer; white-space:nowrap}
/* 開催 (競馬場) の見出し。1日に複数開催があるのでレース番号だけでは一意にならない。
 * sticky にするため .card の外に出した (.card は overflow:hidden で sticky が効かない)。
 * top はアプリヘッダの高さ分だけ下げる。 */
.track-head{position:sticky; top:var(--head-h, 96px); z-index:20;
  background:var(--turf-100); color:var(--turf-700);
  font-size:var(--fs-min); font-weight:700; letter-spacing:.1em; padding:8px 14px;
  border-radius:var(--r-sm) var(--r-sm) 0 0; border-bottom:1px solid var(--line-soft)}
.race-item{display:flex; align-items:center; gap:12px; padding:13px 14px; min-height:var(--tap);
  border-bottom:1px solid var(--line-soft); background:var(--card); width:100%; text-align:left;
  border-left:none; border-right:none; border-top:none; font-family:inherit; cursor:pointer}
.race-item:last-child{border-bottom:none}
.race-item:disabled{cursor:default; opacity:.75}
.race-item.on{background:var(--turf-100)}
.race-time{width:54px; flex:none}
.race-time .t{font-weight:700; font-size:1rem}
.race-time .r{font-size:var(--fs-min); color:var(--ink-faint)}
.race-name{flex:1; min-width:0}
.race-name .n{font-weight:700; font-size:.95rem; letter-spacing:.03em}
.race-name .meta{font-size:var(--fs-min); color:var(--ink-soft); margin-top:3px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.race-item .go{color:var(--ink-faint); font-size:.9rem}

/* ---------- マイAI作成 ---------- */
.build-intro{padding:14px; background:var(--turf-100); border-radius:var(--r-lg); font-size:.8rem; line-height:1.7}
.param-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.pchip{font-size:.8rem; padding:11px 14px; min-height:var(--tap); border-radius:999px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer;
  user-select:none; transition:background .12s,color .12s,border-color .12s; font-family:inherit; white-space:nowrap}
.pchip.on{background:var(--turf-700); border-color:var(--turf-700); color:#fff; font-weight:500}
.step2{margin-top:8px}
.step2 .item{border-bottom:1px solid var(--line-soft)}
.step2 .item:last-child{border-bottom:none}
/* §3: 項目トグル と アコーディオン開閉 は独立した操作 */
.step2 .head{display:flex; align-items:center; gap:10px; padding:0 14px 0 0}
.step2 .toggle{display:flex; align-items:center; gap:9px; padding:12px 0 12px 14px;
  min-height:var(--tap); cursor:pointer; user-select:none; flex:1; min-width:0}
.step2 .toggle input{width:22px; height:22px; flex:none; accent-color:var(--turf-700)}
.step2 .toggle .nm{font-size:.86rem; font-weight:500}
.step2 .st{font-size:var(--fs-min); color:var(--ink-faint); text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:44%}
.step2 .item.on .st{color:var(--turf-700)}
.step2 .disc{background:none; border:none; font-family:inherit; cursor:pointer; color:var(--ink-faint);
  min-width:var(--tap); min-height:var(--tap); font-size:1rem}
.step2 .body{padding:2px 14px 14px; display:none}
.step2 .item.open .body{display:block}
.mini-label{font-size:var(--fs-min); font-weight:700; letter-spacing:.1em; color:var(--ink-faint); margin:10px 0 6px}
.cellrow{display:flex; flex-wrap:wrap; gap:6px}
.cchip{font-size:var(--fs-min); padding:11px 12px; min-height:var(--tap); border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; font-family:inherit; white-space:nowrap}
.cchip.on{background:var(--turf-100); border-color:var(--turf-500); color:var(--turf-700); font-weight:700}
/* C-1: 詳細設定 (STEP2) は初期折りたたみ。閉じていても中身の規模が分かるように
 * 選択数のバッジを見出しに出す。 */
.adv{margin-top:18px; border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff}
.adv-head{display:flex; align-items:center; gap:10px; width:100%; padding:14px;
  min-height:var(--tap); background:none; border:none; font-family:inherit; cursor:pointer;
  text-align:left; color:var(--ink)}
.adv-t{flex:1; font-size:.88rem; font-weight:700}
.adv-n{font-size:var(--fs-min); color:var(--ink-soft); white-space:nowrap}
.adv-n.on{color:var(--turf-700); font-weight:700}
.adv-caret{color:var(--ink-soft); font-size:1rem; line-height:1}
.adv-head:focus-visible{outline:2px solid var(--turf-500); outline-offset:-2px}
.adv-body{padding:0 14px 14px}
.adv-desc{font-size:var(--fs-min); color:var(--ink-soft); line-height:1.75; margin:0}

/* C-2: 期間は 11 チップからスライダー1つへ。「これまでの全走」は連続量の外なので
 * 別トグルで残す (どちらか一方は必須)。 */
.lbctl{display:flex; flex-direction:column; gap:2px}
.lb-slide{display:flex; align-items:center; gap:12px; min-height:var(--tap)}
.lb-slide input[type=range]{flex:1; min-width:0; accent-color:var(--turf-700); height:var(--tap)}
.lb-slide input[type=range]:disabled{opacity:.4}
.lb-out{font-size:var(--fs-min); font-weight:700; color:var(--turf-700);
  white-space:nowrap; min-width:6.5em; text-align:right}
.lb-multi{margin:2px 0 0; padding:8px 11px; border-radius:var(--r-md);
  background:var(--gold-soft); color:var(--gold-text); font-size:var(--fs-min); line-height:1.65}
/* C-2b: 直積で生成されるセル数を見せる (以前は「全レース ほか2 × 直近3 ほか4」で規模が不可視) */
.cellnote{margin:6px 0 0; font-size:var(--fs-min); color:var(--ink-soft)}

/* C-5: マイAI未作成なら、レースを選ばせる前に作成へ誘導する */
.fr{padding:20px 16px; border-radius:var(--r-lg); background:var(--turf-100);
  border:1.5px solid var(--turf-500); margin-bottom:14px}
.fr-t{font-size:1rem; font-weight:700; color:var(--turf-700)}
.fr-d{margin:7px 0 14px; font-size:.86rem; color:var(--ink-soft); line-height:1.75}
.fr .cta{margin:0}

.ai-name{margin-top:16px}
.ai-name input{width:100%; padding:12px 14px; min-height:var(--tap); font-size:1rem;
  border:1.5px solid var(--line); border-radius:var(--r-md); font-family:inherit; background:#fff}
.ai-name input:focus{outline:2px solid var(--turf-500); border-color:transparent}
.cta{display:block; width:100%; margin-top:16px; padding:14px; min-height:var(--tap);
  font-size:.95rem; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--turf-700); border:none; border-radius:var(--r-md); cursor:pointer; font-family:inherit}
.cta:active{background:var(--turf-900)}
.cta:disabled{background:var(--line); color:var(--ink-faint); cursor:default}
.cta-reason{margin-top:8px; text-align:center; font-size:var(--fs-min); color:var(--ink-faint)}

/* 成績カード (バックテスト結果) */
.bt-result{margin-top:14px}
.bt-cell{background:var(--card); padding:12px 14px}
.bt-cell .k{font-size:var(--fs-min); color:var(--ink-faint)}
.bt-cell .v{font-weight:800; font-size:1.2rem; margin-top:3px}
.bt-cell .b{font-size:var(--fs-min); color:var(--ink-soft); margin-top:2px}

/* ---------- 予想画面 ---------- */
.race-head{padding:14px 16px; background:var(--turf-900); color:#F2F6EF; border-radius:var(--r-lg)}
.race-head .top{display:flex; align-items:baseline; gap:8px}
.race-head .top .place{font-size:var(--fs-min); color:#9DB8A8}
.race-head h2{font-weight:800; font-size:1.2rem; letter-spacing:.05em}
.race-head .top .off{margin-left:auto; font-size:var(--fs-min); color:#BFD2C6}
.race-head .bottom{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px}
.badge-conf{font-size:var(--fs-min); font-weight:700; padding:8px 14px; min-height:var(--tap);
  display:inline-flex; align-items:center; border-radius:999px; background:var(--turf-100);
  color:var(--turf-700); border:none; font-family:inherit; cursor:pointer; white-space:nowrap}
.badge-conf .ci{margin-left:5px; opacity:.8}
.race-head .ai{margin-left:auto; font-size:var(--fs-min); color:#BFD2C6}
.race-head .ai b{color:#fff}
.head-chip{font-size:var(--fs-min); padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.12); color:#CFE3D6}

.marks{margin-top:12px}
.horse{border-bottom:1px solid var(--line-soft); background:var(--card); transition:background .5s}
.horse:last-child{border-bottom:none}
.horse .row{display:flex; align-items:center; gap:11px; padding:11px 14px; min-height:var(--tap);
  cursor:pointer; width:100%; text-align:left; background:none; border:none; font-family:inherit}
.horse .row:focus-visible{outline:2px solid var(--turf-500); outline-offset:-2px}
/* 枠番がデータに無い場合は色を付けない (誤った枠色を出すより無色) */
.w-none{background:var(--line-soft); color:var(--ink-soft); border:1px dashed var(--line)}
.mark{font-weight:800; font-size:1.55rem; width:36px; text-align:center; flex:none; line-height:1; color:var(--ink)}
.mark.hon{color:var(--gold)}
.mark.none{color:var(--line); font-size:1.1rem}
.horse .who{flex:1; min-width:0}
.horse .name{font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.horse .sub{font-size:var(--fs-min); color:var(--ink-faint); margin-top:3px; display:flex; gap:8px;
  align-items:center; flex-wrap:wrap}
/* §7: スコア数値は印リストに出さない。バーの長さで相対比較のみ */
.scorebar{width:56px; flex:none}
.scorebar .bar{height:6px; background:var(--line-soft); border-radius:3px; overflow:hidden}
.scorebar .bar i{display:block; height:100%; background:var(--turf-500); border-radius:3px}
.horse.hon .scorebar .bar i{background:var(--gold-bright)}
/* ◎が1番人気でないことの目印。alert(赤) は操作を要するエラー専用なので gold を使う。
 * 煽り表現は付けない (設計書 v0.3 §1 DON'T)。文言は「1番人気ではない」。 */
.badge-upset{font-size:var(--fs-min); font-weight:700; color:var(--gold-text); background:var(--gold-soft);
  padding:2px 8px; border-radius:999px}
.horse.flash{background:var(--gold-soft)}

/* なぜ◎か カード(寄与分解) */
.why{display:none; padding:4px 14px 16px 61px}
.horse.open .why{display:block}
.why .why-title{font-size:var(--fs-min); font-weight:700; color:var(--turf-700); letter-spacing:.08em; margin-bottom:8px}
.contrib{display:grid; grid-template-columns:1fr 84px 48px; gap:6px 10px; align-items:center}
.contrib .lbl{font-size:.78rem; color:var(--ink); line-height:1.45}
.contrib .lbl small{display:block; color:var(--ink-faint); font-size:var(--fs-min); margin-top:2px}
.cbar{height:7px; border-radius:4px; background:var(--line-soft); position:relative; overflow:hidden}
.cbar i{position:absolute; top:0; bottom:0; border-radius:4px}
.cbar i.plus{left:0; background:var(--turf-500)}
.cbar i.minus{left:0; background:var(--minus)}
.contrib .v{font-size:.78rem; font-weight:700; text-align:right}
.contrib .v.plus{color:var(--turf-700)}
.contrib .v.minus{color:var(--minus)}
.contrib .v.na{color:var(--ink-faint); font-weight:500}
.why .cover{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px}
.why .cover-why{margin-top:7px; font-size:var(--fs-min); color:var(--ink-faint); line-height:1.7}
.why .plain{margin-top:10px; font-size:.78rem; line-height:1.7; background:var(--turf-100);
  border-radius:var(--r-md); padding:10px 12px}
.why .score-line{margin-top:10px; font-size:var(--fs-min); color:var(--ink-soft)}

.demo-strip{margin-top:14px; display:flex; gap:10px; align-items:center}
.demo-btn{flex:1; padding:12px; min-height:var(--tap); font-size:.85rem; font-weight:700;
  font-family:inherit; color:var(--turf-700); background:#fff; border:1.5px dashed var(--turf-500);
  border-radius:var(--r-md); cursor:pointer}
.demo-btn:disabled{color:var(--ink-faint); border-color:var(--line); cursor:default}
.disclaimer{margin-top:14px; text-align:center}

/* toast */
.toast{position:fixed; left:50%; bottom:96px; transform:translate(-50%, 24px); max-width:380px;
  width:calc(100% - 40px); background:var(--turf-900); color:#F2F6EF; border-radius:var(--r-md);
  padding:13px 16px; font-size:.82rem; line-height:1.55; box-shadow:0 10px 30px rgba(10,40,25,.35);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:60}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast b{color:var(--gold-bright)}

/* 凡例モーダル (§7 自信度の説明) */
.legend{position:fixed; inset:0; background:rgba(15,35,25,.5); display:none;
  align-items:center; justify-content:center; z-index:70; padding:24px}
.legend.show{display:flex}
.legend .box{background:var(--card); border-radius:var(--r-lg); padding:18px; max-width:340px; width:100%}
.legend .box h3{font-size:.95rem; font-weight:700}
.legend .box p{margin-top:10px; font-size:.8rem; line-height:1.8; color:var(--ink-soft)}
.legend .box button{margin-top:16px; width:100%; padding:12px; min-height:var(--tap);
  font-family:inherit; font-size:.9rem; font-weight:700; color:#fff; background:var(--turf-700);
  border:none; border-radius:var(--r-md); cursor:pointer}

/* ---------- リーダーボード ---------- */
.board-hero{padding:16px; background:var(--turf-900); border-radius:var(--r-lg); color:#F2F6EF}
.board-hero .h{font-weight:800; font-size:1.05rem; letter-spacing:.04em}
.board-hero .s{font-size:var(--fs-min); color:#9DB8A8; margin-top:4px}
.board{margin-top:12px}
.brow{display:flex; align-items:center; gap:12px; padding:13px 14px; min-height:var(--tap);
  background:var(--card); border-bottom:1px solid var(--line-soft)}
.brow:last-child{border-bottom:none}
.brow .rank{font-weight:800; font-size:1.15rem; width:30px; text-align:center; color:var(--ink-faint)}
.brow.top .rank{color:var(--gold-text)}
/* ベースラインは背景色を変え、順位数字を出さない (§5) */
.brow.baseline{background:var(--turf-100)}
.brow .who{flex:1; min-width:0}
.brow .aname{font-weight:700; font-size:.92rem}
.brow .astat{font-size:var(--fs-min); color:var(--ink-faint); margin-top:3px}
.brow .hits{text-align:right}
.brow .hits .n{font-weight:800; font-size:1.2rem}
.brow.top .hits .n{color:var(--gold-text)}
.brow .hits .l{font-size:var(--fs-min); color:var(--ink-faint)}

/* ---------- tab bar ---------- */
nav.tabs{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
  background:#fff; border-top:1px solid var(--line); display:flex; z-index:40;
  padding-bottom:env(safe-area-inset-bottom)}
/* C-6: 漢字1文字のアイコンをやめラベルのみ。色はコントラスト確保のため ink-soft */
nav.tabs button{flex:1; padding:8px 0; min-height:52px; background:none; border:none; font-family:inherit;
  cursor:pointer; font-size:.82rem; color:var(--ink-soft); display:flex;
  align-items:center; justify-content:center}
nav.tabs button.on{color:var(--turf-700); font-weight:700}
nav.tabs button.on::before{content:''; position:absolute; top:0; width:2.6em; height:3px;
  border-radius:0 0 3px 3px; background:var(--turf-700)}
nav.tabs button{position:relative}
nav.tabs button:focus-visible{outline:2px solid var(--turf-500); outline-offset:-2px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}