:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#6b7280;
  --accent:#f97316;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#content{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
  text-align:center;
  user-select:text;
  /* keep text sizing minimal since primary content is the image */
  font-size:14px;
}

/* wrapper so badge can be positioned relative to the image */
#blob-wrap{
  position:relative;
  display:inline-block;
  line-height:0;
}

/* Bouncing image */
#bouncing-blob{
  width:28vmin;           /* responsive, fits mobile and desktop */
  max-width:220px;
  max-height:60vh;
  height:auto;
  display:block;
  user-select:none;
  pointer-events:none;
  transform-origin:center bottom;
  animation:bounce 1.6s cubic-bezier(.28,.84,.42,1) infinite;
}

/* spawn badge */
#spawn-badge{
  position:absolute;
  right:-6px;
  top:6px;
  transform:translate(0,-50%);
  background:var(--accent);
  color:white;
  font-weight:600;
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
  min-width:44px;
  text-align:center;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}

/* subtle shadow to ground the blob */
#bouncing-blob::after{
  content: "";
  position: relative;
}

/* keyframes for bounce */
@keyframes bounce{
  0%   { transform: translateY(0) scaleY(1); }
  25%  { transform: translateY(-24%) scaleY(0.92); }
  50%  { transform: translateY(0) scaleY(1); }
  75%  { transform: translateY(-12%) scaleY(0.96); }
  100% { transform: translateY(0) scaleY(1); }
}