* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body { height: 100%; }

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: white;
    user-select: none;
    /* Fill the viewport as a column; no page scroll on desktop */
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Brand on the left, title block centred in the remaining space. The logo is
   taken out of the centring by giving the text block flex:1 and reserving the
   same width on the right, so the title stays optically centred on the page. */
.game-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.brand-link {
    flex-shrink: 0;
    width: 180px;
    display: block;
    line-height: 0;
}

.brand-logo {
    width: 100%;
    height: auto;
    display: block;
}

.header-text {
    flex: 1;
    text-align: center;
}

/* Balances the logo so the title block sits centred on the page. */
.game-header::after {
    content: '';
    flex-shrink: 0;
    width: 180px;
}

.game-title {
    font-size: 1.6rem;
    line-height: 1.1;
    background: linear-gradient(45deg, #ffd700, #ffeb3b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.game-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 6px;
}

.instructions {
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #ecf0f1;
    opacity: 0.85;
}

.instructions strong {
    color: #f39c12;
}

.game-container {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 20px;
    /* Fill remaining viewport height under the header */
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}

.info-panel.left-panel {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Circuit Section - holds the workspace */
.circuit-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 500px;
}

/* Circuit area - the workspace. The wooden board (parts/base.png) is the work
   surface the components sit on; a dark fill sits behind it as a fallback. */
.circuit-area {
    flex: 1;
    background: #2c3e50 url('parts/base.webp') center / 100% 100% no-repeat;
    background: #2c3e50 image-set(url('parts/base.webp') type('image/webp'), url('parts/base.png') type('image/png')) center / 100% 100% no-repeat;
    border-radius: 15px;
    border: 3px solid #34495e;
    position: relative;
    min-height: 400px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.info-panel {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.panel {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel h3 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* Buy This Kit card */
.kit-link { display: block; text-decoration: none; }

.kit-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 8px;
}

.kit-cta {
    display: block;
    text-align: center;
    color: #ffd700;
    font-weight: bold;
    font-size: 0.95rem;
}

/* Link out to the build instructions. Card-shaped like its neighbours, but
   gold-on-dark so it reads as an action rather than another readout. */
.instructions-link {
    display: block;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    color: #ffd700;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.instructions-link:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.75);
}

.status-item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    font-size: 0.9rem;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    background: #e74c3c;
    transition: all 0.3s ease;
}

.status-dot.active {
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.6);
}

/* Educational feedback console. Fixed height so a message of a different length
   never resizes the card and shifts its neighbours. */
.feedback-box {
    background: rgba(52, 152, 219, 0.95);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid rgba(255, 255, 255, 0.8);
    text-align: center;
    height: 120px;
    overflow-y: auto;
    transition: background 0.3s ease, border-color 0.3s ease;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-box.success {
    background: rgba(46, 204, 113, 0.95);
    border-left-color: #2ecc71;
}

.feedback-box.warning {
    background: rgba(230, 126, 34, 0.95);
    border-left-color: #f39c12;
}

.feedback-box.error {
    background: rgba(231, 76, 60, 0.95);
    border-left-color: #e74c3c;
}

.feedback-box.info {
    background: rgba(52, 152, 219, 0.95);
    border-left-color: #3498db;
}

/* Components are mounted at fixed spots in the workspace — the player wires them
   up rather than moving them, so there is no drag cursor and no hover scale that
   would fight the terminal anchoring. */
.component {
    position: absolute;
    user-select: none;
}

/* Layout: battery standing on the left, switch centred and dropped so its input
   lines up with the battery's bottom (+) terminal, lamp on the right. Horizontal
   positions are percentages so the trio stays balanced whatever the workspace
   width; verticals are fixed.

   Battery - a D-cell standing vertical in its holder (parts/batteryD-V.png,
   1080x1080 square). The "+" terminal is at the BOTTOM, the negative at the top. */
.battery {
    width: 360px;              /* +60%, held to the bottom-left of the group */
    aspect-ratio: 1 / 1;
    top: calc(115px + 3%);
    left: 1%;                  /* transparent margin runs off-screen; the visible
                                  cell sits toward the left */
    background: url('parts/batteryD-V.png') no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    transition: filter 0.2s ease;
}

/* Short Circuit Shake Animation */
@keyframes shortCircuitShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-5px) rotate(-1deg); }
    20% { transform: translateX(5px) rotate(1deg); }
    30% { transform: translateX(-4px) rotate(-1deg); }
    40% { transform: translateX(4px) rotate(1deg); }
    50% { transform: translateX(-3px) rotate(-0.5deg); }
    60% { transform: translateX(3px) rotate(0.5deg); }
    70% { transform: translateX(-2px) rotate(-0.5deg); }
    80% { transform: translateX(2px) rotate(0.5deg); }
    90% { transform: translateX(-1px); }
}

