/* ========================== Bugs! — styles ========================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Baloo 2", system-ui, "Segoe UI", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* A sunny garden: sky up top, grass at the bottom. */
#game {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #bfe9ff 0%, #dff7cf 60%, #a8e598 100%);
}

/* ----------------------------- HUD ---------------------------------- */

#hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.4vw, 22px);
  padding: clamp(8px, 2vw, 16px);
  flex-wrap: wrap;
}

.hud-item { flex: 0 0 auto; text-align: center; }

/* The rainbow target chip: 🌈 + a swatch + the color's name, ringed in rainbow. */
.target-chip {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.4vw, 10px);
  padding: 5px clamp(10px, 2.6vw, 16px);
  border-radius: 99px;
  border: 4px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    linear-gradient(90deg, #ff4d63, #ff9a3c, #ffd23f, #57cc5a, #3aa0f0, #a85ff0) border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.target-chip .rainbow { font-size: clamp(18px, 5vw, 28px); line-height: 1; }

#target-swatch {
  width: clamp(22px, 6vw, 32px);
  height: clamp(22px, 6vw, 32px);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
  background: #ccc;
}

#target-name {
  font-size: clamp(16px, 4.2vw, 24px);
  font-weight: 800;
}

/* Hearts row: full hearts for lives left, dimmed ones for lives lost. */
#hearts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: clamp(17px, 4.5vw, 26px);
  line-height: 1;
  max-width: 42vw;
}

.heart { display: inline-block; }

.heart.lost {
  filter: grayscale(1);
  opacity: 0.35;
  transform: scale(0.8);
}

.heart.dim-pop { animation: heartPop 0.4s ease; }
@keyframes heartPop {
  0% { transform: scale(1.5); opacity: 1; filter: none; }
  100% { transform: scale(0.8); }
}

.stat { min-width: clamp(96px, 22vw, 150px); }

.stat-label {
  font-size: clamp(13px, 3vw, 18px);
  font-weight: 700;
  color: #3a6a3f;
  white-space: nowrap;
}

.stat-label b { color: #1f8c3f; }

#caught-num.bump { display: inline-block; animation: bump 0.3s ease; }

@keyframes bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); color: #1aa84b; }
  100% { transform: scale(1); }
}

.mini-bar {
  margin: 5px auto 0;
  width: clamp(70px, 18vw, 130px);
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.65);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mini-bar > div {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  border-radius: 99px;
  transition: transform 0.15s linear;
}

.fill-green { background: linear-gradient(90deg, #9be86f, #35c65a); }

.round-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid #8fd88f;
  border-radius: 99px;
  padding: 6px clamp(10px, 2.6vw, 16px);
  font-size: clamp(14px, 3.5vw, 20px);
  color: #2fa04e;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --------------------------- Playfield ------------------------------ */

#playfield {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Wrong catch — the whole garden gives a quick "yikes!" shake. */
#playfield.shake { animation: shake 0.35s ease; }
@keyframes shake {
  20% { translate: -8px 0; }
  40% { translate: 8px 0; }
  60% { translate: -5px 0; }
  80% { translate: 5px 0; }
}

/* Grass strip at the bottom of the play area. */
#floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, #7bc86a 0 14px, #63b654 14px 28px);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

/* ---------------------------- The bug -------------------------------- */

/* A round-bodied beetle: colored body with dark spots, little head with
   antennae, and two translucent fluttering wings. Color comes from --c/--c2. */
.bug {
  --c: #ff4d63;
  --c2: #c9223a;
  --wobble: 26px;
  position: absolute;
  width: clamp(48px, 12vw, 70px);
  aspect-ratio: 5 / 6;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 5;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.25));
  animation: fly-wobble var(--wob, 1.8s) ease-in-out infinite alternate;
}

/* The whole bug drifts side to side while it flies down (JS moves it down). */
@keyframes fly-wobble {
  from { transform: translateX(calc(var(--wobble) * -1)) rotate(-6deg); }
  to   { transform: translateX(var(--wobble)) rotate(6deg); }
}

/* Keep wobbling forever, but pop in exactly once. */
.bug.pop-in { animation: fly-wobble var(--wob, 1.8s) ease-in-out infinite alternate, popin 0.25s ease 1; }

@keyframes popin {
  0% { scale: 0; }
  70% { scale: 1.25; }
  100% { scale: 1; }
}

/* A rocket just exploded nearby — total panic! The jitter replaces the calm
   wobble, so the bug really is harder to tap. Must sit BEFORE .bug.frozen so
   freezing (a later animation-play-state longhand) still pauses the jitter. */
.bug.scared { animation: scare-jitter 0.35s linear infinite; }
@keyframes scare-jitter {
  0%   { transform: translate(-14px, -6px) rotate(-14deg); }
  25%  { transform: translate(12px, 9px) rotate(11deg); }
  50%  { transform: translate(-10px, 11px) rotate(-9deg); }
  75%  { transform: translate(13px, -9px) rotate(13deg); }
  100% { transform: translate(-14px, -6px) rotate(-14deg); }
}

