/* 盤面型（地図版）。色・ボタンなどは /recall/recall.css のトークンを使う */

/* 遊ぶ画面：画面いっぱいに固定（高さは engine.js が、キーボードを除いた見えている範囲に合わせる） */
.bplay{position:fixed;left:0;right:0;top:0;height:100%;z-index:20;background:var(--bg)}
.bplay-in{position:relative;max-width:780px;height:100%;margin:0 auto;display:flex;flex-direction:column}
html.bplaying,html.bplaying body{overflow:hidden}
.bstat{flex:none;display:flex;gap:10px;align-items:center;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;border-bottom:1.5px solid var(--line);font-weight:700;color:var(--navy)}
.bstat b{font-family:var(--f-lat);font-size:22px}
#clock{margin-right:auto;font-family:var(--f-lat);color:var(--soft)}
.bctl{display:flex;gap:6px}
.bctl .btn{padding:6px 12px;font-size:13px;border-width:1.5px}
.btn:disabled{opacity:.4;cursor:default;transform:none}

/* 地図 */
.bmap{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--sea)}
.bmap.result{flex:none;height:min(62vw,420px);border-radius:18px;border:1.5px solid var(--line);margin-top:8px}
.bsvg{display:block;width:100%;height:100%}
.bland path{fill:var(--landfill);stroke:var(--landline);stroke-width:calc(1px * var(--u,1));stroke-linejoin:round}
.brail{fill:none;stroke:var(--navy);stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.bdot{cursor:pointer}
.bdot .hit{fill:transparent}
.bdot .ring{fill:none;stroke:none}
.bdot .core{fill:var(--surface);stroke:var(--navy)}
.bdot.sel .ring{stroke:var(--teal);animation:bpulse 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bdot.sel .core,.bdot.hint .core{fill:var(--mint);stroke:var(--navy)}
.bdot.ok .core{fill:var(--teal);stroke:var(--surface)}
.bdot.pop .core{animation:bpop .5s ease-out;transform-box:fill-box;transform-origin:center}
.bdot.missed .core{fill:var(--ng);stroke:var(--surface)}
.blabel{fill:var(--navy);font-weight:900;text-anchor:middle;paint-order:stroke;stroke:var(--labelhalo);stroke-linejoin:round;pointer-events:none}
.blabel.ok{fill:var(--ok)}
.blabel.missed{fill:var(--ng)}
.blabel.pop{animation:bfade .45s ease-out}
.btrain .tb{fill:var(--navy)}
.btrain .tw{fill:var(--mint)}
.btrain .ts{fill:var(--teal)}
@keyframes bpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.35}}
@keyframes bpop{0%{transform:scale(.4)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes bfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.bdot.sel .ring,.bdot.pop .core,.blabel.pop{animation:none}}

.bmissed{margin:4px 0 0;font-weight:700;color:var(--ng)}

/* 入力欄 */
.binput{flex:none;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));border-top:1.5px solid var(--line);background:var(--bg)}
.btarget{margin:0 4px 6px;font-size:14px;font-weight:700;color:var(--navy)}
#bform{display:flex;gap:8px}
#bin{flex:1;min-width:0;font:inherit;font-size:17px;padding:11px 16px;border-radius:999px;border:2px solid var(--navy);background:var(--surface);color:var(--ink)}
#bform .btn{padding:11px 20px}
.bfoot{display:flex;align-items:center;gap:8px;margin-top:6px}
.bmsg{flex:1;min-width:0;min-height:1.4em;margin:0 4px;font-size:14px;font-weight:700;line-height:1.4}
/* 地図の操作：ドラッグで移動、2本指（ホイール）で拡大・縮小 */
.bsvg{touch-action:none;cursor:grab}
.bsvg.drag{cursor:grabbing}
.bmap.result .bsvg{touch-action:auto;cursor:default}
.brecenter{position:absolute;right:12px;bottom:12px;padding:8px 14px;font-size:13px;border-width:1.5px;background:var(--surface)}
.bmsg.ok{color:var(--ok)}
.bmsg.ng{color:var(--ng)}

/* 地図の色（recall.css のテーマに合わせて、地図用だけ足す） */
:root{--sea:#E6F1F3;--landfill:#FFFFFF;--landline:#C9DCD3;--labelhalo:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sea:#0A1528;--landfill:#16294A;--landline:#2A4166;--labelhalo:#0A1528}}
:root[data-theme="dark"]{--sea:#0A1528;--landfill:#16294A;--landline:#2A4166;--labelhalo:#0A1528}

/* 解説ページの駅一覧 */
.btable{width:100%;border-collapse:collapse;margin:0 0 6px}
.btable th,.btable td{text-align:left;vertical-align:top;padding:8px 6px;border-bottom:1px solid var(--line)}
.article .btable th{white-space:nowrap;word-break:keep-all;color:var(--navy);width:5em;padding-right:12px}
.btable small{color:var(--soft)}

/* パズルのスタート画面：この路線のポイント */
.points{padding-left:1.3em;margin:0 0 14px}
.points li{margin-bottom:6px;font-size:15px}

/* スマホで入力中（engine.js が .kb を付ける）：残り・時間とヒント・ギブアップを地図の上に重ね、入力欄のまわりを詰める */
.bplay.kb .bstat{position:absolute;top:calc(6px + env(safe-area-inset-top,0px));left:8px;z-index:3;padding:3px 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px}
.bplay.kb .bstat b{font-size:17px}
.bplay.kb .bctl{position:absolute;top:calc(6px + env(safe-area-inset-top,0px));right:8px;z-index:3}
.bplay.kb .bctl .btn{background:var(--surface);padding:4px 10px}
.bplay.kb .binput{padding-top:6px;padding-bottom:6px}
.bplay.kb .btarget{margin-bottom:4px;font-size:13px}
.bplay.kb #bin{padding:8px 14px}
.bplay.kb #bform .btn{padding:8px 16px}
.bplay.kb .bfoot{margin-top:2px}
.bplay.kb .bmsg{font-size:13px}