/* =========================================================
   circuit.css — 畫布、元件外觀、接線與訊號流動動畫
   新增元件的視覺樣式加在「元件外觀」那一段
   ========================================================= */

/* ================= 畫布 ================= */
#stage{position:relative;overflow:hidden;background:var(--bg)}
#canvas{
  position:absolute;inset:0;overflow:hidden;cursor:grab;
  background-color:#0b0f17;
  background-image:radial-gradient(circle,#1c2438 1px,transparent 1px);
  background-size:22px 22px;
}
#canvas.panning{cursor:grabbing}
#canvas.mode-select{cursor:var(--cursor-cross)}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#wire-layer{position:absolute;left:-10000px;top:-10000px;pointer-events:none;overflow:visible}

#empty-hint{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  color:var(--txt-faint);pointer-events:none;font-size:13px;
}
#empty-hint .eh-icon{font-size:42px;opacity:.35}
#empty-hint.hide{display:none}

#drag-ghost{
  position:fixed;pointer-events:none;z-index:999;opacity:.9;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));
}
#sel-rect{
  position:absolute;display:none;pointer-events:none;z-index:12;
  border:1.5px dashed var(--accent);
  background:rgba(78,161,255,.13);border-radius:3px;
}

/* ================= 元件外觀 ================= */
.comp{position:absolute;pointer-events:none}
.comp .gsvg{overflow:visible;pointer-events:none;display:block}

