/* ドリームジョッキーカメラ — 画面の見た目（全レース共通）。設計の正は docs/jockey-cam-spec.md。
   配色トークンはサイト本体（index.html の :root）と同じ値。試作は単体なので複製している。
   レースの色（舞台の色）は --race-1・--race-2（夢のJC＝黒と金・夢の有馬記念＝グランプリの赤と金。body[data-race] で切り替える）。 */
:root{
  --ink:#0d120e; --ink-2:#121a14; --turf:#1c3b28; --turf-2:#27513a;
  --paper:#ece1c8; --paper-2:#e0d2b2; --paper-ink:#241d11;
  --gold:#c9a35b; --gold-2:#e6cc92; --red:#c8392f; --mist:#9eb2a3;
  --line:rgba(201,163,91,.22);
  --w1:#f2f0e8; --w2:#1c1c1c; --w3:#d2402f; --w4:#28579f; --w5:#e3bd33; --w6:#2c7a4d; --w7:#d97c2b; --w8:#dd8fae;
  --f-min:'Shippori Mincho B1',"Hiragino Mincho ProN",serif;
  --f-got:'Zen Kaku Gothic New',"Hiragino Kaku Gothic ProN",sans-serif;
  --f-num:'Oswald',sans-serif;
  --gutter:clamp(14px,3vw,36px);
  --hh:50px;
  --race-1:#0b0b0a; --race-2:#c9a35b;
  --shadow:0 14px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:radial-gradient(1200px 700px at 80% -10%,rgba(201,163,91,.10),transparent 60%),
  radial-gradient(900px 600px at -10% 110%,rgba(39,81,58,.22),transparent 55%),#0b0d0c;
  color:#e9e4d6;font-family:var(--f-got);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;background:none;border:0}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:3px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
h1,h2,h3{font-family:var(--f-min);font-weight:700;line-height:1.35}
.muted{color:var(--mist)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 枠 ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--hh);padding:0 var(--gutter);border-bottom:1px solid var(--line);background:rgba(11,13,12,.92);position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.top .brand{font-family:var(--f-min);font-weight:800;color:#f1eadc;letter-spacing:.06em}
.top .r{display:flex;align-items:center;gap:12px;font-size:12.5px}
.top .hb{border:1px solid var(--line);color:var(--gold-2);border-radius:999px;padding:2px 10px;font-size:12px;min-height:30px}
.wrap{max-width:1180px;margin:0 auto;padding:18px var(--gutter) 40px}
.loading{color:var(--mist);padding:40px 0;text-align:center;font-family:var(--f-min);letter-spacing:.2em}
.foot{color:var(--mist);font-size:12px;max-width:72ch;margin:20px auto 0;padding:0 var(--gutter) 30px;line-height:1.8}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);overflow-wrap:anywhere;text-align:center;background:var(--gold);color:var(--ink);padding:8px 16px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:80;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.toast.on{opacity:1}
.stage.on ~ .toast{bottom:auto;top:44%}   /* レース中は親指のボタンと重ねない */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:1px solid var(--line);border-radius:999px;color:var(--gold-2);font-size:14px;letter-spacing:.06em;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{border-color:var(--gold);background:rgba(201,163,91,.08)}
.btn--solid{background:var(--gold);color:#120f08;border-color:var(--gold);font-weight:700}
.btn--solid:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn--big{min-height:52px;padding:10px 26px;font-size:16px}
.btn i{font-style:normal}
.actbar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:16px 0 0}

/* ---------- 題 ---------- */
.ttl{display:flex;align-items:flex-end;gap:10px 18px;flex-wrap:wrap;margin:4px 0 6px}
.ttl .mark{font-family:var(--f-num);font-size:11px;letter-spacing:.32em;color:var(--gold);border:1px solid var(--line);padding:6px 12px}
.ttl h1{font-size:clamp(26px,4.6vw,40px);letter-spacing:.1em;color:#f4ecd8}
@media (max-width:420px){ .ttl h1{font-size:clamp(21px,6.4vw,26px)} }   /* 小さいスマホで題が2行に折れて、出馬表の最初の画面を食っていた(2026-10-18) */
.ttl .sub{font-family:var(--f-min);font-size:14px;color:var(--gold-2);letter-spacing:.12em}
.lede{color:#cfc8b4;font-size:13.5px;max-width:52em;margin:0 0 18px}

/* ---------- 馬を選ぶ ---------- */
.pick{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
@media (max-width:900px){ .pick{grid-template-columns:1fr} }
.hero{position:sticky;top:calc(var(--hh) + 14px);background:linear-gradient(180deg,#131210,#0b0b0a);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
@media (max-width:900px){ .hero{position:relative;top:0;order:-1;scroll-margin-top:calc(var(--hh) + 10px)} }   /* 一覧で選ぶと肖像へ送る＝上の帯(ヘッダー)の下に止める */
.hero .kv{aspect-ratio:3/2;background:#0b0b0a center/cover no-repeat;position:relative}
.hero .kv.none{display:flex;align-items:center;justify-content:center}
.hero .kv.none .big-rosette{width:120px;height:120px}
.hero .kv::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,rgba(11,11,10,.92))}
.hero .tx{padding:14px 16px 16px;position:relative;margin-top:-60px;z-index:1}
.hero .en{font-family:var(--f-num);font-size:11px;letter-spacing:.24em;color:#a59468;text-transform:uppercase}
.hero .nm{font-family:var(--f-min);font-weight:800;font-size:28px;letter-spacing:.08em;color:#f6edd6;line-height:1.3}
.hero .meta{display:flex;gap:6px 10px;flex-wrap:wrap;margin:6px 0 8px;font-size:12.5px;color:#cfc8b4}
.hero .meta .chip{border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--gold-2)}
.hero .note{font-size:13px;color:#ddd5c1;margin:0 0 10px;min-height:2.6em}
.hero .tip{font-size:12px;color:var(--mist);border-top:1px solid var(--line);padding-top:8px;margin-top:6px}
.hero .go{width:100%;margin-top:10px}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px}
.rc{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 10px;border:1px solid rgba(201,163,91,.16);border-radius:10px;background:rgba(255,255,255,.02);min-height:56px;transition:border-color .15s,background .15s}
.rc:hover{border-color:var(--gold)}
.rc[aria-pressed="true"]{border-color:var(--gold);background:rgba(201,163,91,.12);box-shadow:inset 0 0 0 1px var(--gold)}
.rc .ros{flex:none}
.rc .t{display:flex;flex-direction:column;min-width:0}
.rc .t b{font-family:var(--f-min);font-weight:700;font-size:13.5px;letter-spacing:0;color:#f1e9d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .t small{font-size:11px;color:var(--mist);letter-spacing:.06em}
.rc .best{margin-left:auto;font-family:var(--f-num);font-size:11px;color:var(--gold-2)}
.ros{display:inline-block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.45)}
.big-rosette{border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.6)}
/* 好きに走る(試走)の競馬場とコース */
.freec{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(201,163,91,.04)}
.freec .pick-h{margin-bottom:10px}
.fc-v{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px}
.fc-v:last-child{margin-bottom:0}
.fc-v>b{flex:0 0 2.6em;font-family:var(--f-min);font-size:14px;color:#f1e9d4;padding-top:5px}
.fc-l{display:flex;gap:6px;flex-wrap:wrap}
.fc-l a{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:999px;padding:3px 11px;min-height:32px;font-family:var(--f-num);font-size:13px;color:#d9d0b9}
.fc-l a small{font-family:var(--f-got);font-size:10.5px;color:var(--mist)}
.fc-l a:hover{border-color:var(--gold)}
.fc-l a[aria-current="page"]{background:var(--gold);color:#120f08;border-color:var(--gold)}
.fc-l a[aria-current="page"] small{color:#3a2f18}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.filters button{border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12px;color:#d9d0b9;min-height:32px}
.filters button[aria-pressed="true"]{background:var(--gold);color:#120f08;border-color:var(--gold)}
.pick-h{font-size:12.5px;color:var(--mist);letter-spacing:.06em;margin:0 0 8px;scroll-margin-top:calc(var(--hh) + 12px)}
.pick-h b{font-family:var(--f-min);font-weight:700;font-size:15px;color:#f1e9d4;letter-spacing:.08em;margin-right:4px}
.pick-h .num{font-family:var(--f-num);font-weight:500;color:var(--gold-2)}
.hero .more,.ridebar{display:none}
/* スマホ・狭い画面(1列)の馬を選ぶ画面(2026-10-22 オーナー「出走ボタンが見えないし、他に馬が選択できることもわからない」・
   「こんなに情報量必要なんですか？」)。並びは肖像が上・一覧が下のまま(肖像は全身の 3:2 のまま＝横に送る一覧は不採用・同日オーナー)で:
   ①「この馬に乗る」は画面の下に貼り付く帯(出馬表の .mebox と同じ sticky＝一覧の下まで来たらそこに収まる)
   ②肖像の右上に「全38頭から選ぶ ▼」の札＝押すと一覧の見出しへ(ほかの馬を選べることが最初の画面で分かる)
   ③前文(.lede)は出さない(同じ中身は下の #about の書き出しにある＝検索向けの文は静的HTML側が持つ。前文は JS が描く飾りで、
   検索には効いていない)。広い画面は2列のまま(肖像の札の中のボタン) */
@media (max-width:900px){
  body[data-screen="select"] .lede{display:none}
  .hero .go{display:none}
  .hero .more{display:inline-flex;align-items:center;gap:4px;position:absolute;top:10px;right:10px;z-index:2;min-height:36px;padding:4px 12px;
    border:1px solid rgba(201,163,91,.55);border-radius:999px;background:rgba(11,11,10,.72);backdrop-filter:blur(6px);
    color:var(--gold-2);font-size:12.5px;letter-spacing:.06em}
  .hero .more .num{font-family:var(--f-num);font-size:14px}
  .ridebar{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;z-index:6;margin:14px calc(-1 * var(--gutter)) 0;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(11,13,12,.94);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -14px 18px -12px rgba(0,0,0,.7)}
  .rb-who{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
  .rb-who .ros{flex:none;width:26px;height:26px}
  .rb-who .t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
  .rb-who b{font-family:var(--f-min);font-weight:700;font-size:15px;color:#f6edd6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rb-who small{font-size:11px;color:var(--mist);letter-spacing:.06em}
  .ridebar .btn--big{flex:none;min-height:48px;padding:8px 18px;font-size:15px}
  body[data-screen="select"] .wrap{padding-bottom:0}
}
/* スマホ: 題を詰める(レースを選ぶページの題と同じ考え方)。英字の札(DREAM JOCKEY CAM)は見出しの言い換えの飾りなので出さず、
   見出し(h1＝検索に出す語「ドリームジョッキーカメラ」はそのまま)＋レース名の2行に。JS が描く前(body に data-screen が無い＝
   静的HTMLの題)も同じ形＝描き替えで題の高さが跳ねない */
@media (max-width:560px){
  body:not([data-screen]) .wrap,body[data-screen="select"] .wrap{padding-top:10px}
  body:not([data-screen]) .ttl,body[data-screen="select"] .ttl{gap:2px 10px;margin:0 0 10px}
  body:not([data-screen]) .ttl .mark,body[data-screen="select"] .ttl .mark{display:none}
  body:not([data-screen]) .ttl h1,body[data-screen="select"] .ttl h1{flex-basis:100%;font-size:22px;letter-spacing:.08em}
  body:not([data-screen]) .ttl .sub,body[data-screen="select"] .ttl .sub{font-size:12.5px}
}

/* ---------- 出馬表(競馬新聞の組版) ---------- */
.paper{background:var(--paper);color:var(--paper-ink);padding:16px 14px 14px;box-shadow:var(--shadow);
  background-image:radial-gradient(rgba(36,29,17,.05) 1px,transparent 1px);background-size:5px 5px;border-top:6px solid var(--race-1)}
.paper-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;border-bottom:2px solid var(--paper-ink);padding:0 2px 8px}
.paper-head h2{font-size:20px;letter-spacing:.14em}
.paper-head .c{font-size:11.5px;letter-spacing:.14em;color:#6b5c3c}
.paper-head .g{margin-left:auto;font-size:11px;color:#6b5c3c;letter-spacing:.06em}
/* 難易度(2026-10-24): 新聞の囲みの札。選んだ難易度は墨の地に白抜き(馬場の札と同じ組版)・難しいは赤鉛筆。右に一言 */
.paper-lv{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-bottom:1px dashed rgba(36,29,17,.35);padding:8px 2px 9px;font-size:11px;color:#5d4f33}
.paper-lv .lk{letter-spacing:.14em;margin-right:2px}
.paper-lv button{border:1px solid rgba(36,29,17,.6);padding:3px 14px;min-height:34px;font-family:var(--f-min);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--paper-ink);background:transparent}
.paper-lv button[aria-pressed="true"]{background:var(--paper-ink);color:var(--paper)}
.paper-lv button[data-lv="hard"][aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.paper-lv button:focus-visible{outline-color:var(--paper-ink)}
.paper-lv .ln{font-size:11.5px;color:#4a3f28;margin-left:4px}
.sheet{display:flex;flex-direction:row-reverse;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 0 6px}
.col{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:50px;padding:10px 4px 8px;border-left:1px solid rgba(36,29,17,.25);position:relative}
.col:last-child{border-right:1px solid rgba(36,29,17,.25)}
.col.me{background:rgba(200,57,47,.07)}
.wk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-family:var(--f-num);font-weight:600;font-size:12.5px}
.wk.w1{background:var(--w1);border:1px solid rgba(36,29,17,.4)}.wk.w2{background:var(--w2);color:#fff}.wk.w3{background:var(--w3);color:#fff}.wk.w4{background:var(--w4);color:#fff}
.wk.w5{background:var(--w5)}.wk.w6{background:var(--w6);color:#fff}.wk.w7{background:var(--w7)}.wk.w8{background:var(--w8)}
.col .no{font-family:var(--f-num);font-size:15px;font-weight:600}
.col .vn{writing-mode:vertical-rl;font-family:var(--f-min);font-weight:700;font-size:15px;letter-spacing:.12em;min-height:10.5em;line-height:1.2}
.col .vs{writing-mode:vertical-rl;font-size:10px;letter-spacing:.3em;color:#6b5c3c}
.col .rd{margin-top:auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-family:var(--f-min);font-weight:800;font-size:11px;letter-spacing:.02em;color:transparent}
.col.me .rd{color:var(--red);border:2px solid var(--red);border-radius:50%;transform:rotate(-8deg);font-size:12px}
.paper-foot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;border-top:1px solid rgba(36,29,17,.3);padding:10px 2px 0;font-size:11.5px;color:#5d4f33}
.paper-foot b{color:var(--paper-ink)}
/* あなたの馬と発走(2026-10-18 初見レビュー＝発走が最初の画面に無かった)。スマホ・狭い画面は列のすぐ下の帯で、列が画面に
   残っている間は画面の下に貼り付く(sticky)。広い画面(1180px〜＝新聞の左に空き欄ができる幅)は、その空き欄に赤鉛筆の囲み */
.paper-body{position:relative}
.mebox{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:6px 12px;margin:0 -14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);background-image:radial-gradient(rgba(36,29,17,.05) 1px,transparent 1px);background-size:5px 5px;
  border-top:2px solid var(--paper-ink);box-shadow:0 -12px 16px -14px rgba(36,29,17,.6)}
.mb-who{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;line-height:1.4}
.mb-k{flex-basis:100%;font-size:10.5px;letter-spacing:.2em;color:var(--red);font-weight:700}
.mb-s{margin-left:10px;font-size:11px;letter-spacing:.04em;color:#5d4f33;font-weight:400}
.mb-s b{color:var(--paper-ink)}
.mb-id{display:inline-flex;align-items:center;gap:5px}
.mb-id .wk{width:20px;height:20px;font-size:12px}
.mb-id b{font-family:var(--f-num);font-size:18px;font-weight:600}
.mb-id small{font-size:11px;margin-left:-3px}
.mb-id .ros{width:18px;height:18px}
.mb-nm{font-family:var(--f-min);font-size:15px;letter-spacing:.06em}
.mebox .btn--big{flex:none;padding:8px 18px}
.kb-enter,.kb-note{display:none}
@media (hover:hover) and (pointer:fine){ .kb-enter{display:inline-block} }
.btn--solid kbd{color:#120f08;border-color:rgba(18,15,8,.45);background:rgba(255,255,255,.28);font-size:10.5px}
@media (min-width:1180px){
  .paper-body{display:flex;align-items:stretch}
  .paper-body .sheet{flex:1;min-width:0}
  .mebox{position:static;order:-1;flex:none;width:148px;flex-direction:column;align-items:stretch;justify-content:space-between;gap:8px;
    margin:10px 8px 6px 0;padding:12px 10px;border:2px solid var(--red);border-radius:4px;box-shadow:none;background:rgba(200,57,47,.05)}
  .mb-who{flex:none;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:8px}
  .mb-k{flex-basis:auto}
  .mb-s{display:block;margin:4px 0 0;letter-spacing:.02em;line-height:1.5}
  .mb-id .wk{width:22px;height:22px;font-size:12.5px}
  .mb-id .ros{width:22px;height:22px}
  .mb-nm{font-size:17px;line-height:1.45}
  .mebox .btn--big{width:100%;margin-top:auto;padding:8px 10px}
  .mebox .kb-enter{display:none}   /* 囲みは幅が狭い＝キーの印はボタンの下の一行に */
}
@media (min-width:1180px) and (hover:hover) and (pointer:fine){ .mebox .kb-note{display:block;font-size:11px;color:#6b5c3c;text-align:center;margin-top:-2px} }
/* 横向きの案内: ゲート(扉が開くまで2.2〜3.4秒)では読み切れないので、出馬表の発走の近くで一度だけ言う(スマホの縦持ちだけ) */
.rotnote{display:none;font-size:12px;color:var(--mist);margin:10px 2px 0}
@media (orientation:portrait) and (max-width:700px) and (pointer:coarse){ .rotnote{display:block} }
/* 馬場・天候(競馬新聞の天候・馬場の囲み)。湿った馬場は藍(枠の4番の青)・荒れた芝は赤鉛筆。下は乗り方の一言 */
.paper-cond{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;border-top:1px dashed rgba(36,29,17,.35);margin:10px 0 0;padding:9px 2px 0;font-size:11px;color:#5d4f33}
.paper-cond .ck{display:inline-flex;align-items:center;border:1px solid rgba(36,29,17,.6);padding-left:6px;letter-spacing:.14em;line-height:1.6}
.paper-cond .ck b{margin-left:6px;padding:1px 8px;background:var(--paper-ink);color:var(--paper);font-family:var(--f-min);font-weight:700;font-size:12.5px;letter-spacing:.06em}
.paper-cond .ck b.wet{background:var(--w4)}
.paper-cond .ck b.bad{background:var(--red)}
.paper-cond p{flex-basis:100%;font-size:12px;line-height:1.75;color:#4a3f28;margin-top:2px}
/* ジョッキーカメラとは・遊び方(2026-10-15 SEO): 静的HTMLの本文＝検索エンジンが読む中身。馬を選ぶ画面にだけ出す
   (出馬表・結果では隠す＝body[data-screen])。JS が描く前・描けない環境でも読める */
.about{max-width:1180px;margin:0 auto;padding:4px var(--gutter) 6px}
body[data-screen="card"] .about,body[data-screen="result"] .about{display:none}
.about h2{font-size:clamp(18px,2.6vw,22px);letter-spacing:.1em;color:#f4ecd8;margin:0 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.about .about-lead{color:#cfc8b4;font-size:13.5px;max-width:60em;margin:0 0 12px;line-height:1.85}
.about .about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.about .about-grid div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.about h3{font-size:14px;color:var(--gold-2);letter-spacing:.08em;margin-bottom:4px}
.about .about-grid p{font-size:12.5px;color:#cfc8b4;line-height:1.75}
.about .about-links{font-size:12.5px;color:var(--mist);margin:12px 0 0;line-height:1.85}
.nogl{border:1px solid rgba(200,57,47,.6);border-radius:10px;padding:8px 12px;margin:0 0 14px;font-size:13px;color:#f0d8d2;background:rgba(200,57,47,.12)}
.howto{margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.howto div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.howto h3{font-size:14px;color:var(--gold-2);letter-spacing:.08em;margin-bottom:4px}
.howto p{font-size:12.5px;color:#cfc8b4;line-height:1.75}
/* 遊び方の要点(これだけ)と、畳んだ本文(2026-10-18 初見レビュー＝本文は長くて発走より下＝読まれていなかった) */
.howto-wrap{margin:16px 0 0}
.howto-q{border:1px solid var(--gold);border-radius:12px;padding:10px 14px;background:rgba(201,163,91,.06)}
.howto-q h3{font-size:14.5px;color:var(--gold-2);letter-spacing:.08em;margin-bottom:4px}
.howto-q ol{padding-left:1.4em;font-size:13px;color:#e4dcc6;line-height:1.75}
.howto-q li{margin:2px 0}
.howto-q p{font-size:12px;color:var(--mist);margin-top:4px}
.howto-more{margin-top:6px}
.howto-more summary{cursor:pointer;padding:11px 2px;font-size:13px;color:var(--gold-2);letter-spacing:.06em}
.howto-more .howto{margin-top:2px}
kbd{font-family:var(--f-num);font-size:11px;border:1px solid rgba(230,204,146,.4);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:#f0e6cc;background:rgba(255,255,255,.04)}
.setrow{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin:14px 0 0;font-size:12.5px;color:#cfc8b4}
.setrow label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:36px}
.setrow input{accent-color:var(--gold);width:18px;height:18px}
.condsel{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:14px 0 0;font-size:12.5px;color:#cfc8b4}
.condsel label{color:var(--gold-2);letter-spacing:.12em}
.condsel select{font:inherit;font-size:13px;color:#f0e6cc;background:#141a16;border:1px solid var(--line);border-radius:8px;padding:5px 10px;min-height:38px;max-width:100%}
.condsel small{flex-basis:100%;font-size:11.5px;color:var(--mist)}

/* ---------- レース(全画面) ---------- */
.stage{position:fixed;inset:0;z-index:50;background:#000;display:none;touch-action:none;user-select:none;-webkit-user-select:none}
.stage.on{display:block}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 55%,rgba(0,0,0,.35) 100%)}
.speedfx{position:absolute;inset:0;pointer-events:none}
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--f-got);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.hud .tl{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:2px}
.hud .rem small{display:block;font-size:10.5px;letter-spacing:.24em;color:var(--gold-2)}
.hud .rem b{font-family:var(--f-num);font-weight:500;font-size:clamp(30px,5vw,46px);letter-spacing:.03em;line-height:1}
.hud .rem b i{font-style:normal;font-size:.42em;margin-left:3px;color:#ddd}
.hud .clock{font-family:var(--f-num);font-size:14px;color:#e9e1cc;letter-spacing:.06em}
.hud .clock span{color:var(--gold-2);margin-left:10px;font-size:12.5px}
.hud .condw{font-size:11.5px;letter-spacing:.1em;color:#dfe6ea}
.hud .condw:empty{display:none}
.hud .rank{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:4px;
  background:linear-gradient(180deg,rgba(11,11,10,.78),rgba(11,11,10,.55));border:1px solid rgba(201,163,91,.45);border-radius:10px;padding:2px 14px 4px}
.hud .rank b{font-family:var(--f-num);font-size:30px;font-weight:500;color:var(--gold-2);line-height:1.1}
.hud .rank small{font-family:var(--f-num);font-size:14px;color:#ddd}
.hud .rank em{font-style:normal;font-size:11px;color:#cfc8b4;margin-left:4px;letter-spacing:.1em}
.hud .call:empty{display:none}
/* PC: 実況の帯は残り距離の列(障害・坂路の札を含む)とミニマップの間で、入らなければ2行(幅 1024px で長い実況がミニマップに掛かった) */
.stage:not(.touch) .hud .call{width:max-content;max-width:min(92vw, 720px, calc(100% - 2 * (max(var(--tl-rb,150px), var(--mp-l,150px)) + 8px)));
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5}
.stage:not(.touch) .hud .call:empty{display:none}
.hud .call{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:min(92vw,720px);
  font-family:var(--f-min);font-weight:700;font-size:clamp(13px,2.1vw,17px);letter-spacing:.06em;padding:4px 14px;border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(11,11,10,.78),rgba(11,11,10,.35));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.hud .map{position:absolute;top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:clamp(120px,19vw,200px);
  background:rgba(11,11,10,.55);border:1px solid rgba(201,163,91,.3);border-radius:10px;padding:6px}
.hud .map canvas{position:static;width:100%;height:auto;display:block}
.hud .tower{position:absolute;top:calc(10px + env(safe-area-inset-top) + var(--maph,120px));right:calc(12px + env(safe-area-inset-right));display:flex;flex-direction:column;gap:2px;font-family:var(--f-num);font-size:12px}
.hud .tower div{display:flex;align-items:center;gap:6px;background:rgba(11,11,10,.55);padding:1px 8px 1px 4px;border-radius:5px;min-width:96px}
.hud .tower div.me{background:rgba(201,163,91,.85);color:#120f08;text-shadow:none}
.hud .tower .wk{width:17px;height:17px;font-size:10.5px}
.hud .tower .gap{margin-left:auto;font-size:11px;opacity:.85}
.hud .bottom{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:min(360px,40vw)}
.hud .status{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;min-height:24px}
.hud .status span{font-size:12px;padding:1px 10px;border-radius:999px;background:rgba(11,11,10,.6);border:1px solid rgba(255,255,255,.2);letter-spacing:.08em}
.hud .status .warn{border-color:#e0892f;color:#ffd3a2}
.hud .status .good{border-color:#6fbf8a;color:#c9f0d4}
.hud .status .bad{border-color:#e05a4f;color:#ffc6c0}
.gauges{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;width:100%;background:rgba(11,11,10,.55);border:1px solid rgba(201,163,91,.28);border-radius:12px;padding:7px 12px}
.gauges .spd{grid-row:span 3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:6px;border-right:1px solid rgba(255,255,255,.15)}
.gauges .spd b{font-family:var(--f-num);font-weight:500;font-size:28px;line-height:1}
.gauges .spd small{font-size:10px;letter-spacing:.2em;color:#cfc8b4}
.bar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:visible}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#3f8f5c,#8ccf71)}
.bar.gain i{box-shadow:0 0 0 2px rgba(190,240,160,.95),0 0 14px 2px rgba(140,207,113,.85)}
.bar.sp i{background:linear-gradient(90deg,#a8770c,#f0c860)}
.bar .need{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);transition:left .2s}
.bar .need.ok{background:#f0c860;box-shadow:0 0 8px #f0c860}
.lbl{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.14em;color:#ddd5c1}
.lbl em{font-style:normal;color:var(--gold-2)}
.pips{display:flex;gap:3px;justify-content:flex-end}
.pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.pips i.on{background:#f0c860}
.pips i.hot{background:#e05a4f}
.pips small{font-size:10px;letter-spacing:.06em;color:var(--mist);margin-right:2px;line-height:7px;align-self:center}   /* 残りのムチ(5発まで) */
.center{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 24px);text-align:center;pointer-events:none;opacity:0;transition:opacity .25s}
.center.on{opacity:1}
.lookw{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-size:13px;letter-spacing:.14em;padding:2px 14px;border-radius:999px;
  background:rgba(11,11,10,.62);border:1px solid rgba(230,204,146,.5);color:var(--gold-2);opacity:0;transition:opacity .15s;white-space:nowrap}
.lookw.on{opacity:1}
.center b{display:block;font-family:var(--f-min);font-weight:800;font-size:clamp(34px,7vw,72px);letter-spacing:.14em;color:#fff6dc;text-shadow:0 4px 18px rgba(0,0,0,.65)}
.center small{display:block;font-family:var(--f-num);font-size:clamp(14px,2.2vw,20px);letter-spacing:.2em;color:var(--gold-2)}
/* タッチ操作(左手＝進路・右手＝追う/ムチ。障害の開催はムチが左手・「飛ぶ」が右手＝下の「飛ぶ」ボタンの説明) */
.pad{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));display:none;gap:10px;pointer-events:auto}
.stage.touch .pad{display:flex}
.pad.l{left:calc(12px + env(safe-area-inset-left));align-items:flex-end}
.pad.r{right:calc(12px + env(safe-area-inset-right));align-items:flex-end}
.pad button{width:68px;height:68px;border-radius:50%;background:rgba(11,11,10,.45);border:1.5px solid rgba(230,204,146,.55);color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;
  display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.1;backdrop-filter:blur(2px);touch-action:none}
.pad button small{font-size:9.5px;font-weight:500;opacity:.8;letter-spacing:.1em}
.pad button.on{background:rgba(201,163,91,.75);color:#120f08}
.pad .whip{border-color:var(--gold);background:rgba(201,163,91,.25);position:relative}
/* 右手の大きいボタン(段の下): 平地はムチ・障害の開催は「飛ぶ」。大きさは場所のもの(ボタンを入れ替えても画面割りは同じ) */
.pad.r .row > button{width:92px;height:92px;font-size:20px}
/* ムチの間合い: 打つと周りの輪が空になり、約1秒で満ちる＝次の1発。嫌気の間は赤 */
.pad .whip::before{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--gold-2) calc(var(--rdy,1) * 1turn),rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.pad .whip.sour::before{background:conic-gradient(#e05a4f calc(var(--rdy,1) * 1turn),rgba(255,255,255,.14) 0)}
.pad .whip.empty{opacity:.45;border-color:var(--line);background:rgba(255,255,255,.04)}   /* 5発を打ち切った(K.WHIP_MAX) */
.pad .whip.empty::before{display:none}
.pad .col2{display:flex;flex-direction:column;gap:10px;align-items:center}
/* 脚の使い方: 3段の切り替え(タップ1回で選び、選んだ段のまま走る＝押しっぱなし不要)。ムチの上に横並び＝左から控える・馬なり・追う
   (右ほど速い)。ムチのすぐ上が追う＝押し間違えても害がない・控えるはムチから一番遠い左端(2026-10-14 オーナー「ムチを押したら控えるボタン押しがち」
   ＝縦3段をムチの左隣に置いていて、下端の控えるがムチの真横だった) */
.pad.r{flex-direction:column;align-items:flex-end}
.pad .row{display:flex;gap:10px;align-items:flex-end}
.pad .pace{display:flex;flex-direction:row;border-radius:14px;overflow:hidden;border:1.5px solid rgba(230,204,146,.55);background:rgba(11,11,10,.45);backdrop-filter:blur(2px)}
.pad .pace button{width:60px;height:44px;border-radius:0;border:0;background:transparent;font-size:13.5px;letter-spacing:.02em;backdrop-filter:none}
.pad .pace button + button{border-left:1px solid rgba(230,204,146,.28)}
.pad .pace button[aria-checked="true"]{background:rgba(201,163,91,.9);color:#120f08}
/* 見回し方の案内(タッチ・一度スワイプするまで、ゲートと発走直後に出す) */
.swipehint{position:absolute;left:50%;top:58%;transform:translateX(-50%);display:none;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;
  background:rgba(11,11,10,.62);border:1px solid rgba(230,204,146,.5);color:#f4ecd8;font-size:13px;letter-spacing:.08em;pointer-events:none;white-space:nowrap}
.swipehint.on{display:flex}
.stage.touch .swipehint{translate:0 calc(-1 * var(--sw-up,0px))}   /* ガイドの札に掛かるときは札の上へ持ち上げる(app.js hud・--sw-up) */
.stage.touch .swipehint{width:max-content;max-width:calc(100% - 24px);white-space:normal}   /* left:50% のままだと画面の半分の幅で折り返す */
.swipehint .trk{position:relative;width:56px;height:16px;flex:none}
.swipehint .trk::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(230,204,146,.45)}
.swipehint .trk i{position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 8px rgba(240,200,96,.8);animation:jcSwipe 1.4s ease-in-out infinite alternate}
@keyframes jcSwipe{from{left:0}to{left:42px}}
@media (prefers-reduced-motion:reduce){ .swipehint .trk i{animation:none;left:21px} }
/* ガイド(ON のとき): 場面ごとのおすすめ操作を一文で。押すべきボタンは光らせる(.gpulse)。
   位置: PC は馬の頭の上あたり(左下のゲージと重ねない)・タッチ横は左右の親指のボタンの間・タッチ縦は右手のボタンの上 */
.guide{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(210px + env(safe-area-inset-bottom));width:max-content;max-width:min(560px,92vw);
  display:none;gap:10px;align-items:baseline;padding:7px 14px;border-radius:12px;background:rgba(11,11,10,.76);border:1px solid rgba(240,200,96,.6);
  box-shadow:0 6px 20px rgba(0,0,0,.35);font-size:13.5px;line-height:1.6;color:#f4ecd8;text-shadow:none;pointer-events:none;letter-spacing:.02em}
.guide.on{display:flex}
.guide b{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#120f08;background:var(--gold-2);border-radius:999px;padding:0 9px}
/* 札の右上の縁に掛ける「ガイドOFF」(2026-10-15 オーナー「ガイド文章表示中は、ガイド文章のどこかにガイドOFFボタンを設けて」)。
   文の幅と行数は変えない(縁に半分はみ出して置く)。札は指を通す(pointer-events:none＝見回しのスワイプを妨げない)ので、このボタンだけ押せる。
   見た目は小さく、押せる範囲は ::after で上下左右に広げる(親指で押しやすく) */
.guide .goff{position:absolute;right:12px;top:-19px;pointer-events:auto;min-height:26px;padding:0 11px;border-radius:999px;background:#151410;border:1px solid rgba(240,200,96,.6);
  color:#f4ecd8;font:700 11.5px/24px var(--f-got);letter-spacing:.06em;white-space:nowrap;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.guide .goff::after{content:"";position:absolute;inset:-9px -7px}
.guide .goff:hover{border-color:var(--gold-2)}
/* タッチ(タブレットなど): 左右の親指のボタンの間(右手は段＋ムチで幅約194px・左手は約158px＝広い方に合わせて左右対称に空ける)。
   縦長・横長のスマホは下の @media で置き直す */
.stage.touch .guide{bottom:calc(62px + env(safe-area-inset-bottom));max-width:calc(100vw - 2 * (206px + max(env(safe-area-inset-left), env(safe-area-inset-right))))}
/* タッチのガイドは見出しの札を上に置き、文を全幅に(見出しの横だと、最初の障害の案内などの長い文が狭い幅で5行になり、障害の帯に届いた) */
.stage.touch .guide{flex-direction:column;align-items:flex-start;gap:3px;font-size:13px}
.gpulse{animation:jcPulse 1.1s ease-in-out infinite}
@keyframes jcPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,200,96,0)}50%{box-shadow:0 0 0 4px rgba(240,200,96,.9),0 0 18px 4px rgba(240,200,96,.55)}}
.pad .pace button.gpulse{animation:jcPulseIn 1.1s ease-in-out infinite}
@keyframes jcPulseIn{0%,100%{box-shadow:inset 0 0 0 0 rgba(240,200,96,0)}50%{box-shadow:inset 0 0 0 3px rgba(240,200,96,.95)}}
.pacew span.gpulse{animation:none;outline:2px solid var(--gold-2);outline-offset:1px}
@media (prefers-reduced-motion:reduce){ .gpulse{animation:none;box-shadow:0 0 0 3px rgba(240,200,96,.9)} .pad .pace button.gpulse{animation:none;box-shadow:inset 0 0 0 3px rgba(240,200,96,.95)} }
/* PC: 脚の使い方の段(タッチは右手のボタンが表示を兼ねるので出さない) */
.pacew{grid-column:2;display:flex;gap:4px;font-size:10.5px;letter-spacing:.1em}
.pacew span{padding:0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#cfc8b4}
.pacew span.on{background:rgba(201,163,91,.9);border-color:transparent;color:#120f08}
.stage.touch .pacew{display:none}
.stage.touch .hud .bottom{bottom:auto;flex-direction:column-reverse}
@media (max-height:460px){ .stage.touch .hud .tower{display:none} }   /* 横向きのスマホ: 順位の帯は右手のボタンと重なるので畳む(順位は上の札とミニマップで足りる) */
/* ---------- タッチの画面割り(2026-10-16 オーナー「上部の文言が重なる」＝Galaxy S25 Ultra の縦・「iPhone SE とか小さい端末も考慮した設計にしてね」) ----------
   固定の px で積むのをやめ、上の段の実寸から積む(app.js hudFit が測る CSS 変数: --tl-b/--tl-r 残り距離の列の下端/右端・--rk-b 順位の札の下端・
   --mp-b/--mp-l ミニマップの下端/左端(右端からの距離)・--tb-l 視点などのボタンの左端・--top-b 上の段の下端・--call1/--call2 実況の帯の1行/2行の高さ)。
   文字の大きさ・馬場の一文の長さ・ミニマップの大きさ(画面の幅で変わる)が違っても重ならない。
   基本(タブレット・横長): 左の列＝残り距離の列 → ゲージ → 坂路の札 → 状態の札(下の物に届く札は出さない＝app.js fitChips)。
     中央＝順位 → 実況(左の列とミニマップの間・2行まで) → 障害の札と帯。右＝ミニマップ。視点などのボタンとガイドは下の中央。
   縦長(幅 520px まで)と横長のスマホ(高さ 460px まで)は、それぞれの @media で組み替える */
.stage.touch{--colw:min(270px,50vw)}
.stage.touch .hud .rem small{line-height:1.35}
.stage.touch .hud .clock{line-height:1.35}
.stage.touch .hud .condw{line-height:1.4}
.stage.touch .lbl{line-height:1.35}
.stage.touch .lbl > span{white-space:nowrap}
.stage.touch .lbl em{min-width:0;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.stage.touch .lbl:has(> em:not(:empty)) > span{display:none}
.stage.touch .lbl:has(> em:not(:empty)) > em{margin-left:0}
.stage.touch .hud .bottom{top:calc(var(--tl-b,104px) + 6px);width:var(--colw)}
.stage.touch .hud .call{top:calc(var(--rk-b,50px) + 6px);left:calc(22px + var(--colw) + env(safe-area-inset-left));right:calc(var(--mp-l,150px) + 8px);transform:none;margin:0 auto;width:max-content;
  max-width:calc(100% - 30px - var(--colw) - env(safe-area-inset-left) - var(--mp-l,150px));white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45}
.stage.touch .hud .call:empty{display:none}
.stage.touch .gauges{padding:5px 9px}
.stage.touch .gauges .spd b{font-size:20px}
.topbtns{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right));display:flex;gap:6px;pointer-events:auto}
/* タッチ: 左右の手の間(下の中央)に置く＝親指のボタンと重ねない */
.stage.touch .topbtns{right:auto;left:50%;transform:translateX(-50%)}
.topbtns button{min-width:44px;min-height:36px;padding:2px 10px;border-radius:8px;background:rgba(11,11,10,.55);border:1px solid rgba(201,163,91,.4);color:#f0e6cc;font-size:12px;letter-spacing:.06em}
/* 俯瞰リプレイ(2026-10-15): 騎乗の操作・ゲージ・ガイド・視点などのボタンを隠し、下に再生の操作帯、自分の馬の上に「あなた」 */
.stage.replay .pad,.stage.replay .hud .bottom,.stage.replay .guide,.stage.replay .topbtns,.stage.replay .swipehint,.stage.replay .lookw,.stage.replay .vign,.stage.replay .speedfx{display:none!important}
.rbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));display:none;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;
  pointer-events:auto;padding:6px 8px;border-radius:14px;background:rgba(11,11,10,.74);border:1px solid rgba(230,204,146,.45);box-shadow:0 6px 20px rgba(0,0,0,.35);width:max-content;max-width:calc(100vw - 20px)}
.stage.replay .rbar{display:flex}
.rbar .rtag{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gold-2);padding:0 6px;white-space:nowrap}
.rbar .rtag em{font-style:normal;letter-spacing:.06em;color:#f4ecd8;margin-left:8px}
.rbar .rtag em:empty{display:none}
.rbar button{min-height:36px;min-width:40px;padding:2px 12px;border-radius:999px;border:1px solid rgba(230,204,146,.55);background:rgba(255,255,255,.05);color:#f4ecd8;
  font:700 13px/1 var(--f-got);letter-spacing:.04em;cursor:pointer}
.rbar button:hover{border-color:var(--gold-2)}
.rbar button:disabled{opacity:.4;cursor:default}
.rbar .rspeed{display:inline-flex;gap:3px}
.rbar .rspeed button{min-width:42px;padding:2px 8px}
.rbar .rspeed button[aria-checked="true"],.rbar button.hot{background:var(--gold-2);color:#120f08;border-color:var(--gold-2)}
.metag{position:absolute;left:0;top:0;display:none;pointer-events:none;will-change:transform}
.metag.on{display:block}
.metag b{position:absolute;left:0;bottom:6px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.06em;color:#120f08;background:var(--gold-2);
  border-radius:999px;padding:2px 10px;box-shadow:0 2px 8px rgba(0,0,0,.45);text-shadow:none}
.metag b::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--gold-2);border-bottom:0}
.res-replay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.res-replay .muted{font-size:12.5px}
.pause{position:absolute;inset:0;background:rgba(5,6,5,.72);display:none;align-items:center;justify-content:center;z-index:5}
.pause.on{display:flex}
.pause .box{background:#11120f;border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:360px;width:calc(100% - 40px);text-align:center;box-shadow:var(--shadow)}
.pause h2{font-size:20px;letter-spacing:.14em;margin-bottom:10px;color:#f4ecd8}
.pause .actbar{justify-content:center}
/* 画質(app.js qualInit): 一時停止の画面で 自動・最高・標準・軽量 を選ぶ。下の一行＝いまの描画(自動で下げたときの段と細かさ) */
.pause .qual{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin:18px 0 0}
.pause .qual span{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--mist);margin-right:6px}
.pause .qual button{min-height:36px;min-width:52px;padding:2px 10px;border-radius:999px;border:1px solid rgba(230,204,146,.55);background:rgba(255,255,255,.05);color:#f4ecd8;
  font:700 13px/1 var(--f-got);letter-spacing:.04em;cursor:pointer}
.pause .qual button:hover{border-color:var(--gold-2)}
.pause .qual button[aria-checked="true"]{background:var(--gold-2);color:#120f08;border-color:var(--gold-2)}
.pause .qnote{font-size:11.5px;color:var(--mist);margin:8px 0 0;min-height:1.2em}
/* 道中の失格の暗転(app.js dqEnd): 0.8 秒で黒へ → 赤鉛筆の明朝で「失格」と一言 → 結果へ。消すときは一瞬(display:none) */
.blackout{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#000;color:#f4ecd8}
.blackout.on{display:flex;animation:bk-in .8s ease both}
.blackout.on > *{animation:bk-in .5s ease .7s both}
.blackout b{font-family:var(--f-min);font-weight:800;font-size:clamp(48px,10vw,104px);line-height:1.1;letter-spacing:.24em;margin-right:-.24em;color:var(--red)}
.blackout span{font-size:clamp(14px,2.2vw,18px);line-height:1.8;letter-spacing:.06em}
.blackout small{font-size:12px;letter-spacing:.2em;color:var(--gold-2)}
@keyframes bk-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .blackout.on,.blackout.on > *{animation:none} }
@media (max-width:640px){
  .hud .map{width:118px}
  .hud .tower{display:none}
  .hud .call{top:calc(58px + env(safe-area-inset-top));font-size:12.5px}
  .hud .rank b{font-size:24px}
  .gauges .spd b{font-size:22px}
}
/* 縦長のスマホ(タッチ): 親指のボタンを一回り小さく(左右の手が重ならない幅)。上から:
   上の段(残り距離の列・順位・ミニマップ。下端は測る＝--top-b) → 実況(全幅・2行ぶんの場所を取っておく＝実況の出入りで下が動かない)
   → 左にゲージ・坂路の札・状態の札／右に視点などのボタン(2×2) → …… → 障害の帯 → ガイド → 親指のボタン */
@media (max-width:520px){
  .pad{gap:8px}
  .pad .col2{gap:8px}
  .pad button{width:56px;height:56px;font-size:13px}
  .pad .pace button{width:52px;height:40px;font-size:12.5px}
  .pad.r .row > button{width:76px;height:76px;font-size:18px}
  .stage.touch .guide{bottom:calc(152px + env(safe-area-inset-bottom));max-width:calc(100vw - 28px);font-size:13px}
  .stage.touch.jumps .guide{bottom:calc(174px + env(safe-area-inset-bottom))}   /* 障害の開催: 左手の大きいボタン(ムチ・◀▶ の上)より上 */
  /* 実況は上の段のすぐ下に全幅・2行まで。ゲージと札、視点などのボタンはその下
     (2026-10-14 オーナー「実況は上のままで良かった。手前ボタンとかぶる」＝親指のボタンの上に置くと、右手の手前・段のボタンと重なった。
     2026-10-16「上部の文言が重なる」＝上の段を固定の高さと見て置いていたので、馬場の一文の行に実況の帯が、坂路の札が実況の帯とゲージに重なった) */
  .stage.touch{--colw:min(270px,47vw)}
  .stage.touch .hud .tl{max-width:calc(100% - var(--mp-l,140px) - 22px - env(safe-area-inset-left))}   /* 馬場の一文が長くてもミニマップの下へ伸ばさない(折り返す) */
  .stage.touch .hud .call{top:calc(var(--top-b,98px) + 6px);left:50%;right:auto;transform:translateX(-50%);margin:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    width:max-content;max-width:calc(100vw - 28px);line-height:1.55}
  .stage.touch .hud .call:empty{display:none}
  .stage.touch .hud .bottom,.stage.touch .topbtns{top:calc(var(--top-b,98px) + var(--call2,47px) + 12px)}
  .stage.touch .topbtns{left:auto;right:calc(12px + env(safe-area-inset-right));bottom:auto;transform:none;display:grid;grid-template-columns:repeat(2,auto);gap:4px}
  .stage.touch .topbtns button{min-height:30px;padding:2px 9px;font-size:11px}
  /* 坂路の札・状態の札はゲージの下＝視点などのボタン(2×2・ゲージより低い)より下なので、列より広くてよい */
  .stage.touch #h-bank2.on{width:max-content;max-width:calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))}   /* id で指定(下の坂路の札の基本の規則より強く) */
  .stage.touch .hud .status{width:calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  .lookw{top:50%}
  .center{top:44%}
  .stage.touch .swipehint{top:auto;bottom:calc(260px + env(safe-area-inset-bottom))}   /* ガイド(4行ぶん)の上 */
  .stage.touch.jumps .swipehint{bottom:calc(282px + env(safe-area-inset-bottom))}
}
@media (max-width:520px) and (max-height:600px){ .stage.touch .swipehint{bottom:calc(238px + env(safe-area-inset-bottom))} }
/* 幅 360px まで(小さい Android・iPhone SE 初代など): ミニマップと順位の札を一回り小さく(上の段で順位とミニマップが重なった) */
@media (max-width:360px){
  .hud .map{width:104px}
  .hud .rank{padding:2px 10px 4px}
  .hud .rank b{font-size:22px}
}
@media (max-width:340px){
  .hud .rank em{display:none}
  .stage.touch{--colw:44vw}
  .stage.touch .topbtns button{padding:2px 6px;font-size:10.5px}
}
/* 横長のスマホ(タッチ・高さ 460px まで): 左の列(残り距離 → ゲージ → 坂路の札 → 状態の札)は左手のボタンの上まで。
   中央＝順位 → 実況(左の列とミニマップの間・2行まで) → 障害の札と帯／見回しの案内(--slot＝実況の2行ぶんの下) → …… → ガイド(左右の手の間・左の列にも掛けない)。
   右＝ミニマップ → 視点などのボタン(2×2。下の中央に並べると障害の開催で「飛ぶ」と重なった) → 右手のボタン。
   障害の帯の幅は左の列と右の物(ミニマップ・ボタン)を避ける */
@media (max-height:460px){
  .stage.touch{--colw:min(200px,32vw);--slot:calc(var(--rk-b,50px) + var(--call2,49px) + 12px)}
  .stage.touch .hud .tl{max-width:var(--colw)}
  .stage.touch .topbtns{left:auto;right:calc(12px + env(safe-area-inset-right));bottom:auto;transform:none;top:max(calc(var(--mp-b,100px) + 6px), var(--slot));
    display:grid;grid-template-columns:repeat(2,auto);gap:4px}
  .stage.touch .topbtns button{min-height:30px;padding:2px 8px;font-size:11px}
  .stage.touch .guide{left:calc(max(166px, 22px + var(--colw)) + env(safe-area-inset-left));right:calc(205px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));
    transform:none;margin:0 auto;width:-webkit-fit-content;width:fit-content;max-width:none}
  .stage.touch.jumps .guide{left:calc(max(256px, 22px + var(--colw)) + env(safe-area-inset-left))}
  .stage.touch .guide{line-height:1.5}
  .stage.touch .swipehint{top:var(--slot);left:calc(22px + var(--colw) + env(safe-area-inset-left));right:calc(max(var(--mp-l,150px), var(--tb-l,150px)) + 8px);transform:none;margin:0 auto;
    max-width:calc(100% - 30px - var(--colw) - env(safe-area-inset-left) - max(var(--mp-l,150px), var(--tb-l,150px)))}
}
@media (max-height:380px){ .stage.touch .hud .map{width:min(19vw,112px)} }
/* 横長で背の低い画面(高さ 340px まで＝iPhone SE の Safari の横・小さい Android の Chrome の横): 親指のボタンを縦長と同じ大きさに、
   坂路の札は絵を畳んで2行に(左の列が「飛ぶ」に届かない)。ガイドの左右の空きはボタンの幅に合わせる */
@media (max-height:340px){
  .pad{gap:8px}
  .pad .col2{gap:8px}
  .pad button{width:56px;height:56px;font-size:13px}
  .pad .pace button{width:52px;height:40px;font-size:12.5px}
  .pad.r .row > button{width:76px;height:76px;font-size:18px}
  .stage.touch{--slot:calc(var(--rk-b,50px) + var(--call1,29px) + 12px)}
  .stage.touch .hud .call{-webkit-line-clamp:1}   /* 実況は1行(2行ぶんの高さがない) */
  .stage.touch .topbtns button{min-height:28px}
  .stage.touch .hud .rem small{display:none}
  .stage.touch .hud .bottom .bankw .jicon{display:none}
  .stage.touch .guide{left:calc(max(140px, 22px + var(--colw)) + env(safe-area-inset-left));right:calc(179px + env(safe-area-inset-right))}
  .stage.touch.jumps .guide{left:calc(max(216px, 22px + var(--colw)) + env(safe-area-inset-left))}
}
/* とても背の低い横長(高さ 320px まで＝幅 360px の Android を Chrome で横にすると約 280px): 残り距離の列は数字と時計だけ(馬場の一文は畳む)、
   ミニマップを小さく、視点などのボタンはそのすぐ下(実況の帯がボタンを避ける)。障害の帯は順位のすぐ下で、帯が出ている間は実況の帯を畳む(合図が先) */
@media (max-height:320px){
  .stage.touch .hud .condw{display:none}
  .stage.touch .hud .map{width:min(19vw,90px)}
  .stage.touch .hud .call{right:calc(max(var(--mp-l,150px), var(--tb-l,150px)) + 8px);   /* ボタンがミニマップのすぐ下＝実況の帯と同じ高さ */
    max-width:calc(100% - 30px - var(--colw) - env(safe-area-inset-left) - max(var(--mp-l,150px), var(--tb-l,150px)))}
  .stage.touch .topbtns{top:calc(var(--mp-b,80px) + 6px)}
  .stage.touch .hud:has(> .jgauge.near) > .call,.stage.touch .hud:has(> .jgauge.on) > .call{visibility:hidden}
}

/* ---------- 障害(障害の開催だけ・2026-10-16 障害の練習コース) ----------
   障害の札(左上・JRA 公式のジョッキーカメラの札にならう「◯号障害 いけ垣 高さ1.4m 幅2.4m」＋小さな絵)・合図の帯(下の中央)・「飛ぶ」ボタン(左手)。
   帯の色: 金＝◎・淡い金＝○・橙＝△(遠い/近い)・赤＝×(早すぎ)。色だけに頼らず、判定は記号(◎○△×)と文で出す */
.hud .jumpw{display:none;align-items:center;gap:8px;margin-top:6px;padding:4px 10px 4px 6px;border-radius:8px;background:rgba(11,11,10,.62);border:1px solid rgba(230,204,146,.45);width:max-content;max-width:62vw}
.hud .jumpw.on{display:flex}
.hud .jumpw .jicon{width:44px;height:22px;flex:none}
.hud .jumpw .jt{display:flex;flex-direction:column;line-height:1.3}
.hud .jumpw .jt b{font-family:var(--f-min);font-weight:700;font-size:13px;letter-spacing:.08em;color:#f6eedb}
.hud .jumpw .jt small{font-size:11px;letter-spacing:.1em;color:#dfe6ea}
/* 札の数値(障害の高さ・幅／坂路の高低差・下り・上り)は値ごとに折り返さない＝狭い列で「上/り5.4%」と語の途中で割らない。値の間は全角1字の余白 */
.hud small i{font-style:normal;white-space:nowrap}
.hud small i:not(:last-child){margin-right:1em}
.hud .jumpw em{font-style:normal;font-family:var(--f-num);font-size:13px;color:var(--gold-2);margin-left:4px;min-width:4.6em;text-align:right}
/* 坂路の札(障害コースだけ): 障害の札と同じ形。PC は左上の列(障害の札の下)・タッチは左の列のゲージの下(#h-bank2・下の規則) */
.hud .bankw{display:none;align-items:center;gap:8px;margin-top:6px;padding:4px 10px 4px 6px;border-radius:8px;background:rgba(11,11,10,.62);border:1px solid rgba(160,190,140,.45);width:max-content;max-width:62vw}
.hud .bankw.on{display:flex}
.hud .bankw .jicon{width:44px;height:22px;flex:none}
.hud .bankw .jt{display:flex;flex-direction:column;line-height:1.3}
.hud .bankw .jt b{font-family:var(--f-min);font-weight:700;font-size:13px;letter-spacing:.08em;color:#f6eedb}
.hud .bankw .jt small{font-size:11px;letter-spacing:.06em;color:#dfe6ea}
.hud .bankw em{font-style:normal;font-family:var(--f-num);font-size:13px;color:#cfe3b8;margin-left:4px;min-width:4.6em;text-align:right}
.stage.touch .hud .bankw{padding:3px 8px 3px 5px;gap:6px}
.stage.touch .hud .bankw .jicon{width:36px;height:18px}
.stage.touch .hud .bankw .jt b{font-size:12px}
.stage.touch .hud .bankw .jt small{font-size:10px}
/* タッチ: 坂路の札は左の列のゲージの下(#h-bank2。左上の列に足すと、縦では実況の帯とゲージに、横ではゲージに重なった)。
   1行目に名前と「あと◯m」、2行目に数値(列の幅に収める＝横長の列は 200px) */
.stage.touch .hud .tl .bankw,.stage:not(.touch) .hud .bottom .bankw{display:none!important}
.stage.touch .hud .bottom .bankw.on{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic nm d" "ic sm sm";align-items:center;column-gap:6px;margin:0;width:auto;max-width:100%}
.stage.touch .hud .bottom .bankw .jt{display:contents}
.stage.touch .hud .bottom .bankw .jicon{grid-area:ic}
.stage.touch .hud .bottom .bankw .jt b{grid-area:nm;line-height:1.3}
.stage.touch .hud .bottom .bankw .jt small{grid-area:sm;line-height:1.3}
.stage.touch .hud .bottom .bankw em{grid-area:d;min-width:0;margin-left:4px;line-height:1.3}
.stage.replay .hud .bankw{display:none!important}
.jgauge{position:absolute;left:50%;bottom:calc(132px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(380px,70vw);display:none;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.jgauge.on{display:flex}
.jg-bar{position:relative;width:100%;height:16px;border-radius:999px;background:rgba(11,11,10,.62);border:1px solid rgba(255,255,255,.28);overflow:hidden}
.jg-bar .z{position:absolute;top:0;bottom:0}
.jg-bar .z.miss{background:rgba(224,90,79,.55)}
.jg-bar .z.early,.jg-bar .z.late{background:rgba(224,137,47,.55)}
.jg-bar .z.good{background:rgba(240,200,96,.38)}
.jg-bar .z.perfect{background:#f0c860;box-shadow:0 0 10px rgba(240,200,96,.9)}
.jg-bar .me{position:absolute;top:-2px;bottom:-2px;width:5px;margin-left:-2.5px;border-radius:3px;background:#fff;box-shadow:0 0 0 1.5px #120f08,0 0 8px rgba(255,255,255,.9)}
.jg-lbl{display:flex;align-items:baseline;gap:8px;font-size:12.5px;letter-spacing:.1em;color:#f4ecd8;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.jg-lbl b{font-family:var(--f-num);font-size:20px;color:var(--gold-2);font-weight:600}
.jg-lbl small{font-family:var(--f-num);font-size:12px;color:#dfe6ea;letter-spacing:.06em}
.jgauge[data-q="perfect"] .jg-lbl b{color:#f0c860;font-size:28px}
.jgauge[data-q="miss"] .jg-lbl b{color:#ff8a7e;font-size:26px}
.jgauge[data-q="early"] .jg-lbl b,.jgauge[data-q="late"] .jg-lbl b,.jgauge[data-q="auto"] .jg-lbl b{color:#ffc07a;font-size:26px}
.jgauge[data-q="good"] .jg-lbl b{font-size:26px}
.stage.touch .jgauge{bottom:calc(178px + env(safe-area-inset-bottom))}   /* タブレットなど: ガイド(下 62px・見出し＋3行)の上 */
.stage.touch .jg-lbl{line-height:1.2}   /* タッチは帯の高さを抑える(背の低い画面でも坂路の札・ガイドに届かない) */
.stage.touch .jgauge[data-q] .jg-lbl b{font-size:24px}
/* タッチ: 障害の札は下の帯の上に(左上はゲージと札が並ぶ)。帯は理想の1秒前から */
.jg-head{display:none;align-items:center;gap:8px;padding:3px 10px 3px 6px;border-radius:8px;background:rgba(11,11,10,.62);border:1px solid rgba(230,204,146,.45)}
.jg-head .jicon{width:40px;height:20px;flex:none}
.jg-head .jt{display:flex;flex-direction:column;line-height:1.25}
.jg-head .jt b{font-family:var(--f-min);font-weight:700;font-size:12.5px;letter-spacing:.06em;color:#f6eedb}
.jg-head .jt small{font-size:10.5px;letter-spacing:.08em;color:#dfe6ea}
.jg-head em{font-style:normal;font-family:var(--f-num);font-size:12.5px;color:var(--gold-2);margin-left:2px}
.stage.touch .hud .jumpw{display:none!important}
.stage.touch .jgauge.near{display:flex}
.stage.touch .jg-head:not(:empty){display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic nm d" "ic sm sm";align-items:center;column-gap:6px}
.stage.touch .jg-head .jt{display:contents}
.stage.touch .jg-head .jicon{grid-area:ic}
.stage.touch .jg-head .jt b{grid-area:nm;line-height:1.3}
.stage.touch .jg-head .jt small{grid-area:sm;line-height:1.3}
.stage.touch .jg-head em{grid-area:d;margin-left:4px;line-height:1.3;white-space:nowrap}
.stage.touch .jgauge:not(.on) .jg-bar,.stage.touch .jgauge:not(.on) .jg-lbl{display:none}
.stage.replay .jgauge{display:none!important}
/* ---------- PC(キーボード)の画面割り(2026-10-17 オーナー「PCで操作すると全然操作方法わかりません／左右を見るのとかどのボタンか
   分からない／画面デカいんだからPCレイアウトはキー操作とか画面に堂々書くべき／スタミナとか追う とかの表示ももっとデカくしたら？」) ----------
   右下(視点などのボタンの上)に操作キーの表＝押したキーが光る(app.js keyLit)。左下のゲージ(速さ・スタミナ・気合・脚の使い方)は
   画面の高さに合わせて大きく(1280×720 で以前の約1.4倍・1920×1080 で約2倍)。ガイドと障害の帯は2つの列の間(--lane-w＝app.js hudFit)。
   窓が狭くて間に入らないときはガイドを上の段の下へ(.lanenarrow・--gd-top)。タッチ(スマホ・タブレット)はこの節の外＝変えない */
.keys{display:none}
.stage:not(.touch) .keys{display:block;position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(24px + clamp(36px,4.6vh,48px) + env(safe-area-inset-bottom));
  padding:.75em 1em .8em;border-radius:14px;background:rgba(11,11,10,.66);border:1px solid rgba(201,163,91,.4);box-shadow:0 8px 24px rgba(0,0,0,.3);
  font-size:clamp(12.5px,1.9vh,20px);line-height:1.3;color:#f4ecd8;text-shadow:none}
.stage.nokeys .keys,.stage.replay .keys{display:none!important}
.stage.chaseview .keys .klook{display:none}   /* 後方の視点は見回さない＝「見回す」の段を出さない(2026-10-19 オーナー) */
.stage.touch #b-keys{display:none}   /* 「操作キー」の出し入れのボタンも PC だけ */
.keys .kt{font-family:var(--f-min);font-weight:700;font-size:1.05em;letter-spacing:.16em;color:var(--gold-2);margin-bottom:.45em}
.keys .kg{display:grid;grid-template-columns:auto auto;gap:.42em 1.2em}
.keys .kp{display:flex;align-items:center;gap:.5em;white-space:nowrap}
.keys .ks{margin:.7em 0 .38em;padding-top:.55em;border-top:1px solid rgba(230,204,146,.22);font-size:.84em;letter-spacing:.12em;color:var(--gold-2)}
.keys .kn{display:flex;align-items:center;flex-wrap:wrap;gap:.35em;margin-top:.5em;font-size:.84em;color:#d9d2bf}
.keys .kn .alt{margin-left:auto;padding-left:.8em;color:#a9a493}
.hud kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.9em;padding:0 .42em;border-radius:.36em;
  background:linear-gradient(180deg,#f6efdd,#d8cdb0);color:#1a160e;font:600 1em/1 var(--f-num),sans-serif;letter-spacing:.02em;
  box-shadow:0 .14em 0 #8f8466,0 0 0 1px rgba(0,0,0,.35);transition:background .08s,transform .08s,box-shadow .08s}
.keys kbd.wide{min-width:3.7em}
.hud kbd.ar{font-family:var(--f-got);font-weight:700;font-size:1.08em}   /* 矢印は Oswald に無い＝細い代わりの字になる */
/* 視点などのボタン(PC): 画面の高さに合わせて少し大きく */
.stage:not(.touch) .topbtns button{min-height:clamp(36px,4.6vh,48px);padding:2px clamp(10px,1.3vh,16px);font-size:clamp(12px,1.6vh,16px)}
.keys .kn kbd{min-width:1.7em;height:1.7em;font-size:.94em}
.hud kbd.on{background:linear-gradient(180deg,#ffe28c,#f0c860);transform:translateY(.12em);box-shadow:0 .02em 0 #8f7230,0 0 0 2px rgba(240,200,96,.85),0 0 16px rgba(240,200,96,.75)}
@media (prefers-reduced-motion:reduce){ .hud kbd{transition:none} .hud kbd.on{transform:none} }
/* 背の低い窓(ノートPCのブラウザなど): 表の下の2行(マウス・WASD)を畳む＝右上の順位の帯に届かない */
@media (max-height:640px){ .keys .kn{display:none} }
/* 左下のゲージ(PC)。大きさは画面の高さで決める(vh)。スタミナを太く・脚の使い方を1本の切り替えに(両端に ↓・↑ のキー＝押すと1段ずつ) */
.stage:not(.touch) .hud .bottom{width:clamp(320px,max(27vw,44vh),540px);gap:8px}
.stage:not(.touch) .hud .status span{font-size:clamp(12px,1.75vh,18px);padding:.08em .8em}
.stage:not(.touch) .gauges{gap:clamp(4px,.75vh,9px) clamp(10px,1.5vh,18px);padding:clamp(8px,1.35vh,15px) clamp(12px,1.8vh,20px);border-radius:14px}
.stage:not(.touch) .gauges .spd{grid-row:span 2;padding-right:clamp(8px,1.3vh,16px)}   /* 脚の使い方の段を速さの下まで全幅に(PC) */
.stage:not(.touch) .gauges .spd b{font-size:clamp(32px,5vh,56px)}
.stage:not(.touch) .gauges .spd small{font-size:clamp(10.5px,1.5vh,15px)}
.stage:not(.touch) .lbl{font-size:clamp(13px,2vh,21px);letter-spacing:.1em;color:#efe8d6}
.stage:not(.touch) .lbl em{font-weight:700;letter-spacing:.04em;min-width:0;margin-left:.6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage:not(.touch) .lbl > span{flex:none}
.stage:not(.touch) #h-st{height:clamp(14px,2.3vh,26px)}
.stage:not(.touch) #h-sp{height:clamp(8px,1.3vh,14px)}
.stage:not(.touch) .bar .need{width:3px;top:-5px;bottom:-5px}
.stage:not(.touch) .pips{gap:clamp(3px,.5vh,6px)}
.stage:not(.touch) .pips i{width:clamp(7px,1.1vh,12px);height:clamp(7px,1.1vh,12px)}
.pacew .pk{display:none}
.stage:not(.touch) .pacew{grid-column:1/-1;gap:0;align-items:center;margin-top:clamp(2px,.6vh,7px);font-size:clamp(14px,2.3vh,24px)}
.stage:not(.touch) .pacew .pk{display:inline-flex;flex:none;min-width:1.55em;height:1.55em;font-size:.82em}
.stage:not(.touch) .pacew .pk:first-child{margin-right:.45em}
.stage:not(.touch) .pacew .pk:last-child{margin-left:.45em}
.stage:not(.touch) .pacew span[data-p]{flex:1;text-align:center;padding:.22em .4em;border-radius:0;border:1px solid rgba(230,204,146,.45);border-left-width:0;color:#e9e1cc;letter-spacing:.08em;white-space:nowrap}
.stage:not(.touch) .pacew span[data-p="-1"]{border-left-width:1px;border-radius:.55em 0 0 .55em}
.stage:not(.touch) .pacew span[data-p="1"]{border-radius:0 .55em .55em 0}
.stage:not(.touch) .pacew span[data-p].on{background:rgba(201,163,91,.92);color:#120f08;font-weight:700}
/* 障害・坂路の札(左上・PC): 飛ぶ間合いの手がかりなので、ゲージと同じく画面の高さに合わせて大きく */
.stage:not(.touch) .hud .jumpw,.stage:not(.touch) .hud .bankw{font-size:clamp(13px,1.85vh,20px);gap:.6em;padding:.3em .8em .3em .45em}
.stage:not(.touch) .hud .jumpw .jicon,.stage:not(.touch) .hud .bankw .jicon{width:3.4em;height:1.7em}
.stage:not(.touch) .hud .jumpw .jt b,.stage:not(.touch) .hud .bankw .jt b,.stage:not(.touch) .hud .jumpw em,.stage:not(.touch) .hud .bankw em{font-size:1em}
.stage:not(.touch) .hud .jumpw .jt small,.stage:not(.touch) .hud .bankw .jt small{font-size:.84em}
/* 見回しの札・ガイド・障害の帯(PC) */
.stage:not(.touch) .lookw{font-size:clamp(14px,2.3vh,24px);padding:.15em 1em}
.stage:not(.touch) .guide{bottom:calc(clamp(210px,28vh,330px) + env(safe-area-inset-bottom));max-width:min(clamp(560px,42vw,780px),var(--lane-w,560px));font-size:clamp(13.5px,1.95vh,20px)}
.stage:not(.touch) .guide b{font-size:.85em}
.stage:not(.touch) .jgauge{bottom:calc(clamp(132px,17vh,200px) + env(safe-area-inset-bottom));width:min(clamp(380px,28vw,540px),var(--lane-w,380px))}
.stage:not(.touch) .jg-bar{height:clamp(16px,2.1vh,24px)}
.stage:not(.touch) .jg-lbl{font-size:clamp(12.5px,1.8vh,18px)}
.stage:not(.touch).lanenarrow .jgauge{width:max(200px,var(--lane-w,380px))}
.stage:not(.touch).lanenarrow .guide{bottom:auto;top:var(--gd-top,250px);max-width:min(560px,calc(100% - 28px))}
/* 「飛ぶ」ボタン(タッチ)。障害の開催だけ出す。置き場は右手(段の上＝下の節)・ムチは左手の ◀▶ の上(横長は右隣)
   (2026-10-17 オーナー「中山大障害はムチとジャンプボタンの位置を入れ替えて」。それまでは「飛ぶ」が左手〔障害の手前では進路を
   ほとんど触らない〕・ムチが右手)。大きさは場所のもの＝左手の大きいボタン 100px(縦長 84・横長 80・背の低い横長 68)・右手 92px(縦長と
   背の低い横長 76)＝入れ替えても画面割りは同じ */
/* 「飛ぶ」の見た目＝ムチと見分ける(2026-10-17 オーナー「飛ぶボタンのデザインか色か、とにかくムチと判別つくようなデザインに変えて」):
   ムチは金の丸と間合いの輪。「飛ぶ」は空の青(枠4の --w4)の角丸の四角・白い縁・障害を越える弧の印＝色・形・印の3つで見分ける
   (色の見え方によらない。緑は足元の芝に溶けるので青)。押している間は濃い青に白い光 */
.pad .jumpb{display:none;border-radius:22px;border:2px solid var(--w1);background:rgba(40,87,159,.86);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.stage.jumps .pad .jumpb{display:flex}
.pad .jumpb .jico{display:block;width:2.1em;height:auto;margin-bottom:2px}
.pad .jumpb.on{background:var(--w4);color:#fff;box-shadow:0 0 0 3px rgba(242,240,232,.6),0 0 14px 2px rgba(242,240,232,.45)}
/* 右手の「飛ぶ」は段(控える・馬なり・追う)の上(2026-10-17 オーナー「控える 馬なり 追う ボタンと上下入れ替えできない？／飛ぶボタンは
   もう少し大きく（サイズアップか、縦に長くかは任せる）」): 横長の角丸の四角で一回り大きく＝縦は下のガイド(縦長は下 174px)と帯に
   届かない高さまでなので、幅で広げる(縦長 76×76→112×96・横長 92×92→120×92・背の低い横長 76×76→100×76・タブレット 92→128×104)。
   段との間は 12px(「飛ぶ」の押し損ねで段が切り替わらない) */
.stage.jumps .pad.r{gap:12px}
.pad.r .row > .jumpb{width:128px;height:104px;font-size:22px}
@media (max-width:520px){ .pad.r .row > .jumpb{width:112px;height:96px;font-size:20px} }
@media (max-height:460px){ .pad.r .row > .jumpb{width:120px;height:92px;font-size:21px} }
@media (max-height:340px){ .pad.r .row > .jumpb{width:100px;height:76px;font-size:18px} .stage.jumps .pad.r{gap:8px} }   /* 背の低い横長: 上の視点などのボタンに届かない(段との間は 8px) */
.pad.l .jumpb,.pad.l .whip{position:absolute;left:0;bottom:calc(100% + 12px);width:100px;height:100px;font-size:22px}
/* 縦長: 帯はガイドの上(ガイドは見出し＋3行ぶん＝104px を取っておく＝案内の長さで帯が動かない)。ガイドOFF なら「飛ぶ」のすぐ上 */
@media (max-width:520px){ .pad.l .jumpb,.pad.l .whip{width:84px;height:84px;font-size:19px} .stage.touch .jgauge{bottom:calc(182px + env(safe-area-inset-bottom));width:min(330px,86vw)}
  .stage.touch.guideon .jgauge{bottom:calc(286px + env(safe-area-inset-bottom))} }
/* 背の低い縦長(高さ 600px まで＝iPhone SE 初代など): ゲージ・坂路の札とガイドの間に帯の入る高さがない。帯は「飛ぶ」のすぐ上に置き、
   帯が出ている間はガイドの札を畳む(帯と「飛ぶ」の光が案内を兼ねる) */
@media (max-width:520px) and (max-height:600px){
  .stage.touch.guideon .jgauge{bottom:calc(182px + env(safe-area-inset-bottom))}
  .stage.touch:has(.jgauge.near) .guide,.stage.touch:has(.jgauge.on) .guide{visibility:hidden}
}
/* 横向きのスマホ: 左上のゲージと札が下まで並ぶので、左手の大きいボタン(障害の開催はムチ)は ◀▶ の右に並べる(左手の親指が届く・札と重ねない。
   ムチの間合いの輪〔::before〕の基準になるよう relative)。帯は上の中央(障害が見える高さを空ける) */
@media (max-height:460px){ .pad.l .jumpb,.pad.l .whip{position:relative;left:auto;bottom:auto;order:3;width:80px;height:80px}
  .stage.touch .jgauge{bottom:auto;top:var(--slot);width:min(360px, calc(100% - 2 * max(22px + var(--colw), var(--mp-l,150px) + 8px, var(--tb-l,150px) + 8px)))}
  .stage.touch .jg-head{max-width:100%} }
@media (max-height:340px){ .pad.l .jumpb,.pad.l .whip{width:68px;height:68px;font-size:17px} }   /* 背の低い横長: 親指のボタンと同じく一回り小さく(上の @media の説明) */
@media (max-height:320px){ .stage.touch .jgauge{top:calc(var(--rk-b,50px) + 6px)} }   /* とても背の低い横長: 順位のすぐ下(実況の帯は畳む・上の @media の説明) */
/* 幅の狭い横長(幅 600px まで＝iPhone SE 初代の横): 左右の手の間が狭く、ガイドが7行になって帯に届く。帯が出ている間はガイドの札を畳む(縦の背の低い画面と同じ) */
@media (max-height:460px) and (max-width:600px){ .stage.touch:has(.jgauge.near) .guide,.stage.touch:has(.jgauge.on) .guide{visibility:hidden} }
/* 結果: 飛越ごとの判定 */
.jres{margin:0 0 16px}
.jres h3{font-size:16px;letter-spacing:.12em;color:#f4ecd8;margin:0 0 8px}
.jres h3 span{font-size:14px;color:var(--gold-2);margin-left:10px;letter-spacing:.06em}
.jres .muted{font-size:11.5px;margin-top:6px;line-height:1.7}
.jtbl td small{margin-left:6px;font-size:11px;color:#6b5c3c}
.jtbl td.jq b{font-family:var(--f-num);font-size:16px;margin-right:6px}
.jtbl td.jq.perfect b{color:#a8770c}
.jtbl td.jq.miss b{color:var(--red)}

/* ---------- 結果 ---------- */
.res-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"main stats" "main shot";grid-template-rows:auto 1fr;gap:16px;align-items:start;margin-bottom:16px}
.res-main{grid-area:main}.res-hero .stats{grid-area:stats}.res-shot{grid-area:shot}
@media (max-width:820px){ .res-hero{grid-template-columns:1fr;grid-template-areas:"main" "shot" "stats";grid-template-rows:none} }
/* 結果カード(画像・2026-10-18): PC は右の列の統計の下、スマホはボタンのすぐ下。プレビューは 16:9(画像そのもの) */
.res-shot-img{aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0f100e;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.res-shot-img img{display:block;width:100%;height:100%;object-fit:cover}
.res-shot-img .muted{font-size:12.5px}
.res-shot .actbar{margin:10px 0 0}
.res-shot [hidden]{display:none!important}
.res-shot-note{font-size:11.5px;margin-top:6px;line-height:1.6}
.res-card{background:linear-gradient(180deg,#141310,#0b0b0a);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.res-card .pos{font-family:var(--f-num);font-size:84px;line-height:.9;color:var(--gold-2)}
.res-card .pos small{font-family:var(--f-min);font-size:22px;margin-left:4px;color:#f4ecd8}
.res-card .nm{font-family:var(--f-min);font-weight:800;font-size:24px;letter-spacing:.08em;margin:4px 0 2px}
.res-card .t{font-family:var(--f-num);font-size:15px;color:#e9e1cc;letter-spacing:.06em}
/* 振り返り(敗因・勝因と次の一手)と印(初制覇・自己ベスト更新)。2026-10-18 初見レビュー */
.res-badge{display:inline-block;margin:0 0 8px;padding:2px 12px;border-radius:999px;background:var(--gold);color:#120f08;font-family:var(--f-min);font-weight:800;font-size:13px;letter-spacing:.08em}
/* 称号(2026-10-23・判定は engine の titles・意匠は app.js の TITLES と drawRosette): 着順の右にロゼット(結果カードと同じ画)、
   時計の下に札と条件。格で地が変わる＝t1 朱(紙に押した朱)／t2 金箔(光が走る)／t3 黒漆に虹箔(縁の虹が回る・字も虹)。
   札の枠(.res-card.lg2/lg3)も格で金・虹に。動きは prefers-reduced-motion で止める */
.res-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ttl-ros{flex:none;width:128px;height:auto;margin:-16px -10px -14px 0;transform-origin:50% 40%;animation:ttl-pin .7s cubic-bezier(.2,1.5,.45,1) .15s both}
.ttl-ros.t3{animation:ttl-pin .8s cubic-bezier(.2,1.5,.45,1) .15s both,ttl-glow 2.8s ease-in-out 1s infinite}
@keyframes ttl-pin{from{opacity:0;transform:scale(1.7) rotate(-16deg)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes ttl-glow{0%,100%{filter:drop-shadow(0 0 4px rgba(243,210,126,.25))}50%{filter:drop-shadow(0 0 16px rgba(243,210,126,.7))}}
@property --ha{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ttl-holo{to{--ha:360deg}}
@keyframes ttl-in{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ttl-shine{0%{transform:translateX(-130%)}40%,100%{transform:translateX(130%)}}
@keyframes ttl-flow{to{background-position:200% 0}}
.ttls-wrap{margin:12px 0 0}
.ttls{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ttlc{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:3px 15px 3px 4px;border-radius:999px;overflow:hidden;isolation:isolate;animation:ttl-in .45s cubic-bezier(.2,1.4,.4,1) both}
.ttlc:nth-child(2){animation-delay:.08s}.ttlc:nth-child(3){animation-delay:.16s}.ttlc:nth-child(4){animation-delay:.24s}.ttlc:nth-child(n+5){animation-delay:.32s}
.ttlc i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-style:normal;font-family:var(--f-min);font-weight:800;font-size:17px;line-height:1}
.ttlc b{display:block;font-family:var(--f-min);font-weight:800;font-size:15px;letter-spacing:.06em;line-height:1.25}
.ttlc small{display:block;font-family:var(--f-num);font-size:9.5px;letter-spacing:.2em;line-height:1.3;opacity:.72}
.ttlc.t1{border:1px solid var(--red);background:rgba(200,57,47,.13);color:#f4ecd8}
.ttlc.t1 i{background:radial-gradient(circle at 35% 30%,#fffaf0,#e6d5b0);color:#b3271f;box-shadow:inset 0 0 0 2px var(--red)}
.ttlc.t2{background:linear-gradient(115deg,#8a6420,#f3dc9a 22%,#c3913a 40%,#fff4cc 52%,#a87522 70%,#e8c56c 88%,#8d6a25);color:#1a1408;box-shadow:0 2px 12px rgba(201,163,91,.25)}
.ttlc.t2 small{opacity:.8}
.ttlc.t2 i{background:radial-gradient(circle at 35% 30%,#40352a,#080705 70%);color:#f3dc9a;box-shadow:inset 0 0 0 2px #fff4cc,0 1px 3px rgba(0,0,0,.4)}
.ttlc.t2::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-130%);animation:ttl-shine 3.8s ease-in-out 1.2s infinite}
.ttlc.t3{border:1.5px solid transparent;color:#f3dc9a;box-shadow:0 0 20px rgba(243,210,126,.28);
  background:linear-gradient(#0e0b07,#0e0b07) padding-box,conic-gradient(from var(--ha),#f3d27e,#f6a3c0,#b8a4f3,#86cdf0,#98edc4,#efe98c,#f3d27e) border-box;
  animation:ttl-in .45s cubic-bezier(.2,1.4,.4,1) both,ttl-holo 5s linear infinite}
.ttlc.t3 b{background:linear-gradient(90deg,#f3dc9a,#fff4cc,#f6a3c0,#b8a4f3,#86cdf0,#98edc4,#f3dc9a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ttl-flow 4s linear infinite}
.ttlc.t3 i{background:radial-gradient(circle,#17130d 56%,transparent 59%),conic-gradient(from var(--ha),#f3d27e,#f6a3c0,#b8a4f3,#86cdf0,#98edc4,#efe98c,#f3d27e);color:#f3dc9a;animation:ttl-holo 5s linear infinite}
.ttls-why{list-style:none;margin:9px 0 0;font-size:11.5px;line-height:1.7;color:var(--mist)}
.ttls-why b{color:#e9e1cc;font-weight:700;margin-right:7px}
.ttls-why .tn{margin-left:7px;color:var(--gold-2);opacity:.85}
.res-card.lg2{border-color:var(--gold-2);box-shadow:var(--shadow),0 0 0 1px rgba(230,204,146,.3),0 0 30px rgba(201,163,91,.18)}
.res-card.lg3{border-color:transparent;box-shadow:var(--shadow),0 0 36px rgba(243,210,126,.22)}
.res-card.lg3::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ha),#f3d27e,#f6a3c0,#b8a4f3,#86cdf0,#98edc4,#efe98c,#f3d27e);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ttl-holo 6s linear infinite}
@media (max-width:420px){ .ttl-ros{width:108px;margin:-12px -8px -12px 0} }
@media (prefers-reduced-motion:reduce){ .ttl-ros,.ttl-ros.t3,.ttlc,.ttlc.t3,.ttlc.t3 b,.ttlc.t3 i,.res-card.lg3::before{animation:none} .ttlc.t2::after{animation:none;display:none} }
.diag{margin-top:10px;border-top:1px solid var(--line);padding-top:9px;font-size:13.5px;line-height:1.7;color:#e9e1cc}
.diag p+p{margin-top:5px}
.diag .dg-gap{font-family:var(--f-min);color:var(--gold-2);font-size:14.5px;letter-spacing:.04em}
.diag .dg-k{display:inline-block;margin-right:7px;padding:0 7px;border:1px solid var(--gold);border-radius:4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--gold-2);line-height:1.6}
.diag .dg-k.nx{background:var(--gold);color:#120f08}
.res-acts{margin:12px 0 0}
.res-acts2,.res-sns{margin:8px 0 0}
.res-main .res-replay{margin:12px 0 0}
.stats .vs{display:block;font-size:11px;color:var(--mist);letter-spacing:.02em}
.res-card.win{border-color:var(--gold);background:radial-gradient(600px 300px at 80% 0%,rgba(201,163,91,.25),transparent 60%),linear-gradient(180deg,#17140d,#0b0b0a)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;align-content:start}   /* 左の列(札＋ボタン)の高さに欄を引き伸ばさない */
.stats>div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.02)}
.stats small{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--mist)}
.stats b{font-family:var(--f-num);font-weight:500;font-size:20px;color:#f1e9d4}
.inq{margin:0 0 12px;border:1px solid #c8392f;border-radius:10px;padding:8px 12px;color:#ffd6d0;background:rgba(200,57,47,.12);font-size:13px}
.tbl{width:100%;border-collapse:collapse;background:var(--paper);color:var(--paper-ink);font-size:13px;box-shadow:var(--shadow)}
.tbl th{font-size:11px;letter-spacing:.12em;font-weight:500;color:#6b5c3c;text-align:left;padding:7px 8px;border-bottom:2px solid var(--paper-ink);white-space:nowrap}
.tbl td{padding:6px 8px;border-bottom:1px solid rgba(36,29,17,.18);white-space:nowrap}
.tbl td.n{font-family:var(--f-num);text-align:right}
.tbl tr.me td{background:rgba(200,57,47,.12)}
.tbl tr.me td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tbl .p1 td.pos{color:#a8770c;font-weight:700}
.tbl a{color:var(--paper-ink);text-decoration:underline;text-decoration-color:rgba(36,29,17,.3);font-family:var(--f-min);font-weight:700}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion:reduce){ .btn,.rc,.center,.hud .call{transition:none} }

/* ---------- レースの色（舞台の色）: body[data-race] ---------- */
/* 夢の有馬記念＝グランプリの赤と金（ドリームレースの夢の有馬記念の舞台と同じ色・冬の黄昏） */
body[data-race="arima-kinen"]{--race-1:#b3122e;--race-2:#e6cc92;
  background:radial-gradient(1200px 700px at 80% -10%,rgba(179,18,46,.16),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(39,81,58,.22),transparent 55%),#0b0d0c}
body[data-race="arima-kinen"] .ttl .mark{border-color:rgba(224,72,90,.45);color:#e8a3ab}
body[data-race="arima-kinen"] .hero{background:linear-gradient(180deg,#1a0d10,#0b0b0a)}
body[data-race="arima-kinen"] .res-card.win{background:radial-gradient(600px 300px at 80% 0%,rgba(179,18,46,.28),transparent 60%),linear-gradient(180deg,#1a0d10,#0b0b0a)}
/* 夢の桜花賞＝桜色と金（満開の桜の阪神・2026-10-25） */
body[data-race="oka-sho"]{--race-1:#b8325c;--race-2:#f2c4d3;
  background:radial-gradient(1200px 700px at 80% -10%,rgba(232,120,160,.16),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(80,120,60,.2),transparent 55%),#0b0d0c}
body[data-race="oka-sho"] .ttl .mark{border-color:rgba(242,167,192,.5);color:#f4bfd0}
body[data-race="oka-sho"] .hero{background:linear-gradient(180deg,#1c0f14,#0b0b0a)}
body[data-race="oka-sho"] .res-card.win{background:radial-gradient(600px 300px at 80% 0%,rgba(232,120,160,.26),transparent 60%),linear-gradient(180deg,#1c0f14,#0b0b0a)}

/* ---------- レースを選ぶ（/play/jockey-cam/） ---------- */
/* カード＝騎手目線の絵のタイル(2026-10-17 オーナー「文字だからけなのは何か理由があるの？」)。絵はゲームの実際の画面(自前の3D描画・
   文字と HUD なし)＝img/jockey-cam-<レース id>-{640,960,1200}.webp。タイルに載せる文字は場・距離・頭数・1走の長さ(2026-10-18 初見レビュー＝大障害は約4分半と知らずに選ぶ)の1行とレース名と「乗る ▶」
   だけで、各レースの説明・遊び方はファーストビューの下(「3つのレース」・「ジョッキーカメラで、名馬に乗る」)。
   上の帯はレースの色(夢のJC＝黒と金・夢の有馬記念＝グランプリの赤・夢の中山大障害＝障害の緑)。「このレースに」は読み上げにだけ残す */
.races{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:10px 0 24px}   /* 2026-10-25 夢の桜花賞で4列 */
.rcard{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:10px;aspect-ratio:16/10;padding:14px 16px;
  border:1px solid var(--line);border-radius:16px;background:#0f100e;color:#e9e4d6;overflow:hidden;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.rcard .rk .rt{white-space:nowrap}   /* 1走の長さは割らない(320px では行を改めて丸ごと次の行へ) */
.rcard .rimg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% var(--rimg-y,58%);transition:transform .5s ease}
.rcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,7,6,0) 46%,rgba(8,7,6,.5) 76%,rgba(8,7,6,.82) 100%),
  linear-gradient(90deg,rgba(8,7,6,.38),rgba(8,7,6,0) 58%)}
.rcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;background:linear-gradient(90deg,var(--rc-1),var(--rc-2) 60%,var(--gold-2))}
.rcard:hover{border-color:var(--gold);text-decoration:none;transform:translateY(-2px)}
.rcard:hover .rimg{transform:scale(1.04)}
.rcard[data-race="japan-cup"],.rcourse[data-race="japan-cup"]{--rc-1:#2b2722;--rc-2:#d8b65a}
.rcard[data-race="arima-kinen"],.rcourse[data-race="arima-kinen"]{--rc-1:#b3122e;--rc-2:#e0485a}
.rcard[data-race="nakayama-daishogai"],.rcourse[data-race="nakayama-daishogai"]{--rc-1:#2f5a2c;--rc-2:#8fb36a;--rimg-y:50%}
.rcard[data-race="oka-sho"],.rcourse[data-race="oka-sho"]{--rc-1:#b8325c;--rc-2:#f2a7c0;--rimg-y:46%}
.rcard .rtx{flex:1 1 auto;min-width:0}
.rcard .rk{display:block;font-size:12px;letter-spacing:.08em;line-height:1.5;color:var(--gold-2);text-shadow:0 1px 6px rgba(0,0,0,.8)}
/* レース名は「夢の｜ジャパンカップ」の切れ目でだけ折り返す(<wbr>＋keep-all)＝狭いタイルでも「乗る ▶」と並べたまま2行に */
.rcard h2{font-size:clamp(16px,1.5vw,21px);letter-spacing:.06em;color:#fff6e6;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.75);word-break:keep-all;overflow-wrap:anywhere}
.rcard .cta{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:5px 16px;border-radius:999px;background:var(--gold);color:#120f08;
  font-weight:700;font-size:14px;letter-spacing:.06em;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.rcard .cta i{font-style:normal;font-size:.8em}
.rcard .cta-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rcard:hover .cta{background:var(--gold-2)}
@media (prefers-reduced-motion:reduce){ .rcard,.rcard .rimg{transition:none} .rcard:hover{transform:none} .rcard:hover .rimg{transform:none} }
/* PC の4列(2026-10-25 夢の桜花賞で4枚): タイルが狭く、題と「乗る ▶」を横に並べると「ジャパンカッ｜プ」「16｜頭」と語の途中で折れた＝
   場・距離の行と題は全幅に、「乗る ▶」は下の段の右へ(スマホの1列・横持ちの小さい画面は下の @media のまま横並び) */
@media (min-width:1000px), (min-width:900px) and (orientation:portrait){
  .rcard{flex-wrap:wrap;align-content:flex-end;row-gap:8px}
  .rcard .rtx{flex-basis:100%}
  .rcard .cta{margin-left:auto;min-height:34px;padding:4px 14px;font-size:13px}
}
/* 好きに走る(試走)の欄: 4枚のタイルの下に全幅の帯 */
.freebar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;color:#e9e4d6;transition:border-color .15s,background .15s}
.freebar:hover{border-color:var(--gold);background:rgba(201,163,91,.06);text-decoration:none}
.freebar .fb-k{flex:none;font-family:var(--f-num);font-size:11px;letter-spacing:.2em;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.freebar .fb-t{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.freebar .fb-t b{font-family:var(--f-min);font-size:17px;letter-spacing:.08em;color:#fff6e6}
.freebar .fb-t small{font-size:12.5px;color:var(--mist)}
.freebar .fb-go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 14px;border:1px solid var(--gold);border-radius:999px;color:var(--gold-2);font-size:13px;font-weight:700}
.freebar .fb-go i{font-style:normal;font-size:.8em}
@media (prefers-reduced-motion:reduce){ .freebar{transition:none} }
/* 3つのレース(説明): 各レースの舞台。上の線はタイルと同じレースの色 */
.about .about-grid .rcourse{border-top:3px solid var(--rc-2)}
.about .rcourse h3 a{color:inherit}
.about .rcourse .cs{font-family:var(--f-min);color:var(--gold-2);letter-spacing:.04em;margin-bottom:2px}
/* 縦長の画面(スマホ・タブレットの縦持ち)はタイルを1列に。3つのレース(夢の中山大障害まで)をファーストビューに収める
   (2026-10-17 オーナー「ドリームジョッキーカメラトップで中山大障害までスマホのファーストビューに収まるようにデザイン調整して」)。
   タイルの高さは画面の高さ(アドレスバーを出した状態＝svh)から割り出す＝どの機種でも4枚目(2026-10-25 夢の桜花賞まで)の下端がファーストビューに入る
   (--hub-top＝タイルより上の高さ＋下の余白。スマホは題を「DREAM JOCKEY CAM・レースを選ぶ」の1行＋見出しに詰める) */
@media (max-width:560px), (max-width:899px) and (orientation:portrait){
  body[data-screen="hub"]{--hub-top:186px}
  .races{grid-template-columns:1fr;gap:10px;margin:6px 0 20px}
  .rcard{aspect-ratio:auto;height:clamp(96px,calc((100vh - var(--hub-top) - 30px) / 4),220px);border-radius:14px}
  .rcard h2{font-size:clamp(19px,5.1vw,24px)}
}
@supports (height:100svh){ @media (max-width:560px), (max-width:899px) and (orientation:portrait){
  .rcard{height:clamp(96px,calc((100svh - var(--hub-top) - 30px) / 4),220px)} } }
@media (max-width:560px){
  body[data-screen="hub"]{--hub-top:150px}
  body[data-screen="hub"] .wrap{padding-top:10px}
  body[data-screen="hub"] .ttl{gap:2px 10px;margin:0 0 4px;align-items:center}
  body[data-screen="hub"] .ttl .mark{font-size:10px;letter-spacing:.26em;padding:2px 8px}
  body[data-screen="hub"] .ttl .sub{order:1;font-size:12.5px}
  body[data-screen="hub"] .ttl h1{order:2;flex-basis:100%;font-size:24px;letter-spacing:.08em}
  .rcard{padding:10px 12px 11px 14px}
  .rcard .rk{font-size:11px}
  .rcard .cta{min-height:36px;padding:4px 14px;font-size:13.5px}
}
@media (max-width:560px) and (max-height:600px){
  body[data-screen="hub"]{--hub-top:140px}
  body[data-screen="hub"] .wrap{padding-top:6px}
  body[data-screen="hub"] .ttl h1{font-size:22px}
}
/* 横長の小さい画面(スマホの横持ち): 4列のまま。タイルが狭いので場・距離の行は読み上げにだけ残し、「乗る ▶」は丸い ▶ に */
@media (min-width:561px) and (max-width:999px) and (orientation:landscape){
  .races{gap:12px}
  .rcard{padding:10px 12px;border-radius:14px}
  .rcard .rk,.rcard .cta > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rcard h2{font-size:clamp(15px,2vw,17px)}
  .rcard .cta{width:34px;min-height:34px;padding:0 0 0 2px;justify-content:center}
  /* 4列で狭い(2026-10-25): 丸い ▶ はタイルの右上へ＝題を全幅に(横に並べると「ジャパンカッ｜プ」と語の途中で折れた) */
  .rcard .cta{position:absolute;top:10px;right:10px}
}