.scroll-hud{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none}.hud-track{position:absolute;left:0;right:0;bottom:0;height:6px;background:#3ab36424;overflow:visible}.hud-fill{position:absolute;inset-block:0;left:0;width:0;background:linear-gradient(90deg,#3ab364,#00d4fd);box-shadow:0 0 10px #00d4fd8c}.hud-won .hud-fill{background:linear-gradient(90deg,#3ab364,#00d4fd,#a78bfa,#fb923c,#f472b6,#facc15,#3ab364);background-size:200% 100%;box-shadow:0 0 16px #a78bfab3;animation:hudRainbow 1.2s linear infinite}@keyframes hudRainbow{to{background-position:200% 0}}.hud-runner{position:absolute;left:0;bottom:-7px;transform:translate(-50%);font-size:18px;line-height:1;filter:drop-shadow(0 0 6px rgba(250,204,21,.9));animation:hudBob 1.1s ease-in-out infinite;transition:opacity .3s ease}.hud-idle .hud-runner{opacity:0}@keyframes hudBob{0%,to{transform:translate(-50%) translateY(0) rotate(-8deg)}50%{transform:translate(-50%) translateY(-4px) rotate(8deg)}}.hud-pill{position:absolute;bottom:18px;right:18px;display:inline-grid}.hud-pill.hud-pill-pop{animation:hudPop .5s ease-out}@keyframes hudPop{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-3deg)}to{transform:scale(1)}}.hud-face{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:800;color:#fff;white-space:nowrap;text-decoration:none;background:linear-gradient(135deg,#3ab364,#00d4fd);box-shadow:0 6px 22px #3ab36473;opacity:0;transform:scale(.8) translateY(6px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}.hud-pill[data-phase=start] .hud-face-start,.hud-pill[data-phase=points] .hud-face-points,.hud-pill[data-phase=win] .hud-face-win{opacity:1;transform:none}.hud-pill[data-phase=start] .hud-face-start{pointer-events:auto;animation:hudPulseShadow 2.2s ease-in-out infinite}.hud-pill[data-phase=start] .hud-face-start:hover{transform:translateY(-2px)}@keyframes hudPulseShadow{0%,to{box-shadow:0 6px 22px #3ab36473}50%{box-shadow:0 10px 32px #3ab364b8}}.hud-pill-star{font-size:12px;opacity:.9}.hud-pill-label{font-size:10px;font-weight:700;opacity:.85}.hud-points{font-variant-numeric:tabular-nums;letter-spacing:.02em}.hud-face-win{font-size:15px;background:linear-gradient(135deg,#facc15,#fb923c);box-shadow:0 6px 26px #fb923c99}.hud-pill[data-phase=win] .hud-face-win{animation:hudGlow 1.4s ease-in-out infinite}@keyframes hudGlow{0%,to{box-shadow:0 6px 26px #fb923c99}50%{box-shadow:0 8px 38px #facc15d9}}.hud-confetti{position:absolute;left:0;right:0;bottom:6px;height:0;overflow:visible}.hud-piece{position:absolute;bottom:0;display:block;will-change:transform,opacity;animation:hudPiece 1s ease-out forwards}@keyframes hudPiece{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}.hud-sparkle{position:absolute;bottom:0;transform:translate(-50%);font-size:11px;color:#facc15;will-change:transform,opacity;animation:hudSparkle .7s ease-out forwards}@keyframes hudSparkle{0%{opacity:1;transform:translate(-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(calc(-50% + var(--sx)),var(--sy)) scale(.3) rotate(90deg)}}.hud-rain-layer{position:fixed;inset:0;z-index:39;pointer-events:none;overflow:hidden}.hud-drop{position:absolute;top:-8vh;will-change:transform,opacity;animation:hudDrop linear forwards}@keyframes hudDrop{0%{opacity:0;transform:translateY(-10vh) rotate(0)}12%{opacity:1}85%{opacity:1}to{opacity:0;transform:translateY(112vh) rotate(var(--rr))}}@media(prefers-reduced-motion:reduce){.hud-runner,.hud-pill.hud-pill-pop,.hud-won .hud-fill,.hud-pill[data-phase=start] .hud-face-start,.hud-pill[data-phase=win] .hud-face-win{animation:none}}html{scroll-behavior:smooth}@keyframes landingFadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes landingPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes landingBlink{0%,to{opacity:.3}50%{opacity:1}}@keyframes landingFloat{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}.anim-float{animation:landingFloat 5s ease-in-out infinite}.anim-fade-up{animation:landingFadeUp .6s ease-out both}.anim-fade-up-2{animation:landingFadeUp .6s .08s ease-out both}.anim-fade-up-3{animation:landingFadeUp .6s .16s ease-out both}.anim-fade-up-4{animation:landingFadeUp .6s .28s ease-out both}.anim-pulse-slow{animation:landingPulse 7s ease-in-out infinite}.anim-pulse-slower{animation:landingPulse 9s ease-in-out infinite}.anim-blink{animation:landingBlink ease-in-out infinite}
