/* First-paint loading scene. Only the mascot's transform and opacity animate. */
#loading{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:#ff5fa2;
  color:#7c173e;text-align:center;font-family:Fredoka,system-ui,sans-serif}
#loading .loading-content{width:min(340px,100%)}
#loading .loading-scene{height:240px;position:relative;overflow:hidden;isolation:isolate}
#loading .loading-track{position:absolute;left:calc(50% - 56px);top:30px;width:112px;height:112px;border:2px dashed rgba(38,153,151,.24);border-radius:50%;transform:rotate(-12deg)}
#loading .loading-road{position:absolute;left:12%;right:12%;bottom:23px;height:3px;border-radius:50%;background:rgba(124,23,62,.13)}
#loading .loading-mascot{position:absolute;left:calc(50% - 42px);top:112px;width:84px;
  transform-origin:50% 75%;animation:gizmo-loading-loop 3s linear infinite;will-change:transform,opacity}
#loading .loading-mascot img{display:block;width:100%;height:auto}
#loading .loading-title{margin:0;font:900 clamp(22px,5.7vw,28px)/1.15 Effra,Fredoka,system-ui,sans-serif}
#loading .loading-caption{margin:10px 0 0;font-size:15px;line-height:1.4;color:#7c173e}
@keyframes gizmo-loading-loop{
  0%{transform:translate(-180px,34px) rotate(-5deg);opacity:0}
  12%{transform:translate(-98px,31px) rotate(-5deg);opacity:1}
  26%{transform:translate(-30px,28px) rotate(-15deg);opacity:1}
  37%{transform:translate(33px,-7px) rotate(-75deg);opacity:1}
  46%{transform:translate(49px,-59px) rotate(-155deg);opacity:1}
  55%{transform:translate(5px,-88px) rotate(-245deg);opacity:1}
  64%{transform:translate(-37px,-48px) rotate(-325deg);opacity:1}
  74%{transform:translate(10px,29px) rotate(-365deg);opacity:1}
  88%{transform:translate(102px,31px) rotate(-355deg);opacity:1}
  100%{transform:translate(180px,34px) rotate(-360deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  #loading .loading-mascot{animation:none;transform:translate(0,18px);opacity:1;will-change:auto}
  #loading .loading-track{display:none}
}
@media(max-height:420px){
  #loading .loading-scene{height:190px}
  #loading .loading-mascot{top:88px;width:68px;left:calc(50% - 34px)}
  #loading .loading-track{top:8px}
  #loading .loading-road{bottom:5px}
  #loading .loading-caption{margin-top:6px}
}

#loading .loading-retry{margin-top:18px;padding:10px 22px;border:2px solid #7c173e;border-radius:24px;background:#fff3df;color:#7c173e;font:700 16px Fredoka,system-ui,sans-serif;cursor:pointer}
#loading .loading-retry[hidden]{display:none}
#loading.loading-still .loading-mascot{animation-play-state:paused;will-change:auto}