/* shader-game-kit / modules / progression / progression.css : トースト */
#toasts{position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:8px;z-index:30;pointer-events:none;max-width:min(300px,calc(100vw - 20px))}
.toast{background:rgba(15,25,35,.92);color:#eaf3f8;border:1px solid #2d4658;border-left:3px solid #4cc9de;padding:8px 12px;font:14px/1.4 system-ui,sans-serif;animation:toastIn .3s ease-out;transition:opacity .5s,transform .5s}
.toast small{display:block;font-size:10px;letter-spacing:.14em;color:#4cc9de;text-transform:uppercase}
.toast b{display:block;font-size:15px}
.toast span{display:block;font-size:12px;color:#9fb6c6}
.toast.out{opacity:0;transform:translateX(20px)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

#invert,#cityLook,#hardBtn,#qualityBtn{display:inline-block;margin:8px 6px 8px 0;padding:6px 12px;font:inherit;font-size:12px;letter-spacing:.1em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);border-radius:4px;cursor:pointer}#hardBtn[aria-pressed=true],#cityLook[aria-pressed=true],#invert[aria-pressed=true]{border-color:#ffb347;color:#ffb347}

/* v0.8 崩壊の波・ブースト・ミッション */
#chase{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 44px);transform:translateX(-50%);width:min(46vw,320px);text-align:center;font-size:11px;letter-spacing:.14em;color:#ffd7b0;pointer-events:none}
#chase .chaseBar{height:5px;margin-top:4px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
#chaseFill{display:block;height:100%;background:linear-gradient(90deg,#ff3b1f,#ffb347);transform-origin:left;transition:transform .15s}
body.danger #chase{color:#ff5a3c;animation:dangerPulse .5s infinite alternate}
body.danger::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 -12vh 14vh -4vh rgba(255,40,10,.55);animation:dangerPulse .5s infinite alternate}
@keyframes dangerPulse{from{opacity:.55}to{opacity:1}}
#missions{position:absolute;left:calc(env(safe-area-inset-left) + 16px);top:calc(env(safe-area-inset-top) + 156px);margin:0;padding:0;list-style:none;font-size:11px;line-height:1.7;color:rgba(255,255,255,.75);pointer-events:none}
#missions li.done{color:#ffd166}
#boostBtn{--g:0;position:absolute;right:calc(env(safe-area-inset-right) + 18px);bottom:calc(env(safe-area-inset-bottom) + 70px);width:78px;height:78px;border-radius:50%;border:2px solid rgba(255,255,255,.3);color:#fff;font:700 12px/1 inherit;letter-spacing:.12em;
 background:conic-gradient(#ffb347 calc(var(--g)*360deg),rgba(255,255,255,.08) 0);touch-action:none;cursor:pointer}
#boostBtn span{display:grid;place-items:center;position:absolute;inset:6px;border-radius:50%;background:rgba(10,14,18,.85)}
#boostBtn.ready{border-color:#ffb347;box-shadow:0 0 18px #ff9a2f;animation:dangerPulse .4s infinite alternate}
#boostBtn.on{border-color:#7fe3ff;background:conic-gradient(#7fe3ff calc(var(--g)*360deg),rgba(255,255,255,.08) 0)}
body:not([data-st=play]) #chase,body:not([data-st=play]) #missions,body:not([data-st=play]) #boostBtn{display:none}
#flash.show.boost{animation:flash .5s ease-out;background:radial-gradient(circle,rgba(127,227,255,.0) 30%,rgba(127,227,255,.45))}
body.finale .bars i{height:7vh}

/* 擬音(映画・漫画風の効果音の文字) */
#sfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.sfxWord{--r:0deg;--s:1;--c:#fff;--g:#ff6a2a;position:absolute;opacity:0;white-space:nowrap;transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s));
 font-family:'Dela Gothic One','Hiragino Kaku Gothic StdN','Yu Gothic',sans-serif;font-weight:900;font-style:italic;font-size:clamp(26px,5.4vw,64px);letter-spacing:-.02em;line-height:1;
 color:var(--c);-webkit-text-stroke:.09em #12070300;paint-order:stroke fill;text-shadow:.05em .06em 0 #120703,-.02em -.02em 0 #120703,.04em -.03em 0 #120703,-.03em .05em 0 #120703,0 0 .35em var(--g),0 0 1em var(--g)}
.sfxWord.show{animation:sfxPop .95s cubic-bezier(.15,1.4,.3,1) forwards}
.sfxWord.show.shake{animation:sfxPop .95s cubic-bezier(.15,1.4,.3,1) forwards,sfxShake .08s steps(2) 6}
@keyframes sfxPop{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(calc(var(--s)*2.6));filter:blur(4px)}
 12%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(calc(var(--s)*.92));filter:blur(0)}
 22%{transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s))}
 70%{opacity:1}
 100%{opacity:0;transform:translate(-50%,-62%) rotate(var(--r)) scale(calc(var(--s)*1.12));filter:blur(1px)}}
