:root{font-family:'Yu Gothic','Hiragino Kaku Gothic ProN',system-ui,sans-serif;color:#1c243b;background:#b4e3ed;font-synthesis:none;--purple:#872be4;--ink:#1c243b;--gold:#f4ba39}
*{box-sizing:border-box}body{margin:0;overflow:hidden;touch-action:none;user-select:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #6722e8;outline-offset:4px}[hidden]{display:none!important}#world{position:fixed;inset:0;display:block;width:100%;height:100%}#brand{position:fixed;top:30px;left:40px;z-index:5;display:flex;flex-direction:column;gap:4px;pointer-events:none}#brand b{font-size:14px;letter-spacing:.16em}#brand span{font-size:8px;letter-spacing:.24em;opacity:.52}.screen{position:fixed;inset:0;background:linear-gradient(90deg,rgba(240,250,250,.96),rgba(240,250,250,.78) 27%,transparent 62%);display:flex;align-items:center;pointer-events:none}.intro{margin:20px 0 0 7%;width:46%;pointer-events:auto}.kicker{font-size:10px;letter-spacing:.25em;font-weight:800;color:#647779;margin:0 0 25px}h1{font-size:clamp(40px,5.8vw,85px);line-height:1.26;letter-spacing:-.07em;margin:0;font-weight:900}h1 em{font-style:normal;color:var(--purple)}.subtitle{font-size:17px;letter-spacing:.28em;font-weight:800;margin:12px 0 25px}.lead{font-size:14px;line-height:1.9;margin:0 0 26px;font-weight:600}.primary{background:var(--purple);border-radius:7px;color:white;padding:19px 32px;font-weight:800;font-size:16px;box-shadow:0 5px 0 #56258b,0 13px 28px #872be425;transition:transform .12s,background .12s;min-width:245px}.primary:hover{background:#983aea;transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #56258b}.primary:disabled{opacity:.6;cursor:wait}.how{display:flex;gap:14px;align-items:center;margin:25px 0 12px;font-size:11px;flex-wrap:wrap}.how>span{display:flex;align-items:center;gap:6px}kbd{font-family:inherit;font-size:14px;font-weight:900;background:#ffffffb3;border:1px solid #89979c66;border-bottom:3px solid #89979c66;border-radius:4px;padding:3px 8px}.hint{font-size:10px;line-height:1.9;color:#586a73}.model-link{display:inline-block;color:#5c4474;font-size:11px;text-underline-offset:4px;margin-top:9px}.flight-tag{position:absolute;right:40px;bottom:60px;display:flex;flex-direction:column;gap:8px;text-align:right;text-shadow:0 1px 6px white}.flight-tag span{font-size:10px;letter-spacing:.18em}.flight-tag b{font-size:20px}.flight-tag small{font-size:10px;letter-spacing:.08em}footer{position:fixed;bottom:15px;left:30px;font-size:9px;opacity:.60;pointer-events:none}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 1px 6px #fff9}.distance{position:absolute;left:30px;top:23px}.distance small{display:block;font-size:9px;letter-spacing:.14em}.distance b{font-size:54px;letter-spacing:-.07em;line-height:1.1;font-variant-numeric:tabular-nums}.distance>span{font-size:14px;margin-left:5px}.route{position:absolute;top:28px;left:50%;transform:translateX(-50%);min-width:200px;text-align:center}.route>span{display:block;font-size:10px;letter-spacing:.25em;margin-bottom:5px}.route>b{font-size:13px}.track{height:3px;background:#15223622;margin-top:10px;overflow:hidden}.track i{display:block;background:var(--purple);height:100%;width:0}.status{position:absolute;right:24px;top:25px;display:flex;align-items:center;gap:8px}.status>span{color:#8840c5;font-size:14px;letter-spacing:3px;margin-right:8px}.status button{width:33px;height:33px;border-radius:50%;background:#fffc;pointer-events:auto;color:var(--ink)}.speed{position:absolute;right:30px;bottom:140px;text-align:right}.speed b{font-size:46px;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.speed>span{font-size:10px;margin-left:5px}.speed small{display:block;font-size:11px;color:#792cc7;font-weight:800;letter-spacing:.14em}.lift{position:absolute;left:30px;bottom:154px;font-size:8px;letter-spacing:.18em}.lift>div{height:58px;width:5px;background:#fff8;margin-top:10px;position:relative}.lift i{position:absolute;bottom:0;width:100%;height:40%;background:var(--purple)}#controls{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);width:min(620px,90vw);display:flex;align-items:center;justify-content:space-between;gap:18px}#controls>button{position:relative;background:#f8fcffcf;backdrop-filter:blur(8px);box-shadow:0 4px 0 #44375c33,0 8px 24px #25345514;border:1px solid #fff8;color:var(--ink);width:180px;height:77px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:13px;overflow:hidden;touch-action:none}#controls>button>span{font-size:10px;letter-spacing:.16em;font-weight:800}#controls>button>kbd{font-size:23px;border:0;background:transparent}#controls>button>i{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#a041eb;transform:scaleX(0);transform-origin:left}#controls>button.active{background:#e6c9ff;transform:translateY(3px);box-shadow:0 1px 0 #44375c33}.rhythm{flex:1;text-align:center}.rhythm>b{font-size:9px;letter-spacing:.25em}.rhythm>div{margin-top:9px;height:4px;background:#fff9}.rhythm i{display:block;height:100%;width:0;background:var(--purple);transition:width .07s}#toast{position:fixed;left:50%;top:18%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;white-space:pre-line;text-align:center;font-weight:900;font-size:25px;color:#243d45;text-shadow:0 2px 16px white;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}#feedback{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);font-size:26px;font-weight:900;letter-spacing:.1em;color:#fff4a6;text-shadow:0 2px 0 #845b12,0 4px 20px #9d650544;pointer-events:none;opacity:0}#feedback.show{animation:pop .8s ease-out}@keyframes pop{0%{opacity:0;transform:translate(-50%,0) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%)}}#vignette{position:fixed;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 130px #b5f5ff88;transition:opacity .2s}#flash{position:fixed;inset:0;pointer-events:none;background:#d7faff;opacity:0}.overlay{position:fixed;inset:0;background:#eff8f0d9;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:20;text-align:center}.overlay h2{font-size:clamp(36px,8vw,86px);letter-spacing:-.07em;margin:0 0 15px}.overlay h2 small{font-size:20px;letter-spacing:0}.overlay p:not(.kicker){font-size:14px;padding:0 20px;line-height:1.7}.overlay .primary{margin:15px 0}.text-button{background:transparent;font-size:12px;color:#586a73;padding:15px}.result-stats{font-variant-numeric:tabular-nums;color:#635c73}.overlay a{font-size:12px;margin:15px}
@media(max-width:720px),(max-aspect-ratio:1/1){#brand{top:20px;left:20px}.screen{align-items:flex-end;background:linear-gradient(0deg,#eef9f9 0%,#eef9f9f5 32%,#eef9f922 62%,transparent 80%)}.intro{margin:0 22px 50px;width:100%}h1{font-size:38px;line-height:1.1}h1 br{display:none}.kicker{margin-bottom:12px;font-size:9px}.subtitle{font-size:12px;margin:10px 0 14px}.lead{display:none}.primary{font-size:14px;min-width:215px;padding:15px 25px}.how{margin:18px 0 5px;font-size:10px;gap:10px}.hint{font-size:9px;margin:7px 0}.model-link{margin-top:5px;font-size:10px}.flight-tag{top:25px;right:18px;bottom:auto;gap:5px}.flight-tag b{font-size:12px}.flight-tag span{font-size:7px}.flight-tag small{display:none}footer{left:20px;right:20px;bottom:12px;font-size:7px}.distance{left:18px;top:18px}.distance b{font-size:36px}.distance small{font-size:7px}.route{top:21px;min-width:125px;left:51%}.route>b{font-size:10px}.route>span{font-size:8px}.status{top:18px;right:10px;gap:5px;flex-wrap:wrap;width:70px;justify-content:flex-end}.status>span{font-size:9px;margin:0;width:100%;letter-spacing:1px}.status button{width:27px;height:27px}#controls{bottom:20px;width:calc(100vw - 32px);gap:15px}#controls>button{width:115px;height:68px;gap:5px}#controls>button>span{font-size:7px;letter-spacing:.08em}#controls>button>kbd{font-size:20px}.rhythm{max-width:95px}.speed{right:18px;bottom:112px}.speed b{font-size:33px}.speed small{font-size:9px}.lift{bottom:115px;left:18px}#toast{top:18%;font-size:19px}#feedback{font-size:20px}}
@media(max-height:610px) and (min-width:721px){#brand{top:17px}.intro{margin-top:25px}h1{font-size:45px}.kicker{margin-bottom:12px}.subtitle{margin:10px 0}.lead{font-size:12px;margin-bottom:16px}.how{margin-top:18px}.hint{display:none}.primary{padding:13px 25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.preview-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}.preview-links button{background:transparent;color:#635370;border-bottom:1px solid #95829f55;font-size:10px;padding:5px 0}.preview-links button:hover{color:#872be4;border-color:currentColor}
#cinema{position:fixed;inset:0;pointer-events:none;border-top:42px solid #070c13;border-bottom:42px solid #070c13;z-index:10;color:white;text-shadow:0 2px 12px #0009}.cinema-caption{position:absolute;left:5%;bottom:26px;display:flex;flex-direction:column;gap:8px}.cinema-caption small{font-size:10px;letter-spacing:.18em;color:#d0dfeb}.cinema-caption b{font-size:26px;letter-spacing:.03em}.cinema-buttons{position:absolute;top:-33px;right:20px;display:flex;gap:20px;pointer-events:auto}.cinema-buttons button{color:#fff;background:transparent;padding:3px 8px;font-size:12px}.cinema-progress{position:absolute;left:5%;bottom:-24px;width:90%;height:2px;background:#ffffff22}.cinema-progress i{display:block;height:2px;background:#c6ddf3;width:0}#ready{position:fixed;left:50%;top:22%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:10px;white-space:nowrap;text-shadow:0 2px 14px white;background:#ffffffab;padding:15px 25px;border-radius:8px;pointer-events:none}#ready b{font-size:22px}#ready span{font-size:11px}.speed #ringCount{margin-top:8px;color:#685824;letter-spacing:0;font-size:12px}
@media(max-width:720px),(max-aspect-ratio:1/1){h1{font-size:31px}.intro{margin-bottom:40px}.subtitle{margin:8px 0}.preview-links{margin-top:8px;gap:16px}.how{margin-top:14px}.cinema-caption b{font-size:22px}#cinema{border-top-width:36px;border-bottom-width:36px}.cinema-buttons{top:-29px}.speed #ringCount{font-size:10px}}

.music-credit{font-size:9px;color:#647578;margin:7px 0}.score-panel{position:absolute;left:30px;top:106px;display:grid;grid-template-columns:auto auto;gap:1px 12px;align-items:baseline}.score-panel small{font-size:9px;grid-column:1/-1;letter-spacing:.05em}.score-panel b{font-size:25px;font-variant-numeric:tabular-nums}.score-panel>span{font-size:26px;color:#8b35d1;font-weight:900}.score-panel #shieldStatus{margin-top:7px;color:#4f6c80}.score-panel #shieldStatus.equipped{color:#067c98}.wind-panel{position:absolute;top:103px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;color:#466576}.final-score strong{font-size:36px;color:#862be0}.result-stats{white-space:pre-line}#musicError{font-size:12px;color:#945f52}
@media(max-width:720px),(max-aspect-ratio:1/1){.score-panel{top:83px;left:18px;gap:0 8px}.score-panel b{font-size:19px}.score-panel>span{font-size:22px}.score-panel small{font-size:8px}.wind-panel{top:88px;font-size:10px}.music-credit{font-size:8px}.final-score strong{font-size:28px}}


/* Bの意地: the title contains only its name and the launch button. */
#title{background:linear-gradient(90deg,#edf7f7e8,transparent 70%);align-items:center}
#title .intro{margin:0 0 0 8%;width:48%;display:flex;flex-direction:column;align-items:flex-start;gap:42px}
#title h1{font-size:clamp(72px,10vw,145px);letter-spacing:-.08em;line-height:1;font-weight:900;white-space:nowrap}
#title .primary{min-width:220px;font-size:19px;letter-spacing:.28em}
#boundaryWarning{position:fixed;inset:0;box-shadow:inset 0 0 75px #f04b48;pointer-events:none;opacity:0;z-index:4}
.score-panel #flightRule{margin-top:7px;color:#7e566d}
.share-button{display:inline-flex;align-items:center;justify-content:center;min-width:215px;background:#182025;border-radius:7px;padding:13px 24px;color:white;text-decoration:none;font-weight:800}
.overlay a.share-button{font-size:14px;margin:8px 0}
.pause-notes{font-size:11px;color:#606d73;max-width:430px;padding:0 20px}
.pause-notes p{font-size:11px!important}.pause-notes small{display:block;font-size:8px;line-height:1.8;margin-top:20px}
.pause-notes details{margin:12px 0}.pause-notes a{display:inline-block;margin:8px}
@media(max-width:720px),(max-aspect-ratio:1/1){#title{align-items:flex-end;background:linear-gradient(0deg,#edf7f7f5,transparent 65%)}#title .intro{align-items:center;width:100%;margin:0 20px 9vh;gap:28px}#title h1{font-size:clamp(64px,16vw,105px)}#result h2{font-size:clamp(36px,10vw,70px)}.overlay .pause-notes{max-width:360px}}

#trainHud{position:fixed;left:50%;top:61%;transform:translate(-50%,-50%);width:min(440px,86vw);text-align:center;pointer-events:none;color:#fff3c1;background:#19202aeb;box-shadow:0 10px 55px #15112e44;z-index:6;padding:0 0 15px}
#trainHud[data-phase="warning"]{top:42%;width:min(640px,90vw);padding-bottom:0;background:#ecba35ed;color:#202432}
.train-stripe{height:9px;background:repeating-linear-gradient(120deg,#ffc947 0 15px,#232532 15px 30px)}
#trainHud .train-stripe:last-child{position:absolute;bottom:0;width:100%}
#trainHeadline{margin:14px 0 0;font-size:32px;font-weight:900;letter-spacing:.04em}
#trainHud[data-phase="warning"] #trainHeadline{font-size:clamp(36px,7vw,72px);font-style:italic;margin:18px 0 0}
#mashCount{display:block;font-size:60px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#ffe266}
#mashCount:empty{display:none}#mashCount.tap{animation:count-hit .10s ease-out}@keyframes count-hit{from{transform:scale(1.18)}to{transform:scale(1)}}
#trainDetail{font-size:13px;font-weight:800;margin:9px 0}#mashHint{font-size:10px;display:block;margin:10px 0 4px;letter-spacing:.07em}
.train-clock{width:80%;height:5px;margin:auto;background:#fff3}.train-clock i{display:block;height:100%;background:#ffc849}
#trainHud[data-phase="warning"] .train-clock{display:none}#trainHud[data-phase="impact"]{border-color:#7effe1;background:#54229ad9}
#guitarTimer{position:fixed;top:140px;right:26px;width:176px;padding:12px 18px;background:#332045df;color:white;pointer-events:none;border-radius:6px;box-shadow:0 0 24px #b848db44;z-index:5}
#guitarTimer small{display:block;font-size:10px;letter-spacing:.18em;color:#ffcf69;font-weight:900}#guitarTimer b{font-size:42px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.2}#guitarTimer span{font-size:11px;margin-left:6px}
#guitarTimer>div{height:4px;background:#fff3;margin-top:5px}#guitarTimeBar{display:block;height:100%;background:linear-gradient(90deg,#fd716a,#fbe883,#73ecc1,#9ca1ff,#e29aff)}
#guitarTimer.ending{border:2px solid #ffe8a7;padding:10px 16px}#guitarTimer.dim{background:#352e3ede;color:#aaa1b4;box-shadow:none}#guitarTimer.dim small{color:#bba891}
#guitarGain{position:absolute;right:8px;top:-18px;color:#fff3a7;background:#4e2369;padding:3px 7px;border-radius:4px;font-size:13px;font-weight:900;font-style:normal;opacity:0}
#guitarTimer.tapped #guitarGain{animation:guitar-gain .4s ease-out}
@keyframes guitar-gain{0%,35%{opacity:1;transform:translateY(3px)}100%{opacity:0;transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){@keyframes guitar-gain{0%,70%{opacity:1}100%{opacity:0}}}
@media(max-width:720px),(max-aspect-ratio:1/1){#trainHud{top:61%;width:80vw}#trainHeadline{font-size:23px}#mashCount{font-size:47px}#trainDetail{font-size:11px}#guitarTimer{top:138px;right:12px;width:132px;padding:8px 12px}#guitarTimer b{font-size:32px}#guitarTimer small{font-size:8px}#guitarTimer.ending{padding:6px 10px}#trainPractice h2{font-size:30px}}

#trainHud:not([data-phase="warning"]){top:auto;bottom:122px;transform:translateX(-50%);padding:14px 22px 17px;text-align:left;background:#19202acb}
#trainHud:not([data-phase="warning"]) .train-stripe:first-child{position:absolute;top:0;left:0;width:100%;height:6px}
#trainHud:not([data-phase="warning"]) .train-stripe:last-child{left:0;height:6px}
#trainHud:not([data-phase="warning"]) #trainHeadline{font-size:22px;margin:0}
#trainHud:not([data-phase="warning"]) #mashCount{position:absolute;right:22px;top:13px;font-size:38px}
#trainHud:not([data-phase="warning"]) #trainDetail{margin:7px 0 8px;font-size:11px}
#trainHud:not([data-phase="warning"]) .train-clock{width:100%;height:3px}
#trainHud:not([data-phase="warning"]) #mashHint{margin:7px 0 0;font-size:9px}
@media(max-width:720px),(max-aspect-ratio:1/1){#trainHud:not([data-phase="warning"]){bottom:107px;padding:13px 16px 15px;width:82vw}#trainHud:not([data-phase="warning"]) #trainHeadline{font-size:18px}#trainHud:not([data-phase="warning"]) #mashCount{font-size:30px;right:16px}}

#hud.train-active #dash,#hud.train-active .wind-panel{visibility:hidden}

#pauseChoices,#quitChoices{display:flex;align-items:center;flex-direction:column}#quitChoices h2{font-size:42px}#paused .primary{margin-bottom:8px}
#result{overflow-y:auto;padding:30px 12px;justify-content:flex-start}#result .kicker{margin:8px 0}#result h2{font-size:clamp(36px,7vw,68px);margin:0}#result p{margin:5px 0}#result .final-score strong{font-size:28px}#result .primary{padding:13px 26px;margin:10px 0}#result .text-button{padding:8px}#result .share-button{padding:11px 22px}
#rankEntry{width:min(340px,85vw);padding:12px 0 2px}#rankEntry label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}#rankEntry>div{display:flex;gap:8px}#playerName{width:100%;min-width:0;border:1px solid #9d88b8;border-radius:5px;padding:10px 12px;font:inherit;font-size:15px;background:#fffc;color:#241b30;user-select:text}#saveRank{background:#772cce;color:white;font-weight:800;padding:0 16px;border-radius:5px;white-space:nowrap}#saveRank:disabled{opacity:.5}#rankStatus{font-size:11px!important;min-height:0}#ranks{padding:32px 16px}#ranks h2{font-size:40px;margin-bottom:10px}.ranking-scroll{overflow-y:auto;max-height:65vh;width:min(620px,95vw)}#ranks table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}#ranks th{background:#e7e0ec;position:sticky;top:0;font-size:10px;padding:11px 6px}#ranks td{padding:12px 6px;border-bottom:1px solid #83708b24}#ranks td:nth-child(2){text-align:left;overflow-wrap:anywhere;max-width:165px}#ranks tr:nth-child(-n+3) td:first-child{font-size:19px;color:#986613;font-weight:900}#ranks td:nth-child(n+3){text-align:right}#ranks .primary{padding:12px 24px;font-size:14px}
/* Rewards stay near the action and never shake or roll the camera. */
#moment{position:fixed;left:50%;bottom:262px;transform:translate(-50%,8px);opacity:0;background:#263044da;color:#fff4b7;padding:8px 19px;border-radius:99px;pointer-events:none;font-size:18px;font-weight:900;letter-spacing:.06em;transition:opacity .18s,transform .18s;z-index:4;white-space:nowrap}
#moment.show{opacity:1;transform:translate(-50%,0)}#moment[data-kind=record]{background:#765618ed;border:1px solid #ffeeb7}#moment[data-kind=near]{color:#9bf6ee}#moment[data-kind=demolition]{color:#b2ffb0}#moment[data-kind=final]{color:#fff4b7;font-size:23px}
#stationStamp{position:fixed;left:28px;top:170px;display:flex;flex-direction:column;gap:5px;min-width:170px;max-width:220px;padding:13px 17px;border:2px solid #567d79;border-radius:3px;background:#fff9e6ec;color:#315956;box-shadow:4px 4px 0 #4b77772b;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:4}#stationStamp.show{opacity:1;transform:translateY(0)}#stationStamp small{font-size:10px;letter-spacing:.2em;border-bottom:1px solid #31595655;padding-bottom:6px}#stationStamp b{font-size:22px}#stationStamp span{font-size:11px}
#regionRibbon{position:fixed;top:132px;left:50%;transform:translateX(-50%);opacity:0;background:linear-gradient(90deg,transparent,#364967ed 18% 82%,transparent);padding:8px 55px;white-space:nowrap;pointer-events:none;color:#fff9e0;font-size:21px;font-weight:900;letter-spacing:.2em;transition:opacity .3s;z-index:4}#regionRibbon.show{opacity:1}
#clearMedal{margin:8px 0;display:flex;align-items:center;gap:12px;color:#8c5d0d;font-size:17px}#clearMedal span{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fff6ba,#e6ac34);border:3px double #9e761e;font-size:26px;box-shadow:0 2px 14px #ffd16a55}#result.cleared{background:linear-gradient(140deg,#fff8d9ed,#eff8f0e8 50%,#ebe0ffe8)}#result.cleared .kicker{color:#896717;font-weight:900;font-size:17px;letter-spacing:.3em}
@media(max-width:720px),(max-aspect-ratio:1/1){#stationStamp{left:13px;top:142px;min-width:125px;max-width:154px;padding:10px 12px}#stationStamp b{font-size:18px}#stationStamp span{font-size:10px}#stationStamp small{font-size:8px}#regionRibbon{top:107px;font-size:17px;padding:6px 35px}#moment{bottom:214px;font-size:15px}#moment[data-kind=final]{font-size:20px}.distance b{font-size:34px}}
@media(max-width:400px){.route{top:88px;left:50%}.wind-panel{top:138px}#regionRibbon{top:165px}#stationStamp{top:200px}}
@media(prefers-reduced-motion:reduce){#moment,#stationStamp,#regionRibbon{transition:none;transform:translateX(-50%)}#stationStamp,#stationStamp.show{transform:none}#moment.show{transform:translateX(-50%)}}
:root{--map-land:#dce8e3;--map-line:#a3bcb3;--map-water:#f3faf8;--map-current:#e2c9f5;--map-pin:#f5b933}
#result{padding:24px;justify-content:center}
.result-layout{display:grid;grid-template-columns:minmax(300px,390px) minmax(380px,540px);align-items:center;gap:36px;width:min(100%,1000px);margin:auto;flex-shrink:0}
.result-summary{display:flex;align-items:center;flex-direction:column;min-width:0}
#result #resultLocation{font-size:25px;font-weight:850;margin:8px 0 1px;color:var(--purple)}
#result #resultMessage{font-size:13px;padding:0;max-width:365px}
.result-map-panel{margin:0;text-align:left;min-width:0}
.result-map-panel figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 8px 10px;border-bottom:1px solid #bdd1c8}
.result-map-panel figcaption b{font-size:22px;letter-spacing:-.04em}.result-map-panel figcaption span{font-size:13px;color:#53675e}
#resultMap{display:block;width:100%;height:auto;max-height:55vh;overflow:visible}
.map-land path{fill:var(--map-land);stroke:var(--map-line);stroke-width:.6;stroke-linejoin:round}.map-land path.current{fill:var(--map-current);stroke:#a278ba;stroke-width:1}
.map-islands rect{fill:none;stroke:#bdcfc6;stroke-dasharray:3 4}.map-islands path{fill:var(--map-land);stroke:var(--map-line);stroke-width:.5}.map-islands text{font-size:12px;fill:#5f756a}
.map-route-future,.map-travel,.map-travel-halo{fill:none;stroke-linecap:round;stroke-linejoin:round}.map-route-future{stroke:#9eafa7;stroke-width:2;stroke-dasharray:4 5}.map-travel-halo{stroke:#fff;stroke-width:7}.map-travel{stroke:var(--purple);stroke-width:4}
#mapStations circle{fill:#f5faf7;stroke:#82988b;stroke-width:1}#mapStations circle.passed{fill:var(--purple);stroke:#fff;stroke-width:1.1}
.map-station-name{font-size:13px;fill:#36473e;paint-order:stroke;stroke:#f1f8f1;stroke-width:4;stroke-linejoin:round}
.map-pin-halo{fill:#fff;stroke:var(--purple);stroke-width:2}.map-pin-dot{fill:var(--map-pin)}
.map-legend{display:flex;justify-content:center;gap:22px;font-size:13px;color:#4e6458}.map-legend span:before{content:'';display:inline-block;width:23px;vertical-align:middle;margin-right:7px;border-top:3px solid var(--purple)}.map-legend span+span:before{border-top:2px dashed #9eafa7}
#result .map-note{font-size:12px;color:#536a5d;text-align:center;padding:0;margin:7px 0}.map-credit{text-align:center;color:#62716a;font-size:11px}.overlay .map-credit a{margin:0;font-size:inherit;color:inherit}
@keyframes reveal-map{from{opacity:.3}to{opacity:1}}.map-reveal #mapTravel{animation:reveal-map .8s ease-out}
@media(max-width:780px){#result{padding:20px 16px;justify-content:flex-start}.result-layout{display:flex;flex-direction:column;gap:22px;max-width:540px}.result-summary{width:100%}.result-map-panel{width:100%}#resultMap{max-height:none}.result-map-panel figcaption b{font-size:20px}}
@media(prefers-reduced-motion:reduce){.map-reveal #mapTravel{animation:none}}
:root{--meter-face:#111c20;--meter-rim:#718181;--meter-ink:#b8f4a2;--meter-needle:#fda15c}
.speed{position:static;right:auto;bottom:auto;width:136px;padding:6px 8px 7px;background:var(--meter-face);color:#d7e8dd;border:2px solid var(--meter-rim);border-radius:9px;box-shadow:inset 0 0 0 1px #071015,0 3px 12px #13242a26;text-align:center}
.meter-heading{font-size:11px;letter-spacing:.28em;text-align:left;padding-left:5px;color:#d7e6dc}.meter-face{position:relative;height:76px}.meter-face svg{display:block;width:100%;height:100%;overflow:visible}.meter-arc{stroke:#53625f;stroke-width:2;fill:none}.meter-tick{stroke:#83998e;stroke-width:1}.meter-tick-major{stroke:#e1ead7;stroke-width:2}.meter-face text{display:none}#speedNeedle path{fill:var(--meter-needle)}#speedNeedle circle{fill:#eee6cd;stroke:#525e57;stroke-width:2}
.meter-reading{position:absolute;bottom:-1px;left:0;right:0;line-height:1;background:#111c20;width:100%;padding-top:4px}.speed .meter-reading b{display:inline-block;font:700 24px/1 Consolas,monospace;letter-spacing:-.04em;color:var(--meter-ink);font-variant-numeric:tabular-nums;text-shadow:0 0 9px #a4f17b28}.speed .meter-reading span{display:inline-block;font-size:10px;margin-left:5px;color:#a2b79e;letter-spacing:0}.speed #combo,.speed #ringCount{display:block;font-size:10px;color:#c7d8cc;margin:9px 0 0;letter-spacing:0;white-space:nowrap}.speed #ringCount{color:#f0d99b;margin-top:5px}
/* Mash callout: a flat sticker with a hard offset shadow instead of the outlined comic lettering. */
#mashCallout{position:fixed;top:26%;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:7;pointer-events:none;white-space:nowrap;font-size:clamp(30px,4.2vw,50px);font-weight:900;font-style:normal;letter-spacing:.08em;color:#fff;background:#1a1f2b;padding:6px 28px 8px;border-radius:8px;box-shadow:7px 7px 0 #ffc947;animation:callout-beat .46s ease-in-out infinite alternate}#mashCallout.guitar{background:#4b1f7a;box-shadow:7px 7px 0 #e29aff;color:#fff5ff}@keyframes callout-beat{from{transform:translateX(-50%) rotate(-3deg) scale(1)}to{transform:translateX(-50%) rotate(-3deg) scale(1.06)}}
@media(max-width:720px),(max-aspect-ratio:1/1){.speed{width:112px;padding:4px 6px 5px;border-width:2px}.meter-heading{font-size:9px}.meter-face{height:62px}.speed .meter-reading b{font-size:20px}.speed .meter-reading span{font-size:8px}.speed #combo,.speed #ringCount{font-size:9px}#mashCallout{top:30%;font-size:26px;padding:5px 18px 6px;box-shadow:5px 5px 0 #ffc947}}
:root{--suica:#80c342;--suica-light:#b3df74;--suica-ink:#27572b;--melon-rind:#2e8b3d;--melon-rind-dark:#1b5a26;--melon-white:#f7f3e6;--melon-flesh:#ff4f5e;--melon-flesh-deep:#d92a3c;--melon-seed:#1e1a1a}
/* Bottom-centre dashboard: a small speedometer above the watermelon gauge. Both sit just above the ear buttons. */
#dash{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
#suicaGauge{position:relative;display:flex;align-items:center;gap:8px}
.suica-label{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--suica-ink);text-shadow:0 1px 4px #fff}
.suica-rind{padding:5px;border-radius:999px;background:repeating-linear-gradient(100deg,var(--melon-rind) 0 14px,var(--melon-rind-dark) 14px 22px);box-shadow:0 3px 0 #164a1f,0 6px 14px #1b5a2633}
.suica-track{position:relative;width:min(340px,64vw);height:18px;border-radius:999px;background:var(--melon-white);overflow:hidden;box-shadow:inset 0 0 0 2px #e9f3d8}
#suicaFill{display:block;width:0;height:100%;border-radius:999px 0 0 999px;background-image:radial-gradient(ellipse 2.4px 3.6px at 9px 5px,var(--melon-seed) 98%,transparent 100%),radial-gradient(ellipse 2.4px 3.6px at 22px 12px,var(--melon-seed) 98%,transparent 100%),linear-gradient(180deg,var(--melon-flesh),var(--melon-flesh-deep));background-size:26px 18px,26px 18px,100% 100%;transition:width .12s ease-out}
.suica-track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#ffffff66 calc(10% - 1px),#ffffff66 10%)}
#suicaBonus{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:10px;color:var(--suica-ink);font-size:12px;font-weight:900;text-shadow:0 1px 6px #fff;white-space:nowrap}
#suicaGauge.inactive{opacity:.4}#suicaGauge.charged .suica-rind{box-shadow:0 3px 0 #164a1f,0 0 18px #ff5a63aa}
.speed #combo{margin-top:5px}
/* Way back to the magazine. */
#title .site-link{position:absolute;left:30px;bottom:18px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#4b3a63;text-decoration:none;text-underline-offset:4px;pointer-events:auto}
#title .site-link:hover{text-decoration:underline;color:var(--purple)}
#result a.site-link{font-size:12px;color:#586a73;text-decoration:none;padding:8px;margin:0}
#result a.site-link:hover{text-decoration:underline}
@media(max-width:720px),(max-aspect-ratio:1/1){#dash{bottom:96px;gap:5px}.suica-track{width:min(250px,60vw);height:15px}.suica-rind{padding:4px}.suica-label{display:none}#suicaBonus{font-size:11px;margin-left:6px}#title .site-link{left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;font-size:10px}}
#mashCallout:not([hidden])~#feedback{top:42%}
@media(prefers-reduced-motion:reduce){#mashCallout{animation:none}}
/* The toast is fixed at left:50%; without an explicit width it wraps at half the viewport on phones. */
#toast{width:max-content;max-width:92vw}