:root{--ink:#f6f2e9;--muted:#a9b3b9;--hot:#ff6943;--dark:#0c1118}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--dark);color:var(--ink);font-family:system-ui,sans-serif;touch-action:none}canvas{width:100%;height:100%;display:block}.grain{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#08111c44,transparent 35%,#06090e55);box-shadow:inset 0 0 12vw #0008}.cover{position:absolute;inset:0;display:flex;align-items:center;padding:7vw;background:linear-gradient(90deg,#08111bed 0%,#0b121bcc 38%,#10172222 100%)}.titleContent{max-width:540px}.eyebrow,.micro,.caption,.sideText{font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--muted)}.eyebrow{color:#f8bd96}.eyebrow i{display:inline-block;width:6px;height:6px;background:var(--hot);margin:0 9px 2px 0}h1,h2{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(76px,16vw,160px);font-style:italic;line-height:.72;letter-spacing:-.045em;margin:32px 0 20px;text-shadow:0 8px 36px #0008}h1 span,h2 span{color:var(--hot)}h1 sup{font:700 11px system-ui;letter-spacing:.2em;vertical-align:top;color:#e5b19b;margin-left:15px}.rule{width:70px;height:3px;background:var(--hot);margin:32px 0 22px}p{font-size:clamp(14px,2.2vw,19px);line-height:1.9;letter-spacing:.1em;font-weight:700}button{display:flex;justify-content:space-between;align-items:center;border:0;background:var(--hot);color:#1a1010;padding:18px 21px;width:min(300px,75vw);font-size:13px;letter-spacing:.12em;font-weight:900;cursor:pointer;margin:25px 0 18px}button b{font-size:20px}.caption{line-height:1.9;letter-spacing:.06em}.sideText{position:absolute;right:25px;bottom:40px;writing-mode:vertical-rl}.cover{display:none}body[data-st=title] #title,body[data-st=result] #result,body[data-st=paused] #pauseScreen{display:flex}#hud{position:absolute;inset:0;pointer-events:none;padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right));display:none}body[data-st=play] #hud,body[data-st=paused] #hud{display:block}.hudLeft,.hudRight{position:absolute;top:max(24px,env(safe-area-inset-top))}.hudLeft{left:24px}.hudRight{right:24px;text-align:right}.micro{font-size:9px;text-shadow:0 2px 6px #000}#distance{font-size:clamp(32px,7vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1}em{font-size:12px;color:var(--hot);font-style:normal}#health{color:var(--hot);font-size:17px;margin-top:8px;letter-spacing:.15em}.speed{margin-top:8px}.steer{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;letter-spacing:.23em;font-size:10px;color:#fff9;text-shadow:0 2px 8px #000}#warning{position:absolute;top:20%;left:0;right:0;text-align:center;color:#ffb88c;font-weight:900;font-size:11px;letter-spacing:.25em;opacity:0;transition:opacity .2s}#warning.show{opacity:1}#impact{position:absolute;inset:0;pointer-events:none;background:#ff673b;opacity:0;transition:opacity .15s}#impact.show{opacity:.45}h2{font-size:clamp(70px,15vw,130px);line-height:.82}#resultDistance{font-size:50px;font-weight:900}#best{font-size:11px;color:var(--muted);letter-spacing:.2em}#load,#err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c1118;z-index:20;letter-spacing:.15em;font-size:12px}#load.done{display:none}#err{display:none}#stat{display:none;position:absolute;bottom:4px;left:5px;color:white;background:#0009;font:11px monospace}.debug #stat{display:block}#ver{position:absolute;bottom:5px;right:8px;font:10px monospace;color:#ffffff70} @media(max-width:600px){.cover{align-items:flex-end;padding:0 26px max(60px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#08111bf5 0%,#08111bca 45%,#08111b22 100%)}h1{font-size:96px}.sideText{display:none}.caption{font-size:9px}.steer{bottom:25px}}

#sound{position:absolute;top:max(100px,calc(env(safe-area-inset-top) + 78px));right:20px;pointer-events:auto;width:auto;padding:8px 10px;margin:0;border:1px solid #ffffff55;background:#101820aa;color:#f7eee6;font-size:9px;letter-spacing:.1em}
#sound:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}

#pause{position:absolute;top:max(100px,calc(env(safe-area-inset-top) + 78px));right:112px;pointer-events:auto;width:38px;height:33px;display:grid;place-items:center;padding:0;margin:0;border:1px solid #ffffff55;background:#101820aa;color:#f7eee6;font-size:14px;letter-spacing:0}
#pauseScreen h2{font-family:system-ui,sans-serif;font-style:normal;font-size:clamp(42px,10vw,72px);letter-spacing:.04em;line-height:1.1}

#routeLegend{position:absolute;left:0;right:0;bottom:max(56px,calc(env(safe-area-inset-bottom) + 36px));display:flex;justify-content:center;gap:12px;opacity:0;transition:opacity .15s;font-size:10px;font-weight:800;letter-spacing:.06em;text-shadow:0 1px 5px #000;pointer-events:none}#routeLegend.show{opacity:1}#routeLegend span{background:#111c;padding:4px 7px;border-radius:3px}#routeLegend .dangerKey{color:#ff7764}#routeLegend .safeKey{color:#ffd478}

/* v0.6 演出: 章タイトル・字幕・ポップアップ・シネマバー */
.bars{position:absolute;inset:0;pointer-events:none}.bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .6s cubic-bezier(.2,.8,.2,1)}.bars i:first-child{top:0}.bars i:last-child{bottom:0}
body.cinema .bars i{height:9vh}
#chapter{position:absolute;left:0;right:0;top:30%;text-align:center;opacity:0;pointer-events:none;text-shadow:0 4px 24px #000}
#chapter.show{animation:chapterIn 3.4s ease forwards}
#chNo{font-size:11px;letter-spacing:.5em;color:var(--hot);font-weight:900}
#chName{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(44px,11vw,96px);font-weight:900;letter-spacing:.08em;margin:10px 0 2px}
#chEn{font-size:10px;letter-spacing:.6em;color:#e9c8a8}
#chLine{margin:22px auto 0;max-width:86vw;font-size:clamp(12px,2.6vw,16px);letter-spacing:.12em;line-height:1.8;color:#e6e1d8}
@keyframes chapterIn{0%{opacity:0;transform:scale(1.15);filter:blur(8px)}12%{opacity:1;transform:scale(1);filter:blur(0)}80%{opacity:1}100%{opacity:0;transform:scale(.98)}}
#subtitle{position:absolute;left:50%;bottom:calc(max(70px,env(safe-area-inset-bottom) + 60px));transform:translateX(-50%);max-width:88vw;padding:8px 14px;background:#000a;font-size:clamp(12px,3vw,15px);letter-spacing:.06em;line-height:1.6;opacity:0;transition:opacity .4s;text-align:center}
#subtitle.show{opacity:1}
#popup{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:clamp(34px,9vw,72px);letter-spacing:.02em;color:#fff;opacity:0;pointer-events:none;text-shadow:0 0 18px #ff6943,0 4px 0 #0008}
#popup[data-level="2"]{color:#ffe08a}#popup[data-level="3"]{color:#ff8a5c;font-size:clamp(46px,13vw,104px)}
#popup.show{animation:pop .9s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes pop{0%{opacity:0;transform:scale(2.2) skewX(-8deg)}15%{opacity:1;transform:scale(1) skewX(-8deg)}70%{opacity:1}100%{opacity:0;transform:translateY(-30px) skewX(-8deg)}}
#combo{position:absolute;right:24px;top:calc(max(24px,env(safe-area-inset-top)) + 92px);font-weight:900;font-style:italic;font-size:20px;color:#ffe08a;opacity:0;transition:opacity .3s;text-shadow:0 2px 8px #000}
#combo.show{opacity:1}
#stageLabel{position:absolute;left:50%;top:max(26px,env(safe-area-inset-top));transform:translateX(-50%);font-size:10px;letter-spacing:.3em;color:#e9c8a8;font-weight:800;text-shadow:0 2px 6px #000;white-space:nowrap}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0}
#flash.show.smash{animation:flash .35s ease-out;background:radial-gradient(circle,#ffd2a066,#ff5a2a33 60%,transparent)}
#flash.show.water{animation:flash .6s ease-out;background:radial-gradient(circle,transparent 30%,#bfe6ff77)}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
#resultChapter{margin-top:14px;font-weight:800;letter-spacing:.1em;color:#f8bd96}#resultStats{margin-top:8px}