/* Tapped: hold perfectly still (mid-wobble) while the catcher flies over. */
.bug.frozen, .bug.frozen .wing {
  animation-play-state: paused;
}
.bug.frozen { pointer-events: none; }

/* A missed bug reaches the grass and buzzes away — no harm done. Keep the
   wobble running so the bug doesn't snap sideways as it fades out. */
.bug.fly-away {
  animation: fly-wobble var(--wob, 1.8s) ease-in-out infinite alternate, flyoff 0.5s ease forwards;
  pointer-events: none;
}
@keyframes flyoff {
  to { opacity: 0; transform: translateY(10px) scale(0.5); }
}

.bug > span { position: absolute; pointer-events: none; }

.bug .wing {
  top: 16%;
  width: 36%;
  height: 52%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: top center;
  animation: flutter 0.18s ease-in-out infinite alternate;
}

.bug .wing.l { left: -3%; rotate: -30deg; }
.bug .wing.r { right: -3%; rotate: 30deg; animation-delay: 0.09s; }

@keyframes flutter {
  from { transform: scaleX(0.65); }
  to   { transform: scaleX(1.15); }
}

.bug .body {
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 4%;
  border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), var(--c) 45%, var(--c2));
}

/* The line down the middle where the shell splits. */
.bug .body::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 8%;
  bottom: 8%;
  width: 4%;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 99px;
}

.bug .spot {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
}

.bug .spot.s1 { width: 22%; height: 18%; left: 15%; top: 22%; }
.bug .spot.s2 { width: 18%; height: 15%; right: 16%; top: 34%; }
.bug .spot.s3 { width: 15%; height: 13%; left: 30%; top: 60%; }

/* Head with two white eyes (gradients) and two antennae (pseudo-elements). */
.bug .head {
  left: 30%;
  right: 30%;
  top: 3%;
  height: 25%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 44%, #fff 13%, transparent 16%),
    radial-gradient(circle at 68% 44%, #fff 13%, transparent 16%),
    radial-gradient(circle at 35% 35%, #6a6a7a, #33333f 70%);
}

.bug .head::before, .bug .head::after {
  content: "";
  position: absolute;
  top: -50%;
  width: 9%;
  height: 58%;
  background: #33333f;
  border-radius: 99px;
}

.bug .head::before { left: 24%; transform: rotate(-24deg); }
.bug .head::after { right: 24%; transform: rotate(24deg); }

/* The demo bug on the round-intro card: same look, floating in place. */
.bug.demo {
  position: relative;
  display: inline-block;
  width: clamp(56px, 14vw, 80px);
  cursor: default;
  margin: 2px 0 6px;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2));
  animation: demoFloat 1.6s ease-in-out infinite alternate;
}

@keyframes demoFloat {
  from { transform: translateY(-4px) rotate(-5deg); }
  to   { transform: translateY(4px) rotate(5deg); }
}

/* ------------------------ The villain rocket ------------------------- */

/* A sneaky dark-purple rocket with an evil grin. It can't be tapped — taps
   pass straight through to any bug behind it — and it never costs a heart;
   it just zaps bugs. Drawn pointing right; JS rotates it along its path
   (never animate transform on .missile itself — rotation is inline style). */
.missile {
  position: absolute;
  width: clamp(52px, 13vw, 76px);
  aspect-ratio: 2 / 1;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3));
}

.missile > span, .missile .eye { position: absolute; }

.missile .body {
  left: 8%;
  top: 22%;
  width: 72%;
  height: 56%;
  border-radius: 46% 24% 24% 46% / 50% 50% 50% 50%;
  background: linear-gradient(180deg, #6b2fa8, #3f1d66);
}

.missile .nose {
  left: 76%;
  top: 26%;
  width: 24%;
  height: 48%;
  background: #2c1447;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.missile .fin {
  left: 2%;
  width: 20%;
  height: 28%;
  background: #2c1447;
  border-radius: 70% 30% 20% 60%;
}

.missile .fin.t { top: 2%; transform: rotate(-16deg); }
.missile .fin.b { bottom: 2%; transform: rotate(16deg) scaleY(-1); }

/* The pale porthole with slit eyes and a wicked grin. */
.missile .face {
  left: 34%;
  top: 28%;
  width: 24%;
  height: 44%;
  border-radius: 50%;
  background: #f2e8ff;
  box-shadow: inset 0 0 0 2px #2c1447;
}

.missile .eye {
  top: 28%;
  width: 30%;
  height: 13%;
  background: #2c1447;
  border-radius: 99px;
}

.missile .eye.l { left: 12%; transform: rotate(22deg); }
.missile .eye.r { right: 12%; transform: rotate(-22deg); }

/* Classic CSS smile arc — only the bottom border of a circle shows. */
.missile .face::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 38%;
  width: 60%;
  height: 44%;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-bottom-color: #2c1447;
  border-radius: 50%;
}

