:root{--cb-blue:#07549a;--cb-deep:#063663;--cb-sky:#e9f6ff;--cb-gold:#ffc928;--cb-green:#18864b;--cb-coral:#ed6a5a;--cb-ink:#16324a}
.circuit-main{background:linear-gradient(180deg,#eef8ff 0,#fff 38%);padding-bottom:3rem}
.circuit-intro{text-align:center;max-width:1100px;margin:0 auto;padding:2.6rem 1.25rem 1.5rem}.circuit-intro h1{color:var(--cb-deep);font-size:clamp(2rem,5vw,3.5rem);margin:.2rem 0 .8rem}.circuit-intro>p:not(.eyebrow){font-size:1.15rem;max-width:760px;margin:.5rem auto;color:#36546c}
.safety-ribbon{display:flex;align-items:center;justify-content:center;gap:.55rem;background:#fff8d6;border:2px solid #f0ca43;border-radius:14px;max-width:870px;margin:1.25rem auto 0;padding:.8rem 1rem;color:#654e00}.safety-ribbon span{font-size:1.5rem}
.game-shell,.how-to-card{width:min(1180px,calc(100% - 2rem));margin:0 auto;background:#fff;border:1px solid #cfe4f2;border-radius:22px;box-shadow:0 14px 38px rgba(5,70,120,.12);overflow:hidden}
.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;background:var(--cb-deep)}.level-picker{display:flex;flex-wrap:wrap;gap:.5rem}.level-tab,.sound-toggle{font:inherit;font-weight:800;border:0;border-radius:12px;cursor:pointer}.level-tab{display:flex;align-items:center;gap:.45rem;padding:.58rem .75rem;background:rgba(255,255,255,.14);color:#fff}.level-tab.troubleshoot-tab{background:rgba(237,106,90,.24)}.level-tab span{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:rgba(255,255,255,.2)}.level-tab.active,.level-tab.troubleshoot-tab.active{background:var(--cb-gold);color:#302500}.level-tab.complete span{background:var(--cb-green);color:#fff}.sound-toggle{padding:.65rem .85rem;background:#fff;color:var(--cb-deep);white-space:nowrap}
.mission-panel{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.5rem;background:linear-gradient(90deg,#e9f6ff,#fff8dc);border-bottom:1px solid #d9e8f2}.mission-number{margin:0;color:var(--cb-blue);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}.mission-panel h2{margin:.2rem 0;color:var(--cb-deep)}.mission-panel p:last-child{margin:.2rem 0}.star-score{white-space:nowrap;font-weight:900;color:var(--cb-deep);font-size:1.2rem;background:#fff;padding:.7rem 1rem;border-radius:14px;border:2px solid #f1d666}
.builder-layout{display:grid;grid-template-columns:260px 1fr;gap:1.2rem;padding:1.25rem;background:#f7fbfe}.parts-tray{background:#fff;border:2px solid #d7eaf5;border-radius:18px;padding:1rem}.parts-tray h3{margin:0;color:var(--cb-deep)}.parts-tray>p{font-size:.88rem;color:#557087;margin:.4rem 0 1rem}.parts-list{display:grid;gap:.65rem}.part{display:flex;align-items:center;gap:.65rem;width:100%;padding:.65rem .75rem;border:2px solid #bbd8e9;border-radius:13px;background:#f7fcff;color:var(--cb-ink);font:inherit;font-weight:800;cursor:grab;touch-action:none;text-align:left}.part:hover,.part:focus-visible,.part.selected{border-color:var(--cb-blue);background:#e4f4ff;transform:translateY(-1px)}.part.placed{opacity:.35;cursor:default;transform:none}.part-icon{display:grid;place-items:center;min-width:2.3rem;height:2.3rem;border-radius:10px;background:#fff;border:1px solid #cfe3ef;font-size:1.35rem}.tray-actions{display:grid;gap:.55rem;margin-top:1rem}.tray-actions .button{width:100%;font-size:.9rem;padding:.7rem}
.workbench-wrap{min-width:0}.workbench{position:relative;width:100%;aspect-ratio:9/5;min-height:390px;overflow:hidden;border:4px solid #9c6b3d;border-radius:18px;background-color:#f7e9c9;background-image:linear-gradient(90deg,rgba(132,88,38,.05) 1px,transparent 1px),linear-gradient(rgba(132,88,38,.05) 1px,transparent 1px);background-size:28px 28px;box-shadow:inset 0 0 0 4px #deb985}
.circuit-lines,.slots-layer{position:absolute;inset:0;width:100%;height:100%}.circuit-lines{pointer-events:none}.base-wire{fill:none;stroke:#60788b;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.live-wire{fill:none;stroke:#ffc928;stroke-width:7;stroke-linecap:round;stroke-dasharray:1 25;animation:energyFlow 1s linear infinite;filter:drop-shadow(0 0 4px #ffdf58)}@keyframes energyFlow{to{stroke-dashoffset:-52}}
.slot{position:absolute;transform:translate(-50%,-50%);width:15%;min-width:72px;aspect-ratio:1.25;display:grid;place-items:center;border:3px dashed #4b7f9f;border-radius:14px;background:rgba(255,255,255,.74);color:#41657c;text-align:center;padding:.3rem;font-size:.75rem;font-weight:900;cursor:pointer;transition:.18s}.slot:hover,.slot:focus-visible,.slot.hint{background:#fff6ad;border-color:#d69f00;transform:translate(-50%,-50%) scale(1.04)}.slot.correct{border-style:solid;border-color:#238653;background:#f4fff8}.slot.wrong{animation:shake .35s;border-color:#d13f31;background:#fff0ee}.slot .placed-icon{font-size:clamp(1.7rem,4vw,3rem);line-height:1}.slot .placed-label{font-size:.68rem;color:#234960}.slot.bulb-on{background:#fff9ad;box-shadow:0 0 22px 9px rgba(255,211,36,.75)}.slot.bulb-on .placed-icon{filter:drop-shadow(0 0 8px #ffb700)}.slot.switch-slot{cursor:pointer}.slot.switch-slot .placed-icon{transition:.2s}.slot.switch-on .placed-icon{transform:rotate(20deg)}@keyframes shake{25%{margin-left:-7px}75%{margin-left:7px}}
.power-message{position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);z-index:3;width:max-content;max-width:68%;padding:.55rem .9rem;border-radius:999px;background:rgba(20,49,70,.9);color:#fff;font-weight:800;text-align:center;font-size:.88rem}.power-message.live{background:#137940}.switch-help{text-align:center;font-weight:700;color:#46647a;margin:.65rem 0 0}
.haik-electric-sign{position:absolute;right:1.5%;bottom:1.5%;z-index:4;padding:.34rem .5rem;border:2px solid #12333f;border-radius:5px;background:rgba(255,255,255,.94);color:#12333f;font:900 clamp(.52rem,1vw,.72rem)/1 Arial,sans-serif;letter-spacing:.06em;box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}.haik-electric-sign span{display:block;margin-top:.12rem;color:#2f6e83;font-size:.78em;letter-spacing:.11em}
.learning-card{display:flex;gap:1rem;align-items:center;margin:0 1.25rem 1.25rem;padding:1rem 1.2rem;border-radius:16px;background:#e8f6ff;border-left:6px solid var(--cb-blue)}.learning-card h3,.learning-card p{margin:.15rem 0}.learning-card h3{color:var(--cb-deep)}.guide-icon{display:grid;place-items:center;flex:0 0 3rem;height:3rem;border-radius:50%;background:var(--cb-gold);font-size:1.5rem}
.how-to-card{margin-top:1.5rem;padding:1.4rem 1.8rem;overflow:visible}.how-to-card h2{color:var(--cb-deep)}.how-to-card li{margin:.45rem 0}.how-to-card>p{background:#fff8d9;border-radius:10px;padding:.8rem}
.celebration{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(4,34,57,.76);padding:1rem}.celebration[hidden]{display:none}.celebration-card{width:min(480px,100%);background:#fff;border-radius:24px;padding:2rem;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.35);animation:popIn .3s ease-out}.celebration-stars{font-size:2.2rem}.celebration-card h2{font-size:2rem;color:var(--cb-deep);margin:.5rem}.celebration-card p{font-size:1.05rem}.celebration-card .button{border:0;cursor:pointer}@keyframes popIn{from{transform:scale(.75);opacity:0}}
.drag-ghost{position:fixed;z-index:2000;pointer-events:none;width:150px;opacity:.9;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.battery-symbol{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:space-around;box-sizing:border-box;width:1.55em;height:2.7em;padding:.12em 0;border:.12em solid #17364f;border-radius:.22em;background:linear-gradient(180deg,#f25f55 0 50%,#3f91dc 50% 100%);color:#fff;font-family:Arial,sans-serif;font-size:.78em;font-weight:900;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.45);vertical-align:middle}.battery-symbol::before{content:"";position:absolute;top:-.31em;width:.64em;height:.22em;border:.1em solid #17364f;border-bottom:0;border-radius:.1em .1em 0 0;background:#f4cf45}.battery-minus,.battery-plus{display:grid;place-items:center;height:50%;font-size:1.15em}.slot .placed-icon .battery-symbol{font-size:.72em}.current-markers circle{fill:#fff;stroke:#e19600;stroke-width:3;filter:drop-shadow(0 0 4px #ffdf58)}.direction-arrow{display:inline-block;color:#fff3a0;font-size:1.08em;font-weight:900;letter-spacing:.08em}
.fault-flow{fill:none;stroke:#ff9f1c;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 4px #ffd166)}.fault-current-markers circle{fill:#fff;stroke:#d9543f;stroke-width:3;filter:drop-shadow(0 0 5px #ffb36b)}.slot.installed-device{cursor:default}.slot.faulty{border-color:#c9362b;background:#fff0ed;box-shadow:0 0 0 5px rgba(201,54,43,.18);animation:faultPulse 1.15s ease-in-out infinite}.slot.faulty .placed-icon{filter:grayscale(1);opacity:.58}.fault-mark{position:absolute;right:-9px;top:-12px;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#c9362b;color:#fff;border:3px solid #fff;font-size:1.2rem;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.3)}.slot.repaired{border-color:#168448;background:#edfff4;animation:repairGlow .65s ease-out}.slot.repaired::after{content:"✓";position:absolute;right:-8px;top:-11px;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:#168448;color:#fff;border:3px solid #fff;font-weight:900}@keyframes faultPulse{50%{box-shadow:0 0 0 10px rgba(201,54,43,.08)}}@keyframes repairGlow{50%{transform:translate(-50%,-50%) scale(1.12)}}
@media(max-width:800px){.game-toolbar{align-items:flex-start;flex-direction:column}.level-picker{width:100%}.level-tab{flex:1;justify-content:center;font-size:.78rem}.builder-layout{grid-template-columns:1fr}.parts-list{grid-template-columns:repeat(2,1fr)}.workbench{min-height:360px}.mission-panel{align-items:flex-start}.slot{width:18%}}
@media(max-width:520px){.circuit-intro{padding-top:1.5rem}.game-shell{width:calc(100% - .7rem);border-radius:14px}.game-toolbar,.builder-layout{padding:.7rem}.level-tab{padding:.48rem .3rem}.level-tab:not(.active){font-size:0}.level-tab:not(.active) span{font-size:.78rem}.mission-panel{padding:.85rem;flex-direction:column}.parts-list{grid-template-columns:1fr 1fr}.part{padding:.45rem;font-size:.78rem}.part-icon{min-width:1.8rem;height:1.8rem}.workbench{min-height:300px}.slot{min-width:58px;font-size:.61rem;border-width:2px}.power-message{font-size:.72rem}.learning-card{margin:0 .7rem .8rem}.how-to-card{width:calc(100% - 1rem);padding:1rem}}
@media(prefers-reduced-motion:reduce){.live-wire,.celebration-card{animation:none}.part,.slot{transition:none}}