.battery.short-circuit-shake {
    animation: shortCircuitShake 0.6s ease-in-out infinite;
}

/* Overheating: a red glow around the cell. A drop-shadow (not box-shadow) so it
   traces the battery's shape in the transparent PNG rather than a rectangle. */
.battery.short-circuit-danger {
    filter:
        drop-shadow(0 0 10px rgba(255, 0, 0, 0.95))
        drop-shadow(0 0 22px rgba(255, 40, 0, 0.7));
}

/* Caption below the battery image. */
.battery-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ecf0f1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

/* Knife Switch - photographed states (parts/switch_open.png 301x290,
   switch_close.png 285x166). The .closed class that switch.js toggles swaps one
   image for the other; both are anchored to the bottom of the box, so the base
   plate stays put and only the lever appears to move. The brass posts, screws
   and lever are all painted into the images. */
.switch {
    width: 138px;
    aspect-ratio: 301 / 290;   /* the box, sized for the taller "open" shot */
    top: calc(324px + 3%);     /* dropped so switch-input lines up with battery + */
    left: calc(55% - 69px);    /* just right of centre (69 = half the width) */
    background: url('parts/switch_open.png') no-repeat bottom center;
    background-size: 100% auto;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    transition: filter 0.2s ease;
}

.switch.closed {
    background-image: url('parts/switch_close.png');
}

.switch:hover {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) brightness(1.12);
}

/* The lever, posts and screws live in the switch images now. */
.switch-lever {
    display: none;
}

/* Only this central patch toggles the switch. The connector circles sit at the
   left/right edges of the box (fx 0.21 / 0.81), so keeping the hit area to the
   middle stops a near-miss tap on a connector from flipping the switch. */
.switch-hit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 52%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /* Above the switch background, below the connectors (z 45) so a direct tap on
       a connector circle still wins. */
    z-index: 20;
    touch-action: manipulation;
}

.switch-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: #bdc3c7;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    pointer-events: none;
}

/* Lamp - a bulb in a round holder (parts/lamp.png 775x1023, portrait). The bulb
   sits in the top third of the image; the two screw terminals are near the base. */
.lamp-with-bulb {
    width: 162px;
    aspect-ratio: 775 / 1023;
    top: calc(19px + 3%);      /* raised so its terminals line up with battery − */
    left: 71%;
    background: url('parts/lamp.png') no-repeat center;
    background-size: contain;
    /* Above the darkening overlay (z 30), so the lit bulb and its bloom stay
       bright while everything around them dims. */
    z-index: 40;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    transition: filter 0.25s ease;
}

/* Glow overlay for the lit bulb — a warm radial bloom parked over the bulb (top
   centre of the image), faded in by the .has-power class since the photographed
   bulb is unlit. */
.lamp-with-bulb::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 21%;
    width: 62%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 250, 210, 0.95) 0%,
        rgba(255, 226, 120, 0.75) 35%,
        rgba(255, 200, 60, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lamp-with-bulb.has-power::after {
    opacity: 1;
}

.lamp-with-bulb.has-power {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 16px rgba(255, 220, 90, 0.95))
            drop-shadow(0 0 30px rgba(255, 210, 70, 0.6));
}

/* Darkening spotlight. A full-workspace veil that is transparent over the bulb
   (its centre, placed by lamp.js via --lx/--ly) and grows dark toward the edges,
   so the surrounding parts fall into shadow and the yellow glow reads far
   brighter by contrast. Sits above the parts and wires (z 30) but below the lamp
   image (z 40) and the reset button (z 50). */
.light-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(circle at var(--lx, 50%) var(--ly, 40%),
        rgba(0, 0, 0, 0)    3%,
        rgba(0, 0, 0, 0.15) 12%,
        rgba(0, 0, 0, 0.55) 38%,
        rgba(0, 0, 0, 0.78) 72%);
}

.light-overlay.on {
    opacity: 1;
}

