/*=============================================
=  TapeOut · VDOTX EDA simulator
=  Brand-aligned: Deep Silicon surfaces, copper
=  chrome accents, cyan/magenta only inside the
=  routing fabric (where they mean Metal-1/Metal-2).
=============================================*/

.eda-theme {
    background-color: #0A0E1A;
    color: var(--vx-signal-white);
    font-family: var(--vx-font-body);
    cursor: default;

    /* Layer colors — these are the only places cyan/magenta live, because
       they map to physical metal layers, not brand chrome. */
    --m1-color: #00E5FF;
    --m2-color: #FF4DD2;
    --via-color: #FFB627;
    --error-red: #E5484D;
    --success-green: #2BB673;
    --grid-line: rgba(245, 247, 250, 0.06);
    --panel-bg:  #10162A;
    --panel-bg-2:#1A1F2E;
    --panel-line: rgba(245, 247, 250, 0.10);

    background-image:
        radial-gradient(900px 500px at 80% -10%, rgba(232,152,96,0.10), transparent 60%),
        radial-gradient(700px 400px at 0% 110%, rgba(0,229,255,0.06), transparent 60%);
    background-attachment: fixed;
}

.eda-theme::-webkit-scrollbar { width: 8px; height: 8px; }
.eda-theme::-webkit-scrollbar-thumb { background: var(--panel-bg-2); border-radius: 4px; }

.eda-cursor { display: none; }

/* ---------- Nav ---------- */
.eda-nav {
    background: rgba(10, 14, 26, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--panel-line) !important;
    height: 64px;
}

.text-mono { font-family: var(--vx-font-mono); }

/* ============================================================
   LANDING — replaces the old "sandbox-modal" tutorial wall
   ============================================================ */
#sandbox-modal {
    position: fixed; inset: 0;
    background:
        radial-gradient(800px 500px at 50% 30%, rgba(232,152,96,0.18), transparent 70%),
        linear-gradient(180deg, #050812 0%, #0A0E1A 100%);
    z-index: 9999;
    /* flex-start so tall content starts at top and is scrollable — center
       causes the card to clip off-screen when taller than the viewport */
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(16px, 3vh, 32px) clamp(16px, 2vw, 32px);
    overflow-y: auto;
}

.tapeout-landing {
    max-width: 860px; width: 100%;
    background: linear-gradient(180deg, rgba(16,22,42,0.92) 0%, rgba(10,14,26,0.96) 100%);
    border: 1px solid var(--panel-line);
    border-radius: var(--vx-radius-5);
    padding: clamp(24px, 3.5vh, 40px) clamp(24px, 3.5vw, 48px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,152,96,0.18);
    position: relative;
    overflow: hidden;
}
.tapeout-landing::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(transparent 95%, rgba(245,247,250,0.04)),
        linear-gradient(90deg, transparent 95%, rgba(245,247,250,0.04));
    background-size: 32px 32px;
    pointer-events: none; z-index: 0;
}
.tapeout-landing > * { position: relative; z-index: 1; }

.tapeout-landing .eyebrow {
    font-family: var(--vx-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vx-copper-bright);
    margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 10px;
}
.tapeout-landing .eyebrow::before {
    content: ''; width: 8px; height: 8px;
    background: var(--vx-copper-bright);
    box-shadow: 0 0 10px rgba(232,152,96,0.7);
    border-radius: 50%;
    animation: pulseDot 2.2s var(--vx-ease-standard) infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 0.55 } 50% { opacity: 1 } }

.tapeout-landing h1 {
    font-family: var(--vx-font-display);
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 12px;
    color: var(--vx-signal-white);
}
.tapeout-landing h1 .copper {
    background: linear-gradient(180deg, var(--vx-copper-peak) 0%, var(--vx-copper-bright) 45%, var(--vx-copper-500) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.tapeout-landing .lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--vx-graphite-100);
    margin: 0 0 16px;
    max-width: 640px;
}

.tapeout-landing .feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.tapeout-landing .feat {
    background: rgba(245,247,250,0.03);
    border: 1px solid var(--panel-line);
    border-radius: var(--vx-radius-3);
    padding: 12px 14px;
    transition: border-color 200ms var(--vx-ease-standard),
                background 200ms var(--vx-ease-standard),
                transform 200ms var(--vx-ease-standard);
}
.tapeout-landing .feat:hover {
    border-color: rgba(232,152,96,0.40);
    background: rgba(232,152,96,0.05);
    transform: translateY(-1px);
}
.tapeout-landing .feat .k {
    font-family: var(--vx-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vx-copper-bright);
    margin-bottom: 6px;
}
.tapeout-landing .feat .v {
    font-family: var(--vx-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--vx-signal-white);
    line-height: 1.2;
    margin: 0 0 3px;
}
.tapeout-landing .feat .d {
    font-size: 13px;
    color: var(--vx-graphite-200);
    line-height: 1.5;
}

