/* Mipez.app V5.1.8 — Surface & Sky Gameplay Evolution
 * Compact aerial-contract HUD. Independent of the stable V5.1.7 responsive layer.
 */

#mipez-sky-hud-v518{
  position:absolute;
  z-index:78;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  width:min(270px,calc(100vw - 28px));
  min-height:42px;
  padding:6px 9px;
  border:1px solid rgba(153,234,255,.34);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(3,51,88,.88),rgba(2,30,67,.88));
  box-shadow:0 10px 30px rgba(0,18,55,.24),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  color:#f4fdff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s step-end;
  left:50%;
  top:12px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#mipez-sky-hud-v518.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s;
}
#mipez-sky-hud-v518.is-complete{
  border-color:rgba(253,224,71,.54);
  background:linear-gradient(180deg,rgba(77,65,10,.90),rgba(37,44,37,.90));
  box-shadow:0 10px 30px rgba(66,48,0,.22),0 0 24px rgba(253,224,71,.10);
}
.mipez-sky-v518__icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:rgba(103,232,249,.13);
  border:1px solid rgba(165,243,252,.24);
  font-size:15px;
  line-height:1;
}
.mipez-sky-v518__copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.mipez-sky-v518__copy b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#effcff;
  font-size:10px;
  line-height:1.05;
  letter-spacing:.045em;
  font-weight:850;
}
.mipez-sky-v518__copy small{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#a9eaff;
  font-size:9px;
  line-height:1;
  font-weight:750;
}
.mipez-sky-v518__copy small span{letter-spacing:.08em;color:#d8f8ff}
.mipez-sky-v518__copy small em{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#7dd3fc;
  font-style:normal;
}
#mipez-sky-hud-v518>strong{
  min-width:34px;
  padding:5px 6px;
  border-radius:9px;
  background:rgba(0,20,49,.46);
  color:#fff4a8;
  font-size:10px;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

body[data-mipez-game-phase]:not([data-mipez-game-phase="playing"]) #mipez-sky-hud-v518,
body:not(.mipez-game-active) #mipez-sky-hud-v518{
  display:none!important;
}

/* Portrait: sit below the event/octopus stack and above the player's main field. */
@media (orientation:portrait) and (max-width:620px){
  #mipez-sky-hud-v518{
    top:122px;
    width:min(218px,calc(100vw - 24px));
    min-height:36px;
    grid-template-columns:25px minmax(0,1fr) auto;
    gap:5px;
    padding:5px 7px;
    border-radius:12px;
  }
  .mipez-sky-v518__icon{width:24px;height:24px;border-radius:8px;font-size:13px}
  .mipez-sky-v518__copy b{font-size:8.8px}
  .mipez-sky-v518__copy small{font-size:8px;gap:5px}
  #mipez-sky-hud-v518>strong{min-width:29px;padding:4px 5px;font-size:8.8px}
}

/* Short landscape: top rows are occupied by native stats/events. The center-bottom
   corridor is already reserved between joystick and Bubble/Turbo controls. */
@media (orientation:landscape) and (max-height:560px){
  #mipez-sky-hud-v518{
    top:auto;
    bottom:47px;
    width:min(230px,calc(100vw - 330px));
    min-width:178px;
    min-height:34px;
    grid-template-columns:24px minmax(0,1fr) auto;
    gap:5px;
    padding:4px 7px;
    border-radius:12px;
    background:linear-gradient(180deg,rgba(2,45,78,.88),rgba(2,26,58,.88));
  }
  .mipez-sky-v518__icon{width:23px;height:23px;border-radius:8px;font-size:12px}
  .mipez-sky-v518__copy b{font-size:8.7px}
  .mipez-sky-v518__copy small{font-size:7.8px;gap:5px}
  #mipez-sky-hud-v518>strong{min-width:28px;padding:4px 5px;font-size:8.7px}
}

@media (orientation:landscape) and (max-height:560px) and (max-width:620px){
  #mipez-sky-hud-v518{width:min(190px,calc(100vw - 270px));min-width:150px}
  .mipez-sky-v518__copy small em{display:none}
}

@media (prefers-reduced-motion:reduce){
  #mipez-sky-hud-v518{transition:none!important}
}