/* Little green flame at the tail; the particle trail does the rest. */
.missile .flame {
  left: -12%;
  top: 32%;
  width: 20%;
  height: 36%;
  transform-origin: right center;
  border-radius: 60% 20% 20% 60% / 50% 50% 50% 50%;
  background: radial-gradient(circle at 75% 50%, #d6ffe2, #3ddc68 55%, rgba(61, 220, 104, 0) 78%);
  animation: flame-flicker 0.12s linear infinite alternate;
}

@keyframes flame-flicker {
  from { transform: scaleX(0.75); opacity: 0.8; }
  to   { transform: scaleX(1.3); opacity: 1; }
}

/* ---------------------- The catcher (net / box) ---------------------- */

/* One catcher that glides to whatever bug you tap. data-tool picks which
   child shows: the net (round 1) or the box (round 2 and on). */
#catcher {
  position: absolute;
  z-index: 20;
  width: clamp(64px, 16vw, 92px);
  height: clamp(64px, 16vw, 92px);
  left: calc(50% - clamp(32px, 8vw, 46px));
  top: calc(100% - clamp(72px, 18vw, 102px));
  pointer-events: none;
  transition: left 0.18s ease, top 0.18s ease;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.25));
}

#catcher.no-glide { transition: none; }

#catcher.swing { animation: swing 0.3s ease; }
@keyframes swing {
  40% { rotate: -16deg; scale: 1.12; }
}

#catcher .net, #catcher .box {
  position: absolute;
  inset: 0;
  display: none;
}

#catcher[data-tool="net"] .net { display: block; }
#catcher[data-tool="box"] .box { display: block; }

#catcher .net > span, #catcher .box > span { position: absolute; display: block; }

/* The net: a hoop full of mesh, with a wooden handle. */
.net .hoop {
  left: 4%;
  top: 2%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  border: 5px solid #8a5a2e;
  background:
    radial-gradient(rgba(255, 255, 255, 0.75) 18%, transparent 22%) 0 0 / 11px 11px,
    rgba(210, 240, 255, 0.35);
}

.net .stick {
  right: 4%;
  bottom: -2%;
  width: 10%;
  height: 48%;
  background: linear-gradient(180deg, #b07a3e, #8a5a2e);
  border-radius: 99px;
  rotate: -38deg;
  transform-origin: top center;
}

/* The box: open cardboard with two flaps folded out. */
.box .body {
  left: 8%;
  right: 8%;
  top: 26%;
  bottom: 6%;
  background: linear-gradient(180deg, #e0b070, #c08a4a);
  border: 4px solid #8a5a2e;
  border-radius: 6px 6px 10px 10px;
}

.box .body::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 5%;
  height: 26%;
  background: #6a4520;
  border-radius: 4px;
}

.box .flap {
  top: 10%;
  width: 34%;
  height: 17%;
  background: linear-gradient(180deg, #eec080, #d09a5a);
  border: 3px solid #8a5a2e;
  border-radius: 4px;
}

.box .flap.l { left: 3%; rotate: -18deg; }
.box .flap.r { right: 3%; rotate: 18deg; }

/* --------------------------- FX canvas ------------------------------ */

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

/* ---------------------------- Overlays ------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 60, 40, 0.45);
  backdrop-filter: blur(3px);
}

.overlay.show { display: flex; }
.overlay.win { background: rgba(255, 220, 120, 0.35); }
.overlay.lose { background: rgba(40, 60, 50, 0.5); }

.card {
  background: #fff;
  border-radius: 28px;
  border: 6px solid #8fd88f;
  box-shadow: 0 16px 0 rgba(60, 160, 90, 0.25), 0 24px 40px rgba(0, 0, 0, 0.3);
  padding: clamp(20px, 5vw, 40px);
  max-width: 440px;
  width: 100%;
  text-align: center;
  animation: cardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardIn {
  from { transform: scale(0.6) translateY(30px); opacity: 0; }
}

.card-emoji {
  font-size: clamp(46px, 12vw, 72px);
  line-height: 1;
  margin-bottom: 6px;
}

.card h1 {
  margin: 6px 0 12px;
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 800;
  color: #2fa04e;
}

.overlay.win .card h1 { color: #ff9500; }
.overlay.lose .card h1 { color: #6a7fd0; }

.card p {
  margin: 8px 0;
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 500;
  color: #3a4a5a;
}

.card p.small { font-size: clamp(13px, 3vw, 16px); color: #7a8a9a; }

.big-btn {
  margin-top: 18px;
  font-family: inherit;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #6fd68f, #3aa25e);
  border: none;
  border-radius: 99px;
  padding: 14px 34px;
  cursor: pointer;
  box-shadow: 0 6px 0 #2f8c4e, 0 10px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #2f8c4e, 0 4px 10px rgba(0, 0, 0, 0.25);
}