/* Electroreception. All rules scoped under .er-* */
.er-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.er-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.er-hero { display: grid; place-items: center; }
.er-hero img { width: 320px; max-width: 100%; max-height: 32vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.er-photo { width: 100%; display: grid; place-items: center; }
.er-photo img { width: 100%; max-width: 380px; max-height: 32vh; object-fit: contain; border-radius: 16px; display: block; }
.er-svg { width: 100%; max-width: 380px; display: block; }
.er-lab { fill: var(--text); font: 700 13px var(--sans); }
.er-lab.er-dark { fill: #3A2A22; }

/* hunt */
.er-sand { fill: #C9B48A; }
.er-shk { fill: #8C9DB2; stroke: #0F2A40; stroke-width: 1.2; stroke-linejoin: round; }
.er-flat { fill: #9C8661; stroke: #5B4A30; stroke-width: 1; }
.er-loop { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: .8; }
.er-g { width: 100%; max-width: 380px; }
.er-g.ok .gt i { background: var(--gold); }

/* the field and the pore */
.er-water { fill: #0F2438; }
.er-skin { fill: #9FA9B5; }
.er-tube { fill: none; stroke: #CFE6F0; stroke-width: 10; stroke-linecap: round; opacity: .75; }
.er-bulb { fill: var(--gold); opacity: .85; }
.er-nerve { stroke: #F2D98A; stroke-width: 4; }

/* the tank */
.er-agar { fill: rgba(190,230,240,.35); stroke: rgba(210,240,250,.7); stroke-width: 1.5; }
.er-agar.er-film { stroke: #FFFFFF; stroke-width: 4; fill: rgba(220,230,240,.5); }
.er-thru { stroke: var(--gold); }

@media (max-height: 700px) {
  .er-svg { max-width: 330px; }
  .er-hero img, .er-photo img { max-height: 28vh; }
}