/* ── Jungle widget (js/widgets/jungle.js) ───────────────────────────────── */
.jg-stage{position:absolute;inset:0;background-size:cover;background-position:center bottom;overflow:hidden;container-type:inline-size}
.jg-animals{position:absolute;inset:0;pointer-events:none;isolation:isolate}  /* animal z-index = their y, must not climb above the HUD */
.jg-animal{position:absolute;left:0;top:0;will-change:transform;pointer-events:none}
.jg-inner{position:relative;transform-origin:50% 100%;will-change:transform}
.jg-inner img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 .3cqi .4cqi rgba(20,40,10,.35))}
.jg-img-sleep{display:block}
.jg-img-stand{display:none}
.jg-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(220,40,30,0) 45%,rgba(200,30,20,.75) 100%)}

/* sleeping "z z z" and the alarmed "!" above an animal's head */
.jg-zzz,.jg-bang{position:absolute;right:8%;top:-4%;opacity:0;pointer-events:none;font-family:"Poppins",sans-serif;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);transform:scaleX(1)}
.jg-zzz{font-size:2.4cqi;letter-spacing:.1em}
.jg-zzz i,.jg-zzz b{font-style:normal;font-size:1.3em}
.jg-zzz-on .jg-zzz{animation:jg-zzz 2.8s ease-in-out infinite}
@keyframes jg-zzz{0%{opacity:0;transform:translate(0,.8cqi)}30%{opacity:.95}100%{opacity:0;transform:translate(1.4cqi,-2.4cqi)}}
.jg-bang{font-size:3.4cqi;color:#ffde3b;-webkit-text-stroke:.15cqi #7a2a00;top:-14%;right:12%}
.jg-bang-on .jg-bang{opacity:1;animation:jg-bang .45s ease-in-out infinite alternate}
@keyframes jg-bang{from{transform:translateY(0) scale(1)}to{transform:translateY(-.6cqi) scale(1.18)}}

/* status pill, top left */
.jg-status{position:absolute;left:1.6cqi;top:1.6cqi;display:flex;align-items:center;gap:.9cqi;padding:.7cqi 1.5cqi;border-radius:999px;background:rgba(20,40,20,.55);backdrop-filter:blur(6px);color:#fff;font-family:"Poppins",sans-serif;font-weight:600;font-size:max(.7rem,1.8cqi);line-height:1}
.jg-status-dot{width:1.4cqi;height:1.4cqi;min-width:8px;min-height:8px;border-radius:50%;background:#5fe08a;transition:background .3s}
.jg-status[data-mood="restless"] .jg-status-dot{background:#ffc83b}
.jg-status[data-mood="scared"] .jg-status-dot{background:#ff5a4a}
.jg-status-time{opacity:.75;font-variant-numeric:tabular-nums}
.jg-status-time:empty{display:none}

/* "too loud" badge, top centre */
.jg-badge{position:absolute;left:50%;top:1.6cqi;transform:translate(-50%,-160%);display:flex;align-items:center;gap:.8cqi;padding:.9cqi 2cqi;border-radius:999px;background:rgba(200,35,25,.92);color:#fff;font-family:"Poppins",sans-serif;font-weight:700;font-size:max(.8rem,2.4cqi);opacity:0;transition:transform .25s ease,opacity .25s ease;pointer-events:none;white-space:nowrap}
.jg-badge .material-icons-outlined{font-size:1.3em}
.jg-badge.jg-on{opacity:1;transform:translate(-50%,0)}

/* level meter, right edge (same maths as the noise meter) */
.jg-vu{position:absolute;right:1.6cqi;top:12cqi;bottom:3cqi;display:flex;flex-direction:column;align-items:center;gap:1cqi;padding:1cqi .9cqi;border-radius:999px;background:rgba(20,40,20,.5);backdrop-filter:blur(6px)}
.jg-vu-track{position:relative;flex:1;width:max(14px,2.4cqi);border-radius:999px;background:rgba(255,255,255,.22);overflow:visible}
.jg-vu-fill{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:999px;background:#5fe08a;transition:height .08s linear}
.jg-vu-mark{position:absolute;left:-.5cqi;right:-.5cqi;height:2px;background:#ff5a4a;pointer-events:none}
.jg-vu-tag{position:absolute;right:calc(100% + .6cqi);top:50%;transform:translateY(-50%);font-family:"Poppins",sans-serif;font-size:max(.55rem,1.3cqi);font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.jg-vu-icon{color:#fff;font-size:max(.9rem,2.2cqi)}

/* "activate microphone" card */
.jg-start{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,25,10,.28)}
.jg-start-card{display:flex;flex-direction:column;align-items:center;gap:1.4cqi;padding:3cqi 4cqi;border-radius:2cqi;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:0 1cqi 4cqi rgba(0,0,0,.25);text-align:center;max-width:70%}
.jg-start-ic{font-size:max(2rem,6cqi);color:var(--main)}
.jg-start-btn{padding:1.2cqi 3.2cqi;border-radius:999px;background:var(--main);color:#fff;border:none;font-family:inherit;font-weight:600;font-size:max(.9rem,2.4cqi);cursor:pointer}
.jg-start-desc{font-size:max(.75rem,1.8cqi);color:#3a4a3a;line-height:1.3}
.jg-start-desc.jg-err{color:#b3261e;font-weight:600}

/* the whole scene jolts when the animals are scared off */
.jg-shake{animation:jg-shake .5s ease-in-out}
@keyframes jg-shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-1.2%,.6%)}30%{transform:translate(1%,-.5%)}45%{transform:translate(-.8%,.4%)}60%{transform:translate(.6%,-.3%)}80%{transform:translate(-.3%,.2%)}}

/* settings popover (built on .nm-mic-pop) */
.jg-pop{min-width:17rem}
.jg-row{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;align-items:center;font-size:.8125rem;padding:.25rem .5rem}
.jg-row input{grid-column:1/-1;width:100%}
.jg-row b{font-variant-numeric:tabular-nums}
.jg-chk{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;padding:.25rem .5rem;cursor:pointer}

@media (prefers-reduced-motion:reduce){.jg-zzz-on .jg-zzz,.jg-bang-on .jg-bang,.jg-shake{animation:none}}