.lamp-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 0.8rem;
    color: #ecf0f1;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
}

/* Connection Points — small rings inside a gold bezel, handled the same way as
   carprop. The fill carries the polarity (red positive, dark negative) so no
   +/- glyph is needed; the switch posts sit on the positive line and their
   terminal names end in -input / -output, so they fall through to the positive
   default. connections.js hands us the exact terminal coordinate; the centring
   is done here, which is why every other transform below repeats the translate
   instead of replacing it. */
.connection-point {
    position: absolute;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    background: #e03a2f;
    border: 2px solid #ffd042;
    border-radius: 50%;
    cursor: pointer;
    /* Above the lamp image (z 40) and the darkening overlay (z 30) so the lamp's
       own terminals are never hidden behind its photograph. */
    z-index: 45;
    transform: translate(-50%, -50%);
    /* Without this a touch drag starting on a terminal scrolls the page instead
       of pulling the cable. */
    touch-action: none;
    transition: background 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 0 6px rgba(255, 208, 66, 0.5);
}

.connection-point[data-terminal$="negative"] {
    background: #14181e;
}

/* Polarity is carried by colour now, so the +/- glyphs in the markup are no
   longer drawn — six captions over the parts read as clutter at this scale. */
.connection-point > strong {
    display: none;
}

/* Hover brightens the bezel, never the fill — the polarity colour has to stay
   readable at all times. */
.connection-point:hover {
    transform: translate(-50%, -50%) scale(1.35);
    border-color: #fff3c4;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(255, 215, 0, 0.9);
}

/* Connected: the fill keeps its polarity colour and the gold bezel thickens,
   so a fully wired circuit still shows which terminal is which. */
.connection-point.connected {
    border-width: 3px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 0 12px 2px rgba(255, 208, 66, 0.95);
}

/* The terminal the cable would land on if released now. */
.connection-point.drop-target {
    transform: translate(-50%, -50%) scale(1.5);
    border-color: #fff3c4;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 0 14px 3px rgba(255, 215, 0, 1);
}

/* The first contact tapped on touch. Bright and enlarged so it reads clearly
   over the finger while the user reaches for the second contact. */
.connection-point.selected {
    transform: translate(-50%, -50%) scale(1.5);
    border-color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.5),
        0 0 14px 4px rgba(120, 220, 255, 1);
    z-index: 46;
}

/* Applied while a wire is being pulled, so the free terminals announce
   themselves exactly when the user is looking for somewhere to plug in. Glow
   only, no scale — a ring that resizes reads as jitter next to the parts. */
.connection-point.ready-for-connection {
    animation: readyPulse 1.1s ease-in-out infinite;
}

@keyframes readyPulse {
    0%, 100% {
        border-color: #ffd042;
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.55),
            0 0 6px rgba(255, 208, 66, 0.6);
    }
    50% {
        border-color: #fff3c4;
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.55),
            0 0 16px 3px rgba(255, 208, 66, 0.95);
    }
}

/* Circuit Wires — one group per connected wire, holding a rotated segment per
   leg of its route plus a round joint at each corner. Sits above the part
   images (lamp is z 40) so a cable runs OVER the holder it plugs into, not
   hidden behind it. */
.circuit-wire-group {
    position: absolute;
    inset: 0;
    z-index: 42;
    pointer-events: none;
}

.circuit-wire {
    position: absolute;
    height: 8px;
    z-index: 10;
    border-radius: 4px;
    transition: all 0.3s ease;
    overflow: visible;
}

/* Corner cap: covers the notch two rotated rectangles leave where they meet. */
.circuit-wire-joint {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    z-index: 11;
    transition: all 0.3s ease;
}

