/* circuit_builder.css — series/parallel circuit for viz/circuit_builder.js (pure DOM). */

.cb { display: flex; flex-direction: column; gap: 0.85rem; }
.cb-stage { position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 200px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.cb-battery { position: absolute; left: 8%; top: 50%; width: 30px; height: 44px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 0;
  border-radius: 4px; background: linear-gradient(180deg, #334155, #1e293b); border: 1px solid #94a3b8; z-index: 3; }
.cb-battery span { font-size: 11px; font-weight: 800; color: #e2e8f0; } .cb-battery span:first-child { color: #fda4af; }
.cb-rail { position: absolute; left: 11%; right: 8%; height: 3px; background: #64748b; border-radius: 2px; }
.cb-rail-top { top: 28%; } .cb-rail-bot { top: 72%; }

.cb-bulbs { position: absolute; left: 14%; right: 10%; top: 28%; height: 44%; display: flex; align-items: center; justify-content: space-around; gap: 6px; }
/* series: bulbs sit inline on the top rail; parallel: bulbs sit as branches spanning the two rails */
.cb-bulb { position: relative; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0; border: 1.5px solid rgba(251, 191, 36, 0.5);
  background: radial-gradient(circle at 38% 34%, rgba(255,247,214,calc(.2 + .8*var(--g,0))), rgba(251,191,36,calc(.12 + .7*var(--g,0))) 60%, rgba(120,80,10,0.4));
  box-shadow: 0 0 calc(2px + var(--g,0) * 22px) calc(var(--g,0) * 6px) rgba(251,191,36,calc(.15 + .6*var(--g,0))); transition: box-shadow 0.15s, background 0.15s; }
.cb-stage:not(.cb-parallel) .cb-bulbs { top: 28%; transform: translateY(-50%); height: auto; }
.cb-stage.cb-parallel .cb-bulb { align-self: stretch; height: 100%; border-radius: 18px; }
.cb-bulb.cb-broken { border-style: dashed; border-color: #fb7185; box-shadow: none !important; background: rgba(251,113,133,0.12) !important; }
.cb-bulb.cb-broken::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fb7185; font-weight: 800; }
.cb-fila { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,237,160,calc(.3 + .7*var(--g,0))); }

.cb-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }
.cb-modes { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cb-mlbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.cb-mode { 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; }
.cb-mode:hover { background: rgba(255, 255, 255, 0.09); }
.cb-mode.cb-on { color: #07121d; background: #38bdf8; border-color: #38bdf8; }