@keyframes sfxShake{0%{margin-left:-4px;margin-top:2px}100%{margin-left:4px;margin-top:-2px}}
.sfxWord[data-tone=crash]{--c:#ffe9c2;--g:#ff3b10}
.sfxWord[data-tone=just]{--c:#fff6a8;--g:#ffb000}
.sfxWord[data-tone=near]{--c:#e9f6ff;--g:#4fb6ff}
.sfxWord[data-tone=boost]{--c:#dffaff;--g:#29c8ff}
.sfxWord[data-tone=rumble]{--c:#ffd0b0;--g:#a8240a;letter-spacing:.06em}
.sfxWord[data-tone=water]{--c:#e6fbff;--g:#2a9dff}
.sfxWord[data-tone=fall]{--c:#d8d8e8;--g:#5a4cff}
.sfxWord[data-tone=hit]{--c:#fff;--g:#ff8a3a}
@media (prefers-reduced-motion:reduce){.sfxWord.show,.sfxWord.show.shake{animation:sfxFade .9s forwards}@keyframes sfxFade{0%,70%{opacity:1}100%{opacity:0}}}

#stageSel{display:block;margin:6px 0;padding:5px 8px;font:inherit;font-size:12px;color:#fff;background:rgba(0,0,0,.6);border:1px solid #ffb347;border-radius:4px}

#resultReason{margin:14px 0 4px;font:900 italic clamp(26px,5vw,44px)/1.1 'Dela Gothic One',sans-serif;color:#ff5a3c;text-shadow:0 0 18px rgba(255,60,20,.5);letter-spacing:.02em}
#resultWhy{margin:0 0 14px;font-size:13px;line-height:1.6;color:rgba(255,235,220,.85);max-width:30em}
.mouseOnly{display:none}
@media (hover:hover) and (pointer:fine){.mouseOnly{display:inline}.touchOnly{display:none}}
#hardBtn:disabled{opacity:.5;cursor:default}

/* タイトル: 文字の後ろに暗い板を敷いて、走る街の上でも読めるようにする */
#title .titleContent{background:rgba(6,10,18,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:22px 22px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);max-width:min(620px,100%)}
#title{background:linear-gradient(0deg,#08111bcc 0%,#08111b55 60%,#08111b00 100%)!important}
#title h1,#title p,#title .caption{text-shadow:0 2px 8px rgba(0,0,0,.9)}
#title p{color:#fff}#title .caption{color:rgba(240,245,255,.92)}
#watchDemo{display:block;margin:10px 0 4px;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;padding:9px 16px;border-radius:999px;font:700 13px/1 inherit;letter-spacing:.08em;cursor:pointer}
body.demoOnly #title .titleContent{opacity:0;pointer-events:none;transition:opacity .4s}
body.demoOnly #title{background:none!important}

.skillHead{margin:4px 0 8px;color:#ffcf6a}
.skill{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;text-align:left;margin:0 0 6px;padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;cursor:pointer;font:inherit}
.skill b{font-size:14px}.skill span{grid-column:1;font-size:11px;opacity:.75}.skill i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:11px;color:#ff8a6a}
.skill.on{border-color:#ff7a4a;background:rgba(255,110,60,.18);box-shadow:0 0 12px rgba(255,110,60,.35)}
.skill:disabled{opacity:.45;cursor:default}

@keyframes urgePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,90,40,.9)}50%{transform:scale(1.18);box-shadow:0 0 0 18px rgba(255,90,40,0)}}
#boostBtn.urge{animation:urgePulse .5s ease-in-out infinite;background:#ff4a1c!important;color:#fff!important}
body.urgeBoost::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 80px rgba(255,90,30,.55);animation:urgeGlow .5s infinite}
@keyframes urgeGlow{50%{opacity:.3}}
#menu [hidden]{display:none!important}

/* ---- 軽いタイトル: 下にロゴとボタンだけ。上はデモが見える ---- */
body.slimTitle #title{align-items:flex-end;padding:0 16px max(22px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#060a12e6 0%,#060a1299 28%,#060a1200 55%)!important}
body.slimTitle #title .titleContent{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0;width:100%;max-width:520px}
body.slimTitle #title .titleContent>p,body.slimTitle #title .titleContent>.rule,body.slimTitle #title .eyebrow{display:none}
body.slimTitle #title h1{font-size:clamp(44px,12vw,84px);margin:0 0 10px}
body.slimTitle #lvLine{margin:0 0 10px;font-size:11px;opacity:.85}
body.slimTitle #start{width:100%}
body.slimTitle #watchDemo{display:inline-block;margin:10px 0 0;padding:6px 12px;font-size:11px;border-color:rgba(255,255,255,.25)}
.iconBar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.iconBar button{background:rgba(10,14,22,.7);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:#fff;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font:inherit}
.iconBar span{font-size:20px;line-height:1}.iconBar small{font-size:9px;letter-spacing:.04em;opacity:.8;white-space:nowrap}
#sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}
.sheetBox{width:100%;max-width:560px;max-height:78vh;overflow:auto;background:#0c121c;border:1px solid rgba(255,255,255,.12);border-radius:16px 16px 0 0;padding:14px 16px max(20px,env(safe-area-inset-bottom));animation:sheetUp .22s ease-out}
@media (min-width:700px){#sheet{align-items:center}.sheetBox{border-radius:16px}}
@media (min-width:700px){#sheet[data-k="garage"]{justify-content:flex-end;padding-right:22px}#sheet[data-k="garage"] .sheetBox{max-width:400px}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}}
.sheetHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.sheetHead b{font-size:16px;letter-spacing:.08em}
#sheetClose{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px}
#sheetBody>*{display:block}#sheetBody button#cityLook,#sheetBody button#hardBtn,#sheetBody button#qualityBtn{width:100%;margin:0 0 8px}
#sheetBody .caption{display:block;font-size:13px;line-height:1.8;margin:0 0 8px}
.rankList{list-style:none;padding:0;margin:8px 0}.rankList li{display:grid;grid-template-columns:28px 1fr;gap:0 8px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.rankList b{grid-row:1/3;align-self:center;font-size:18px;color:#ffcf6a;text-align:center}.rankList span{font-weight:700}.rankList small{opacity:.65;font-size:11px}
.rankList li.me{background:rgba(255,110,60,.15)}
body.slimTitle #title .iconBar button{width:auto;margin:0;padding:8px 0 6px;justify-content:center;letter-spacing:0;font-weight:700}
body.slimTitle #start{margin:0}
#title #sheetClose{width:auto;margin:0;padding:4px 8px;background:none;color:#fff}
#title .skill{display:grid;width:100%;margin:0 0 6px;letter-spacing:0;font-weight:400}
#title #sheetBody button#cityLook,#title #sheetBody button#hardBtn,#title #sheetBody button#qualityBtn{margin:0 0 8px;width:100%;justify-content:center}
body.slimTitle #title #watchDemo{width:auto;margin:10px 0 0;justify-content:center}

#rankEntry{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}#rankEntry[hidden]{display:none}
#rankName{background:#0c121c;border:1px solid rgba(255,255,255,.25);color:#fff;padding:9px 10px;border-radius:8px;font:inherit;width:12em}
#result #rankSend{width:auto;margin:0;padding:9px 16px}#rankMsg{font-size:12px;color:#ffcf6a}
.rankTabs{display:flex;gap:6px;margin-bottom:8px}#title .rankTabs button{width:auto;margin:0;padding:6px 12px;background:#ffffff14;color:#fff;font-size:11px;letter-spacing:.05em}
#title .rankTabs button.on{background:var(--hot);color:#1a1010}
#onlineRank ol{list-style:none;padding:0;margin:0;counter-reset:r}#onlineRank li{counter-increment:r;display:grid;grid-template-columns:28px 1fr auto;gap:0 8px;padding:7px 6px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
#onlineRank li::before{content:counter(r);color:#ffcf6a;font-weight:900;text-align:center}#onlineRank small{grid-column:2/4;opacity:.5;font-size:10px}#onlineRank li.me{background:rgba(255,110,60,.15)}

#skillChip{position:fixed;left:12px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:6;font-size:11px;font-weight:700;color:#ffd27a;background:rgba(10,14,22,.6);border:1px solid rgba(255,210,122,.4);padding:4px 9px;border-radius:999px;pointer-events:none}
#skillChip[hidden],body:not([data-st=play]):not([data-st=paused]) #skillChip{display:none}
/* ---- タイトルのステータスカード ---- */
#title .statCard{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:10px 14px 10px 10px;background:linear-gradient(135deg,rgba(18,24,36,.82),rgba(10,14,22,.66));border:1px solid rgba(255,255,255,.1);border-radius:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:0;font-size:inherit;opacity:1}
.lvBadge{--f:0;position:relative;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#141b28 79%,transparent 80% 100%),conic-gradient(var(--hot,#ff6a3d) calc(var(--f)*360deg),rgba(255,255,255,.12) 0)}
.lvBadge b{font:900 22px/1 'Dela Gothic One',sans-serif;color:#fff}.lvBadge small{font-size:7px;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-top:2px}
.statMain{flex:1;min-width:0}
.xpRow{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.55);font-weight:700}
.xpRow span:last-child{letter-spacing:.04em;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.xpBar{height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin:5px 0 8px;overflow:hidden}
.xpBar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#ff3d6e,var(--hot,#ff6a3d),#ffc65a);box-shadow:0 0 8px rgba(255,106,61,.7)}
.statNums{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.statNums small{display:block;font-size:8px;letter-spacing:.18em;color:rgba(255,255,255,.5);font-weight:700}
.statNums b{display:block;font:900 17px/1.15 'Dela Gothic One',sans-serif;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statNums em{font-style:normal;color:#5fe3ff;font-size:12px;margin-right:4px;vertical-align:2px}
/* ---- 結果画面 ---- */
body.slimResult #result{align-items:flex-end;padding:0 16px max(20px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#060a12f2 0%,#060a12cc 55%,#060a1255 100%)}
body.slimResult #result .titleContent{width:100%;max-width:520px;max-height:100%;overflow:auto;padding-top:16px}
body.slimResult #result h2{font-size:clamp(34px,10vw,56px);line-height:.9;margin:6px 0 10px}
body.slimResult #result h2 br{display:none}
body.slimResult #resultReason{display:inline-block;margin:0 0 6px;padding:5px 12px;font-size:16px;border-radius:999px;background:rgba(255,60,30,.16);border:1px solid rgba(255,90,60,.55);text-shadow:none}
body.slimResult #resultWhy{font-size:12px;margin:0 0 12px;color:rgba(255,235,225,.75)}
body.slimResult #result .micro,body.slimResult #resultDistance,body.slimResult #resultScore,body.slimResult #resultLv,body.slimResult #best,body.slimResult #resultChapter,body.slimResult #resultStats{display:none}
.scoreCard{position:relative;padding:14px 16px 12px;border-radius:16px;background:linear-gradient(135deg,rgba(255,106,61,.2),rgba(18,24,36,.85) 55%);border:1px solid rgba(255,140,90,.35);margin-bottom:10px;overflow:hidden}
.scoreCard.rec{border-color:#ffc65a;box-shadow:0 0 24px rgba(255,198,90,.25)}
.scTop{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.2em;font-weight:700;color:rgba(255,255,255,.6)}
.scTop em{font-style:normal;color:#1a1010;background:#ffc65a;padding:3px 8px;border-radius:4px;letter-spacing:.12em;animation:urgeGlow 1s infinite}
.scVal{display:block;font:900 clamp(40px,12vw,60px)/1.05 'Dela Gothic One',sans-serif;color:#fff;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.scVal small{font-size:.35em;margin-left:6px;color:rgba(255,255,255,.7)}
.scSub{display:flex;gap:18px;font-size:14px;font-weight:700;color:#fff}.scSub i{display:block;font-style:normal;font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.5)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.tiles div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:8px 10px;border-radius:10px;background:rgba(14,19,29,.8);border:1px solid rgba(255,255,255,.08)}
.tiles i{grid-row:1/3;font-style:normal;font-size:16px;color:var(--hot,#ff6a3d);width:18px;text-align:center}
.tiles b{font:900 18px/1.1 'Dela Gothic One',sans-serif;color:#fff}.tiles b small{font-size:11px;opacity:.6}
.tiles small{font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.05em;white-space:nowrap}
body.slimResult #result .statCard{margin:0 0 12px}
body.slimResult #again{width:100%;margin:0}
body.slimResult #rankEntry{margin:0 0 10px}
/* 結果画面の手直し */
body.slimResult #resultReason{font:900 15px/1.2 'Dela Gothic One',sans-serif;color:#fff;background:#e8392a;border:0;box-shadow:0 0 16px rgba(232,57,42,.5);letter-spacing:.06em}
.statCard{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;background:linear-gradient(135deg,rgba(18,24,36,.82),rgba(10,14,22,.66));border:1px solid rgba(255,255,255,.1);border-radius:14px}
.scVal small,.tiles b small{font-family:inherit;font-weight:700}
/* ブースト */
@keyframes denyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
#boostBtn.deny{animation:denyShake .35s}
@keyframes boostFlash{0%{opacity:.9}100%{opacity:0}}
body.boostFlash::before{content:'';position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.85),rgba(120,220,255,.5) 40%,transparent 75%);animation:boostFlash .45s ease-out forwards}
@keyframes boostLines{from{background-position:0 0}to{background-position:0 -400px}}
body.boosting::after{content:'';position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,transparent 35%,rgba(90,210,255,.35) 75%,rgba(40,120,255,.55) 100%),repeating-conic-gradient(from 0deg at 50% 55%,rgba(255,255,255,.0) 0deg 4deg,rgba(200,240,255,.22) 4.4deg 4.8deg);
  -webkit-mask:radial-gradient(ellipse at 50% 55%,transparent 30%,#000 70%);mask:radial-gradient(ellipse at 50% 55%,transparent 30%,#000 70%);animation:urgeGlow .18s infinite}
body.boosting #boostBtn{box-shadow:0 0 30px rgba(90,210,255,.9);transform:scale(1.08)}
#result #toTitle{display:block;width:100%;margin:8px 0 0;padding:12px;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;text-align:center;font-size:12px;letter-spacing:.12em}
body.slimResult #result #resultReason{font:800 15px/1.3 system-ui,-apple-system,'Hiragino Sans','Noto Sans JP',sans-serif!important;text-shadow:none!important;filter:none!important;-webkit-text-stroke:0!important;transform:none!important;color:#fff!important}
.scVal small,.tiles b small{font:700 14px system-ui,-apple-system,'Hiragino Sans','Noto Sans JP',sans-serif!important}
body.slimResult #result .titleContent{display:flex;flex-direction:column}
body.slimResult #again,body.slimResult #result #toTitle{display:inline-flex}
body.slimResult #result .btnRow{display:grid;grid-template-columns:2fr 1fr;gap:8px}
body.slimResult #result .btnRow #toTitle{margin:0;align-items:center;justify-content:center}

body.slimResult #result #resultReason{align-self:flex-start}
#routeBox{margin:0 0 10px;padding:10px 12px 12px;border-radius:14px;background:rgba(12,17,26,.85);border:1px solid rgba(255,255,255,.1)}
.rbHead{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.18em;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:6px}
.rbLeg{letter-spacing:.06em;display:flex;align-items:center;gap:4px}.rbLeg i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-left:6px}
.lg-b{background:#5fe3ff}.lg-h{background:#ff3b3b}.lg-n{background:#ffd25a;width:5px!important;height:5px!important;border-radius:50%!important}
#routeCv{display:block;width:100%}
.tips{display:grid;gap:6px;margin-top:8px}
.tips div{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:12px;line-height:1.5;color:rgba(255,255,255,.85)}
.tips b{font-size:10px;letter-spacing:.06em;color:#1a1010;background:#ffc65a;padding:2px 7px;border-radius:4px;white-space:nowrap;margin-top:1px}
/* ---- スキル画面 ---- */
#skillTab .skillHead{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff}
.shSlots{display:flex;gap:6px}.shSlots i{width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(255,255,255,.25)}
.shSlots i.on{background:var(--hot,#ff6a3d);border-color:var(--hot,#ff6a3d);box-shadow:0 0 10px rgba(255,106,61,.6)}.shSlots i.lock{opacity:.25;border-style:dashed}
.shRate{grid-row:1/3;grid-column:2;text-align:right}.shRate small{display:block;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.shRate b{font:900 24px/1 'Dela Gothic One',sans-serif}.shRate.down b{color:#ff9a7a}.shRate.up b{color:#7dffb0}
.shInfo{font-size:10px;color:rgba(255,255,255,.55)}
.shFilter{grid-column:1/3;display:flex;gap:6px;margin-top:2px}
#title .shFilter button{width:auto;margin:0;padding:5px 12px;font-size:11px;letter-spacing:.04em;background:#ffffff12;color:#fff;border-radius:999px}
#title .shFilter button.on{background:#fff;color:#111}
.skill.risk{border-color:rgba(255,80,80,.35);background:rgba(255,50,50,.06)}.skill.risk i{color:#7dffb0}
.skill.risk.on{border-color:#ff4a4a;background:rgba(255,60,60,.2);box-shadow:0 0 12px rgba(255,60,60,.4)}
.skillMore{text-align:center;margin:6px 0;opacity:.6}
#hud #boostBtn{pointer-events:auto;z-index:20;touch-action:none}
.skill i.pen-hp{color:#ff6b6b}.skill i.pen-gauge{color:#7fe3ff}.skill i.pen-chase{color:#ffb347}.skill i.pen-xp{color:#c9a7ff}.skill i.pen-combo{color:#ffd25a}.skill i.pen-score{color:#ff8a6a}.skill i.pen-bonus{color:#7dffb0}
/* ---- 結果画面: スクロールしない詰めたレイアウト ---- */
body.slimResult #result{padding:0 14px max(14px,env(safe-area-inset-bottom))}
body.slimResult #result .titleContent{overflow:visible;padding-top:0}
body.slimResult #result .eyebrow{display:none}
body.slimResult #result h2{font-size:clamp(26px,8vw,40px);margin:0 0 6px;display:inline-block;vertical-align:middle;margin-right:10px}
body.slimResult #result #resultReason{display:inline-block;vertical-align:middle;margin:0 0 6px;font-size:13px!important;padding:4px 10px}
body.slimResult #resultWhy{font-size:11px;margin:0 0 8px;line-height:1.45}
.scoreCard{padding:10px 14px;margin-bottom:8px}
.scVal{font-size:clamp(34px,10vw,48px);margin:2px 0 4px}
.scSub{font-size:12px}
#routeBox{padding:9px 12px 10px;margin-bottom:8px}
.rbHead{margin-bottom:4px}.rbSum{letter-spacing:.02em;font-size:10px;color:rgba(255,255,255,.7)}.rbSum b{font-weight:800}
.c-h{color:#ff4a4a}.c-n{color:#ffd25a}.c-b{color:#5fe3ff}
.track{position:relative;padding:14px 0 0}
.marks{position:absolute;left:0;right:0;top:0;height:14px}
.marks i{position:absolute;transform:translateX(-50%);font-style:normal}
.mk-n{top:6px;width:4px;height:4px;border-radius:50%;background:#ffd25a}
.mk-h{top:-2px;color:#ff4a4a;font-size:13px;font-weight:900;text-shadow:0 0 6px rgba(255,60,60,.8)}
.bar{position:relative;height:16px;border-radius:8px;background:rgba(255,255,255,.08)}
.bar span{position:absolute;top:0;bottom:0;opacity:.85;overflow:hidden}
.bar span:first-child{border-radius:8px 0 0 8px}
.bar em{font-style:normal;font-size:9px;font-weight:800;color:#fff;padding-left:5px;line-height:16px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.bar .flag{position:absolute;top:-3px;transform:translateX(-60%);font-style:normal;font-size:16px}
.boosts{position:relative;height:5px;margin-top:3px}.boosts i{position:absolute;top:0;height:5px;border-radius:3px;background:#5fe3ff;box-shadow:0 0 6px #5fe3ff}
.ends{display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.45);margin-top:2px}
.tips{margin-top:6px}.tips div{font-size:11px;line-height:1.45}
.tiles{grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.tiles div{display:flex;flex-direction:column;align-items:center;padding:6px 2px;gap:1px;text-align:center}
.tiles i{font-size:12px;width:auto}.tiles b{font-size:15px}.tiles small{font-size:8px}
body.slimResult #result .statCard{padding:6px 10px;gap:10px;margin:0 0 8px}
body.slimResult #result .lvBadge{width:40px;height:40px}body.slimResult #result .lvBadge b{font-size:15px}body.slimResult #result .lvBadge small{display:none}
body.slimResult #result .statNums b{font-size:13px}body.slimResult #result .xpBar{margin:4px 0 5px}
body.slimResult #again{padding:14px 18px}
body.slimResult #result .btnRow #toTitle{font-size:11px;letter-spacing:.04em;white-space:nowrap;padding:12px 6px}

/* 読み込み */
#load .lwrap{width:min(320px,76vw)}
#load .ltitle{font:900 italic 34px/1 'Dela Gothic One',sans-serif;letter-spacing:.02em;color:#fff;margin-bottom:18px}
#load .lbar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
#load .lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff3d6e,#ff6a3d,#ffc65a);box-shadow:0 0 10px rgba(255,106,61,.8);transition:width .2s linear}
#load .lrow{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.65)}
#load .lrow b{font:900 18px/1 'Dela Gothic One',sans-serif;color:#fff;letter-spacing:0}
/* 初回の名前入力・設定の名前欄・オンライン順位 */
#nameAsk{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:16px}
#nameAsk[hidden]{display:none}
.naBox{width:min(360px,100%);background:#0c121c;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;animation:sheetUp .22s ease-out}
.naT{font:900 22px/1 'Dela Gothic One',sans-serif;color:#fff;margin-bottom:8px}.naBox p{font-size:12px;color:rgba(255,255,255,.65);margin:0 0 14px;line-height:1.5}
.naBox input,#nameSet input{width:100%;box-sizing:border-box;background:#060a12;border:1px solid rgba(255,255,255,.25);color:#fff;padding:12px;border-radius:10px;font:700 16px system-ui,sans-serif}
.naRow{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:12px}
.naRow button{width:auto;margin:0;padding:12px;justify-content:center;font-size:12px;letter-spacing:.04em}
.naSkip{background:none!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}
#nameSet{display:block;margin:0 0 12px}#nameSet small{display:block;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-bottom:6px}
.onRank{font-size:10px;letter-spacing:.1em;color:#7fe3ff;font-weight:800;margin-left:auto;margin-right:8px}
#sheetBody [hidden]{display:none!important}
body.slimResult #result .btnRow{grid-template-columns:1.6fr .8fr 1fr}
body.slimResult #result .btnRow #shareBtn{order:2;width:auto;margin:0;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#1d9bf0;color:#fff;font-size:11px;letter-spacing:.04em}
body.slimResult #result .btnRow #toTitle{order:3}
#watchDemo{display:none!important}

@media (max-width:480px){
  #chase{width:min(37vw,250px)}
  #missions{top:calc(max(100px,env(safe-area-inset-top) + 78px) + 82px);font-size:10px;line-height:1.5}
}
/* ガレージ: 車を見比べる */
#garage .gCar{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
#garage .gArrow{flex:0 0 48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:28px;line-height:1;cursor:pointer}
#garage .gInfo{flex:1;text-align:center;min-width:0}
#garage .gInfo small{display:block;font-size:11px;letter-spacing:.12em;color:#9aa7b4}
#garage .gInfo b{display:block;font-size:20px;color:#fff;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#garage .gUse{width:100%;height:48px;border:0;border-radius:12px;background:#ff6a3d;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
#garage .gUse:disabled{background:rgba(255,255,255,.08);color:#c9d2db;cursor:default}
#garage .gUse.on{background:rgba(255,106,61,.18);color:#ffb59c}
#garage .gList{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
#garage .gList button{height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#dfe6ee;font-size:12px;font-weight:700;cursor:pointer}
#garage .gList button.cur{border-color:#ff6a3d;background:rgba(255,106,61,.2);color:#fff}
#garage .gList button.eq{box-shadow:inset 0 -3px 0 #ff6a3d}
#garageTab.tab{max-height:none;background:none;padding:0}
#garage{display:block}
#garage button{margin:0;padding:0;letter-spacing:normal;justify-content:center;align-items:center;display:flex}
#garage .gUse{width:100%}
#garage .gList button{width:auto;min-width:0}
/* 車の読み込み中 */
#carLoad{position:fixed;left:50%;top:32%;transform:translate(-50%,-50%);z-index:200;padding:10px 18px;border-radius:999px;background:rgba(10,14,20,.78);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;letter-spacing:.08em;pointer-events:none}
#carLoad[hidden]{display:none}
/* ガレージ以外のシート(スキル・ランキング・設定など)は画面の 9 割 */
#sheet:not([data-k="garage"]) .sheetBox{max-width:none;height:90%;max-height:none;display:flex;flex-direction:column}
#sheet:not([data-k="garage"]) #sheetBody{flex:1;overflow:auto}
#sheet:not([data-k="garage"]) .tab{max-height:none}
@media (min-width:700px){#sheet:not([data-k="garage"]) .sheetBox{max-width:720px;margin:0 auto;height:90%}}
/* 結果画面: 縦横とも画面の中央に置く */
body.slimResult #result{align-items:center;justify-content:center;padding-top:max(14px,env(safe-area-inset-top));background:radial-gradient(ellipse at center,#060a12e6 0%,#060a12cc 60%,#060a1299 100%)}
/* ゴール(脱出成功) */
body[data-st=goal] #goalScreen{display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#1a1030e0 0%,#060a12d0 70%)}
#goalScreen .titleContent{display:flex;flex-direction:column;align-items:center}
#goalScreen h2{font-family:'Dela Gothic One',system-ui,sans-serif;font-style:normal;font-size:clamp(44px,12vw,88px);line-height:1.1;letter-spacing:.02em;color:#fff;text-shadow:0 0 30px #ff3355aa;margin:12px 0}
#goalScreen p{font-size:15px;line-height:1.8;letter-spacing:.06em;margin:0 0 10px}
#goalBonus{font:800 15px system-ui,sans-serif;color:#ffd36b;letter-spacing:.06em;margin:4px 0 6px}
#goalScreen button{margin:14px 0 0;width:min(320px,80vw)}
#goalEnd{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;justify-content:center}
body.cleared #result #resultReason{background:#1d9b6a}