/* ==========================================================
   THE BUG LAB (bug-lab.html)
   Layered on learn.css + zones.css (big stage, card, quiz), so it
   matches the Wild Weather Lab. Earthy greens and field-notebook
   cream, with a "lab badge" passport like the Ecosystem Explorer.
   ========================================================== */
.bug-page{background:#f1ead8;--bug-ink:#2f3a1c;--bug-deep:#3d4a22;--bug-gold:#e8b53a}

/* ---------- hero: a lab bench by a sunny window ---------- */
.zone-hero.bug-hero{padding-bottom:var(--bug-ground,300px)}
.bug-hero::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(180deg,#f3e9d2 0%,#efe2c4 100%)}
.bug-hero .zh-pano{top:0;height:100%}
.bug-hero h1{color:var(--bug-ink);font-size:clamp(2.3rem,5.6vw,3.9rem)}
.bug-hero .eyebrow{color:#9a4a1e}
.bug-hero .nb-lede{max-width:36rem;margin-inline:auto;color:#3a3424}
.bug-tools{align-items:center}
.bug-passport{display:inline-flex;align-items:center;gap:.45rem;min-height:46px;margin:0;padding:.5rem 1.05rem;border-radius:14px;background:var(--bug-deep);color:#ffe9a0;font:600 1rem/1 var(--display);box-shadow:inset 0 0 0 2px rgba(232,181,58,.55),inset 0 0 0 5px var(--bug-deep),inset 0 0 0 6px rgba(232,181,58,.28),0 4px 0 #262e14}
.bug-passport b{color:#fff;font-size:1.12rem}
.bug-passport.bump{animation:bugBump .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes bugBump{30%{transform:scale(1.14) rotate(-2deg)}}

/* ---------- station picker ---------- */
.bug-picker{max-width:1240px;margin:0 auto;padding:.4rem clamp(.6rem,3vw,1.5rem) 1.1rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.bug-chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:46px;padding:.4rem .95rem .4rem .6rem;border-radius:999px;border:2px solid #d8c9a3;background:#fffaf0;color:var(--bug-ink);font:600 .95rem/1 var(--display);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.bug-chip .bc-emo{font-size:1.25rem;line-height:1}
.bug-chip .bc-n{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:#efe4c4;color:#7a5a1e;font:700 .74rem/1 var(--display)}
.bug-chip:hover{transform:translateY(-2px);border-color:#b7a06a}
.bug-chip[aria-pressed="true"]{background:var(--bug-deep);border-color:var(--bug-deep);color:#fff4d6;box-shadow:0 4px 0 #262e14}
.bug-chip[aria-pressed="true"] .bc-n{background:#e8b53a;color:#2a2a10}
.bug-chip .bc-badge{display:none;position:absolute;top:-10px;right:-8px;width:25px;height:25px;border-radius:50%;place-items:center;background:#fffaf0;color:#b9502f;font-size:.8rem;line-height:1;border:2px solid #b9502f;box-shadow:inset 0 0 0 1.5px #fffaf0,inset 0 0 0 3px rgba(185,80,47,.75);transform:rotate(-14deg)}
.bug-chip.badged .bc-badge{display:grid}
.bug-chip.badged.fresh .bc-badge{animation:bugChipStamp .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes bugChipStamp{from{transform:scale(2.6) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(-14deg);opacity:1}}

/* ---------- the big stage ---------- */
.bug-page .big-stage{background:#cfdcc0}
.bug-stage canvas{cursor:pointer;-webkit-tap-highlight-color:transparent}
.bug-stage-title{padding:.4rem .9rem .45rem .7rem;border-radius:16px;background:rgba(255,250,236,.95);color:var(--bug-ink);text-shadow:none;font-size:clamp(1.15rem,2.2vw,1.8rem);box-shadow:0 6px 18px rgba(30,25,10,.18)}
.bug-page .big-stage .stage-note{background:rgba(47,58,28,.86);color:#fff4d6}
.bug-note{display:inline-block;max-width:30rem;padding:.4rem .85rem;border-radius:999px;font:600 .92rem/1.25 var(--display);transition:opacity .5s}
.bug-count{position:absolute;z-index:2;right:calc(var(--card-w) + 2*var(--gap));top:var(--gap);margin:0;padding:.45rem 1rem;border-radius:16px;background:rgba(255,250,236,.94);color:var(--bug-ink);font:600 clamp(.95rem,1.6vw,1.2rem)/1.2 var(--display);box-shadow:0 6px 18px rgba(30,25,10,.2);pointer-events:none;white-space:nowrap}
.bug-count b{color:#b9502f}
.bug-badgefx{position:absolute;z-index:4;left:calc((100% - var(--card-w) - 2*var(--gap))/2);top:44%;width:clamp(170px,20vw,230px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:.15rem;text-align:center;color:#b9502f;background:rgba(255,250,236,.94);border:6px solid #b9502f;box-shadow:inset 0 0 0 5px rgba(255,250,236,.93),inset 0 0 0 8px #b9502f,0 22px 50px rgba(40,20,10,.35);font:700 1.1rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.06em;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none}
.bug-badgefx .bf-emoji{font-size:3.1rem;line-height:1;letter-spacing:0}
.bug-badgefx small{font:600 .78rem/1.1 var(--display);letter-spacing:.1em;max-width:80%}
.bug-badgefx.go{animation:bugBadgeIn 3.2s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes bugBadgeIn{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-34deg) scale(2.5)}
  13%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(.96)}
  18%{transform:translate(-50%,-50%) rotate(-12deg) scale(1.05)}
  24%{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  84%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(.92)}}

/* ---------- controls along the bottom of the stage ---------- */
.big-zone>.bug-ctrl{align-items:center;gap:.4rem .5rem;background:linear-gradient(rgba(30,28,12,0),rgba(30,28,12,.5) 60%)}
.bug-ctrl .bk{display:inline-flex;align-items:center;gap:.35rem;min-height:42px;padding:.35rem .8rem;border-radius:999px;border:2px solid rgba(255,250,236,.9);background:rgba(255,250,236,.95);color:var(--bug-ink);font:600 .9rem/1 var(--display);cursor:pointer;box-shadow:0 3px 10px rgba(20,16,4,.2);transition:transform .12s,background .12s}
.bug-ctrl .bk:hover{transform:translateY(-2px)}
.bug-ctrl .bk[aria-pressed="true"]{background:var(--bug-deep);border-color:var(--bug-deep);color:#fff4d6}
.bug-ctrl .bk.go{background:#5f8a3e;border-color:#5f8a3e;color:#fff}
.bug-ctrl .bk.warn{background:#b9502f;border-color:#b9502f;color:#fff}
.bug-ctrl .bk .bk-emo{font-size:1.1rem;line-height:1}
.bug-ctrl .bk.done::after{content:"✓";display:grid;place-items:center;width:1.1rem;height:1.1rem;margin-left:.1rem;border-radius:50%;background:#5f8a3e;color:#fff;font-size:.7rem}
.bug-ctrl .bk[aria-pressed="true"].done::after{background:#e8b53a;color:#2a2a10}
.bug-ctrl .bk-sep{flex-basis:100%;height:0}
.bug-ctrl .bk-lab{font:600 .78rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff4d6;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.bug-slider{display:flex;align-items:center;gap:.6rem;padding:.35rem .95rem;border-radius:999px;background:rgba(255,253,246,.96);box-shadow:0 4px 12px rgba(0,0,0,.18);font:600 .95rem/1 var(--display);color:var(--bug-ink)}
.bug-slider input{width:clamp(150px,26vw,340px);accent-color:#5f8a3e;height:32px}
.bug-readout{padding:.5rem .95rem;border-radius:999px;background:var(--bug-deep);color:#ffe9a0;font:600 1rem/1.15 var(--display)}

/* ---------- card ---------- */
.bug-page .big-card{border-color:#e0cfa6}
.bug-page .big-card h2{color:var(--bug-ink)}
.bug-card .sc-order{color:#b9502f}
.bug-block{margin:.6rem 0;padding:.65rem .85rem;border-radius:14px;font-size:1.04rem;line-height:1.45}
.bug-block>b{display:block;font:600 .74rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2rem}
.bug-block p{margin:0}
.bb-what{background:#eef4e2}.bb-what>b{color:#4f7a2e}
.bb-how{background:#fdf0d2}.bb-how>b{color:#a0680c}
.bb-matters{background:#eaf1f6}.bb-matters>b{color:#2f6f9f}
.bb-look{background:#fffaf0;border:2px dashed #e0b84a}
.bb-look>b{color:#b9502f}
.bb-look h3{margin:.1rem 0 .1rem;font:600 1.3rem/1.1 var(--display);color:var(--bug-ink)}
.bb-look h3:empty,.bug-sci:empty,.bug-badges:empty{display:none}
.bug-sci{margin:0 0 .35rem!important;font:italic 400 .98rem/1.3 var(--read);color:#5a6b58}
.bug-badges{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .45rem}
.bug-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.22rem .62rem;border-radius:999px;font:600 .8rem/1.2 var(--display);border:1.5px solid transparent;background:#eef1e4;color:#3d5a24;border-color:#c9d8ac}
.bug-badge.no{background:#fbeede;color:#9a5a2a;border-color:#e8c9a4}
.bug-badge.fl{background:var(--bug-deep);color:#ffe9a0;border-color:var(--bug-deep)}
.bug-card .sc-facts li{background:#f7f3e6}

/* ---------- quiz with a bug picture ---------- */
.bug-quiz{border-color:#e0cfa6}
.bug-quiz .quiz-q{color:var(--bug-ink)}
.bug-qpic{width:130px;height:130px;margin:.4rem auto .2rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#fffdf6,#efe2c2);box-shadow:inset 0 0 0 4px #fff,0 4px 14px rgba(60,40,20,.16)}
.bug-qpic:empty{display:none}
.bug-qpic img{width:108px;height:108px;object-fit:contain}

/* ---------- phones and tablets ---------- */
@media(max-width:1099px){
  .big-zone>.bug-ctrl{background:none;padding-top:.8rem;flex-wrap:wrap;justify-content:center;overflow:visible}
  .bug-ctrl .bk-lab{color:var(--bug-ink);text-shadow:none}
  .bug-ctrl .bk{border-color:#d8c9a3}
  .bug-badgefx{left:50%}
  .bug-count{top:auto;bottom:12px;right:auto;left:50%;transform:translateX(-50%)}
}
@media(max-width:620px){
  .bug-chip{min-height:42px;font-size:.84rem;padding:.35rem .7rem .35rem .45rem;gap:.3rem}
  .bug-chip .bc-emo{font-size:1.1rem}.bug-chip .bc-n{display:none}
  .bug-ctrl .bk{min-height:38px;padding:.3rem .62rem;font-size:.82rem}
  .bug-slider{flex-wrap:wrap;justify-content:center;border-radius:18px}
  .bug-slider input{width:min(260px,70vw)}
  .bug-note{font-size:.8rem;max-width:calc(100vw - 40px)}
  .bug-count{font-size:.9rem;white-space:normal;text-align:center;max-width:calc(100% - 24px)}
  .bug-passport{font-size:.95rem}
  .bug-stage-title{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .bug-passport.bump,.bug-chip.badged.fresh .bc-badge{animation:none}
  .bug-badgefx.go{animation:none;opacity:1}
}