/* ═══════════════ Build-a-Bug Lab ═══════════════ */
:root {
  --plum: #3d2b3d;
  --cream: #fff8ec;
  --candy-pink: #ff5d73;
  --candy-orange: #ff9f45;
  --candy-yellow: #ffd447;
  --candy-green: #8fd944;
  --candy-blue: #4cc9f0;
  --candy-purple: #7b6cf6;
  --shadow: 0 8px 0 rgba(61,43,61,.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Baloo 2', 'Comic Sans MS', cursive;
  background: var(--cream); color: var(--plum);
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; color: var(--plum); }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }

/* ─── generic buttons ─── */
.big-btn {
  font-size: 1.6rem; font-weight: 800; padding: .7em 1.6em; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow), inset 0 -6px 0 rgba(61,43,61,.12);
  border: 5px solid var(--plum);
  transition: transform .12s;
}
.big-btn:active { transform: scale(.93) rotate(-2deg); }
.big-btn.go {
  background: url('../assets/ui_go_button.png') center/100% 100% no-repeat;
  border-color: transparent; box-shadow: var(--shadow);
}
.big-btn.journal { background: var(--candy-yellow); }
.big-btn.back { background: #fff; }
.round-btn {
  width: 62px; height: 62px; border-radius: 50%; font-size: 1.7rem;
  background: #fff; border: 5px solid var(--plum); box-shadow: var(--shadow);
  transition: transform .12s;
}
.round-btn:active { transform: scale(.9) rotate(8deg); }

/* ─── title screen ─── */
#screen-title {
  align-items: center; justify-content: center;
  background: linear-gradient(#9be2ff, #d8f7ff 70%, #8fd944 70.5%);
}
.grass-strip { position: absolute; bottom: 0; width: 100%; height: 18%;
  background: radial-gradient(circle at 10% 0, #7ccb52 20%, transparent 21%) 0 0/80px 40px repeat-x, #8fd944; }
.title-card {
  background: var(--cream); border: 8px solid var(--plum); border-radius: 48px;
  padding: 2.2rem 3.4rem; text-align: center; z-index: 2;
  box-shadow: 0 14px 0 rgba(61,43,61,.25);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.title-card h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 1; }
.title-card h1 span:nth-child(1) { color: var(--candy-pink); }
.title-card h1 span:nth-child(2) { color: var(--candy-orange); }
.title-card h1 span:nth-child(3) { color: var(--candy-blue); }
.title-card h1 em { color: var(--candy-purple); font-style: normal; }
.tagline { font-size: 1.25rem; font-weight: 700; opacity: .75; }
.title-bug { width: 190px; height: 190px; animation: idle-bob 2.4s ease-in-out infinite; }
.title-bug svg { width: 100%; height: 100%; }

.prof-mascot {
  position: absolute; right: 4%; bottom: 16%; width: 160px; z-index: 3;
  filter: drop-shadow(0 10px 14px rgba(61,43,61,.3));
  animation: idle-bob 2.4s ease-in-out infinite; animation-delay: .3s;
}

.teacher-link {
  position: absolute; bottom: 10px; right: 14px; z-index: 3;
  font-size: .78rem; font-weight: 700; color: var(--plum); opacity: .55;
  text-decoration: none; background: rgba(255,255,255,.7);
  border: 2px solid var(--plum); border-radius: 999px; padding: 3px 12px;
}
.teacher-link:hover { opacity: 1; background: #fff; }

/* ─── lab layout ─── */
#screen-lab { background: linear-gradient(#e8f6ff, #fdf2ff); }
.lab-header, .habitat-hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; gap: 10px; z-index: 5;
}
.lab-header h2 { font-size: 1.7rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.header-icon { width: 34px; height: 34px; }
.header-right { display: flex; gap: 10px; }
.lab-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.bug-holder { width: min(46vh, 420px); height: min(46vh, 420px); position: relative; z-index: 2; }
.bug-holder svg { width: 100%; height: 100%; }
.bug-holder .bug-root { animation: idle-bob 2.6s ease-in-out infinite; transform-origin: 200px 240px; }

.mirror-line {
  position: absolute; top: 4%; bottom: 10%; left: 50%; width: 0; z-index: 1;
  border-left: 6px dashed var(--candy-purple); opacity: 0; transition: opacity .3s; border-radius: 4px;
}
.mirror-line.show { opacity: .8; }

.leg-counter {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--candy-yellow); border: 5px solid var(--plum); border-radius: 999px;
  font-size: 1.5rem; font-weight: 800; padding: .2em .9em; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .25s; z-index: 6; white-space: nowrap;
}
.leg-counter.show { opacity: 1; }

.narrator-bubble {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) scale(.8);
  background: #fff; border: 5px solid var(--plum); border-radius: 24px;
  padding: .4em 1.1em .4em .4em; font-size: 1.15rem; font-weight: 700; max-width: 84%;
  opacity: 0; transition: all .25s; z-index: 6; text-align: left;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px;
}
.narrator-bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
.narrator-avatar {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  background: var(--candy-yellow); border: 4px solid var(--plum); object-fit: cover; object-position: center 30%;
}
.narrator-text { flex: 1; }

/* ─── tabs & tray ─── */
.part-tabs { display: flex; justify-content: center; gap: 8px; padding: 6px 12px; flex-wrap: wrap; }
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 1.5rem; background: #fff; border: 5px solid var(--plum);
  border-radius: 22px; padding: 8px 16px; box-shadow: var(--shadow);
  transition: transform .12s, background .2s;
}
.tab-icon { width: 34px; height: 34px; display: block; }
.tab span { font-size: .8rem; font-weight: 800; }
.tab.active { background: var(--candy-yellow); transform: translateY(-6px); }
.tab:active { transform: scale(.92); }

.part-tray {
  display: flex; gap: 14px; padding: 14px 18px 20px; overflow-x: auto;
  align-items: center; min-height: 138px; justify-content: safe center;
}
.part-card {
  flex: 0 0 auto; width: 108px; background: #fff; border: 5px solid var(--plum);
  border-radius: 24px; padding: 8px; text-align: center; box-shadow: var(--shadow);
  transition: transform .15s, background .2s; cursor: pointer;
}
.part-card:active { transform: scale(.9) rotate(-3deg); }
.part-card.selected { background: var(--candy-green); transform: translateY(-6px); }
.part-card .thumb { width: 84px; height: 70px; margin: 0 auto; }
.part-card .thumb svg { width: 100%; height: 100%; }
.part-card .lbl { font-size: .85rem; font-weight: 800; }

.swatch {
  flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%;
  border: 6px solid var(--plum); box-shadow: var(--shadow); cursor: pointer;
  transition: transform .15s;
}
.swatch:active { transform: scale(.85); }
.swatch.selected { outline: 6px solid var(--candy-yellow); transform: translateY(-6px); }
.tray-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tray-group > .grp-label { font-weight: 800; font-size: .9rem; opacity: .7; }
.tray-row { display: flex; gap: 12px; }

/* leg stepper */
.leg-stepper { display: flex; align-items: center; gap: 18px; }
.step-btn {
  width: 84px; height: 84px; border-radius: 50%; font-size: 2.6rem; font-weight: 800;
  border: 6px solid var(--plum); box-shadow: var(--shadow);
  transition: transform .12s;
}
.step-btn:active { transform: scale(.85); }
.step-btn.plus { background: var(--candy-green); }
.step-btn.minus { background: var(--candy-pink); }
.leg-count-display { text-align: center; }
.leg-count-display .num { font-size: 3.2rem; font-weight: 800; line-height: 1; }
.leg-count-display .word { font-weight: 800; opacity: .7; }
.leg-dots { display: flex; gap: 6px; margin-top: 4px; justify-content: center; }
.leg-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--candy-purple); border: 3px solid var(--plum); }
.leg-dots i.off { background: #ddd; opacity: .4; }

.float-next {
  position: absolute; right: 16px; bottom: 16px; z-index: 8;
  animation: idle-bob 2s ease-in-out infinite;
}

/* ─── name screen ─── */
#screen-name { align-items: center; justify-content: center; overflow-y: auto;
  background: linear-gradient(#fdf2ff, #e8f6ff); }
.name-card {
  background: #fff; border: 8px solid var(--plum); border-radius: 40px;
  padding: 1.6rem 2rem; margin: 20px; max-width: 680px; width: min(92vw, 680px);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 14px 0 rgba(61,43,61,.22); max-height: 92vh; overflow-y: auto;
}
.name-card h2 { font-size: 1.8rem; }
.name-card h3 { font-size: 1.2rem; }
.mini-bug { width: 150px; height: 150px; }
.mini-bug svg { width: 100%; height: 100%; }
#bug-name-input {
  font-family: inherit; font-size: 1.6rem; font-weight: 800; text-align: center;
  border: 5px solid var(--plum); border-radius: 999px; padding: .4em 1em;
  width: 100%; background: var(--cream); color: var(--plum); outline: none;
}
#bug-name-input:focus { background: #fffbe8; }
.chip-btn {
  background: var(--candy-blue); border: 4px solid var(--plum); border-radius: 999px;
  font-size: 1rem; font-weight: 800; padding: .35em 1em; box-shadow: var(--shadow);
}
.chip-btn:active { transform: scale(.92); }
#feature-quiz { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.quiz-row { background: var(--cream); border: 4px solid var(--plum); border-radius: 22px; padding: 10px 14px; }
.quiz-row .q { font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.speak-btn {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  background: var(--candy-blue); border: 4px solid var(--plum);
  font-size: 1.1rem; box-shadow: var(--shadow); transition: transform .12s;
}
.speak-btn:active { transform: scale(.85) rotate(-8deg); }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-opt {
  background: #fff; border: 4px solid var(--plum); border-radius: 999px;
  font-size: .95rem; font-weight: 700; padding: .3em .9em;
}
.quiz-opt.selected { background: var(--candy-orange); }
.row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ─── habitat picker ─── */
#screen-habitat-pick { align-items: center; justify-content: center; gap: 24px;
  background: linear-gradient(#e8f6ff, #fdf2ff); }
.pick-title { font-size: 2rem; text-align: center; padding: 0 20px; }
.habitat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  gap: 20px; padding: 0 24px; justify-content: center; width: 100%; }
.habitat-card {
  border: 6px solid var(--plum); border-radius: 28px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow); cursor: pointer; text-align: center;
  transition: transform .15s;
}
.habitat-card:active { transform: scale(.94); }
.habitat-card img { width: 100%; height: 150px; display: block; object-fit: cover; }
.habitat-card .h-label { font-size: 1.3rem; font-weight: 800; padding: 8px; }

/* ─── live habitat ─── */
#screen-habitat { background: #000; }
.habitat-scene { position: absolute; inset: 0; overflow: hidden; }
.habitat-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center bottom;
}
.habitat-hud { position: absolute; top: 0; left: 0; right: 0; }
.hud-name {
  background: #fff; border: 5px solid var(--plum); border-radius: 999px;
  font-size: 1.3rem; font-weight: 800; padding: .25em 1.2em; box-shadow: var(--shadow);
  max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-bug {
  position: absolute; width: 150px; height: 150px; z-index: 3;
  transition: none; will-change: left, top;
}
.live-bug svg { width: 100%; height: 100%; overflow: visible; }
.live-bug .bug-shadow { display: none; }
.live-bug.behavior-fly .bug-root, .live-bug.behavior-zoom .bug-root { animation: fly-bob 1.1s ease-in-out infinite; }
.live-bug.behavior-hop .bug-root { animation: hop 0.85s cubic-bezier(.3,0,.4,1) infinite; }
.live-bug.behavior-wiggle .bug-root { animation: wiggle 0.8s ease-in-out infinite; }
.live-bug.behavior-scuttle .bug-root { animation: scuttle .28s linear infinite; }
.live-bug.behavior-walk .bug-root { animation: walk-bounce .5s ease-in-out infinite; }
.live-bug.flip { transform: scaleX(-1); }

.adapt-toast {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%) scale(.8);
  background: #fff; border: 5px solid var(--plum); border-radius: 24px;
  padding: .4em 1.2em .4em .4em; font-size: 1.2rem; font-weight: 800; max-width: 84%;
  opacity: 0; transition: all .3s; z-index: 6; text-align: left; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 10px;
}
.adapt-toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
.adapt-toast-text { flex: 1; }

