/* Popex v121 — unify transient cards with the New Game visual language.
   Also add a tap-to-pop New High Score crown bubble. */

:root{
  --pw121-card-bg:
    radial-gradient(ellipse at 18% 10%, rgba(246,250,255,.16), transparent 48%),
    linear-gradient(155deg, rgba(58,74,119,.96), rgba(27,40,79,.97));
  --pw121-card-border: rgba(218,232,255,.30);
  --pw121-card-shadow: inset 0 2px 8px rgba(249,253,255,.08), 0 24px 72px rgba(3,9,27,.44);
}

/* Generic floating popup cards on top of the board. */
#gameStage .popup,
#gameStage .popup.warn,
#gameStage .popup.ready,
#gameStage .popup.color-streak,
#gameStage .popup.challenge-win,
#gameStage .popup.board-clear,
#gameStage .popup.story-intro,
#gameStage .popup.story-nervous{
  min-width:min(82%,255px)!important;
  max-width:min(90%,360px)!important;
  min-height:72px!important;
  padding:16px 20px!important;
  border-radius:27px!important;
  border:1px solid var(--pw121-card-border)!important;
  background:var(--pw121-card-bg)!important;
  box-shadow:var(--pw121-card-shadow)!important;
  color:#f4f8ff!important;
  text-shadow:0 1px 4px rgba(7,16,40,.24)!important;
  animation-duration:1.38s!important;
}
#gameStage .popup.challenge-win .ch-win-heading{font-size:clamp(15px,3.6vw,19px)!important;color:#ecfbff!important}
#gameStage .popup.challenge-win .ch-win-detail{font-size:clamp(12px,3.2vw,15px)!important;color:#dce7ff!important}
#gameStage .popup.story-intro,
#gameStage .popup.story-nervous,
#gameStage .popup.ready{color:#f3f7ff!important}

/* POP TIME intro panel: same card family as New Game. */
#gameStage>.sheet>.bonus-countdown:not([hidden]){
  max-width:min(90%,386px)!important;
  min-width:min(76%,278px)!important;
  min-height:154px!important;
  padding:18px 18px 16px!important;
  border-radius:29px!important;
  border:1px solid rgba(224,236,255,.34)!important;
  background:var(--pw121-card-bg)!important;
  box-shadow:var(--pw121-card-shadow)!important;
  color:#f7f8ff!important;
  text-shadow:0 1px 5px rgba(8,15,38,.26)!important;
}
#gameStage>.sheet>.bonus-countdown:not([hidden])::before{
  inset:1px!important;
  border-radius:inherit!important;
  background:radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.14), transparent 54%)!important;
  border:1px solid rgba(243,247,255,.15)!important;
}
#gameStage .pw114-intro-label{
  margin-top:10px!important;
  display:block!important;
  font-size:clamp(18px,6vw,27px)!important;
  font-weight:900!important;
  letter-spacing:1px!important;
}
#gameStage>.sheet>.bonus-countdown.v75-pop-intro::after{
  margin-top:12px!important;
  font-size:clamp(12px,3.1vw,16px)!important;
  color:#d9f6ec!important;
  letter-spacing:1.1px!important;
}

/* Challenge bar / announcement card */
#gameStage>.queue-title .challenge-hud{
  min-height:46px!important;
  padding:7px 12px!important;
  border-radius:20px!important;
  border:1px solid rgba(218,232,255,.24)!important;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(248,251,255,.12), transparent 52%),
    linear-gradient(155deg, rgba(58,74,119,.84), rgba(29,42,82,.88))!important;
  box-shadow:inset 0 2px 7px rgba(245,249,255,.08), 0 8px 24px rgba(8,14,33,.18)!important;
}
#gameStage>.queue-title .challenge-hud:not([hidden])::before{
  border-radius:inherit!important;
  background:radial-gradient(ellipse at 25% 10%, rgba(255,255,255,.12), transparent 58%)!important;
  border:1px solid rgba(243,247,255,.12)!important;
}
.challenge-hud .ch-eyebrow{color:#d8ebe7!important}
.challenge-hud .ch-goal{color:#f7faff!important}
.challenge-hud .ch-record{color:#cfd9ef!important}
.challenge-hud .ch-timer{color:#fff4d9!important}
.challenge-hud .ch-timer.ch-low{color:#ffd6ca!important}

/* New high-score celebratory bubble. */
#pw121RecordBubble{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(78vw,280px);
  aspect-ratio:1/1;
  border-radius:50%;
  z-index:1002;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  color:#f9fbff;
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(239,246,255,.52);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.28), transparent 21%),
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.10), transparent 35%),
    radial-gradient(circle at 78% 78%, rgba(180,188,255,.18), transparent 28%),
    linear-gradient(155deg, rgba(113,126,185,.96), rgba(59,72,129,.98));
  box-shadow:
    inset 0 7px 16px rgba(255,255,255,.22),
    inset 0 -12px 20px rgba(12,16,48,.26),
    0 20px 60px rgba(2,8,25,.42),
    0 0 0 1px rgba(255,255,255,.06);
  animation:pw121RecordFloat 2.4s ease-in-out infinite;
}
#pw121RecordBubble::before{
  content:"";
  position:absolute;
  inset:9%;
  border-radius:50%;
  border:1px solid rgba(250,252,255,.20);
  background:radial-gradient(circle at 28% 14%, rgba(255,255,255,.18), transparent 36%);
  pointer-events:none;
}
#pw121RecordBubble .pw121-crown{
  font-size:clamp(30px,9vw,42px);
  line-height:1;
  filter:drop-shadow(0 3px 10px rgba(255,224,130,.22));
}
#pw121RecordBubble .pw121-kicker{
  font-size:clamp(11px,3.2vw,13px);
  font-weight:900;
  letter-spacing:1.6px;
  opacity:.92;
  color:#fff0cc;
}
#pw121RecordBubble .pw121-title{
  font-size:clamp(24px,7vw,33px);
  font-weight:1000;
  line-height:1.02;
}
#pw121RecordBubble .pw121-sub{
  font-size:clamp(11px,3.3vw,14px);
  letter-spacing:1.1px;
  color:#d9f4ec;
}
#pw121RecordBubble .pw121-score{
  font-size:clamp(22px,6.5vw,30px);
  font-weight:950;
  font-variant-numeric:tabular-nums;
}
#pw121RecordBubble.is-popping{
  pointer-events:none;
  animation:pw121RecordPop .22s ease-out forwards;
}
@keyframes pw121RecordFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0) scale(1)}
  50%{transform:translate(-50%,-50%) translateY(-4px) scale(1.012)}
}
@keyframes pw121RecordPop{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}
}

/* Move the normal game-over card down a little when the crown bubble exists. */
.gameover-modal.pw121-record-mode{align-items:flex-end!important;padding-bottom:min(10vh,82px)!important}
.gameover-modal.pw121-record-mode .gameover-card{margin-top:auto!important}