/* In-flight HUD: pills, hint, progress bar, toast, and the bottom ticker. */

#hud{
  position:fixed;left:0;right:0;bottom:calc(34px + env(safe-area-inset-bottom,0px) + 1.6vh);z-index:6;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;gap:1rem;padding:0 4vw;
  opacity:0;transition:opacity 1s ease .5s;
}
#hud.on{opacity:1}
.pill{
  background:var(--cream);border-radius:999px;padding:.55rem 1.4rem;
  box-shadow:0 5px 0 rgba(35,49,95,.18),0 12px 24px rgba(35,49,95,.18);
  display:flex;align-items:baseline;gap:.5rem;border:3px solid var(--navy);
}
.pill .label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--ink-label)}
.pill .value{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1rem,2.4vw,1.35rem);color:var(--navy)}
.pill .value.up{color:#2e7d6d}
.pill .value.dn{color:#c94f36}
.pill-btn{cursor:pointer;pointer-events:auto;transition:transform .15s ease;font:inherit;text-align:left}
.pill-btn:hover{transform:translateY(-2px)}

#weatherToast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 92px);transform:translateX(-50%) translateY(-8px);z-index:7;pointer-events:none;
  max-width:min(620px,92vw);text-align:center;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.03em;
  color:var(--navy);background:var(--cream);border:3px solid var(--navy);border-radius:18px;padding:.7rem 1.3rem;
  box-shadow:0 6px 0 rgba(35,49,95,.18),0 16px 28px rgba(35,49,95,.2);
  opacity:0;transition:opacity .7s ease,transform .7s ease;
}
#weatherToast.on{opacity:1;transform:translateX(-50%) translateY(0)}

#hint{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 4.5vh);transform:translateX(-50%);z-index:6;pointer-events:none;white-space:nowrap;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);background:var(--cream);border:3px solid var(--navy);border-radius:999px;padding:.5rem 1.4rem;
  box-shadow:0 5px 0 rgba(35,49,95,.18);opacity:0;transition:opacity 1s ease .7s;
}
#hint.on{opacity:1}
#hint.quiet{opacity:0!important;transition:none!important}
body.config-open #hint,body.config-open #hint.on{opacity:0}

#progress{position:fixed;top:0;left:0;height:6px;width:0%;z-index:8;border-radius:0 99px 99px 0;
  background:linear-gradient(90deg,var(--coral),var(--sun),var(--mint))}

#ticker{
  position:fixed;left:0;right:0;bottom:0;height:calc(34px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);z-index:7;overflow:hidden;
  background:var(--navy);border-top:3px solid var(--cream);
  display:flex;align-items:center;opacity:0;transition:opacity 1s ease .6s;
}
#ticker.on{opacity:1}
#ticker .tape{
  display:flex;white-space:nowrap;will-change:transform;
  animation:tape 36s linear infinite;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.06em;
}
#ticker .tk{margin-right:2.6rem}
#ticker .tk.up{color:var(--mint)}
#ticker .tk.dn{color:var(--coral)}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}