/* パターン B「ライン型（HUD）」: 面で囲わず、線・下線・左バーで区切る。角は直線寄り、数字は等幅。
   同じ方向性（シンプル操作 × 発光演出）で、A より「計器・端末」寄りの佇まい */

/* B は UI が線主体で背景が相対的に強く見えるため、キャンバスの不透明度を下げ、暗幕を濃くする（ガラス感はそのまま） */
#bg{opacity:.5}
.tint{background:
    radial-gradient(ellipse at 50% 30%, rgba(var(--acc-rgb),.08) 0%, rgba(var(--deep-rgb),.18) 40%, rgba(var(--ink-rgb),.9) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.7) 0%, rgba(var(--ink-rgb),.45) 40%, rgba(var(--ink-rgb),.75) 100%)}
.scan{opacity:.14}

/* ブロック見出し: 罫線＋タグ */
.blk{margin-top:18px}
.blk-h{display:flex;align-items:baseline;gap:8px;padding-bottom:7px;border-bottom:1px solid rgba(var(--acc-rgb),.35);position:relative}
.blk-h::after{content:'';position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.blk-h .tag{font:700 10px/1 var(--mono);color:var(--acc);letter-spacing:.2em}
.blk-h .t{font:700 15px/1 var(--jp)}
.blk-h .sub{margin-left:auto;font:600 9.5px/1 var(--en);letter-spacing:.2em;color:var(--soft);white-space:nowrap}
.blk-h .sub.busy{animation:blink .7s steps(2) infinite}

/* 開催日: セグメント */
.seg{display:inline-flex;border:1px solid rgba(var(--acc-rgb),.5);border-radius:6px;overflow:hidden;margin-top:12px;background:rgba(var(--ink-rgb),.55)}
.seg button{box-sizing:border-box;width:112px;height:38px;border:0;background:transparent;color:var(--muted);font:700 14px/1 var(--jp);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.seg button small{font:600 11px/1 var(--num)}
.seg button+button{border-left:1px solid rgba(var(--acc-rgb),.4)}
.seg button.is-on{background:rgba(var(--acc-rgb),.22);color:#fff;box-shadow:inset 0 0 16px rgba(var(--acc-rgb),.35);text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}

/* 開催場: タブ（発光下線） */
.vtabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-bottom:1px solid var(--line)}
.vt{position:relative;background:transparent;border:0;color:var(--muted);padding:10px 4px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:color .15s}
.vt b{font:900 21px/1 var(--jp);letter-spacing:.04em}
.vt small{font:600 9px/1 var(--en);letter-spacing:.2em}
.vt em{font:500 11px/1 var(--jp);font-style:normal;margin-top:2px}
.vt:hover{color:#fff}
.vt.is-on{color:#fff;background:linear-gradient(180deg, transparent, rgba(var(--acc-rgb),.14))}
.vt.is-on b{text-shadow:0 0 12px rgba(var(--acc-rgb),.9)}
.vt.is-on small{color:var(--soft)}
.vt.is-on::after{content:'';position:absolute;left:12%;right:12%;bottom:-1px;height:3px;background:var(--acc);border-radius:2px;box-shadow:0 0 12px var(--acc), 0 0 24px rgba(var(--acc-rgb),.6)}

/* レース: 罫線リスト */
.rl{list-style:none;margin:4px 0 0;padding:0}
.rr a{position:relative;display:grid;grid-template-columns:56px 1fr 50px;gap:10px;align-items:center;padding:11px 4px 11px 12px;border-bottom:1px solid rgba(255,255,255,.1);
  text-decoration:none;color:#fff;animation:fadeUp .3s both;animation-delay:calc(var(--i, 0) * 30ms);transition:background .15s}
.rr a::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:transparent}
.rr a:hover,.rr a:active{background:rgba(var(--acc-rgb),.08)}
.rr a.picked{background:rgba(var(--acc-rgb),.22)}
.rr a.picked::before{background:#fff;box-shadow:0 0 12px #fff}
.rr.next a{background:linear-gradient(90deg, rgba(var(--acc-rgb),.18), transparent 75%)}
.rr.next a::before{background:var(--acc);box-shadow:0 0 10px var(--acc);animation:glowbar 2.2s ease-in-out infinite}
@keyframes glowbar{0%,100%{box-shadow:0 0 6px var(--acc)}50%{box-shadow:0 0 18px var(--acc), 0 0 30px rgba(var(--acc-rgb),.7)}}
.rr.fin a{opacity:.45}
.col-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.col-t b{font:700 17px/1 var(--num);letter-spacing:.04em}
.col-t small{font:700 10px/1 var(--mono);color:var(--acc);letter-spacing:.1em}
.rr.fin .col-t small{color:var(--muted)}
.col-m{min-width:0}
.l1{display:flex;align-items:center;gap:6px;min-width:0}
.l1 .nm{font:700 15px/1.3 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nxt{flex:0 0 auto;font:900 8.5px/1 var(--en);letter-spacing:.18em;color:var(--ink);background:var(--acc);padding:3px 5px;border-radius:3px;box-shadow:0 0 10px rgba(var(--acc-rgb),.8)}
.l2{font:500 11px/1.3 var(--jp);color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2 .turf{color:#8ef0b4}.l2 .dirt{color:#f0c896}
.l3{display:flex;align-items:center;gap:6px;margin-top:5px;font:700 12px/1.2 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l3 .ai{flex:0 0 auto;font:700 8.5px/1 var(--mono);color:var(--soft);letter-spacing:.16em;border:1px solid rgba(var(--acc-rgb),.45);padding:2px 4px;border-radius:3px}
.l3 .mk{color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
.l3 span.j{color:var(--muted);font-weight:500}
/* リングゲージ */
.ring{position:relative;width:48px;height:48px;justify-self:end}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.5}
.ring .tr{stroke:rgba(255,255,255,.12)}
.ring .pr{stroke:var(--acc);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--acc))}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 12.5px/1 var(--num)}
.ring b small{font-size:8px;margin-left:1px}
.ring.lg{width:88px;height:88px}
.ring.lg circle{stroke-width:5}
.ring.lg b{font-size:24px}
.ring.lg b small{font-size:11px}

/* ===== 出馬表ページ ===== */
.hud{margin-top:14px;padding:14px 0 14px 14px;border-left:3px solid var(--acc);box-shadow:-0 0 0 transparent;position:relative;background:linear-gradient(90deg, rgba(var(--acc-rgb),.14), transparent 70%)}
.hud::before{content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.hud-top{display:flex;align-items:flex-start;gap:12px}
.rno{flex:0 0 auto;font:900 34px/1 var(--num);letter-spacing:.02em;text-shadow:0 0 14px rgba(var(--acc-rgb),.8)}
.rno small{font:700 12px/1 var(--mono);color:var(--acc);margin-left:2px}
.hud .vl{font:700 10px/1 var(--mono);letter-spacing:.2em;color:var(--soft)}
.hud .rn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:5px 0 0;font:900 21px/1.2 var(--jp)}
.hud .meta{margin-top:7px;font:500 12px/1.5 var(--jp);color:rgba(255,255,255,.85)}
.hud .meta b{font:700 14px/1 var(--num);color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.7)}
.hud .meta .turf{color:#8ef0b4}.hud .meta .dirt{color:#f0c896}
.hud .meta i{font-style:normal;color:var(--muted);margin:0 4px}

/* AI: 端末風ログ → 結果 */
.aiwrap{margin-top:10px;position:relative}
.term{border:1px solid rgba(var(--acc-rgb),.4);background:rgba(var(--ink-rgb),.7);padding:10px 12px;font:600 12px/1.7 var(--mono);color:var(--soft);min-height:74px;position:relative;overflow:hidden}
.term::after{content:'';position:absolute;left:0;right:0;height:40px;top:-40px;background:linear-gradient(180deg, transparent, rgba(var(--acc-rgb),.2), transparent);animation:sweep 1s linear infinite}
@keyframes sweep{to{top:100%}}
.term div::before{content:'> ';color:var(--acc)}
.term .cur::after{content:'▍';color:var(--acc);animation:blink .6s steps(2) infinite}
.tprog{height:2px;background:rgba(255,255,255,.12);margin-top:6px}
.tprog i{display:block;height:100%;width:0;background:var(--acc);box-shadow:0 0 8px var(--acc);transition:width .25s}
.res{display:none}
.aiwrap.done .term,.aiwrap.done .tprog{display:none}
.aiwrap.done .res{display:block;animation:fadeUp .4s both}
.res-top{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;padding:6px 0 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.res-top .cap{font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--soft);margin-bottom:6px}
.top3{display:flex;flex-direction:column;gap:5px}
.t3{display:grid;grid-template-columns:20px 26px 1fr auto;gap:7px;align-items:center;font:700 13.5px/1.2 var(--jp);min-width:0}
.t3 .mk{text-align:center;font-size:15px}
.t3.m0 .mk{color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
.t3 .no{font:700 13px/1 var(--num);width:26px;height:22px;border-radius:4px}
.t3 .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3 .sc{font:700 13px/1 var(--num);color:var(--soft)}
.t3 .sc b{color:#fff;font-size:15px}
.sub-picks{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font:700 12px/1.3 var(--jp);color:rgba(255,255,255,.85)}
.sub-picks span{color:var(--muted);font-weight:500}
.bt{width:100%;border-collapse:collapse;margin-top:10px;font:700 13px/1 var(--num)}
.bt th{font:700 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--soft);text-align:left;padding:6px 0;border-bottom:1px solid rgba(var(--acc-rgb),.35)}
.bt td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top}
.bt td.ty{font:700 12px/1.2 var(--jp);width:58px;color:var(--soft)}
.bt td .ln{display:flex;flex-wrap:wrap;gap:6px 12px}
.bt td .ln span{letter-spacing:.06em}
.bt td .ln span em{font-style:normal;color:var(--acc);margin:0 1px}
.note{margin:10px 0 0;font:500 11px/1.6 var(--jp);color:var(--muted)}

/* 出走馬: 行カード（左に枠色バー） */
.hlist{margin-top:6px}
.hl-h{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.hl-h .cap{font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--soft)}
.sw{display:flex;border:1px solid rgba(var(--acc-rgb),.5);border-radius:4px;overflow:hidden}
.sw button{box-sizing:border-box;width:64px;height:28px;border:0;background:transparent;color:var(--muted);font:700 11.5px/1 var(--jp);cursor:pointer}
.sw button+button{border-left:1px solid rgba(var(--acc-rgb),.4)}
.sw button.is-on{background:rgba(var(--acc-rgb),.25);color:#fff;text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
.hr{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:8px 6px 8px 0;border-bottom:1px solid rgba(255,255,255,.1);animation:fadeUp .3s both;animation-delay:calc(var(--i, 0) * 20ms)}
.hr .wk{width:32px;height:32px;border-radius:6px;font:700 16px/1 var(--num);display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.25)}
.hr .nm{min-width:0;font:700 14px/1.25 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.hr .nm .mk{color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
.hr .nm .mk.sub{color:rgba(255,255,255,.8);text-shadow:none}
.hr .s{font:500 11px/1.3 var(--jp);color:var(--muted);margin-top:2px}
.hr .rt{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hr .rt b{font:700 18px/1 var(--num)}
.hr .rt b small{font:700 8px/1 var(--mono);color:var(--soft);margin-left:3px;letter-spacing:.1em}
.hr .rt span{font:600 11px/1 var(--num);color:var(--muted)}
.hr .rt span em{font-style:normal;color:#fff}
.hr.fav .rt span em{color:#ffd54a}
.hr.top1{background:linear-gradient(90deg, rgba(var(--acc-rgb),.18), transparent 80%)}
.hr.top1 .rt b{color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
.hr.top2,.hr.top3{background:linear-gradient(90deg, rgba(var(--acc-rgb),.08), transparent 80%)}

/* 前後・戻る */
.nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.nb{display:flex;flex-direction:column;justify-content:center;gap:3px;height:54px;padding:0 10px;border:1px solid rgba(var(--acc-rgb),.4);color:#fff;text-decoration:none;min-width:0;position:relative;background:rgba(var(--ink-rgb),.5)}
.nb small{font:600 9px/1 var(--mono);letter-spacing:.2em;color:var(--soft)}
.nb b{font:700 13px/1.2 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb.r{text-align:right;align-items:flex-end}
.nb:hover{background:rgba(var(--acc-rgb),.14);border-color:var(--acc)}
.nb.dis{opacity:.35;pointer-events:none}
.back{display:flex;align-items:center;justify-content:center;height:46px;margin-top:10px;border:1px solid var(--acc);background:rgba(var(--acc-rgb),.16);color:#fff;text-decoration:none;font:700 14px/1 var(--jp);letter-spacing:.06em;box-shadow:0 0 16px rgba(var(--acc-rgb),.3);transition:.15s}
.back:hover{background:var(--acc);color:var(--ink)}