/* Route goals, saved rides and replay feedback share the site's contrast palette. */
.route-challenge { margin-top: 14px; padding-top: 12px; border-top: 1px solid #b5c8b933; color: #eef4e9; }
.route-challenge strong { display: block; font-size: 15px; line-height: 1.5; color: #fff4d6; }
.route-challenge p { margin: 5px 0; font-size: 13px; line-height: 1.65; }
.route-challenge small { display: block; font-size: 12px; line-height: 1.6; color: #e5eee1; }
.saved-ride { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 20px; margin-top: 16px; background: #102c25; border: 1px solid #b5c8b960; border-radius: 8px; }
.saved-ride-copy { flex: 1 1 240px; }
.saved-ride strong { color: #fff4d6; font-size: 16px; }
.saved-ride p { margin: 6px 0 0; color: #eef4e9; font-size: 14px; line-height: 1.6; }
.saved-ride .button { font-size: 14px; }
.saved-ride .discard-save { min-height: 44px; padding: 0 12px; background: transparent; color: #eef4e9; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.garage-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 6px; background: #e2e7d8; color: #304b3d; font-size: 13px; line-height: 1.7; }
.ride-goal { position: absolute; top: calc(96px + var(--safe-top)); left: calc(24px + var(--safe-left)); max-width: 270px; background: #102c25; border: 1px solid #b5c8b955; padding: 12px 14px; border-radius: 8px; color: #eef4e9; }
.ride-goal strong { display: block; color: #fff4d6; font-size: 13px; line-height: 1.5; }
.ride-goal span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.ride-goal small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: #dff6f3; }
.result-award { padding: 16px; background: #e2e7d8; border-radius: 8px; margin: 18px 0 0; color: #304b3d; }
.result-award strong { display: block; font-size: 20px; color: #183b32; }
.result-award p { margin: 8px 0 0; }
@media (max-width: 900px), (any-pointer: coarse) {
 .ride-goal { top: calc(188px + var(--safe-top)); left: calc(12px + var(--safe-left)); max-width: min(280px, calc(100% - 24px)); padding: 8px 10px; }
 .ride-goal strong { font-size: 12px; }
 .ride-goal span { font-size: 11px; margin-top: 3px; }
 .ride-goal small { margin-top: 3px; }
}
@media (max-height: 600px) and (orientation: landscape) {
 .ride-goal { top: calc(66px + var(--safe-top)); left: 50%; transform: translateX(-50%); max-width: 210px; padding: 6px 9px; }
 .ride-goal strong, .ride-goal span { font-size: 11px; margin-top: 0; }
 .ride-goal small { font-size: 10px; }
}
@media (max-width: 600px) {
 .saved-ride { padding: 16px; }
 .saved-ride-copy { flex-basis: 100%; }
 .saved-ride .button { flex: 1 1 150px; }
}
@media (max-width: 500px) and (max-height: 500px) {
 .ride-goal { top: calc(54px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: calc(100% - 24px); padding: 3px 8px; font-size: 10px; line-height: 1.4; }
 .ride-goal strong, .ride-goal span, .ride-goal small { display: inline; font-size: 10px; margin-right: 6px; }
}

/* Brief ride notices share the goal area on compact screens. */
@media (max-width: 900px), (any-pointer: coarse) {
 #hud:has(.toast.show) .ride-goal { visibility: hidden; }
}

@media (max-width: 500px) and (max-height: 500px) {
 #hud:has(.ride-goal:not([hidden])) .ride-time,
 #hud:has(.ride-goal:not([hidden])) .map-box,
 #hud:has(.ride-goal:not([hidden])) .telemetry { visibility: hidden; }
 .ride-goal small { display: none; }
}