*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#11141b;color:#f3f1ea;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;position:fixed;inset:0}
#gl,#game{position:fixed;inset:0;width:100%;height:100%;display:block}
#game{pointer-events:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
.panel,#board,#timer-wrap,#minimap,#meters,#speedo{background:rgba(10,14,22,.78);border:1px solid rgba(255,255,255,.12);border-radius:10px}
#hud-top{position:absolute;top:calc(0px + 8px);left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#board{padding:6px 10px;min-width:96px}
#total{font-size:11px;color:#ffd60a;font-weight:800;white-space:nowrap}
#total{white-space:nowrap}
#timer-wrap{text-align:center;padding:5px 12px}
#timer{font:800 24px/1 ui-monospace,Menlo,monospace}
#timer.warn{color:#ff5a5a;animation:blink .5s steps(2) infinite}
.sub{font-size:9px;opacity:.7;margin-top:2px}
#minimap{width:124px;height:124px;border-radius:50%}
#meters{position:absolute;top:calc(0px + 66px);left:10px;width:min(226.2px,250px);padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.meter{display:flex;align-items:center;gap:6px}
#face{font-size:20px;line-height:1;width:22px;text-align:center}
.bar{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.meter.small .bar{height:6px}
#sway-fill{height:100%;width:0;background:#2bd96b;transition:background .3s}
#rhythm-fill{height:100%;width:0;background:linear-gradient(90deg,#7c5cff,#ff5cd6)}
#sway-num{font:800 13px ui-monospace,Menlo,monospace;width:26px;text-align:right}
.lbl{font-size:10px;opacity:.75;width:auto;white-space:nowrap}
#pname{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pause{pointer-events:auto;position:absolute;top:calc(0px + 140px);right:10px;width:40px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(10,14,22,.78);font-weight:900;font-size:13px;letter-spacing:-1px}

#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);font-weight:900;font-size:20px;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.6);opacity:0;white-space:nowrap;text-align:center}
#toast.show{animation:toast 1.4s ease-out forwards}
#toast.good{color:#7dffb0}
#toast.bad{color:#ff7a6b}
#toast.big{font-size:min(31.2px,46px);color:#ffd60a}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}22%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
@keyframes blink{50%{opacity:.35}}

#speedo{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(0px + 160px);width:min(280.8px,290px);padding:5px 10px 8px}
.srow{display:flex;align-items:baseline;gap:5px}
#kmh{font:900 26px/1 ui-monospace,Menlo,monospace;min-width:38px;text-align:right}
#kmh.over{color:#ff7a6b}#kmh.under{color:#7fc8ff}#kmh.ok{color:#7dffb0}
.unit{font-size:11px;opacity:.7}
#smode{margin-left:auto;font-size:11px;font-weight:700;opacity:.9;white-space:nowrap}
#sbar{position:relative;height:10px;margin-top:4px;border-radius:5px;background:rgba(255,255,255,.1)}
#sband{position:absolute;top:0;bottom:0;background:rgba(43,217,107,.55);border-radius:5px;border:1px solid #2bd96b}
#sneedle{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff}

/* ---------- Controls ---------- */
#controls{position:fixed;left:0;right:0;bottom:0;padding:0 12px calc(0px + 12px);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
#steer{pointer-events:auto;width:min(179.4px,250px);height:140px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;touch-action:none}
#steer-track{position:relative;height:66px;border-radius:33px;background:rgba(10,14,22,.62);border:2px solid rgba(255,255,255,.2)}
#steer-track::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.2)}
#steer-knob{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:radial-gradient(circle,transparent 12px,#d9dee7 13px,#d9dee7 17px,transparent 18px),radial-gradient(circle at 35% 30%,#3b4252,#1b1f29);
  border:5px solid #d9dee7;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.clabel{font-size:10px;text-align:center;opacity:.6}
#pedals{pointer-events:auto;display:flex;gap:10px;align-items:flex-end}
.pedal{position:relative;width:78px;height:136px;border-radius:14px;overflow:hidden;background:rgba(10,14,22,.65);border:2px solid rgba(255,255,255,.22);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;text-align:center;font-weight:800;font-size:13px;line-height:1.25;touch-action:none}
#brake{width:70px;height:100px}
.pfill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#2bd96b,#14853f);opacity:.85}
#brake .pfill{background:linear-gradient(#ff6b5a,#b52a22)}
.pedal span{position:relative;z-index:1;text-shadow:0 1px 2px #000}
.pedal small{font-size:8.5px;font-weight:600;opacity:.8}

#mute{position:fixed;right:10px;bottom:calc(0px + 10px);z-index:30;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(10,14,22,.7);font-size:18px}
body.playing #mute{top:calc(0px + 180px);bottom:auto;width:40px;height:34px;border-radius:10px;font-size:15px}

/* ---------- Overlay cards ---------- */
#overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(6,9,15,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#overlay.show{display:flex}
.card{width:min(366.6px,440px);max-height:calc(100% - 8px);overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:linear-gradient(180deg,rgba(20,26,40,.97),rgba(12,16,26,.97));border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:#ffd60a;text-transform:uppercase}
.card h2{font-size:24px;font-weight:900;margin:4px 0 8px}
.card p{font-size:13px;line-height:1.6;opacity:.9}
.btn{display:block;width:100%;margin-top:14px;padding:14px;border-radius:12px;border:0;background:#ffd60a;color:#14110a;font-weight:900;font-size:17px;letter-spacing:.05em;box-shadow:0 4px 0 #b39200}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b39200}
.btn:disabled{opacity:.4}
.btn.ghost{background:transparent;color:#f3f1ea;border:1px solid rgba(255,255,255,.25);box-shadow:none;font-size:14px;padding:11px}

.title .logo{text-align:center;margin:4px 0 6px}
.title .l1{font:900 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.4em;color:#7fc8ff}
.title h1{font-weight:900;letter-spacing:.02em;line-height:1.1}
.title h1 span{display:block}
.title h1 .relief{font-size:44px;background:linear-gradient(180deg,#fff,#ffd60a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.title h1 .blaze{font-size:56px;font-style:italic;letter-spacing:.08em;margin-bottom:2px;background:linear-gradient(0deg,#b31200 0%,#ff3d00 30%,#ff9500 60%,#ffe14d 85%,#fff6c2 100%);background-size:100% 220%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(255,90,0,.9)) drop-shadow(0 0 16px rgba(255,40,0,.6));animation:blaze 1.1s ease-in-out infinite alternate}
@keyframes blaze{0%{background-position:0 0;transform:skewX(-6deg) scale(1)}50%{transform:skewX(-8deg) scale(1.03,1.06)}100%{background-position:0 100%;transform:skewX(-6deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.title h1 .blaze{animation:none}}
.tag{text-align:center;font-weight:700;font-size:13px;margin-bottom:12px}
.rules{list-style:none;display:flex;flex-direction:column;gap:7px}
.rules li{font-size:12.5px;line-height:1.5;background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px}
.rules b{display:block;color:#7dffb0;font-size:13px}
.ctrl{font-size:11px;opacity:.7;margin-top:10px;text-align:center}
.best{text-align:center;font-size:12px;opacity:.8;margin-top:10px}

.intro .score{display:flex;justify-content:center;align-items:center;gap:12px;font-weight:900;font-size:22px;margin:6px 0 2px}
.intro .score small{font-size:11px;opacity:.7;font-weight:700}
.offense{text-align:center;font-size:12px;color:#7dffb0;margin-bottom:8px}
.env{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(127,200,255,.15);color:#a9dbff;margin-left:6px}
.pcard{background:rgba(255,255,255,.06);border-radius:12px;padding:12px;margin-top:8px}
.pcard .pn{display:flex;align-items:center;gap:10px}
.pcard .num{font:900 26px ui-monospace,Menlo,monospace;color:#7fc8ff;min-width:44px}
.pcard .nm{font-weight:900;font-size:18px}
.pcard .role{font-size:11px;opacity:.7}
.pcard .desc{font-size:12.5px;margin:8px 0;line-height:1.5}
.traits{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:11.5px;align-items:center}
.tbar{height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.tbar i{display:block;height:100%;background:#7fc8ff}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chip{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(255,214,10,.15);color:#ffe36b}
.chip.red{background:rgba(255,90,90,.15);color:#ff9a8f}
.mission{margin-top:10px;font-size:12.5px;line-height:1.5;background:rgba(255,214,10,.08);border:1px dashed rgba(255,214,10,.4);border-radius:10px;padding:8px 10px}

.grade{text-align:center;font:900 40px/1.1 ui-monospace,Menlo,monospace;margin:4px 0 8px;letter-spacing:.06em}
.g-PERFECT{color:#ffd60a;text-shadow:0 0 18px rgba(255,214,10,.6)}
.g-GREAT{color:#7dffb0}.g-GOOD{color:#7fc8ff}.g-OK{color:#cfcfcf}
.rows{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px;background:rgba(255,255,255,.05);padding:8px 12px;border-radius:10px}
.rows b{font-family:ui-monospace,Menlo,monospace}
.rows .tot{border-top:1px solid rgba(255,255,255,.15);padding-top:4px;margin-top:2px;font-weight:900;color:#ffd60a}
.pbp-wrap{display:flex;gap:12px;margin-top:12px;align-items:flex-start}
.dia{flex:none;width:76px;text-align:center}
.dia svg{width:76px;height:64px}
.outs{font-size:13px;letter-spacing:2px;color:#ff7a6b}
#pbp{list-style:none;flex:1;font-size:13px;display:flex;flex-direction:column;gap:3px;min-height:100px}
#pbp li{animation:pop .2s ease-out;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.06)}
#pbp li.k{color:#7dffb0;font-weight:800}
#pbp li.hr{color:#ff7a6b;font-weight:900}
#pbp li.hit,#pbp li.bb{color:#ffc2a8}
#pbp li.dp{color:#7fc8ff;font-weight:800}
.sum{text-align:center;font-weight:900;font-size:16px;margin-top:10px;min-height:22px}
.final{text-align:center;font-size:15px;margin-top:10px}
.final b{font:900 30px ui-monospace,Menlo,monospace;color:#ffd60a;margin-left:6px}
.stats{text-align:center;font-size:12px;opacity:.75;margin-top:4px}
.over h2{color:#ff7a6b}
.driver-title{text-align:center;margin:12px 0;padding:10px 8px;border:1px solid #ffd60a55;border-radius:10px;background:#ffd60a0a}
.driver-title span{display:block;font-size:11px;color:#d1d8e4;margin-bottom:4px}
.driver-title b{display:block;color:#ffe36b;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-actions .btn{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:0;text-decoration:none;text-align:center;letter-spacing:0}
.card .share-status{margin:6px 0 0;font-size:11px;text-align:center}
.share-status:empty{display:none}
.share-copy{width:100%;min-height:120px;margin-top:8px;padding:8px;background:#070d1a;color:#fff;border:1px solid #ffffff55;border-radius:8px;font-size:13px;user-select:text;-webkit-user-select:text}
.share-actions .btn:focus-visible{outline:3px solid #ffd60a;outline-offset:2px}
.win h2{color:#7dffb0}
.bigscore{text-align:center;font:900 40px ui-monospace,Menlo,monospace;margin:4px 0}

#prompt{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:max-content;max-width:343.2px;text-align:center;font-weight:900;font-size:16px;line-height:1.4;padding:10px 16px;border-radius:14px;background:rgba(10,14,22,.78);border:1px solid rgba(255,214,10,.5);color:#fff;display:none}
#prompt.show{display:block}
#prompt small{display:block;font-size:11px;font-weight:700;opacity:.75}

.g-S{color:#ffd60a;text-shadow:0 0 18px rgba(255,214,10,.6)}
.g-A{color:#7dffb0}.g-B{color:#7fc8ff}.g-C{color:#cfcfcf}
#kmh.ok{color:#fff}
/* 乗車確認：景色を隠さず、車の後ろを見て人選する */
#overlay.vision{pointer-events:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.vision-title{position:absolute;top:0;left:0;right:0;text-align:center;padding:24px 12px;background:linear-gradient(#070d1a,transparent)}
.vision-title span{display:block;color:#ffd60a;font-size:12px;letter-spacing:.2em}
.vision-title b{display:block;font-size:clamp(19px,15.6px,28px);margin-top:5px}
.vision-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:20px 16px 28px;background:linear-gradient(transparent,#070d1a 30%)}
.vision-caption b{display:block;font-size:clamp(22px,19.5px,34px);color:#ffd60a;line-height:1.5}
.vision-caption span{display:block;font-size:13px;line-height:1.6}
.vision-progress{height:3px;background:#ffd60a;width:0;max-width:240px;margin:14px auto 0;animation:visionWait 7.2s linear forwards}
.vision-caption .vision-skip{pointer-events:auto;width:auto;min-height:44px;margin:12px auto 0;padding:10px 20px;background:rgba(7,13,26,.8)}
.vision-skip:focus-visible,.result-promotion:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}
.result-promotion{display:block;margin-top:14px;padding:12px 8px 0;border-top:1px solid #ffffff26;min-height:44px;text-align:center;color:#bedcff;text-decoration:none;line-height:1.7}
.result-promotion span{display:block;font-size:11px}
.result-promotion b{display:block;font-size:16px;color:#e0efff}
.result-promotion:hover b{text-decoration:underline}
@keyframes visionWait{to{width:70%}}
#boarding-check{pointer-events:auto;position:absolute;bottom:calc(0px + 14px);left:50%;transform:translateX(-50%);width:min(366.6px,460px);padding:13px 16px;border:1px solid rgba(127,200,255,.4);border-radius:16px;background:rgba(9,18,32,.94);text-align:center}
#called-pitcher{font-size:13px;line-height:1.6;color:#ffd60a;font-weight:800}
#passenger-id{font-size:17px;line-height:1.5;font-weight:900;margin:5px 0 10px;min-height:26px;overflow-wrap:anywhere}
.boarding-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.boarding-actions button{border:1px solid rgba(255,255,255,.28);border-radius:10px;min-height:48px;padding:9px 6px;font-weight:900;font-size:15px;line-height:1.5}
#accept-passenger{background:#256346}#reject-passenger{background:#9d3f35}
.boarding-actions button:disabled{opacity:.38;cursor:default}
.boarding-actions button:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}
#boarding-feedback{font-size:11px;color:#bfd0e6;line-height:1.6;margin-top:8px;min-height:18px;overflow-wrap:anywhere}
body.boarding-wait #pedals,body.boarding-wait #steer,body.boarding #speedo{display:none}
body.boarding #prompt{top:34%;max-width:327.6px;font-size:14px}
#prompt{width:max-content;max-width:min(343.2px,430px);text-wrap:pretty;overflow-wrap:anywhere;line-height:1.7}
#prompt small{line-height:1.7}
#toast{max-width:351.0px;width:max-content;white-space:normal;overflow-wrap:anywhere;font-size:clamp(15px,15.6px,20px);line-height:1.6}
#pname{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.mission p{margin:0 0 12px;line-height:1.7}.mission p:last-child{margin-bottom:0}.mission small{font-size:11px;opacity:.75}
.intro-call{line-height:1.9!important;text-wrap:pretty}
.rules li,.ctrl,.card p{text-wrap:pretty;overflow-wrap:anywhere}

/* 画面枠と描画・タッチ操作は同じ390px幅の座標系を使う。 */
body{background:#070a10}
#safe-area{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#game-frame{position:fixed;overflow:hidden;background:#11141b;box-shadow:0 0 70px #000;width:390px;height:780px}
#game-shell{position:relative;width:390px;height:780px;overflow:hidden;transform-origin:top left;--min-tap-size:44px}
#gl,#game,#hud,#overlay{position:absolute}
#controls{position:absolute;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:0 12px 12px}
#steer{width:auto;min-width:0}
#pedals{gap:10px}
.pedal{width:max(78px,var(--min-tap-size));min-height:var(--min-tap-size)}
#brake{width:max(70px,var(--min-tap-size))}
#speedo{left:12px;right:12px;transform:none;width:auto;bottom:158px}
#mute{position:absolute;min-width:var(--min-tap-size);min-height:var(--min-tap-size)}
#pause{min-width:var(--min-tap-size);min-height:var(--min-tap-size)}
#boarding-check{width:calc(100% - 24px);bottom:14px}
.boarding-actions button{min-height:max(48px,var(--min-tap-size))}
body.boarding #prompt{top:29%;max-width:340px}
#prompt{max-width:calc(100% - 24px)}
#toast{max-width:calc(100% - 28px)}
.vision-title{padding-top:18px}.vision-caption{padding-bottom:20px}
.card{width:calc(100% - 8px);max-height:calc(100% - 8px)}
.compact #minimap{width:96px;height:96px}
.compact #meters{width:224px}
.compact #pause{top:110px}body.playing .compact #mute{top:160px}
.compact .card{padding:14px}.compact .rules li{font-size:11.5px;padding:6px 8px}
.compact .mission p{margin-bottom:8px}.compact .intro-call{line-height:1.6!important}
body.playing #mute{top:calc(140px + max(34px,var(--min-tap-size)) + 8px)}
body.playing .compact #mute{top:calc(110px + max(34px,var(--min-tap-size)) + 8px)}
/* 縮小した論理画面へフォーカスしても、親の枠を自動スクロールさせない。 */
#game-frame,#game-shell{overflow:clip}

/* 発進ボタンは置かず、乗り込み中からペダルとハンドルを操作する。 */
#boarding-check{bottom:158px;padding:8px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;text-align:left}
body.boarding-wait #boarding-check{bottom:14px}
#called-pitcher{grid-column:1;font-size:11px}
#passenger-id{grid-column:1;font-size:15px;margin:0;min-height:22px}
.boarding-actions{grid-column:2;grid-row:1 / 3;display:block;align-self:center}
#reject-passenger{min-width:102px;padding:8px;font-size:14px}
#boarding-feedback{grid-column:1 / -1;font-size:10px;margin-top:2px}

.pitcher-setup{display:grid;grid-template-columns:1fr 105px;gap:10px;margin:15px 0}
.pitcher-setup label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:800;color:#b7cbdf;min-width:0}
.pitcher-setup label:first-child{grid-column:1/-1}
.pitcher-setup input::placeholder{color:#b7cbdf;opacity:1}
.pitcher-setup input:focus::placeholder{color:transparent}
.pitcher-setup input,.pitcher-setup select{display:block;width:100%;min-width:0;height:44px;border:1px solid #536987;border-radius:9px;background:#091421;color:#fff;padding:0 10px;font:700 16px sans-serif;touch-action:manipulation;user-select:text;-webkit-user-select:text}
.pitcher-setup input:focus,.pitcher-setup select:focus{outline:2px solid #ffd36b;outline-offset:1px}
.pitcher-setup input{font-size:var(--input-font-size,16px)}
.setup-situation{text-align:center;color:#ffdc8c;padding:8px 0;border-top:1px solid #c99f5355;border-bottom:1px solid #c99f5355}
.vision-title b{color:#ffe3a5}.vision-caption b{font-weight:900;letter-spacing:.06em;text-shadow:0 0 20px #d6a24988}

/* 走行跡を振り返るため、球場の俯瞰映像を得点カードの上に残す。 */
#overlay.route-review{align-items:flex-end;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px;pointer-events:none}
.route-review .result{max-height:64%;width:100%;padding:12px 14px;pointer-events:auto}
.result-breakdown summary{font-size:12px;cursor:pointer;min-height:44px;align-content:center;color:#cbd6e8}
.result-breakdown .rows{margin-top:4px}
.route-review .grade{font-size:40px;line-height:1;margin:2px 0}
.route-review .btn{margin-top:8px;padding:10px}
.route-review .best{margin-top:5px}