.tapeout-landing .how {
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--panel-line);
    border-left: 3px solid var(--vx-copper-bright);
    padding: 12px 18px;
    margin-bottom: 16px;
    font-family: var(--vx-font-mono);
    font-size: 12px;
    color: var(--vx-graphite-100);
    line-height: 1.65;
}
.tapeout-landing .how strong { color: var(--vx-signal-white); }
.tapeout-landing .how .key {
    display: inline-block;
    background: var(--panel-bg-2);
    border: 1px solid var(--panel-line);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 8px;
    color: var(--vx-copper-bright);
    font-family: var(--vx-font-mono);
    font-size: 12px;
}

.tapeout-landing .actions {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.tapeout-landing .play {
    appearance: none;
    border: 1px solid var(--vx-copper-bright);
    background: linear-gradient(180deg, var(--vx-copper-500) 0%, var(--vx-copper-700) 100%);
    color: #FFE9CC;
    font-family: var(--vx-font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: var(--vx-radius-3);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,232,200,0.20),
                0 0 0 1px rgba(232,152,96,0.18),
                0 10px 24px rgba(122,57,20,0.40);
    transition: transform 200ms var(--vx-ease-standard),
                box-shadow 200ms var(--vx-ease-standard),
                background 200ms var(--vx-ease-standard);
}
.tapeout-landing .play:hover {
    background: linear-gradient(180deg, var(--vx-copper-bright) 0%, var(--vx-copper-500) 100%);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,232,200,0.28),
                0 0 0 1px rgba(232,152,96,0.40),
                0 14px 32px rgba(122,57,20,0.55);
}
.tapeout-landing .play:active { transform: translateY(1px); }

.tapeout-landing .ghost {
    appearance: none;
    background: transparent;
    border: 1px solid var(--panel-line);
    color: var(--vx-graphite-100);
    font-family: var(--vx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 14px 24px;
    border-radius: var(--vx-radius-3);
    cursor: pointer;
    transition: border-color 200ms, color 200ms;
}
.tapeout-landing .ghost:hover {
    border-color: var(--vx-copper-bright);
    color: var(--vx-copper-bright);
}

.tapeout-landing .meta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--vx-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vx-graphite-300);
}
.tapeout-landing .meta .sig { color: var(--vx-copper-bright); }

@media (max-width: 720px) {
    .tapeout-landing { padding: 20px 18px; }
    .tapeout-landing .feat-grid { grid-template-columns: 1fr; }
    .tapeout-landing h1 { font-size: clamp(26px, 7vw, 38px); }
}

/* ============================================================
   GAME LAYOUT
   ============================================================ */
.game-main {
    padding-top: 64px;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Sidebar — controls */
.sidebar {
    width: 300px;
    background: var(--panel-bg);
    border-right: 1px solid var(--panel-line);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    /* Ensure buttons don't get pushed below viewport */
    min-height: 0;
}

.panel-title {
    font-family: var(--vx-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vx-copper-bright);
    margin: 2px 0 8px;
    display: flex; align-items: center; gap: 8px;
}
.panel-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--panel-line), transparent);
}

/* Layer toggles */
.layer-control { display: flex; flex-direction: column; gap: 6px; }

.btn-layer, .btn-tool {
    display: flex; align-items: center;
    width: 100%;
    background: var(--panel-bg-2);
    border: 1px solid var(--panel-line);
    color: var(--vx-signal-white);
    padding: 9px 12px;
    font-family: var(--vx-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: var(--vx-radius-2);
    transition: background 200ms var(--vx-ease-standard),
                border-color 200ms var(--vx-ease-standard),
                color 200ms var(--vx-ease-standard),
                transform 80ms var(--vx-ease-standard),
                box-shadow 200ms var(--vx-ease-standard);
}
.btn-layer:hover, .btn-tool:hover {
    background: #232A3D;
    border-color: rgba(232,152,96,0.30);
}
.btn-layer:active, .btn-tool:active { transform: translateY(1px); }

.btn-layer.active {
    border-color: var(--m1-color);
    background: linear-gradient(180deg, rgba(0,229,255,0.10), rgba(0,229,255,0.02));
    box-shadow: inset 0 0 0 1px rgba(0,229,255,0.20), 0 0 18px rgba(0,229,255,0.12);
}
#btn-layer-m2.active {
    border-color: var(--m2-color);
    background: linear-gradient(180deg, rgba(255,77,210,0.10), rgba(255,77,210,0.02));
    box-shadow: inset 0 0 0 1px rgba(255,77,210,0.20), 0 0 18px rgba(255,77,210,0.12);
}

