/* PopeX v129 — phone QA polish from the real v128 screenshots. */

/* Eliminate the full-width seam below the shape holders. Safari/Chromium can
   resolve an inherited -webkit-fill-available rule to a shrink-wrapped main.
   Keep the transparent main full viewport height over one continuous backdrop. */
main.moonlit-app{
  min-height:100vh!important;
  min-height:100dvh!important;
  height:auto!important;
  background:transparent!important;
}

@media (orientation:portrait){
  /* Reduce the mission strip by 10px; two lines and timer still fit. */
  #gameStage{grid-template-rows:auto 50px auto auto!important}
  #gameStage>#queueTitle.queue-title{
    height:50px!important;min-height:50px!important;
  }
  #gameStage>#queueTitle .challenge-hud{
    inset:2px 0!important;
    height:calc(100% - 4px)!important;
    padding:5px 13px!important;
  }
  .challenge-hud .ch-text{gap:3px!important}
  /* The countdown position and size are calculated from tagline.bottom to
     board.top, with the same visible gap on either side. */
}
@media (orientation:portrait) and (max-height:740px){
  #gameStage{grid-template-rows:auto 41px auto auto!important}
  #gameStage>#queueTitle.queue-title{height:41px!important;min-height:41px!important}
  #gameStage>#queueTitle .challenge-hud{
    inset:1px 0!important;height:calc(100% - 2px)!important;
    padding:4px 10px!important;
  }
}
@media (orientation:portrait) and (max-height:620px){
  #gameStage{grid-template-rows:auto 31px auto auto!important}
  #gameStage>#queueTitle.queue-title{height:31px!important;min-height:31px!important}
  #gameStage>#queueTitle .challenge-hud{
    inset:0!important;height:31px!important;padding:3px 8px!important;
  }
}

/* The actual membrane visibly contracts after a restrained stretch, instead
   of simply enlarging to 148% as in v127/v128. Identical for X, check and
   the Game Over / High Score tap, without a dark overlay. */
#pw72Modal.pw127-pop-dismiss .pw72-dialog.pw117-confirm,
#gameoverModal.pw124-end-layer.is-popping #pw124EndBubble{
  animation:pw129-membrane-pop .34s cubic-bezier(.18,.55,.27,1) both!important;
  transform-origin:50% 50%!important;
}
@keyframes pw129-membrane-pop{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
  25%{opacity:1;transform:translate3d(0,0,0) scale(1.09);filter:blur(0)}
  43%{opacity:.90;transform:translate3d(0,0,0) scale(1.06);filter:blur(.3px)}
  100%{opacity:0;transform:translate3d(0,0,0) scale(.78);filter:blur(3px)}
}
#gameoverModal .pw127-pop-ring,#pw72Modal .pw127-pop-ring{
  border-width:1.7px!important;
  box-shadow:0 0 13px rgba(168,217,255,.38)!important;
  animation:pw129-burst-ring .43s cubic-bezier(.15,.6,.28,1) both!important;
}
@keyframes pw129-burst-ring{
  0%{opacity:.74;transform:translate(-50%,-50%) scale(.90)}
  35%{opacity:.77}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.33)}
}
#gameoverModal .pw127-pop-spark,#pw72Modal .pw127-pop-spark{
  box-shadow:0 0 8px rgba(244,250,255,.6)!important;
  animation:pw129-burst-flecks .48s cubic-bezier(.12,.62,.30,1) both!important;
}
@keyframes pw129-burst-flecks{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.8)}
  40%{opacity:.92}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}
}
@media (prefers-reduced-motion:reduce){
  #pw72Modal.pw127-pop-dismiss .pw72-dialog.pw117-confirm,
  #gameoverModal.pw124-end-layer.is-popping #pw124EndBubble{
    animation:none!important;opacity:0!important;
  }
  #gameoverModal .pw127-pop-ring,#pw72Modal .pw127-pop-ring,
  #gameoverModal .pw127-pop-spark,#pw72Modal .pw127-pop-spark{
    animation:none!important;opacity:0!important;
  }
}