/* ─────────────────────────────────────────────────────────────
   JUNKYARD JAR — THE ESCAPE MESSAGE
   Pops up over the jar when the hopper flies out through the
   lid. Two cards, one after the other, each with a Continue.
   ───────────────────────────────────────────────────────────── */

.jar-escape {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 10, 31, 0.55);
  animation: jar-escape-in 0.35s ease;
}

.jar-escape[hidden],
.jar-escape-card[hidden] { display: none; }

.jar-escape-card {
  width: 100%;
  max-width: 340px;
  padding: 26px 22px 22px;
  background: #1a3a7a;
  border: 3px solid #f5d020;
  border-radius: 14px;
  box-shadow: 0 6px 0 #050a1f;
  text-align: center;
  animation: jar-escape-pop 0.3s ease;
}

.jar-escape-title {
  font-family: 'Lilita One', cursive;
  color: #f5d020;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 1px;
  -webkit-text-stroke: 1px #0b1e4a;
  text-shadow: 2px 2px 0 #0b1e4a;
  margin-bottom: 20px;
}

/* the second card: him cheering in a circle that sits over the
   top edge of the card */
.jar-escape-card-pic {
  margin-top: 70px;
  padding-top: 0;
}

.jar-escape-pic {
  width: 132px;
  height: 132px;
  margin: -70px auto 14px;
  border-radius: 50%;
  background: #2a5bb5;
  border: 4px solid #f5d020;
  box-shadow: 0 5px 0 #050a1f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jar-escape-pic img {
  width: 104%;
  max-width: none;
  height: auto;
  display: block;
  transform: translateY(-4px);   /* a touch up, so his antennae break out the top */
}

.jar-escape-line {
  font-family: 'Lilita One', cursive;
  color: #c8dff8;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* the same yellow pill as Hatch Egg */
.jar-escape-btn {
  background: #f5d020;
  color: #1a3a7a;
  font-family: 'Lilita One', cursive;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 11px 28px;
  border: 3px solid #0b1e4a;
  border-radius: 40px;
  box-shadow: 0 4px 0 #050a1f;
  cursor: pointer;
}

.jar-escape-btn:hover  { background: #ffe14a; }
.jar-escape-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #050a1f; }

@keyframes jar-escape-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes jar-escape-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 700px) {
  .jar-escape-title { font-size: 26px; }
  .jar-escape-line  { font-size: 20px; }
  .jar-escape-pic   { width: 110px; height: 110px; margin-top: -58px; }
  .jar-escape-card-pic { margin-top: 58px; }
}