.snack { position: absolute; font-size: 2.4rem; z-index: 2; filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); }

/* ─── journal ─── */
#screen-journal { background: linear-gradient(#fdf2ff, #fff8ec); }
.journal-grid {
  flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; padding: 10px 24px 30px;
}
.journal-card {
  background: #fff; border: 6px solid var(--plum); border-radius: 28px;
  padding: 12px; text-align: center; box-shadow: var(--shadow); position: relative;
}
.journal-card .jb { width: 130px; height: 130px; margin: 0 auto; }
.journal-card .jb svg { width: 100%; height: 100%; }
.journal-card h3 { font-size: 1.3rem; }
.journal-card .facts { font-size: .82rem; text-align: left; opacity: .85; padding: 4px 6px; }
.journal-card .facts li { margin-left: 16px; }
.journal-card .del {
  position: absolute; top: -12px; right: -12px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--candy-pink); border: 4px solid var(--plum);
  font-size: 1rem; font-weight: 800;
}
.journal-empty {
  grid-column: 1/-1; text-align: center; font-size: 1.3rem; font-weight: 700;
  opacity: .7; padding: 20px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.journal-empty img { width: 110px; opacity: .9; }

/* ─── missions ─── */
.big-btn.mission { background: var(--candy-orange); }
.big-btn.compare { background: var(--candy-blue); font-size: 1rem; padding: .5em 1.1em; }
.mission-grid {
  flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 290px));
  gap: 20px; padding: 16px 26px 30px; justify-content: center; align-content: start;
}
.mission-card {
  background: #fff; border: 6px solid var(--plum); border-radius: 28px;
  padding: 18px; text-align: center; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .15s; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.mission-card:active { transform: scale(.94); }
.mission-card .m-emoji { font-size: 3.2rem; }
.mission-card h3 { font-size: 1.3rem; }
.mission-card p { font-size: .95rem; font-weight: 700; opacity: .8; }
.mission-card .m-badge { font-size: .8rem; font-weight: 800; background: var(--candy-yellow);
  border: 3px solid var(--plum); border-radius: 999px; padding: 2px 10px; }
.mission-card.done { background: #eaffea; }
.mission-banner {
  display: none; margin: 0 auto; max-width: 90%;
  background: var(--candy-orange); border: 5px solid var(--plum); border-radius: 999px;
  font-weight: 800; font-size: 1.05rem; padding: .3em 1.2em; text-align: center;
  box-shadow: var(--shadow); z-index: 5;
}
.mission-banner.show { display: block; animation: pop-in .4s cubic-bezier(.2,1.6,.4,1) both; }

/* ─── stickers & compare ─── */
.sticker-shelf {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 4px 20px 10px;
}
.sticker {
  background: #fff; border: 4px solid var(--plum); border-radius: 999px;
  font-size: .95rem; font-weight: 800; padding: .3em 1em .3em .5em; box-shadow: var(--shadow);
  animation: pop-in .4s both; display: inline-flex; align-items: center; gap: 4px;
}
.sticker.locked { opacity: .35; filter: grayscale(1); }
.badge-chip { font-size: 1.3rem; }
.star-icon { width: 22px; height: 22px; }
.modal {
  position: fixed; inset: 0; background: rgba(61,43,61,.45); z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--cream); border: 8px solid var(--plum); border-radius: 36px;
  padding: 1.6rem 2rem; max-width: 720px; width: 92vw; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 14px 0 rgba(61,43,61,.3); max-height: 92vh; overflow-y: auto;
}
.compare-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.compare-bug { width: 220px; background: #fff; border: 5px solid var(--plum);
  border-radius: 24px; padding: 10px; }
.compare-bug .cb { width: 160px; height: 160px; margin: 0 auto; }
.compare-bug .cb svg { width: 100%; height: 100%; }
.compare-bug h3 { font-size: 1.2rem; }
.compare-bug .cb-facts { font-size: .9rem; font-weight: 700; opacity: .8; }
.compare-prompts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ─── part reactions (builder) ─── */
.react-flap .wing-l { animation: flutter-l .12s ease-in-out infinite alternate !important; }
.react-flap .wing-r { animation: flutter-r .12s ease-in-out infinite alternate !important; }
.react-blink .face { animation: blink .9s ease-in-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%,100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } 55% { transform: scaleY(.08); } }
.react-wobble .antenna { animation: ant-wiggle .35s ease-in-out 3 !important; }
.react-march .leg { animation: march .22s ease-in-out 4 alternate; }
@keyframes march { from { translate: 0 0; } to { translate: 0 -10px; } }
.react-bounce .bug-root { animation: react-squash .5s cubic-bezier(.3,1.8,.4,1) 1; }
@keyframes react-squash { 0% { transform: scale(1,1); } 35% { transform: scale(1.12,.85); } 70% { transform: scale(.94,1.08); } 100% { transform: scale(1,1); } }

