/* Sled Run (sled.html, docs/112): what it has that Cara Runs (css/run.css) does not. */
#sled-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* the score and the distance, top left */
.shud__left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); display: grid; justify-items: start; gap: 2px; pointer-events: none; }
.shud__score { font: 900 clamp(1.9rem, 6vw, 2.8rem)/1 var(--font-display); letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.3); }
.shud__score.is-pop { animation: spop 0.3s ease-out; }
.shud__dist { font: 700 0.95rem/1.1 var(--font-body); color: #e8f2ff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); font-variant-numeric: tabular-nums; }
@keyframes spop { 0% { transform: scale(1.22); color: #ffe7a8; } 100% { transform: scale(1); } }
/* the combo: a big multiplier under the score while tricks run on, its ring running down */
.shud__combo { position: absolute; left: max(16px, env(safe-area-inset-left)); top: calc(max(14px, env(safe-area-inset-top)) + clamp(4rem, 10vw, 5rem)); display: grid; justify-items: start; pointer-events: none; animation: rp-in 0.2s ease-out; }
.shud__combo b { font: 900 clamp(1.5rem, 5vw, 2.1rem)/1 var(--font-display); color: #ffd25a; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 180, 60, 0.6); }
.shud__combo small { font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #fff3df; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.shud__combo i { display: block; width: 90px; height: 4px; margin-top: 4px; border-radius: 99px; background: linear-gradient(90deg, #ffd25a, #ff8a3a); transform-origin: left; transform: scaleX(var(--k, 1)); }
/* a trick's name, big over the slope as she lands it */
.strick { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; pointer-events: none; white-space: nowrap; animation: strick 1.3s ease-out forwards; }
.strick b { font: 900 clamp(1.5rem, 5.5vw, 2.4rem)/1.05 var(--font-display); letter-spacing: 0.05em; color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 22px rgba(120, 200, 255, 0.55); }
.strick small { font: 800 clamp(1rem, 3.4vw, 1.3rem)/1 var(--font-body); color: #ffd25a; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.strick.is-big b { color: #ffe9a8; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 200, 80, 0.85); }
@keyframes strick { 0% { transform: translateX(-50%) scale(0.5); opacity: 0; } 12% { transform: translateX(-50%) scale(1.12); opacity: 1; } 24% { transform: translateX(-50%) scale(1); } 78% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-22px); opacity: 0; } }
/* the power-ups' badges and banners */
.rp--glide { --c: #ffa458; } .rp--turbo { --c: #ffe04a; }
.rhud__banner.is-glide { background: linear-gradient(90deg, rgba(240, 106, 30, 0.8), rgba(47, 180, 168, 0.8)); }
.rhud__banner.is-turbo { background: linear-gradient(90deg, rgba(200, 120, 0, 0.85), rgba(255, 230, 80, 0.8)); color: #2a1600; text-shadow: none; }
.rhud__banner.is-night { background: linear-gradient(90deg, rgba(20, 60, 90, 0.85), rgba(80, 220, 160, 0.7), rgba(150, 90, 230, 0.75)); }
.rhud__banner.is-far { background: rgba(10, 20, 40, 0.78); border: 1px solid rgba(180, 220, 255, 0.4); }
/* the turbo: streaks of light at the screen's edges */
.sturbo { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(255, 220, 120, 0.18) 80%, rgba(255, 180, 60, 0.35) 100%); }
.sturbo.is-on { opacity: 1; }
/* the title's choice of ride */
.sride { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sride button { padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #e4ece4; font: 800 0.95rem/1 var(--font-body); cursor: pointer; }
.sride button[aria-checked="true"] { border-color: #9dd8ff; background: rgba(120, 200, 255, 0.16); color: #fff; box-shadow: 0 0 0 1px #9dd8ff inset; }
.sride button:focus-visible { outline: 2px solid #ffbe6e; outline-offset: 2px; }
/* Call Cara: big and green on the title and end screens */
.gbtn.gbtn--call.scall { min-height: 58px; }
.gbtn.gbtn--call.scall .gbtn__label { font-size: 1.12rem; }
.gbtn.scall .gbtn__label::before { content: '📞 '; }
#sled-title .rbest { flex-wrap: wrap; gap: 6px 18px; }
#sled-over .rstats { grid-template-columns: repeat(6, 1fr); }
#sled-hint { top: 40%; bottom: auto; }
@media (max-width: 560px) {
.rhud__right { gap: 6px; }
.rhud__right .rhud__btn { width: 36px; height: 36px; font-size: 0.95rem; }
.rhud__right .rhud__tokens { padding: 5px 10px 5px 6px; font-size: 1.05rem; }
#sled-powers { top: auto; bottom: max(150px, calc(env(safe-area-inset-bottom) + 136px)); }
#sled-over .rstats { grid-template-columns: repeat(3, 1fr); }
.strick { top: 30%; }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
/* a phone on its side: the title card compact, Ride and Call Cara side by side */
@media (max-height: 460px) {
#sled-title .rcard, #sled-over .rcard { padding: 14px 18px 12px; }
#sled-title .rcard__eyebrow, #sled-title .rcard__tag { display: none; }
#sled-title .rlogo, #sled-over .rcard__head { font-size: clamp(1.8rem, 7vh, 2.4rem); }
#sled-title .rtabs--title { margin: 8px 0; }
#sled-title .rbest, #sled-title .sride { margin-top: 4px; }
#sled-title .ractions, #sled-over .ractions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#sled-title .ractions > :not(.gbtn--tall):not(.scall), #sled-over .ractions > :not(.gbtn--tall):not(.scall) { grid-column: 1 / -1; }
#sled-over .rstats { margin-top: 8px; grid-template-columns: repeat(6, 1fr); }
#sled-over .rcard__text { margin-top: 6px; font-size: 0.9rem; }
.shud__combo { top: 84px; }
}
@media (prefers-reduced-motion: reduce) { .shud__score.is-pop, .strick, .shud__combo { animation: none; } }