/* スマホを基本に、幅が広いときだけ段を増やす */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #1b2430;
  --sub: #5a6573;
  --line: #dde2e8;
  --accent: #163a5c;
  --up: #2e6a4f;
  --down: #a3362e;
  --hit: #f6efd9;
  --bar1: #163a5c;
  --bar2: #5f7f9e;
  --bar3: #b9c8d7;
  --bar-bg: #eef1f4;
  --k0: #3f78b5; --k1: #e08a1e; --k2: #2f9e7e; --k3: #8a63c2; --k4: #8f99a5; --k5: #c9cfd6;
  --pre: #86671f;
  --live: #c8431b;
  --done: #5a6573;
  --shadow: none;
  --l1: #ffffff; --l1-ink: #111; --l2: #222; --l2-ink: #fff; --l3: #e53935; --l3-ink: #fff;
  --l1-band: #d5dae0; --l2-band: #222;
  --l4: #1e63d6; --l4-ink: #fff; --l5: #f7d31a; --l5-ink: #111; --l6: #2e9d4a; --l6-ink: #fff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171d;
    --card: #171d24;
    --ink: #e5e8ec;
    --sub: #98a2ad;
    --line: #29313b;
    --accent: #8db0d6;
    --up: #6fae8c;
    --down: #d98078;
    --hit: #3d3418;
    --bar1: #8db0d6;
    --bar2: #4f6d8e;
    --bar3: #2d4158;
    --bar-bg: #222a33;
    --k0: #6aa3de; --k1: #f0a346; --k2: #55c0a0; --k3: #b38ce6; --k4: #aab3be; --k5: #5a6573;
    --pre: #d2b36a;
    --live: #e2703f;
    --done: #98a2ad;
    --shadow: none;
    --l2: #000; --l2-ink: #fff;
    --l1-band: #ffffff; --l2-band: #4a525c; /* 暗い地では黒い帯が沈むので灰に */
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-variant-numeric: tabular-nums;
}
button, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--sub); }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---- 上の帯 ---- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  padding: 8px 16px 6px;
  padding-top: max(8px, env(safe-area-inset-top));
}
/* 上の帯の下の線は、ロゴと同じ1〜6号艇の色の細い帯（サイトの印はここ1か所だけ。T878）。1号艇の白は、明るい地では薄い灰にして見えるように */
.top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--l1-band) 0 16.667%, var(--l2-band) 0 33.333%, var(--l3) 0 50%, var(--l4) 0 66.667%, var(--l5) 0 83.333%, var(--l6) 0);
}
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bar h1 { font-size: 16px; margin: 0; }
.bar select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.status { font-size: 12px; color: var(--sub); margin-left: auto; }
.status.err { color: var(--down); }
.status.flash { color: var(--accent); }

