/* em_induction.css — magnet + coil + galvanometer for viz/em_induction.js (pure DOM). */

.em { display: flex; flex-direction: column; gap: 0.85rem; }
.em-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 210px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0b1018, #07090f); }

.em-coil { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: flex; gap: 3px; z-index: 1; }
.em-coil i { display: block; width: 11px; height: 56px; border-radius: 50%; border: 2.5px solid #b87333; background: rgba(184, 115, 51, 0.08); box-shadow: inset 0 0 4px rgba(184, 115, 51, 0.3); }

.em-magnet { position: absolute; top: 38%; width: 16%; height: 22px; transform: translate(-50%, -50%); z-index: 3; display: flex; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.em-magnet span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }
.em-n { background: linear-gradient(180deg, #f87171, #dc2626); } .em-s { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.em-magnet.em-flip { flex-direction: row-reverse; }

.em-meter { position: absolute; left: 50%; bottom: 6%; width: 84px; height: 46px; transform: translateX(-50%); border-radius: 84px 84px 0 0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom: none; overflow: hidden; }
.em-glow { position: absolute; inset: 0; border-radius: 84px 84px 0 0; background: radial-gradient(80% 120% at 50% 100%, rgba(251, 191, 36, calc(var(--i, 0) * 0.6)), transparent 70%); }
.em-glow.em-rev { background: radial-gradient(80% 120% at 50% 100%, rgba(56, 189, 248, calc(var(--i, 0) * 0.6)), transparent 70%); }
.em-needle { position: absolute; left: 50%; bottom: 0; width: 2.5px; height: 40px; transform: translateX(-50%); transform-origin: bottom center; background: linear-gradient(180deg, #fbbf24, #f59e0b); border-radius: 2px; transition: transform 0.08s linear; }
.em-mlbl { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 8px; color: #8aa0b6; }

.em-phase { position: absolute; left: 8px; top: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }
.em-poles { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.em-plbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.em-pole { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.em-pole:hover { background: rgba(255, 255, 255, 0.09); }
.em-pole.em-on { color: #07121d; background: #fbbf24; border-color: #fbbf24; }