/* v0.7 得点・メニュー */
#scoreLine{margin-top:6px;font-size:15px;font-weight:900;text-shadow:0 2px 6px #000}#scoreLine em{font-size:10px}#cellCount{color:#7fdcff;font-size:13px}
#scoreGain{margin-top:4px;font-weight:900;font-style:italic;color:#ffe08a;font-size:14px;opacity:0;text-shadow:0 2px 6px #000}
#scoreGain.show{animation:gain .7s ease-out forwards}@keyframes gain{0%{opacity:0;transform:translateX(-10px)}20%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
#menu{margin-top:8px;max-width:440px}#lvLine{margin-bottom:8px;color:#e9c8a8}
.tabs{display:flex;gap:4px}.tabs button{width:auto;margin:0;padding:7px 12px;background:#ffffff14;color:var(--ink);font-size:10px;letter-spacing:.15em}.tabs button.on{background:var(--hot);color:#1a1010}
.tab{display:none;background:#0008;padding:10px 12px;max-height:30vh;overflow:auto}.tab.on{display:block}
#garage{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:34px!important;height:34px;padding:0!important;margin:0!important;justify-content:center;border:2px solid #fff3!important;font-size:13px}.swatch.on{border-color:#fff!important;box-shadow:0 0 10px var(--hot)}
#carName{margin-top:6px}
#achList,#shardList{list-style:none;margin:0;padding:0;font-size:12px}#achList li,#shardList li{padding:4px 0;border-bottom:1px solid #ffffff12;opacity:.6}#achList li.done{opacity:1}#achList li.done b{color:#ffe08a}
#achList span,#shardList span{display:block;font-size:10px;color:var(--muted);line-height:1.6}#shardList li{opacity:1}
#resultScore{font-size:24px;font-weight:900;color:#ffe08a;margin-top:6px}#resultLv{margin-top:6px}
@media(max-width:600px){#menu{max-width:none}.tab{max-height:22vh}}

/* Keep the compact phone HUD readable while warnings and controls are active. */
@media (max-width:480px){
  #stageLabel{display:none}
  #warning{top:calc(max(100px,env(safe-area-inset-top) + 78px) + 44px);padding:0 12px;font-size:10px;letter-spacing:.12em}
}

/* 新バージョン通知(update.js) */
#updBar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;padding:8px 10px 8px 14px;border-radius:999px;background:rgba(13,17,23,.92);border:1px solid #ffcf4a;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.6)}
#updBar b{color:#ffcf4a}
#updBar button{margin-left:8px;padding:5px 12px;border-radius:999px;border:0;background:#ff4a2a;color:#fff;font-size:12px;font-weight:900;cursor:pointer}
#newsDlg{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:14px;background:rgba(4,6,9,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#newsDlg[hidden]{display:none}
#newsDlg .newsCard{width:min(92vw,420px);max-height:82vh;overflow:auto;background:#10151b;border:1px solid rgba(255,207,74,.45);border-radius:14px;padding:18px 18px 14px;color:#eef2f6;box-shadow:0 12px 40px rgba(0,0,0,.65)}
#newsDlg h2{font-size:17px;margin:0 0 10px;color:#ffcf4a}
#newsDlg h3{font-size:13px;margin:12px 0 4px;color:#ffe08a}
#newsDlg ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;color:#cfd8e0}
#newsClose{margin-top:14px;width:100%;padding:9px;border:0;border-radius:9px;background:#ff4a2a;color:#fff;font-weight:900;cursor:pointer}
#newsSet{display:flex;align-items:center;gap:10px;padding:10px 2px;font-size:13px;color:#eef2f6}
#newsSet small{color:var(--muted)}
#newsSet span{font-weight:700}
#newsSet button{margin-left:auto;padding:7px 14px;border:1px solid rgba(255,207,74,.5);border-radius:9px;background:transparent;color:#ffcf4a;font-weight:800;cursor:pointer}
#worldBox{width:min(92vw,430px);margin:10px auto 2px;padding:10px 14px 9px;background:rgba(10,14,20,.66);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#eef2f6;backdrop-filter:blur(3px)}
#worldBox .wTtl{font-size:13px;font-weight:800;letter-spacing:.04em}
#worldBox .wTtl b{color:#ffe08a;font-size:15px}
#worldBox .wBar{height:8px;margin:8px 0 6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
#worldBox .wBar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffb03a,#ff4a2a);transition:width .8s ease}
#worldBox .wNow{font-size:11.5px;color:#cfd8e0;line-height:1.5}
#boostBtn.cool{border-color:rgba(255,255,255,.18);background:conic-gradient(rgba(127,227,255,.5) calc(var(--g)*360deg),rgba(255,255,255,.05) 0);color:#9fb3c8;box-shadow:none;animation:none}

/* 更新通知の刷新: ゲーム全体の button ルールが漏れるので、ここで明示的に上書きする */
#updBar{display:flex;align-items:center;gap:10px;width:max-content;max-width:94vw;padding:7px 8px 7px 10px;border-radius:999px;background:rgba(8,11,17,.85);border:1px solid rgba(255,105,67,.55);box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f2f5f8;font-size:12px;letter-spacing:.05em;animation:updIn .45s cubic-bezier(.2,.9,.25,1.15)}
#updBar[hidden]{display:none}
#updBar .updTag{flex:none;font-size:9px;font-weight:900;letter-spacing:.18em;color:#14100c;background:linear-gradient(90deg,#ffb03a,#ff6943);padding:3px 7px 2px;border-radius:6px}
#updBar .updTxt{white-space:nowrap}
#updBar b{color:#ffb03a;font-weight:900}
#updBtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:8px 16px;border:0;border-radius:999px;background:linear-gradient(90deg,#ff7a3c,#ff4a2a);color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;box-shadow:0 4px 14px rgba(255,74,42,.45);cursor:pointer}
@keyframes updIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
#newsDlg .newsCard{border:1px solid rgba(255,255,255,.12);border-top:3px solid #ff6943;border-radius:16px;background:linear-gradient(180deg,#131922,#0c1118)}

/* みんなの走行距離をゾンビホールドの WORLD KILLS 風に派手に */
#worldBox{margin:0 0 14px;padding:15px 18px 13px;border-radius:16px;background:linear-gradient(165deg,rgba(46,29,11,.92),rgba(16,10,5,.95) 55%,rgba(24,14,6,.94));border:1px solid rgba(255,190,80,.5);box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 34px rgba(255,150,40,.14),inset 0 1px 0 rgba(255,210,110,.35),inset 0 -18px 30px rgba(255,120,30,.06);backdrop-filter:blur(6px)}
#worldBox .wTtl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.32em;color:#ffc95e;font-weight:900;text-shadow:0 0 12px rgba(255,160,50,.45)}
#worldBox .wTtl span{letter-spacing:.08em;font-size:10.5px;color:#ffe9bb;font-weight:800;background:rgba(255,170,60,.14);border:1px solid rgba(255,190,80,.35);padding:2px 8px;border-radius:99px;white-space:nowrap}
#worldBox .wBig{display:flex;align-items:baseline;gap:7px;margin-top:4px}
#worldBox #wKm{font-size:clamp(38px,11vw,50px);font-weight:900;line-height:1.05;letter-spacing:.01em;background:linear-gradient(180deg,#fff3c4 5%,#ffc95e 45%,#ff8a3a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,150,40,.55))}
#worldBox .wUnit{font-size:17px;font-weight:900;color:#ffb03a;text-shadow:0 0 10px rgba(255,150,40,.5)}
#worldBox .wBar{height:10px;margin:11px 0 8px;border-radius:99px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
#worldBox .wBar i{position:relative;overflow:hidden;background:linear-gradient(90deg,#ff5a2a,#ffb03a,#ffd76a);box-shadow:0 0 14px rgba(255,150,40,.8)}
#worldBox .wBar i::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:wShine 2.8s ease-in-out infinite}
@keyframes wShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
#worldBox .wDots{display:flex;justify-content:space-between;margin:0 1px 9px}
#worldBox .wDots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18)}
#worldBox .wDots i.done{background:#ffb03a;box-shadow:0 0 6px rgba(255,150,40,.7)}
#worldBox .wDots i.here{width:8px;height:8px;margin:-1.5px 0;background:#ffe9a8;box-shadow:0 0 10px rgba(255,200,80,.95);animation:wPulse 1.6s ease-in-out infinite}
@keyframes wPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
#worldBox .wNow{font-size:12.5px;color:#e9dfcd;letter-spacing:.03em}
#worldBox .wNow b{color:#fff;font-weight:900}
#worldBox .wNow em{font-style:normal;color:#ffb03a;font-weight:900}
#updBar{box-shadow:0 0 0 1px rgba(255,150,60,.22),0 10px 30px rgba(0,0,0,.55),0 0 26px rgba(255,105,43,.4)}
#worldBox .wNext{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,190,80,.22);font-size:11.5px;color:#cfc4ae;letter-spacing:.03em}
#worldBox .wNext em{font-style:normal;color:#ffd76a;font-weight:900}
#worldToast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);z-index:70;width:max-content;max-width:92vw;padding:12px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(38,24,10,.96),rgba(16,11,6,.97));border:1px solid rgba(255,190,70,.65);box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(255,150,40,.35);color:#f7ecd7;font-size:13px;line-height:1.7;text-align:center;letter-spacing:.04em;animation:updIn .45s cubic-bezier(.2,.9,.25,1.15);cursor:pointer}
#worldToast[hidden]{display:none}
#worldToast b{color:#ffd76a}

/* ガレージ: シートを低くして、回転プレビューの車がシートの上に見えるようにする */
#sheet[data-k="garage"]{background:linear-gradient(180deg,rgba(4,6,10,.02) 0%,rgba(4,6,10,.28) 34%,rgba(4,6,10,.88) 52%,rgba(4,6,10,.95) 100%)}
#sheet[data-k="garage"] .sheetBox{max-height:50vh}

/* ガレージの性能表示 */
.gStats{margin:10px 0 2px;display:grid;gap:5px}
.gStat{display:flex;align-items:center;gap:8px;font-size:11px;color:#aeb9c6;letter-spacing:.08em}
.gStat span{flex:none;width:52px;font-weight:700}
.gStat i{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.gStat i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff7a3c,#ffb03a)}
.gStat em{flex:none;width:40px;text-align:right;font-style:normal;font-weight:900;color:#8b96a5}
.gStat em.plus{color:#8be08b}
.gStat em.minus{color:#ff9a7a}