.filters { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: transparent; padding: 6px 0; cursor: pointer; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: #fff; }
.venues { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.venues::-webkit-scrollbar { display: none; }
.venues :is(button, a) { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 5px; padding: 2px 10px; font-size: 13px; cursor: pointer; }
.venues :is(button, a).on { border-color: var(--accent); background: var(--accent); color: #fff; }
/* トップのタブと場はリンク（押すと一覧のページへ。T229） */
.tabs a, .venues a { color: inherit; text-decoration: none; white-space: nowrap; }
.status + .gnav { flex: none; margin-left: 10px; white-space: nowrap; }

main { padding: 12px 16px 48px; max-width: 1280px; margin: 0 auto; }

/* ---- 1日のまとめ ---- */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; box-shadow: none; }
.tile small { display: block; color: var(--sub); font-size: 12px; }
.tile b { font-size: 18px; }

/* ---- レース ---- */
.list { display: flex; flex-direction: column; gap: 8px; }
.race { background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.race.next { border-color: var(--accent); }

.st { font-size: 11px; border-radius: 6px; padding: 1px 6px; border: 1px solid currentColor; }
.st.pre { color: var(--pre); }
.st.live { color: var(--live); }
.st.done { color: var(--done); }

.lane { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font-weight: 700; font-size: 13px; border: 1px solid rgba(0, 0, 0, 0.25); flex: none; }
.l1 { background: var(--l1); color: var(--l1-ink); } .l2 { background: var(--l2); color: var(--l2-ink); } .l3 { background: var(--l3); color: var(--l3-ink); }
.l4 { background: var(--l4); color: var(--l4-ink); } .l5 { background: var(--l5); color: var(--l5-ink); } .l6 { background: var(--l6); color: var(--l6-ink); }
.combo { display: inline-flex; gap: 2px; align-items: center; }
.combo .lane { width: 18px; height: 18px; font-size: 11px; }

.body { padding: 4px 12px 12px; }

/* 艇: スマホは縦に積む */
.boat { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.boat:last-of-type { border-bottom: 0; }
.boat .ln { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--sub); }
.boat .ln .lane { width: 28px; height: 28px; font-size: 16px; }
.boat .who { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.boat .who .name { font-weight: 700; }
.boat .who .name small { font-weight: 400; color: var(--sub); margin-left: 4px; }
.basic { font-size: 12px; color: var(--sub); display: flex; flex-wrap: wrap; column-gap: 8px; }
.basic span { white-space: nowrap; }
.probs, .more { grid-column: 2; }

.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; margin-top: 4px; }
.pc { display: flex; flex-direction: column; min-width: 0; }
.pc small { font-size: 11px; color: var(--sub); }
.pc b { font-size: 17px; line-height: 1.2; }
.pc em { font-style: normal; font-size: 11px; color: var(--sub); }
.pc em b { font-size: 11px; color: var(--ink); }
.stack { position: relative; height: 6px; border-radius: 4px; background: var(--bar-bg); overflow: hidden; margin: 6px 0 2px; grid-column: 1 / -1; }
.stack i { position: absolute; top: 0; left: 0; bottom: 0; }
.stack .s3 { background: var(--bar3); } .stack .s2 { background: var(--bar2); } .stack .s1 { background: var(--bar1); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.chip { font-size: 11px; border-radius: 5px; padding: 0 7px; border: 1px solid var(--line); }
.chip.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.chip.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }

.moreb { grid-column: 2; justify-self: start; border: 0; background: none; color: var(--accent); padding: 0; font-size: 12px; cursor: pointer; }
.more { display: none; font-size: 12px; }
.boat.open .more { display: grid; gap: 6px; margin-top: 4px; }
.more h4 { margin: 0 0 2px; font-size: 11px; color: var(--sub); font-weight: 700; }
.meet { display: flex; gap: 2px; flex-wrap: wrap; }
.meet .lane { width: 18px; height: 18px; font-size: 11px; }
.mres { display: grid; gap: 6px; margin-top: 6px; }
tr.rx { cursor: pointer; }
tr.rx:hover td { background: var(--bar-bg); }
tr.rrow td { text-align: left; white-space: normal; padding: 4px 3px 8px; }
tr.rrow .mrs { max-width: calc(100vw - 32px); }
.mrn { font-size: 11px; }
.mrun > a { font-weight: 700; font-size: 11px; }
.mrs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.mr { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; padding: 2px 4px; border-radius: 6px; font-size: 10px; line-height: 1.3; min-width: 52px; }
.mr.me { background: var(--bar-bg); outline: 1px solid var(--accent); }
.mr small { font-size: 10px; color: var(--sub); }
.mr em { font-style: normal; }
.mr i { font-style: normal; color: var(--sub); font-size: 9px; white-space: nowrap; }
.mr .lane { width: 16px; height: 16px; font-size: 10px; }
.origs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.og em { font-style: normal; color: var(--sub); margin-left: 3px; }
.og.best { font-weight: 700; }
.og i { font-style: normal; margin-left: 4px; font-size: 11px; }

.notes { margin: 8px 0 0; padding: 8px 10px; background: var(--bar-bg); border-radius: 6px; font-size: 12px; display: grid; gap: 2px; }
.tri { margin-top: 10px; }
.tri h4 { margin: 0 0 4px; font-size: 12px; color: var(--sub); font-weight: 700; }
.tri h4 small { font-weight: 400; margin-left: 6px; }
.trigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.tri .it { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.tri .it span { font-size: 11px; }
.tri .it.hit { background: var(--hit); }
.tri .it span { color: var(--sub); }

.empty { text-align: center; color: var(--sub); padding: 32px 0; }

/* 幅が広いとき: 艇を1行の表のように並べ、詳しい欄も常に出す */
@media (min-width: 960px) {
  .boat { grid-template-columns: 36px minmax(220px, 1.3fr) minmax(260px, 1.4fr) minmax(240px, 1.4fr); align-items: start; }
  .boat .who { grid-column: 2; display: block; }
  .probs { grid-column: 3; }
  .more { grid-column: 4; display: grid; gap: 6px; }
  .moreb { display: none; }
  .boat > * { grid-row: 1; min-width: 0; }
  .boat .ln { grid-column: 1; }
}

/* ---- ヘルプのページ ---- */
.help .back { color: var(--accent); text-decoration: none; font-size: 14px; }
.help .bar h1 { margin-left: auto; }
.toc { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin-top: 6px; font-size: 13px; white-space: nowrap; }
.toc a { color: var(--accent); text-decoration: none; }
.doc { max-width: 760px; line-height: 1.75; }
.doc section { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 16px 12px; margin-bottom: 12px; scroll-margin-top: 90px; }
.doc h2 { font-size: 18px; margin: 12px 0 4px; }
.doc h3 { font-size: 15px; margin: 16px 0 2px; }
.doc p, .doc ul, .doc ol { margin: 4px 0; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc .ex { background: var(--bar-bg); border-radius: 6px; padding: 6px 10px; }
.doc .note { font-size: 13px; color: var(--sub); }
.gloss { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.gloss th, .gloss td { border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left; vertical-align: top; }
.gloss th { color: var(--sub); font-weight: 700; }
.gloss td:first-child { white-space: nowrap; font-weight: 700; }
.hl { color: var(--accent); text-decoration: none; font-size: 12px; }

/* ---- レースの道具・小窓 ---- */
.tools { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0 2px; }
.cmpb { border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 5px; padding: 3px 12px; font-size: 13px; cursor: pointer; }
.linkb { justify-self: start; border: 0; background: none; color: var(--accent); padding: 0; font-size: 12px; cursor: pointer; text-align: left; }
/* 「×」の押せる範囲は 44×44px（見た目の大きさは今のまま）。上下と右は負の余白で、見出しの帯からはみ出さないようにする（帯は約4px 高くなる。T1205 の続き） */
/* 比較の表: 1画面に収まるよう詰める。収まらないときだけ横に動かせる */
.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 6px; }
.cmp table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cmp th, .cmp td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; line-height: 1.25; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 10px; color: var(--sub); font-weight: 700; background: var(--card); white-space: nowrap; }
.cmp tbody th { position: sticky; left: 0; background: var(--card); text-align: left; font-weight: 400; z-index: 1; }
.who2 { display: flex; align-items: center; gap: 4px; }
.who2 > span { display: flex; flex-direction: column; min-width: 0; }
.who2 b { font-size: 13px; white-space: nowrap; }
.giv { margin-left: .2em; }
.who2 b .giv { font-size: 11px; font-weight: 400; color: var(--sub); }
.who2 small { color: var(--sub); font-size: 10px; white-space: nowrap; }
.cmp td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp td sup { color: var(--sub); font-size: 9px; margin-left: 1px; }
.cmp td small { display: block; font-size: 10px; color: var(--sub); }
.cmp td small.up { color: var(--up); } .cmp td small.down { color: var(--down); }
/* 展示差の 1着/2着/3着率の差（T47）: 1行に並べ、数字ごとに色。折り返さない */
.cmp td small.gap3 { white-space: nowrap; }
.cmp td small.gap3 .up { color: var(--up); } .cmp td small.gap3 .down { color: var(--down); }
.cmp td.best { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 700; }
/* 多いほど悪い行（ST の遅い帯）のいちばん多い艇 */
.cmp td.warn { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); font-weight: 700; }
.cmp tr.won th, .cmp tr.won td { background-image: linear-gradient(var(--hit), var(--hit)); }
.cmp td.eff { white-space: normal; font-size: 10px; text-align: left; line-height: 1.3; }
.cmp td.eff span { display: block; white-space: nowrap; }
.cmp .meet { flex-wrap: wrap; justify-content: flex-end; gap: 1px; max-width: 76px; margin-left: auto; }
.cmp .meet .lane { width: 15px; height: 15px; font-size: 10px; border-radius: 4px; }
.cmp tr.effrow { display: none; }
.cmp td.og3 span { display: block; font-size: 11px; }
@media (max-width: 700px) {
  .cmp .effh, .cmp td.eff { display: none; }
  .cmp tr.effrow { display: table-row; }
  .cmp tr.effrow td { text-align: left; font-size: 10px; color: var(--sub); padding-top: 0; white-space: normal; }
  .cmp tr.effrow span { margin-right: 8px; }
  .cmp tr:has(+ tr.effrow) th, .cmp tr:has(+ tr.effrow) td { border-bottom: 0; }
  /* 文字を小さくして、行と列の間をあける（下限は8px） */
  .cmp table { font-size: 11px; }
  .cmp th, .cmp td { padding: 6px 4px; line-height: 1.35; }
  .cmp thead th { font-size: 9px; }
  .who2 b { font-size: 12px; }
  .who2 small, .cmp td small, .cmp td.og3 span { font-size: 8px; }
  .cmp td sup { font-size: 8px; }
  .cmp tr.effrow td { font-size: 9px; padding: 0 4px 6px; }
  .cmp .meet .lane { width: 13px; height: 13px; font-size: 8px; }
  .cmp .meet { max-width: 68px; gap: 2px; }
  .lane { flex: none; }
  .who2 .lane { width: 18px; height: 18px; font-size: 11px; }
}
@media (min-width: 900px) {
  .cmp table { font-size: 15px; }
  .cmp th, .cmp td { padding: 8px 10px; }
  .cmp thead th { font-size: 12px; }
  .cmp td small, .cmp td.eff { font-size: 12px; }
  .cmp .meet { max-width: none; flex-wrap: nowrap; }
  .cmp .meet .lane { width: 18px; height: 18px; font-size: 11px; }
}
.steps, .grp { border-collapse: collapse; width: 100%; }
.steps th, .steps td, .grp td { padding: 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.steps th { white-space: nowrap; font-weight: 700; color: var(--sub); }
.steps td:nth-child(2) { white-space: nowrap; font-size: 15px; }
.grp td:first-child { width: 7em; }
.grp td:nth-child(2) { width: 4.5em; text-align: right; font-weight: 700; }
.gbar { position: relative; display: block; height: 8px; background: var(--bar-bg); border-radius: 4px; }
.gbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--sub); }
.gbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.gbar i.up { background: var(--up); }
.gbar i.down { background: var(--down); }

/* 6艇の比較（1画面）: 1艇を2行（展示・成績）＋効き方の行で出す */
.cmp.one tr.ra td, .cmp.one tr.ra th { border-bottom: 0; padding-bottom: 1px; }
.cmp.one tr.rb td { padding-top: 1px; }
.cmp.one tr.rb:has(+ tr.rc) td { border-bottom: 0; }
.cmp.one tr.rc td { text-align: left; font-size: 10px; padding-top: 0; white-space: normal; }
.cmp.one tr.rc span { margin-right: 8px; white-space: nowrap; }
.cmp.one thead tr.h2 th { color: var(--sub); font-weight: 400; border-bottom: 1px solid var(--line); }
.cmp.one thead tr:first-child th { border-bottom: 0; padding-bottom: 0; }
.cmp.one tbody th { vertical-align: top; }
.cmp.one td.pr { vertical-align: middle; border-left: 1px solid var(--line); }
.cmp.one td.pr span { display: block; line-height: 1.35; }
.cmp.one td.pr em { font-style: normal; color: var(--sub); font-size: 9px; margin-right: 3px; }
.cmp.one td.pr span.best { color: var(--accent); font-weight: 700; }
.cmp.one tr.rb td { color: var(--ink); }
@media (max-width: 700px) {
  .cmp.one tr.rc td { font-size: 9px; }
  .cmp.one td.pr { font-size: 10px; }
  .cmp.one td.pr em { font-size: 8px; }
}
@media (min-width: 900px) {
  .cmp.one tr.rc td { font-size: 12px; }
  .cmp.one td.pr em { font-size: 11px; }
}
.cmp.one .mt { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; color: var(--sub); }
.cmp.one .mt .lane { width: 14px; height: 14px; font-size: 9px; font-style: normal; border-radius: 4px; }
@media (min-width: 900px) { .cmp.one .mt .lane { width: 18px; height: 18px; font-size: 11px; } }
@media (max-width: 700px) {
  .cmp.one th, .cmp.one td { padding-left: 2px; padding-right: 2px; }
  .cmp.one .who2 { gap: 3px; }
  .cmp.one .who2 .lane { width: 16px; height: 16px; font-size: 10px; }
}

/* スマホ幅: 上の帯を1段に、まとめを小さく */
@media (max-width: 700px) {
  .top { padding: 6px 12px 6px; }
  .bar { flex-wrap: nowrap; gap: 6px; }
  .bar h1 { display: none; }
  .bar select { padding: 2px 4px; font-size: 14px; }
  .status { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .auto { padding: 2px 8px; font-size: 11px; white-space: nowrap; }
  .hl { white-space: nowrap; }
  .filters { margin-top: 4px; gap: 4px; }
  .seg button { padding: 4px 0; font-size: 13px; }
  main { padding: 8px 12px 40px; }
  .summary { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
  .tile { padding: 6px 10px; border-radius: 6px; }
  .tile small { font-size: 10px; }
  .tile b { font-size: 15px; }
  .body { padding: 2px 10px 10px; }
  .boat { grid-template-columns: 28px 1fr; gap: 2px 8px; }
  .boat .who { flex-direction: column; gap: 2px; }
}

/* 6艇の比較（縦に項目・横に6艇） */
.cmp.tr table { table-layout: fixed; }
.cmp.tr thead th { text-align: center; vertical-align: bottom; padding-bottom: 4px; }
.cmp.tr thead th .lane { display: flex; margin: 0 auto 2px; }
.cmp.tr thead th .bn { display: block; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp.tr thead th small { display: block; font-size: 9px; color: var(--sub); font-weight: 400; }
.cmp.tr thead tr th:first-child { width: 5.4em; }
/* T1205: 見出し欄（thead th:first-child の 4.6〜8em）は固定幅なので、長い見出しは折り返す（はみ出させない） */
.cmp.tr tbody th { font-size: 11px; font-weight: 700; color: var(--sub); white-space: normal; line-height: 1.2; }
.cmp.tr tbody td { text-align: center; }
/* 節の成績・勝負駆け: ボーダーとの差・要る着の値。幅が狭いセルでも折り返して欄からはみ出さない */
.cmp.tr td.skv { white-space: normal; line-height: 1.25; }
.cmp.tr tr.grp th { position: static; text-align: left; font-size: 10px; letter-spacing: .06em; color: var(--accent); background: var(--bar-bg); padding: 3px 6px; }
.cmp.tr td.effc { font-size: 9px; line-height: 1.3; }
.cmp.tr td.effc span { display: block; white-space: nowrap; }
.cmp.tr td.effc span + span { margin-top: 3px; }
.cmp.tr td.effc i { display: block; font-style: normal; }
@media (min-width: 700px) {
  .cmp.tr td.effc i { display: inline; }
  .cmp.tr td.effc b { display: block; }
  .cmp.tr td.effc i + i::before { content: "/"; color: var(--sub); }
}
.cmp.tr .meet { justify-content: center; flex-wrap: wrap; max-width: none; width: 100%; margin: 0; }
.cmp.tr .meet .lane { width: 13px; height: 13px; font-size: 8px; }
@media (max-width: 700px) {
  .cmp.tr thead tr th:first-child { width: 4.6em; }
  .cmp.tr th, .cmp.tr td { padding: 5px 2px; }
  .cmp.tr tbody th { font-size: 10px; padding-left: 4px; }
  .cmp.tr thead th .bn { font-size: 11px; white-space: normal; overflow: visible; line-height: 1.2; }
  .cmp.tr thead th .bn .giv { display: block; margin-left: 0; }
  .who2 b { white-space: normal; line-height: 1.2; }
  .who2 b .giv { display: block; margin-left: 0; }
}
@media (min-width: 900px) {
  .cmp.tr thead tr th:first-child { width: 8em; }
  .cmp.tr tbody th { font-size: 13px; }
  .cmp.tr td.effc, .cmp.tr thead th small { font-size: 11px; }
  .cmp.tr .meet .lane { width: 17px; height: 17px; font-size: 10px; }
}
.cmp.tr tbody td { overflow: hidden; }
@media (min-width: 900px) { .cmp.tr .meet { flex-wrap: nowrap; } }



/* 3連単の予想: どの確率かの印 */
.tri h4 .src { font-size: 11px; font-weight: 700; margin-left: 6px; padding: 0 6px; border-radius: 5px; color: var(--card); background: var(--accent); }
.tri h4 .src.model { background: var(--sub); }
.probsrc { margin: 8px 0 0; font-size: 12px; color: var(--sub); line-height: 1.5; }
.probsrc .src { font-size: 11px; font-weight: 700; margin-right: 6px; padding: 0 6px; border-radius: 5px; color: var(--card); background: var(--accent); }
.pc em.pm { opacity: .85; }
.trimodel { margin-top: 6px; }
.trimodel summary { font-size: 12px; color: var(--accent); cursor: pointer; }
.trimodel .trigrid { margin-top: 4px; opacity: .85; }

/* ST の帯（4つの帯の割合を数字で。一覧の艇）。見出しが上・% が下の小さな4列。各艇でいちばん多い帯を太字に（速=青・やや速=薄い青・やや遅=薄い赤・遅=赤） */
.stline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--sub); margin: 2px 0 0; }
.stline b { color: var(--ink); margin-left: 2px; }
.stline small { font-size: 11px; }
.sttab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 320px; margin: 2px 0 4px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font-size: 12px; font-variant-numeric: tabular-nums; }
.sttab span { display: flex; flex-direction: column; align-items: center; padding: 2px 0; color: var(--ink); }
.sttab span + span { border-left: 1px solid var(--line); }
.sttab small { font-size: 10px; color: var(--sub); }
.sttab .stTop { font-weight: 700; }
.sttab .stTop.fast, .cmp td.stTop.fast { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent); }
.sttab .stTop.slow, .cmp td.stTop.slow { background: color-mix(in srgb, var(--down) 14%, var(--card)); color: var(--down); }
.sttab .stTop.fast2, .cmp td.stTop.fast2 { background: color-mix(in srgb, var(--accent) 7%, var(--card)); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.sttab .stTop.slow2, .cmp td.stTop.slow2 { background: color-mix(in srgb, var(--down) 6%, var(--card)); color: color-mix(in srgb, var(--down) 70%, var(--ink)); }
.cmp td.stTop { font-weight: 700; }
/* 6艇比較の帯の見出しは2段（速・普通・遅 の下に範囲）。見出しの列が狭くても数字と重ならない */
.cmp tbody th.stb { white-space: normal; line-height: 1.15; }
.cmp tbody th.stb small { display: block; font-size: 9px; color: var(--sub); }

/* 6艇比較: 確率のセルの中の「場平均との差」（小さく、確率の下に） */
.cmp td small.vsb { display: block; font-size: 10px; font-weight: 400; line-height: 1.2; }
.cmp td small.vsb.up { color: var(--up, #1b7f3b); }
.cmp td small.vsb.down { color: var(--down); }

/* 6艇比較の一番上のスタート隊形の図 */
.formation { margin: 0 0 8px; }
.formation .fm-h { font-size: 12px; font-weight: 700; color: var(--sub); margin: 0 0 2px; text-align: left; }
.formation svg { display: block; max-width: 520px; }
.formation .note { margin-top: 0; }

/* スタート隊形の行（6艇比較の表の中、ST の行の上） */
.cmp tr.fmrow td { text-align: left; white-space: normal; padding: 6px 4px; }
/* 効きの折りたたみ（見出しの行をタップで開閉。既定は閉じる） */
.cmp tr.efft th { cursor: pointer; }
.cmp tr.efft .efft-m::after { content: " ▸"; }
.cmp tbody.effbody.open tr.efft .efft-m::after { content: " ▾"; }
.cmp tbody.effbody:not(.open) tr:not(.efft) { display: none; }

/* 6艇比較: 下へスクロールしても、艇の見出し（上の行）がついてくる。進入が枠と違うときも、どの列がどの艇か分かるように
   表は幅いっぱいで横にはみ出さないので、横スクロールの箱をやめて、小窓の本文（縦スクロール）に対して貼り付ける */
.cmp.tr { overflow: visible; }
.cmp.tr table { border-collapse: separate; border-spacing: 0; }
.cmp.tr thead { position: sticky; top: 0; z-index: 5; }
.cmp.tr thead th { background: var(--card); box-shadow: none; }

/* 展開の目安（1マーク手前の図の上） */
.formation .scn { margin: 0 0 4px; font-size: 12px; line-height: 1.5; }
.formation .scn span { white-space: nowrap; }
.formation .scn.wall { font-size: 11.5px; margin: 0 0 6px; padding-left: 6px; border-left: 3px solid var(--bar3); }
.formation .scn.wall .wall-n { color: var(--sub); font-size: 10.5px; }

/* スタートの瞬間の図の見出しの右に、天候・風・波・潮位を1行で */
.formation .fm-info { display: block; font-size: 11px; font-weight: 400; color: var(--sub); white-space: nowrap; margin-top: 1px; }
.formation .fm-info .wind { vertical-align: -1px; margin: 0 1px; color: var(--ink); }
.formation .fm-info .wind { display: inline-block; }

/* ---- どのページにもある: 名前・ページの行き来・下の帯 ---- */
.brand { display: block; line-height: 0; text-decoration: none; }
.brand img { display: block; height: 22px; width: auto; }
.gnav { display: flex; gap: 14px; margin-left: auto; font-size: 14px; }
.gnav a { color: var(--accent); text-decoration: none; }
.foot { border-top: 1px solid var(--line); background: var(--card); padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: var(--sub); }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
.foot a { color: var(--sub); }
.foot p { margin: 8px 0 0; font-size: 11px; }
.help .bar h1 { margin-left: auto; }
.doc h1 { font-size: 20px; margin: 12px 0 4px; }

/* ---- トップ（地図と今日の開催場） ---- */
.home main { max-width: 760px; }
.ttl { font-size: 18px; margin: 4px 0 2px; }
.lead { margin: 0 0 10px; font-size: 13px; color: var(--sub); }
.daymap h2 { font-size: 15px; margin: 0 0 6px; }
.map { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.map svg { display: block; width: 100%; height: auto; }
.map .land path { fill: var(--card); stroke: color-mix(in srgb, var(--sub) 60%, transparent); stroke-width: 1; stroke-linejoin: round; }
.map text { text-anchor: middle; font-size: 10px; }
.map .vp.off rect { fill: var(--bar-bg); }
.map .vp.off text { fill: var(--sub); opacity: .55; }
.map .vp.on rect { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; }
.map .vp.on.hg rect { stroke: var(--live); }
.map .vp.on .nm { font-weight: 700; fill: var(--ink); }
.map .vp.on .tm { font-size: 8.5px; fill: var(--sub); }
.map .vp.on:hover rect, .map .vp.on:focus rect { fill: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.legend { margin: 4px 0 12px; font-size: 11px; color: var(--sub); }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vlist a { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; color: inherit; text-decoration: none; box-shadow: none; }
.vlist .vn { font-weight: 700; font-size: 16px; }
.vlist .vh { text-align: right; font-size: 14px; white-space: nowrap; }
.vlist .vh small { color: var(--sub); font-size: 11px; margin-left: 4px; }
.vlist .vt { grid-row: 2; font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vlist .vs { grid-row: 2; text-align: right; font-size: 12px; color: var(--live); white-space: nowrap; }
.vlist .vs.done { color: var(--sub); }
.gtag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--live); vertical-align: 2px; }
.allb { display: block; margin: 12px 0 0; padding: 10px; text-align: center; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); text-decoration: none; font-weight: 700; }
@media (min-width: 700px) { .vlist { grid-template-columns: 1fr 1fr; } }

/* ---- 見方のページ: 目次と図の説明 ---- */
.toc2 { margin: 6px 0 8px; padding-left: 1.4em; columns: 2; column-gap: 16px; font-size: 14px; }
.toc2 a { color: var(--accent); text-decoration: none; }
.figs { margin: 4px 0; }
.figs dt { font-weight: 700; margin-top: 8px; }
.figs dd { margin: 0; font-size: 14px; }
@media (max-width: 420px) { .toc2 { columns: 1; } }

/* ---- レース一覧の1行（T855）: 締切まで・場とレース・固さ／（終わったら結果の行）／予想の上位6通り／見どころと「詳細」。行を押すと6艇比較 ---- */
.tabs { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs :is(button, a) { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 5px; padding: 3px 9px; font-size: 13px; cursor: pointer; }
.tabs :is(button, a) small { color: var(--sub); font-size: 11px; margin-left: 3px; }
.tabs :is(button, a).on { border-color: var(--accent); background: var(--accent); color: #fff; }
.tabs :is(button, a).on small { color: inherit; opacity: .8; }
/* 見方のページへの小さな「?」 */
.q { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 50%; color: var(--accent); font-size: 10px; font-weight: 700; line-height: 1; text-decoration: none; vertical-align: 1px; flex: none; }
.tile small .q { vertical-align: 0; }
.tile b small { display: inline; font-size: 12px; color: var(--sub); font-weight: 400; margin-left: 4px; }
.tile small.tn { font-size: 11px; line-height: 1.4; margin-top: 2px; }
article.race { position: relative; cursor: pointer; padding: 10px 12px 0; }
/* 行全体がレースのページへのリンク（stretched link。T341）: 場と R の <a> の ::after を行いっぱいに広げる。黄色の札（⚠）と「?」は上に重ねて別のリンクのまま */
.race .rl { color: inherit; text-decoration: none; }
.race .rl::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.race .rl:focus-visible { outline: none; }
.race:has(.rl:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.race .lcmk[href], .race .r2 .q { position: relative; z-index: 1; }
/* レースのページの一番上の見出し（同じ行の部品。リンク無し） */
article.race.page { cursor: auto; padding-bottom: 10px; }
.race .r1 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.race .when { min-width: 84px; display: flex; flex-direction: column; }
.race .when b { font-size: 20px; line-height: 1.15; white-space: nowrap; }
.race .when b.soon { color: var(--live); }
.race .when b.res { letter-spacing: .5px; }
.race .when b.res { color: var(--sub); }
.race .when small { font-size: 11px; color: var(--sub); white-space: nowrap; }
.race .rc { min-width: 0; }
.race .rc .nm { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race .rc .grade { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--live); vertical-align: 1px; }
.race .rc .p1 { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race .side { text-align: right; white-space: nowrap; }
.race .firm { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.race .firm.f1 { color: var(--up); background: color-mix(in srgb, var(--up) 13%, var(--card)); }
.race .firm.f2 { color: var(--pre); background: color-mix(in srgb, var(--pre) 13%, var(--card)); }
.race .firm.f3 { color: var(--down); background: color-mix(in srgb, var(--down) 12%, var(--card)); }
.race .ease { font-size: 11px; color: var(--sub); margin-top: 3px; }
.race .ease b { font-size: 14px; color: var(--ink); margin-left: 2px; }
/* 終わったレースの結果の行（T899）: 当たりは朱で「的中（予想の○番目）」、外れは灰色で「ハズレ」（色だけで分けない） */
.race .rres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; padding: 4px 8px; border-radius: 6px; font-size: 13px; }
.race .rres b { font-size: 16px; letter-spacing: .5px; }
.race .rres em { font-style: normal; font-weight: 700; margin-left: auto; }
.race .rres.hit { color: var(--live); background: color-mix(in srgb, var(--live) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--live) 45%, transparent); }
.race .rres.miss { color: var(--sub); background: var(--bar-bg); border: 1px solid var(--line); }
/* 予想の上位6通り: 狭い幅は3つずつ2行、広い幅は1行に6つ */
.race .r2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.race .c6 { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 700px) { .race .c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.race .c3 { min-width: 0; text-align: center; white-space: nowrap; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 3px; background: var(--bar-bg); overflow: hidden; }
.race .c3 small { font-size: 11px; color: var(--sub); margin-left: 3px; }
.race .c3.hit { color: var(--live); border-color: var(--live); background: color-mix(in srgb, var(--live) 9%, var(--card)); font-weight: 700; }
.race .c3 .hk { font-style: normal; margin-right: 2px; }
.race .c3 > span { display: block; }
.race .c3 small.co { display: block; margin: 0; font-size: 11px; line-height: 1.25; color: var(--ink); }
.race .c3.hit small.co { color: inherit; }
/* 6通りの上の見出し: 「予想の上位6通り」と、倍率の時点（変動中・確定） */
.race .cap { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 8px; font-size: 11px; color: var(--sub); }
.race .cap .on { margin-left: auto; }
.race .cap .on.fin { color: var(--ink); font-weight: 700; }
.race .rres + .cap { margin-top: 6px; }
.race .c3.none { flex: 1 1 0; color: var(--sub); font-size: 12px; }
/* 「詳細」の中の結果の1行（終わったレース） */
.body .resl { margin: 6px 0 0; font-size: 13px; }
.body .resl small { display: block; font-size: 11px; color: var(--sub); }
.race .lchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.race .lc { font-size: 11px; line-height: 1.6; border-radius: 4px; padding: 0 5px; color: var(--live); background: color-mix(in srgb, var(--live) 11%, var(--card)); white-space: nowrap; }
/* 1行に1つの「?」。押しやすいよう、見た目の外側に押せる範囲を足す */
.race .r2 .q { position: relative; }
.race .r2 .q::after { content: ""; position: absolute; inset: -10px -8px; }
.race .lc.gray { color: var(--sub); background: var(--bar-bg); }
/* 勝負駆け（T895）: 一覧の印と、6艇比較の「際どい」（灰色） */
.race .lc.shobu { color: var(--pre); background: color-mix(in srgb, var(--pre) 12%, var(--card)); font-weight: 700; }
/* 狙い目の箱（29766c85/T216）: 一覧の行の 1 行と、レースのページの 24 組 */
.race .bx4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12px; }
.race .bx4 .lc.bx { color: var(--pre); background: color-mix(in srgb, var(--pre) 12%, var(--card)); font-weight: 700; }
.race .bx4 small { color: var(--sub); }
.race .bx4 .bxr { font-style: normal; font-weight: 700; color: var(--sub); margin-left: auto; }
.race .bx4 .bxr.hit { color: var(--live); }
.bx4g .bxg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bx4g .bxc { display: flex; justify-content: center; border: 1px solid var(--line); border-radius: 6px; padding: 4px 0; }
.bx4g .bxc.hit { background: var(--hit); }
.cmp .skclose { display: block; font-size: 10px; color: var(--sub); background: var(--bar-bg); border-radius: 3px; padding: 0 3px; margin-top: 2px; }
/* 行の一番下の帯（幅いっぱい・高さ 44px。T873 の「詳細」の帯）: T341 から行全体がレースのページへのリンクで、帯はその目印（span） */
.race .detb { display: grid; place-items: center; width: calc(100% + 24px); min-height: 44px; margin: 8px -12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; background: color-mix(in srgb, var(--accent) 5%, var(--card)); color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; }
.race:hover .detb { background: color-mix(in srgb, var(--accent) 11%, var(--card)); }
@media (max-width: 700px) {
  article.race { padding: 8px 10px 0; }
  .race .detb { width: calc(100% + 20px); margin: 6px -10px 0; }
}
.doc [id] { scroll-margin-top: 90px; }

/* ---- お知らせ（トップの場の並びの下の1行と、お知らせのページ。T889） ---- */
.newsl { display: block; margin: 6px 0 0; font-size: 12px; color: var(--sub); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newsl:hover { color: var(--accent); }
.news .nw { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.news .nw:first-of-type { border-top: 0; }
.news .nw h2 { font-size: 15px; margin: 0 0 4px; }
.news .nw time { display: block; font-size: 12px; font-weight: 400; color: var(--sub); }
.news .nw p { margin: 0 0 6px; }

/* 選手の名前（.hb）は選手のページへのリンク（T341。前は小窓） */
.hb { cursor: pointer; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.htabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.htabs button { flex: 1; border: 1px solid var(--line); background: var(--bar-bg); color: var(--ink); border-radius: 6px; padding: 8px 0; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; }
.htabs button.on { background: var(--ink); color: var(--card); }
.hsum { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 6px; font-weight: 700; }
table.hist { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.hist th, table.hist td { padding: 4px 3px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
table.hist th { font-size: 10px; color: var(--sub); font-weight: 700; }
table.hist td.hd, table.hist td.hv { text-align: left; }
table.hist td.hp { font-weight: 700; }
table.hist td.hp.w { color: #c0392b; }
table.hist td.hp.x { color: var(--down); font-size: 11px; }
table.mkp td.hd .hv { margin-left: 4px; }
table.mkp th, table.mkp td { padding: 4px 2px; }
table.hist td.hg { color: var(--sub); font-size: 11px; }

/* 一覧のページの上の帯（T239・T244）: 1段目は左にロゴ・中央に更新・右に見方、2段目は左から これから／終了・場の折りたたみ・日付 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.barc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.barc .brand { justify-self: start; }
.barc .hl { justify-self: end; }
.barc .status { justify-self: center; margin-left: 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow { display: flex; align-items: center; gap: 6px; }
.frow select { margin-left: auto; padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 13px; }
.frow .tabs { flex: none; }
.vbox { flex: 0 1 auto; min-width: 0; }
.vbox summary { overflow: hidden; text-overflow: ellipsis; }
.vbox summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; font-size: 13px; background: var(--card); white-space: nowrap; }
.vbox summary::-webkit-details-marker { display: none; }
.vbox summary::after { content: " ▾"; color: var(--sub); }
.vbox[open] summary::after { content: " ▴"; }
.vbox summary b { font-weight: 700; }
.vpick { flex-wrap: wrap; overflow: visible; }
.filters:has(.vbox:not([open])) .vpick { display: none; }
.cap .cf { margin-left: 6px; font-weight: 700; color: var(--accent); }
.cap .cf.ev { color: var(--sub); font-weight: 400; }
.vpick .evl { align-self: center; font-size: 12px; color: var(--sub); }

/* 買い方の目安（T314。6艇比較の下） */
.betg { margin-top: 12px; }
.betg h3 { font-size: 14px; margin: 0 0 4px; }
.betg table { width: 100%; border-collapse: collapse; font-size: 12px; }
.betg .betx { font-size: 12px; margin: 6px 0 0; }
.betg .betx small { margin-left: 4px; color: var(--muted, #666); }
.betg th, .betg td { border-top: 1px solid var(--line); padding: 4px; text-align: left; vertical-align: top; }
.betg small { display: block; color: var(--sub); font-size: 10px; }
.betg tr.on td b, .betg tr.on th { color: var(--accent); }

/* 注意の印 */
.cmk { margin-left: 2px; font-size: 11px; font-weight: 400; color: #8a6d00; letter-spacing: -.5px; }
/* 着の出方の型の札（T376。級の横に小さく。⚠ は名前の後ろなので重ならない） */
.fmk { display: inline-block; margin-left: 4px; padding: 0 3px; border-radius: 3px; font-size: 9px; line-height: 1.4; font-weight: 400; white-space: nowrap; vertical-align: 1px; border: 1px solid currentColor; }
.fmk-b { color: #b4442c; }
.fmk-s { color: #2d6aa3; }
@media (prefers-color-scheme: dark) { .fmk-b { color: #f08a6e; } .fmk-s { color: #7fb3e6; } }
.rcr .fin { margin: 10px 0 4px; }
.rcr .fin .fmk { font-size: 12px; margin-left: 0; margin-right: 6px; padding: 1px 6px; vertical-align: 0; }
.rcr .fin p { margin: 4px 0; }
.rcr .fin .fnum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
/* 名前の最後の1文字と印を折り返さない塊に（T331: 印だけが次の行に落ちない） */
.nw { white-space: nowrap; }
/* 一覧の行の注意の印（T319）: 見つけやすい黄色の札。T331: 場名の下の行に並べ、場名を押し出さない（多いときは折り返す） */
.lcks { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 2px 0 1px; }
.lcmk { display: inline-block; padding: 0 5px; border-radius: 5px; font-size: 12px; font-weight: 700; line-height: 1.45; color: #1a1400; background: #f5c542; white-space: nowrap; }

/* ---- ⚠の選手（marked.html。T322） ---- */
.barc .hlr { justify-self: end; display: flex; gap: 10px; white-space: nowrap; }
.mkl { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; }
.mkr { border: 1px solid var(--line); border-radius: 8px; background: var(--card); min-width: 0; }
a.mkr { display: block; color: inherit; text-decoration: none; }
a.mkr:hover { border-color: var(--accent); }
/* T331: 印 | 名前・勝率・飛び・次の出走（縦に積む） | ▾ の3列。印は左の列に固定して名前の行とそろえる */
.mkh { display: grid; grid-template-columns: 3.3em minmax(0, 1fr) auto; align-items: start; gap: 0 8px; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mkh > .cmk { margin: 0; color: #c99a00; font-size: 15px; line-height: 22px; white-space: nowrap; }
.mkm2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; line-height: 22px; }
.mkw b { font-size: 15px; }
.mkw small { color: var(--sub); font-size: 12px; white-space: nowrap; }
.mkw .mkc { font-style: normal; font-weight: 700; color: var(--ink); }
.mks { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.mks > span { white-space: nowrap; }
.mks b { color: var(--ink); margin-left: 1px; }
.mks .mkps b { color: var(--down); }
.mkn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.mkn .lane { width: 18px; height: 18px; font-size: 11px; }
.mka { color: var(--sub); font-size: 12px; line-height: 22px; }
.mkb { padding: 0 10px 10px; border-top: 1px solid var(--line); min-width: 0; overflow-x: auto; }
.mkb h2 { font-size: 13px; margin: 10px 0 4px; color: var(--sub); }
.mke { margin: 4px 0; font-size: 13px; }
.mku { display: flex; flex-direction: column; }
.mku a { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.mku .lane { width: 20px; height: 20px; font-size: 12px; }
.mud { white-space: nowrap; }
.muv { white-space: nowrap; font-weight: 700; }
.mut { white-space: nowrap; color: var(--sub); }
.mut small { margin: 0 2px 0 1px; font-size: 10px; }
.mug { margin-left: auto; color: var(--accent); }
.mkp .lane { width: 18px; height: 18px; font-size: 11px; }
.lcmk[href] { text-decoration: none; }
.mkr { scroll-margin-top: 100px; }
.mkwhy { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0; }
.mkwhy span { padding: 1px 8px; border-radius: 10px; background: #fff3c4; color: #6b5200; font-size: 12px; }
.mky th { padding: 6px 2px 2px; text-align: left; font-size: 12px; color: var(--sub); background: none; }
.mkm { display: block; width: 100%; margin: 6px 0 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.mkrate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 8px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.mkrate small { color: var(--sub); font-size: 11px; }
table.mkpt { max-width: 520px; }
table.mkpt th[colspan] { border-bottom: 0; padding-bottom: 0; }
table.mkpt tbody th { text-align: left; font-size: 12px; color: var(--ink); font-weight: 400; }
table.mkpt td small { margin-left: 3px; font-size: 10px; color: var(--sub); }
table.mkpt td.mko { font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .mkwhy span { background: #3d3200; color: #ffdf73; }
  .cmk { color: #f0c43c; }
  .mkh > .cmk { color: #f5c542; }
}

/* ---- レースのページ（race.html）と選手のページ（racer.html）。T341: 小窓をやめてページに ---- */
.rp, .rcr { max-width: 1280px; }
.rcr { max-width: 760px; }
.rp h2, .rcr h2 { font-size: 15px; margin: 18px 0 6px; scroll-margin-top: calc(var(--hdr, 0px) + 8px); }
.rcr h2 { font-size: 13px; color: var(--sub); margin: 14px 0 4px; }
.rcr h2 small { font-weight: 400; margin-left: 6px; }
.rcr h1 { font-size: 20px; margin: 4px 0 8px; line-height: 1.3; }
.rcr h1 small { font-size: 12px; color: var(--sub); font-weight: 400; margin-left: 6px; }
.rcr h1 .cmk { font-size: 15px; color: #c99a00; }
@media (prefers-color-scheme: dark) { .rcr h1 .cmk { color: #f5c542; } }
.rnav { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; }
.rnav a, .rnav .off { display: inline-grid; place-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.rnav .off { color: var(--sub); opacity: .6; }
.rnav .sp { flex: 1; }
.rp .note, .rcr .note { font-size: 11px; color: var(--sub); margin: 6px 0 0; }
.rp h4.sub { margin: 12px 0 4px; font-size: 12px; color: var(--sub); }
.rp #detail .body { padding: 0; }
.rp #cmp .cmp { background: var(--card); }
/* 1着の確率の根拠: 艇の欄の中の開閉（前は小窓） */
.basisd summary { color: var(--accent); font-size: 12px; cursor: pointer; }
.basisd[open] { padding: 4px 8px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.basisd .steps, .basisd .grp { font-size: 12px; margin-top: 6px; }
.basisd .steps td:nth-child(2) { font-size: 14px; }


/* レースのページ: 見出しが上の帯に隠れたら、帯の真ん中に「場・R・締切」を出す（T385） */
.barc .rnow { grid-column: 2; grid-row: 1; justify-self: center; display: none; gap: 6px; align-items: baseline; white-space: nowrap; font-size: 13px; min-width: 0; overflow: hidden; }
.barc .rnow small { font-size: 11px; color: var(--sub); }
.barc .rnow .res, .barc .rnow .soon { color: var(--accent); }
.barc .status { grid-column: 2; grid-row: 1; }
.top.stuck .rnow { display: flex; }
.top.stuck .status { visibility: hidden; }
@media (max-width: 600px) { .barc .rnow small { display: none; } .barc .rnow { font-size: 12px; gap: 4px; } }
.mres .mrd { margin: 8px 0 0; font-size: 12px; color: var(--sub); }
.mresw { margin-top: 8px; }
.mresw h4 { margin: 0 0 2px; font-size: 13px; }
/* 6 艇の結果は横スクロールさせず、画面の幅で 6 等分（T405）。名前は切り、ST と順位は折り返す */
.mrs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; overflow: visible; }
tr.rrow .mrs { max-width: none; }
.mr { min-width: 0; padding: 2px 1px; }
.mr em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr i { white-space: normal; text-align: center; word-break: keep-all; }
.boat > .mresw { grid-column: 1 / -1; grid-row: auto; } /* T103: 広い幅で 1 行目に重なっていた */
/* T406: 6 艇の結果の文字がはみ出しても、ページ全体が横に広がらないように切る（clip は貼り付けの見出しを壊さない） */
.mrs, .mr { overflow: hidden; }
.mr i { word-break: normal; overflow-wrap: anywhere; }
main { overflow-x: clip; }
/* T406: レースのページでは 6艇比較の艇の見出しを、上の帯の下に貼り付ける（帯の高さは race.js が --hdr に入れる） */
.rp .cmp.tr thead { top: var(--hdr, 0px); }
/* T407: 6 艇の結果の各艇は押すとその選手のページ。姓と名を 2 行、級を小さく */
a.mr { color: inherit; text-decoration: none; }
.mr em + em { font-size: 9px; color: var(--sub); }
.mr .mcls { font-size: 9px; font-weight: 400; color: var(--sub); }
/* T411: 6艇比較の見出しは上でそろえる（⚠ で名前が 3 行になって枠の札がずれていた）。⚠ は級の下の行に */
.cmp.tr thead th { vertical-align: top; }
.cmp.tr thead th .hcmk { display: block; line-height: 1; }

/* T412: 赤の ⚠（1 コースで格下に負けやすい）。--down は明るい地・暗い地で切り替わる */
.cmk.red, .mkh > .cmk.red, .rcr h1 .cmk.red { color: var(--down); }
.lcmk.red { background: var(--down); color: #fff; }
.mkwhy span.red { background: color-mix(in srgb, var(--down) 16%, var(--card)); color: var(--down); font-weight: 700; }
@media (prefers-color-scheme: dark) { .lcmk.red { color: #2a0a07; } }

/* 1コースの選手が負けるとき、何コースに負けることが多いか（T417） */
.lby { margin: 8px 0; font-size: 12px; line-height: 1.5; max-width: 420px; }
.lby .lbt { margin: 0 0 4px; overflow-wrap: anywhere; }
.lby .lbwl { display: block; font-size: 13px; margin: 2px 0; }
.lby .lbt small { display: block; font-size: 11px; color: var(--sub); }
.lby .lbh, .lby .lbr { display: grid; grid-template-columns: 22px 1fr 38px 40px; align-items: center; gap: 6px; }
.lby .lbh { font-size: 10px; color: var(--sub); }
.lby .lbh span:last-child { text-align: right; }
.lby .lbr { padding: 2px 0; }
.lby .lbc { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 4px; font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.lby .lbb { position: relative; height: 12px; background: var(--bar-bg); border-radius: 3px; }
.lby .lbb i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar2); border-radius: 3px; }
.lby .lbb u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); text-decoration: none; }
.lby .lbn { text-align: right; font-variant-numeric: tabular-nums; }
.lby .lbd { text-align: right; font-variant-numeric: tabular-nums; color: var(--sub); }
.lby .lbr.hi:not(.kd) .lbb i { background: var(--down); }
.lby .lbb { display: flex; overflow: visible; }
.lby .lbb i { position: static; height: 100%; flex: none; border-radius: 0; }
.lby .lbb i:first-child { border-radius: 3px 0 0 3px; } .lby .lbb i:last-of-type { border-radius: 0 3px 3px 0; } .lby .lbb i:only-of-type { border-radius: 3px; }
.lby .lbb u { position: absolute; }
.lby i.k0 { background: var(--k0); } .lby i.k1 { background: var(--k1); } .lby i.k2 { background: var(--k2); } .lby i.k3 { background: var(--k3); } .lby i.k4 { background: var(--k4); } .lby i.k5 { background: var(--k5); }
.lby .lbk { grid-column: 2 / 5; margin: -1px 0 3px; font-size: 10px; color: var(--sub); line-height: 1.3; overflow-wrap: anywhere; }
.lby .lbl { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0 2px; font-size: 10px; color: var(--sub); }
.lby .lbl span { display: inline-flex; align-items: center; gap: 3px; } .lby .lbl i { width: 10px; height: 10px; border-radius: 2px; }
.lby .lbs { margin: 2px 0 0; font-size: 12px; overflow-wrap: anywhere; } .lby .lbs small { display: block; font-size: 10px; color: var(--sub); }
.lby .lbs .hi { color: var(--down); font-weight: 700; }
.lby .lbr.hi .lbn, .lby .lbr.hi .lbd { color: var(--down); font-weight: 700; }

/* ---- オッズの急な動き（29766c85/T10。web/flags.js）: レースのページの一行の注意・選手のページと ⚠選手 のタブの一覧 ---- */
.ofl { margin: 0 0 10px; border: 1px solid var(--line); border-left: 4px solid #f5c542; border-radius: 8px; background: var(--card); font-size: 13px; }
.ofl > summary { padding: 8px 10px; line-height: 1.5; cursor: pointer; }
.ofl .ofm { color: #c99a00; font-weight: 700; }
.ofl .ofb { padding: 0 10px 10px; min-width: 0; overflow-x: auto; }
.ofx { margin: 6px 0; line-height: 1.6; }
.ofx small { display: block; color: var(--sub); font-size: 12px; }
table.oft { max-width: 520px; font-variant-numeric: tabular-nums; }
table.oft td, table.oft th { text-align: right; }
table.oft td:first-child, table.oft th:first-child { text-align: left; }
.ofr { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.ofr .ofh { display: flex; align-items: baseline; gap: 8px; }
.ofr .ofh b { font-size: 15px; }
.ofr .ofh small { color: var(--sub); font-size: 11px; }
.ofr .ofh .mka { margin-left: auto; }
.ofr .ofs { font-size: 13px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.ofr .ofs.muted { font-size: 12px; }
.ofgone { opacity: .75; }
.ofgone .ofh small:last-child { margin-left: auto; }
@media (prefers-color-scheme: dark) { .ofl .ofm { color: #f5c542; } }

/* ---- 1号艇が飛んだレース（29766c85/T18。web/lost.js）: 絞り込みのフォームと一覧の行 ---- */
.lostf { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; }
.lostf[hidden] { display: none; }
.lfr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.lfl { flex: none; color: var(--sub); font-size: 12px; min-width: 2.4em; }
.lfh { flex-basis: 100%; color: var(--sub); font-size: 11px; line-height: 1.4; }
.lostf .seg { flex: 1 1 auto; max-width: 280px; }
.lostf .seg button { padding: 4px 0; font-size: 13px; }
.lfk { display: flex; gap: 4px; }
.lfk button { border: 1px solid var(--line); background: var(--card); border-radius: 5px; padding: 3px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.lfk button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.lostf select, .lostf input { min-width: 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: inherit; font: inherit; font-size: 13px; }
.lostf select { flex: 1 1 8em; max-width: 12em; }
.lostf input[type="date"] { flex: 1 1 9em; max-width: 11em; }
.lostf input[type="search"] { flex: 1 1 8em; max-width: 12em; }
.lostf input[type="number"] { flex: 0 1 5em; width: 5em; }
.lfc { justify-content: space-between; }
.lfc small { color: var(--sub); font-size: 11px; margin-left: 4px; }
.lfx { border: 1px solid var(--line); background: transparent; border-radius: 5px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.lr.lrf { border-left: 4px solid #f5c542; }
.lr .lrb { font-size: 11px; font-weight: 700; color: #8a6a00; border: 1px solid #f5c542; border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.lr .lrw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.lr .lrw small { color: var(--sub); font-size: 11px; }
@media (prefers-color-scheme: dark) { .lr .lrb { color: #f5c542; } }

/* 1号艇の負け方 × 相手の勝ち方（29766c85/T23）。2 列（左 = 負け・右 = 勝ち）。狭い幅でも 2 列のまま、行の先頭だけ全幅 */
.lby.lbm { max-width: 560px; }
.lby .lbhh, .lby .lbq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; }
.lby .lbhh { font-size: 11px; font-weight: 700; margin: 4px 0 2px; } .lby .lbhh small { display: block; font-weight: 400; color: var(--sub); font-size: 10px; }
.lby .lbq { padding: 4px 4px 3px; margin: 0; border-radius: 6px; border-left: 3px solid transparent; }
.lby .lbq.fit { background: var(--fit-bg); border-left-color: var(--fit-bd); }
.lby .lbw { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.lby .lbw b { overflow-wrap: anywhere; }
.lby .lbf { font-style: normal; font-weight: 700; font-size: 11px; color: var(--fit-ink); background: var(--fit-bg2); border-radius: 10px; padding: 0 8px; }
.lby .lbf small { font-weight: 400; margin-left: 4px; font-size: 10px; }
.lby .lbL, .lby .lbR { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 6px; min-width: 0; }
.lby .lbL .lbk, .lby .lbR .lbk { grid-column: 1 / 4; }
.lby .lbx { grid-column: 1 / 4; text-align: left; color: var(--sub); }
.lby .lbl2 { margin: 2px 0 0; font-size: 10px; color: var(--sub); line-height: 1.4; }
:root { --fit-bg: #fff4e0; --fit-bg2: #f7c873; --fit-bd: #e08a1e; --fit-ink: #4a2f00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fit-bg: #3a2e18; --fit-bg2: #8a6420; --fit-bd: #f0a346; --fit-ink: #fff3dc; } }
:root[data-theme="dark"] { --fit-bg: #3a2e18; --fit-bg2: #8a6420; --fit-bd: #f0a346; --fit-ink: #fff3dc; }

/* 買い方の目安（web/value.js。T98・T100・T103、29766c85/T151〜T155 で 1 つの表と 1 つの格子に）: 点数の表 → 組の格子（1 つの箱）→ 小さな 3 行 */
.rp #value h2 { display: flex; align-items: baseline; gap: 6px; }
.rp #value h2 small { font-size: 11px; font-weight: 400; color: var(--sub); }
.bx { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 0; }
/* 点数の表（スマホ 390px 基準の 5 列。数字は 15px・横にはみ出さない。T153）。行を押すと格子の強調と金額の札が切り替わる（tr.sel）。回収見込みが最も高いセルは太枠（td.best） */
.vt { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; margin: 0 0 8px; table-layout: fixed; }
.vt th, .vt td { padding: 4px 3px; border-bottom: 1px solid var(--line); text-align: center; line-height: 1.25; vertical-align: top; }
.vt thead th { font-size: 10px; color: var(--sub); font-weight: 700; padding: 2px 3px; vertical-align: bottom; }
.vt thead th small { display: block; font-size: 9px; font-weight: 400; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt thead th:first-child { width: 76px; text-align: left; vertical-align: bottom; }
.vt tbody th { text-align: left; font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; }
.vt tbody th small, .vt tbody td small { display: block; font-size: 10px; font-weight: 400; color: var(--sub); white-space: nowrap; }
.vt tbody td small.hit { color: var(--live); font-weight: 700; }
.vt tbody td small.miss { color: var(--sub); }
.vt tbody tr { cursor: pointer; }
.vt tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vt tbody tr.sel th, .vt tbody tr.sel td { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.vt tbody tr.sel th { box-shadow: inset 3px 0 0 var(--accent); }
.vt tbody td.best { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-weight: 700; border-radius: 4px; }
.vt tbody tr:last-child th, .vt tbody tr:last-child td { border-bottom: 0; }
/* 組の格子（予想の上位24組を順位どおりに。6・12・18 位のあとに区切り「ここまで6点」。選んだ点数の範囲は in。回収重視の金額の札は em） */
.bgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.bc { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; font-size: 12px; }
.bc small { font-size: 12px; white-space: nowrap; }
/* 最良の出目の印（24組の中で回収見込みが最も高い組。T173。暫定は ☆） */
.bst { font-style: normal; color: var(--accent); font-size: 12px; margin: 0 1px; }
.bst.early { opacity: .75; }
.vg .bc.in { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.bc.hit { border-color: var(--live); color: var(--live); font-weight: 700; box-shadow: inset 0 0 0 1px var(--live); }
.bx .hk { font-style: normal; color: var(--live); margin-right: 1px; }
.bc .hk { position: absolute; top: -8px; left: -4px; font-size: 11px; line-height: 1; padding: 1px 2px; background: var(--card); border-radius: 3px; }
/* 格子のマスは全部同じ高さ（倍率の折り返しで変わらない。T161）: 1 行・折り返しなし（広い幅 30px・スマホ幅 28px） */
.vg .bc { flex-wrap: nowrap; height: 30px; box-sizing: border-box; padding: 0 5px; }
/* ケリー配分（参考）の枠（T171）: 見出し・「上位12点のうち 確率×オッズが1を超える N組 に 1,200円」・買う組と金額（kc）・終わったら結果（bxr） */
.kbx { margin-top: 8px; }
.kbx h3 { font-size: 13px; margin: 0 0 4px; }
.kbx h3 small { font-size: 10px; font-weight: 400; color: var(--sub); margin-left: 4px; }
.kbh { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.kbh b { white-space: nowrap; }
.kbs { margin: 0 0 6px; font-size: 12px; color: var(--sub); }
.kbs b { color: var(--ink); }
/* 寄せ買いの組のマス（T187）: 格子と同じ部品（組・倍率）の下に金額。高さは金額のぶんだけ高い */
.kbl .bc { height: auto; flex-wrap: wrap; padding: 3px 5px; }
.kbl .bc em { flex-basis: 100%; width: fit-content; font-style: normal; font-weight: 700; font-size: 11px; margin-top: 2px; padding: 0 5px; border-radius: 3px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); white-space: nowrap; }
/* 一覧の上位6通りの下の寄せ買い（T182・T187）: 1 行「寄せ買い 当たる3%・見込み111%」と、6通りと同じ形のマス（色付きの番号・倍率、下に金額） */
.race .kyl { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--sub); overflow-wrap: anywhere; }
.race .kyl em { font-style: normal; font-weight: 700; color: var(--ink); margin-right: 6px; }
.race .kyc { margin-top: 2px; }
.race .kyc .c3 > span { display: inline-flex; align-items: center; gap: 3px; }
.race .kyc .combo { gap: 1px; }
.race .kyc .combo .lane { width: 16px; height: 16px; font-size: 10px; }
.race .kyc .c3 small { margin-left: 0; }
.race .kyc .c3 .co { color: var(--accent); font-weight: 700; }
.bxr { margin: 6px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.bxr.hit { color: var(--live); }
.bxr.miss { color: var(--sub); }
.bxr span { margin-left: auto; }
.bxr.miss span b { color: var(--ink); }
.bsep { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--sub); line-height: 1; margin: 2px 0; }
.bsep::before, .bsep::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.bsep b { font-weight: 400; white-space: nowrap; }
.bsep.on { color: var(--accent); }
.bsep.on b { font-weight: 700; }
.bsep.on::before, .bsep.on::after { border-top-style: solid; border-top-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
/* まとまりの見出し（T177: 上位6点・上位12点・13〜18位・19〜24位）: 左寄せ・右に線 */
.bsep.bh { margin: 4px 0 0; font-size: 11px; }
.bsep.bh::before { display: none; }
.bsep.bh b { font-weight: 700; color: var(--ink); }
.bsep.bh.on b { color: var(--accent); }
.vg > .bsep.bh:first-child { margin-top: 0; }
/* 「差分に戻す」（T194: 表の行を押して 1 つのまとまりにしたときの見出しの右） */
.bsep.bh .vgb { margin-left: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 4px; padding: 1px 8px; font-size: 11px; line-height: 1.4; cursor: pointer; }
/* 差分表示のまとまりは見出しもマスも押せる（T199）。見出しの右に「▸ 番号順で全部」の札 */
.bsep.bh[data-n], .vg .bc[data-n] { cursor: pointer; }
.bsep.bh .vgt { margin-left: 6px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 4px; padding: 0 6px; font-size: 10px; color: var(--accent); background: var(--card); white-space: nowrap; }
.bsep.bh[data-n]:active .vgt, .bsep.bh[data-n]:focus-visible .vgt { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
/* 表の行の右端の目印（T200）: ▸、押した行は ▾ と色。行全体が押せる見た目（押したときの色） */
.vt .vx { width: 22px; padding: 4px 0; text-align: center; color: var(--accent); font-size: 17px; line-height: 1.2; vertical-align: middle; }
.vt tbody tr.sel .vx { font-weight: 700; }
.vt tbody tr:active th, .vt tbody tr:active td { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.bxw { margin: 0; font-size: 12px; color: var(--sub); }
.bxls { margin: 8px 0 0; display: grid; gap: 2px; }
.bxl { margin: 0; font-size: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--sub); }
.bxl em { font-style: normal; font-weight: 700; color: var(--ink); min-width: 5.5em; }
.bxl > span { white-space: nowrap; color: var(--ink); }
.bxl small { margin-left: 3px; font-size: 11px; color: var(--sub); }
.bxl .hit small { color: inherit; }
.bxl .hit { color: var(--live); font-weight: 700; }
.bxl .r { margin-left: auto; color: var(--ink); }
.bxl .r.hit { color: var(--live); }
@media (max-width: 720px) {
  .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bc { padding: 3px 4px; gap: 0 2px; }
  .bc .combo { gap: 1px; }
  .bc .combo .lane { width: 16px; height: 16px; font-size: 10px; }
  .bc small { font-size: 10px; }
  .vg .bc { height: 28px; padding: 0 4px; }
  .vt th, .vt td { padding: 4px 2px; }
  .vt thead th:first-child { width: 66px; }
}
/* 1着の艇は小さな印だけ（T103: 背景の色はやめた） */
.w1 { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: var(--live); line-height: 1.2; }
.lby .lbl .q { margin-left: 4px; }

/* 買い方ごとの当たり外れ（一覧の行）と、的中率・回収率の表（29766c85/T108） */
.race .vms { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; font-size: 11px; line-height: 1.5; }
.race .vm { padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--sub); white-space: nowrap; }
.race .vm.hit { color: var(--live); font-weight: 700; background: color-mix(in srgb, var(--live) 9%, var(--card)); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.race .vm.na { opacity: .45; text-decoration: line-through; }
.bets { margin: -4px 0 12px; }
.bt { width: 100%; max-width: 640px; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.bt th, .bt td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: right; line-height: 1.3; }
.bt thead th { font-size: 10px; color: var(--sub); font-weight: 700; text-align: center; }
.bt tbody th { text-align: left; font-weight: 400; font-size: 11px; color: var(--sub); }
.bt tbody th b { display: inline-block; min-width: 2.6em; margin-right: 4px; color: inherit; font-size: 12px; }
.bt td small { display: block; font-size: 10px; color: var(--sub); }
.bt td.up { color: var(--up); font-weight: 700; }
.bt tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 560px) {
  .bt { font-size: 11px; }
  .bt th, .bt td { padding: 3px 3px; }
  .bt tbody th { font-size: 10px; }
  .bt tbody th b { display: block; }
}
@media (max-width: 560px) { .summary .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 一覧の点数の段の札（29766c85/T126・T127）。回収見込みが最も高い札は枠を太く・色。スマホ幅も 6・12・18・24 点の 4 つを 2 列で全部出す（a118d37a/T6） */
.race .tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.race .tc { padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--sub); white-space: nowrap; }
.race .tc b { color: var(--ink); font-weight: 700; }
/* 札は「12点 52%・80%」（均等・各100円。T171 でケリーの値は外した）。太枠は詳細の表と同じ段。スマホ幅は 6点の札と太枠の札だけ */
.race .tc.best { border: 2px solid var(--accent); padding: 0 5px; color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
@media (max-width: 520px) { .race .tiers { display: grid; grid-template-columns: 1fr 1fr; } .race .tc { text-align: center; } }
/* 締切35分より前のオッズ（暫定）の札は破線。行の末尾の注記（T140） */
.race .tc.early { border-style: dashed; }
.race .tiers .tnote { color: var(--sub); white-space: normal; }
/* 詳細の買い方の目安: 3連単6点の行の当たる確率・回収見込み、暫定の注記（T140） */
.bxl .bxv { white-space: normal; color: var(--sub); }
.bxl .bxv b { color: var(--ink); }
.bxn { margin: 4px 0 6px; font-size: 12px; color: var(--sub); }