/* PopeX v194 — a single tactile, moonlit membrane for New Game and both endings.
   Lightweight DOM/CSS bursts, no full-screen flash, no continuous filters. */
:root { --pw194-pop-duration: 480ms; }

/* Keep the play surface readable. A dialog is a physical bubble, not a scrim. */
#pw72Modal.pw72-shade,
#gameoverModal.pw124-end-layer {
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

#pw72Modal .pw72-dialog.pw117-confirm,
#gameoverModal #pw124EndBubble {
  overflow:visible!important;
  isolation:isolate!important;
  border:1.4px solid rgba(236,246,255,.69)!important;
  background:
    radial-gradient(ellipse 57% 32% at 30% 14%,rgba(255,255,255,.32) 0%,rgba(245,250,255,.13) 48%,transparent 100%),
    radial-gradient(ellipse 77% 50% at 85% 85%,rgba(123,238,221,.14),transparent 80%),
    radial-gradient(ellipse 85% 48% at 10% 81%,rgba(172,168,248,.11),transparent 85%),
    linear-gradient(155deg,rgba(153,196,238,.33),rgba(108,137,201,.28) 44%,rgba(65,95,167,.34) 100%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(120%)!important;
  backdrop-filter:blur(3px) saturate(120%)!important;
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.33),
    inset 4px 0 10px rgba(225,243,255,.06),
    inset -5px -11px 21px rgba(11,34,97,.20),
    0 12px 26px rgba(3,13,39,.24),
    0 0 19px rgba(142,203,244,.08)!important;
  color:#f9fcff!important;
  text-shadow:0 1px 2px rgba(9,24,68,.27)!important;
  transform-origin:center!important;
  animation:pw194-idle 3.8s ease-in-out infinite!important;
  -webkit-tap-highlight-color:transparent;
}
/* Top-left and lower-right reflections conform to the bubble; they are not
   separate pills or frosted cards. */
#pw72Modal .pw72-dialog.pw117-confirm::before,
#gameoverModal #pw124EndBubble::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:7.5%!important;
  z-index:-1!important;
  pointer-events:none!important;
  border:none!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse 65% 34% at 32% 14%,rgba(255,255,255,.33),rgba(255,255,255,.04) 54%,transparent 80%),
    radial-gradient(ellipse 72% 38% at 77% 88%,rgba(206,250,255,.12),transparent 85%)!important;
}
#pw72Modal .pw72-dialog.pw117-confirm::after,
#gameoverModal #pw124EndBubble::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:4.5%!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:50%!important;
  border:1px solid rgba(239,250,255,.105)!important;
  background:none!important;
  box-shadow:inset 0 -2px 4px rgba(213,241,255,.09)!important;
}

/* Entrance: membrane gathers volume, settles, then barely breathes. */
#pw72Modal .pw72-dialog.pw117-confirm.pw194-entering,
#gameoverModal #pw124EndBubble.pw194-entering {
  animation:pw194-arrive .56s cubic-bezier(.18,.74,.24,1) both!important;
}
@keyframes pw194-arrive {
  0% { opacity:0;transform:translate3d(0,8px,0) scale(.69,.71); }
  48% { opacity:1;transform:translate3d(0,-3px,0) scale(1.072,1.048); }
  72% { opacity:1;transform:translate3d(0,1px,0) scale(.985,1.017); }
  100% {opacity:1;transform:translate3d(0,0,0) scale(1);}
}
@keyframes pw194-idle {
  0%,100% {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(0,-3px,0) scale(1.012);}
}