/* live bug tap = happy hop */
.live-bug.tapped .bug-root { animation: tap-hop .6s cubic-bezier(.3,1.6,.4,1) 1 !important; }
@keyframes tap-hop { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-60px) rotate(10deg); } 100% { transform: translateY(0) rotate(0); } }

/* ─── FX ─── */
#confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
.confetti { position: absolute; width: 14px; height: 14px; border-radius: 4px; animation: confetti-fall 1.6s ease-in forwards; }
@keyframes confetti-fall {
  from { transform: translateY(-10vh) rotate(0); opacity: 1; }
  to { transform: translateY(110vh) rotate(720deg); opacity: .6; }
}
.pop-in { animation: pop-in .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes idle-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* bug part animations */
.bug-svg .wing-l, .bug-svg .wing-r { animation: flutter-l 0.5s ease-in-out infinite alternate; }
.bug-svg .wing-r { animation-name: flutter-r; }
@keyframes flutter-l { from { rotate: 0deg; } to { rotate: 14deg; } }
@keyframes flutter-r { from { rotate: 0deg; } to { rotate: -14deg; } }
.bug-svg .antenna { transform-origin: 200px 130px; animation: ant-wiggle 2.2s ease-in-out infinite; }
@keyframes ant-wiggle { 0%,100% { rotate: 0deg; } 30% { rotate: 4deg; } 70% { rotate: -4deg; } }

/* symmetry flash */
.sym-flash .side-l { animation: sym-blink-l 1.6s ease-in-out; }
.sym-flash .side-r { animation: sym-blink-r 1.6s ease-in-out; }
@keyframes sym-blink-l { 0%,100% { filter: none; } 25% { filter: drop-shadow(0 0 14px #7b6cf6) brightness(1.25); } }
@keyframes sym-blink-r { 0%,100% { filter: none; } 65% { filter: drop-shadow(0 0 14px #ff8fd8) brightness(1.25); } }

/* movement behaviors */
@keyframes fly-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-22px) rotate(3deg); } }
@keyframes hop { 0%,100% { transform: translateY(0) scaleY(.92); } 35% { transform: translateY(-46px) scaleY(1.06); } 70% { transform: translateY(0) scaleY(.95); } }
@keyframes wiggle { 0%,100% { transform: skewX(0) scaleX(1); } 50% { transform: skewX(6deg) scaleX(.92); } }
@keyframes scuttle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes walk-bounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.firefly { animation: firefly 3s ease-in-out infinite; }
@keyframes firefly { 0%,100% { opacity: .2; } 50% { opacity: 1; filter: drop-shadow(0 0 10px #fff9a8); } }

@media (max-width: 640px) {
  .lab-header h2 { font-size: 1.2rem; }
  .round-btn { width: 52px; height: 52px; font-size: 1.4rem; }
  .float-next { font-size: 1.2rem; padding: .5em 1em; }
  .part-card { width: 92px; }
  .prof-mascot { display: none; }
}