:root{
  --c-bg:#f7f8fb;
  --c-surface:#ffffff;
  --c-text:#1d1e20;
  --c-muted:#778;
  --c-primary:#2563eb;
  --c-accent:#10b981;
  --c-slot:#c7d2fe;
  --c-slot-hover:#93c5fd;
  --c-slot-deny:#fda4af;
  --c-wire:#94a3b8;
  --c-bulb:#fbbf24;
  --c-bulb-off:#d1d5db;
  --shadow:0 2px 6px rgba(0,0,0,.08);

  /* Type-based component backgrounds (visual labels only, no gameplay hint) */
  --bg-battery:#dbeafe; /* light blue - high saturation */
  --bg-wire:#fde68a;    /* light amber - high saturation */
  --bg-socket:#fce7f3;  /* light pink - high saturation */
  --bg-bulb:#dcfce7;    /* light green - high saturation */
  
  /* Type-based slot backgrounds (same hue, lower saturation) */
  --bg-slot-battery:#eff6ff; /* very light blue - low saturation */
  --bg-slot-wire:#fffbeb;    /* very light amber - low saturation */
  --bg-slot-socket:#fdf4f8;  /* very light pink - low saturation */
  --bg-slot-bulb:#f0fdf4;    /* very light green - low saturation */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans TC", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--c-text);
  background:var(--c-bg);
  overflow-x:hidden;
  touch-action:pan-y pinch-zoom;
}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px; background:var(--c-surface); box-shadow:var(--shadow);
  position:sticky; top:0; z-index:10;
}
.title{font-size:18px; margin:0 8px 0 0}
.subtitle{color:var(--c-muted); font-size:12px}
.btn{appearance:none; border:1px solid #d1d5db; background:#fff; color:#111; padding:8px 12px; border-radius:8px; cursor:pointer}
.btn:hover{border-color:#c3c7cf}
.btn-primary{background:var(--c-primary); color:#fff; border-color:transparent}
.seed{margin-left:12px; color:var(--c-muted)}

.stage{max-width:1200px; margin:0 auto; padding:12px; touch-action:pan-y pinch-zoom;}
.hint{color:#334155; font-size:14px; margin:8px 0 12px}
.board-wrap{background:var(--c-surface); border-radius:12px; box-shadow:var(--shadow); padding:8px; touch-action:none; overflow:hidden;}

/* SVG elements */
#board{width:100%; height:auto; display:block; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none}
.slot-rect{fill:var(--c-slot); stroke:#6b7280; stroke-width:2; rx:10; ry:10}
.slot-rect.deny{fill:var(--c-slot-deny)}
.slot-rect.hover{fill:var(--c-slot-hover)}

/* Per-type slot backgrounds (same hue as components, lower saturation) */
.slot[data-type="battery"] .slot-rect{ fill:var(--bg-slot-battery); }
.slot[data-type="wire"] .slot-rect{ fill:var(--bg-slot-wire); }
.slot[data-type="socket"] .slot-rect{ fill:var(--bg-slot-socket); }
.slot[data-type="bulb"] .slot-rect{ fill:var(--bg-slot-bulb); }

/* Classification zones */
.zone-broken .zone-rect{ fill:#fee2e2; stroke:#ef4444; stroke-width:3; }
.zone-label{ fill:#1f2937; font-size:16px; font-weight:600; }
.zone-broken .zone-label{ fill:#dc2626; }

.component{cursor:grab; user-select:none; -webkit-user-select:none}
.component:active{cursor:grabbing}
.comp-shape{fill:#e5e7eb; stroke:#94a3b8; stroke-width:2; rx:10; ry:10}
.icon{fill:#64748b; pointer-events:none}
.comp-index{pointer-events:none}

/* Per-type component tile backgrounds */
.component[data-type="battery"] .comp-shape{ fill:var(--bg-battery); }
.component[data-type="wire"] .comp-shape{ fill:var(--bg-wire); }
.component[data-type="socket"] .comp-shape{ fill:var(--bg-socket); }
.component[data-type="bulb"] .comp-shape{ fill:var(--bg-bulb); }

.wire-path{stroke:var(--c-wire); stroke-width:6; fill:none; stroke-linecap:round}

.bulb-off{fill:var(--c-bulb-off)}
.bulb-on{fill:var(--c-bulb); filter:url(#bulb-glow)}

/* Debug */
.debug{margin-top:12px; background:#111827; color:#e5e7eb; padding:12px; border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px}
.hidden{display:none}
.sr-only{position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}