/* =========================================================
   💥 末脚バズーカ（今日うま ツール）2026-11-06
   画面・演出は「末脚バズーカ完成版モック」（C:\keiba-bazooka\mock\）の CSS を写したもの：
   ポスター・発射ボタン・激しい画面振動（megaShake／bodyKick）・天井の崩落（slab）・煙（dust）・衝撃光（impact）・ホワイトアウト（white）。
   追加：実データのカード・履歴・累計・「今日うまへ戻る」（激カタと同じ形）・PC では結果だけ広げて 2列×2段。
   スマホファースト：〜759px 結果は1列×最大4段、760px〜 2列×2段・履歴は4列
   ========================================================= */
:root {
  color-scheme: dark;
  --ink: #05070b;
  --gold: #ffd26f;
  --gold-2: #d7ad4c;
  --text-sub-dark: #adb8c8;
  /* 選出馬カード（激カタと同じ紙の色・文字色。帯と強調だけ末脚バズーカの橙） */
  --paper: #fffaf1;
  --paper-line: #e8dcc6;
  --text: #1b1a17;
  --text-sub: #6f6a61;
  --bz: #f07f12;
  --bz-2: #c9500a;
  --num: "Oswald", "Noto Sans JP", sans-serif;
  --font: "Noto Sans JP", system-ui, "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--ink); color: #fff; font-family: var(--font); line-height: 1.6; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
/* ボタン・リンクの指定はツールの範囲（.bz-page）だけ（今日うまの共通UIのヘッダー・メニューに効かせない） */
:where(.bz-page) button { font: inherit; cursor: pointer; }   /* :where で優先度を上げない（.start の文字の大きさを上書きしない。モックの button と同じ強さ） */
.bz-page button:focus-visible, .bz-page a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bz-page { max-width: 980px; margin: 0 auto; padding: 4px 16px 40px; }

/* 「← 今日うまへ戻る」（激カタ・抽選と同じ形。iframe 内では出さない） */
.bz-back { padding: 4px 0; }
.bz-back a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .04em; color: #d4cfc5; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
}
.bz-back a:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
.is-embed .bz-back, .is-framed .bz-back { display: none; }
.is-embed .bz-page { padding-top: 12px; }

