/* M1：携帯お試し版（mobile.html）だけ */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
[data-mobile="1"] .derby-bar { top: calc(8px + env(safe-area-inset-top)); right: 104px; }
[data-mobile="1"] .derby-panel { padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
[data-mobile="1"] .derby-instructions b { color: #ffdc65; }
.m-snd { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 12px; z-index: 70; min-height: 44px; min-width: 84px; padding: 0 10px; border-radius: 14px; border: 1px solid #ffffff4d;
  background: #102335e6; color: #fff; font: 700 13px system-ui; touch-action: manipulation; cursor: pointer; }
.m-snd[aria-pressed="false"] { color: #c5ced8; }
.m-snd[hidden] { display: none; }
.m-card { position: absolute; left: 12px; right: 12px; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 6; max-width: 460px; margin: 0 auto; padding: 10px 14px 8px; border-radius: 16px;
  background: #0d1d2ce8; border: 1px solid #ffffff38; color: #fff; pointer-events: none; display: grid; gap: 3px; font: 13px/1.35 system-ui; }
.m-card[hidden] { display: none; }
.m-card.on { animation: m-in .22s ease-out; }
@keyframes m-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.m-card b { font: 900 22px/1.2 "Hiragino Sans", system-ui; }
.m-card[data-hr="1"] b { color: #ffd23f; }
.m-card span { color: #e4edf6; font-weight: 700; }
.m-bar { position: relative; height: 10px; border-radius: 5px; margin-top: 4px; }
.m-bar[hidden] { display: none; }
.m-bar i { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px #0d1d2c; }
.m-bar i[hidden] { display: none; }
.m-ends { display: flex; justify-content: space-between; color: #b8c8d4; font-size: 11px; }
.m-ends[hidden] { display: none; }
.m-ends { position: relative; }
.m-ends em { font-style: normal; }
.m-ends .m-mid { position: absolute; transform: translateX(-50%); color: #ffd23f; }
.m-rot { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #05070ef2; color: #fff; text-align: center; padding: 24px; font: 15px/1.6 system-ui; }
.m-rot[hidden] { display: none; }
.m-rot b { display: block; font-size: 22px; margin-bottom: 6px; }
[data-mobile="1"] .hint { bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 16px; padding: 0 12px; }
.m-toast { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 7; padding: 8px 14px; border-radius: 12px; background: #0d1d2cee; color: #fff; font: 700 14px system-ui; white-space: nowrap; pointer-events: none; }
.m-toast[hidden] { display: none; }
/* M2：モード選択・結果から戻る・通常版への入口 */
[data-m2="1"] .derby-primary small, [data-m2="1"] .derby-back small { display: block; font-size: 12px; font-weight: 600; opacity: .8; }
.derby-back { width: 100%; min-height: 52px; margin: 0 0 16px; border: 1px solid #ffffff59; border-radius: 14px; background: #ffffff14; color: #fff; font: 700 16px system-ui; }
.m2-h { margin: 0 0 8px; font-weight: 700; color: #d6e2ec; }
.m2-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.m2-mode { display: grid; gap: 2px; text-align: left; min-height: 92px; padding: 10px 12px; border-radius: 14px; border: 1px solid #ffffff40; background: #ffffff0f; color: #fff; font: 13px/1.35 system-ui; }
.m2-mode b { font-size: 16px; }
.m2-mode span { color: #c8d4de; }
.m2-mode small { color: #a8b8c6; font-size: 11px; }
.m2-mode.on { border: 2px solid #ffda64; background: #ffda641f; }
.m2-mode.on small { color: #ffdc65; }
.m2-normal { display: block; margin: 4px 0 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed #ffffff59; color: #fff; text-decoration: none; font: 700 14px system-ui; }
.m2-normal small { display: block; margin-top: 2px; font-weight: 500; font-size: 11px; color: #b8c8d4; }
/* M2：自動で当てるので、9 マスは出さない（白い枠＝ストライクゾーンだけ。球が来た所の印は残す） */
[data-m2="1"] .yama i { border-color: transparent !important; background: transparent !important; box-shadow: none !important; animation: none !important; }
[data-m2="1"] .yama .ylbl { display: none; }
/* M2：100dvh を知らないブラウザ（iOS 15.4 より前・Chrome 108 より前）では、ゲーム画面の高さが無くなる → 100vh で代わりに */
@supports not (height: 100dvh) {
  .stage { height: 100vh; width: min(100vw, 60vh); }
  .bb-demo-dialog { max-height: calc(100vh - 24px); }
}
/* M3：上の帯（スコア・音）を小さく、左上と右上の角へ。真ん中の上（投手の顔・投げる手・リリースの球）を空ける。
   ブラウザの上下のバーで画面が低い（LINE などのアプリ内ブラウザ・Safari のバーあり）時、M2 では帯が投手に重なっていた。
   「前の球」の行は下の結果の帯と同じなので、上では出さない。「残り○球」は「○ / 10 球」と同じなので出さない。判定・数字は変えない（見た目だけ） */
[data-mobile="1"] .derby-bar { top: calc(6px + env(safe-area-inset-top)); left: 6px; right: auto; padding: 4px 9px 5px; border-radius: 10px; background: #102335b8; font: 11px/1.25 system-ui; }
[data-mobile="1"] .derby-bar .derby-progress b { font-size: 11px; font-weight: 700; color: #d2dae3; }
[data-mobile="1"] .derby-bar .derby-progress span, [data-mobile="1"] .derby-bar > p { display: none; }
[data-mobile="1"] .derby-bar .derby-live { margin-top: 1px; gap: 8px; justify-content: flex-start; }
[data-mobile="1"] .derby-bar .derby-live b { font-size: 17px; }
.m-snd { top: calc(6px + env(safe-area-inset-top)); right: 6px; min-height: 36px; min-width: 0; padding: 0 9px; border-radius: 10px; background: #102335b8; font-size: 11px; }
/* M4：メニューから通常試合（3回）・打者の左右（MY PLAYER）へ */
.m4-go { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
[data-m2="1"] .derby-primary + .m2-h { margin-top: 12px; }
.m4-link { display: grid; align-content: start; gap: 3px; min-height: 56px; padding: 8px 12px; border-radius: 14px; border: 1px solid #ffffff59; background: #ffffff14; color: #fff; text-decoration: none; font: 700 15px/1.3 system-ui; touch-action: manipulation; }
.m4-link small { color: #c8d4de; font-size: 11px; font-weight: 500; }
.m4-link small b { color: #ffdc65; }