/* Primary "verify" tool button — copper, brand-aligned */
.btn-tool-primary {
    background: linear-gradient(180deg, var(--vx-copper-500) 0%, var(--vx-copper-700) 100%);
    border-color: var(--vx-copper-bright);
    color: #FFE9CC;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,232,200,0.20),
                0 0 0 1px rgba(232,152,96,0.18),
                0 6px 18px rgba(122,57,20,0.30);
}
.btn-tool-primary:hover {
    background: linear-gradient(180deg, var(--vx-copper-bright) 0%, var(--vx-copper-500) 100%);
    border-color: var(--vx-copper-peak);
    box-shadow: inset 0 1px 0 rgba(255,232,200,0.28),
                0 10px 24px rgba(122,57,20,0.45);
}

.color-box {
    width: 14px; height: 14px;
    margin-right: 12px;
    display: inline-block;
    border-radius: 2px;
}
.bg-m1 { background: var(--m1-color); box-shadow: 0 0 8px rgba(0,229,255,0.7); }
.bg-m2 {
    background: repeating-linear-gradient(45deg, var(--m2-color), var(--m2-color) 2px, transparent 2px, transparent 5px);
    border: 1px solid var(--m2-color);
    box-shadow: 0 0 8px rgba(255,77,210,0.5);
}

.tool-hint {
    font-size: 11px;
    color: var(--vx-graphite-300);
    font-family: var(--vx-font-mono);
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.constraint-list {
    list-style: none;
    padding: 0; margin: 0;
    font-size: 13px;
    color: var(--vx-graphite-100);
    font-family: var(--vx-font-body);
}
.constraint-list li {
    margin-bottom: 6px;
    position: relative;
    padding-left: 18px;
    line-height: 1.45;
    font-size: 12px;
}
.constraint-list li::before {
    content: "→";
    position: absolute; left: 0; top: 0;
    color: var(--vx-copper-bright);
    font-family: var(--vx-font-mono);
}

/* Push controls to bottom but allow shrinking — avoids overflow on short screens */
.controls {
    margin-top: auto;
    padding-top: 12px;
    flex-shrink: 0; /* never crush buttons */
}

/* ============================================================
   GAME BOARD area
   ============================================================ */
.game-container {
    flex: 1;
    display: flex; flex-direction: column;
    padding: 24px 40px;
    background:
        radial-gradient(800px 500px at 100% 0%, rgba(232,152,96,0.06), transparent 60%),
        var(--vx-silicon-900);
    min-width: 0;
}

.eda-hud {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px;
    padding: 14px 20px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-line);
    border-radius: var(--vx-radius-3);
    gap: 16px;
    flex-wrap: wrap;
}
.hud-left, .hud-right {
    display: flex; align-items: center; gap: 14px;
    min-width: 0;
}
.hud-right { flex-direction: column; align-items: flex-end; }

.grid-spec {
    font-family: var(--vx-font-mono);
    font-size: 12px;
    color: var(--vx-graphite-300);
}

.telemetry-badge {
    font-family: var(--vx-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m1-color);
    border: 1px solid currentColor;
    padding: 6px 12px;
    border-radius: var(--vx-radius-2);
    background: rgba(0,229,255,0.06);
    transition: color 240ms, background 240ms;
}

.game-instruction {
    margin: 0;
    color: var(--vx-graphite-100);
    font-size: 13px;
    font-family: var(--vx-font-body);
    text-align: right;
}

/* Level-progress strip */
.level-progress {
    display: flex; gap: 4px;
    align-items: center;
}
.level-progress .seg {
    width: 22px; height: 4px;
    background: var(--panel-bg-2);
    border-radius: 2px;
    transition: background 200ms var(--vx-ease-standard);
}
.level-progress .seg.done {
    background: linear-gradient(90deg, var(--vx-copper-700), var(--vx-copper-bright));
    box-shadow: 0 0 8px rgba(232,152,96,0.4);
}
.level-progress .seg.current {
    background: var(--vx-copper-peak);
    box-shadow: 0 0 12px rgba(255,203,142,0.6);
    animation: segPulse 1.6s var(--vx-ease-standard) infinite;
}
@keyframes segPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.6 } }

