/* =========================
   Rare background (stars)
========================= */
body.rare-bg{
  background:
    radial-gradient(900px 600px at 18% 18%, #1d4ed833 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 10%, #a78bfa22 0%, transparent 60%),
    radial-gradient(1100px 700px at 60% 95%, #fb718522 0%, transparent 55%),
    radial-gradient(2px 2px at 15% 25%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 30% 55%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 45% 20%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 60% 70%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 75% 35%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 88% 65%, #fff 0%, transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

/* star drift layer */
body.rare-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(2px 2px at 10% 20%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 22% 78%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 35% 40%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 48% 10%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 62% 55%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 74% 25%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 86% 70%, #fff 0%, transparent 60%),
    radial-gradient(2px 2px at 92% 35%, #fff 0%, transparent 60%);
  animation: starDrift 14s linear infinite;
}
@keyframes starDrift{
  from{ transform: translateY(-10vh) translateX(0); }
  to  { transform: translateY(110vh) translateX(-6vw); }
}

/* ensure main UI is above stars */
.wrap, .modal{ position: relative; z-index: 1; }

/* =========================
   Dex NEW dot blink
========================= */
.dexBlink{
  animation: dexBlink 1.4s ease-in-out infinite;
}
@keyframes dexBlink{
  0%{ opacity: 1; }
  50%{ opacity: .25; }
  100%{ opacity: 1; }
}

/* =========================
   Dex pop notify (rare)
   (includes pink flash)
========================= */
.dexPop{
  animation: dexPop 680ms cubic-bezier(.2,.9,.2,1) 1;
  box-shadow: 0 0 0 0 rgba(251,113,133,.0);
}
@keyframes dexPop{
  0%{
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(251,113,133,.0);
  }
  20%{
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 0 10px rgba(251,113,133,.18);
    background: #fff0f3;
  }
  55%{
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 0 0 6px rgba(251,113,133,.08);
  }
  100%{
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(251,113,133,.0);
    background: transparent;
  }
}

/* =========================
   Dex: rare jump
========================= */
.dexJump{
  animation: dexJump 520ms cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes dexJump{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(-10px); }
  70%{ transform: translateY(2px); }
  100%{ transform: translateY(0); }
}

/* =========================
   Unlock sparkle (mini card)
========================= */
.dexMiniCat.sparkle::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(10px 10px at 20% 30%, #fff 0%, transparent 60%),
    radial-gradient(12px 12px at 70% 35%, #fff 0%, transparent 60%),
    radial-gradient(10px 10px at 55% 75%, #fff 0%, transparent 60%),
    radial-gradient(14px 14px at 35% 60%, #fff 0%, transparent 60%);
  opacity: 0;
  animation: unlockSparkle 900ms ease-out 1;
  pointer-events:none;
}
@keyframes unlockSparkle{
  0%{ opacity: 0; transform: scale(.9) rotate(-6deg); }
  30%{ opacity: .9; }
  100%{ opacity: 0; transform: scale(1.15) rotate(10deg); }
}

/* =========================
   Locked mini cat wobble
========================= */
.dexMiniCat.locked{
  animation: lockedWobble 2.2s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes lockedWobble{
  0%,100%{ transform: rotate(0deg) translateY(0); }
  25%{ transform: rotate(-1.3deg) translateY(1px); }
  50%{ transform: rotate(1.6deg) translateY(0); }
  75%{ transform: rotate(-0.8deg) translateY(1px); }
}
.dexItem[data-locked="1"]:hover .dexMiniCat.locked{
  animation-duration: 1.2s;
}

/* =========================
   Confetti
========================= */
.confettiWrap{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}
.confetti{
  position: absolute;
  top: -10vh;
  width: 10px;
  height: 14px;
  opacity: .95;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  to{
    transform: translateY(120vh) rotate(720deg);
    opacity: 1;
  }
}

/* =========================
   Screenshot pause mode
========================= */
body.screenshotPause *{
  animation-play-state: paused !important;
}

/* floating controller */
.ssCtrl{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  pointer-events: auto;
}
.ssBtn{
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(15,23,42,.18);
  font-weight: 900;
  font-size: 12px;
}
.ssBtn.primary{
  border-color: #fb718533;
  background: linear-gradient(180deg, #fff 0%, #fff0f3 100%);
}
.ssBtn:active{ transform: translateY(1px); }

/* watermark */
.ssWatermark{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 79;
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
}
.ssWatermark .sub{
  display:block;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
}

/* ribbon */
.ssRibbon{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 85;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #fb718533;
  background: rgba(255,240,243,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(251,113,133,.22);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  animation: ssRibbonIn 380ms cubic-bezier(.2,.9,.2,1) 1;
}
.ssRibbon .sub{
  display:inline-block;
  margin-left: 10px;
  font-weight: 800;
  color: var(--muted);
}
@keyframes ssRibbonIn{
  0%{ transform: translateX(-50%) translateY(-6px) scale(.98); opacity: 0; }
  100%{ transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* dim non-essential UI while paused */
body.screenshotPause .top,
body.screenshotPause aside.card,
body.screenshotPause .history,
body.screenshotPause .toast{
  opacity: .22;
  filter: blur(.2px);
  pointer-events: none;
  user-select: none;
}

/* keep modal + screenshot UI crisp */
body.screenshotPause .modal,
body.screenshotPause .modal *{
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}
body.screenshotPause .ssCtrl,
body.screenshotPause .ssCtrl *,
body.screenshotPause .ssWatermark,
body.screenshotPause .ssRibbon{
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* soften tiny helper bits */
body.screenshotPause .footer .muted{
  opacity: .35;
}