/* ボートレース予測AI  画面のスタイル
   ダーク一色。スマホ430px / タブレット600px / パソコン760px、いずれも1列。
   艇の色は公式の艇番色（1白 2黒 3赤 4青 5黄 6緑）に合わせている。 */
/* 🔴 hidden 属性を必ず効かせる。ブラウザの既定は [hidden]{display:none} だが、
   `.betbar{display:grid}` のようなクラス指定のほうが優先順位が高く、
   **hidden を付けたのに見えたまま**になる。2026-09-09 に実際に踏んだ：
   過去日のページで2連単の券種バーが見えるのに押せなかった（データが無いため）。
   ここで一度だけ強く指定して、以後どの要素でも同じことが起きないようにする。 */
[hidden]{display:none !important}

/* 中止・順延。買い目より先に目に入る強さで出す */
.cancelbar{margin:14px 14px 0; padding:12px 14px; border-radius:10px;
  background:var(--loss); color:#1A0906; display:grid; gap:4px}
.cancelbar b{font-size:14px; font-weight:800}
.cancelbar span{font-size:12px; line-height:1.7}
.cancelbar span b{font-size:12px}
.cx{color:var(--loss); font-weight:800}
/* 全レース中止の場は、開催場一覧でも一目で分かるようにする */
.vg.cxv{opacity:.72}
.vg.cxv span{color:var(--loss); font-weight:700}

:root{
    color-scheme:dark;
    --ground:#070A0E; --surface:#131A23; --surface2:#1A232E; --sunk:#0E141B;
    --line:#222E3B; --line2:#1A242F;
    --ink:#EAF0F6; --ink2:#A7B5C4; --muted:#6B7A8A;
    --accent:#33D6A6; --accent-dim:#12352C;
    --urgent:#FFA23D; --urgent-dim:#3A2711;
    --loss:#FF6D5C;
    --b1:#FFFFFF; --b1i:#0B1016; --b2:#2A313A; --b2i:#FFFFFF;
    --b3:#E8402A; --b3i:#FFFFFF; --b4:#2B72DA; --b4i:#FFFFFF;
    --b5:#F0C22E; --b5i:#14181D; --b6:#33A85D; --b6i:#FFFFFF;
    /* 高級感のゴールド（2026-09-12 クライアント指定のパレット）。
       🔴 面積の大きいところは濃いほう（--gold-acc）に寄せる。
          メインの金 #D0A900 は**5号艇の黄 #F0C22E と近い**ので、
          艇番と見分けがつかなくなる。 */
    --gold:#D0A900; --gold-lt:#FFF9E6; --gold-acc:#C39000;
    --gold-line:#5A4610; --gold-edge:#6B5416; --gold-dim:#241B06; --gold-ink:#F0DCA0;
    /* 斜めの光沢。面（タブ）用と、小さなバッジ用で角度を変えてある */
    --gold-metal:linear-gradient(115deg,#B8860B 0%,#D0A900 20%,#FFF9E6 46%,
      #E6C255 60%,#C39000 100%);
    --gold-badge:linear-gradient(135deg,#A97C08,#D0A900 32%,#FFF9E6 54%,#C39000 100%);
  }
  *{box-sizing:border-box}
  body{background:var(--ground); color:var(--ink); margin:0;
    font-family:"Noto Sans JP",system-ui,sans-serif; font-size:14px; line-height:1.7;
    -webkit-font-smoothing:antialiased}
  .num{font-family:"Barlow Condensed","Barlow",sans-serif; font-variant-numeric:tabular-nums}
  h1,h2{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif}
  a{color:inherit; text-decoration:none}
  a[data-go]{cursor:pointer}

  /* 🔴 外枠は**金のグラデーション**。上下が暗く中央が明るい線を縦に繰り返す。
     ページの高さは可変なので、背景を720pxごとに繰り返して光沢の間隔を保つ
     （全高に引き伸ばすと、長いページでは光沢が消えて単色に見える）。 */
  .app{max-width:430px; margin:0 auto; background:var(--sunk); min-height:100vh;
    position:relative;
    border-left:1px solid transparent; border-right:1px solid transparent}
  .app::before,.app::after{content:""; position:absolute; top:0; bottom:0; width:1.5px;
    z-index:31; pointer-events:none;
    background-image:linear-gradient(180deg,rgba(195,144,0,.10),var(--gold) 22%,
      var(--gold-lt) 50%,var(--gold) 78%,rgba(195,144,0,.10));
    background-size:100% 720px; background-repeat:repeat-y}
  .app::before{left:0} .app::after{right:0}
  @media (min-width:600px){ .app{max-width:600px} }
  @media (min-width:1020px){ .app{max-width:760px} body{font-size:14.5px} }

  /* 🔴 ヘッダーは1行。スクロールしても戻る導線（パンくず）が常に見える。
     縦に積むと画面の12%を食って本文が読めなくなる */
  .bar{position:sticky; top:0; z-index:30; background:rgba(11,16,22,.94);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--gold-line);
    display:flex; align-items:center; gap:8px; padding:7px 12px;
    min-height:44px}
  /* 読み上げ用の見出し。画面には出さない（パンくずが現在地を示すため） */
  .vh{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}
  .back{width:26px; height:26px; border-radius:50%; background:var(--surface2);
    display:grid; place-items:center; color:var(--ink2); font-size:14px; flex:none}
  .bar h1{font-size:14.5px; font-weight:700; margin:0}
  /* ロゴ（Boat Master）。帯の高さ44pxに収める。画像は3倍の解像度で作ってある */
  .bar h1 .logo{display:block; height:30px; width:auto}
  .bar .r{font-family:"Barlow Condensed",sans-serif; font-size:19px; font-weight:700;
    color:var(--accent); margin-left:-4px}
  .cd{flex:none; margin-left:auto; display:flex; align-items:center; gap:4px;
    background:var(--urgent-dim); border:1px solid #4A3316; border-radius:999px;
    padding:3px 9px 3px 8px}
  .cd i{width:6px; height:6px; border-radius:50%; background:var(--urgent);
    animation:blink 1.4s infinite}
  @keyframes blink{50%{opacity:.25}}
  .cd b{font-family:"Barlow Condensed",sans-serif; font-size:15px; font-weight:600;
    color:var(--urgent); line-height:1}
  .cd span{font-size:10px; color:#C98B45}

  /* 🔴 戻る導線はここだけになった（左上の「‹」は廃止）。
     指で押せる大きさを確保する。11pxのままだと押しにくい */
  /* 🔴 唯一の戻る導線なので、指で押せる大きさは確保する（高さ28px）。
     1行に収めるため、狭い画面でははみ出さず横に流す */
  .crumb{display:flex; align-items:center; gap:3px; padding:0;
    font-size:12px; color:var(--ink2); line-height:1; min-width:0; flex:1;
    overflow-x:auto; scrollbar-width:none}
  .crumb::-webkit-scrollbar{display:none}
  .crumb a{flex:none; color:var(--accent); padding:7px 8px; border-radius:6px;
    background:var(--surface2); border:1px solid var(--gold-line);
    white-space:nowrap; text-decoration:none}
  .crumb .sep2{flex:none; color:var(--line)}
  .crumb>span:last-child{flex:none; padding:7px 2px; white-space:nowrap;
    font-weight:700; color:var(--ink)}
  .crumb span.sep2{color:var(--line)}


  /* 日付の移動バー ------------------------------------------------------- */
  .datebar{display:flex; align-items:center; gap:8px; margin:12px 14px 0;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:6px}
  .datebar .dnav{flex:none; font-size:12px; color:var(--ink2); padding:6px 10px;
    border-radius:7px; background:var(--surface2); border:1px solid var(--line)}
  .datebar .dnav.off{opacity:.32}
  .datebar .dpick{flex:1; display:flex; align-items:center; justify-content:center;
    gap:8px; position:relative; margin:0}
  .datebar .dlabel{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:17px;
    font-weight:600; letter-spacing:.02em; pointer-events:none}
  .datebar input[type=date]{position:absolute; inset:0; width:100%; height:100%;
    opacity:0; border:0; cursor:pointer; color-scheme:dark}
  .datebar .dpick::after{content:"📅"; font-size:12px; opacity:.65; pointer-events:none}

  .meta{display:flex; align-items:center; gap:7px; padding:12px 14px 0; flex-wrap:wrap}
  .tag{font-size:10.5px; padding:2px 8px; border-radius:3px; background:var(--surface2);
    color:var(--ink2); border:1px solid var(--gold-line)}
  .meta .nm{font-size:13px; color:var(--ink2)}

  .conf{display:flex; align-items:center; gap:12px; margin:12px 14px 0; padding:11px 14px;
    background:var(--accent-dim); border:1px solid #1D5748; border-radius:10px}
  .conf.c2{background:var(--surface2); border-color:var(--line)}
  /* 🔴 **Sのときだけ金**。以前は S と A が同じ見た目だったので、
     Sを見分けるクラスを足した。付け外しは web/static/race.js の markConf() にも
     同じものがある（券種を切り替えると書き替わる）。**直すときは両方。** */
  .conf.cs{background:var(--gold-dim); border-color:var(--gold-edge)}
  .conf.cs .rk{background-image:var(--gold-badge); color:#1A1300;
    box-shadow:inset 0 0 0 1px rgba(255,249,230,.45)}
  .conf.cs .tx b{color:var(--gold-lt)}
  .conf .rk{width:38px; height:38px; border-radius:9px; background:var(--accent);
    color:#08221C; display:grid; place-items:center; flex:none;
    font-family:"Barlow Condensed",sans-serif; font-size:24px; font-weight:700}
  .conf.c2 .rk{background:var(--muted); color:#0B1016}
  .conf .tx{line-height:1.55}
  .conf .tx b{display:block; font-size:13px; color:var(--accent); font-weight:700}
  .conf.c2 .tx b{color:var(--ink2)}
  .conf .tx span{font-size:11.5px; color:var(--ink2)}

  /* 🔴 **角丸のままグラデーションの枠線**にする。border-image を使うと角丸が
     消えるので、背景を2枚重ねて内側だけ塗り直している
     （外側＝border-box に金、内側＝padding-box に地色）。 */
  section{margin:16px 14px 0; border:1px solid transparent;
    border-radius:12px; overflow:hidden;
    background-color:var(--surface);
    background-image:linear-gradient(var(--surface),var(--surface)),
      linear-gradient(140deg,#6E5210,var(--gold-acc) 28%,var(--gold-lt) 50%,
        var(--gold) 68%,#6E5210);
    background-origin:border-box; background-clip:padding-box,border-box}
  .sh{display:flex; align-items:center; gap:8px; padding:12px 14px 0}
  .sh h2{font-size:13px; font-weight:700; margin:0}
  .sh .hint{margin-left:auto; font-size:10.5px; color:var(--muted)}

  /* 券種の帯。🔴 スマホで縦を食わないよう高さを抑える（モードの帯の約6割）。
     2連単のオッズが取れていないレースでは hidden で丸ごと消える。 */
  .betbar{display:grid; grid-template-columns:1fr 1fr; margin:16px 14px 0; gap:4px}
  .betbar button{font-family:inherit; font-size:12px; font-weight:700;
    color:var(--muted); background:var(--surface); border:1px solid var(--gold-line);
    border-radius:8px; padding:6px 4px; cursor:pointer; line-height:1.2}
  .betbar button.on{background-image:var(--gold-metal); border-color:#E8C24A;
    color:#1A1300; text-shadow:0 1px 0 rgba(255,255,255,.4)}
  .betbar button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  /* 券種の帯があるときは、モードの帯との間隔を詰める */
  .betbar + .modes{margin-top:6px}

  /* オッズ表のアコーディオン。開くまで場所を取らない */
  .acc details{border:0}
  .acc summary{display:flex; align-items:center; gap:8px; padding:12px 14px;
    cursor:pointer; list-style:none; font-size:13px; font-weight:700}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary::after{content:"▾"; margin-left:auto; color:var(--muted);
    font-size:11px; transition:transform .15s}
  .acc details[open] summary::after{transform:rotate(180deg)}
  .acc summary:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
  .acc .ac-n{font-size:10.5px; font-weight:400; color:var(--muted);
    border:1px solid var(--line); border-radius:4px; padding:1px 5px}
  .acc summary .hint{margin-left:0; font-size:10.5px; color:var(--muted)}
  .acc summary::after{order:9}

  /* 2連単オッズ。30通りなので6行×6列に収まる（横スクロールしない） */
  table.og2{border-collapse:collapse; width:100%; font-size:12px}
  table.og2 th,table.og2 td{border:1px solid var(--line); padding:5px 4px;
    text-align:center; white-space:nowrap}
  .og2-h{font-size:9.5px; color:var(--muted); font-weight:400}
  .og2-t{font-size:11px; width:14%}
  .og2-r{font-size:10.5px; text-align:left; padding-left:6px}
  .og2-x{background:var(--line2, rgba(128,128,128,.12))}
  .og2-o{font-variant-numeric:tabular-nums}
  .og2-o.best{background:var(--accent-dim); color:var(--accent); font-weight:700}

  .modes{display:grid; grid-template-columns:1fr 1fr; margin:16px 14px 0;
    background:var(--surface); border:1px solid var(--gold-line); border-radius:10px;
    overflow:hidden}
  .modes button{font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted);
    background:none; border:0; padding:11px 6px 10px; cursor:pointer; line-height:1.35}
  .modes button small{display:block; font-weight:400; font-size:10px; opacity:.8; margin-top:2px}
  .modes button.on{background:var(--gold-dim); color:var(--gold-ink);
    box-shadow:inset 0 -2px 0 var(--gold)}
  .modes button:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
  section.attached{margin-top:0; border-top-left-radius:0; border-top-right-radius:0}

  /* inline-grid にしないと表のセルで艇番と選手名が2行に割れる（実際に踏んだ）。 */
  .bn{width:29px; height:29px; border-radius:7px; display:inline-grid; place-items:center;
    vertical-align:-6px;
    font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:18px; flex:none}
  .bn.s{width:23px; height:23px; font-size:14px; border-radius:5px; vertical-align:-5px}
  .b1{background:var(--b1); color:var(--b1i)}
  .b2{background:var(--b2); color:var(--b2i); box-shadow:inset 0 0 0 1px #454F5B}
  .b3{background:var(--b3); color:var(--b3i)}
  .b4{background:var(--b4); color:var(--b4i)}
  .b5{background:var(--b5); color:var(--b5i)}
  .b6{background:var(--b6); color:var(--b6i)}

  /* 水面気象（隊形図の下） */
  .wx{margin:10px 14px 0; padding:9px 11px; background:var(--sunk);
    border:1px solid var(--gold-line); border-radius:9px}
  .wx .wxt{display:block; font-size:10.5px; color:var(--muted); margin-bottom:6px}
  .wx .wxt b{color:var(--ink2); font-weight:500; margin-left:6px}
  .wx dl{display:flex; gap:14px; margin:0; flex-wrap:wrap}
  .wx dl div{display:flex; align-items:baseline; gap:5px}
  .wx dt{font-size:10.5px; color:var(--muted); margin:0}
  .wx dd{margin:0; font-size:12.5px; color:var(--ink)}
  .wx dd .num{font-size:15px; font-weight:600}

  /* 買う点数の選択 */
  .pts{display:flex; align-items:center; gap:6px; padding:12px 14px 0; flex-wrap:wrap}
  .pts>span{font-size:10.5px; color:var(--muted); margin-right:2px}
  .pts button{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:14px;
    font-weight:600; color:var(--ink2); background:var(--surface2);
    border:1px solid var(--gold-line); border-radius:7px; padding:4px 11px; cursor:pointer}
  .pts button.on{background:var(--gold-dim); color:var(--gold-ink);
    border-color:var(--gold-acc)}
  .pts button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  /* 点数の直接入力。2/4/6/8/10 以外を買いたい人向け */
  .pts .free{display:inline-flex; align-items:center; gap:3px; font-size:10.5px;
    color:var(--muted)}
  .pts .free input{width:46px; font-family:"Barlow Condensed",sans-serif;
    font-size:15px; font-weight:600; color:var(--ink); background:var(--surface2);
    border:1px solid var(--gold-line); border-radius:7px; padding:3px 6px;
    text-align:center}
  .pts .free input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .pts .cap{font-size:10px; color:var(--muted); margin-left:auto}
  .fnote{font-size:10.5px; color:var(--muted); margin-left:auto}
  /* フォーメーションに入らず単品で足す組番。
     🔴 以前は行末に「単品」の札を疑似要素で足していたが、それが flex の
        要素として場所を取り、**その行だけオッズ列が46px→24pxに縮んで
        列がずれていた**。配置に影響しない左の線で示す。 */
  .buy.solo{background:var(--urgent-dim); box-shadow:inset 4px 0 0 var(--urgent)}
  /* 色分けの説明。何の色か分からないと意味がない */
  .lgd{display:flex; align-items:flex-start; gap:8px; padding:12px 14px 0;
    font-size:11.5px; line-height:1.7; color:var(--muted)}
  .lgd>span:last-child{flex:1}
  .lgd b{color:var(--urgent)}
  .lgd .sw{width:18px; height:15px; flex:none; border-radius:3px; margin-top:2px;
    background:var(--urgent-dim); box-shadow:inset 4px 0 0 var(--urgent)}

  /* フォーメーションは複数面になることがある。2面目からは間隔を詰める */
  .form{display:flex; align-items:center; gap:8px; padding:14px 14px 0; flex-wrap:wrap}
  .form + .form{padding-top:8px}
  .leg{display:flex; align-items:center; gap:5px}
  .leg .lb{font-size:10px; color:var(--muted)}
  .arw{color:var(--muted); font-size:15px}
  .kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--gold-line);
    margin-top:14px; border-top:1px solid var(--gold-line)}
  .kpi div{background:var(--surface); padding:9px 12px}
  .kpi dt{font-size:10px; color:var(--muted); margin:0}
  .kpi dd{margin:1px 0 0; font-family:"Barlow Condensed",sans-serif; font-size:20px;
    font-weight:600; line-height:1.15}
  .kpi dd small{font-size:11px; font-weight:500; color:var(--ink2); margin-left:1px}
  .kpi .a dd{color:var(--accent)}

  /* 3連単オッズの一覧。舟券売り場と同じ並べ方 */
  table.og{border-collapse:collapse; font-family:"Barlow Condensed",sans-serif;
    min-width:672px; margin:1px}
  /* 🔴 枠線は --line2 だと黒い艇（2号艇）のセルで見えなくなり、
     カードの縁と同化して読みにくい。1段明るい線にして必ず区切る */
  table.og th, table.og td{border:1px solid var(--line); padding:0}
  /* 🔴 サイト共通の表のCSS（先頭列は左揃え／見出しは右揃え）が効いてしまい、
     1着=1の列だけ揃えが変わっていた。table.og を前に付けて詳細度で上書きする。
     セレクタの強さで負けると、指定したつもりの揃えが効かない。 */
  table.og .og-h{font-size:11px; font-weight:600; padding:5px 4px !important;
    white-space:nowrap; letter-spacing:.02em; text-align:center}
  table.og .og-b, table.og .og-c{width:22px; text-align:center; font-size:12px;
    font-weight:600; padding:3px 0 !important}
  table.og .og-o{text-align:right}
  /* 黒い艇は背景と同化するので、内側に薄い縁を足して形が分かるようにする */
  .og-h.b2, .og-b.b2, .og-c.b2{box-shadow:inset 0 0 0 1px #46525F}
  .og-o{width:52px; text-align:right; font-size:13px; color:var(--ink2);
    padding:3px 6px !important; font-variant-numeric:tabular-nums}
  .og-o.best{color:var(--accent); font-weight:600; background:var(--accent-dim)}
  .og-h.b1,.og-b.b1,.og-c.b1{background:var(--b1); color:var(--b1i)}
  .og-h.b2,.og-b.b2,.og-c.b2{background:var(--b2); color:var(--b2i)}
  .og-h.b3,.og-b.b3,.og-c.b3{background:var(--b3); color:var(--b3i)}
  .og-h.b4,.og-b.b4,.og-c.b4{background:var(--b4); color:var(--b4i)}
  .og-h.b5,.og-b.b5,.og-c.b5{background:var(--b5); color:var(--b5i)}
  .og-h.b6,.og-b.b6,.og-c.b6{background:var(--b6); color:var(--b6i)}

  /* 並び替えできる見出し。押すたびに 大きい順 → 小さい順 → 既定 に戻る */
  table.srt thead th[data-k]{cursor:pointer; user-select:none;
    transition:color .15s}
  table.srt thead th[data-k]:hover{color:var(--ink2)}
  table.srt thead th[data-k]::after{content:attr(data-arrow); margin-left:3px;
    font-size:8px}
  table.srt thead th.on{color:var(--accent)}
  .bh.srt span[data-k]{cursor:pointer; user-select:none; transition:color .15s}
  .bh.srt span[data-k]:hover{color:var(--ink2)}
  .bh.srt span.on{color:var(--accent)}

  /* 展示STだけで判定したスタートの良し悪し。一目で分かるように出す */
  .stmark{display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 2px}
  .stb{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
    font-weight:600; border-radius:999px; padding:3px 11px 3px 4px;
    border:1px solid transparent}
  .stb .bn{margin:0}
  .stb.fast{color:var(--accent); background:var(--accent-dim); border-color:#1D5748}
  .stb.slow{color:var(--urgent); background:var(--urgent-dim); border-color:#5A3E16}
  .stb.f{color:var(--loss); background:#331A18; border-color:#5A2B26}
  .stmark .none{font-size:11.5px; color:var(--muted); padding:2px 0}
  /* 判定の定義。何を基準にしているか分からないとバッジが読めない。
     🔴 横に流すとスマホで用語が途中で折れる。1行1項目の対応表にする */
  .stdef{width:100%; margin:9px 0 0; display:grid; gap:5px; font-size:11.5px}
  .stdef>div{display:grid; grid-template-columns:5.6em 1fr; gap:9px;
    align-items:baseline}
  .stdef dt{font-weight:600; white-space:nowrap}
  .stdef dd{margin:0; color:var(--muted); line-height:1.7;
    word-break:auto-phrase; line-break:strict}
  .stdef dd span{color:var(--muted); opacity:.75; margin-left:6px;
    font-size:10.5px; white-space:nowrap}
  .stdef dt.fast{color:var(--accent)}
  .stdef dt.slow{color:var(--urgent)}
  .stdef dt.f{color:var(--loss)}
  .stnote{width:100%; margin:7px 0 0; font-size:11px; line-height:1.75;
    color:var(--muted); word-break:auto-phrase; line-break:strict}

  /* 展示前の暫定予想。本予想と見分けがつかないと誤解を招く */
  .provbar{margin:12px 12px 0; padding:11px 14px; border-radius:8px;
    background:var(--urgent-dim); border:1px solid var(--urgent);
    display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap}
  .provbar>b{flex:none; font-size:12px; color:var(--urgent);
    border:1px solid var(--urgent); border-radius:4px; padding:1px 8px;
    letter-spacing:.04em}
  .provbar>span{flex:1; min-width:200px; font-size:12px; line-height:1.75;
    color:var(--ink2)}
  .provbar b{color:var(--urgent)}

  /* 欠場の知らせ（2026-09-13）。**中止と取り違えさせないこと。**
     中止・順延は赤（--loss）でレースそのものが行われない。
     欠場は1艇だけ走らないので、落ち着いた灰色で出す。 */
  .absbar{margin:12px 12px 0; padding:11px 14px; border-radius:8px;
    background:var(--sunk); border:1px solid var(--line);
    display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap}
  .absbar>b{flex:none; font-size:12px; color:var(--ink2);
    border:1px solid var(--line); border-radius:4px; padding:1px 8px;
    letter-spacing:.04em}
  .absbar>span{flex:1; min-width:200px; font-size:12px; line-height:1.75;
    color:var(--ink2)}
  .absbar b{color:var(--ink)}

  /* 当日ぶんがまだ出ていない知らせ（2026-09-14）。欠場の帯と同じ作り。
     🔴 赤（--loss）は中止の意味。ここは故障ではなく「まだ朝」なので使わない。 */
  .waitbar{margin:12px 12px 0; padding:11px 14px; border-radius:8px;
    background:var(--sunk); border:1px solid var(--line);
    display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap}
  .waitbar>b{flex:none; font-size:12px; color:var(--ink2);
    border:1px solid var(--line); border-radius:4px; padding:1px 8px;
    letter-spacing:.04em}
  .waitbar>span{flex:1; min-width:200px; font-size:12px; line-height:1.75;
    color:var(--ink2)}
  .waitbar b{color:var(--ink)}

  /* ログイン画面（2026-09-16 にゴールドへ。それまでテンプレートに
     インラインstyleで var(--accent)（緑）が直書きされていて、
     サイト全体を金にしたときにここだけ取り残されていた）。
     🔴 「入る」は選択中のタブと同じ見た目にする（--gold-metal）。
     🔴 パスワード違いの赤（--loss）はそのまま。**意味を持つ色は変えない。** */
  /* 正方形ロゴ（ログイン画面だけ）。🔴 スマホでパスワード欄が画面の下に
     押し出されないよう、画面の低い端末では小さくする */
  .bar-none{display:none}
  /* 🔴 上の余白は padding で取る。margin だと外枠（.app）の外にはみ出し、
     画面の上に地の色の帯が見えた（帯を出さない画面なので上に何も無い） */
  .login-logo{text-align:center; margin:0; padding-top:30px; line-height:0}
  .login-logo img{width:clamp(150px, 52vw, 220px); height:auto}
  @media (max-height:700px){ .login-logo img{width:130px} }
  .login{max-width:340px; margin:14px auto 0; padding:26px 22px}
  .login h2{font-size:17px; margin:0 0 4px}
  .login .note{margin:0 0 18px}
  .login .ng{font-size:13px; color:var(--loss); margin:0 0 14px}
  .login input[type=password]{width:100%; padding:11px 12px; font-size:15px;
    font-family:inherit; color:var(--ink); background:var(--sunk);
    border:1px solid var(--gold-line); border-radius:9px}
  .login input[type=password]:focus{outline:2px solid var(--gold);
    outline-offset:1px; border-color:var(--gold-edge)}
  .login button{width:100%; margin-top:12px; padding:11px; font-size:14px;
    font-weight:700; font-family:inherit; color:#1A1300;
    background-image:var(--gold-metal); border:1px solid #E8C24A;
    border-radius:9px; cursor:pointer;
    text-shadow:0 1px 0 rgba(255,255,255,.4)}
  .login button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
  .login .bye{margin:16px 0 0}
  .login .bye a{color:var(--gold-ink)}

  /* F持ち。今期にフライングを切っている選手。13.6%が該当する */
  .fcol{width:34px; text-align:center !important; padding-left:2px !important;
    padding-right:2px !important}
  .fmark{display:inline-block; font-family:"Barlow Condensed",sans-serif;
    font-size:10.5px; font-weight:600; color:var(--loss); border:1px solid var(--loss);
    border-radius:3px; padding:0 4px; line-height:1.5; vertical-align:1px}

  /* オッズがいつ時点か。締切間際は人気が動くので、必ず見えるところに出す */
  .obar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:12px 14px 0; font-size:11.5px; color:var(--muted)}
  .obar .lab{letter-spacing:.04em}
  .obar b{font-family:"Barlow Condensed",sans-serif; font-size:15px; font-weight:600;
    color:var(--ink); border-radius:4px; padding:1px 5px; transition:background .4s}
  .obar b.flash{background:var(--accent-dim); color:var(--accent)}
  .obar b.same{background:var(--surface2)}
  .obar .auto{font-size:10.5px; color:var(--muted)}
  .obar button{margin-left:auto; font-family:"Barlow Condensed",sans-serif;
    font-size:13px; color:var(--ink2); background:var(--surface2);
    border:1px solid var(--line); border-radius:999px; padding:3px 13px; cursor:pointer}
  .obar button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
  .obar button:disabled{opacity:.5; cursor:default}

  /* 予算と資金配分。的中重視・期待値重視で共通 */
  .budget{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:12px 14px 2px}
  .budget label{font-size:11.5px; color:var(--muted)}
  .budget input{width:104px; font-family:"Barlow Condensed",sans-serif; font-size:18px;
    font-weight:600; color:var(--ink); background:var(--surface2);
    border:1px solid var(--line); border-radius:7px; padding:6px 10px; text-align:right}
  .budget input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .chips{display:flex; gap:6px; flex-wrap:wrap}
  .chips button{font-family:"Barlow Condensed",sans-serif; font-size:13px; color:var(--ink2);
    background:var(--surface2); border:1px solid var(--gold-line); border-radius:999px;
    padding:3px 11px; cursor:pointer}
  .chips button:hover{border-color:var(--gold); color:var(--gold-ink)}

  /* 🔴 予算内で「当たれば必ずプラス」になる点数の印。
     以前は疑似要素で●を重ねていたが、文字が数字に被って読めなくなった。
     下辺の線で示す。 */
  /* その点数なら**どの目が当たっても投資額を上回る**（Σ(1/オッズ)<1）という印。
     🔴 色は金（2026-09-12 ユーザー指示）。意味は変わらない。 */
  .pts button.safe{box-shadow:inset 0 -2px 0 var(--gold)}
  /* 期待値重視の「全部」。AIが買う価値ありと判定した組をすべて買う */
  /* 収支重視の「オススメ」。**全部買うことをすすめる点数**なので、
     枠を太く・文字を金にして、ほかの点数より目立たせる（2026-09-12 ユーザー指示）。 */
  .pts button i{font-style:normal; font-size:9.5px; color:var(--gold);
    font-weight:700; margin-left:4px; letter-spacing:.02em}
  .pts button.on i{color:var(--gold-lt)}
  .pts button.rec{border-width:2px; border-color:var(--gold); color:var(--gold-lt);
    padding:3px 10px}
  .pts button.rec.on{background:var(--gold-dim); border-color:var(--gold-lt);
    box-shadow:inset 0 -2px 0 var(--gold)}

  .asum{display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px 0; margin-top:8px;
    border-top:1px solid var(--line2); font-size:11.5px; color:var(--muted)}
  .asum b{font-family:"Barlow Condensed",sans-serif; font-size:15px; color:var(--ink);
    font-weight:600}
  .asum .ok{color:var(--accent); font-size:11.5px; margin-left:2px}

  /* トリガミ（当たっても投資額を下回る）の注意。黙って配分しない */
  .buy.gami .yn, .buy.gami .rt{color:var(--urgent)}
  .buy.gami .rt{font-weight:600}
  .gwarn{margin:12px 14px 0; padding:11px 13px; border-radius:6px;
    background:var(--urgent-dim); border:1px solid var(--urgent);
    font-size:12.5px; line-height:1.75; color:var(--ink2)}
  .gwarn b{display:block; color:var(--urgent); font-size:13px; margin-bottom:3px}
  .gwarn b+b{display:inline; font-size:12.5px}
  .asum{display:flex; gap:10px; padding-top:10px; margin-top:4px;
    border-top:1px solid var(--line); font-size:11.5px; color:var(--muted)}
  .asum b{font-family:"Barlow Condensed",sans-serif; font-size:15px; color:var(--ink);
    font-weight:600}

  /* 買い目の一覧。組合せ／オッズ／確率／賭け金／的中で の5列を1つの表にまとめる。
     🔴 以前は「組合せ・オッズ・確率」と「賭け金」で同じ組番を2回並べていた */
  /* 6列（組合せ／オッズ／確率／回収率／賭け金／的中で）をスマホ幅に収める。
     幅の合計は 78+38+42+44+46 ＝ 248、すき間5×5＝25、余白28 で 301。
     343pxのカードに収まり、余りはオッズ列（flex）が受け持つ */
  .buy{display:flex; align-items:center; gap:5px; padding:7px 14px;
    border-top:1px solid var(--line2)}
  .buy .cb{width:78px; flex:none}
  .buy .od{font-family:"Barlow Condensed",sans-serif; font-size:14px; color:var(--ink2);
    flex:1; min-width:36px; text-align:right}
  .buy .pc{font-family:"Barlow Condensed",sans-serif; font-size:14px; width:38px;
    flex:none; text-align:right}
  .buy .ev{font-family:"Barlow Condensed",sans-serif; font-size:14px; width:42px;
    flex:none; text-align:right; color:var(--ink2)}
  .buy .ev.best{color:var(--accent); font-weight:600}
  .buy .yn{font-family:"Barlow Condensed",sans-serif; font-size:14px; font-weight:600;
    width:44px; flex:none; text-align:right}
  .buy .rt{font-family:"Barlow Condensed",sans-serif; font-size:12px; color:var(--muted);
    width:46px; flex:none; text-align:right}
  .bh{display:flex; gap:5px; padding:10px 14px 6px; font-size:9.5px; color:var(--muted);
    white-space:nowrap}
  .bh .cb{width:78px; flex:none}
  .bh .od{flex:1; min-width:36px; text-align:right}
  .bh .pc{width:38px; flex:none; text-align:right}
  .bh .ev{width:42px; flex:none; text-align:right}
  .bh .yn{width:44px; flex:none; text-align:right}
  .bh .rt{width:46px; flex:none; text-align:right}


  figure{margin:0; padding:8px 6px 2px}
  /* 🔴 **本文は中央揃えにしない**（2026-09-16 利用者指摘）。
     隊形図の説明は2〜3行になるので、中央だと行の端が揃わず読みにくい。
     図そのものの一言キャプションではなく**文章**なので左寄せにする。
     🔴 `word-break:auto-phrase` は日本語を**文節で折る**。これが無いと
        「展示フライ／ング）」「同じ入り／方をすると」のように語の途中で
        切れる（375pxで実測）。対応していないブラウザでは今までどおり
        どこでも折れるだけで、崩れはしない。 */
  figcaption{font-size:11px; color:var(--muted); text-align:left;
    padding:2px 14px 10px; line-height:1.75;
    word-break:auto-phrase; line-break:strict}
  /* 2つの話（フライングの注意／速さの話）を段落で分ける。
     以前は <br> だけで、続きの文と見分けが付かなかった */
  figcaption p{margin:0}
  figcaption p + p{margin-top:7px}
  /* 🔴 色はここに置く。JS側に直書きしない（ログイン画面で同じ失敗をした） */
  figcaption .fl{color:var(--loss); font-weight:700}
  svg{display:block; width:100%; height:auto}
  .legend{display:flex; justify-content:center; gap:16px; padding:0 12px 8px;
    font-size:10px; color:var(--muted)}
  .legend i{display:inline-block; width:16px; height:9px; border-radius:2px;
    vertical-align:-1px; margin-right:5px; background:#7E8B98}
  .legend .tri{width:0; height:0; background:none; border-left:6px solid transparent;
    border-right:6px solid transparent; border-bottom:8px solid #7E8B98;
    border-radius:0; margin-right:4px}

  .badge{font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px;
    background:var(--urgent-dim); color:var(--urgent); border:1px solid #4A3316}

  .tw{overflow-x:auto}
  table{border-collapse:collapse; width:100%; font-size:12px}
  th,td{padding:7px 6px; text-align:right; white-space:nowrap;
    border-bottom:1px solid var(--line2)}
  th:first-child,td:first-child{text-align:left; padding-left:14px}
  th:last-child,td:last-child{padding-right:14px}
  thead th{font-size:9.5px; color:var(--muted); font-weight:500; background:var(--sunk)}
  thead th.grp{color:var(--ink2); border-bottom:1px solid var(--line)}
  tbody tr:last-child td{border-bottom:0}
  td.n{font-family:"Barlow Condensed",sans-serif; font-size:14px}
  .best{color:var(--accent); font-weight:600}
  .in{color:var(--accent); font-size:10px}
  .runs{color:var(--muted); font-size:10px}
  .p1c{color:var(--accent); font-weight:600}
  .sep{border-left:1px solid var(--line)}

  /* 欠場（2026-09-13）。走らない艇。
     🔴 赤は中止・順延の意味で使っている。欠場は「1艇だけ走らない」ことなので
        レースの中止と取り違えさせない。落ち着いた灰色にする。 */
  .abr{color:var(--muted)}
  /* 🔴 **左寄せにすること。** 表は横に長くスマホでははみ出すので、
     中央寄せにすると「欠場」が画面の外に出て、横スクロールしないと
     見えなくなる（2026-09-13 実機で確認）。 */
  .abr td[colspan]{text-align:left; padding-left:6px}
  .abs{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
    color:var(--ink2); background:var(--sunk); border:1px solid var(--line);
    border-radius:4px; padding:1px 8px}

  .tabs{display:flex; border-bottom:1px solid var(--line)}
  .tabs button{flex:1; font-family:inherit; font-size:12px; color:var(--muted);
    background:none; border:0; padding:11px 4px; cursor:pointer;
    border-bottom:2px solid transparent}
  .tabs button.on{color:var(--accent); border-bottom-color:var(--accent)}
  /* 予想／結果の切り替え（レースページ・結果ページ）。
     🔴 以前はテンプレートに**インラインstyleで色を直書き**していたため、
        CSSから色を変えられなかった。クラスに移してある。 */
  .tabs.pr{margin:14px 14px 0; border:1px solid var(--gold-line); border-radius:10px;
    overflow:hidden; background:var(--surface)}
  .tabs.pr > a,.tabs.pr > span{flex:1; text-align:center; padding:10px 4px;
    font-size:12px; color:var(--muted); text-decoration:none}
  .tabs.pr > .on{color:var(--gold-lt); font-weight:700;
    box-shadow:inset 0 -2px 0 var(--gold)}

  /* 一覧
     🔴 **格子（grid）で列の位置を固定する。** 以前は flex で中身に合わせて
        伸び縮みしていたため、「🔥AI厳選」が付いた行だけ列がズレて見えた
        （2026-09-12 ユーザー指摘）。列幅を中身と切り離すと、どの行でも
        時刻・場名・自信度の左端が必ずそろう。
     🔴 **トップとレース一覧で列の順番をそろえる**（時刻 → 場名 → R → 自信度）。
        以前は一覧だけ「R → 時刻」で逆だった。 */
  .rrow{display:grid; align-items:center; column-gap:10px; row-gap:2px;
    padding:10px 14px; border-top:1px solid var(--line2); cursor:pointer}
  .rtop{grid-template-columns:44px 52px 30px auto 1fr}
  .rven{grid-template-columns:44px 30px auto 1fr}
  .rrow:first-child{border-top:0}
  .rrow:hover{background:var(--surface2)}
  .rrow .t{font-family:"Barlow Condensed",sans-serif; font-size:17px; font-weight:600;
    min-width:44px; color:var(--urgent); grid-row:1}
  .rrow .v{font-size:13px; min-width:52px; grid-row:1}
  .rrow .rr{font-family:"Barlow Condensed",sans-serif; font-size:15px; font-weight:600;
    color:var(--accent); min-width:30px; grid-row:1}
  /* 🔴 自信度と右の説明は**2段ぶんをまたぐ**。またがせないと、
     「🔥AI厳選」が付いた行だけ縦にずれる */
  .rrow .cf{grid-row:1 / span 2; align-self:center}
  .rrow .sub{font-size:10.5px; color:var(--muted); margin-left:auto; text-align:right;
    line-height:1.5; grid-row:1 / span 2; align-self:center; min-width:0}
  /* 🔴 320pxで「予想を見る」が「予想を見／る」と2行に折れていた（2026-09-12 発見）。
     いちばん右の列は余った幅を全部もらうので、折る必要がない */
  .rven .sub{white-space:nowrap}
  /* 🔥AI厳選。**場名とレース番号の下の段**に置く。ここは元から空いているので
     行の高さも横幅も増えない（実測：62→63px、幅の増加0px） */
  /* 🔴 **色はSのバッジと揃える。** 「AI厳選」＝「自信度S」で同じものを指す
     ので、別々の色にすると指標が2つあるように見える（2026-09-12 ユーザー判断）。 */
  .pk{grid-row:2; font-size:9.5px; font-weight:700; color:var(--gold);
    white-space:nowrap; letter-spacing:-.3px; line-height:1}
  .rtop .pk{grid-column:2 / 4}
  .rven .pk{grid-column:1 / 3}
  /* 説明文の中で色だけ合わせる（行の中の `.pk` とは別物） */
  .pk2{color:var(--gold); font-weight:700}
  .rk2{font-family:"Barlow Condensed",sans-serif; font-size:12px; font-weight:700;
    width:20px; height:20px; border-radius:4px; display:grid; place-items:center; flex:none}
  /* 券種ごとの自信度（一覧の左側）。
     🔴 2行に収める。右の説明文も2行なので、行の高さは増えない。
     🔴 幅を固定して、レースごとに桁がずれないようにする。 */
  .cf{display:flex; flex-direction:column; gap:2px; flex:none}
  .cfr{display:flex; align-items:center; gap:3px; line-height:1}
  .cfr i{font-style:normal; font-size:9px; color:var(--muted); width:26px;
    letter-spacing:-.5px}
  /* 🔴 幅を固定して桁をそろえる。そろえないとレースごとに数字が動いて読みにくい */
  .cfr em{font-style:normal; font-family:"Barlow Condensed",sans-serif;
    font-size:14px; font-weight:600; min-width:34px; text-align:right;
    font-variant-numeric:tabular-nums}
  .cfr em.no{color:var(--muted)}
  /* 「期待値あり」の強調。
     🔴 **赤は使わない。** このサイトでは赤＝中止・順延の意味で使っている
        （.cx）。良い知らせを赤で出すと「何か問題がある」と読まれる。
        緑はS評価やリンクに使っている「良い」の色（2026-09-09 ユーザー判断）。 */
  .ev{color:var(--accent); font-weight:700}
  /* 帯の中に出す券種ごとの期待値。
     🔴 ありは緑、なしは灰色。赤は中止・順延で使っているので使わない。 */
  .cfr .evm{font-size:9.5px; margin-left:5px; white-space:nowrap; letter-spacing:-.5px}
  .cfr .evm.on{color:var(--accent); font-weight:700}
  .cfr .evm.off{color:var(--muted)}
  /* 🔴 2連単オッズがまだ来ていない。「なし」ではなく「まだ分からない」 */
  .cfr .evm.un{color:var(--muted); opacity:.75}
  .cfr .evm small{font-size:inherit}
  /* 🔴 狭い端末（320px）では右の説明文が「収支重視 6／点」と折れていた。
     隙間を詰めて1行に収める。実測：320pxで説明文に使える幅 80px → 102px */
  @media (max-width:360px){
    .rrow{column-gap:8px; padding-left:10px; padding-right:10px}
    /* 🔴 「期待値あり」の3文字を落として「あり」だけにする。
       券種名が同じ行にあるので意味は通る。隠さないと右の「結果を見る」が
       3行に折れ、行の高さが56px→84pxになる（実測） */
    .cfr .evm small{display:none}
  }
  /* 🔴 **SだけをG金にする。A・B・Cはそのまま。**
     S＝金／A＝青／B・C＝灰 で、上から順に格が下がるのが一目で分かる。
     小さい（20px）ので、光沢の山が中央に来る角度にしてある。 */
  .rkS{background-image:var(--gold-badge); color:#1A1300;
    box-shadow:inset 0 0 0 1px rgba(255,249,230,.45)}
  .rkA{background:#2C6E8C; color:#DFF3FB}
  .rkB{background:var(--surface2); color:var(--ink2)}
  .rkC{background:var(--surface2); color:var(--muted)}

  .vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2)}
  @media (min-width:600px){ .vgrid{grid-template-columns:repeat(4,1fr)} }
  .vg{background:var(--surface); padding:11px 10px; cursor:pointer}
  .vg:hover{background:var(--surface2)}
  .vg.off{opacity:.35; cursor:default}
  .vg b{display:block; font-size:13px; font-weight:700}
  .vg span{font-size:10px; color:var(--muted)}

  .stat{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line2)}
  .stat div{background:var(--surface); padding:12px 14px}
  .stat dt{font-size:10.5px; color:var(--muted); margin:0}
  .stat dd{margin:2px 0 0; font-family:"Barlow Condensed",sans-serif; font-size:22px;
    font-weight:600; line-height:1.15}
  .up{color:var(--accent)} .dn{color:var(--loss)}

  .note{font-size:10.5px; color:var(--muted); line-height:1.7; padding:9px 14px 12px}
  /* ページ下の説明と免責。**同じ大きさ・同じ行間にそろえる**（2026-09-12）。
     🔴 話題ごとに見出しを付けて分ける。1段落に詰めると8行の塊になって
        どこで話題が変わるか分からない。 */
  footer{padding:16px 14px 34px; color:var(--muted); font-size:11px; line-height:1.8}
  footer p{margin:0 0 8px}
  .fnote{margin:0; padding:0}
  .fnote > div{margin:0 0 11px}
  .fnote dt{font-size:11px; font-weight:700; color:var(--ink2); margin:0 0 1px}
  .fnote dd{margin:0; font-size:11px; line-height:1.8; color:var(--muted)}
  /* 説明と免責のあいだの細い区切り */
  .frule{height:1px; background:var(--gold-line); margin:14px 0 12px}
  .fp{margin:0 0 11px; font-size:11px; line-height:1.8}

  /* 展示前の暫定予想であることを示す小さな印（一覧ページ）。
     レース詳細の .provbar と同じ色にそろえる */
  .pv{display:inline-block; padding:0 5px; border-radius:4px; font-size:10px;
    font-weight:700; letter-spacing:.04em; vertical-align:1px;
    color:var(--urgent); border:1px solid var(--urgent)}