/* ============================================================
   PyCaLiAI static site — racing terminal theme (v3)
   v3: 全コンテナ整列 / 文字サイズ拡大 / コントラスト改善 / 高密度化
   ============================================================ */
:root {
  --bg: #070b14;
  --bg2: #0d1424;
  --bg3: #121c31;
  --line: #1e2b4a;
  --line2: #32456e;
  --tx: #edf1fb;
  --tx2: #a9b6d3;
  --tx3: #7385a8;
  --gold: #f5b942;
  --gold2: #ffd97a;
  --teal: #2dd4a8;
  --teal2: #8af0d4;
  --red: #f2555a;
  --amber: #f0a132;
  --blue: #5ba0f5;
  --maxw: 1240px;
  --pad: clamp(14px, 3vw, 30px);
  --sans: "Noto Sans JP", sans-serif;
  --disp: "Oswald", "Noto Sans JP", sans-serif;
  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 999px;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 32px -22px rgba(0,0,0,.85);
  --shadow-pop: 0 14px 34px -16px rgba(0,0,0,.75);
  --ring: 0 0 0 3px rgba(245,185,66,.22);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-color: var(--line2) var(--bg); overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}
/* プロ仕様の静的マット背景: 単色ベース + 上端の極淡アクセント + 微細ブループリントグリッド */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 520px at 50% -12%, rgba(245,185,66,.045), transparent 58%),
    linear-gradient(180deg, #0a1120 0%, var(--bg) 42%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,150,210,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,210,.028) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px;
  -webkit-mask-image: radial-gradient(130% 92% at 50% -8%, #000 18%, transparent 70%);
          mask-image: radial-gradient(130% 92% at 50% -8%, #000 18%, transparent 70%);
  opacity: .4;
}
.bg-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(150% 85% at 50% -10%, transparent 60%, rgba(3,6,12,.5) 100%);
}
.num { font-family: var(--disp); font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: rgba(245,185,66,.3); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.track-stripe {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: .5;
}

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7,11,20,.78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 32px -26px rgba(0,0,0,.9);
}
.tb-in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--pad);
  min-height: 56px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark {
  font-family: var(--disp); font-weight: 600; font-size: 24px; letter-spacing: .08em;
  color: var(--gold2);
}
.brand-mark b { font-weight: 600; color: var(--gold2); }
.brand-ver {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--disp); font-size: 11px; color: var(--tx3);
  border: 1px solid var(--line2); border-radius: var(--r-sm);
  padding: 2px 9px 2px 7px; letter-spacing: .12em;
  background: var(--bg2);
}
.brand-ver::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 6px -1px rgba(45,212,168,.7);
}
.date-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-pill);
  padding: 4px 14px 4px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.date-wrap:hover { border-color: rgba(245,185,66,.55); box-shadow: 0 0 0 3px rgba(245,185,66,.08); }
.date-ico { font-size: 12px; color: var(--tx3); letter-spacing: .1em; }
#dateSel {
  background: none; border: none; color: var(--tx);
  font-family: var(--disp); font-size: 17px; letter-spacing: .04em;
  outline: none; cursor: pointer;
}
#dateSel option { background: var(--bg2); }