#pw72Modal .pw72-dialog.pw117-confirm {
  gap:10px!important;
  padding:21px 13px 22px!important;
}
#pw72Modal #pw107ConfirmTitle {
  font-family:var(--pw-cartoon,ui-rounded,system-ui,sans-serif)!important;
  font-weight:900!important;
  letter-spacing:.15px!important;
  font-size:clamp(23px,6vw,28px)!important;
  line-height:1.05!important;
  color:#f7fbff!important;
  text-shadow:0 1px 2px rgba(9,27,77,.35)!important;
  margin:0 0 4px!important;
}
#pw72Modal .pw117-confirm .pw72-actions {
  display:flex!important;
  justify-content:center!important;
  gap:clamp(12px,3vw,16px)!important;
  margin:0!important;
}
#pw72Modal .pw117-confirm .pw72-actions button {
  width:clamp(50px,14vw,59px)!important;
  height:clamp(50px,14vw,59px)!important;
  border-radius:50%!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.21),inset 0 -5px 11px rgba(17,31,75,.18),0 2px 7px rgba(5,18,50,.11)!important;
  transition:transform .14s ease,background .14s ease!important;
}
#pw72Modal #pw72No {
  color:#ffd7df!important;
  border:1.5px solid rgba(255,191,207,.61)!important;
  background:radial-gradient(circle at 31% 18%,rgba(255,226,234,.23),transparent 54%),rgba(244,107,147,.18)!important;
}
#pw72Modal #pw72Yes {
  color:#d5ffea!important;
  border:1.5px solid rgba(180,250,223,.65)!important;
  background:radial-gradient(circle at 31% 18%,rgba(225,255,239,.24),transparent 54%),rgba(69,197,166,.19)!important;
}
#pw72Modal .pw117-confirm .pw72-actions button:active {transform:scale(.91)!important}
#pw72Modal .pw117-mark {width:29px!important;height:29px!important}
#pw72Modal .pw117-mark path {filter:none!important}

/* Endings: no new game mechanics, only richer, readable final bubbles. */
#gameoverModal #pw124EndBubble {
  gap:3px!important;
  padding:17px 16px!important;
}
#gameoverModal #pw124EndBubble .pw124-end-title {
  color:#fcfdff!important;
  line-height:1.03!important;
  text-shadow:0 1px 3px rgba(14,34,84,.32)!important;
}
#gameoverModal #pw124EndBubble.is-game-over .pw124-end-title {
  font-size:clamp(28px,7.4vw,34px)!important;
  letter-spacing:.6px!important;
}
#gameoverModal #pw124EndBubble .pw124-crown {
  width:clamp(49px,13vw,62px)!important;
  height:clamp(38px,10vw,50px)!important;
  margin:0 0 1px!important;
}
#gameoverModal #pw124EndBubble .pw124-end-label {
  color:#fff2cb!important;
  font-size:clamp(10px,2.6vw,12px)!important;
}
#gameoverModal #pw124EndBubble.is-record .pw124-end-title {
  font-size:clamp(19px,5.2vw,24px)!important;
}
#gameoverModal #pw124EndBubble .pw124-end-score {
  color:#fff9e7!important;
  font-size:clamp(21px,5.7vw,27px)!important;
}
#gameoverModal #pw124EndBubble .pw194-end-points {
  font:850 clamp(12px,3.4vw,14px)/1.1 var(--pw-cartoon,ui-rounded,system-ui,sans-serif);
  color:rgba(235,247,255,.90);
  letter-spacing:.55px;
  font-variant-numeric:tabular-nums;
  margin:6px 0 1px;
}
#gameoverModal #pw124EndBubble .pw194-end-hint {
  font:750 clamp(8px,2.25vw,10px)/1.2 var(--pw-cartoon,ui-rounded,system-ui,sans-serif);
  color:rgba(238,248,255,.75);
  letter-spacing:.6px;
  margin-top:5px;
}
#gameoverModal #pw124EndBubble.is-record .pw194-end-hint {margin-top:3px;}

/* There is a short elastic tension, then a decisive transparent break.
   The separate shell arcs and mist below continue AFTER the membrane vanishes. */
#pw72Modal.pw127-pop-dismiss .pw72-dialog.pw117-confirm,
#gameoverModal.pw124-end-layer.is-popping #pw124EndBubble {
  animation:pw194-membrane-rupture var(--pw194-pop-duration) cubic-bezier(.18,.6,.28,1) both!important;
  pointer-events:none!important;
  will-change:transform,opacity!important;
}
@keyframes pw194-membrane-rupture {
  0% {transform:scale(1,1);opacity:1}
  17% {transform:scale(1.064,.959);opacity:1}
  29% {transform:scale(.976,1.058);opacity:1}
  43% {transform:scale(1.13,1.1);opacity:.84}
  58% {transform:scale(1.15);opacity:0}
  100% {transform:scale(1.15);opacity:0}
}

