/* PopeX v138 — restore touch morph on NEXT, replace POP TIME bubble with text-only overlay. */

/* 1) Bring back tactile feedback when a NEXT shape is rotated or pressed.
   Only the decorative membrane morphs; the hit target stays stable. */
#gameStage>#rack>.piece.tap-rotated::before{
  animation:pw138PocketRotate .28s cubic-bezier(.2,.82,.25,1.18) both!important;
  opacity:1!important;
}
#gameStage>#rack>.piece:not(.used):active::before{
  animation:pw138PocketPress .20s cubic-bezier(.22,.8,.24,1) both!important;
  opacity:1!important;
}
@keyframes pw138PocketRotate{
  0%{transform:translate3d(0,0,0) rotate(-.45deg) scale(.99,1.005);border-radius:47% 53% 49% 51% / 52% 47% 53% 48%}
  28%{transform:translate3d(.6px,-1px,0) rotate(1.1deg) scale(1.03,.97);border-radius:42% 58% 55% 45% / 45% 53% 47% 55%}
  62%{transform:translate3d(-.45px,.5px,0) rotate(-.8deg) scale(.985,1.025);border-radius:56% 44% 48% 52% / 55% 44% 56% 45%}
  100%{transform:translate3d(0,0,0) rotate(-.45deg) scale(.99,1.005);border-radius:47% 53% 49% 51% / 52% 47% 53% 48%}
}
@keyframes pw138PocketPress{
  0%{transform:translate3d(0,0,0) scale(.99,1.005)}
  45%{transform:translate3d(.35px,-.4px,0) scale(1.015,.987)}
  100%{transform:translate3d(0,0,0) scale(.99,1.005)}
}

/* 2) POP TIME clock becomes text-only. Use the freed header space better. */
body.pop-time-active #gameStage>.stats .stat{
  opacity:0!important;
  transform:translateY(-5px)!important;
  pointer-events:none!important;
}
#gameStage>.stats .stat{transition:opacity .16s ease,transform .16s ease}
#gameStage>.stats .pop-time-hud{
  top:-2px!important; bottom:auto!important; left:0!important; right:0!important;
  height:96px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  pointer-events:none!important; background:none!important; border:0!important; box-shadow:none!important;
}
#gameStage .pop-time-clock,.moonlit-app .pop-time-clock{
  width:auto!important; height:auto!important; min-width:0!important;
  padding:0!important; margin:0!important; gap:2px!important;
  display:grid!important; justify-items:center!important; align-content:center!important;
  border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important;
  animation:pw138PopTimeTextIn .22s cubic-bezier(.22,.8,.24,1) both!important;
}
#gameStage .pop-time-clock::before,#gameStage .pop-time-clock::after,.moonlit-app .pop-time-clock::before,.moonlit-app .pop-time-clock::after{
  content:none!important; display:none!important;
}
#gameStage .pop-time-clock small{
  display:block!important; margin:0!important;
  font-size:clamp(12px,2.9vw,15px)!important;
  letter-spacing:2.2px!important; line-height:1!important;
  color:rgba(244,248,255,.96)!important; text-shadow:0 1px 10px rgba(8,14,36,.22)!important;
}
#gameStage .pop-time-clock strong{
  display:block!important; margin:0!important;
  font-size:clamp(56px,13vw,76px)!important; line-height:.88!important;
  color:#ffffff!important; text-shadow:0 2px 16px rgba(12,18,45,.26)!important;
}
#gameStage .pop-time-clock span{
  display:block!important; margin:0!important;
  font-size:clamp(11px,2.7vw,13px)!important; line-height:1.05!important;
  letter-spacing:1.5px!important; color:rgba(232,240,252,.95)!important;
  text-shadow:0 1px 8px rgba(8,14,36,.22)!important;
}
@keyframes pw138PopTimeTextIn{
  0%{opacity:0;transform:translateY(4px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(orientation:portrait) and (max-height:740px){
  #gameStage>.stats .pop-time-hud{height:84px!important;top:2px!important}
  #gameStage .pop-time-clock strong{font-size:clamp(48px,11.5vw,64px)!important}
}
@media(orientation:portrait) and (max-height:620px){
  #gameStage>.stats .pop-time-hud{height:72px!important;top:4px!important}
  #gameStage .pop-time-clock small{font-size:10px!important;letter-spacing:1.5px!important}
  #gameStage .pop-time-clock strong{font-size:42px!important}
  #gameStage .pop-time-clock span{font-size:9px!important;letter-spacing:1px!important}
}
@media(prefers-reduced-motion:reduce){
  #gameStage>#rack>.piece.tap-rotated::before,#gameStage>#rack>.piece:not(.used):active::before{animation:none!important}
  #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{animation:none!important}
}