.circuit-wire.red-circuit,
.circuit-wire-joint.red-circuit {
    background: linear-gradient(to bottom, #ff6b6b 0%, #e74c3c 50%, #c0392b 100%);
    border: 1px solid #a93226;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.4),
        inset 0 -1px 2px rgba(169,50,38,0.6),
        0 1px 4px rgba(0, 0, 0, 0.3);
}

.circuit-wire.white-circuit,
.circuit-wire-joint.white-circuit {
    background: linear-gradient(to bottom, #ffffff 0%, #ecf0f1 50%, #d5d8dc 100%);
    border: 1px solid #bdc3c7;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -1px 2px rgba(189,195,199,0.4),
        0 1px 4px rgba(0, 0, 0, 0.2);
}

.circuit-wire.black-circuit,
.circuit-wire-joint.black-circuit {
    background: linear-gradient(to bottom, #34495e 0%, #2c3e50 50%, #1b2631 100%);
    border: 1px solid #17202a;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.2),
        inset 0 -1px 2px rgba(23,32,42,0.7),
        0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Copper ferrules belong on the terminals only, so they are restricted to the
   first and last leg of a route — otherwise every corner would sprout a pair. */
.circuit-wire.wire-start::before,
.circuit-wire.wire-end::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: linear-gradient(45deg, #cd7f32 0%, #ffd700 50%, #b8860b 100%);
    border: 1px solid #8b4513;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow:
        inset 1px 1px 2px rgba(255, 215, 0, 0.8),
        inset -1px -1px 2px rgba(139, 69, 19, 0.6),
        0 0 6px rgba(255, 215, 0, 0.4);
}

.circuit-wire.wire-start::before {
    left: -8px;
}

.circuit-wire.wire-end::after {
    right: -8px;
}

/* Lit by game-logic.js marking the group, so every leg and corner of a routed
   wire glows together. */
.circuit-wire-group.active .circuit-wire,
.circuit-wire-group.active .circuit-wire-joint {
    filter: brightness(1.2);
    box-shadow:
        0 0 12px rgba(46, 204, 113, 0.8),
        0 0 6px rgba(46, 204, 113, 0.4);
}

/* The wire (or wires) forming a short circuit flash white hot. Listed after the
   .active rule so a shorted wire always reads as the alarm, never as running. */
.circuit-wire-group.shorted .circuit-wire,
.circuit-wire-group.shorted .circuit-wire-joint {
    animation: wireShort 0.32s ease-in-out infinite;
}

@keyframes wireShort {
    0%, 100% {
        filter: brightness(1.3);
        box-shadow: 0 0 10px rgba(255, 90, 30, 0.85);
    }
    50% {
        filter: brightness(2.6) saturate(0.4);
        box-shadow: 0 0 22px 6px rgba(255, 220, 120, 1);
    }
}

/* The cable being pulled: same construction as a real one, just translucent so
   it reads as "not committed yet". */
.circuit-wire-group.wire-preview {
    opacity: 0.65;
    pointer-events: none;
}

/* Hint bubble that follows the cable end, narrating the gesture in progress. */
.drag-hint {
    position: absolute;
    z-index: 40;
    margin: -38px 0 0 14px;
    padding: 6px 10px;
    max-width: 190px;
    border-radius: 8px;
    background: rgba(12, 18, 28, 0.92);
    border: 1px solid rgba(255, 215, 0, 0.45);
    backdrop-filter: blur(6px);
    color: #ffe9a8;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1.25;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.drag-hint.visible {
    opacity: 1;
}

/* First beat: scissors nibbling at the insulation. */
.drag-hint.stripping::before {
    content: '✂️ ';
    display: inline-block;
    animation: snip 0.4s ease-in-out infinite;
}

@keyframes snip {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: rotate(8deg); }
}

/* Dotted demo of the black wire's run, played on load to show the gesture.
   Built from the same route the real cable takes. */
.circuit-wire-group.wire-demo .circuit-wire {
    background: none;
    border: 0;
    box-shadow: none;
    height: 4px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.85) 0 9px,
        transparent 9px 18px);
    animation: demoDashes 1.8s linear infinite;
}

.circuit-wire-group.wire-demo .circuit-wire::before,
.circuit-wire-group.wire-demo .circuit-wire::after,
.circuit-wire-group.wire-demo .circuit-wire-joint {
    display: none;
}

@keyframes demoDashes {
    to { background-position-x: 18px; }
}

.wire-demo-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #ffe9a8 45%, rgba(255, 208, 66, 0.2) 75%, transparent 78%);
    box-shadow: 0 0 12px 3px rgba(255, 208, 66, 0.8);
    pointer-events: none;
}

.wire-demo-tip {
    position: absolute;
    z-index: 41;
    transform: translate(-50%, 14px);
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 8px;
    background: rgba(12, 18, 28, 0.92);
    border: 1px solid rgba(255, 215, 0, 0.45);
    backdrop-filter: blur(6px);
    color: #ffe9a8;
    font-size: 0.72rem;
    font-weight: bold;
    pointer-events: none;
    animation: demoTip 1.8s ease-in-out infinite;
}