#pw72Modal .pw127-pop-ring,
#gameoverModal .pw127-pop-ring {
  box-sizing:border-box!important;
  border:1.3px solid rgba(227,248,255,.78)!important;
  box-shadow:0 0 9px rgba(183,232,255,.23)!important;
  opacity:0;
  animation:pw194-rim-ripple .46s cubic-bezier(.13,.55,.24,1) both!important;
  animation-delay:var(--pw194-delay,0ms)!important;
}
@keyframes pw194-rim-ripple {
  0% {opacity:0;transform:translate(-50%,-50%) scale(.92)}
  23% {opacity:.69;transform:translate(-50%,-50%) scale(1.015)}
  100% {opacity:0;transform:translate(-50%,-50%) scale(1.26)}
}

#pw72Modal .pw127-pop-spark,
#gameoverModal .pw127-pop-spark {
  border-radius:44% 64% 50% 36%!important;
  background:var(--spark,#e9fbff)!important;
  box-shadow:0 0 3px rgba(234,250,255,.42)!important;
  animation:pw194-mist-scatter .49s cubic-bezier(.14,.67,.28,1) both!important;
  animation-delay:var(--pw194-delay,0ms)!important;
}
@keyframes pw194-mist-scatter {
  0%,10% {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  28% {opacity:.94;transform:translate(calc(-50% + var(--dx)*.18),calc(-50% + var(--dy)*.18)) scale(1.0)}
  100% {opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(var(--turn,100deg))}
}
/* Tiny curved glints: pieces of the actual shell rim, not confetti. */
#pw72Modal .pw194-shell-shard,
#gameoverModal .pw194-shell-shard {
  position:absolute;
  z-index:1603;
  width:var(--pw194-shard-w,20px);
  height:8px;
  box-sizing:border-box;
  pointer-events:none;
  border-top:2px solid rgba(235,250,255,.92);
  border-radius:75% 60% 0 0;
  background:transparent;
  box-shadow:0 -1px 3px rgba(168,231,255,.21);
  transform-origin:center;
  animation:pw194-shard-flight .50s cubic-bezier(.14,.65,.34,1) both;
  animation-delay:var(--pw194-delay,0ms);
}
@keyframes pw194-shard-flight {
  0%,12% {opacity:0;transform:translate(-50%,-50%) rotate(var(--pw194-angle)) scale(.65)}
  26% {opacity:.94;transform:translate(-50%,-50%) rotate(var(--pw194-angle)) scale(1.06)}
  100% {opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--pw194-angle) + var(--pw194-spin))) scale(.3)}
}
#pw72Modal .pw194-burst-glint,
#gameoverModal .pw194-burst-glint {
  position:absolute;
  z-index:1602;
  left:var(--pw194-cx);top:var(--pw194-cy);
  width:22px;height:22px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.56),rgba(226,251,255,.22) 35%,transparent 75%);
  animation:pw194-glint-flash .24s ease-out both;
}
@keyframes pw194-glint-flash {
  0% {transform:translate(-50%,-50%) scale(.2);opacity:0}
  34% {transform:translate(-50%,-50%) scale(1.8);opacity:.75}
  100% {transform:translate(-50%,-50%) scale(3.3);opacity:0}
}

@media (max-height:620px) {
 #pw72Modal #pw107ConfirmTitle{font-size:clamp(20px,5.3vw,25px)!important}
 #pw72Modal .pw117-confirm .pw72-actions button{width:48px!important;height:48px!important}
 #gameoverModal #pw124EndBubble .pw194-end-hint{font-size:8px!important;margin-top:2px!important}
}
@media(prefers-reduced-motion:reduce) {
  #pw72Modal .pw72-dialog.pw117-confirm,
  #gameoverModal #pw124EndBubble {animation:none!important}
  #pw72Modal .pw72-dialog.pw117-confirm.pw194-entering,
  #gameoverModal #pw124EndBubble.pw194-entering {animation:none!important}
  #pw72Modal.pw127-pop-dismiss .pw72-dialog.pw117-confirm,
  #gameoverModal.pw124-end-layer.is-popping #pw124EndBubble {animation:none!important;opacity:0!important}
  #pw72Modal .pw127-pop-ring,#gameoverModal .pw127-pop-ring,
  #pw72Modal .pw127-pop-spark,#gameoverModal .pw127-pop-spark,
  #pw72Modal .pw194-shell-shard,#gameoverModal .pw194-shell-shard,
  #pw72Modal .pw194-burst-glint,#gameoverModal .pw194-burst-glint {display:none!important;animation:none!important}
}