/* ワイヤーダッシュ（2026-11-09）: 晴れた昼の街。危ない物の赤・輪の金・ワイヤーと自分の青緑だけを差し色に。札は道路の案内標識、計測は競技の計時板 */
:root{
  --ink:#10233c; --ink2:#4a5a70; --sky:#3f7fd6; --sign:#0f5aa8; --sign2:#0a4486; --red:#e81e2e; --gold:#ffb400; --teal:#1aa0b4; --white:#fff;
  --jp:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  --num:'Chakra Petch','SF Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden],.hidden{display:none!important}
html,body{height:100%;overflow:hidden;background:#8ec0ee;color:var(--ink);font-family:var(--jp);touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;text-decoration:none}
#view{position:fixed;inset:0}
#view canvas{display:block;width:100%;height:100%;touch-action:none}
.screen{position:fixed;inset:0;z-index:10}

/* ---------- ロード画面 ---------- */
#boot{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#cfe2f6;color:var(--ink);transition:opacity .35s}
#boot.out{opacity:0;pointer-events:none}
.boot-city{width:min(300px,78vw);height:auto;display:block;border-radius:6px}
.boot-city .bc-swing{transform-origin:112px 56px;animation:bcSwing 1.4s ease-in-out infinite}
@keyframes bcSwing{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-28deg)}}
.boot-msg{font-weight:900;font-size:16px;letter-spacing:.12em;color:var(--ink2)}
.boot-bar{width:min(240px,64vw);height:6px;overflow:hidden;background:#fff;border-radius:3px}
.boot-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform .25s;background:var(--teal)}
.boot-pct{font-family:var(--num);font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.boot-city *{animation:none!important}}
#boot-err{position:fixed;inset:auto 8px 8px 8px;z-index:99;background:#fff;color:#b00;font:12px/1.4 monospace;white-space:pre-wrap;padding:10px;border-radius:6px}