/* ---------------- モードナビ (予想/成績) ---------------- */
.modenav { display: flex; gap: 4px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 3px; }
.modenav button { font-size: 14.5px; font-weight: 700; color: var(--tx2); padding: 5px 18px; border-radius: var(--r-pill); transition: all .18s; }
.modenav button:hover { color: var(--tx); background: rgba(255,255,255,.04); }
.modenav button.on {
  color: #131008;
  background: linear-gradient(120deg, var(--gold2), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 10px -4px rgba(245,185,66,.45);
}
[hidden] { display: none !important; }

/* ---------------- 成績タブ ---------------- */
#resultsMain { padding: 4px var(--pad) 40px; }
.rs-wrap { max-width: var(--maxw); margin: 0 auto; }
.rs-sum { padding: 20px; margin-top: 12px; }
.rs-sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rs-stat { background: var(--bg3); border-radius: 10px; padding: 12px 14px; }
.rs-stat .k { font-size: 12.5px; color: var(--tx3); }
.rs-stat .v { font-family: var(--disp); font-size: 28px; font-weight: 500; color: var(--tx); margin-top: 2px; letter-spacing: .01em; }
.rs-stat .v small { font-size: 13px; color: var(--tx3); }
.rs-stat .v.pos { color: var(--teal2); }
.rs-stat .v.neg { color: #f3989b; }
.rs-bt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 14px; }
.rs-bt { background: var(--bg3); border-radius: 8px; padding: 9px 12px; }
.rs-bt-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.rs-dot { width: 9px; height: 9px; border-radius: 50%; }
.rs-bt-roi { float: right; font-family: var(--disp); font-size: 18px; font-weight: 500; }
.rs-bt-roi.pos { color: var(--teal2); } .rs-bt-roi.mid { color: var(--gold2); } .rs-bt-roi.neg { color: #f3989b; }
.rs-bt-sub { display: block; font-size: 12px; color: var(--tx2); margin-top: 3px; }
.rs-note { font-size: 12.5px; color: var(--amber); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rs-h { font-size: 17px; font-weight: 700; color: var(--tx2); letter-spacing: .08em; margin: 22px 2px 10px; }
.rs-h small { font-size: 12.5px; font-weight: 400; color: var(--tx3); letter-spacing: 0; margin-left: 8px; }

.rsm-card { padding: 6px 14px 10px; }
.rsm { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rsm th { font-size: 11.5px; color: var(--tx3); font-weight: 600; letter-spacing: .06em; padding: 8px 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.rsm td { padding: 8px; border-bottom: 1px solid var(--line); }
.rsm tbody tr:last-child td { border-bottom: none; }
.rsm th.num, .rsm td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rsm-m { font-weight: 700; white-space: nowrap; }
.rsm-roi { font-family: var(--disp); font-size: 16px; }
.rsm td.pos { color: var(--teal2); } .rsm td.mid, .rsm td.rsm-roi.mid { color: var(--gold2); } .rsm td.neg { color: #f3989b; }
.rsm td small { color: var(--tx3); font-size: 11px; }

.hit-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; }
.hit-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.hit-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--tx2); background: var(--bg2); border: 1px solid var(--line2);
  border-radius: var(--r-pill); padding: 5px 13px; transition: all .15s; cursor: pointer;
}
.hit-chip small { font-weight: 400; color: var(--tx3); }
.hit-chip:hover { border-color: var(--gold); color: var(--tx); }
.hit-chip.on { color: #131008; background: linear-gradient(120deg, var(--gold2), var(--gold)); border-color: var(--gold); }
.hit-chip.on small { color: rgba(19,16,8,.65); }
.hit-month {
  font-size: 13px; font-weight: 700; color: var(--tx2); background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px;
}
.hit-day {
  grid-column: 1 / -1; font-family: var(--disp); font-size: 15px; font-weight: 600;
  color: var(--gold2); letter-spacing: .05em; margin: 8px 2px 0;
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.hit-day small { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--tx3); margin-left: 8px; }
.hit-day:first-child { margin-top: 0; }

.hit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.hit-card {
  display: flex; align-items: stretch; gap: 0; text-align: left;
  background: linear-gradient(120deg, rgba(245,185,66,.1), rgba(255,255,255,.02) 55%), var(--bg2);
  border: 1px solid var(--line2); border-radius: 12px; overflow: hidden;
  transition: transform .15s, box-shadow .2s, border-color .2s;
  opacity: 0; animation: rise .4s cubic-bezier(.2,.7,.3,1) forwards;
}
.hit-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 8px 22px -10px rgba(245,185,66,.5); }
.hit-stamp {
  flex: 0 0 52px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; letter-spacing: .04em; writing-mode: vertical-rl;
  color: #fff; background: linear-gradient(160deg, #f2555a, #c0392b);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.hit-info { flex: 1; min-width: 0; padding: 11px 14px; }
.hit-meta { font-family: var(--disp); font-size: 13px; color: var(--tx3); letter-spacing: .03em; }
.hit-name { font-size: 15.5px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 7px; }
.hit-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hit-type { font-size: 12px; font-weight: 700; color: #131008; border-radius: var(--r-pill); padding: 2px 11px; }
.hit-pay { font-family: var(--disp); font-size: 23px; font-weight: 600; color: var(--gold2); }
.hit-sel { font-family: var(--disp); font-size: 13.5px; color: var(--tx2); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit-money { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); justify-content: flex-start; }
.hit-stake { font-size: 12px; color: var(--tx3); font-variant-numeric: tabular-nums; }
.hit-money .hit-pay { font-size: 19px; }
.hit-profit { margin-left: auto; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hit-profit.pos { color: var(--teal2); } .hit-profit.neg { color: #f3989b; }
.hit-card.big { border-color: rgba(242,85,90,.55); background: linear-gradient(120deg, rgba(242,85,90,.14), rgba(245,185,66,.06) 55%), var(--bg2); }
.hit-card.big .hit-stamp { background: linear-gradient(160deg, #f5b942, #d4841f); color: #2d2002; text-shadow: none; font-size: 15px; }

.rs-back { font-size: 14px; font-weight: 700; color: var(--tx2); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 16px; margin-top: 12px; transition: all .15s; }
.rs-back:hover { color: var(--tx); border-color: var(--gold); }
.rs-sec2 { font-size: 16px; font-weight: 700; color: var(--gold2); letter-spacing: .06em; margin: 18px 2px 8px; }
.ticket.won { box-shadow: inset 0 0 0 1px rgba(245,185,66,.5); }
.ticket.lost { opacity: .6; }
.won-badge { font-size: 11px; font-weight: 900; color: #2d2002; background: linear-gradient(120deg, var(--gold2), var(--gold)); border-radius: 6px; padding: 1px 8px; margin-left: 8px; }
.ticket-pl { font-family: var(--sans); font-size: 13px; font-weight: 700; margin-left: 8px; }
.ticket-pl.pos { color: var(--teal2); } .ticket-pl.neg { color: #f3989b; }

.rs-result { padding: 20px; margin-top: 12px; }
.rs-sec { font-size: 16px; font-weight: 700; color: var(--tx2); letter-spacing: .06em; margin-bottom: 10px; }
.rt2-finish { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rt2-fin { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; }
.rt2-fin b { font-weight: 700; }
.rt2 { width: 100%; border-collapse: collapse; font-size: 15px; }
.rt2 td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rt2-l { color: var(--tx3); font-weight: 700; width: 64px; white-space: nowrap; }
.rt2-s { font-family: var(--disp); color: var(--tx); letter-spacing: .04em; }
.rt2-p { text-align: right; color: var(--gold2); font-size: 16px; white-space: nowrap; }
.rt2-n { text-align: right; color: var(--tx3); font-size: 13px; width: 84px; white-space: nowrap; }

/* ---------------- venue tabs / race strip ---------------- */
.venues {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px var(--pad) 0;
}
.venue {
  font-size: 16px; font-weight: 700; color: var(--tx2);
  padding: 7px 24px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg2);
  transition: all .22s;
}
.venue small { font-family: var(--disp); font-weight: 400; margin-left: 7px; color: var(--tx3); font-size: 13px; }
.venue:hover { border-color: var(--line2); color: var(--tx); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.venue.on {
  color: #131008;
  background: linear-gradient(120deg, var(--gold2), var(--gold));
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px -6px rgba(245,185,66,.5);
}
.venue.on small { color: #5c4408; }

.races {
  display: flex; gap: 6px; overflow-x: auto;
  max-width: var(--maxw); margin: 0 auto;
  padding: 10px var(--pad);
  scrollbar-width: thin;
}
.rpill {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 56px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2);
  transition: all .18s;
}
.rpill .rno { font-family: var(--disp); font-size: 18px; font-weight: 500; color: var(--tx); line-height: 1.15; }
.rpill .rno .rhit { font-style: normal; font-size: 11px; color: var(--gold); vertical-align: super; margin-left: 1px; }
.rpill .rcls { font-size: 12px; color: var(--tx3); white-space: nowrap; line-height: 1.3; }
.rpill .rdot { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; }
.rpill:hover { border-color: var(--line2); transform: translateY(-1px); }
.rpill.on { background: linear-gradient(180deg, rgba(245,185,66,.12), rgba(245,185,66,.03)), var(--bg3); border-color: rgba(245,185,66,.8); box-shadow: 0 4px 16px -6px rgba(245,185,66,.45); }
.rpill.on .rno { color: var(--gold2); }

/* ---------------- main / cards ---------------- */
#main { padding: 2px var(--pad) 30px; max-width: var(--maxw); margin: 0 auto; }
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,0) 34%), var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

/* ---------------- race header ---------------- */
.rh { display: flex; gap: 20px; padding: 24px; margin-bottom: 12px; flex-wrap: wrap; align-items: flex-start; }
.rh-main { flex: 1 1 360px; min-width: 0; }
.rh-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rh-place { font-family: var(--disp); font-size: 32px; font-weight: 600; letter-spacing: .04em; line-height: 1.1; }
.rh-rno { font-family: var(--disp); font-size: 32px; font-weight: 600; color: var(--gold); }
.rh-name { font-size: 30px; font-weight: 700; color: var(--tx); line-height: 1.15; }
.rh-time { font-size: 15.5px; color: var(--tx2); border: 1px solid var(--line2); border-radius: 6px; padding: 1px 10px; }
.rh-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.tdchip { font-size: 14px; font-weight: 700; padding: 2px 14px; border-radius: var(--r-pill); letter-spacing: .1em; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.tdchip.turf { background: linear-gradient(120deg, #1f7a4d, #2aa86b); color: #eafff3; }
.tdchip.dirt { background: linear-gradient(120deg, #8a6134, #b08146); color: #fff7ea; }
.mchip { font-size: 14.5px; color: var(--tx2); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 2px 13px; background: rgba(255,255,255,.02); }
.judge { margin-top: 9px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.jbadge { font-size: 15.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 16px; border-radius: var(--r-pill); }
.jbadge.go { background: linear-gradient(120deg, var(--teal2), var(--teal)); color: #04342c; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 12px -4px rgba(45,212,168,.45); }
.jbadge.caution { background: linear-gradient(120deg, #ffd28a, var(--amber)); color: #432a04; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 12px -4px rgba(240,161,50,.45); }
.jbadge.skip { background: linear-gradient(120deg, #ff9a9d, var(--red)); color: #4a0e10; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px -4px rgba(242,85,90,.45); }
.jbadge.na { background: var(--bg3); color: var(--tx3); }
.jdetail { font-size: 16px; color: var(--tx2); }
.jtag { font-size: 13.5px; color: var(--tx3); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 1px 12px; }
.rh-quote {
  flex-basis: 100%; margin-top: 2px;
  font-size: 16px; color: var(--tx2); line-height: 1.75;
  border-left: 3px solid var(--gold); padding: 2px 0 2px 12px;
}
.rh-quote b { color: var(--gold2); font-weight: 700; font-size: 13px; letter-spacing: .1em; margin-right: 8px; }

.prior {
  flex-basis: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--tx2);
}
.pr-t { font-weight: 700; color: var(--tx3); letter-spacing: .06em; }
.pr-t small { font-weight: 400; margin-left: 5px; color: var(--tx3); }
.pr-i b { font-weight: 700; margin-right: 3px; color: var(--tx2); }
.pr-i .m1c { color: var(--gold); }

.gauges { display: flex; gap: 16px; margin-left: auto; flex-shrink: 0; }
.gauge { display: flex; flex-direction: column; align-items: center; width: 70px; position: relative; }
.gauge svg { transform: rotate(-90deg); }
.g-track { fill: none; stroke: var(--bg3); stroke-width: 5; }
.g-fill {
  fill: none; stroke-width: 5; stroke-linecap: round;
  animation: gaugeIn 1.1s cubic-bezier(.2,.7,.3,1);
}
/* 静止時(アニメ非実行時)も inline の stroke-dashoffset=--off で弧が満ちて見える */
@keyframes gaugeIn { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--off); } }
.g-val { position: absolute; top: 21px; left: 0; right: 0; text-align: center; font-family: var(--disp); font-size: 19px; font-weight: 500; color: var(--tx); }
.g-val small { font-size: 10px; color: var(--tx3); margin-left: 1px; }
.g-label { font-size: 12.5px; color: var(--tx3); margin-top: 3px; white-space: nowrap; }

/* ---------------- レベル (近走成績, S〜D) ---------------- */
/* ELO(蓄積)や外部指数ではなく公開の近走成績ベース。tier→色を共通変数 --lvc に。 */
.lv-S { --lvc: #ffd97a; }   /* gold  */
.lv-A { --lvc: #2dd4a8; }   /* teal  */
.lv-B { --lvc: #5ba0f5; }   /* blue  */
.lv-C { --lvc: #9aa8ca; }   /* slate */
.lv-D { --lvc: #6b7ba0; }   /* gray  */
.lv-none { --lvc: #6b7ba0; }

/* 各馬レベルの小チップ (出走表サブ行 / ドロワー) */
.lvchip {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--disp); font-weight: 600; font-size: 11.5px; letter-spacing: .02em;
  padding: 0 6px; border-radius: 5px; margin-right: 6px; vertical-align: middle;
  color: var(--lvc);
  background: color-mix(in srgb, var(--lvc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--lvc) 38%, transparent);
}
.lvchip i { font-style: normal; font-size: .82em; opacity: .82; color: var(--tx2); }

/* メンバーレベル (レースヘッダ、フル幅) */
.mlvl {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 12px;
  margin-top: 10px; padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--lvc) 30%, var(--line));
  border-radius: var(--r-md);
  background: linear-gradient(100deg, color-mix(in srgb, var(--lvc) 9%, transparent), transparent 62%), var(--bg2);
}
.mlvl-head { display: flex; align-items: center; gap: 13px; }
.mlvl-badge {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  font-family: var(--disp); font-weight: 600; font-size: 22px; line-height: 1;
  color: var(--lvc);
  background: color-mix(in srgb, var(--lvc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--lvc) 45%, transparent);
}
.mlvl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlvl-t { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--tx3); }
.mlvl-t .mlvl-lab { font-size: 16px; letter-spacing: .02em; color: var(--tx); margin-left: 8px; }
.mlvl-ctx { font-size: 12.5px; color: var(--tx3); letter-spacing: .01em; }
.mlvl-ctx b { color: var(--lvc); font-weight: 700; font-family: var(--disp); }
.mlvl.lv-none { opacity: .85; }
.mlvl-note { font-size: 11px; color: var(--tx3); letter-spacing: .01em; margin-top: 2px; }

/* 本命◎の格 判定 (メンバーレベルの "so what" = ◎の信頼度目安) */
.mlvl-verdict {
  display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 9px; margin-top: 2px;
  background: color-mix(in srgb, var(--vc, var(--tx3)) 10%, var(--bg3));
  border: 1px solid color-mix(in srgb, var(--vc, var(--tx3)) 28%, transparent);
}
.mlvl-verdict.cls-up   { --vc: var(--teal2); }
.mlvl-verdict.cls-mid  { --vc: var(--blue); }
.mlvl-verdict.cls-flat { --vc: var(--amber); }
.mlvl-vlead { font-size: 13.5px; color: var(--tx); }
.mlvl-vlead .m1c { color: var(--gold2); font-weight: 700; margin: 0 2px; }
.mlvl-vlead .vv { color: var(--vc); font-weight: 700; font-size: 14.5px; margin-left: 2px; }
.mlvl-verdict .vsub { font-size: 11.5px; color: var(--tx3); }

/* D→S タイア帯スペクトラム + 「この組」印 + クラス平均印 */
.mls { --pad: 3px; }
.mls-track {
  position: relative; display: flex; gap: 3px; height: 22px;
  padding: 0; margin: 14px 2px 0;
}
.mls-zone {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  border-radius: 5px;
  color: color-mix(in srgb, var(--lvc) 78%, var(--tx3));
  background: color-mix(in srgb, var(--lvc) 15%, var(--bg3));
  border: 1px solid color-mix(in srgb, var(--lvc) 22%, transparent);
}
/* 「この組」= 三角キャップ + 縦ライン (現tier色, グロー) */
.mls-mark {
  position: absolute; top: -13px; bottom: -3px; width: 0;
  transform: translateX(-50%); z-index: 3; pointer-events: none;
}
.mls-mark::before {   /* 縦ライン */
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 0; width: 2px;
  transform: translateX(-50%);
  background: var(--lvc); box-shadow: 0 0 7px -1px var(--lvc); border-radius: 2px;
}
.mls-mark b {   /* tier バッジ (ポインタ) */
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--disp); font-weight: 600; font-size: 12px; line-height: 1;
  color: #10131b; background: var(--lvc);
  padding: 2px 7px; border-radius: 5px;
  box-shadow: 0 2px 8px -2px var(--lvc);
}
.mls-mark b::after {   /* 下向き三角 */
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--lvc);
}
/* クラス平均の目印 (控えめ) */
.mls-avg {
  position: absolute; top: -2px; bottom: -2px; width: 0;
  transform: translateX(-50%); z-index: 2; pointer-events: none;
}
.mls-avg::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 12px; width: 0;
  border-left: 1.5px dashed var(--tx3); transform: translateX(-50%); opacity: .8;
}
.mls-avg em {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 9.5px; color: var(--tx3); white-space: nowrap;
}
.mls-cap {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--tx3); margin: 16px 2px 0;
}

/* ---------------- result banner ---------------- */
.resbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(245,185,66,.07), rgba(13,20,36,.6) 45%), var(--bg2);
  border: 1px solid var(--line2); border-left: 3px solid var(--gold);
  border-radius: 4px var(--r-md) var(--r-md) 4px;
  padding: 9px 16px; margin-bottom: 8px;
  box-shadow: var(--shadow-card);
  animation: slidein .45s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes slidein { from { opacity: 0; transform: translateX(-16px); } }
.res-t { font-family: var(--disp); font-size: 14.5px; font-weight: 600; letter-spacing: .2em; color: var(--gold2); }
.res-h { display: inline-flex; align-items: center; gap: 6px; }
.res-n { font-size: 16.5px; font-weight: 700; }
.res-pays { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.res-pays i { font-style: normal; font-size: 13.5px; color: var(--tx2); background: var(--bg3); border-radius: var(--r-pill); padding: 2px 12px; font-variant-numeric: tabular-nums; }
.hitchip {
  font-size: 14px; font-weight: 700; color: #2d2002;
  background: linear-gradient(120deg, var(--gold2), var(--gold));
  border-radius: var(--r-pill); padding: 2px 12px;
  animation: stampin .5s cubic-bezier(.3,1.5,.5,1) backwards .25s;
}
@keyframes stampin { from { transform: scale(1.3) rotate(-4deg); opacity: 0; } }
.hitchip.miss { background: none; color: var(--tx3); border: 1px solid var(--line2); box-shadow: none; animation: none; }

.resb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--disp); font-size: 15px; font-weight: 600;
}
.resb.r1 { background: linear-gradient(135deg, var(--gold2), #c98f1f); color: #2d2002; box-shadow: 0 0 10px -2px rgba(245,185,66,.7); }
.resb.r2 { background: linear-gradient(135deg, #e3e9f5, #97a4c2); color: #232c40; }
.resb.r3 { background: linear-gradient(135deg, #d9a06a, #94613a); color: #2e1a08; }
.resb.rx { border: 1px solid var(--line2); color: var(--tx3); }

/* ---------------- view tabs ---------------- */
.viewtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 2px 0 10px; overflow-x: auto; scrollbar-width: none; }
.vt { font-size: 16px; font-weight: 700; color: var(--tx3); padding: 8px 18px 9px; position: relative; flex: 0 0 auto; white-space: nowrap; }
.vt.on { color: var(--gold2); }
.vt { transition: color .18s; }
.vt:hover { color: var(--tx2); }
.vt.on:hover { color: var(--gold2); }
.vt.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold2) 25%, var(--gold) 75%, transparent);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 -3px 12px rgba(245,185,66,.35);
}
.vt.soon { cursor: not-allowed; }
.vt.soon i { font-style: normal; font-size: 10px; color: var(--tx3); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 5px; vertical-align: 2px; }

/* ---------------- shutsuba table ---------------- */
.sh-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 7px; gap: 10px; }
.sh-title { font-size: 15px; font-weight: 700; color: var(--tx2); letter-spacing: .14em; display: inline-flex; align-items: center; gap: 9px; }
.sh-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.sh-title b { color: var(--gold); margin-right: 6px; }
.sh-note { font-size: 13.5px; color: var(--tx3); }

.htable { overflow: visible; }
.hh, .hrow { display: grid; gap: 9px; align-items: center; padding: 7px 14px; }
.htable.hasres .hh, .htable.hasres .hrow {
  grid-template-columns: 40px 32px 56px minmax(0,1fr) 44px 80px 158px 70px 62px 78px 64px;
}
.htable.nores .hh, .htable.nores .hrow {
  grid-template-columns: 32px 56px minmax(0,1fr) 44px 80px 158px 70px 62px 78px 64px;
}
.hh {
  position: sticky; top: 56px; z-index: 5;
  padding: 8px 14px 7px;
  font-size: 13px; color: var(--tx3); letter-spacing: .08em;
  background: rgba(13,20,36,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line2);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.hsort { font-size: 13.5px; color: var(--tx3); letter-spacing: .05em; padding: 0; transition: color .15s; }
.hsort:hover { color: var(--tx); }
.hsort.on { color: var(--gold2); }
.ta-r { text-align: right; }
.ta-c { text-align: center; }

.hrow {
  border-top: 1px solid var(--line);
  cursor: pointer;
  opacity: 0;
  animation: rise .45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * 22ms);
  transition: background .15s, box-shadow .2s;
}
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.hrow:nth-child(odd) { background: rgba(255,255,255,.014); }
.hrow:hover { background: rgba(255,255,255,.04); box-shadow: inset 3px 0 0 var(--line2); }
.hrow.honmei {
  background: linear-gradient(90deg, rgba(245,185,66,.08), transparent 55%);
  box-shadow: inset 3px 0 0 var(--gold);
}
.hrow.honmei:hover { background: linear-gradient(90deg, rgba(245,185,66,.11), transparent 55%); box-shadow: inset 3px 0 0 var(--gold); }
.hrow.intop3 { background: linear-gradient(90deg, rgba(45,212,168,.055), transparent 60%); }
.hrow.honmei.intop3 { background: linear-gradient(90deg, rgba(245,185,66,.1), rgba(45,212,168,.04) 60%, transparent); }
.hrow.dim .hname { color: var(--tx2); }

/* FLIP ソート時は entry アニメを止める (位置トランジションだけ流す) */
.hrow.still { animation: none; opacity: 1; }
.hrow.still .bar i { animation: none; transform: none; }
.hrow.still .spark polyline { animation: none; stroke-dashoffset: 0; }
.hrow.still .spark circle { animation: none; transform: scale(1); }

.mark { font-size: 19px; font-weight: 900; text-align: center; line-height: 1; }
.mark.m1 { color: var(--gold); font-size: 21px; }
.mark.m2 { color: #d9e2f2; }
.mark.m3 { color: #d08b4c; }
.mark.m4 { color: #8d9cba; }
.mark.m0 { color: var(--line2); font-size: 12px; }

.wk {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: 6px;
  font-family: var(--disp); font-size: 15.5px; font-weight: 600;
  transition: transform .18s cubic-bezier(.3,1.5,.5,1);
}
.hrow:hover .wk { transform: scale(1.14); }
.w1 { background: #f4f6fb; color: #18202f; }
.w2 { background: #14161c; color: #e8e8ec; border: 1px solid #3c4254; }
.w3 { background: #d33b3b; color: #fff; }
.w4 { background: #2667d6; color: #fff; }
.w5 { background: #f0c93c; color: #4b3605; }
.w6 { background: #2c9e57; color: #fff; }
.w7 { background: #e2702a; color: #fff; }
.w8 { background: #e4549a; color: #fff; }

.hcell { min-width: 0; overflow: hidden; }
.hname { display: block; font-size: 18px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsub { display: block; font-size: 14px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyaku { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.k-nige   { background: rgba(242,85,90,.16);  color: #ff8488; }
.k-senko  { background: rgba(245,185,66,.16); color: var(--gold2); }
.k-sashi  { background: rgba(91,155,255,.16); color: #7fb0ff; }
.k-oikomi { background: rgba(45,212,168,.16); color: var(--teal2); }

.c-ninki { font-size: 17px; color: var(--tx2); }
.pbar { display: flex; align-items: center; gap: 7px; min-width: 0; }
.aidx { font-size: 19px; width: 32px; text-align: right; color: var(--tx); }
.aidx.top { color: var(--gold2); }
.pbar .rk { font-family: var(--disp); font-size: 12px; color: var(--tx3); width: 24px; }
.bar { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; min-width: 20px; }
.bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #3f6fb8, var(--blue));
  transform-origin: left;
  animation: grow .7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * 22ms + .1s);
  transform: scaleX(0);
}
@keyframes grow { to { transform: scaleX(1); } }
.hrow.value .bar i { background: linear-gradient(90deg, #169c79, var(--teal2)); }
.legdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 3px 0 6px; vertical-align: baseline; }
.legdot.gold { background: var(--gold2); }
.legdot.teal { background: var(--teal2); }
.legdot.blue { background: var(--blue); }
.hrow.honmei .bar i { background: linear-gradient(90deg, #c98f1f, var(--gold2)); }
.pwin { font-size: 17.5px; }
.pwin small, .psho small { font-size: 11px; color: var(--tx3); margin-left: 1px; }
.psho { font-size: 16.5px; color: var(--tx2); }
.odds { font-size: 17.5px; }
.oddsev { display: block; font-size: 12px; color: var(--gold2); line-height: 1.2; font-family: var(--sans); font-weight: 700; }
.spark { display: inline-block; vertical-align: middle; }
.spark polyline {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: draw .8s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 22ms + .25s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark circle {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0);
  animation: pop .35s cubic-bezier(.3,1.6,.5,1) forwards;
  animation-delay: calc(var(--i, 0) * 22ms + var(--d, 0s) + .3s);
}
@keyframes pop { to { transform: scale(1); } }
.nosp { font-size: 11px; color: var(--tx3); }

.vschip { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 11px; border-radius: var(--r-pill); text-align: center; }
.vschip.under {
  background: rgba(45,212,168,.12); color: var(--teal2); border: 1px solid rgba(45,212,168,.45);
}
.vschip.over { background: rgba(242,85,90,.07); color: #f3989b; border: 1px solid rgba(242,85,90,.3); }
.vschip.fair { color: var(--tx3); border: 1px solid var(--line); }

/* ---------------- extras: 展開 / ペア ---------------- */
.ex-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; margin-top: 10px; }
.ex { padding: 16px; }
.ex-t { font-size: 15px; font-weight: 700; color: var(--tx2); letter-spacing: .1em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-t small { font-weight: 400; font-size: 12.5px; color: var(--tx3); letter-spacing: 0; }
.pace { font-size: 14px; font-weight: 700; border: 1px solid; border-radius: 6px; padding: 1px 10px; }
.lane { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); }
.lane:first-of-type { border-top: none; }
.lane-l { flex: 0 0 52px; font-size: 13.5px; font-weight: 700; color: var(--tx3); padding-top: 3px; }
.lane-l small { display: block; font-family: var(--disp); font-weight: 400; font-size: 12px; color: var(--tx3); }
.lane-c { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lane-none { font-size: 13.5px; color: var(--line2); padding-top: 3px; }
.tk {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 8px;
  padding: 2px 8px 2px 2px;
  transition: transform .15s;
}
.tk:hover { transform: translateY(-1px); }
.tk i { font-style: normal; font-size: 13.5px; color: var(--tx2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk.tk-mk { border-color: var(--line2); }
.tk.tk-mk i { color: var(--tx); }
.tk.tk-hon { border-color: rgba(245,185,66,.6); background: rgba(245,185,66,.08); box-shadow: 0 0 10px -4px rgba(245,185,66,.6); }
.tk.tk-hon i { color: var(--gold2); font-weight: 700; }

.pair {
  display: grid; grid-template-columns: 54px 12px 54px repeat(3, minmax(0,1fr)) auto;
  gap: 6px; align-items: center;
  padding: 5px 4px; border-top: 1px solid var(--line);
  opacity: 0; animation: rise .4s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.pair.hh2 { border-top: none; font-size: 12px; color: var(--tx3); padding: 0 4px 2px; opacity: 1; animation: none; }
.pair-h { display: inline-flex; align-items: center; gap: 4px; }
.pair-h .mark { font-size: 14.5px; }
.pair-x { color: var(--tx3); font-size: 12px; text-align: center; }
.pair-v { font-size: 16px; text-align: right; color: var(--tx2); white-space: nowrap; }
.pair-v small { font-size: 11px; color: var(--tx3); }
.pair-v.odds-col { color: var(--tx); }
.pair.hh2 .pair-v.odds-col { color: var(--tx3); }
.pair.win { background: rgba(45,212,168,.07); border-radius: 6px; border-top-color: transparent; }
.pair-win { font-size: 12px; font-weight: 700; color: var(--teal2); padding-left: 4px; white-space: nowrap; }
.pair-note {
  font-size: 14.5px; color: var(--tx); line-height: 1.65;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
}
.pair-note b { color: var(--tx2); font-weight: 700; }
.pair-note u { color: var(--teal2); text-decoration: none; }

/* 実現トラックバイアス カード */
.rb-row { display: flex; align-items: center; gap: 9px; margin: 8px 2px; }
.rb-k { font-size: 13px; color: var(--tx3); min-width: 42px; }
.rb-bar { flex: 1; height: 10px; border-radius: 6px; background: rgba(128,128,128,.18); overflow: hidden; }
.rb-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--teal2)); }
.rb-v { font-size: 18px; font-weight: 700; color: var(--tx); min-width: 48px; text-align: right; }
.rb-v small { font-size: 11px; color: var(--tx3); font-weight: 400; }
.rb-waku { font-size: 14px; font-weight: 700; padding: 1px 10px; border-radius: 999px; }
.rb-waku.in { color: #6db0ff; background: rgba(91,160,245,.16); }
.rb-waku.out { color: #f0a132; background: rgba(240,161,50,.16); }
.rb-waku.flat { color: var(--tx3); background: rgba(128,128,128,.16); }
.rb-sub { font-size: 12.5px; color: var(--tx3); }

/* 実現バイアス × 印馬 脚質補正 (読みの目安・買い目不干渉) */
.rb-fit-hd { font-size: 12.5px; font-weight: 700; color: var(--tx2); letter-spacing: .04em; margin: 10px 2px 6px; display: flex; align-items: center; gap: 8px; }
.rb-fit-warn { font-weight: 400; font-size: 11px; color: var(--tx3); }
.rb-fit-flat { font-size: 12.5px; color: var(--tx3); margin: 9px 2px 2px; }
.rb-fit { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 3px 0; border-radius: 8px; font-size: 12.5px; background: rgba(128,128,128,.06); border-left: 3px solid transparent; }
.rb-fit.up { border-left-color: var(--teal); background: rgba(45,212,168,.07); }
.rb-fit.dn { border-left-color: #e4708a; background: rgba(228,112,138,.07); }
.rb-fit .mark { font-size: 15px; min-width: 16px; }
.rb-fit-n { color: var(--tx); font-weight: 600; white-space: nowrap; }
.rb-fit-sty { color: var(--tx3); font-size: 11.5px; padding: 0 6px; border-radius: 4px; background: rgba(128,128,128,.14); }
.rb-fit-ai { font-size: 11px; color: var(--tx3); white-space: nowrap; letter-spacing: .02em; }
.rb-fit-ai b { color: var(--tx); font-weight: 700; font-size: 12.5px; margin-left: 1px; }
.rb-fit-rk { color: var(--tx3); margin-left: 4px; }
.rb-fit-arw { font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.rb-fit.up .rb-fit-arw { color: var(--teal); }
.rb-fit.dn .rb-fit-arw { color: #e4708a; }
.rb-fit-msg { color: var(--tx2); font-size: 12px; }
@media (max-width: 620px) {
  .rb-fit { flex-wrap: wrap; gap: 5px 8px; }
  .rb-fit-msg { flex-basis: 100%; padding-left: 24px; }
}

/* ---------------- cowork section ---------------- */
.cw { margin-top: 12px; }
.cw-title { font-size: 15px; font-weight: 700; color: var(--tx2); letter-spacing: .14em; margin: 0 2px 8px; display: flex; align-items: center; gap: 9px; }
.cw-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--teal2), var(--teal)); }
.cw-title b { color: var(--teal); }
.cw-src { font-size: 12.5px; color: var(--tx3); font-weight: 400; letter-spacing: 0; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
.adv {
  display: flex; gap: 12px; padding: 16px;
  opacity: 0; animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * 60ms + .1s);
  transition: transform .18s, border-color .2s, box-shadow .2s;
}
.adv:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: var(--shadow-pop); }
.adv-medal {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 19px; font-weight: 600;
}
.adv-medal.gA { background: linear-gradient(135deg, var(--gold2), #c98f1f); color: #2d2002; box-shadow: 0 3px 12px -3px rgba(245,185,66,.6); }
.adv-medal.gB { background: linear-gradient(135deg, #e3e9f5, #97a4c2); color: #232c40; }
.adv-medal.gC { background: linear-gradient(135deg, #d9a06a, #94613a); color: #2e1a08; }
.adv-medal.gX { background: var(--bg3); color: var(--tx3); }
.adv-body { min-width: 0; }
.adv-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.adv-name { font-size: 17px; font-weight: 700; }
.adv-tag { font-size: 12px; font-weight: 700; padding: 1px 11px; border-radius: var(--r-pill); }
.adv-tag.t-jiku { background: rgba(245,185,66,.13); color: var(--gold2); border: 1px solid rgba(245,185,66,.5); }
.adv-tag.t-myomi { background: rgba(45,212,168,.13); color: var(--teal2); border: 1px solid rgba(45,212,168,.5); }
.adv-tag.t-wana { background: rgba(242,85,90,.1); color: #f3989b; border: 1px solid rgba(242,85,90,.4); }
.adv-tag.t-etc { color: var(--tx3); border: 1px solid var(--line2); }
.adv-comment { font-size: 15.5px; color: var(--tx); line-height: 1.78; }

.bet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ticket {
  position: relative; overflow: hidden;
  padding: 14px 16px 14px 18px;
  opacity: 0; animation: stamp .5s cubic-bezier(.3,1.4,.5,1) forwards;
  animation-delay: calc(var(--i) * 90ms);
  transition: transform .18s, box-shadow .2s;
}
.ticket { box-shadow: var(--shadow-card); }
.ticket:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
@keyframes stamp {
  from { opacity: 0; transform: scale(1.12) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}
.ticket::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--bcol, var(--gold)), color-mix(in srgb, var(--bcol, var(--gold)) 55%, transparent));
}
.ticket-type { font-size: 13.5px; font-weight: 700; letter-spacing: .14em; color: var(--bcol, var(--gold)); }
.ticket-sel { font-family: var(--disp); font-size: 26px; font-weight: 500; letter-spacing: .05em; margin: 1px 0 2px; }
.ticket-amt { font-family: var(--disp); font-size: 16.5px; color: var(--tx2); }
.ticket-amt b { color: var(--tx); font-weight: 500; }
.ticket-reason { font-size: 17px; color: var(--tx); margin-top: 5px; line-height: 1.65; border-top: 1px solid var(--line); padding-top: 6px; }
.cw-empty { padding: 13px 16px; font-size: 14.5px; color: var(--tx3); }

/* ---------------- drawer ---------------- */
#overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,7,13,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#overlay.show { opacity: 1; pointer-events: auto; }
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(900px, 96vw);
  background:
    radial-gradient(700px 320px at 100% -5%, rgba(245,185,66,.06), transparent 60%),
    linear-gradient(180deg, #0f1729, #0a101f);
  border-left: 1px solid var(--line2);
  box-shadow: -24px 0 60px rgba(0,0,0,.6);
  transform: translateX(102%); transition: transform .32s cubic-bezier(.2,.7,.3,1);
  overflow-y: auto; padding: 20px 20px 30px;
}
#drawer.show { transform: none; }
.dw-close { position: absolute; top: 12px; right: 14px; font-size: 20px; color: var(--tx3); padding: 4px 8px; }
.dw-close:hover { color: var(--tx); }
.dw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.dw-name { font-size: 26px; font-weight: 700; }
.dw-mark { font-size: 22px; }
.dw-sub2 { font-size: 16px; color: var(--tx2); margin-left: 4px; }
.dw-ped { font-size: 16px; color: var(--tx3); margin-bottom: 12px; }
.dw-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 8px 30px; margin-bottom: 4px; }
.dw-top.solo { grid-template-columns: 1fr; }
.dw-left, .dw-right { min-width: 0; }
.rt-wrap { overflow-x: auto; }
.dw-odds { font-size: 16px; color: var(--tx2); margin-bottom: 8px; }
.dw-ped b { color: var(--tx2); font-weight: 700; }
.dw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.dw-stat { background: var(--bg3); border-radius: 8px; padding: 8px 6px; text-align: center; }
.dw-stat .v { font-family: var(--disp); font-size: 22.5px; font-weight: 500; }
.dw-stat .v.gold { color: var(--gold2); }
.dw-stat .v.teal { color: var(--teal2); }
.dw-stat .k { font-size: 13px; color: var(--tx3); margin-top: 1px; }
.dw-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 10px 0 2px; }
.ir { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ir span:first-child { color: var(--tx3); flex: 0 0 auto; }
.ir span:last-child { color: var(--tx); text-align: right; min-width: 0; }
.ir .kw { font-style: normal; font-size: 12.5px; color: var(--amber); border: 1px solid rgba(240,161,50,.5); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.dw-sec { font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--tx3); margin: 18px 0 9px; display: flex; align-items: center; gap: 9px; }
.dw-sec::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.dw-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.why { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.why .wl { flex: 0 0 205px; font-size: 15.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.why .wl small { color: var(--tx3); }
.why .bar { height: 6px; }
.why .bar i { animation-delay: calc(var(--i) * 50ms + .15s); }
.why.neg .bar i { background: linear-gradient(90deg, #a83a3e, #f3989b); }
.why .wv { font-family: var(--disp); font-size: 15px; width: 46px; text-align: right; color: var(--tx2); }

.rt { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.rt th {
  font-size: 13.5px; font-weight: 700; color: var(--tx3); text-align: left;
  padding: 2px 8px 8px; letter-spacing: .04em; white-space: nowrap;
  border-bottom: 1px solid var(--line2);
}
.rt td { padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--tx); }
.rt td small { font-size: 12px; color: var(--tx3); margin-left: 1px; }
.rt .rt-ago { color: var(--tx3); font-size: 14.5px; }
.rt .rt-course { font-weight: 700; }
.rt tr.rt1 td { background: rgba(245,185,66,.07); }
.rt tr.rt23 td { background: rgba(45,212,168,.055); }
.dw-hsum { font-size: 15.5px; color: var(--tx2); margin-top: 10px; }
.dw-hsum b { color: var(--tx); }
.dw-note { font-size: 16px; color: var(--tx); margin-top: 16px; line-height: 1.6; }

@media (max-width: 980px) {
  #drawer { width: min(470px, 95vw); }
  .dw-top { grid-template-columns: 1fr; }
}

/* ---------------- footer / misc ---------------- */
.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--tx3);
}
.loading { padding: 60px 0; text-align: center; color: var(--tx3); font-size: 13px; letter-spacing: .2em; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.err { padding: 40px 20px; text-align: center; color: var(--red); font-size: 14px; }

.skel { padding: 16px 20px; margin-bottom: 8px; }
.skel-bar {
  height: 14px; border-radius: 8px; margin: 10px 0;
  background: linear-gradient(90deg, var(--bg3) 25%, #1a2742 40%, var(--bg3) 55%);
  background-size: 250% 100%;
  animation: skshine 1.3s linear infinite;
}
@keyframes skshine { to { background-position: -250% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
  .track-stripe, .brand-mark, .hitchip, .vschip.under, body::before { animation: none !important; }
}

/* ---------------- 分析タブ共通 (チャート) ---------------- */
.chart { width: 100%; height: 360px; }
.chart.sm { height: 248px; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.anc { padding: 16px 16px 12px; }
.an-t { font-size: 15px; font-weight: 700; color: var(--tx2); letter-spacing: .1em; margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.an-t small { font-weight: 400; font-size: 11.5px; color: var(--tx3); letter-spacing: 0; }
/* 想定隊列 (NiceGUI 移植 → テーマ色へ統一) */
.tk-card { border: 1px solid var(--line); }
.tk-title { font-size: 18px; font-weight: 800; color: var(--tx); margin-bottom: 10px; }
.tk-pace { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-pace-chip { color: #15151f; padding: 5px 16px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; }
.tk-pace-msg { color: var(--tx2); font-size: 13.5px; }
.tk-lineup { background: rgba(0,0,0,.18); padding: 12px; border-radius: 8px; }
.tk-row { display: flex; align-items: flex-start; gap: 14px; padding: 9px 6px; border-left: 3px solid var(--line2); background: rgba(0,0,0,.22); border-radius: 6px; margin: 3px 0; }
.tk-lab { min-width: 68px; text-align: center; font-weight: 800; font-size: 14px; padding-top: 6px; }
.tk-icon { font-size: 18px; line-height: 1.3; }
.tk-chips { display: flex; flex-wrap: wrap; align-items: center; flex: 1; }
.tk-arrow { text-align: center; color: var(--tx3); font-size: 14px; margin: 4px 0; letter-spacing: 4px; }
.tk-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg3); border: 1px solid var(--line); padding: 6px 11px; border-radius: 8px; margin: 3px 4px; min-width: 122px; cursor: pointer; transition: background .15s, border-color .15s; }
.tk-chip.mk { border-width: 2px; }
.tk-chip:hover { background: rgba(255,255,255,.04); border-color: var(--line2); }
.tk-badge { width: 23px; height: 23px; line-height: 23px; text-align: center; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tk-badge-non { background: var(--line2); color: var(--tx2); }
.tk-nm { color: var(--tx2); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.tk-win { color: var(--tx3); font-size: 11px; margin-left: auto; padding-left: 4px; }
.tk-unknown { margin-top: 12px; padding: 12px; background: rgba(108,112,134,.1); border-radius: var(--r-sm); border: 1px solid var(--line); }
.tk-unknown-h { color: var(--tx3); font-size: 12px; margin-bottom: 6px; }
.tk-foot { margin-top: 13px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--tx3); font-size: 13px; }
.tk-adv { color: var(--amber); font-weight: 800; font-size: 14px; }

/* ---------------- 重賞 Grade Scope ---------------- */
.vt-grade.on::after { background: linear-gradient(90deg, #ffd97a, #f5b942); }
.vt-grade { color: var(--gold2); }
.gs-card { padding: 0; margin-top: 10px; overflow: hidden; }
.gs-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(110deg, rgba(245,185,66,.16), rgba(245,185,66,.03) 60%, transparent);
  border-bottom: 1px solid var(--line2);
}
.gs-badge {
  font-family: var(--disp); font-size: 15px; font-weight: 600; letter-spacing: .06em;
  color: #2d2002; background: linear-gradient(120deg, var(--gold2), var(--gold));
  border-radius: 8px; padding: 3px 12px;
  box-shadow: 0 2px 12px -3px rgba(245,185,66,.6);
}
.gs-title { font-size: 19px; font-weight: 700; color: var(--tx); }
.gs-body { padding: 6px 20px 14px; max-width: 880px; }
.gs-h {
  font-size: 17px; font-weight: 700; color: var(--gold2);
  margin: 20px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line2); letter-spacing: .04em;
}
.gs-p { font-size: 16px; color: var(--tx); line-height: 1.9; margin: 8px 0; }
.gs-ul { margin: 6px 0 8px; padding-left: 4px; list-style: none; }
.gs-ul li {
  font-size: 15.5px; color: var(--tx2); line-height: 1.8;
  padding: 3px 0 3px 20px; position: relative;
}
.gs-ul li::before { content: "▸"; position: absolute; left: 2px; color: var(--gold); }
.gs-body b { color: var(--gold2); font-weight: 700; }
.gs-foot {
  font-size: 12.5px; color: var(--tx3); padding: 10px 20px 16px;
  border-top: 1px solid var(--line);
}

/* ---------------- 全頭 UMAMI テーブル ---------------- */
.um-card { padding: 16px 16px 8px; margin-top: 12px; }
.um-head, .um-row {
  display: grid;
  grid-template-columns: 30px 52px minmax(96px, 1.1fr) 70px 56px 56px 74px 42px 56px minmax(0, 2fr);
  gap: 9px; align-items: center; padding: 8px 6px;
}
.um-head { font-size: 12px; color: var(--tx3); border-bottom: 1px solid var(--line2); padding-bottom: 7px; }
.usort { font-size: 12px; color: var(--tx3); padding: 0; }
.usort:hover { color: var(--tx); }
.usort.on { color: var(--gold2); }
.um-row { border-top: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.um-row:first-of-type { border-top: none; }
.um-row:nth-child(odd) { background: rgba(255,255,255,.012); }
.um-row:hover { background: rgba(255,255,255,.04); box-shadow: inset 3px 0 0 var(--line2); }
.um-row.honmei { background: linear-gradient(90deg, rgba(245,185,66,.08), transparent 55%); }
.um-row.gated { opacity: .58; }
.um-row .mark { font-size: 15px; }
.um-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-row .num { font-size: 15px; }
.um-xroi { font-size: 17px; font-weight: 500; color: var(--tx2); }
.um-xroi.good { color: var(--teal2); }
.um-xroi.mid { color: var(--gold2); }
.um-xroi.low { color: var(--tx3); }
.um-xroi small { font-size: 9px; color: var(--tx3); }
.um-g { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; border-radius: 6px; font-family: var(--disp); font-size: 12.5px; font-weight: 600; color: #131008; }
.um-side { font-size: 12.5px; color: var(--tx2); }
.um-reason { font-size: 14.5px; color: var(--tx); line-height: 1.55; overflow: hidden; }

/* ---------------- コースタブ ---------------- */
.cc-head { padding: 16px; margin-top: 12px; }
.cc-h-t { font-size: 17px; font-weight: 700; }
.cc-h-t small { font-size: 12.5px; font-weight: 400; color: var(--tx3); margin-left: 8px; }
.cc-h-s { font-size: 13.5px; color: var(--tx2); margin-top: 4px; }
.cc-h-s b { color: var(--gold2); }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cc-tag { font-weight: 700; margin-left: 2px; }

/* ---------------- 調教タブ ---------------- */
.tr-top { padding: 16px; margin-top: 12px; border-color: rgba(245,185,66,.35); }
.tr-top-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tr-top-c { display: flex; align-items: center; gap: 8px; background: var(--bg3); border-radius: 8px; padding: 8px 10px; }
.tr-rk { font-family: var(--disp); font-size: 17px; font-weight: 600; color: var(--gold2); width: 18px; text-align: center; }
.tr-top-n { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.tr-top-m { font-size: 11px; color: var(--tx3); }
.tr-top-v { margin-left: auto; font-size: 17px; color: var(--teal2); }
.tr-top-v small { font-size: 9px; color: var(--tx3); margin-left: 2px; }
.tr-list { padding: 16px; margin-top: 8px; }
.tr-row { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-top: 1px solid var(--line); }
.tr-row:first-of-type { border-top: none; }
.tr-row .mark { font-size: 15px; width: 18px; }
.tr-name { font-size: 14.5px; font-weight: 700; min-width: 96px; }
.tr-na { font-size: 12.5px; color: var(--tx3); }
.tr-row.none { opacity: .6; }
.tr-sets { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; align-items: center; }
.tr-set { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); }
.tr-set > b { font-size: 11px; font-weight: 900; color: var(--tx3); background: var(--bg3); border-radius: 4px; padding: 1px 6px; }
.tr-kv em { font-style: normal; color: var(--tx); font-size: 14.5px; margin-left: 2px; }
.tr-d { font-size: 10.5px; color: var(--tx3); }
.lapmini { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; }
.lapmini i { display: inline-block; width: 5px; background: #3f6fb8; border-radius: 1px; }
.lapmini i.last { background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.lapmini.lg { height: 22px; vertical-align: -6px; margin: 0 2px; }
.tr-legend { font-size: 14.5px; color: var(--tx); line-height: 1.7; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tr-legend b { color: var(--tx2); font-weight: 700; }

/* ---------------- 血統タブ ---------------- */
.rkb { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 19px; padding: 0 5px; border-radius: 6px; font-family: var(--disp); font-size: 12px; font-weight: 600; color: #131008; }
.ped-note { font-size: 15px; color: var(--tx); line-height: 1.6; margin: 10px 2px 8px; }
.ped-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 8px; }
.ped-c { padding: 16px; }
.ped-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ped-head .mark { font-size: 15px; }
.ped-name { font-size: 15px; font-weight: 700; }
.ped-line { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13px; }
.ped-line + .ped-line { border-top: 1px solid var(--line); }
.ped-l { font-size: 11px; color: var(--tx3); width: 28px; flex: 0 0 auto; }
.ped-sire { font-weight: 700; color: var(--tx); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-f { margin-left: auto; font-size: 12.5px; color: var(--tx2); white-space: nowrap; }
.ped-f b { color: var(--gold2); font-size: 14px; }
.ped-f small { color: var(--tx3); font-size: 10.5px; }
.ped-na { margin-left: auto; font-size: 11.5px; color: var(--tx3); }

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
  .c-spark { display: none; }
  .htable.hasres .hh, .htable.hasres .hrow {
    grid-template-columns: 40px 32px 56px minmax(0,1fr) 42px 78px 150px 70px 62px 64px;
  }
  .htable.nores .hh, .htable.nores .hrow {
    grid-template-columns: 32px 56px minmax(0,1fr) 42px 78px 150px 70px 62px 64px;
  }
}
@media (max-width: 880px) {
  .gauges { margin-left: 0; flex-basis: 100%; justify-content: space-between; gap: 6px; }
  .c-sho, .c-ninki { display: none; }
  .htable.hasres .hh, .htable.hasres .hrow {
    grid-template-columns: 36px 30px 52px minmax(0,1fr) 74px 134px 66px 62px;
  }
  .htable.nores .hh, .htable.nores .hrow {
    grid-template-columns: 30px 52px minmax(0,1fr) 74px 134px 66px 62px;
  }
  .hh, .hrow { gap: 7px; padding: 7px 10px; }
  .rh { padding: 12px 13px; }
  .rh-place, .rh-rno { font-size: 26px; }
  .rh-name { font-size: 24px; }
  .ex-grid { grid-template-columns: 1fr; }
  .an-grid, .cc-grid { grid-template-columns: 1fr; }
  .chart { height: 300px; }
  .chart.sm { height: 220px; }
  .tk-row { flex-direction: column; gap: 6px; }
  .tk-lab { display: flex; gap: 8px; align-items: center; padding-top: 0; min-width: 0; }
  .tk-icon { font-size: 16px; }
  .tk-chip { min-width: 0; flex: 1 1 auto; }
  .gs-bar { padding: 12px 14px; }
  .gs-title { font-size: 16px; }
  .gs-body { padding: 4px 14px 12px; }
  .gs-p { font-size: 15px; line-height: 1.8; }
  .gs-h { font-size: 16px; }
  .modenav button { font-size: 13px; padding: 5px 11px; }
  .rs-sum-grid { grid-template-columns: 1fr 1fr; }
  .rs-stat .v { font-size: 23px; }
  .hit-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hit-pay { font-size: 19px; }
  .hit-stamp { flex-basis: 40px; font-size: 16px; }
  .rt2-n { display: none; }
  .um-card { padding: 10px 8px 4px; }
  .um-head, .um-row {
    grid-template-columns: 24px 34px minmax(0,1fr) 50px 32px 44px;
    gap: 5px; padding: 8px 2px;
  }
  .um-odds, .um-evt, .um-evf, .um-reason { display: none; }
  .um-name { font-size: 13.5px; }
  .um-row .num { font-size: 13.5px; }
  .um-xroi { font-size: 16px; }
  .um-side { font-size: 11.5px; }
  .tr-sets { margin-left: 0; flex-basis: 100%; }
  .res-pays { margin-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  /* AI指数(c-ai) はモバイルでも残す。バー/順位を省き数値のみのコンパクト表示に。 */
  .c-ai .bar, .c-ai .rk { display: none; }
  .pbar { gap: 0; justify-content: center; }
  .aidx { width: auto; min-width: 0; font-size: 14px; text-align: center; }
  .c-ai .hsort { font-size: 9px; }
  .htable.hasres .hh, .htable.hasres .hrow {
    grid-template-columns: 18px 16px 24px minmax(0,1fr) 36px 32px 34px 32px;
    gap: 4px; padding: 7px 5px;
  }
  .htable.nores .hh, .htable.nores .hrow {
    grid-template-columns: 18px 26px minmax(0,1fr) 38px 34px 36px 34px;
    gap: 4px; padding: 7px 5px;
  }
  .hh { font-size: 11px; top: 54px; }
  .hh span, .hsort { white-space: nowrap; }
  .hsort { font-size: 11px; }
  .hrow { align-items: center; }
  /* 馬名は常に 1 行表示。列幅を詰め名前列を最大化し、9 文字名でも収める。 */
  .hname { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hsub { font-size: 10px; }
  .kyaku { font-size: 9px; padding: 0 4px; margin-right: 4px; }
  .pair { grid-template-columns: 46px 10px 46px repeat(3, minmax(0,1fr)) auto; gap: 5px; }
  .pair-v { font-size: 13px; }
  .pair-v small { font-size: 9px; }
  .pair.hh2 { font-size: 10px; }
  .pair-h .wk { min-width: 20px; height: 20px; font-size: 12px; }
  .pair-note { font-size: 11px; }
  .odds, .pwin { font-size: 14px; }
  .pwin small, .psho small { font-size: 9px; }
  .oddsev { font-size: 9.5px; }
  .vschip { font-size: 10.5px; padding: 2px 5px; }
  .mark { font-size: 16px; }
  .mark.m1 { font-size: 18px; }
  .wk { min-width: 21px; height: 21px; font-size: 12.5px; }
  .resb { width: 20px; height: 20px; font-size: 12px; }
  .dw-info { grid-template-columns: 1fr; }
  /* メンバーレベル: 幅が狭いのでスペクトラムを少し詰める */
  .mlvl { gap: 10px; padding: 10px 11px; }
  .mlvl-t .mlvl-lab { font-size: 15px; }
  .mls-track { gap: 2px; height: 20px; }
  .mls-zone { font-size: 11px; }
  .mls-cap, .mls-avg em { font-size: 9.5px; }
  .lvchip { font-size: 10.5px; padding: 0 5px; margin-right: 4px; }
  /* 的中カード: 2列×170px では中身が overflow:hidden で切れるため 1 列にする */
  .hit-grid { grid-template-columns: 1fr; }
}

/* ---- モバイル topbar: 2段化 (モード楕円の縦潰れ / 開催日の見切れ を解消) ---- */
@media (max-width: 680px) {
  .tb-in { flex-wrap: wrap; row-gap: 9px; min-height: 0; padding: 9px var(--pad); }
  .brand { order: 1; }
  .brand-mark { font-size: 21px; }
  .topbar-right { order: 2; margin-left: auto; }
  .date-wrap { padding: 4px 12px 4px 11px; }
  #dateSel { font-size: 16px; }
  /* モードナビをフル幅・3等分の水平ピルに (テキスト折返し禁止で楕円を綺麗に) */
  .modenav { order: 3; flex-basis: 100%; width: 100%; gap: 4px; }
  .modenav > button, .modenav > a { flex: 1 1 0; min-width: 0; }
  .modenav > a { display: flex; text-decoration: none; }
  .modenav > a > button { width: 100%; }
  .modenav button {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 6px; font-size: 13.5px; white-space: nowrap;
  }
}