/* Animal echolocation. All rules scoped under .ae-* */
.ae-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ae-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.ae-hero { display: grid; place-items: center; }
.ae-hero img { width: 320px; max-width: 100%; max-height: 32vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.ae-tuner, .ae-head { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.ae-svg { width: 100%; display: block; overflow: visible; }
.ae-sky { fill: #0F1B33; }
.ae-wet .ae-sky, .ae-sea { fill: #0E2E4A; }
.ae-zoom { fill: #161C30; stroke: var(--line); }
.ae-ticks line { stroke: rgba(234,227,215,.3); stroke-width: 1.5; }
.ae-ticks text, .ae-gl { fill: var(--dim); font: 600 12px var(--sans); }
.ae-bat { fill: #B79A86; stroke: #2A1E2E; stroke-width: 1; }
.ae-prey { fill: #EFE3C8; stroke: #6B5B3A; stroke-width: .8; }
.ae-wing { fill: #D9C9A4; }
.ae-arcs path { fill: url(#aeBeam); }
.ae-fade { fill: var(--violet-bright); font: 700 12px var(--sans); }
.ae-zt { fill: var(--text); font: 700 13px var(--sans); }
.ae-verdict { font: 800 14px var(--sans); fill: var(--dim); }
.ae-verdict.ae-ok { fill: var(--gold); }
.ae-verdict.ae-no { fill: #9FB2CC; }
.ae-waves path { fill: none; stroke: rgba(169,155,255,.75); stroke-width: 1.6; }
.ae-echo path { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; }
.ae-dim .ae-waves, .ae-dim .ae-big { opacity: .25; }
.ae-read { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 14px; color: var(--dim); }
.ae-read b { color: var(--text); font-weight: 800; }
.ae-read .ae-hi { color: var(--violet-bright); font-weight: 700; }
.ae-note { font-size: 12px; color: var(--faint); text-align: center; }

/* labels */
.ae-head text, .ae-bars text { fill: var(--text); font: 700 13px var(--sans); }

/* the pitch bars */
.ae-bar { fill: var(--violet); }
.ae-grid { stroke: rgba(234,227,215,.14); stroke-width: 1; }
.ae-you { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
.ae-bars .ae-gl { fill: var(--dim); font: 600 12px var(--sans); }

@media (max-height: 700px) {
  .ae-tuner, .ae-head { max-width: 330px; }
  .ae-hero img { max-height: 28vh; }
}