/* The 8 wrong-code pop-up designs */
.pop-backdrop {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 5, 12, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: fade-in 0.2s ease-out;
}
.pop {
  position: relative; overflow: hidden;
  width: min(370px, 100%); padding: 18px 24px 24px; border-radius: 24px; text-align: center;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  animation: pop-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.7) rotate(-3deg); } }
.pop-art { position: relative; height: 130px; margin: 0 auto 6px; }
.pop-svg { width: 100%; height: 100%; overflow: visible; }
.pop-title { position: relative; margin: 4px 0 8px; font: 800 23px/1.15 var(--font-d); letter-spacing: -0.02em; }
.pop-body { position: relative; margin: 0 auto 16px; max-width: 30ch; font-size: 15px; line-height: 1.5; opacity: 0.9; }
.pop-note { position: relative; margin: -6px 0 14px; font-size: 13px; opacity: 0.8; }
.pop-btn {
  position: relative; min-height: 46px; padding: 0 26px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: 15px; transition: transform 0.1s;
}
.pop-btn:active { transform: scale(0.96); }
.pop-btn:disabled { opacity: 0.55; cursor: default; }

/* 0 — Glitch screen */
.pop-s0 .pop { background: #06090f; color: #e9fbff; border: 1px solid #7fe7ff55; border-radius: 6px; animation: pop-in 0.3s, glitch-jump 3s 0.4s infinite steps(1); }
.pop-s0 .pop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(127, 231, 255, 0.06) 0 1px, transparent 1px 3px); }
.pop-s0 .pop-title { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: none; }
.pop-s0 .pop-title::before, .pop-s0 .pop-title::after { content: attr(data-text); position: absolute; inset: 0; }
.pop-s0 .pop-title::before { color: #ff4fd8; transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); animation: gl-slice 2s infinite steps(2); }
.pop-s0 .pop-title::after { color: #7fe7ff; transform: translate(2px, 0); clip-path: inset(50% 0 0 0); animation: gl-slice 1.6s infinite reverse steps(2); }
.pop-s0 .gl-b { animation: gl-shift 0.9s infinite steps(2); }
.pop-s0 .gl-bar { animation: gl-bar 1.4s infinite steps(3); }
.pop-s0 .gl-bar2 { animation: gl-bar 1.1s infinite reverse steps(3); }
.pop-s0 .pop-btn { background: #7fe7ff; color: #031017; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; }
@keyframes gl-slice { 50% { transform: translate(3px, -1px); clip-path: inset(20% 0 40% 0); } }
@keyframes gl-shift { 50% { transform: translate(-5px, 2px); } }
@keyframes gl-bar { 33% { transform: translate(20px, 30px); } 66% { transform: translate(-30px, -10px); } }
@keyframes glitch-jump { 0%, 90%, 100% { transform: none; } 92% { transform: translate(4px, -2px) skewX(4deg); } 95% { transform: translate(-3px, 1px); } }

/* 1 — Panic shake */
.pop-s1 .pop { background: linear-gradient(160deg, #3a0f17, #1a0910); color: #ffe4e0; border: 2px solid #ff8a7a; animation: pop-in 0.3s, panic 2.2s 0.3s infinite; }
.pop-s1 .sh-bot { animation: jitter 0.18s infinite; }
.pop-s1 .sh-drop { animation: drop 1.2s infinite; }
.pop-s1 .sh-drop.d2 { animation-delay: 0.5s; }
.pop-s1 .pop-btn { background: #ff8a7a; color: #2a0408; }
@keyframes panic { 0%, 80%, 100% { transform: none; } 84% { transform: translateX(-10px) rotate(-1deg); } 88% { transform: translateX(10px) rotate(1deg); } 92% { transform: translateX(-6px); } 96% { transform: translateX(6px); } }
@keyframes jitter { 50% { transform: translate(1.5px, -1px); } }
@keyframes drop { from { transform: translateY(-6px); opacity: 1; } to { transform: translateY(16px); opacity: 0; } }

/* 2 — UFO pickup */
.pop-s2 .pop { background: radial-gradient(ellipse at top, #16301d, #070d10 70%); color: #eaffd6; border: 1px solid #b6f36b66; }
.pop-s2 .ufo { animation: hover 2.4s ease-in-out infinite; }
.pop-s2 .ufo-bot { animation: abduct 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pop-s2 .pop-btn { background: #b6f36b; color: #0d1a04; }
@keyframes hover { 50% { transform: translateY(-4px); } }
@keyframes abduct { 0%, 100% { transform: translateY(6px) rotate(-8deg); } 50% { transform: translateY(-18px) rotate(10deg); } }

/* 3 — Melting robot */
.pop-s3 .pop { background: linear-gradient(180deg, #2c1d07, #120b03); color: #fff1d6; border: 1px solid #ffc56b66; border-radius: 24px 24px 40px 40px; }
.pop-s3 .drip { transform-box: fill-box; transform-origin: top; animation: melt 2.6s ease-in-out infinite; }
.pop-s3 .drip.d2 { animation-delay: 0.6s; }
.pop-s3 .drip.d3 { animation-delay: 1.1s; }
.pop-s3 .pop-btn { background: #ffc56b; color: #2a1700; }
@keyframes melt { 0%, 100% { transform: scaleY(0.4); } 60% { transform: scaleY(1.25); } }

/* 4 — Wobbly jelly */
.pop-s4 .pop { background: #ffd6ea; color: #3a0f2a; border-radius: 44px; box-shadow: 0 30px 80px -20px rgba(255, 95, 168, 0.6); animation: pop-in 0.45s, wobble 2.4s 0.4s infinite; }
.pop-s4 .jelly { transform-box: fill-box; transform-origin: bottom; animation: squish 1.2s ease-in-out infinite; }
.pop-s4 .pop-btn { background: #ff5fa8; color: #fff; }
@keyframes wobble { 0%, 70%, 100% { transform: none; } 76% { transform: scale(1.04, 0.96); } 84% { transform: scale(0.97, 1.03); } 92% { transform: scale(1.01, 0.99); } }
@keyframes squish { 50% { transform: scale(1.08, 0.9); } }

/* 5 — Police siren */
.pop-s5 .pop { background: #08090f; color: #fff; border: 1px solid #ffffff22; }
.pop-s5 .pop::before {
  content: ""; position: absolute; inset: -60%; pointer-events: none; opacity: 0.35;
  background: conic-gradient(from 0deg, #ff4f6a 0 25%, transparent 25% 50%, #4f8bff 50% 75%, transparent 75%);
  animation: spin 1.4s linear infinite;
}
.pop-s5 .siren-dome { animation: siren 0.7s steps(1) infinite; }
.pop-s5 .siren-light { transform-origin: 100px 30px; animation: siren-flip 0.7s steps(1) infinite; }
.pop-s5 .pop-btn { background: #fff; color: #08090f; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes siren { 50% { fill: #4f8bff; } }
@keyframes siren-flip { 50% { transform: scaleX(-1); } }

/* 6 — Sleepy robot */
.pop-s6 .pop { background: linear-gradient(180deg, #1c1640, #0b0a1e); color: #ece4ff; border: 1px solid #c59bff44; }
.pop-s6 .sleepy-bot { transform-box: fill-box; transform-origin: bottom; animation: breathe 3.2s ease-in-out infinite; }
.pop-s6 .zz { animation: zz 2.4s ease-out infinite; opacity: 0; }
.pop-s6 .z2 { animation-delay: 0.6s; }
.pop-s6 .z3 { animation-delay: 1.2s; }
.pop-s6 .pop-btn { background: #c59bff; color: #1a0b36; }
@keyframes breathe { 50% { transform: scale(1.03, 0.97) rotate(-2deg); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }

/* 7 — Disco robot */
.pop-s7 .pop { background: #0d0a1c; color: #fff; border: 3px solid transparent; background-clip: padding-box; }
.pop-s7 .pop::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: linear-gradient(90deg, #ff8fc7, #ffc56b, #b6f36b, #7fe7ff, #c59bff, #ff8fc7);
  background-size: 300% 100%; animation: rainbow 3s linear infinite;
}
.pop-s7 .pop { isolation: isolate; overflow: visible; }
.pop-s7 .pop::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 21px; background: #0d0a1c; }
.pop-s7 .disco { transform-origin: 100px 26px; animation: spin 4s linear infinite; }
.pop-s7 .rays { animation: flash 0.8s steps(2) infinite; }
.pop-s7 .dance { transform-box: fill-box; transform-origin: bottom; animation: dance 0.6s ease-in-out infinite alternate; }
.pop-s7 .pop-btn { background: linear-gradient(90deg, #ff8fc7, #c59bff); color: #fff; }
@keyframes rainbow { to { background-position: 300% 0; } }
@keyframes flash { 50% { opacity: 0.3; } }
@keyframes dance { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(10deg) translateY(-4px); } }