/* ohms_law.css — the live circuit for viz/ohms_law.js (pure DOM). */

.ohm { display: flex; flex-direction: column; gap: 0.85rem; }
.ohm-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 220px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: radial-gradient(120% 90% at 50% 22%, rgba(56, 189, 248, 0.1), transparent 60%), linear-gradient(180deg, #0a0f1a, #06090f); }
.ohm-loop { position: absolute; left: 19%; top: 26%; width: 62%; height: 50%; border: 3px solid #64748b; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3); }

.ohm-battery { position: absolute; left: 19%; top: 51%; width: 30px; height: 18px; transform: translate(-50%, -50%); z-index: 2;
  border-radius: 3px; background: linear-gradient(180deg, #334155, #1e293b); border: 1px solid #94a3b8; display: flex; align-items: center; justify-content: space-between; padding: 0 3px; }
.ohm-bplus, .ohm-bminus { font-size: 11px; font-weight: 800; color: #e2e8f0; }
.ohm-bplus { color: #fda4af; }

.ohm-bulb { position: absolute; left: 50%; top: 26%; width: 30px; height: 30px; transform: translate(-50%, -50%); z-index: 3; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 247, 214, calc(0.25 + 0.75 * var(--glow, 0))), rgba(251, 191, 36, calc(0.15 + 0.7 * var(--glow, 0))) 60%, rgba(120, 80, 10, 0.5));
  border: 1.5px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 calc(2px + var(--glow, 0) * 26px) calc(var(--glow, 0) * 8px) rgba(251, 191, 36, calc(0.2 + 0.7 * var(--glow, 0))); transition: box-shadow 0.12s ease, background 0.12s ease; }
.ohm-bulb.ohm-dim { box-shadow: none; }
.ohm-fila { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 237, 160, calc(0.3 + 0.7 * var(--glow, 0))); }

.ohm-dots { position: absolute; inset: 0; pointer-events: none; }
.ohm-e { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #bae6fd, #38bdf8); box-shadow: 0 0 4px rgba(56, 189, 248, 0.7); }
.ohm-clab { position: absolute; left: 50%; top: 76%; transform: translate(-50%, 6px); font-size: 0.72rem; color: #8aa0b6; font-style: italic; }