/* PopeX v128 — compact toolbar and scoreboard, roomy missions, independent POP TIME. */

/* Slightly larger HAND-DRAWN glyphs, with unchanged round button hit targets. */
.moonlit-app .bloop-header .top-bubble .pw124-hand-icon{
  width:26px!important;
  height:26px!important;
  flex:none!important;
}
@media (max-width:390px){
  .moonlit-app .bloop-header .top-bubble .pw124-hand-icon{
    width:24px!important;height:24px!important;
  }
}
@media (max-width:340px){
  .moonlit-app .bloop-header .top-bubble .pw124-hand-icon{
    width:22px!important;height:22px!important;
  }
}
/* Older dimensions had 9–10px padding, which clips glyphs at 26px in a
   40px button. Only the inner padding changes, not the outer dimensions. */
.moonlit-app .bloop-header .top-bubble{padding:5px!important;display:grid!important;place-items:center!important}

/* Prioritize the two most actionable bits while a challenge is running. */
#gameStage>.queue-title .challenge-hud{
  gap:9px!important;
  padding:7px 14px!important;
  border-radius:13px!important;
  align-items:center!important;
}
#gameStage>.queue-title .challenge-hud::before{border-radius:12px!important}
.challenge-hud .ch-text{gap:4px!important;min-width:0!important}
.challenge-hud .ch-record{display:none!important}
.challenge-hud .ch-eyebrow{
  font-size:clamp(9px,2.4vw,11px)!important;
  letter-spacing:.9px!important;
  line-height:1.05!important;
  color:#cce5df!important;
}
.challenge-hud .ch-goal{
  font-size:clamp(11px,3.1vw,14px)!important;
  line-height:1.17!important;
  letter-spacing:.03px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.challenge-hud .ch-timer{
  flex:none!important;
  font-size:clamp(17px,4.45vw,22px)!important;
  min-width:49px!important;
}

@media (orientation:portrait){
  /* v127 390x844 layout (CSS px): header 68, stage margin 7, heading 48.
     v128: header -8, margin -4, heading +12 => exact board position. */
  .moonlit-app .bloop-header{
    height:64px!important;min-height:64px!important;
    margin-bottom:0!important;
  }
  #gameStage{margin-top:3px!important;grid-template-rows:auto 60px auto auto!important}
  #gameStage>#queueTitle.queue-title{
    height:60px!important;min-height:60px!important;
    align-self:stretch!important;
    margin:0!important;
  }
  #gameStage>#queueTitle .challenge-hud{
    inset:2px 0 2px 0!important;
    height:calc(100% - 4px)!important;
    min-height:0!important;
  }
  /* Clock is positioned from measured geometry, inside the vertical gap
     between the header and sheet — it never covers the Popex wordmark. */
  #gameStage>.stats .pop-time-hud{
    top:var(--pw128-clock-top,-2px)!important;
    left:50%!important;right:auto!important;bottom:auto!important;
    transform:translateX(-50%)!important;
    margin-left:0!important;
    width:var(--pw128-clock-size,88px)!important;
    height:var(--pw128-clock-size,88px)!important;
    padding:0!important;
    border-radius:50%!important;
  }
  #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{
    width:100%!important;height:100%!important;
    display:none;
    border-radius:50%!important;
    gap:0!important;
    padding:0!important;
  }
  .pop-time-hud.is-live .pop-time-clock{display:flex!important}
  #gameStage .pop-time-clock small{
    font-size:clamp(7px,calc(var(--pw128-clock-size,88px)*.094),10px)!important;
    line-height:1.05!important;
    letter-spacing:.7px!important;
    margin:5px 0 1px!important;
  }
  #gameStage .pop-time-clock strong{
    font-size:clamp(30px,calc(var(--pw128-clock-size,88px)*.46),49px)!important;
    line-height:.94!important;
    margin:2px 0 2px!important;
  }
  #gameStage .pop-time-clock span{
    font-size:clamp(7px,calc(var(--pw128-clock-size,88px)*.088),9px)!important;
    line-height:1.05!important;
    letter-spacing:.4px!important;
    margin:1px 0 5px!important;
  }
}
@media (orientation:portrait) and (min-height:741px) and (max-width:390px){
  .moonlit-app .bloop-header{height:60px!important;min-height:60px!important}
}
@media (orientation:portrait) and (max-height:740px){
  /* Short devices: gain as much challenge space as is safe, without
     reducing board or obscuring the shape tray. */
  .moonlit-app .bloop-header{height:52px!important;min-height:52px!important}
  #gameStage{margin-top:2px!important;grid-template-rows:auto 43px auto auto!important}
  #gameStage>#queueTitle.queue-title{height:43px!important;min-height:43px!important}
  #gameStage>#queueTitle .challenge-hud{height:calc(100% - 2px)!important;inset:1px 0!important;padding:5px 10px!important}
  .challenge-hud .ch-text{gap:2px!important}
  .challenge-hud .ch-eyebrow{font-size:9px!important}
  .challenge-hud .ch-goal{font-size:11px!important}
  .challenge-hud .ch-timer{font-size:17px!important}
}
@media (orientation:portrait) and (max-height:620px){
  /* Protect tiny phones; the header/scores stay readable, and any remaining
     space is allocated to the board rather than a big mission bar. */
  .moonlit-app .bloop-header{height:50px!important;min-height:50px!important}
  #gameStage{margin-top:2px!important;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}
  .challenge-hud .ch-eyebrow{font-size:8px!important}
  .challenge-hud .ch-goal{font-size:10px!important}
  .challenge-hud .ch-timer{font-size:15px!important;min-width:38px!important}
}
/* Smaller, short-lived closing ripple: elegant membrane break instead of
   a large halo covering most of the table. */
#gameoverModal .pw127-pop-ring,#pw72Modal .pw127-pop-ring{
  border-width:1.5px!important;
  box-shadow:0 0 9px rgba(168,217,255,.23)!important;
  animation:pw128-ring-close .40s ease-out both!important;
}
#gameoverModal .pw127-pop-spark,#pw72Modal .pw127-pop-spark{
  box-shadow:0 0 6px rgba(244,250,255,.42)!important;
  animation:pw128-spark-close .42s cubic-bezier(.2,.7,.4,1) both!important;
}
@keyframes pw128-ring-close{
  from{opacity:.58;transform:translate(-50%,-50%) scale(.90)}
  to{opacity:0;transform:translate(-50%,-50%) scale(1.20)}
}
@keyframes pw128-spark-close{
  0%{opacity:.92;transform:translate(-50%,-50%) scale(.75)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25)}
}
@media(prefers-reduced-motion:reduce){
 #gameoverModal .pw127-pop-ring,#pw72Modal .pw127-pop-ring,
 #gameoverModal .pw127-pop-spark,#pw72Modal .pw127-pop-spark{animation:none!important;opacity:0!important}
}

/* v128 local playtest diagnostics live exclusively inside the Settings sheet. */
#gameSettings .playtest-stats{margin-top:10px!important}
#gameSettings .playtest-stats>summary{font-weight:850!important}
#gameSettings .playtest-stats .session-stats-grid{margin-top:10px}
#gameSettings .playtest-stats p{font-size:11px!important;line-height:1.5!important;color:#bdcbe7!important}