/* ============================================================
   Mawhiba Future · Progress HUD (shared)
   Upgrades the slim topbar progress bar into a visible
   start-to-finish mission tracker: rocket marker, % pill,
   milestone ticks. Cosmetic layer — engine untouched.
   Pairs with assets/progress-hud.js
   ============================================================ */

/* dedicated full-width row directly below the topbar */
.phud-row{
  display:flex; align-items:center; gap:10px;
  padding:0 22px 10px;
}
.phud-row .progress-wrap.phud{ flex:1; min-width:0; }

/* taller, more visible track */
.progress-wrap.phud{
  position:relative;
  height:20px !important;
  overflow:visible !important;           /* let the rocket ride on top */
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--mhf-hairline, rgba(0,0,0,.08)),
             inset 0 2px 4px rgba(0,0,0,.06);
}
.progress-wrap.phud .progress-bar{
  border-radius:99px;
  box-shadow:0 0 10px rgba(15,230,218,.45);
}

/* milestone ticks at 25 / 50 / 75 % */
.phud-tick{
  position:absolute; top:50%; width:6px; height:6px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(0,0,0,.14);
  pointer-events:none;
  transition:background .4s, box-shadow .4s;
}
.phud-tick.lit{
  background:var(--mhf-cta, #ffd04f);
  box-shadow:0 0 8px rgba(255,208,79,.9);
}

/* rocket marker riding the leading edge */
.phud-rocket{
  position:absolute; top:50%; left:0;
  transform:translate(-50%,-50%) rotate(45deg);
  font-size:20px; line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  transition:left .5s cubic-bezier(.4,1.3,.5,1);
  pointer-events:none;
  z-index:2;
}
.phud-rocket.phud-pop{ animation:phudPop .6s ease; }
@keyframes phudPop{
  0%,100%{ transform:translate(-50%,-50%) rotate(45deg) scale(1); }
  50%    { transform:translate(-50%,-50%) rotate(45deg) scale(1.45); }
}

/* percent pill */
.phud-pct{
  display:flex; align-items:center;
  font-weight:800; font-size:15px;
  font-variant-numeric:tabular-nums;
  color:var(--mhf-primary, #0a8f86);
  background:#fff;
  padding:5px 11px; border-radius:99px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  white-space:nowrap;
  min-width:52px; justify-content:center;
}
.phud-pct.phud-pop{ animation:phudPctPop .6s ease; }
@keyframes phudPctPop{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.18); background:var(--mhf-primary-soft, #e0f5f3); }
}

/* dark ambient themes: keep pill text readable (see dark-theme rule) */
body.amb .phud-pct{ color:var(--mhf-primary, #0a8f86); background:#fff; }

@media (max-width:560px){
  .phud-row{ padding:0 14px 8px; gap:8px; }
  .phud-pct{ font-size:13px; padding:4px 8px; min-width:44px; }
  .phud-rocket{ font-size:17px; }
}