/* Popex v122 — transient popups and challenge surfaces match the New Game card style. */

:root{
  --pw122-surface:
    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));
  --pw122-border: rgba(218,232,255,.30);
  --pw122-shadow: inset 0 2px 8px rgba(249,253,255,.08), 0 24px 72px rgba(3,9,27,.44);
  --pw122-highlight: rgba(243,247,255,.14);
}

/* New Game remains the canonical style; these rules mirror it onto the other transient cards. */

/* 1) Story intro / Meet the Bloopkins */
#gameStage .popup.story-intro,
#gameStage .popup.story-intro.story-colored,
#gameStage .popup.story-nervous,
#gameStage .popup.story-nervous.story-colored,
#gameStage .popup.ready,
#gameStage .popup.warn{
  width:min(78%, 470px)!important;
  max-width:min(78%, 470px)!important;
  min-width:min(78%, 260px)!important;
  min-height:112px!important;
  padding:22px 24px!important;
  border-radius:31px!important;
  border:1px solid var(--pw122-border)!important;
  background:var(--pw122-surface)!important;
  box-shadow:var(--pw122-shadow)!important;
  color:#f4f8ff!important;
  text-shadow:0 1px 4px rgba(7,16,40,.22)!important;
  white-space:normal!important;
  line-height:1.12!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#gameStage .popup.story-intro::before,
#gameStage .popup.story-nervous::before,
#gameStage .popup.ready::before,
#gameStage .popup.warn::before{
  inset:1px!important;
  border-radius:inherit!important;
  border:1px solid var(--pw122-highlight)!important;
  background:radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.12), transparent 56%)!important;
}
#gameStage .popup.story-intro,
#gameStage .popup.story-intro.story-colored{
  font-size:clamp(22px,6vw,32px)!important;
  animation-duration:2.15s!important;
}

/* 2) Challenge strip / mission window */
#gameStage>.queue-title{
  height:52px!important;
  min-height:52px!important;
}
#gameStage>.queue-title .challenge-hud{
  inset:2px 0 2px 0!important;
  min-height:48px!important;
  padding:8px 14px!important;
  border-radius:24px!important;
  border:1px solid var(--pw122-border)!important;
  background:var(--pw122-surface)!important;
  box-shadow:0 12px 26px rgba(4,12,32,.18), inset 0 2px 8px rgba(249,253,255,.07)!important;
  color:#f4f8ff!important;
}
#gameStage>.queue-title .challenge-hud::before{
  inset:1px!important;
  border-radius:inherit!important;
  border:1px solid var(--pw122-highlight)!important;
  background:radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.12), transparent 56%)!important;
}
.challenge-hud .ch-eyebrow{
  color:#d8ebe7!important;
  font-size:9px!important;
  letter-spacing:.9px!important;
}
.challenge-hud .ch-record{color:#cfd9ef!important}
.challenge-hud .ch-goal{
  color:#f8fbff!important;
  font-size:12px!important;
}
.challenge-hud .ch-timer{
  color:#fff3d4!important;
  font-size:18px!important;
}
.challenge-hud .ch-timer.ch-low{color:#ffd2c6!important}
@media(max-width:600px){
  #gameStage>.queue-title{height:48px!important;min-height:48px!important}
  #gameStage>.queue-title .challenge-hud{padding:7px 11px!important;border-radius:21px!important}
}

/* 3) Challenge complete popup */
#gameStage .popup.challenge-win,
#gameStage .popup.color-streak,
#gameStage .popup.board-clear{
  width:min(80%, 420px)!important;
  max-width:min(80%, 420px)!important;
  min-width:min(72%, 280px)!important;
  min-height:112px!important;
  padding:20px 22px!important;
  border-radius:31px!important;
  border:1px solid var(--pw122-border)!important;
  background:var(--pw122-surface)!important;
  box-shadow:var(--pw122-shadow)!important;
  color:#f5f8ff!important;
  text-shadow:0 1px 4px rgba(7,16,40,.22)!important;
}
#gameStage .popup.challenge-win::before,
#gameStage .popup.color-streak::before,
#gameStage .popup.board-clear::before{
  inset:1px!important;
  border-radius:inherit!important;
  border:1px solid var(--pw122-highlight)!important;
  background:radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.12), transparent 56%)!important;
}
#gameStage .popup.challenge-win .ch-win-heading{
  font-size:clamp(16px,4vw,22px)!important;
  color:#f3f8ff!important;
  white-space:normal!important;
  text-align:center!important;
}
#gameStage .popup.challenge-win .ch-win-detail{
  margin-top:5px!important;
  font-size:clamp(13px,3.4vw,16px)!important;
  color:#d9f0e7!important;
  white-space:normal!important;
  text-align:center!important;
}