#canvas{transition:filter 1.4s ease}
.finish-coasting #canvas,.stage:has(#ending.active) #canvas{filter:blur(2px) brightness(.72)}
#finale{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;place-items:center;text-align:center;padding:24px;opacity:var(--finale-fade,1)}
#finale[hidden]{display:none}
.finale-copy{width:100%;margin-top:-12vh}
#finale .finale-label{color:#c6daf0;font-size:14px;margin:0 0 6px;animation:finale-in 1.1s .3s both}
#finale .finale-time{display:block;font-size:clamp(36px,11vw,52px);line-height:1.2;color:#fff;animation:finale-in 1.4s .5s both}
#finale .finale-best{color:#ffce40;font-size:clamp(12px,3.7vw,16px);margin:20px 0;animation:finale-in 1.3s 1.2s both}
#finale .finale-arrival{font-size:clamp(19px,5.5vw,23px);line-height:1.5;color:#fff1d0;max-width:22em;margin:20px auto 0}
@keyframes finale-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.finish-coasting #sound-toggle,.stage:has(#ending.active) #sound-toggle{display:none}
.ending-result #result-screen{background:linear-gradient(#0b1b2aeb,#0b1b2a66 42%,#0b1b2a4d 75%,#0b1b2a33);overflow-y:auto;pointer-events:auto;padding:22px 24px 18px;animation:ending-results-in 1.4s ease-out both}
.ending-result #result-screen>.eyebrow{display:none}
.ending-result #result-screen h2{font-size:23px;margin:0 0 8px}
.ending-result #result-screen #result-detail{max-width:30em;font-size:13px;line-height:1.5}
.finish-details{display:none;gap:5px;margin:10px 0 16px}
.has-finish-summary.ending-result .finish-details{display:grid}
.finish-details>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid #ffffff20;padding:3px 0}
.finish-details span{font-size:11px;color:#c6daf0}.finish-details strong{font-size:15px;color:#fff}
.finish-details>div:first-child strong{font-size:26px;color:#ffce40}
.has-finish-summary.ending-result #record-result{display:none}
.ending-result #result-screen button{flex:none;width:100%;align-self:stretch;margin:5px 0;min-height:44px}
#share-result[hidden]{display:none}
.ending-result #result-screen .share-status{font-size:12px;margin:5px 0}
.share-copy{width:100%;min-height:100px;background:#102438;color:white;padding:10px;font-size:13px;user-select:text}
@media(max-height:650px){.ending-result #result-screen{padding:14px 20px}.finish-details{gap:1px;margin:5px 0 8px}.finish-details>div{padding:1px 0}.ending-result #result-screen h2{font-size:20px}.ending-result #result-screen p{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.finish-coasting #canvas,.stage:has(#ending.active) #canvas{filter:brightness(.72)}#finale *{animation-name:finale-fade!important}@keyframes finale-fade{from{opacity:0}to{opacity:1}}}

.finale-arrival .arrival-word{white-space:nowrap}

#finale .finale-time .result-milliseconds,.finish-details strong .result-milliseconds{font-size:.72em;color:inherit;vertical-align:baseline}
/* Keep the central sea readable and preserve the two faces in the approved art. */
.ending-result #result-screen{padding:0;background:linear-gradient(transparent 78%,#10243866);overflow:hidden;pointer-events:none}
.ending-result .ending-summary{position:absolute;left:53%;right:4%;top:29%;text-align:right;pointer-events:auto}
.ending-result #result-screen h2{font-size:clamp(13px,3.5vw,17px);line-height:1.2;margin:0 0 8px}
.ending-result #result-detail{display:none}
.ending-result .finish-details{margin:0;gap:5px}
.ending-result .finish-details>div{display:block;padding:0;border:0}
.ending-result .finish-details>div>span{display:block;font-size:9px}.ending-result .finish-details strong{font-size:16px}
.ending-result .finish-details>div:first-child strong{font-size:clamp(23px,6vw,30px)}
.finish-extra{display:none}.ending-result .finish-extra{display:block;font-size:10px;margin-top:4px}
.finish-extra summary{cursor:pointer;min-height:32px;padding:8px 0;list-style-position:inside;color:#ffe1b0}
.finish-extra[open]{background:#102438ed;padding:8px;border-radius:8px;max-height:28vh;overflow:auto}
.finish-extra>div{display:flex;justify-content:space-between;gap:6px;padding:3px 0}.ending-result .finish-extra strong{font-size:12px}
.ending-result .ending-actions{position:absolute;left:6%;right:6%;bottom:calc(3% + env(safe-area-inset-bottom));display:grid;gap:8px;pointer-events:auto}
.ending-result #result-screen .ending-actions button{margin:0;width:100%}
.ending-result #result-screen .share-status:empty{display:none}
.ending-summary{width:100%}.ending-result .ending-summary{width:auto}

.ending-result .finish-details strong{white-space:nowrap}.ending-result .finish-details strong .result-milliseconds{display:inline;font-size:.72em}

.result-share-dialog{box-sizing:border-box;width:min(94vw,480px);max-height:92dvh;overflow:auto;background:#102438;color:#fff0cd;border:1px solid #e5bc77;border-radius:16px;padding:20px;font:14px system-ui;z-index:100}
.result-share-dialog::backdrop{background:#081522cc}.result-share-dialog h2{font-size:20px}.result-share-dialog img{display:block;width:auto;max-width:100%;max-height:44vh;margin:12px auto;border-radius:8px}.result-share-dialog [hidden]{display:none}.share-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.share-options button,.share-options a{box-sizing:border-box;min-height:48px;display:grid;place-items:center;text-decoration:none;background:#ffe0a0;color:#102438;border:0;border-radius:8px;font:bold 13px system-ui;padding:10px}.share-options button:disabled{opacity:.4}.result-share-dialog textarea{box-sizing:border-box;width:100%;height:95px;background:#19384c;color:#fff0cd;border:1px solid #526776;border-radius:6px;padding:8px}.share-help{font-size:12px;line-height:1.5}
/* Legible results, kept above Sol's face on the narrowest layout. */
.ending-result .ending-summary{top:19%;left:54%;right:3%;box-sizing:border-box;padding:8px;border-radius:10px;background:linear-gradient(110deg,#102438b8,#102438ed);border:1px solid #ffe0a05c;box-shadow:0 3px 14px #08152244}
.ending-result #result-screen .ending-summary h2{font-size:15px;line-height:1.15;margin-bottom:6px;color:#ffe0a0}
.ending-result .ending-summary .finish-details{gap:5px}
.ending-result .ending-summary .finish-details>div>span{font-size:11px;line-height:1.25;color:#f1e9d9}
.ending-result .ending-summary .finish-details strong{font-size:22px;line-height:1.2;color:#fff}
.ending-result .ending-summary .finish-details>div:first-child strong{font-size:36px;color:#ffe099}
.ending-result .ending-summary .finish-details strong .result-milliseconds{font-size:.72em}
.ending-result .ending-summary .finish-extra{position:absolute;top:100%;right:0;min-width:100px;font-size:11px;margin:4px 0 0;text-shadow:0 1px 4px #071522}
.ending-result .ending-summary .finish-extra summary{min-height:28px;box-sizing:border-box;background:#102438e8;border-radius:6px;padding:6px}
.ending-result .ending-summary .finish-extra strong{font-size:13px}

/* Results share the artwork coordinate frame; details cannot expand over faces. */
.ending-result #result-screen{inset:auto;left:var(--ending-art-x,0px);top:var(--ending-art-y,0px);width:var(--ending-art-w,100%);height:var(--ending-art-h,100%);box-sizing:border-box}
.ending-result .ending-summary{min-width:0}
.ending-result .ending-summary .finish-details>div{min-width:0}
.ending-result .ending-summary h2{overflow-wrap:anywhere}
.ending-result .ending-summary .finish-extra[open]{position:fixed;left:8%;right:8%;top:8%;bottom:auto;z-index:30;max-height:70%;overflow:auto;width:auto;min-width:0;background:#102438fa;border:1px solid #ffe0a077;padding:12px;text-align:left}
.ending-result .ending-summary .finish-extra>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ending-result .ending-summary .finish-extra strong{white-space:normal;overflow-wrap:anywhere;text-align:right}

/* Compact results stay in the upper sky, clear of the sunset and faces. */
.ending-result .ending-summary{left:10%;right:10%;top:4%;padding:6px 10px;background:#10243888;text-align:center}
.ending-result .ending-summary h2{font-size:12px!important}
.ending-result .ending-summary .finish-details>div:first-child strong{font-size:30px}
.ending-result .ending-summary .finish-details strong{font-size:18px}
.ending-result .ending-summary .finish-details{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;align-items:center}
.ending-result .ending-summary .finish-details>div{display:flex;flex-direction:column}
.ending-result .ending-summary .finish-extra{top:100%;left:0;right:0;text-align:center}
.ending-result .ending-summary .finish-extra[open]{position:fixed;top:8%;left:8%;right:8%;text-align:left}
.special-ending.ending-result .ending-actions{grid-template-columns:1fr 1fr;gap:8px}
#stage.special-ending.ending-result #result-screen .ending-actions button{min-width:0;padding:9px 5px;font-size:11px}
.special-ending.ending-result .ending-actions .share-status{grid-column:1/-1}

.result-heading{display:flex;align-items:center;gap:8px;margin-bottom:7px;text-align:right}
.result-heading h2{flex:1;margin:0!important}
.result-grade{flex:none;line-height:1}
.result-grade:empty{display:none}
.result-grade .finish-grade{font-size:38px!important}
.ending-result .result-heading{justify-content:center;text-align:left;gap:10px;margin-bottom:4px}
.ending-result .result-heading h2{flex:0 1 auto}
.ending-result .result-grade .finish-grade{font-size:34px!important}

.ending-result #result-screen .result-heading h2{font-size:11px;overflow-wrap:normal;word-break:normal}
.result-heading .finish-grade{min-width:1.25em}

/* Three actions share the reserved lower artwork zone. */
.ending-result .ending-actions{grid-template-columns:1fr 1fr;gap:8px}
.ending-result .ending-actions #result-home,.ending-result .ending-actions .share-status{grid-column:1/-1}
#stage.ending-result #result-screen .ending-actions button{min-width:0;font-size:11px;min-height:46px;padding:9px 5px}
#stage #result-home.drive-button{background:#102438a8;color:#fff0cd;border:1px solid #ffe0a066}

/* Open typography composition: records left, prominent rank right. */
.ending-result #result-screen .ending-summary{left:5%;right:5%;top:4%;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:left}
.ending-result .result-heading{display:block;margin-bottom:10px;padding-right:100px;text-align:left}
.ending-result .result-grade{position:absolute;right:0;top:0}
.ending-result .result-grade .finish-grade{font-size:64px!important;min-width:0;padding:0 .06em .12em}
.ending-result .result-grade .finish-grade:after{height:3px}
.ending-result #result-screen .ending-summary .finish-details{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-items:end}
.ending-result .ending-summary .finish-details>div:first-child{grid-column:1/-1;padding-right:100px;align-items:flex-start}
.ending-result .ending-summary .finish-details>div:first-child strong{font-size:32px;color:#ffe099}
.ending-result .ending-summary .finish-details>div:not(:first-child){flex-direction:row;align-items:baseline;justify-content:space-between;gap:5px}
.ending-result .ending-summary .finish-details>div:not(:first-child)>span{font-size:8px}
.ending-result .ending-summary .finish-details>div:not(:first-child)>strong{font-size:13px}
.ending-result .ending-summary .finish-extra{margin-top:7px;border-top:1px solid #ffe09966;text-align:left}
.ending-result .ending-summary .finish-extra summary{background:none;border-radius:0;min-height:44px;padding:8px 0;color:#ffbc82;text-align:left}
.ending-result .ending-summary .finish-extra[open]{background:#102438f5;padding:12px;border:1px solid #ffe09966;border-radius:8px}

/* Image preparation is visibly active, including before image decoding finishes. */
.result-share-dialog.is-preparing .share-feedback{display:flex;align-items:center;gap:14px;min-height:72px;color:#ffe2a0;font-size:16px;font-weight:700;animation:share-glow 1.4s ease-in-out infinite}
.result-share-dialog.is-preparing .share-feedback::before{content:"";display:block;flex:0 0 26px;width:26px;height:26px;border:3px solid #ffe2a033;border-top-color:#ffe2a0;border-right-color:#ffad66;border-radius:50%;animation:share-spin .85s linear infinite}
@keyframes share-spin{to{transform:rotate(360deg)}}
@keyframes share-glow{50%{color:#fff9e9;text-shadow:0 0 12px #ffc56d88}}
@media(prefers-reduced-motion:reduce){.result-share-dialog.is-preparing .share-feedback,.result-share-dialog.is-preparing .share-feedback::before{animation:none}}

.share-metadata{font-size:12px;line-height:1.5;color:#dbe7ef}.share-game-link{display:block;text-align:center;color:#ffe099;margin-top:12px;font-weight:800}

/* Deadline results use the stopped road; all actions fit the viewport. */
#stage #challenge-hard[hidden]{display:none}
.timeout-result #result-screen{overflow-y:auto;justify-content:center;background:linear-gradient(#10243899,#102438ed);padding:24px;box-sizing:border-box}
.timeout-result .ending-summary{max-width:30em;text-align:center}
.timeout-result .result-heading{padding:0;text-align:center;justify-content:center}
.timeout-result #result-title{font-size:clamp(20px,6vw,28px);line-height:1.4}
.timeout-result #result-detail{font-size:18px;line-height:1.6;color:#ffe099;white-space:normal}
.timeout-result .ending-actions{display:grid;gap:10px;width:100%;max-width:360px}
.timeout-result .ending-actions button{width:100%;min-height:48px;margin:0}
.timeout-result #record-result,.timeout-result .finish-details{display:none}
.timeout-result .demo-ending{font-size:14px;line-height:1.5}
.ending-result .demo-ending{grid-column:1/-1;font-size:12px;line-height:1.5;margin:0;text-align:center;white-space:normal}
.hard-invitation.ending-result #challenge-hard{grid-column:1/-1}
.hard-invitation.ending-result .ending-actions{gap:5px;bottom:2%}
.hard-invitation.ending-result .demo-ending{padding:6px;background:#102438cf;border-radius:6px}
/* Reserve space for the invitation instead of overlapping the finish record. */
#stage.hard-invitation.ending-result #result-screen{display:flex;flex-direction:column;justify-content:flex-start;gap:16px;padding:18px 6%;overflow-y:auto;pointer-events:auto}
#stage.hard-invitation.ending-result #result-screen .ending-summary{position:relative;inset:auto;width:100%;flex-shrink:0}
#stage.hard-invitation.ending-result .ending-actions{position:relative;inset:auto;width:100%;margin-top:auto;flex-shrink:0}
#stage.hard-invitation.ending-result .demo-ending{box-sizing:border-box;padding:12px;font:400 16px/1.45 system-ui,-apple-system,sans-serif;letter-spacing:0;border:1px solid #ffe09955}
.challenge-unlocked,.challenge-story,.challenge-rule{display:block}
.challenge-unlocked{color:#ffe099;font-size:16px;margin-bottom:7px}
.challenge-story{color:#fff5df}
.challenge-rule{color:#ffe099;font-size:14px;margin-top:8px}
#stage.hard-invitation.ending-result #result-screen #challenge-hard{font:700 16px/1.4 system-ui,-apple-system,sans-serif;min-height:48px;padding:10px}

/* A frozen race result, with an independently coasting background. */
.timeout-result #canvas{filter:brightness(calc(1 - var(--timeout-shade,0) * .28))}
.timeout-result #sound-toggle{display:none}
.timeout-result #result-screen{pointer-events:auto;justify-content:flex-start;align-items:center;padding:calc(20px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));animation:timeout-result-in .8s ease-out both;gap:12px}
.timeout-result #result-screen>.eyebrow{display:none}
.timeout-result .ending-summary{width:100%;flex:none}
.timeout-result #result-title{font-size:25px;line-height:1.35;margin:0 0 10px}
.timeout-result #result-detail{font-size:16px;line-height:1.5;margin:0 0 12px;max-width:none}
.timeout-result .ending-actions{flex:none;gap:8px;margin:auto 0 0}
.timeout-result .demo-ending{margin:0 0 4px;color:#fff1d0}
.timeout-course-map{margin:0;width:100%}.timeout-course-map[hidden]{display:none}
.timeout-map-surface{position:relative;height:clamp(175px,34dvh,290px);border-radius:14px;background:radial-gradient(ellipse at 70% 0%,#80554988,transparent 50%),linear-gradient(100deg,#28434a,#222e3c 60%);overflow:hidden}
.timeout-map-lines{display:block;width:100%;height:100%;overflow:visible}
.timeout-map-lines path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.timeout-map-rest{stroke:#b2a5aa;stroke-width:5px;stroke-dasharray:1 9}
.timeout-map-driven{stroke:#ffc183;stroke-width:5px}
.timeout-map-goal{position:absolute;top:1%;display:flex;align-items:center;gap:5px;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:#ffe1b0}
.map-sunset{color:#ffc183;font-size:22px;line-height:1.2}
.timeout-map-start{position:absolute;bottom:1%;transform:translateX(-50%);font-size:11px;color:#e5d5ce;white-space:nowrap}
.timeout-map-car{position:absolute;transform:translate(-50%,-50%);width:29px;height:33px;padding:5px;border-radius:50%;background:#243446;color:#f29a78;box-shadow:0 0 0 4px #ffc18333}.timeout-map-car svg{display:block;width:100%;height:100%}
.timeout-map-here{position:absolute;transform:translateY(-50%);padding:4px 6px;background:#102438f2;color:#fff0d5;border-radius:6px;font-size:11px;white-space:nowrap}
.timeout-course-map figcaption{display:flex;justify-content:center;gap:18px;margin-top:8px;color:#e1d3d0;font-size:11px}.timeout-course-map figcaption>span{display:flex;align-items:center;gap:6px}
.map-key{display:inline-block;width:19px;height:4px;border-radius:3px;background:#ffc183}.map-key.remaining{background:repeating-linear-gradient(90deg,#b2a5aa 0 3px,transparent 3px 7px)}
@keyframes timeout-result-in{from{opacity:0}to{opacity:1}}
@media(max-height:620px){.timeout-result #result-screen{padding:14px 18px;gap:8px}.timeout-result #result-title{font-size:22px;margin-bottom:6px}.timeout-result #result-detail{font-size:14px;margin-bottom:8px}.timeout-result .demo-ending{font-size:12px}.timeout-result .ending-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){.timeout-result #result-screen{animation:none}}

/* Give the route the central, flexible area; keep all actions below it. */
.timeout-result #result-screen{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(180px,1fr) auto auto;gap:10px;align-items:center;padding-top:calc(clamp(20px,7dvh,60px) + env(safe-area-inset-top))}
.timeout-result .ending-summary{display:contents}
.timeout-result .result-heading{grid-row:1;margin:0}
.timeout-result #result-detail{grid-row:2;margin:0}
.timeout-result #result-detail{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid #ffc77799;border-radius:12px;background:#183746f2;color:#fff3da;text-align:left;box-sizing:border-box;width:100%}
#stage .timeout-tip-badge{flex:none;display:inline-block;padding:3px 9px;border:1px solid #ffc777;border-radius:6px;background:#173544;color:#fff3cf;-webkit-text-fill-color:#fff3cf;text-shadow:none;-webkit-text-stroke:0;font:800 15px/1.4 system-ui!important}
.timeout-tip-copy{min-width:0;align-self:center;font-size:16px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.timeout-result .timeout-course-map{grid-row:3;align-self:center;display:flex;flex-direction:column;justify-content:center;height:100%;max-height:520px;min-height:180px}
.timeout-result .timeout-course-map[hidden]{display:none}
.timeout-result .timeout-map-surface{height:auto;flex:1;min-height:155px}
.timeout-result .ranking-result{grid-row:4;justify-self:center;margin:0}
.timeout-result .ending-actions{grid-row:5;justify-self:center;margin:0}
.timeout-map-car{width:34px;height:38px}.timeout-map-car svg{transform-origin:center}
.timeout-map-here[hidden]{display:none}
.timeout-map-here{min-width:68px;padding:6px 9px;text-align:center}
.timeout-map-percent{display:block;font:700 20px/1.15 system-ui,-apple-system,sans-serif!important;font-variant-numeric:tabular-nums!important;color:#ffe1b0;white-space:nowrap}
.timeout-map-caption{display:block;font:11px/1.3 system-ui,-apple-system,sans-serif!important;margin-top:3px}.timeout-map-caption[hidden]{display:none}
@media(max-height:620px){.timeout-result #result-screen{gap:7px;padding-top:14px}.timeout-course-map figcaption{margin-top:5px}}