/* Board */
.board-wrapper {
    flex: 1;
    display: flex; justify-content: center; align-items: center;
    background:
        linear-gradient(transparent 95%, rgba(245,247,250,0.03)),
        linear-gradient(90deg, transparent 95%, rgba(245,247,250,0.03)),
        var(--panel-bg);
    background-size: 32px 32px, 32px 32px, auto;
    border: 1px solid var(--panel-line);
    border-radius: var(--vx-radius-3);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
.board-wrapper::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(closest-side, transparent 60%, rgba(0,0,0,0.45) 100%);
}

#game-board {
    background: #0B0F1A;
    cursor: crosshair;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--panel-line), 0 20px 50px rgba(0,0,0,0.55);
    z-index: 1;
    touch-action: none;
}

/* Pass / fail flash on board (applied via JS) */
.board-wrapper.flash-pass { animation: flashPass 1.2s var(--vx-ease-standard); }
.board-wrapper.flash-fail { animation: flashFail 0.5s var(--vx-ease-standard); }
@keyframes flashPass {
    0%   { box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 0 0 0 rgba(43,182,115,0.0); }
    30%  { box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 0 0 4px rgba(43,182,115,0.55), 0 0 60px rgba(43,182,115,0.45); }
    100% { box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 0 0 0 rgba(43,182,115,0.0); }
}
@keyframes flashFail {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Toast — replaces window.confirm()/alert() */
.eda-toast {
    position: fixed; left: 50%; bottom: 32px;
    transform: translateX(-50%) translateY(20px);
    background: var(--panel-bg);
    border: 1px solid var(--vx-copper-bright);
    border-left-width: 3px;
    color: var(--vx-signal-white);
    font-family: var(--vx-font-mono);
    font-size: 13px;
    padding: 14px 22px;
    border-radius: var(--vx-radius-3);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 240ms var(--vx-ease-standard),
                transform 240ms var(--vx-ease-standard);
    z-index: 10000;
    display: flex; align-items: center; gap: 12px;
}
.eda-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.eda-toast .yes, .eda-toast .no {
    appearance: none; background: transparent;
    border: 1px solid var(--panel-line);
    color: var(--vx-signal-white);
    font-family: var(--vx-font-mono); font-size: 12px;
    padding: 6px 14px; border-radius: 4px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.14em;
}
.eda-toast .yes { border-color: var(--vx-copper-bright); color: var(--vx-copper-bright); }
.eda-toast .yes:hover { background: rgba(232,152,96,0.10); }

/* Success burst — fired when DRC passes */
.eda-burst {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    background: radial-gradient(closest-side at 50% 50%,
        rgba(232,152,96,0.35) 0%, rgba(232,152,96,0.0) 60%);
}
.eda-burst.show {
    animation: burst 1.2s var(--vx-ease-emphasis) forwards;
}
@keyframes burst {
    0% { opacity: 0; transform: scale(0.6); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.4); }
}


/* ============================================================
   KID-FRIENDLY EXPLAINER — Landing accordion
   ============================================================ */
.kids-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255,183,95,0.12) 0%, rgba(255,120,55,0.08) 100%);
    border: 1px dashed rgba(255,183,95,0.50);
    border-radius: var(--vx-radius-3);
    padding: 10px 16px;
    color: #FFD580;
    font-family: var(--vx-font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 200ms, border-color 200ms, transform 120ms;
    margin-bottom: 10px;
}
.kids-toggle:hover {
    background: linear-gradient(135deg, rgba(255,183,95,0.20) 0%, rgba(255,120,55,0.14) 100%);
    border-color: rgba(255,183,95,0.80);
    transform: translateY(-1px);
}
.kids-toggle em { color: rgba(255,213,128,0.70); font-style: italic; font-size: 13px; }
.kids-toggle-icon { font-size: 18px; flex-shrink: 0; }
.kids-toggle-chevron { margin-left: auto; font-size: 11px; color: rgba(255,213,128,0.70); flex-shrink: 0; }

.kids-explainer {
    margin-bottom: 14px;
    border-radius: var(--vx-radius-3);
    overflow: hidden;
    border: 1px solid rgba(255,183,95,0.25);
    background: rgba(12, 10, 6, 0.60);
}
.kids-explainer-inner { padding: 14px 18px; }