/* 邏輯閘 */
.comp .body{
  fill:#1e2942;stroke:#5f7099;stroke-width:2;stroke-linejoin:round;
  pointer-events:auto;cursor:move;transition:stroke .15s,fill .15s;
}
.comp .body-line{fill:none;stroke:#5f7099;stroke-width:2;pointer-events:none}
.comp .bubble{fill:#1e2942;stroke:#5f7099;stroke-width:2;pointer-events:auto;cursor:move}
.comp .body-hit{fill:transparent;pointer-events:all;cursor:move}
.comp .glabel{
  fill:#93a3c4;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
}

/* 方塊型元件（MUX / 解碼器 / 正反器…） */
.comp .body.box{fill:#1b2540}
.comp .box-sep{stroke:#3d4d70;stroke-width:1;pointer-events:none}
.comp .box-title{
  fill:#9fb0d4;font-size:9.5px;font-weight:700;letter-spacing:.4px;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
}
.comp .pin-label{
  fill:#8496b8;font-size:8.5px;font-weight:600;
  dominant-baseline:central;pointer-events:none;
}
.comp .pin-label.bottom{dominant-baseline:auto}
.comp .pin-bar{stroke:#8496b8;stroke-width:1;pointer-events:none}
.comp .clk-mark{fill:none;stroke:#8496b8;stroke-width:1.4;pointer-events:none}

/* 接腳 */
.comp .stub{stroke:var(--cold);stroke-width:2;stroke-linecap:round;pointer-events:none;transition:stroke .12s}
.comp .dot{fill:#3b4a6b;stroke:#0b0f17;stroke-width:1;pointer-events:none;transition:fill .12s,r .12s}
.comp .hit{fill:transparent;pointer-events:all;cursor:var(--cursor-cross)}
.comp .dot.linked{fill:#6b7ea6}
.comp .dot.hover{fill:var(--accent);r:5}
.comp .dot.hot{fill:var(--hot)}
.comp .stub.hot{stroke:var(--hot);filter:drop-shadow(0 0 3px rgba(255,194,71,.8))}

/* 牽線時的吸附提示 */
.comp .dot.compat{fill:#4d6b9c;r:4.6}
.comp .dot.snap{
  fill:var(--accent);stroke:#d3e6ff;stroke-width:1.6;r:6.5;
  filter:drop-shadow(0 0 9px rgba(78,161,255,1));
}
.comp .dot.pending{
  fill:var(--accent);stroke:#9ecbff;r:5.5;
  filter:drop-shadow(0 0 7px rgba(78,161,255,.95));
}

/* 選取 */
.comp:hover .body{stroke:#8598c2}
.comp.selected .body,.comp.selected .bubble{stroke:var(--accent);fill:#23345a}
.comp.selected .body{filter:drop-shadow(0 0 5px rgba(78,161,255,.45))}
.comp.selected .body.box{fill:#22304f}

/* 開關 */
.comp .sw-body{fill:#1e2942;stroke:#5f7099;stroke-width:2;pointer-events:auto;cursor:pointer;transition:.15s}
.comp.SWITCH:hover .sw-body,.comp.CLOCK:hover .sw-body{stroke:#8598c2;fill:#243255}
.comp.SWITCH.selected .sw-body,.comp.CLOCK.selected .sw-body{stroke:var(--accent);fill:#23345a}
.comp .sw-label{
  fill:#cdd9f2;font-size:17px;font-weight:800;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;letter-spacing:.5px;
}
.comp .sw-track{fill:#131a2a;stroke:#33405e;stroke-width:1.5;pointer-events:none;transition:.18s}
.comp .sw-knob{fill:#4a5876;pointer-events:none;transition:.18s cubic-bezier(.4,1.5,.5,1)}
.comp.SWITCH.on .sw-body{stroke:var(--hot)}
.comp.SWITCH.on .sw-track{fill:#3a2b12;stroke:#7a5c1e}
.comp.SWITCH.on .sw-knob{fill:var(--hot);filter:drop-shadow(0 0 5px rgba(255,194,71,.95))}
.comp.SWITCH.on .sw-label{fill:var(--hot-soft)}

/* 時脈 */
.comp .clk-wave{fill:none;stroke:#8496b8;stroke-width:1.8;stroke-linejoin:round;pointer-events:none;transition:.15s}
.comp .clk-label{
  fill:#7f8fb0;font-size:9px;font-weight:700;letter-spacing:.6px;
  text-anchor:end;dominant-baseline:central;pointer-events:none;
}
.comp.CLOCK.on .sw-body{stroke:var(--hot)}
.comp.CLOCK.on .clk-wave{stroke:var(--hot);filter:drop-shadow(0 0 5px rgba(255,194,71,.9))}
.comp.CLOCK.on .clk-label{fill:var(--hot-soft)}

/* LED */
.comp .led-ring{fill:none;stroke:#5f7099;stroke-width:2;pointer-events:none}
.comp .led-core{fill:#232f4c;stroke:#46587f;stroke-width:1.5;pointer-events:auto;cursor:move;transition:.2s}
.comp .led-halo{fill:var(--hot);opacity:0;pointer-events:none;transition:opacity .25s}
.comp.LED.on .led-core{
  fill:var(--hot);stroke:#ffe9bb;
  filter:drop-shadow(0 0 8px rgba(255,194,71,1)) drop-shadow(0 0 20px rgba(255,160,30,.65));
}
.comp.LED.on .led-halo{opacity:.17}
.comp.LED.on .led-ring{stroke:#c99a3c}
.comp.LED.selected .led-core{stroke:var(--accent)}

/* 自訂名稱直接畫在本體上時：比內建型別文字亮一些、字距收緊 */
.comp .glabel.named,.comp .box-title.named{
  fill:#c9d7f2;font-weight:600;letter-spacing:0;
}
.comp .sw-label.named{font-weight:700;letter-spacing:0}
.comp .clk-label.named{fill:#a9b8d8;font-weight:600;letter-spacing:0}
.comp.selected .glabel.named,.comp.selected .box-title.named{fill:#dbe9ff}

/* LED 這類本體內放不了字的元件，名稱畫在上方 */
.comp .comp-name{
  fill:#c3d2ee;font-size:10px;font-weight:600;letter-spacing:.3px;
  text-anchor:middle;dominant-baseline:auto;pointer-events:none;
  paint-order:stroke;stroke:#0b0f17;stroke-width:3;stroke-linejoin:round;
}
.comp.on .comp-name{fill:#ffe0a3}
.comp.selected .comp-name{fill:#bcd9ff}

/* 右下角縮放把手（只在單選時出現） */
.resize-handle{
  position:absolute;display:none;width:10px;height:10px;
  background:var(--accent);border:1.5px solid #0b0f17;border-radius:3px;
  cursor:nwse-resize;pointer-events:auto;z-index:3;
  box-shadow:0 0 6px rgba(78,161,255,.7);
}
.comp.solo .resize-handle{display:block}
.resize-handle:hover{background:#8fc4ff;transform:scale(1.15)}

/* 命名輸入框 */
#name-input{
  position:fixed;z-index:250;width:168px;
  background:#1b2439;color:var(--txt);
  border:1px solid var(--accent);border-radius:7px;
  padding:6px 9px;font-size:13px;font-family:inherit;
  box-shadow:0 8px 22px rgba(0,0,0,.6);outline:none;
  user-select:text;-webkit-user-select:text;
}
#name-input::placeholder{color:var(--txt-faint)}

/* 被指定監看的元件（時序圖只看這些） */
.comp .watch-mark{
  fill:var(--accent);stroke:#0b0f17;stroke-width:1.5;pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(78,161,255,.9));
}

/* 元件浮動工具列（＋ / －） */
.comp-tools{
  position:absolute;left:50%;top:-12px;transform:translate(-50%,-100%);
  display:none;align-items:center;gap:3px;
  background:#1b2439;border:1px solid #35456b;border-radius:8px;
  padding:3px;box-shadow:0 6px 16px rgba(0,0,0,.55);
  pointer-events:auto;white-space:nowrap;
}
.comp.solo .comp-tools{display:flex}
.comp-tools button{
  min-width:24px;height:22px;border:0;background:#26314a;border-radius:5px;
  cursor:pointer;font-size:12px;line-height:1;padding:0 5px;transition:.13s;
}
.comp-tools button:hover{background:#35456b}
.comp-tools button:disabled{opacity:.28;cursor:not-allowed}
.comp-tools .cnt{
  font-size:11.5px;color:var(--txt-dim);min-width:36px;text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ================= 接線 ================= */
.wire-hit{stroke:transparent;stroke-width:14;fill:none;pointer-events:stroke;cursor:pointer}
.wire{stroke:var(--cold);stroke-width:2.4;fill:none;pointer-events:none;stroke-linecap:round;transition:stroke .12s}
.wire-g.on .wire{stroke:#b8842a}
.wire-g:hover .wire{stroke:#8fb4ff;stroke-width:3}
.wire-g.selected .wire{stroke:var(--accent);stroke-width:3.2;stroke-dasharray:7 4}

/* 訊號流動：高電位的線上疊一層會移動的亮虛線 */
.wire-flow{
  fill:none;stroke:none;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:7 15;
}
.wire-g.on .wire-flow{
  stroke:var(--hot);
  filter:drop-shadow(0 0 5px rgba(255,194,71,.9));
  animation:signal-flow var(--flow-dur) linear infinite;
  animation-play-state:paused;          /* 未播放時停在原地 */
}
body.playing .wire-g.on .wire-flow{animation-play-state:running}
@keyframes signal-flow{ to{ stroke-dashoffset:-22 } }

/* 未播放時仍看得出高低電位：讓虛線鋪滿成實線 */
.wire-g.on .wire-flow{stroke-dasharray:7 15}
body:not(.playing) .wire-g.on .wire{
  stroke:var(--hot);filter:drop-shadow(0 0 4px rgba(255,194,71,.85));
}
body:not(.playing) .wire-g.on .wire-flow{stroke:none}

/* 分接點：兩條線相接處的實心圓點，可直接抓住沿母線滑動 */
.junction{fill:none;stroke:none;pointer-events:none}
.junction-hit{fill:transparent;pointer-events:none}
.wire-g.tapped .junction-hit{pointer-events:all;cursor:grab}
.wire-g.tapped .junction{cursor:grab}
.wire-g.tapped:hover .junction{r:5.5;stroke:#9ecbff;stroke-width:1.5}
.wire-g.tapped .junction{fill:var(--cold);stroke:#0b0f17;stroke-width:1}
.wire-g.tapped.on .junction{fill:var(--hot);stroke:#2a1c02;
  filter:drop-shadow(0 0 5px rgba(255,194,71,.9))}

/* 可被分接的目標線段 */
.wire-g.tap-target .wire{stroke:var(--accent);stroke-width:3.2}
#tap-dot{fill:var(--accent);stroke:#d3e6ff;stroke-width:1.6;pointer-events:none;
  filter:drop-shadow(0 0 9px rgba(78,161,255,1))}

/* 走線控制點（選取該線時才出現） */
.wire-g .wp{display:none}
.wire-g.selected .wp{
  display:inline;fill:var(--accent);stroke:#0b0f17;stroke-width:1.5;
  pointer-events:all;cursor:move;
}
.wire-g.selected .wp:hover{fill:#9ecbff;r:6}

#wire-preview{
  stroke:var(--accent);stroke-width:2.4;fill:none;stroke-dasharray:6 5;
  pointer-events:none;filter:drop-shadow(0 0 4px rgba(78,161,255,.6));
}
#wire-preview.snapped{
  stroke-dasharray:none;stroke-width:2.9;
  filter:drop-shadow(0 0 7px rgba(78,161,255,.9));
}

/* ---------- 七段顯示器 ---------- */
.comp .seg-bg{fill:#070a11;stroke:#1c2438;stroke-width:1}
.comp .seg{fill:#1a2130;transition:fill .12s}
.comp .seg.hot{fill:#ff4d3d;filter:drop-shadow(0 0 3px rgba(255,77,61,.85))}