/* 53 RUNZ V1.4.8 — compact floating HUD */
:root{
  --hud-glass:rgba(12,10,16,.72);
  --hud-glass-strong:rgba(19,14,27,.88);
  --hud-line:rgba(225,211,255,.17);
  --hud-purple:#c9a8ff;
  --hud-white:#fff9ff;
  --hud-muted:#a99fb3;
}

.runz-hud{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  gap:6px!important;
}

.runz-hud>div,
.runz-hud .runz-effect,
.runz-hud .runz-unlock-mini{
  position:relative!important;
  min-width:0!important;
  border:1px solid var(--hud-line)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(28,22,36,.82),var(--hud-glass))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 7px 20px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.25)!important;
  backdrop-filter:blur(12px) saturate(1.25)!important;
}

.runz-hud>div:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 35%,transparent 70%,rgba(185,136,255,.055))!important;
}

.runz-hud span{
  position:relative!important;
  z-index:2!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--hud-muted)!important;
  font-family:"Baloo 2","Fredoka",Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.runz-hud strong{
  position:relative!important;
  z-index:2!important;
  color:var(--hud-white)!important;
  font-family:"Baloo 2","Fredoka",Arial,sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
  line-height:1!important;
  text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 12px rgba(188,135,255,.12)!important;
  white-space:nowrap!important;
}

/* CASH = hero chip */
.runz-hud>div:nth-child(1){
  border-color:rgba(232,201,255,.42)!important;
  background:linear-gradient(135deg,rgba(86,43,126,.9),rgba(28,18,39,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 7px 22px rgba(112,54,164,.2),0 0 18px rgba(182,114,255,.08)!important;
}
.runz-hud>div:nth-child(1) span{color:#e9d7ff!important;}
.runz-hud>div:nth-child(1) strong{color:#fff!important;text-shadow:0 0 15px rgba(226,195,255,.3)!important;}

/* BEST = chrome / record chip */
.runz-hud>div:nth-child(2){
  background:linear-gradient(180deg,rgba(36,35,41,.84),rgba(13,12,16,.76))!important;
}
.runz-hud>div:nth-child(2) strong{color:#e7e5eb!important;}

/* distance + tempo stay deliberately quiet */
.runz-hud>div:nth-child(3),
.runz-hud>div:nth-child(4){opacity:.91!important;}

/* active effect has its own purple status glow */
.runz-hud .runz-effect{
  border-color:rgba(188,139,255,.34)!important;
  background:linear-gradient(135deg,rgba(55,31,76,.86),rgba(17,13,23,.8))!important;
}
.runz-hud .runz-effect strong{
  color:#dec7ff!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.runz-hud .runz-unlock-mini{
  padding-right:.6rem!important;
}
.runz-hud .runz-unlock-mini i{
  position:absolute!important;
  z-index:2!important;
  left:.55rem!important;
  right:.55rem!important;
  bottom:4px!important;
  height:2px!important;
  margin:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  overflow:hidden!important;
}
.runz-hud .runz-unlock-mini i b{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#8f5cff,#d6b7ff,#fff)!important;
  box-shadow:0 0 8px rgba(188,132,255,.5)!important;
}

/* desktop / wider web layout */
@media (min-width:761px){
  .runz-hud{
    grid-template-columns:1.16fr 1fr .86fr .8fr 1.35fr 1.06fr!important;
  }
  .runz-hud>div,
  .runz-hud .runz-effect,
  .runz-hud .runz-unlock-mini{
    min-height:48px!important;
    padding:.48rem .72rem!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:.5rem!important;
  }
  .runz-hud span{font-size:.35rem!important;}
  .runz-hud strong{font-size:.94rem!important;}
  .runz-hud .runz-effect strong{font-size:.58rem!important;}
}

/* actual iPhone / phone landscape HUD */
@media (orientation:landscape) and (max-height:650px){
  .runz-mobile-app .runz-hud{
    z-index:42!important;
    top:38px!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    grid-template-columns:1.16fr .94fr .82fr .76fr 1.34fr 1.02fr!important;
    gap:4px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .runz-mobile-app .runz-hud>div,
  .runz-mobile-app .runz-hud .runz-effect,
  .runz-mobile-app .runz-hud .runz-unlock-mini{
    min-height:33px!important;
    height:33px!important;
    padding:.18rem .48rem!important;
    border-radius:999px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:.26rem!important;
    text-align:left!important;
  }

  .runz-mobile-app .runz-hud span{
    flex:0 1 auto!important;
    width:auto!important;
    max-width:48%!important;
    font-size:clamp(.18rem,.63vw,.27rem)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .runz-mobile-app .runz-hud strong,
  .runz-mobile-app .runz-hud .runz-effect strong{
    flex:1 1 auto!important;
    width:auto!important;
    max-width:68%!important;
    text-align:right!important;
    font-size:clamp(.42rem,1.22vw,.68rem)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .runz-mobile-app .runz-hud>div:nth-child(1) strong{
    font-size:clamp(.54rem,1.45vw,.78rem)!important;
  }

  .runz-mobile-app .runz-hud .runz-effect strong{
    font-size:clamp(.32rem,.94vw,.52rem)!important;
  }

  .runz-mobile-app .runz-hud .runz-unlock-mini{
    padding-bottom:.28rem!important;
  }
}

@media (orientation:landscape) and (max-height:390px){
  .runz-mobile-app .runz-hud{top:32px!important;gap:3px!important;}
  .runz-mobile-app .runz-hud>div,
  .runz-mobile-app .runz-hud .runz-effect,
  .runz-mobile-app .runz-hud .runz-unlock-mini{
    min-height:29px!important;
    height:29px!important;
    padding:.13rem .36rem!important;
  }
  .runz-mobile-app .runz-hud span{font-size:clamp(.16rem,.58vw,.24rem)!important;}
  .runz-mobile-app .runz-hud strong,
  .runz-mobile-app .runz-hud .runz-effect strong{font-size:clamp(.37rem,1.08vw,.58rem)!important;}
}