@keyframes demoTip {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

/* Electrons travelling along the wires (negative to positive). */
.electron {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: radial-gradient(circle, #ffffff 0%, #00ffff 40%, #0099ff 100%);
    border: 1px solid #00ccff;
    border-radius: 50%;
    z-index: 43; /* above the wires, which are above the part images */
    box-shadow:
        0 0 6px rgba(0, 255, 255, 0.9),
        0 0 12px rgba(0, 153, 255, 0.6),
        inset 0 0 3px rgba(255, 255, 255, 0.9);
    animation: electronGlow 1s ease-in-out infinite alternate;
}

@keyframes electronGlow {
    0% {
        opacity: 0.8;
        box-shadow:
            0 0 4px rgba(0, 255, 255, 0.7),
            0 0 8px rgba(0, 153, 255, 0.4),
            inset 0 0 2px rgba(255, 255, 255, 0.8);
    }
    100% {
        opacity: 1;
        box-shadow:
            0 0 8px rgba(0, 255, 255, 1),
            0 0 16px rgba(0, 153, 255, 0.8),
            inset 0 0 4px rgba(255, 255, 255, 1);
    }
}

/* Educational Info */
.concept-explanation {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ecf0f1;
}

.concept-explanation strong {
    color: #f39c12;
}

.reset-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 8px 16px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    z-index: 50;
    transition: background 0.3s ease;
}

.reset-button:hover {
    background: #c0392b;
}

/* ==========================================================================
   Mobile / narrow layout — one breakpoint, mirroring the carprop lab.
   ========================================================================== */
@media (max-width: 1200px) {
    /* The stacked layout can't fit one viewport, so let the page scroll. */
    body {
        height: auto;
        overflow: auto;
    }

    /* Header stacks: brand on top, then the title block, both full width. The
       spacer that balances the title beside the logo has nothing to balance
       once stacked, so it is removed rather than left adding dead height. */
    .game-header {
        flex-direction: column;
        gap: 10px;
    }
    .game-header::after { display: none; }
    .brand-link { width: min(200px, 55%); }

    .game-container {
        flex-direction: column;
        flex: none;
        min-height: 0;
        gap: 12px;
    }

    /* The left column dissolves so its cards become items of the container
       itself — only then can `order` interleave them with the workspace. The
       result is a mobile reading flow that puts the lab first and the shop
       last: play, read the result, learn, then buy. */
    .info-panel.left-panel { display: contents; }

    .circuit-section              { order: 1; }  /* the lab */
    .feedback-box                 { order: 2; }  /* what just happened */
    .status-panel                 { order: 3; }  /* the readouts */
    .instructions-link            { order: 4; }  /* build instructions */
    .info-panel:not(.left-panel)  { order: 5; }  /* reference panels */
    .kit-panel                    { order: 6; }  /* shop link, last */

    /* Everything full width and stacked; nothing scrolls sideways. */
    .info-panel {
        width: 100%;
        flex-direction: column;
        overflow: visible;
    }

    .panel,
    .feedback-box,
    .instructions-link {
        width: 100%;
        min-width: 0;
    }

    .feedback-box { font-size: 0.8rem; }

    .circuit-section { min-width: 0; }

    /* A fixed, self-contained workspace. Sized to hold the shrunk parts below
       with a little air, no more — so it does not leave a slab of empty board. */
    .circuit-area {
        height: 320px;
        min-height: 320px;
        width: 100%;
    }

    /* Shrink the parts to suit the narrower workspace, keeping the same
       alignment relationships (battery + ↔ switch, battery − ↔ lamp). Fractional
       anchors keep the terminals and wires on the parts automatically, and the
       verticals stay in `calc(px + 3%)` so the trio still moves together. */
    .battery {
        width: 150px;
        left: -3%;
        top: calc(72px + 3%);
    }

    .switch {
        width: 88px;
        left: calc(55% - 44px);
        top: calc(138px + 3%);   /* switch-input stays level with battery + */
    }

    .lamp-with-bulb {
        width: 96px;
        left: 65%;
        top: calc(10px + 3%);    /* lamp terminals stay level with battery − */
    }

    .connection-point {
        width: 12px;
        height: 12px;
    }

    .reset-button {
        bottom: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}