/* ============================================================================
theme.css ── 台帳ドシエ様式・共有デザイントークン（本設計フェーズ B1 / 2026-07-09）
★アートディレクター実行仕様の集約＝「1回書いて全画面に効く定額投資」。全画面がこれ1枚を する。
正典＝memory breeding-game-design-phase / jikumasensei-visual-direction。
原則：硬派高級・キャラ絵ゼロ・箱/影なし金の細罫1本・数値は等幅右揃え・金は儀式だけに配給。
============================================================================ */
/* ── 書体（セルフホスト予定・今は system fallback が効く。woff2取得後に @font-face を有効化） ──
★推奨：見出し=Shippori Mincho(OFL) / 英字=EB Garamond / 数値=IBM Plex Mono(tnum)。
下の src は assets/fonts/ に woff2 を置いたら差し替える（今は無いので system stack にフォールバック）。
@font-face{ font-family:"Shippori Mincho"; src:url("assets/fonts/ShipporiMincho.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("assets/fonts/IBMPlexMono.woff2") format("woff2"); font-display:swap; }
*/
:root{
/* 色（意味を持たせる・装飾で足さない） */
--bg0:#0b0b0d; --bg1:#111116; --panel:#131318; --panel2:#17171f; /* 地→持ち上げ */
--ink:#e9e6dd; --ink2:#a6a89e; --ink3:#6d6f66; /* 本文→副次→最弱/注釈 */
--white:#ffffff; /* 最上位1語だけ（馬名/1着/勝利） */
--gold:#b79a5b; --gold2:#c9b27e; --silver:#9aa0a8; /* 構造の金→文字の金 */
--good:#7fc8a0; --warn:#d8a15a; --bad:#e07a7a; /* 状態色＝面で塗らず1語/細点まで */
/* ★--bad は .rfacts .bad / .disc .dv b.bad が参照しているのに、正典で未定義だった（2026-07-10 に追加）。
stable/foal がローカル :root で握っていたため、その2画面でしか色が効いていなかった。 */
--line:#22242a; --line2:#2e3138; /* 通常罫→構造罫 */
--gold-rule:rgba(183,154,91,.32); /* 章の極細金罫 */
/* 書体（3書体・役割固定。self-host名を先頭に置き、取得後に自動昇格） */
--serif:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif; /* 見出し・馬名・儀式 */
--goth:"Yu Gothic UI","Yu Gothic","Meiryo",sans-serif; /* 本文・ラベル・説明 */
--mono:"IBM Plex Mono","Consolas","SFMono-Regular",ui-monospace,monospace; /* 全ての数値・英字副題 */
/* タイポスケール（PC基準・1.25階梯） */
--fs-ritual:30px; /* 儀式見出し（馬名・勝利） 26–34 */
--fs-h:15px; /* 章見出し 14–15 */
--fs-sub:9px; /* 英字副題(ABILITY) */
--fs-data:22px; /* データ大（着順・回顧の値） */
--fs-body:12px; /* 本文・データ行 */
--fs-label:10px; /* ラベル（距離/母父）＝最小の底 */
/* 余白 */
--pad-x:26px; --pad-y:16px; --gap:12px; --sect-pad:22px;
--header-h:50px; --nav-h:56px;
}
/* ── 台帳の地（アプリシェル）＝スクロールは中身の器だけ ── */
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
background:var(--bg0); color:var(--ink);
font-family:var(--goth); font-size:var(--fs-body); line-height:1.5;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.app{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.app > .scroll{ flex:1; overflow-y:auto; padding:var(--pad-y) var(--pad-x); }
/* ── 数値は例外なく等幅・右揃え・桁揃え（台帳の格の背骨） ── */
.num,.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1,"palt" 1; }
.num-r{ font-family:var(--mono); font-feature-settings:"tnum" 1; text-align:right; }
/* ── 章見出し（明朝・字間広） ＋ mono英字副題 ＋ 金の極細章罫 ── */
.chapter{ display:flex; align-items:baseline; gap:12px; margin:0 0 8px; }
.chapter h2,.chapter .t{ font-family:var(--serif); font-size:var(--fs-h); letter-spacing:.18em; font-weight:600; color:var(--ink); margin:0; }
.chapter .en{ font-family:var(--mono); font-size:var(--fs-sub); letter-spacing:.20em; color:var(--ink3); text-transform:uppercase; }
.chapter .tag{ margin-left:auto; }
.section{ border-top:1px solid var(--gold-rule); padding-top:var(--sect-pad); margin-top:var(--sect-pad); }
.section:first-child{ border-top:0; margin-top:0; }
/* 儀式見出し（馬名・勝利＝明朝大・最上位は純白） */
.ritual{ font-family:var(--serif); font-size:var(--fs-ritual); letter-spacing:.05em; color:var(--white); font-weight:600; }
/* ── 箱を作らない（.card脱箱化＝正典）。区切りは金の章罫1本だけ ── */
.card{ background:transparent; border:0; box-shadow:none; padding:0; }
/* ── データ行（台帳本文＝禁欲的にインク＋細罫） ── */
.row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:0; }
.row .k{ color:var(--ink2); font-size:var(--fs-label); letter-spacing:.04em; }
.row .v{ margin-left:auto; }
/* データ台帳テーブル（条件別戦績・着順表＝数値は全て等幅右揃え） */
.ledger{ width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.ledger th{ font-family:var(--mono); font-size:var(--fs-sub); letter-spacing:.14em; color:var(--ink3); text-align:right; font-weight:400; padding:2px 8px; text-transform:uppercase; }
.ledger th:first-child{ text-align:left; }
.ledger td{ padding:6px 8px; border-bottom:1px solid var(--line); }
.ledger td.name{ font-family:var(--goth); color:var(--ink); }
.ledger td.n{ font-family:var(--mono); font-feature-settings:"tnum" 1; text-align:right; color:var(--ink); }
.ledger tr.me td{ background:rgba(183,154,91,.06); } /* 自馬＝淡背景 */
.ledger tr.me td:first-child{ box-shadow:inset 2px 0 0 var(--gold); }/* 自馬＝金の左罫 */
/* ── 能力バー（三層：現在値/調教で届く/推定バンド／GⅠ線） ── */
.stat{ padding:5px 0; }
.stat .top{ display:flex; justify-content:space-between; align-items:baseline; }
.stat .top .k{ color:var(--ink2); }
.stat .top .g{ font-family:var(--mono); color:var(--gold2); } /* 等級レンジ B〜A（現役は数値を出さない） */
.bar{ position:relative; height:9px; margin-top:4px; background:var(--line); border-radius:2px; overflow:hidden; }
.bar .cur{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#8a7440,var(--gold2)); } /* 現在値=金グラデ */
.bar .cap{ position:absolute; top:-1px; bottom:-1px; width:2px; background:var(--gold); } /* 調教上限=2px金線 */
.bar .band{ position:absolute; top:0; bottom:0; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(233,230,221,.14) 3px 4px); } /* 推定バンド=破線ハッチ */
.bar .gi{ position:absolute; top:-2px; bottom:-2px; width:0; border-left:1px dashed var(--silver); } /* GⅠ級ライン */
/* ── バッジ（クラス/等級＝明朝・金縁・背景ほぼ透明） ── */
.badge{ font-family:var(--serif); font-size:var(--fs-label); letter-spacing:.06em; color:var(--gold2);
border:1px solid var(--gold-rule); border-radius:3px; padding:2px 8px; background:rgba(183,154,91,.05); }
/* 勝利バッジ＝儀式なので豪華OK（金縁＋暗金グラデ＋淡グロー） */
.badge.win{ color:var(--white); border-color:var(--gold); background:linear-gradient(180deg,rgba(183,154,91,.28),rgba(183,154,91,.08));
box-shadow:0 0 14px rgba(183,154,91,.22); }
/* 状態バッジ（次の一手＝中立な事実・煽らない） */
.state{ font-family:var(--goth); font-size:var(--fs-label); color:var(--ink2); }
.state.warn{ color:var(--warn); } /* 故障休養など制約＝機能としての状態色 */
/* チップ（細罫・mono小ラベル＋goth値） */
.chip{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line2); border-radius:3px; padding:3px 8px; font-size:var(--fs-label); color:var(--ink2); }
.chip b{ color:var(--ink); font-weight:600; }
/* 系統色細帯（血統表セル左3px＝彩度の逃し場） */
.sysbar{ display:inline-block; width:3px; align-self:stretch; border-radius:1px; }
/* ── ボタン（1画面に金の実体は1つだけ） ── */
button,.btn{ font-family:var(--goth); font-size:var(--fs-body); cursor:pointer; border-radius:4px; padding:9px 16px;
border:1px solid var(--line2); background:transparent; color:var(--ink2); letter-spacing:.02em; transition:border-color .15s,color .15s; }
button:hover,.btn:hover{ border-color:var(--gold-rule); color:var(--ink); }
/* 決断（種付け/出走/挑戦）＝明朝・金グラデ地・黒文字＝1画面1つだけ */
.btn-do{ font-family:var(--serif); letter-spacing:.12em; color:#111; border:0;
background:linear-gradient(180deg,var(--gold2),#9a7f47); }
.btn-do:hover{ color:#111; background:linear-gradient(180deg,#d8c393,#a98d50); }
/* ── 証明書ジュエル（唯一の"上等な紙"＝金縁＋淡グロー。例外的に枠を許す） ── */
.certificate{ border:1px solid var(--gold); border-radius:6px; padding:16px 18px;
background:radial-gradient(120% 140% at 50% 0,rgba(183,154,91,.10),rgba(11,11,13,.4));
box-shadow:0 0 24px rgba(183,154,91,.10); }
.certificate .cert-h{ font-family:var(--serif); letter-spacing:.35em; text-align:center; color:var(--gold2); font-size:var(--fs-h); }
/* ── ヴィネット（硬派の光・定額の1枚） ── */
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
background:radial-gradient(130% 100% at 50% 0,transparent 55%,rgba(0,0,0,.45) 100%); }
/* ── 補助 ── */
.dim{ color:var(--ink3); }
.muted{ color:var(--ink2); }
.gold{ color:var(--gold2); }
.hidden{ display:none; }
/* ============================================================================
★ビジュアル基盤 v2（2026-07-09）
オーナー指示：「テキストベースでなくビジュアルベース」＝既存の競馬・育成ゲームのように
"目で見てわかる" 情報設計。ステ/適性/状態を文字と数字の表でなく、色付きゲージ・適性グリッド・
アイコン・視覚的血統表・空間配置で。硬派高級の色味は維持。キャラ絵/ガチャ演出/SSS語彙は入れない。
★モバイルファースト：既定値がスマホ縦(390-430px)。PCは min-width:900px で広げる。
============================================================================ */
/* ── モバイル既定（PCの余白をそのまま持ち込まない） ── */
:root{
--pad-x:14px; --pad-y:12px; --sect-pad:16px;
--fs-ritual:22px; --fs-h:13px; --fs-data:18px;
--tap:44px; /* 指のタップ最小 */
/* 評価の色（適性◎○△×・状態）＝彩度は低く、意味だけを持たせる */
--ev3:#c9b27e; --ev3-bg:rgba(183,154,91,.26); /* ◎ 得意 */
--ev2:#b9b39c; --ev2-bg:rgba(183,154,91,.10); /* ○ こなす */
--ev1:#7f8078; --ev1-bg:transparent; /* △ 割引 */
--ev0:#8a5f5f; --ev0-bg:rgba(160,80,80,.10); /* × 不向き */
--turf:#6f9f57; --dirt:#8a6039; /* 芝／ダート */
}
@media (min-width:900px){
:root{ --pad-x:26px; --pad-y:16px; --sect-pad:22px; --fs-ritual:30px; --fs-h:15px; --fs-data:22px; }
}
img,canvas,svg{ max-width:100%; }
.scrollx{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scrollx::-webkit-scrollbar{ height:4px; }
.scrollx::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:2px; }
/* ── 馬カード（一覧・ハブ）：肖像＋名＋事実。文字表でなく"個体が並ぶ"見え方 ── */
.hcard{ display:flex; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
/* 一覧の肖像は横長（馬体は横に長い。正方形だと馬が小さくなり読めない）
※背景は .env-* が持つ。ここで background を書くと環境色を上書きしてしまう（詳細度が勝つため） */
.hcard .por{ width:84px; height:58px; flex:none; border-radius:6px; overflow:hidden; border:1px solid var(--line2); }
.hcard .por:not([class*="env-"]){ background:radial-gradient(120% 130% at 50% 10%,#20180f,#0c0a10); }
.hcard .por canvas,.hcard .por img{ width:100%; height:100%; display:block; }
.hcard .body{ flex:1; min-width:0; }
.hcard .nm{ font-family:var(--serif); font-size:15px; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hcard .sub{ font-size:10px; color:var(--ink3); margin-top:2px; }
.hcard .tail{ margin-left:auto; text-align:right; flex:none; }
/* 状態ドット（走れる/休養/故障）＝面で塗らず点で */
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink3); }
.dot.ok{ background:var(--good); } .dot.rest{ background:var(--warn); } .dot.hurt{ background:#e07a7a; }
/* ── 等級バッジ（1文字＋±。数値は出さない） ── */
.gr{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 5px;
font-family:var(--serif); font-size:14px; color:var(--gold2);
border:1px solid var(--gold-rule); border-radius:3px; background:rgba(183,154,91,.06); }
.gr.unknown{ color:var(--ink3); border-style:dashed; } /* ?? ＝未判明（既存作準拠） */
.gr.big{ min-width:38px; height:30px; font-size:17px; }
/* ── 能力ゲージ（ビジュアルの主役）：ラベル｜バー｜等級 の3カラム ── */
.gauges{ display:flex; flex-direction:column; gap:9px; }
.gauge{ display:grid; grid-template-columns:34px 1fr 52px; align-items:center; gap:9px; }
.gauge .k{ font-size:12px; color:var(--ink2); }
.gauge .g{ font-family:var(--mono); font-size:11px; color:var(--gold2); text-align:right; }
.gauge .track{ position:relative; height:12px; background:#181820; border-radius:6px; overflow:hidden; }
.gauge .fill{ position:absolute; inset:0 auto 0 0; border-radius:6px; background:linear-gradient(90deg,#7a5f30,var(--gold2)); }
.gauge .hatch{ position:absolute; top:0; bottom:0; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(233,230,221,.15) 3px 4px); }
.gauge .lid{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--gold); } /* 調教の蓋 */
.gauge.state .fill{ background:linear-gradient(90deg,#4c5a44,#8fae7c); } /* 体力 */
.gauge.state.low .fill{ background:linear-gradient(90deg,#5f4a2a,var(--warn)); }
/* ============================================================================
★馬のいる場所にだけ色を入れる（2026-07-09 オーナー指摘「全体的に黒基調で暗い。
せめて馬のオブジェエリアだけでも色がほしい」）。
UI（台帳・数値・罫）は暗いまま締める。色は"馬がいる矩形"の中だけに配給する。
3Dパネルだけ色を持たせ、周囲のUIは無彩色にする。
使い方：
============================================================================ */
.env-paddock, .env-dusk, .env-barn{ position:relative; }
/* 昼の放牧地：緑。最も"競馬"に見える。既定 */
.env-paddock{ background:
linear-gradient(180deg, #37443c 0%, #3f4d3c 44%, #4a5637 52%, #2b3120 100%); }
/* 夕景：暖色。硬派高級と相性がよく、金の罫と喧嘩しない */
.env-dusk{ background:
linear-gradient(180deg, #2b2622 0%, #4b3826 42%, #6d4c2c 52%, #241a12 100%); }
/* 厩舎の中：木とランプ。落ち着くが色数は少ない */
.env-barn{ background:
linear-gradient(180deg, #241d16 0%, #35281b 58%, #1a140e 100%); }
/* 地平線の細い光と、四隅を締めるヴィネット（色を入れても品を落とさないための2枚） */
.env-paddock::before, .env-dusk::before, .env-barn::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 80% at 50% 46%, rgba(255,236,200,.10), transparent 62%); }
.env-paddock::after, .env-dusk::after, .env-barn::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(115% 100% at 50% 30%, transparent 48%, rgba(0,0,0,.45) 100%); }
.env-paddock canvas, .env-dusk canvas, .env-barn canvas{ position:relative; z-index:1; }
/* ── 状態帯（闘志/調子/疲労）＝能力ではない。肖像の下・常時表示（既存作の構成を参考）。
能力セクションに混ぜない。ターンで動く一時状態であって永続ステではない。 ── */
.statebar{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.st-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:3px;
font-size:10px; color:var(--ink2); border:1px solid var(--line2); background:#15151b; }
.st-chip b{ font-weight:400; color:var(--ink); }
.st-chip.up{ border-color:rgba(127,200,160,.4); color:var(--good); }
.st-chip.down{ border-color:rgba(224,122,122,.4); color:#e07a7a; }
.st-chip.mid{ border-color:var(--gold-rule); color:var(--gold2); }
/* ── 着別度数（1着-2着-3着-着外）＝競馬の標準表記。「6戦4勝」でなくこれを出す ── */
.rec{ font-family:var(--mono); font-feature-settings:"tnum" 1; font-size:12px; color:var(--ink); letter-spacing:.02em; }
.rec .w{ color:var(--gold2); }
.rec-row{ display:flex; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:11px; }
.rec-row .k{ color:var(--ink3); width:74px; flex:none; }
/* ── 馬場状態ゲージ（軽 ■■■□□□□□ 重）＝馬場状態を段階ゲージで示す一般的な形 ── */
.going{ display:flex; align-items:center; gap:5px; font-size:9px; color:var(--ink3); }
.going .cells{ display:flex; gap:2px; }
.going i{ width:9px; height:11px; border-radius:1px; background:#1c1c24; border:1px solid var(--line); }
.going i.on{ background:var(--turf); border-color:transparent; }
.going i.on.dirt{ background:var(--dirt); }
/* ── 脚質（大逃/逃/先/差/追）＝5段のうち該当をハイライト ── */
.styles{ display:flex; gap:3px; }
.styles span{ flex:1; text-align:center; padding:4px 0; font-size:10px; border-radius:3px;
border:1px solid var(--line); background:#141419; color:var(--ink3); }
.styles span.on{ border-color:var(--gold); color:var(--gold2); background:rgba(183,154,91,.16); }
/* ── スキル枠（未獲得は空枠を見せる＝可能性の形だけ示し中身は伏せる。既存作の構成を参考） ── */
.slots{ display:flex; gap:5px; flex-wrap:wrap; }
.slots .sl{ flex:1; min-width:62px; text-align:center; padding:6px 4px; font-size:10px; border-radius:3px;
border:1px dashed var(--line2); color:var(--ink3); background:#131318; }
.slots .sl.has{ border-style:solid; border-color:var(--gold-rule); color:var(--gold2); background:rgba(183,154,91,.06); }
/* ── クロス（奇跡の血量）のチップ ── */
.chip.cx{ border-color:var(--gold-rule); color:var(--gold2); font-family:var(--mono); font-size:9.5px; }
/* ── 適性グリッド（距離4 × 芝ダ2）：◎○△× を色マスで。表でなくマトリクス
※距離適性は数値レンジ、馬場適性は芝ダ◎×＋馬場状態ゲージで示す。
うちは"走った条件の事実から読ませる"設計なのでマトリクスを併用する（発明でなく用途が違う）。 ── */
.aptgrid{ display:grid; grid-template-columns:34px repeat(4,1fr); gap:4px; align-items:center; }
.aptgrid .hd{ font-size:9px; color:var(--ink3); text-align:center; }
.aptgrid .rk{ font-size:10px; color:var(--ink3); }
.ac{ height:32px; display:flex; flex-direction:column; align-items:center; justify-content:center;
border:1px solid var(--line); border-radius:4px; background:#141419; font-size:13px; color:var(--ev1); line-height:1; }
.ac small{ font-size:8px; color:var(--ink3); margin-top:2px; }
.ac.e3{ color:var(--ev3); border-color:var(--gold); background:var(--ev3-bg); }
.ac.e2{ color:var(--ev2); border-color:var(--gold-rule); background:var(--ev2-bg); }
.ac.e1{ color:var(--ev1); }
.ac.e0{ color:var(--ev0); border-color:rgba(160,80,80,.35); background:var(--ev0-bg); }
.ac.na{ color:var(--ink3); border-style:dashed; }
/* ── 芝/ダートの識別（凡例・バー） ── */
.lgd{ display:flex; gap:12px; font-size:9px; color:var(--ink3); }
.lgd i{ display:inline-block; width:9px; height:9px; margin-right:4px; vertical-align:-1px; border-radius:1px; }
.lgd i.turf{ background:var(--turf); } .lgd i.dirt{ background:var(--dirt); }
/* ── 距離別の勝利グラフ（産駒傾向・条件別戦績） ── */
.bars{ display:flex; align-items:flex-end; gap:6px; height:92px; border-bottom:1px solid var(--line2); }
.bars .col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; height:100%; }
.bars .n{ font-family:var(--mono); font-size:9px; color:var(--ink3); }
.bars .stack{ width:24px; display:flex; flex-direction:column-reverse; border-radius:2px 2px 0 0; overflow:hidden; }
.bars .stack .t{ background:var(--turf); } .bars .stack .d{ background:var(--dirt); }
.barx{ display:flex; gap:6px; margin-top:5px; } .barx span{ flex:1; text-align:center; font-size:9px; color:var(--ink3); }
/* ── 5代血統表（横スクロール・クロスは金でハイライト） ── */
.ped5{ display:grid; grid-template-columns:104px 96px 92px 88px 84px; grid-template-rows:repeat(32,17px); gap:2px; width:max-content; }
.pcell{ display:flex; align-items:center; padding:0 5px; border-radius:2px; font-size:9px; line-height:1.2;
border:1px solid var(--line2); background:#15151b; color:var(--ink2); overflow:hidden; }
.pcell span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcell.g1{ font-family:var(--serif); font-size:12px; } .pcell.g1 span{ white-space:normal; text-overflow:clip; }
.pcell.sire{ border-left:2px solid var(--gold); color:var(--ink); }
.pcell.dam{ border-left:2px solid #8a6f96; color:var(--ink); }
.pcell.cross{ background:linear-gradient(90deg,rgba(183,154,91,.20),#15151b 70%); border-color:var(--gold-rule); color:var(--gold2); }
.pcell.empty{ border-style:dashed; color:var(--ink3); }
/* ── 下部タブナビ（ハブ。指が届く場所に置く）
★アイコンは必ず単色の線画SVG（stroke:currentColor）。絵文字は使わない＝カラフルで漫画的になり
「硬派高級・キャラ絵ゼロ」の方向と矛盾する。 */
.tabnav{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
background:#0e0e12; border-top:1px solid var(--line2); }
.tabnav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
text-decoration:none; color:var(--ink3); font-size:9.5px; letter-spacing:.06em; }
.tabnav a svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.tabnav a.on{ color:var(--gold2); box-shadow:inset 0 2px 0 var(--gold); }
.has-tabnav{ padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
/* ── 主行動ボタン（画面下・親指の届く帯。金の実体は1画面に1つ） ── */
.actbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:460px; z-index:25;
display:flex; gap:10px; padding:10px var(--pad-x) calc(10px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(11,11,13,0),var(--bg0) 34%); }
.actbar button{ flex:1; min-height:var(--tap); border-radius:12px; }
/* ── 空状態（理由を足さない。事実で終える） ── */
.empty{ font-size:11px; color:var(--ink3); padding:22px 0; text-align:center; }
/* ============================================================================
★週送り（1行動 → 結果 → 次の週）
連打で即進むのを構造的に不能にする。行動した瞬間にロックし、この画面を挟む。
ボタンを押して初めて次の週の盤面が出る。＝1つの決定に重みを持たせる。
★クライアントのロックは「安全機構」ではなく「体験」。安全はサーバのターン番号(seq)が担う。
============================================================================ */
.weekcard{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
background:rgba(8,8,10,.86); backdrop-filter:blur(2px); }
.weekcard.on{ display:flex; }
.weekcard .inner{ width:min(400px,90vw); border:1px solid var(--gold-rule); border-radius:10px;
background:linear-gradient(180deg,#17150f,#0e0e12); padding:22px 22px 18px; text-align:center;
box-shadow:0 0 40px rgba(0,0,0,.6); }
.weekcard .cal{ font-family:var(--mono); font-size:11px; color:var(--ink3); letter-spacing:.14em; }
.weekcard .arrow{ font-family:var(--mono); font-size:11px; color:var(--gold2); margin:0 8px; }
.weekcard .act{ font-family:var(--serif); font-size:19px; color:var(--white); margin:14px 0 6px; letter-spacing:.04em; }
.weekcard .detail{ font-size:12px; color:var(--ink2); line-height:1.9; }
.weekcard .detail b{ color:var(--gold2); font-weight:400; }
.weekcard .detail .bad{ color:#e07a7a; }
.weekcard .delta{ display:flex; justify-content:center; gap:14px; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--ink3); }
.weekcard .delta .up{ color:var(--good); } .weekcard .delta .down{ color:var(--warn); }
.weekcard .rule{ height:1px; background:var(--gold-rule); margin:16px 0 14px; }
.weekcard button{ width:100%; min-height:var(--tap); }
/* ★近況＝引退を考えるときの事実（結論も勧めも書かない。数字が語る） */
.facts{ margin:0 0 12px; padding:10px 12px; border:1px solid var(--gold-rule); border-radius:6px; background:rgba(255,255,255,.02); }
.facts .fr{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:4px 0; font-size:13px; }
.facts .fr + .fr{ border-top:1px solid rgba(255,255,255,.05); }
.facts .fk{ color:var(--ink3); letter-spacing:.04em; white-space:nowrap; }
.facts .fv{ color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.facts .fv b{ color:var(--gold); font-weight:600; }
.facts .call{ margin-top:8px; padding-top:8px; border-top:1px solid var(--gold-rule); color:var(--gold); font-size:13px; }
/* ★血の事実（breed）。結論も予言も置かない行の並び */
.factrows{ border:1px solid var(--gold-rule); border-radius:6px; padding:4px 14px; margin-bottom:14px; }
.factrows .fr{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; font-size:13px; }
.factrows .fr + .fr{ border-top:1px solid rgba(255,255,255,.05); }
.factrows .fk{ color:var(--ink3); letter-spacing:.1em; white-space:nowrap; }
.factrows .fv{ color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.factrows .fv em.mir{ font-style:normal; color:var(--gold); }
/* セーブデータ */
.saverow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.saverow button, .saverow .filebtn{ font:inherit; font-size:13px; padding:8px 16px; border-radius:6px; cursor:pointer;
background:transparent; border:1px solid var(--gold-rule); color:var(--ink); letter-spacing:.06em; }
.saverow button:hover, .saverow .filebtn:hover{ border-color:var(--gold); color:var(--gold); }
.saverow .savemsg{ font-size:12px; color:var(--ink3); }
/* 出走レース＝条件戦 / 重賞 の見出し */
.proghead{ margin:14px 0 8px; font-family:var(--serif); letter-spacing:.22em; color:var(--gold2); font-size:13px;
border-bottom:1px solid var(--gold-rule); padding-bottom:6px; }
.proghead .sub{ font-family:var(--mono); font-size:11px; color:var(--ink3); letter-spacing:.06em; margin-left:8px; }
.dest .dl .gr{ display:inline-block; margin-right:8px; padding:1px 7px; border-radius:3px; font-size:11px;
border:1px solid var(--gold-rule); color:var(--gold2); }
.dest .dl .gr.G1{ background:linear-gradient(180deg,#2a2410,#161109); color:var(--gold); border-color:var(--gold); }
/* 番組表：いまの半月 */
.race.now{ box-shadow:inset 3px 0 0 var(--gold); }
.nowtag{ font-family:var(--mono); font-size:10px; color:#12100a; background:var(--gold);
border-radius:2px; padding:1px 5px; margin-right:7px; letter-spacing:.08em; }
/* 出走レース：その条件で実際にどう走ったか（事実） */
.dest .dp{ margin-top:5px; font-family:var(--mono); font-size:11px; color:var(--gold2); letter-spacing:.04em; }
/* レース結果＝起きた事実だけ */
.rfacts{ text-align:left; margin:2px 0 4px; }
.rfacts .rf{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0; font-size:13px; }
.rfacts .rf + .rf{ border-top:1px solid rgba(255,255,255,.06); }
.rfacts .rk{ color:var(--ink3); letter-spacing:.1em; white-space:nowrap; }
.rfacts .rv{ color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.rfacts .rv b{ color:var(--gold); }
.rfacts .bad{ color:var(--bad); }
/* 引退＝全開示 */
.disc{ border:1px solid var(--gold-rule); border-radius:6px; padding:6px 16px 12px; margin:14px 0; }
.disc .dh{ font-family:var(--serif); letter-spacing:.22em; color:var(--gold2); font-size:12px;
margin:12px 0 4px; padding-bottom:5px; border-bottom:1px solid rgba(183,154,91,.28); }
.disc .dr{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:6px 0; }
.disc .dr + .dr{ border-top:1px solid rgba(255,255,255,.05); }
.disc .dk{ font-family:var(--mono); font-size:12px; color:var(--ink3); letter-spacing:.06em; white-space:nowrap; }
.disc .dv{ text-align:right; font-family:var(--serif); font-size:16px; color:#fff; }
.disc .dv b{ color:var(--gold); }
.disc .dv .num{ font-family:var(--mono); font-size:12px; color:var(--ink2); margin-left:8px; }
.disc .dv .peak{ font-family:var(--mono); font-size:11px; color:var(--ink3); margin-left:10px; }
.disc .dv b.bad{ color:var(--bad); }
/* 出馬表：このレースに出てくる馬 */
.dest .db{ margin-top:5px; font-size:12px; color:var(--gold); letter-spacing:.06em; }
/* エキシビションの条件 */
.conds{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 14px; }
.conds .cl{ font-family:var(--mono); font-size:10px; color:var(--ink3); letter-spacing:.1em; margin-right:2px; }
.conds .cl + .cl{ margin-left:12px; }
.conds .c{ font:inherit; font-size:12px; padding:5px 12px; border-radius:4px; cursor:pointer;
background:transparent; border:1px solid var(--line2); color:var(--ink2); }
.conds .c.on{ border-color:var(--gold); color:var(--gold); background:linear-gradient(180deg,#221d0e,#141013); }
/* ★指が届く最小のタップ領域。スマホが主なので全ボタンに既定で効かせる。
2026-07-10 実測：market 8個・hall 6個・ranch 1個のボタンが 40px 未満だった。
タブナビ()と、意図的に小さい閉じるボタンは対象外にしない＝一律で底上げする。 */
button{ min-height:var(--tap); }
button:active{ transform:translateY(1px); }
/* ============================================================
ブランド（マーク＋ワードマーク）
★正典は ranch.js の MARK_SVG / mountBrand()。HTMLは空の .brand を置くだけ。
★マーク＝血統表の構造。1本の線が2本に割れて、また割れる（3代）。
ロゴを画像にしない理由：16pxのファビコンで潰れる／色替えができない／
文字とベースラインが揃わない。線と面でできたものは、線で描く。
============================================================ */
.brand.gbrand{ display:flex; align-items:center; gap:10px; }
.gmark{ width:26px; height:26px; flex:0 0 auto; color:var(--gold); }
.gwm{ font-family:var(--serif); font-size:17px; letter-spacing:.16em; color:#fff; line-height:1; }
.gwm small{ display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:.34em;
color:var(--gold2); margin-top:4px; text-indent:.34em; }
@media (min-width:900px){ .gmark{ width:30px; height:30px } .gwm{ font-size:19px } }
/* ============================================================
レース選択：条件の読みを主役にする
★実測（scripts/spike_depth_axes.mjs）：このゲームの最大の深さは
「その馬が本当はどの距離・芝ダの馬かを読む」。外すとGⅠ勝率が3分の1。
★だから決断の画面では、その材料を散文にしない。桁を揃え、行と行を目で比べさせる。
「走っていない」と「走ったが悪かった」は、見た目で区別できなければならない。
============================================================ */
.dest .dl .cond{ font-family:var(--serif); font-size:15.5px; color:#fff; letter-spacing:.06em; }
.dest .dl .cls{ font-family:var(--mono); font-size:9.5px; color:var(--ink3); letter-spacing:.1em;
border:1px solid var(--line2); border-radius:2px; padding:2px 6px; margin-left:9px;
vertical-align:2px; }
/* 走った事実。3列固定＝行をまたいで数字が縦に揃う */
.dest .fx{ display:grid; grid-template-columns:1.15fr .95fr .9fr; gap:0;
margin-top:9px; padding-top:8px; border-top:1px solid rgba(154,160,168,.14);
font-family:var(--mono); font-size:12px; color:var(--gold2); }
.dest .fx span{ display:flex; flex-direction:column; gap:3px; }
.dest .fx i{ font-style:normal; font-size:9px; letter-spacing:.14em; color:var(--ink3); }
.dest .fx.none{ display:block; color:var(--ink3); font-family:var(--goth); font-size:11.5px; }
/* ============================================================
種牡馬の産駒成績（公開の事実）
★種付け料は「走った成績」だけで決まり、繁殖能力を語らない（実測 r=0.01）。
読むのは値札ではなくこの表。産駒が少ないほど数字は暴れる＝そこを見分けるのが本体。
★率は出さない。率は結論に近い。頭数と勝ち数だけを置き、割り算はプレイヤーがする。
============================================================ */
#progeny .pgrow{ display:flex; align-items:flex-start; gap:14px; padding:11px 0; }
#progeny .pgrow + .pgrow{ border-top:1px solid rgba(154,160,168,.12); }
#progeny .pglb{ width:74px; flex:0 0 auto; font-size:11px; color:var(--ink3); letter-spacing:.1em; padding-top:3px; }
#progeny .pgv{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:0; font-family:var(--mono); font-size:13px; color:var(--gold2); }
#progeny .pgv span{ display:flex; flex-direction:column; gap:4px; }
#progeny .pgv i{ font-style:normal; font-size:9px; letter-spacing:.12em; color:var(--ink3); }
#progeny .pgnone{ flex:1; font-size:11.5px; color:var(--ink3); padding-top:3px; }
/* 主な勝ち鞍（配合画面）。適性は言わない。勝ったレースの名前だけ置く。 */
#progeny .pgwins{ flex:1; font-size:12.5px; color:var(--gold2); line-height:1.7; padding-top:2px; }
#progeny .pgwins b{ color:#fff; }