/* Branchez tout: a printed circuit board; the core chip carries the MakeProps logo on a white sticker. */
.circuit { position: absolute; inset: 0; background: #FFFFFF; }
.circuit-bar { position: absolute; left: 40px; right: 40px; top: 86px; height: 58px; display: flex; align-items: center; gap: 24px; }
.circuit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.circuit-text b { font-size: 17px; }
.circuit-text span { font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circuit-progress { padding: 6px 14px; border-radius: 20px; background: var(--mist); color: var(--royal); font-size: 14px; font-weight: 700; white-space: nowrap; }
.circuit-fuses { display: flex; gap: 6px; }
.fuse { width: 30px; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #C9A54E 0 22%, #F7E9C4 22% 78%, #C9A54E 78%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.fuse-blown { background: linear-gradient(90deg, #8D8D8D 0 22%, #3B3B3B 22% 78%, #8D8D8D 78%); }
.circuit-time { width: 150px; height: 8px; border-radius: 8px; background: var(--mist); overflow: hidden; }
.circuit-time i { display: block; height: 100%; background: var(--blue); }
.circuit-time i.circuit-time-low { background: var(--danger); }

.board { position: absolute; left: 40px; top: 152px; width: 1100px; height: 652px; border-radius: 14px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 9px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1.5px, transparent 1.5px) 0 0 / 46px 46px, linear-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px) 0 0 / 46px 46px, radial-gradient(120% 100% at 50% 40%, #12623F, #0B4A31 70%, #083A26); box-shadow: 0 0 0 3px #0A3E29, 0 18px 40px rgba(8, 40, 25, .3); }
.silk { position: absolute; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.silk-name { left: 60px; top: 16px; }
.hole { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 5px #C9A54E, 0 0 0 6px rgba(0, 0, 0, .3); }
.hole-a { left: 14px; top: 14px; }
.hole-b { right: 14px; top: 14px; }
.hole-c { left: 14px; bottom: 14px; }
.hole-d { right: 14px; bottom: 14px; }

.traces { position: absolute; left: 0; top: 0; width: 1180px; height: 820px; pointer-events: none; }
.trace { fill: none; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.trace-lit { stroke: #F2C14E; filter: drop-shadow(0 0 6px rgba(255, 205, 90, .7)); }
.trace-flow { stroke: #FFF7DA; stroke-width: 6; stroke-dasharray: 2 24; animation: flow 1.1s linear infinite; }
.trace-short { stroke: #FF5A4E; animation: short .9s ease-out forwards; }
.trace-live { fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-dasharray: 10 10; stroke-linecap: round; opacity: .9; }

.chips { position: absolute; inset: 0; pointer-events: none; }
.chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px; background: #1A1E23; color: #FFFFFF; box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: auto; touch-action: none; }
.chip::before, .chip::after { content: ''; position: absolute; left: 16px; right: 16px; height: 7px; background: repeating-linear-gradient(90deg, #D9B860 0 7px, transparent 7px 14px); }
.chip::before { top: -7px; }
.chip::after { bottom: -7px; }
.chip-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .09); }
.chip-text { display: flex; flex-direction: column; min-width: 0; }
.chip-text b { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.chip-text small { margin-top: 2px; font: 12px var(--font-mono); color: rgba(255, 255, 255, .62); }
.led { position: absolute; right: 10px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #6A2222; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); }
.chip-on .led { background: #57FF98; box-shadow: 0 0 10px 3px rgba(87, 255, 152, .6); }
.chip-core { justify-content: center; padding: 12px; background: #15191E; }
.chip-core::before, .chip-core::after { left: 12px; right: 12px; }
.chip-sticker { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 10px 8px 8px; border-radius: 4px; background: #FFFFFF; color: var(--logo-ink); }
.chip-logo { width: 112px; height: 22px; }
.chip-sticker b { font-size: 14px; letter-spacing: .12em; color: var(--navy); }
.chip-sticker small { font-size: 11px; color: var(--ink-faint); }
.chip-active, .chip-selected { box-shadow: 0 0 0 3px #FFFFFF, 0 0 24px rgba(255, 255, 255, .5); }
.chip-spark { animation: spark .6s ease-out; }

.explain { position: absolute; z-index: 40; left: 290px; top: 588px; width: 600px; padding: 18px 22px 14px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); animation: rise .25s ease-out; }
.explain b { display: block; font-size: 19px; }
.explain p { margin: 6px 0 6px; font-size: 16px; line-height: 1.45; color: var(--navy); }
.explain small { font-size: 12px; color: var(--ink-faint); }
.explain-danger { border-top: 6px solid var(--danger); }
.explain-danger b { color: var(--danger); }
.explain-warn { border-top: 6px solid #F2B705; }
.explain-warn b { color: var(--warn); }
.circuit .stamp { top: 52%; }

@keyframes flow { to { stroke-dashoffset: -26; } }
@keyframes short { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spark { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 78, .9); } 100% { box-shadow: 0 0 0 26px rgba(255, 90, 78, 0); } }