/* v39 HUD spacing + persistence pass.
   UI-only sizing/spacing: gameplay canvas, ball, hoops and physics are untouched. */

/* Desktop: make the score panel a little wider, keep the progress dashes clearly
   below it, trim the lives capsule, and enlarge impact/combo cards by ~30%. */
@media (hover:hover) and (pointer:fine){
  .game-shell .hud .score-stack{
    min-width:104px!important;
    padding-inline:12px!important;
    box-sizing:border-box!important;
  }

  .game-shell .hud .wave-meter{
    top:max(156px,calc(env(safe-area-inset-top) + 146px))!important;
    gap:7px!important;
  }

  .game-shell .hud .life-row{
    left:18px!important;
    top:max(106px,calc(env(safe-area-inset-top) + 96px))!important;
    padding:5px 7px!important;
    gap:3px!important;
    border-radius:18px!important;
  }
  .game-shell .hud .life-ball{
    width:30px!important;
    height:30px!important;
  }

  .game-shell .impact-toast{
    min-width:229px!important;
    max-width:min(400px,calc(100% - 38px))!important;
    padding:14px 25px 16px!important;
    gap:5px!important;
    border-width:3px!important;
  }
  .game-shell .impact-toast-line.primary{
    font-size:32px!important;
    line-height:1.03!important;
  }
  .game-shell .impact-toast-line.secondary{
    font-size:18px!important;
    line-height:1.12!important;
  }
  .game-shell .impact-toast::before{inset:-9px!important}
  .game-shell .impact-toast::after{inset:-23px -25px!important}
}

/* Taller desktop court uses the larger score type, so preserve a real vertical gap
   between the score card and the progress dashes. */
@media (hover:hover) and (pointer:fine) and (min-height:760px){
  .game-shell .hud .score-stack{min-width:112px!important;padding-inline:14px!important}
  .game-shell .hud .wave-meter{top:max(188px,calc(env(safe-area-inset-top) + 178px))!important}
  .game-shell .hud .life-row{
    left:22px!important;
    top:max(124px,calc(env(safe-area-inset-top) + 114px))!important;
    padding:5px 8px!important;
  }
  .game-shell .hud .life-ball{width:34px!important;height:34px!important}
}

/* Compact desktop embeds keep the same anchors, with enough clearance below the
   score card without pushing the meter too far into the playfield. */
@container court (max-width:420px){
  @media (hover:hover) and (pointer:fine){
    .game-shell .hud .wave-meter{top:max(156px,calc(env(safe-area-inset-top) + 146px))!important}
    .game-shell .hud .life-row{top:max(104px,calc(env(safe-area-inset-top) + 94px))!important}
  }
}

/* Phone/tablet: do NOT widen the score card. Move the meter below it and make the
   dashes a touch smaller. The lives capsule is also slightly tighter with a clean gap. */
@media (hover:none), (pointer:coarse){
  .game-shell .hud .score-stack{
    min-width:118px!important;
    padding:6px 12px!important;
  }
  .game-shell .hud .wave-meter{
    top:max(108px,calc(env(safe-area-inset-top) + 94px))!important;
    gap:4px!important;
  }
  .game-shell .hud .wave-meter span{
    width:13.5px!important;
    height:4.5px!important;
    flex:0 0 13.5px!important;
  }
  .game-shell .hud .life-row{
    left:14px!important;
    top:max(78px,calc(env(safe-area-inset-top) + 64px))!important;
    padding:4px 6px!important;
    gap:2px!important;
    border-radius:16px!important;
  }
  .game-shell .hud .life-ball{width:25px!important;height:25px!important}
}

/* The larger desktop impact card sits below the HUD instead of covering the meter. */
@media (hover:hover) and (pointer:fine){
  .game-shell .impact-toast{top:26%!important}
}
@media (hover:hover) and (pointer:fine) and (max-height:700px){
  .game-shell .impact-toast{top:29%!important}
}