@font-face{font-family:PressStart;src:url('assets/press-start-2p.woff') format('woff');font-display:swap}
:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#fff;background:#080f22;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#080f22}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit;cursor:pointer;border:0}button:focus-visible{outline:3px solid #75eaff;outline-offset:4px}button:disabled{cursor:wait;filter:saturate(.7);opacity:.85}main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.game{position:relative;overflow:hidden;isolation:isolate;width:min(420px,calc((100svh - 64px)*7/15));aspect-ratio:7/15;container-type:inline-size;background:#0b1229;border:1px solid #7d8196;box-shadow:0 12px 80px #0006;touch-action:none;user-select:none;-webkit-user-select:none}.game>canvas{display:block;width:100%;height:100%;image-rendering:auto}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.title-art{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.primary{display:flex;align-items:center;justify-content:center;gap:2.5cqw;width:100%;height:15cqw;min-height:44px;background:linear-gradient(180deg,#ff50a3,#ed368e);border:1.5px solid #ff9ac9;border-radius:4cqw;color:#fff;font-size:5cqw;font-weight:800;line-height:1;letter-spacing:.01em;box-shadow:0 2px 0 #a8216840;transition:filter .15s,transform .1s}.primary:hover{filter:brightness(1.08)}.primary:active{transform:translateY(2px)}.play-icon{width:0;height:0;border-top:2.4cqw solid transparent;border-bottom:2.4cqw solid transparent;border-left:4cqw solid #fff;flex-shrink:0}.start-button{position:absolute;left:12%;top:83.4%;width:77%;height:8.6%;font-size:6.5cqw;border-radius:7cqw;border:2px solid #ff9bc9;box-shadow:0 0 0 1px #f34a9c}.load-error{position:absolute;left:5%;right:5%;top:74%;padding:3cqw;background:#0b142eee;font-size:3cqw;text-align:center}.hud{position:absolute;inset:3.3cqw 3.4cqw auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.distance{background:#0e152de8;border-radius:1.5cqw;min-width:39cqw;padding:2.4cqw 3cqw;box-shadow:0 0 0 1px #a6a3bc25}.distance>span{display:block;font-family:ui-monospace,monospace;font-size:3.7cqw;font-weight:800;letter-spacing:.02em;line-height:1.25}.distance strong{display:block;font-family:ui-monospace,monospace;font-size:8.4cqw;font-weight:850;letter-spacing:-.035em;line-height:1.3;margin-top:.4cqw;font-variant-numeric:tabular-nums}.distance small{font-size:6cqw;letter-spacing:-.06em}.icon-button{pointer-events:auto;display:grid;place-items:center;width:10.8cqw;height:11.3cqw;min-width:38px;min-height:40px;background:#0d142de8;border-radius:2cqw;color:#fff;font-family:sans-serif;font-size:7cqw;font-weight:800;line-height:1}.countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:PressStart,monospace;font-size:16cqw;color:#fff;text-shadow:0 0 16px #ff52a0,3px 4px 0 #17203f}.shade{background:#080f22cc;backdrop-filter:blur(2px)}.dialog{width:86%;text-align:center}.pause-dialog{padding:10cqw 5cqw;border:1px solid #8b91aa;border-radius:4cqw;background:#0e172fee}.pause-dialog h2{font-size:8cqw;margin:0 0 9cqw}.secondary{display:flex;align-items:center;justify-content:center;gap:2.3cqw;width:100%;height:12cqw;min-height:38px;border:1.5px solid #b0b8d5;border-radius:4cqw;background:#15203c;color:#fff;font-size:4cqw;font-weight:700;line-height:1}.secondary:hover{background:#1d2b4f}.pause-dialog .secondary{margin-top:5cqw}.result-screen{background:#080f21;justify-content:flex-start}.result-dialog{width:90%;padding:8cqw 0 4cqw;text-align:center}.result-dialog h2{font-family:PressStart,monospace;font-size:8.3cqw;line-height:1.25;font-weight:400;letter-spacing:-.025em;color:#ffa0d1;text-shadow:0 0 6px #ff42a6,0 0 18px #ee298d8c;margin:0 0 4cqw;white-space:nowrap}.score-caption{font-size:4cqw;line-height:1.5;font-weight:700;margin:0}.score{font-family:ui-monospace,monospace;font-size:16cqw;font-weight:800;line-height:1.15;letter-spacing:-.06em;margin-top:1cqw;font-variant-numeric:tabular-nums}.score small{font-size:9.5cqw;letter-spacing:-.05em}.best{font-size:3.1cqw;line-height:1.5;color:#ddddea;height:4.8cqw;margin:1cqw 0 4cqw}.best.new{color:#ffcee6}.result-art{display:block;width:100%;aspect-ratio:3/2;border-radius:2.7cqw;overflow:hidden;background:#11182e}
.result-ad{position:relative;display:flex;flex-direction:column;aspect-ratio:auto;text-decoration:none;color:#fff;border:1px solid #92719a;box-shadow:0 0 20px #ed368e13}
.result-ad:focus-visible{outline:3px solid #75eaff;outline-offset:3px}
.result-ad-image{display:block;width:100%;height:auto;min-height:0;flex:1 1 auto;object-fit:contain;image-rendering:auto}
.ad-label{position:absolute;z-index:1;right:7px;top:6px;padding:2px 4px;border-radius:3px;background:#11182ed9;font-size:9px;line-height:1.2;color:#dcd1e7}
.result-ad-link{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 38px;min-height:38px;background:#202341;color:#ffe2f1;font-size:3.6cqw;font-weight:700;border-top:1px solid #b789b13d}
.result-ad-link>span{font-size:4.2cqw;color:#ff9dd0}
.result-ad:hover .result-ad-link{background:#363052}
.result-dialog .primary{margin-top:4cqw;font-size:4.9cqw}.retry-icon{font-family:Arial,sans-serif;font-size:9cqw;font-weight:800;line-height:1}.home-button{margin-top:4cqw;height:11cqw;font-size:3.9cqw}.home-button span{font-family:Arial,sans-serif;font-size:6cqw}.desktop-hint{font-size:11px;color:#8a91aa;margin:16px 0 0}.desktop-hint span{color:#e77eaf;margin:0 6px}@media(max-width:600px){html,body{width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}main{width:100%;height:100vh;height:100dvh;min-height:0;padding:0}.game{width:100%;height:100%;aspect-ratio:auto;flex:none;border:0;box-shadow:none}.desktop-hint{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.hud-controls{display:flex;align-items:center;gap:2cqw;pointer-events:auto}.music-toggle{font-size:7cqw;position:relative}.music-toggle[aria-pressed="false"]{color:#b9bfd2}.music-toggle[aria-pressed="false"]:after{content:"";position:absolute;width:6.5cqw;height:2px;background:#e6b7cd;transform:rotate(-42deg)}.sound-setting{display:block;margin:5cqw auto 0;padding:2.5cqw 5cqw;background:transparent;color:#e7d7e9;font-size:3.7cqw;min-height:38px;border:1px solid #838aa555;border-radius:3cqw}.sound-setting:hover{background:#1d2b4f}

/* The title keeps its illustrated proportions while the action stays on screen. */
.title-actions{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12cqw 8cqw 5cqw;background:linear-gradient(180deg,#0b142800,#0b1428db 30%,#0b1428f5)}
.title-actions .start-button{position:relative;left:auto;top:auto;width:92%;height:14cqw;min-height:48px;max-height:70px;font-size:6cqw;flex-shrink:0}
.title-instruction{font-size:3.6cqw;line-height:1.5;font-weight:700;color:#fff;text-shadow:0 2px 3px #091024;margin:3.5cqw 0 0;white-space:nowrap}
@media(max-width:600px){
 .hud{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
 .title-actions{padding-bottom:max(18px,env(safe-area-inset-bottom))}
 .result-dialog{height:100%;min-height:0;display:flex;flex-direction:column;padding:clamp(16px,3dvh,28px) 0 max(12px,env(safe-area-inset-bottom))}
 .result-dialog>:not(.result-art){flex-shrink:0}
 .result-dialog h2{font-size:clamp(22px,7.8cqw,34px);line-height:1.2;margin-bottom:clamp(8px,1.5dvh,16px)}
 .score-caption{font-size:clamp(13px,3.8cqw,17px);line-height:1.35}
 .score{font-size:clamp(40px,14cqw,62px);line-height:1.15;margin-top:4px}
 .score small{font-size:clamp(24px,8cqw,38px)}
 .best{font-size:clamp(10px,3cqw,13px);height:18px;line-height:18px;margin:4px 0 clamp(8px,1.5dvh,14px)}
 .result-art{flex:1 1 0;min-height:150px;height:0;aspect-ratio:auto;max-height:calc(60cqw + 38px)}
 .result-dialog .primary{height:clamp(48px,8dvh,64px);font-size:clamp(18px,4.9cqw,23px);margin-top:clamp(10px,2dvh,16px)}
 .home-button{height:clamp(42px,7dvh,52px);font-size:clamp(14px,3.9cqw,18px);margin-top:clamp(8px,1.5dvh,12px)}
 .pause-dialog{padding-top:clamp(20px,6dvh,40px);padding-bottom:clamp(20px,6dvh,40px)}
 .pause-dialog h2{font-size:clamp(24px,8cqw,34px);margin-bottom:clamp(20px,5dvh,36px)}
 .pause-dialog .primary{height:clamp(48px,8dvh,64px)}
 .pause-dialog .secondary{height:clamp(42px,7dvh,52px);margin-top:clamp(12px,3dvh,20px)}
 .sound-setting{margin-top:clamp(12px,3dvh,20px)}
}

@media(max-width:600px) and (max-height:620px){
 .result-dialog{padding-top:14px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
 .result-dialog h2{font-size:clamp(22px,6.5cqw,28px);margin-bottom:6px}
 .score-caption{font-size:12px;line-height:1.35}
 .score{font-size:clamp(34px,11cqw,44px);margin-top:2px}
 .score small{font-size:25px}
 .best{font-size:11px;height:16px;line-height:16px;margin:2px 0 6px}
 .result-dialog .primary{height:48px;margin-top:8px}
 .home-button{height:42px;margin-top:8px}
}

/* Persistent controls sit below the player's feet without hiding the road. */
.movement-controls{position:absolute;left:12%;right:12%;top:90.3%;height:8%;min-height:46px;max-height:56px;display:flex;align-items:stretch;border:1px solid #dab5df80;border-radius:3cqw;background:#111a3599;box-shadow:0 2px 10px #060b2026;touch-action:none}
.move-button{display:grid;place-items:center;flex:1;min-width:44px;padding:0;background:transparent;color:#f9e6f6;border-radius:3cqw;touch-action:none;transition:background .1s,color .1s;cursor:pointer}
.move-button svg{width:9cqw;max-width:40px;height:auto;fill:currentColor;pointer-events:none}
.move-button:disabled{opacity:1;filter:none;cursor:default}
.move-button.is-active{background:#ed4d9f99;color:#fff}
.move-button:focus-visible{outline-offset:-3px}
.movement-label{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1.35;white-space:nowrap;font-size:3.1cqw;font-weight:700;line-height:1.35;color:#fff0fa;cursor:ew-resize}
.movement-label small{display:block;margin-top:1px;font-size:2.3cqw;font-weight:500;color:#d4cee6}

.share-button{gap:9px;height:12cqw;min-height:44px;margin-top:3cqw;background:#111827;border-color:#70798f;font-size:3.9cqw;text-decoration:none}
.share-button svg{width:4.5cqw;height:4.5cqw;min-width:17px;min-height:17px;fill:currentColor}
.share-button:hover{background:#263044}
.share-button:focus-visible{outline:3px solid #75eaff;outline-offset:3px}
@media(max-width:600px){.share-button{height:clamp(44px,7dvh,52px);margin-top:clamp(8px,1.5dvh,12px);font-size:clamp(14px,3.9cqw,18px)}}
@media(max-width:600px) and (max-height:620px){.share-button{height:44px;margin-top:8px}}

.result-subactions{display:flex;gap:2.5cqw;width:100%;margin-top:3cqw}
.result-subactions .secondary{flex:1;min-width:0;height:12cqw;min-height:44px;margin-top:0;font-size:3.4cqw;gap:1.5cqw;white-space:nowrap}
.result-subactions .home-button span{font-size:5cqw}
@media(max-width:600px){.result-subactions{margin-top:clamp(8px,1.5dvh,12px)}.result-subactions .secondary{height:clamp(44px,7dvh,52px);font-size:clamp(11px,3.4cqw,16px)}}
@media(max-width:600px) and (max-height:620px){.result-subactions{margin-top:8px}.result-subactions .secondary{height:44px}}