/* Human echolocation lesson. All rules scoped under .echo-* */
.echo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.echo-note { font-size: 12px; color: var(--faint); text-align: center; }

.echo-hero img { display: block; width: 250px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.echo-brain img { width: 200px; transition: filter .6s; }
.echo-brain.echo-lit img { filter: drop-shadow(0 0 26px rgba(252, 192, 80, .75)); }
.echo-photo img { display: block; width: 260px; max-width: 100%; max-height: 36vh; object-fit: cover; border-radius: 18px; margin: 0 auto; }

/* the room and its strip */
.echo-room { --cap: 9999px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.echo-cv { display: block; width: min(100%, calc(var(--cap) * 340 / 190)); height: auto; }
.echo-tap { cursor: pointer; }
.echo-strip { display: block; width: 100%; height: auto; }
.echo-sbg { fill: var(--surface); }
.echo-st { font: 600 13px var(--sans); fill: var(--dim); }
.echo-r { text-anchor: end; }
.echo-faint { fill: var(--faint); }
.echo-base { stroke: rgba(234, 227, 215, .3); stroke-width: 1.5; }
.echo-spike { fill: none; stroke-width: 4; stroke-linecap: round; animation: echoUp .18s ease-out both; }
.echo-me { stroke: var(--text); }
.echo-back { stroke: var(--gold); }
.echo-soft { stroke: var(--violet-bright); }
.echo-humband { fill: rgba(234, 227, 215, .75); animation: echoFade .3s ease-out both; }
.echo-buried { stroke: var(--gold); opacity: .45; }
@keyframes echoUp { from { opacity: 0; } }
@keyframes echoFade { from { opacity: 0; } }

/* what an echo says */
.echo-tiles { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.echo-tile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); }
.echo-tile b { font-size: 16px; }
.echo-tile span { font-size: 15px; font-weight: 700; color: var(--gold); text-align: right; }

/* facial vision */
.echo-lanes { display: block; width: 100%; height: auto; }
.echo-floor { stroke: var(--line-strong); stroke-width: 2; }
.echo-board { fill: #C9B79C; transform-box: fill-box; transform-origin: center bottom; }
.echo-hitb { animation: echoShake .45s ease-out; fill: var(--red); }
@keyframes echoShake { 25% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
.echo-head { fill: var(--text); }
.echo-plug { fill: var(--gold); }

/* who can learn it */
.echo-group { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.echo-dots { display: grid; grid-template-columns: repeat(9, 22px); gap: 8px; justify-content: center; }
.echo-dots i, .echo-key i { display: block; width: 22px; height: 22px; border-radius: 50%; }
.echo-db { background: var(--violet-bright); }
.echo-ds { background: var(--gold); }
.echo-key { display: flex; gap: 18px; font-size: 14px; font-weight: 700; color: var(--dim); }
.echo-key span { display: flex; align-items: center; gap: 6px; }
.echo-key i { width: 12px; height: 12px; }

/* bats */
.echo-bats { display: block; width: 100%; height: auto; }
.echo-gapline { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 4; opacity: 0; transition: opacity .4s; }
.echo-gaps .echo-gapline { opacity: 1; }

@media (max-height: 700px) {
  .echo-room { --cap: 150px; }
  .echo-room:has(.echo-two) { --cap: 118px; }
  .echo-hero img { max-height: 150px; }
  .echo-brain img { width: 150px; }
  .echo-photo img { max-height: 170px; }
  .echo-bats { max-height: 200px; }
  .echo-dots { grid-template-columns: repeat(9, 18px); gap: 6px; }
  .echo-dots i { width: 18px; height: 18px; }
}