.kids-intro {
    font-size: 13px;
    color: #E8D5A8;
    margin: 0 0 12px;
    line-height: 1.55;
}
.kids-intro strong { color: #FFD580; }

.kids-grid {
    display: grid;
    /* 4 cols on wide screens → 2 rows instead of 4, keeps the expanded
       accordion short enough to fit without scrolling */
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 860px) {
    .kids-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .kids-grid { grid-template-columns: 1fr; }
}

.kids-card {
    background: rgba(255,183,95,0.06);
    border: 1px solid rgba(255,183,95,0.18);
    border-radius: var(--vx-radius-2);
    padding: 10px 12px;
    transition: border-color 200ms, background 200ms, transform 200ms;
}
.kids-card:hover {
    border-color: rgba(255,183,95,0.45);
    background: rgba(255,183,95,0.12);
    transform: translateY(-1px);
}
.kids-emoji {
    font-size: 18px;
    margin-bottom: 4px;
    line-height: 1;
}
.kids-term {
    font-family: var(--vx-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFB627;
    margin-bottom: 5px;
}
.kids-plain {
    font-size: 13px;
    color: #C8B898;
    line-height: 1.55;
}
.kids-plain strong { color: #FFD580; }

/* ============================================================
   KID-FRIENDLY EXPLAINER — floating in the game zone dead-space
   Anchors to .game-container (position:relative inline style).
   Sits in the bottom-left corner of the game zone.
   ============================================================ */
.level-lesson {
    position: absolute;
    bottom: 24px;   /* aligns with game-container bottom padding */
    left: 40px;     /* aligns with game-container left padding */
    z-index: 20;
    max-width: 260px;

    background: linear-gradient(135deg, rgba(12,8,2,0.88) 0%, rgba(8,6,2,0.92) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,183,95,0.42);
    border-left: 3px solid #FFB627;
    border-radius: var(--vx-radius-3);
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,183,95,0.10),
                inset 0 1px 0 rgba(255,183,95,0.12);
}
.level-lesson[hidden] { display: none; }

@keyframes lessonPop {
    0%   { opacity: 0; transform: translateY(-6px) scale(0.97); }
    60%  { opacity: 1; transform: translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.level-lesson.lesson-pop {
    animation: lessonPop 0.38s var(--vx-ease-emphasis) both;
}

.level-lesson-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.level-lesson-emoji {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.level-lesson-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFD580;
    flex: 1;
    line-height: 1.2;
}
.level-lesson-close {
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(255,213,128,0.45);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 150ms;
    line-height: 1;
}
.level-lesson-close:hover { color: #FFD580; }

.level-lesson-text {
    margin: 0;
    font-size: 12.5px;
    color: #C4AE88;
    line-height: 1.65;
    font-family: var(--vx-font-body);
}

/* ============================================================
   SILICON SCANNER — floating in the bottom-right dead space
   ============================================================ */
.silicon-scanner {
    position: absolute;
    bottom: 24px;
    right: 40px;
    z-index: 20;
    max-width: 260px;
    background: linear-gradient(135deg, rgba(11,15,26,0.92) 0%, rgba(7,9,17,0.96) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-right: 3px solid var(--vx-cyan, #00f0ff);
    border-radius: var(--vx-radius-3);
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px rgba(0,240,255,0.08),
                inset 0 1px 0 rgba(0,240,255,0.1);
    overflow: hidden;
}
.silicon-scanner[hidden] { display: none; }

/* Horizontal sweeping laser line animation */
.scanner-sweep-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.8), var(--vx-magenta, #ff007f), rgba(0,240,255,0.8), transparent);
    box-shadow: 0 0 8px rgba(0,240,255,0.6), 0 0 12px rgba(255,0,127,0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 21;
}

.silicon-scanner.scanning .scanner-sweep-line {
    animation: scannerLaser 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes scannerLaser {
    0% {
        top: 0%;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

.silicon-scanner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0,240,255,0.15);
    padding-bottom: 6px;
}
.silicon-scanner-emoji {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.silicon-scanner-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 240, 255, 0.85);
    flex: 1;
    line-height: 1.2;
}
.silicon-scanner-close {
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(0, 240, 255, 0.45);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 150ms;
    line-height: 1;
}
.silicon-scanner-close:hover { color: rgba(0, 240, 255, 0.95); }

.silicon-scanner-body {
    margin-bottom: 8px;
}
.scanner-fact-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 4px 0;
    line-height: 1.3;
    font-family: var(--vx-font-mono);
}
.silicon-scanner-text {
    font-size: 12px;
    color: #b0c0d0;
    line-height: 1.55;
    margin: 0;
    font-family: var(--vx-font-body);
}

.silicon-scanner-actions {
    display: flex;
    justify-content: flex-end;
}
.btn-scanner-action {
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: rgba(0, 240, 255, 0.9);
    padding: 5px 9px;
    font-size: 10px;
    font-family: var(--vx-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-scanner-action:hover {
    background: rgba(0, 240, 255, 0.16);
    border-color: rgba(0, 240, 255, 0.5);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}
.btn-scanner-action:active {
    transform: scale(0.96);
}

/* Sidebar visitor counter badge */
.visitor-counter--sidebar {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed rgba(232, 152, 96, 0.22);
    border-radius: var(--vx-radius-2);
    background: rgba(232, 152, 96, 0.04);
    font-family: var(--vx-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vx-copper-bright);
    flex-shrink: 0;
}
.visitor-counter--sidebar .visitor-count-label {
    color: var(--vx-graphite-300);
}
.visitor-counter--sidebar .visitor-count-value {
    color: var(--vx-copper-peak);
    font-weight: 700;
}

/* CAD Viewport Corner Telemetry */
.board-telemetry {
    position: absolute;
    font-family: var(--vx-font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: rgba(160, 174, 192, 0.24); /* extremely subtle to not distract from the board */
    pointer-events: none;
    z-index: 2; /* sits above the grid background but below any interactive popups */
    user-select: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 200ms ease;
}
.board-wrapper:hover .board-telemetry {
    color: rgba(160, 174, 192, 0.45); /* slightly lights up when hovering the board area */
}
.board-telemetry--tl {
    top: 14px;
    left: 16px;
}
.board-telemetry--tr {
    top: 14px;
    right: 16px;
}
.board-telemetry--bl {
    bottom: 14px;
    left: 16px;
}
.board-telemetry--br {
    bottom: 14px;
    right: 16px;
}
.telemetry-status-dot {
    width: 5px;
    height: 5px;
    background-color: var(--vx-cyan, #00f0ff);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px var(--vx-cyan, #00f0ff);
    animation: telemetryPulse 2s infinite ease-in-out;
}
@keyframes telemetryPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Mobile fallback — placed at the end to guarantee specificity */
@media (max-width: 900px) {
    /* Full-page flex column — board below controls */
    .game-main {
        flex-direction: column;
        height: auto;
        padding-top: 64px;
        overflow: visible;
    }

    /* Sidebar becomes a compact horizontal toolbar */
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--panel-line);
        padding: 8px 12px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        overflow-y: visible;
        flex-shrink: 0;
    }

    /* Hide verbose sidebar sections — only controls matter on mobile */
    .sidebar .panel-title,
    .sidebar .layer-control,
    .sidebar .constraint-list,
    .sidebar .tool-hint {
        display: none;
    }

    /* Controls row sits inline */
    .controls {
        margin-top: 0;
        padding-top: 0;
        display: flex;
        flex-direction: row;
        gap: 6px;
        flex: 1;
    }
    .controls .btn-tool {
        flex: 1;
        padding: 10px 8px;
        font-size: 11px;
        justify-content: center;
    }
    /* Layer buttons inline in the toolbar */
    .btn-layer {
        padding: 8px 12px;
        font-size: 11px;
        width: auto;
        flex-shrink: 0;
    }
    /* Make the sidebar show layer buttons again */
    .sidebar .layer-control {
        display: flex;
        flex-direction: row;
        gap: 6px;
        flex-shrink: 0;
    }

    /* Game container fills remaining height */
    .game-container {
        padding: 8px;
        flex: none;
        height: auto;
        overflow: visible;
    }

    /* Compact HUD */
    .eda-hud {
        padding: 8px 12px;
        margin-bottom: 8px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .hud-right {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .game-instruction {
        text-align: left;
        font-size: 11px;
    }
    .grid-spec { display: none; }

    /* Board wrapper fills available space */
    .board-wrapper {
        flex: none;
        width: 100%;
        height: auto;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 24px;
    }

    /* Lesson panel — static above board on mobile */
    .level-lesson {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
        left: auto !important;
        bottom: auto !important;
    }

    /* Hide scanner and corner telemetries to save space */
    .silicon-scanner,
    .board-telemetry {
        display: none !important;
    }

    /* Reset the huge margin on the visitor counter in the sidebar turned toolbar */
    .visitor-counter--sidebar {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 8px 10px;
        font-size: 10px;
        align-self: center;
        flex-shrink: 0;
    }
}