/* 野球3練習の動く見本。既定のスタイル＝静止図（reduced-motion 用）。動きは .bb-run かつ動きを減らさない時だけ。 */
.bb-demo-dialog{width:min(400px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;margin:auto;padding:16px 16px 0;background:#102a3b;color:#edf7fb;border:1px solid #6595aa;border-radius:18px;box-shadow:0 20px 80px #000b;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;overscroll-behavior:contain}
.bb-demo-dialog::backdrop{background:#020914d0}
.bb-demo{display:grid;gap:8px;text-align:left}
.bb-demo-tag{margin:0;font-size:10px;letter-spacing:.04em;color:#abc9d9}
.bb-demo-title{margin:0;font-size:19px;line-height:1.3;color:#fff}
.bb-demo-art{background:linear-gradient(#203f50,#0f2432);border-radius:12px;overflow:hidden}
.bb-demo-art svg{display:block;width:100%;height:auto;max-height:210px}
.bb-demo-art text{font-family:inherit}
.bb-t-sm{fill:#cfe0e8;font-size:10px}.bb-t-gold{fill:#ffd669;font-size:11px;font-weight:700}.bb-t-mint{fill:#91e0c1;font-size:11px;font-weight:700}.bb-t-blue{fill:#9ad3ec;font-size:10px}.bb-t-lg{font-size:14px;font-weight:800}
.bb-demo-steps{margin:0;padding:0 0 0 1.6em;display:grid;gap:4px}
.bb-demo-steps li{padding:3px 6px;border-radius:7px;border-left:3px solid transparent}
.bb-demo-steps b{color:#ffe09a}
.bb-demo-note{margin:0;padding:8px 10px;border:1px solid #8ab6c34d;border-radius:9px;background:#ffffff08;font-size:12px;color:#cfe0e8}
.bb-demo-note b{color:#ffe09a}
.bb-demo-buttons{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 14px;margin-top:8px;background:linear-gradient(#102a3b00,#102a3b 14px)}
.bb-demo-buttons button{flex:1;min-height:48px;min-width:44px;border:1px solid #80b8c9;border-radius:10px;background:#203c4c;color:#fff;font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer;touch-action:manipulation;padding:4px 8px}
.bb-demo-buttons .bb-primary{background:#ffdb80;color:#16212b;border-color:#ffdb80;font-weight:800}
.bb-demo-buttons button:focus-visible{outline:3px solid #ffd669;outline-offset:2px}

/* ---- 静止図（既定）---- */
.g1-grid{opacity:.45}.g1-ball{transform:translate(192px,146px)}.g1-ring{transform:scale(1.15)}.g1-cursor{transform:translate(192px,146px)}
.t1-ball{transform:translate(150px,128px)}.t1-ring{transform:scale(1.15)}.t1-cursor{transform:translate(250px,120px)}
.p1-needle{transform:translateX(159.5px)}.p1-finger{transform:translate(222px,80px)}.p1-fingerin{transform:translateY(-8px)}

@media (prefers-reduced-motion:no-preference){
 .bb-run *{animation-duration:var(--bb-secs);animation-iteration-count:infinite;animation-timing-function:linear}
 .bb-run .bb-demo-steps li{animation-timing-function:step-end}
 /* G1：予想は飛ばせる → 投球 → 白い球へ移動 → 輪が重なる → 押す */
 .bb-run .g1-grid{animation-name:g1Grid}.bb-run .g1-tap1{animation-name:g1Tap1}.bb-run .g1-ball{animation-name:g1Ball}.bb-run .g1-ballin{animation-name:g1BallIn}.bb-run .g1-ring{animation-name:g1Ring}.bb-run .g1-click{animation-name:g1Click}.bb-run .g1-hit{animation-name:g1Hit}.bb-run .g1-cursor{animation-name:g1Cursor}
 [data-mode=g1].bb-run .bb-s1{animation-name:g1S1}[data-mode=g1].bb-run .bb-s2{animation-name:g1S2}[data-mode=g1].bb-run .bb-s3{animation-name:g1S3}[data-mode=g1].bb-run .bb-s4{animation-name:g1S4}
 /* T1：1回目で投球 → 球を追わない → 重なる時に2回目 → 早遅は空振り */
 .bb-run .t1-cursor{animation-name:t1Cursor}.bb-run .t1-tap1{animation-name:t1Tap1}.bb-run .t1-ball{animation-name:t1Ball}.bb-run .t1-ballin{animation-name:t1BallIn}.bb-run .t1-ring{animation-name:t1Ring}.bb-run .t1-tap2{animation-name:t1Tap2}.bb-run .t1-assist{animation-name:t1Assist}.bb-run .t1-bar{animation-name:t1Bar}
 [data-mode=t1].bb-run .bb-s1{animation-name:t1S1}[data-mode=t1].bb-run .bb-s2{animation-name:t1S2}[data-mode=t1].bb-run .bb-s3{animation-name:t1S3}[data-mode=t1].bb-run .bb-s4{animation-name:t1S4}
 /* P1：狙い → 押し続ける（実時間：押してから1.04秒で離す。満了1.8秒と同じ比率）→ 離す → ● */
 .bb-run .p1-aim{animation-name:p1Aim;animation-timing-function:step-end}.bb-run .p1-finger{animation-name:p1Finger}.bb-run .p1-fingerin{animation-name:p1FingerIn;animation-timing-function:step-end}.bb-run .p1-btnface{animation-name:p1Btn;animation-timing-function:step-end}.bb-run .p1-needle{animation-name:p1Needle}.bb-run .p1-release{animation-name:p1Release}.bb-run .p1-ball{animation-name:p1Ball}.bb-run .p1-say{animation-name:p1Say}
 [data-mode=p1].bb-run .bb-s1{animation-name:p1S1}[data-mode=p1].bb-run .bb-s2{animation-name:p1S2}[data-mode=p1].bb-run .bb-s3{animation-name:p1S3}[data-mode=p1].bb-run .bb-s4{animation-name:p1S4}
}
@keyframes g1Grid{0%,25%{opacity:1}31%,96%{opacity:.3}100%{opacity:1}}
@keyframes g1Tap1{0%,14%{opacity:0}17%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes g1Ball{0%,27%{transform:translate(160px,52px);opacity:0}28%{transform:translate(160px,52px);opacity:1}70%,72%{transform:translate(192px,146px);opacity:1}86%,100%{transform:translate(60px,24px);opacity:0}}
@keyframes g1BallIn{0%,28%{transform:scale(.35)}70%,100%{transform:scale(1)}}
@keyframes g1Ring{0%,28%{transform:scale(7);opacity:1}70%{transform:scale(1.12);stroke:#ffd669;opacity:1}72%,100%{transform:scale(1.12);opacity:0}}
@keyframes g1Click{0%,68%{opacity:0}70%,82%{opacity:1}86%,100%{opacity:0}}
@keyframes g1Hit{0%,73%{opacity:0}76%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes g1Cursor{0%{transform:translate(250px,188px)}12%,45%{transform:translate(262px,122px)}58%{transform:translate(183px,120px)}64%{transform:translate(187.5px,133px)}70%,84%{transform:translate(192px,146px)}96%,100%{transform:translate(250px,188px)}}
@keyframes g1S1{0%{opacity:1;background:#ffffff14;border-left-color:#ffd669}25%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes g1S2{0%{opacity:.5;background:none;border-left-color:transparent}25%{opacity:1;background:#ffffff14;border-left-color:#ffd669}45%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes g1S3{0%{opacity:.5;background:none;border-left-color:transparent}45%{opacity:1;background:#ffffff14;border-left-color:#ffd669}65%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes g1S4{0%{opacity:.5;background:none;border-left-color:transparent}65%,100%{opacity:1;background:#ffffff14;border-left-color:#ffd669}}

@keyframes t1Cursor{0%{transform:translate(292px,192px)}10%,100%{transform:translate(250px,120px)}}
@keyframes t1Tap1{0%,12%{opacity:0}14%,26%{opacity:1}30%,100%{opacity:0}}
@keyframes t1Ball{0%,22%{transform:translate(160px,50px);opacity:0}24%{transform:translate(160px,50px);opacity:1}68%,70%{transform:translate(150px,128px);opacity:1}84%,100%{transform:translate(40px,20px);opacity:0}}
@keyframes t1BallIn{0%,24%{transform:scale(.4)}68%,100%{transform:scale(1)}}
@keyframes t1Ring{0%,24%{transform:scale(6);opacity:1}68%{transform:scale(1.12);stroke:#ffd669;opacity:1}70%,100%{transform:scale(1.12);opacity:0}}
@keyframes t1Tap2{0%,66%{opacity:0}68%,84%{opacity:1}88%,100%{opacity:0}}
@keyframes t1Assist{0%,69%{opacity:0}72%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes t1Bar{0%,71%{opacity:.3}75%,96%{opacity:1}100%{opacity:.3}}
@keyframes t1S1{0%{opacity:1;background:#ffffff14;border-left-color:#ffd669}22%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes t1S2{0%{opacity:.5;background:none;border-left-color:transparent}22%{opacity:1;background:#ffffff14;border-left-color:#ffd669}66%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes t1S3{0%{opacity:.5;background:none;border-left-color:transparent}66%{opacity:1;background:#ffffff14;border-left-color:#ffd669}76%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes t1S4{0%{opacity:.5;background:none;border-left-color:transparent}76%,100%{opacity:1;background:#ffffff14;border-left-color:#ffd669}}

/* P1 7秒：押す 30%(2.10s) → 離す 44.857%(3.14s)＝1040ms。針は 276px/1.8秒 の一定速度。目印(1000ms)は 177.3 */
@keyframes p1Aim{0%{transform:translate(-30px,0)}12%,100%{transform:translate(0,0)}}
@keyframes p1Finger{0%{transform:translate(150px,215px)}8%,12%{transform:translate(99px,95px)}22%,60%{transform:translate(222px,80px)}88%,100%{transform:translate(300px,220px)}}
@keyframes p1FingerIn{0%{transform:translateY(0)}10%{transform:translateY(2px)}13%{transform:translateY(0)}30%{transform:translateY(3px)}44.857%{transform:translateY(-8px)}100%{transform:translateY(-8px)}}
@keyframes p1Btn{0%{fill:#91e0c1}30%{fill:#4fa487}44.857%,100%{fill:#91e0c1}}
@keyframes p1Needle{0%,30%{transform:translateX(0)}44.857%,96%{transform:translateX(159.5px)}100%{transform:translateX(0)}}
@keyframes p1Release{0%,44%{opacity:0}45%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes p1Ball{0%,49%{opacity:0}51%,100%{opacity:1}}
@keyframes p1Say{0%,51%{opacity:0}54%,100%{opacity:1}}
@keyframes p1S1{0%{opacity:1;background:#ffffff14;border-left-color:#ffd669}20%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes p1S2{0%{opacity:.5;background:none;border-left-color:transparent}20%{opacity:1;background:#ffffff14;border-left-color:#ffd669}44.857%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes p1S3{0%{opacity:.5;background:none;border-left-color:transparent}44.857%{opacity:1;background:#ffffff14;border-left-color:#ffd669}56%,100%{opacity:.5;background:none;border-left-color:transparent}}
@keyframes p1S4{0%{opacity:.5;background:none;border-left-color:transparent}56%,100%{opacity:1;background:#ffffff14;border-left-color:#ffd669}}

@media (max-height:700px){.bb-demo-dialog{padding:12px 12px 0}.bb-demo{gap:6px}.bb-demo-title{font-size:17px}.bb-demo-art svg{max-height:150px}.bb-demo-steps{gap:2px}.bb-demo-steps li{padding:2px 5px;font-size:12px;line-height:1.45}.bb-demo-note{font-size:11px;padding:6px 8px}.bb-demo-buttons{padding:8px 0 10px}}
@media (max-width:340px){.bb-demo-buttons{gap:6px}.bb-demo-buttons button{font-size:12px;padding:4px 5px}}