/* ---------- ここからモックの CSS（値はモックのまま。.shell の高さだけページに合わせた） ---------- */
.shell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0 20px; background: radial-gradient(ellipse at 50% 40%, #1b2130, #05070b 70%); border-radius: 18px; }
.stage { width: min(100%, 540px); position: relative; isolation: isolate; overflow: hidden; background: #080a10; border: 1px solid #353039; border-radius: 16px; box-shadow: 0 20px 60px #000b; transform: translateZ(0); }
.poster { width: 100%; height: auto; display: block; user-select: none; pointer-events: none; }
.poster-wrap { position: relative; }
.poster-wrap:after { content: ''; position: absolute; inset: 68% 0 0; pointer-events: none; background: linear-gradient(transparent, #0808109c 83%, #080810c7); }
.start { position: absolute; bottom: 5.5%; left: 50%; transform: translateX(-50%); width: 76%; padding: 17px 12px; color: #1b0d00; background: linear-gradient(#ffe78d, #ffb733 53%, #d76615); border: 2px solid #fff1bb; border-radius: 99px; font-size: clamp(20px, 5.5vw, 28px); font-weight: 900; letter-spacing: .12em; box-shadow: 0 5px 0 #7c3000, 0 12px 36px #ff781daa, 0 0 24px #ffb82888; text-shadow: 0 1px #fff6; z-index: 2; }
.start:active { transform: translate(-50%, 3px); box-shadow: 0 2px 0 #7c3000, 0 8px 15px #ff781d70; }
/* 発射ボタンの文字（2026-11-06 最終修正）：約1.6倍・極太ゴシック（Dela Gothic One。「発射！」だけを読む）・縁取りと段の影で立体に。ボタンの色・光沢・位置はモックのまま */
.start { display: flex; align-items: center; justify-content: center; gap: .12em; padding: 10px 12px 13px; font-size: clamp(32px, 9vw, 46px); line-height: 1; letter-spacing: .04em; }
.start-ico { font-size: .82em; filter: drop-shadow(0 2px 0 #6a1a00); }
.start-txt {
  font-family: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; font-weight: 400; color: #fff8d6; letter-spacing: .06em;
  text-shadow: -2px -2px 0 #5c1400, 2px -2px 0 #5c1400, -2px 2px 0 #5c1400, 2px 2px 0 #5c1400, 0 -2px 0 #5c1400, 0 2px 0 #5c1400, -2px 0 0 #5c1400, 2px 0 0 #5c1400,
    0 5px 0 #c2350c, 0 7px 0 #5c1400, 0 10px 14px rgba(0, 0, 0, .45);
}
.controls { width: min(100%, 540px); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #8994a5; font-size: 12px; }
.subtle-btn { padding: 7px 12px; border: 1px solid #344054; border-radius: 9px; color: #c2c9d5; background: #151b25; }
.performing .poster-wrap { animation: megaShake .075s linear infinite; will-change: transform; }
.performing .stage { animation: bodyKick .19s steps(2, end) infinite; }
.performing.shell { background: #0d1016; }
.performing .start { visibility: hidden; }
@keyframes megaShake {
  0% { transform: translate(-17px, 9px) rotate(-2.7deg) scale(1.045); }
  25% { transform: translate(15px, -12px) rotate(2.3deg) scale(1.065); }
  50% { transform: translate(-21px, -5px) rotate(1.3deg) scale(1.07); }
  75% { transform: translate(17px, 14px) rotate(-2.2deg) scale(1.065); }
  100% { transform: translate(-10px, 1px) rotate(2.6deg) scale(1.05); }
}
@keyframes bodyKick { 0%, 100% { transform: translate(-4px, 3px); } 50% { transform: translate(5px, -6px); } }
.overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.slab { position: absolute; top: -18%; background: linear-gradient(135deg, #474a50, #151720 50%, #080a10); border: 1px solid #737783; box-shadow: 4px 9px 19px #000e; clip-path: polygon(0 0, 100% 0, 90% 40%, 68% 54%, 55% 100%, 24% 61%, 0 69%); opacity: 0; transform: translate3d(0, -200px, 0) rotate(0); }
.performing .slab { opacity: 1; animation: fall var(--dur) var(--delay) cubic-bezier(.22, .65, .7, 1) both; will-change: transform; }
@keyframes fall { 0% { transform: translate3d(0, -180px, 0) rotate(-10deg); } 40% { transform: translate3d(var(--x1), 35vh, 0) rotate(50deg); } 100% { transform: translate3d(var(--x2), 115vh, 0) rotate(var(--rot)); opacity: .95; } }
.dust { position: absolute; bottom: -10%; width: 90%; height: 60%; border-radius: 50%; background: radial-gradient(ellipse, #9d9294a9 0%, #57545b88 38%, transparent 70%); filter: blur(14px); opacity: 0; }
.performing .dust { animation: smoke 1.25s .3s ease-out forwards; }
@keyframes smoke { 0% { opacity: 0; transform: translateY(90px) scale(.4); } 40% { opacity: 1; } 100% { opacity: .83; transform: translateY(-90px) scale(1.8); } }
.impact { position: absolute; inset: -12%; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 50% 44%, #fff7c2 0 4%, #ffa23cbf 10%, #ff7c1966 24%, transparent 47%); }
.performing .impact { animation: impact 1.2s .08s ease-out both; }
@keyframes impact { 0% { opacity: 0; transform: scale(.35); } 14% { opacity: 1; transform: scale(1.5); } 35% { opacity: .6; transform: scale(1.9); } 100% { opacity: 0; transform: scale(2.3); } }
.white { position: absolute; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
.whitening .white { animation: whiteOut 2.5s ease-in forwards; }
@keyframes whiteOut { 0% { opacity: 0; } 26% { opacity: .18; } 52% { opacity: .5; } 78% { opacity: .88; } 100% { opacity: 1; } }
.revealing .white { opacity: 1; animation: whiteBack 1.9s ease-out forwards; }
@keyframes whiteBack { 0% { opacity: 1; } 100% { opacity: 0; } }
.result { display: none; min-height: 560px; padding: 22px 17px; background: radial-gradient(ellipse at 50% 0, #303d55, #111722 45%, #080c13); position: relative; }
.result.active { display: block; }
.bz-h1 { font-size: clamp(22px, 6vw, 32px); text-align: center; margin: 12px 0 5px; color: #fff2cd; line-height: 1.3; }
.result .lead { text-align: center; color: #b8c6d9; font-size: 13px; margin: 0 0 23px; }
.result .cards { display: grid; gap: 11px; }
.restart { display: block; width: 100%; background: #262f3e; color: #fff; border: 1px solid #66748d; border-radius: 12px; padding: 14px; margin-top: 18px; font-weight: 700; }
.note { font-size: 11px; color: #abb2be; text-align: center; line-height: 1.7; margin: 14px 0 4px; }
.result .tag { display: block; margin: auto; width: fit-content; border: 1px solid var(--gold-2); color: #ffd773; border-radius: 99px; padding: 5px 14px; font-size: 11px; letter-spacing: .1em; }
.status { min-height: 1.5em; text-align: center; color: #b7bdc7; font-size: 12px; margin-top: 11px; }
/* ---------- モックの CSS ここまで ---------- */

/* 選出馬カード（2026-11-06 最終修正：激カタのカード〔C:\keiba-gekikata\src\css\gekikata.css の .gk-card〕と同じ骨組み・寸法。
   生成りの紙・左の帯・上段＝ラベル・場・R・発走、中段＝四角い馬番・馬名、下段＝末脚の情報（独自）、右下にリンク。帯と強調色は末脚バズーカの橙）
   登場の動き（.horse の rise・--appear）はモックのまま */
.horse {
  opacity: 0; transform: translateY(25px) scale(.96); position: relative; min-width: 0; padding: 10px 14px 10px; color: var(--text); text-align: left;
  background: var(--paper); border-radius: 10px; border-left: 6px solid var(--bz); box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.result.active .horse { animation: rise .45s ease-out forwards; animation-delay: var(--appear); }
@keyframes rise { to { opacity: 1; transform: translateY(0) scale(1); } }
/* 上段（激カタの .gk-card-head と同じ）：ラベル・場・R・発走 */
.bz-head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.bz-label { margin: 0; padding: 2px 9px 3px; font-size: 13px; font-weight: 900; letter-spacing: .06em; color: #fff; background: var(--bz-2); border-radius: 5px; align-self: center; }
.bz-venue { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.bz-venue-name { font-size: 18px; font-weight: 900; letter-spacing: .04em; }
.bz-rno { font-family: var(--num); font-size: 21px; font-weight: 700; line-height: 1; }
.bz-rno small { font-size: 13px; margin-left: 1px; }
.bz-start { margin: 0 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.bz-start b { font-family: var(--num); font-size: 18px; color: var(--text); letter-spacing: .02em; }
/* 中段（激カタの .gk-horse・.gk-umaban・.gk-name と同じ）：四角い馬番（枠色）・馬名 */
.bz-horse { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 7px 0; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.bz-umaban { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 6px; color: var(--text); background: transparent; border: 2px solid currentColor; border-radius: 7px; }
.bz-umaban[class*="waku-"] { border: 1px solid rgba(0, 0, 0, .45) !important; }
.bz-umaban b { font-family: var(--num); font-size: 28px; font-weight: 700; line-height: 1; }
.bz-umaban small { font-size: 11px; font-weight: 700; margin: 9px 0 0 1px; }
.bz-name { min-width: 0; flex: 1; font-size: clamp(19px, 5.4vw, 24px); font-weight: 900; line-height: 1.25; letter-spacing: .02em; overflow-wrap: anywhere; }
.scratch { flex: none; padding: 2px 8px; font-size: 13px; font-weight: 900; color: #fff; background: #6f6a61; border-radius: 4px; }
.horse.is-scratched .bz-name { text-decoration: line-through; text-decoration-color: rgba(27, 26, 23, .5); color: var(--text-sub); }
/* 下段（末脚バズーカ独自）：末脚スコア・ランク・末脚ゲージ・近5走の上がり順位・上がり3位以内の回数・AI指数の順位 */
.bz-power { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 7px 0 0; }
.bz-score { margin: 0; display: flex; flex-direction: column; line-height: 1.1; }
.bz-score span { font-size: 11px; font-weight: 700; color: var(--text-sub); }
.bz-score b { display: flex; align-items: center; gap: 6px; font-family: var(--num); font-size: 26px; font-weight: 700; color: var(--bz-2); letter-spacing: .02em; }
.rank-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-family: var(--num); font-size: 17px; color: #1b0d00; background: linear-gradient(#ffe78d, #ffb733); border: 1px solid rgba(92, 20, 0, .35); }
.rank-badge.r-A { background: linear-gradient(#f3f5f9, #b9c3d2); }
.rank-badge.r-B { background: linear-gradient(#e8c9a3, #b08055); }
.bz-gauge { min-width: 0; }
.bz-gauge-bar { position: relative; height: 12px; background: #eee4d2; border-radius: 6px; overflow: hidden; }
.bz-gauge-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffb733, var(--bz) 60%, #d42a1f); }
.bz-gauge-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(27, 26, 23, .35); }
.bz-gauge-scale { position: relative; height: 10px; margin: 3px 0 0; font-size: 9px; font-weight: 700; line-height: 1; color: var(--text-sub); }
.bz-gauge-scale em { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-family: var(--num); font-size: 10px; color: var(--text); }   /* 目盛り（A・S のしきい値）の真下 */
.bz-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0; font-size: 11px; font-weight: 700; color: var(--text-sub); }
.bz-recent ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bz-recent li { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; font-family: var(--num); font-size: 14px; color: var(--text); background: #eee4d2; }
.bz-recent li.is-top { color: #1b0d00; background: #ffc24a; }
.bz-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--text-sub); }
.bz-meta b { font-family: var(--num); font-size: 15px; color: var(--text); }
/* リンク（激カタの .gk-more と同じ位置・見た目） */
.bz-more { margin: 5px 0 0; text-align: right; font-size: 12px; font-weight: 700; }
.bz-more a { color: var(--bz-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.bz-more a:hover { color: var(--bz); }
@media (max-width: 399px) { .horse { padding-left: 11px; padding-right: 11px; } }
.partial-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11px; color: #c9b98f; line-height: 1.6; }
.empty-msg {text-align: center; color: #d3dae5; font-size: 14px; line-height: 1.8; padding: 30px 8px; border: 1px dashed #3a4558; border-radius: 12px; }

/* 枠色（激カタと同じ。保存した waku が 1〜8 のとき） */
.waku-1 { background: #fff !important; color: #000 !important; }
.waku-2 { background: #000 !important; color: #fff !important; border-color: #777 !important; }
.waku-3 { background: #e60012 !important; color: #fff !important; }
.waku-4 { background: #0068b7 !important; color: #fff !important; }
.waku-5 { background: #fff100 !important; color: #000 !important; }
.waku-6 { background: #009944 !important; color: #fff !important; }
.waku-7 { background: #f39800 !important; color: #000 !important; }
.waku-8 { background: #f5a6c8 !important; color: #000 !important; }

/* 説明・累計・履歴 */
.bz-about, .bz-stats, .bz-history { margin-top: 22px; }
.bz-about h2, .bz-stats h2, .bz-history h2 { font-size: 16px; margin: 0 0 8px; color: #fff2cd; }
.bz-about p { margin: 0 0 8px; font-size: 13px; color: #d3dae5; }
.bz-about .bz-sub { font-size: 12px; color: var(--text-sub-dark); }
.bz-stats-box { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 16px; padding: 14px 16px; border: 1px solid #66604a; border-radius: 12px; background: linear-gradient(110deg, #202636, #151923); }
.bz-rate { font-family: var(--num); font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
.bz-rate small { font-size: 18px; }
.bz-rate-label { font-size: 12px; color: #d3dae5; }
.bz-rate-label b { color: #fff; }
.bz-stats-sub { grid-column: 1 / -1; margin: 4px 0 0; font-size: 11px; color: var(--text-sub-dark); }
.bz-past { border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .03); overflow: hidden; margin-bottom: 8px; }
.bz-past > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-weight: 700; }
.bz-past > summary::-webkit-details-marker { display: none; }
.bz-past > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.bz-past[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.bz-past-date { font-size: 15px; }
.bz-past-count { font-size: 12px; color: var(--text-sub-dark); font-weight: 500; }
.bz-past-body { padding: 0 10px 10px; }
.bz-past-empty { margin: 0; padding: 8px 4px; font-size: 13px; color: var(--text-sub-dark); }
.bz-past-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bz-past-card a { display: flex; flex-direction: column; height: 100%; padding: 8px 9px; color: #fff; text-decoration: none; background: #171d29; border: 1px solid #333c4e; border-radius: 8px; }
.bz-past-race { font-size: 12px; font-weight: 700; color: var(--text-sub-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-past-horse { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.bz-past-num { flex: none; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; font-family: var(--num); font-size: 16px; background: #c89337; color: #18110a; border: 1px solid rgba(0, 0, 0, .45); }
.bz-past-name { min-width: 0; font-size: 14px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.bz-past-result { margin-top: auto; padding-top: 6px; border-top: 1px solid #2c3446; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; min-height: 34px; }
.bz-pos b { font-family: var(--num); font-size: 18px; }
.bz-l3 { color: #d3dae5; }
.bz-hit { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 900; color: #1b0d00; background: var(--gold); }
.bz-other { color: var(--text-sub-dark); }
.bz-foot { margin-top: 24px; }
.bz-foot p { margin: 0 0 6px; font-size: 11px; color: var(--text-sub-dark); line-height: 1.7; }

@media (min-width: 760px) {
  .bz-page { padding: 8px 24px 48px; }
  .stage.is-wide { width: min(100%, 920px); }
  .controls.is-wide { width: min(100%, 920px); }
  .stage.is-wide .result .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-past-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 動きを減らす設定：振動・崩落・煙・光の動きはなし。白は短く（JS も演出の時間を短くする） */
/* ?fx=full（html.bz-fx-full）のときは抑制しない＝モックどおりの演出 */
@media (prefers-reduced-motion: reduce) {
  html:not(.bz-fx-full) .performing .poster-wrap, html:not(.bz-fx-full) .performing .stage, html:not(.bz-fx-full) .performing .slab,
  html:not(.bz-fx-full) .performing .dust, html:not(.bz-fx-full) .performing .impact { animation: none !important; }
  html:not(.bz-fx-full) .performing .slab { opacity: 0; }
  html:not(.bz-fx-full) .whitening .white { animation-duration: .35s; }
  html:not(.bz-fx-full) .revealing .white { animation-duration: .4s; }
  html:not(.bz-fx-full) .result.active .horse { animation: none; opacity: 1; transform: none; }
}