/* ---------- タイトル ---------- */
#title{display:flex;flex-direction:column;align-items:center;padding:max(26px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,.0) 40%,rgba(16,35,60,.35) 100%)}
.title-text{margin-top:min(5svh,36px);text-align:center}
.logo{font-weight:900;font-size:min(11vw,50px);white-space:nowrap;line-height:1;letter-spacing:.04em;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
html[lang=en] .logo{font-family:var(--num);font-size:min(14vw,60px);letter-spacing:.06em}
.logo-sub{margin-top:12px;display:inline-block;padding:4px 12px;font-weight:700;font-size:14px;color:#fff;background:var(--red);transform:rotate(-2deg)}
.title-actions{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.pick{font-weight:900;font-size:13px;letter-spacing:.2em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* コースの札: 道路の案内標識（青地・白い縁・白い字）。番号は丸 */
.courses{display:flex;flex-direction:column;gap:7px;width:min(380px,100%)}
.plate{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:7px 12px 7px 8px;color:#fff;background:var(--sign);border-radius:7px;box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1.5px var(--sign2);text-align:left}
.plate:active{transform:translateY(2px)}
.plate .pn{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--sign);font-family:var(--num);font-size:20px;font-weight:700}
.plate .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.plate .pt b{font-weight:900;font-size:16px;line-height:1.2}
.plate .pt small{font-size:11px;opacity:.85;line-height:1.3}
.plate .pb{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.plate .pb i{font-style:normal;font-family:var(--num);font-weight:700;font-size:16px}
.plate .pb i.nb{font-family:var(--jp);font-size:11px;opacity:.75}
.mds{display:flex;gap:3px}
.md{width:15px;height:15px}
.plate.locked{background:#4f6078;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.7),0 0 0 1.5px #5a6a80;cursor:default}
.plate.locked .pn{color:#4f6078}
.cta{position:relative;min-width:min(260px,74vw);padding:13px 26px 12px;font-weight:900;font-size:22px;letter-spacing:.12em;color:#fff;background:var(--red);border-radius:8px;box-shadow:0 4px 0 #9e1220,0 8px 20px rgba(232,30,46,.3);transition:transform .08s}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 #9e1220}
.cta.small{font-size:19px;min-width:180px;padding:11px 20px 10px}
.cta.next{background:var(--sign);box-shadow:none}
.memo-link{font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:5px;padding:8px 10px}
.foot{display:flex;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;font-size:13px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);border-radius:18px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.chip:active{transform:scale(.96)}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---------- 遊び方・中断 ---------- */
#how,#pause{display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(16,35,60,.45)}
.sheet{position:relative;width:min(420px,100%);max-height:calc(100svh - 32px);overflow:hidden;background:#fff;color:var(--ink);padding:20px 22px 16px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center}
.sheet.narrow{width:min(320px,100%)}
.sheet h2{font-weight:900;font-size:22px;letter-spacing:.1em;margin-bottom:12px}
.sheet ol{list-style:none;font-size:15px;line-height:1.55;display:flex;flex-direction:column;gap:10px;width:100%}
.sheet li{display:grid;grid-template-columns:26px 1fr;gap:6px}
.sheet li::before{content:attr(data-n);display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--sign);color:#fff;font-family:var(--num);font-weight:700;font-size:13px}
.sheet li b{color:var(--ink);font-weight:900}
.sheet .keys{font-size:12px;color:var(--ink2);margin:10px 0 12px;text-align:center;line-height:1.5}
.sheet .keys:empty{margin:6px 0}
.sheet .credit{font-size:10px;color:#6a7282;margin-top:10px;text-align:center;line-height:1.4}
.sheet .credit a{color:#4a5a70}
#pause .sheet button+button{margin-top:12px}

/* ---------- 遊び中 ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#speedfx{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#hitflash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 100%);opacity:0}
#redflash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,40,40,0) 30%,rgba(220,20,30,.6) 100%);opacity:0}
#goldflash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,200,58,0) 40%,rgba(255,180,0,.5) 100%);opacity:0}
/* 左上: 計時板（黒地に光る数字） */
.board{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));padding:5px 11px 6px;background:#10161f;border-radius:6px;box-shadow:inset 0 0 0 2px #2a3442,0 3px 10px rgba(0,0,0,.25);min-width:118px}
.clock{display:block;font-family:var(--num);font-weight:700;font-size:28px;line-height:1.05;color:#ffe066;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.b-row{display:flex;gap:8px;align-items:center;min-height:15px}
.delta,.miss2{font-style:normal;font-family:var(--num);font-weight:700;font-size:12px;color:#8a96a6}
.delta.ahead{color:#4cf08a}.delta.behind{color:#ff6a6a}
.miss2.on{color:#ff6a6a}
/* 右: スコア（中断の下） */
.score{position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 44px);padding:4px 10px 5px;background:rgba(255,255,255,.92);border-radius:6px;text-align:right;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.score.bump{animation:bump .25s ease-out}
@keyframes bump{40%{transform:scale(1.07)}}
.b-label{display:block;font-weight:900;font-size:10px;letter-spacing:.2em;color:var(--ink2)}
.score>b{display:block;font-family:var(--num);font-weight:700;font-size:20px;line-height:1.1;color:var(--ink)}
.b-chain{--pulse:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;opacity:.75}
.b-chain.on{opacity:1}
.b-chain b{font-family:var(--num);font-weight:700;font-size:15px;line-height:1;transform:scale(calc(1 + var(--pulse) * .4));transform-origin:100% 50%}
.b-chain.hot b{color:var(--red)}
.b-chain span{font-size:10px;font-weight:700;color:var(--ink2);white-space:nowrap}
.compass{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;padding:2px 10px 4px;background:rgba(16,35,60,.62);border-radius:10px}
.compass svg{width:34px;height:34px;fill:var(--gold);stroke:#5a3a00;stroke-width:1.2}
.compass span{font-family:var(--num);font-size:13px;font-weight:700;color:#fff}
.compass small{font-size:11px;font-weight:900;color:#fff;white-space:nowrap}
.corner-btn{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));pointer-events:auto;font-size:13px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);border-radius:16px;padding:7px 12px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
/* コーチの一言: 画面の下、操作の上 */
.say{position:absolute;left:50%;transform:translateX(-50%);top:calc(max(10px,env(safe-area-inset-top)) + 142px);width:max-content;max-width:min(520px,calc(100% - 40px));font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);background:rgba(255,255,255,.94);padding:6px 12px;text-align:left;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.2);word-break:keep-all;overflow-wrap:anywhere;border-left:4px solid var(--teal)}
.say small{display:inline-block;margin-right:.7em;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--teal);vertical-align:1px}
.miss{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 1px 4px #000;animation:fadeUp .8s ease-out forwards}
.miss span{font-size:40px;line-height:1;color:var(--red);-webkit-text-stroke:1.5px #fff}
.miss small{font-size:13px}
@keyframes fadeUp{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%)}}
.tags{position:absolute;inset:0;overflow:hidden}
.fpts{position:absolute;left:0;top:0;font-family:var(--num);font-weight:700;font-size:18px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap;will-change:transform,opacity}
.fpts.hot{color:#ffe066;font-size:21px}
.fpts.gold{color:var(--gold);font-size:22px}
.banner{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.banner b{font-weight:900;font-size:min(12vw,48px);letter-spacing:.1em;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.banner.gold b{color:var(--gold)}
.banner.red b{color:#fff;background:var(--red);padding:2px 18px;-webkit-text-stroke:0}
.banner.pop{animation:bannerIn 2.2s ease-out forwards}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.near{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.near b{font-weight:900;font-size:min(8.5vw,32px);letter-spacing:.06em;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap}
.near.tight b{color:#ffe066;font-size:min(10vw,38px)}
.near.hit b{color:#fff;background:var(--red);padding:0 12px;-webkit-text-stroke:0}
.near small{font-family:var(--num);font-weight:700;font-size:16px;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.near.pop{animation:nearIn .9s ease-out forwards}
@keyframes nearIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}30%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%)}}
/* スマホ操作 */
.touch{position:absolute;inset:0;pointer-events:none}
.stickzone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:none}
.stick{position:absolute;left:calc(max(16px,env(safe-area-inset-left)) + 62px);top:calc(100% - max(16px,env(safe-area-inset-bottom)) - 62px);width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:rgba(16,35,60,.25);opacity:.8;pointer-events:auto;touch-action:none}
.stick::before{content:'';position:absolute;inset:-24px;border-radius:50%}
.stick.held{opacity:1}
.stick .knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.92)}
.tbtn{position:absolute;pointer-events:auto;width:66px;height:66px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;touch-action:none;display:flex;align-items:center;justify-content:center}
.tbtn[data-k=wire]{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:104px;height:104px;background:var(--teal);border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tbtn[data-k=wire] svg{width:54px;height:54px}
.tbtn[data-k=wire].aim{box-shadow:0 0 0 4px rgba(255,255,255,.6)}
.tbtn[data-k=wire].kick{background:var(--red);box-shadow:0 0 0 4px rgba(255,255,255,.8)}
.tbtn .kick-l{position:absolute;bottom:12px;font-weight:900;font-size:15px;letter-spacing:.1em}
.tbtn:active{transform:translateY(3px)}

/* ---------- 結果 ---------- */
#result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));background:rgba(16,35,60,.55)}
.slip-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
#slip{max-width:100%;max-height:100%;width:auto;height:100%;aspect-ratio:1080/1350;object-fit:contain}
.result-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center;color:#fff}
.sheet li,.say{word-break:keep-all;overflow-wrap:anywhere}
@media (max-height:700px){.sheet{padding:14px 16px 10px}.sheet h2{font-size:19px;margin-bottom:8px}.sheet ol{font-size:13px;gap:6px;line-height:1.45}.sheet .keys{margin:6px 0 8px}.sheet .credit{margin-top:6px}.title-text{margin-top:6px}.plate{min-height:50px;padding:5px 10px 5px 7px}.plate .pt b{font-size:14px}.plate .pt small{font-size:10px}.cta{font-size:20px;padding:10px 22px 9px}}