/* =========================================================================
   Circuit Loop — the puzzle at /circuit-loop.

   The supplied design was a standalone document: it styled html, body, *,
   button and :focus-visible directly and declared its palette on :root.
   Dropped into the shared layout unchanged, those rules would have restyled
   the site header, the footer and every button on the page. So everything
   here is namespaced under .clp, the palette lives on .clp rather than
   :root, and the two font stacks are the site's own tokens instead of a
   second Google Fonts request.

   The original was dark-only, which would have left the board glowing in the
   middle of a paper-white page. The variables below are the light board;
   html[data-theme="dark"] .clp swaps in the deep circuit-board palette the
   design shipped with. Nothing outside the token blocks refers to a colour
   literal, so a third palette is eight lines.
   ========================================================================= */

.clp{
  /* ---- LIGHT (default) — brushed board on warm paper ---- */
  --clp-bg:var(--paper-2,#FAF9F6);
  --clp-bg-2:var(--paper,#FFFFFF);
  --clp-panel:var(--paper,#FFFFFF);
  --clp-panel-2:var(--paper-3,#F0EEE8);
  --clp-line:var(--rule,#E3E0D9);
  --clp-ink:var(--ink,#15171B);
  --clp-ink-2:var(--ink-2,#4B4F58);
  --clp-ink-3:var(--ink-3,#8A8E99);
  --clp-live:var(--accent,#0E8C7F);
  --clp-live-dim:rgba(14,140,127,.42);
  --clp-live-glow:rgba(14,140,127,.30);
  --clp-live-tint:rgba(14,140,127,.10);
  --clp-live-line:rgba(14,140,127,.28);
  --clp-dead:#D3CFC6;
  --clp-socket:rgba(21,23,27,.030);
  --clp-socket-hot:rgba(14,140,127,.09);
  --clp-gold:var(--mark,#B9791F);
  --clp-gold-tint:rgba(185,121,31,.10);
  --clp-gold-line:rgba(185,121,31,.30);
  --clp-gold-wire:#C9BFA6;
  --clp-warn:var(--bad,#A93028);
  --clp-track:#EDEBE5;
  --clp-hub:var(--paper,#FFFFFF);
  --clp-veil:rgba(255,255,255,.90);
  --clp-src-ink:#FFFFFF;
  --clp-board-shadow:0 18px 40px -28px rgba(21,23,27,.42),inset 0 1px 0 rgba(255,255,255,.6);
  --clp-ease:cubic-bezier(.2,.8,.25,1);

  display:block;width:100%;
  font-family:var(--font-body,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

html[data-theme="dark"] .clp{
  /* ---- DARK — the original circuit-board palette ---- */
  --clp-bg:#0d1418;
  --clp-bg-2:#111c21;
  --clp-panel:#15242b;
  --clp-panel-2:#192d35;
  --clp-line:#223a44;
  --clp-ink:#e8f2f4;
  --clp-ink-2:#94aeb8;
  --clp-ink-3:#5f7d89;
  --clp-live:#3ddc97;
  --clp-live-dim:#1f6b52;
  --clp-live-glow:rgba(61,220,151,.45);
  --clp-live-tint:rgba(61,220,151,.12);
  --clp-live-line:rgba(61,220,151,.28);
  --clp-dead:#2c4550;
  --clp-socket:rgba(255,255,255,.018);
  --clp-socket-hot:rgba(61,220,151,.07);
  --clp-gold:#ffcc66;
  --clp-gold-tint:rgba(255,204,102,.10);
  --clp-gold-line:rgba(255,204,102,.28);
  --clp-gold-wire:#4a5a3a;
  --clp-warn:#ff8b6a;
  --clp-track:#0e1a1f;
  --clp-hub:#ffffff;
  --clp-veil:rgba(10,20,24,.92);
  --clp-src-ink:#062018;
  --clp-board-shadow:0 24px 50px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03);
}

.clp *{box-sizing:border-box}
.clp .clp-num{font-variant-numeric:tabular-nums}
.clp :focus-visible{outline:2px solid var(--clp-live);outline-offset:3px}

/* The design centred itself with a flex body. Here the layout already
   centres and pads every child of .qdt-page-host, so the app just claims a
   column width and sits in the middle of it. */
.clp-app{
  width:100%;max-width:560px;margin:0 auto;
  padding:6px 0 8px;
  background:
    radial-gradient(90% 60% at 50% -6%,var(--clp-live-tint),transparent 62%);
}

/* The prose below the board reads at a comfortable measure rather than the
   board's 560px column, but stays narrower than the full shell so the two
   still read as one page. */
.clp-prose{width:100%;max-width:760px;margin:0 auto}

/* ---------------- header ---------------- */
.clp-head{display:flex;align-items:center;margin-bottom:14px}
.clp-logo{
  width:38px;height:38px;border-radius:11px;flex:none;margin-right:12px;display:flex;
  align-items:center;justify-content:center;color:var(--clp-live);
  background:var(--clp-live-tint);border:1px solid var(--clp-live-line);
}
.clp-titles h1{
  margin:0;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--clp-ink);
  font-family:var(--font-display,var(--font-body,sans-serif));line-height:1.15;
}
.clp-titles p{margin:2px 0 0;font-size:12px;color:var(--clp-ink-3)}
.clp-head-right{margin-left:auto;text-align:right}
.clp-head-right b{
  display:block;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--clp-ink-3);font-weight:600;
}
.clp-head-right span{font-size:15px;font-weight:700;color:var(--clp-ink)}

/* ---------------- stage bar ---------------- */
.clp-stage{
  background:var(--clp-panel);border:1px solid var(--clp-line);border-radius:14px;
  padding:13px 15px;margin-bottom:12px;
}
.clp-stage-top{display:flex;align-items:baseline;margin-bottom:9px}
.clp-stage-no{
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--clp-live);
}
.clp-stage-name{font-size:15px;font-weight:700;margin-left:auto;color:var(--clp-ink)}
.clp-bar{height:6px;border-radius:99px;background:var(--clp-track);overflow:hidden;display:flex;gap:3px}
.clp-bar i{flex:1 1 auto;border-radius:99px;background:var(--clp-dead);transition:background .3s}
.clp-bar i.done{background:var(--clp-live-dim)}
.clp-bar i.now{background:var(--clp-live)}
.clp-twists{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.clp-twists span{
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--clp-gold);background:var(--clp-gold-tint);border:1px solid var(--clp-gold-line);
  border-radius:99px;padding:3px 9px;
}
.clp-twists span.off{color:var(--clp-ink-3);background:transparent;border-color:var(--clp-line)}
.clp-twists span.size{color:var(--clp-ink);background:var(--clp-panel-2);border-color:var(--clp-line)}

/* ---------------- board ---------------- */
.clp-board-wrap{
  position:relative;background:var(--clp-bg-2);border:1px solid var(--clp-line);
  border-radius:16px;padding:12px;box-shadow:var(--clp-board-shadow);
}
.clp-board{display:flex;flex-wrap:wrap;margin:0 auto;touch-action:manipulation}

/* The reset the site applies to buttons is stronger than a bare .clp-cell,
   so the cell restates the parts of it that matter. */
.clp .clp-cell{
  position:relative;padding:0;border:0;background:transparent;cursor:pointer;
  display:block;box-shadow:none;font:inherit;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.clp .clp-cell::before{                                /* faint socket */
  content:"";position:absolute;left:5%;top:5%;right:5%;bottom:5%;border-radius:22%;
  background:var(--clp-socket);transition:background .18s;
}
.clp .clp-cell:hover::before{background:var(--clp-socket-hot)}
.clp .clp-cell.locked{cursor:not-allowed}
.clp .clp-cell.locked::before{background:var(--clp-gold-tint)}
.clp .clp-cell.cursor::before{box-shadow:inset 0 0 0 2px var(--clp-live-line)}
.clp .clp-cell[disabled]{opacity:1}                    /* welded, not greyed out */
.clp-pipe{
  position:absolute;left:0;top:0;width:100%;height:100%;
  transition:transform .22s var(--clp-ease);
}
.clp-pipe svg{display:block;width:100%;height:100%;overflow:visible}
.clp-arm{
  stroke:var(--clp-dead);stroke-width:13;stroke-linecap:round;fill:none;
  transition:stroke .25s,filter .25s;
}
.clp-hub{fill:var(--clp-dead);transition:fill .25s}
.clp .clp-cell.live .clp-arm{stroke:var(--clp-live)}
.clp .clp-cell.live .clp-hub{fill:var(--clp-live)}
.clp .clp-cell.live .clp-pipe svg{filter:drop-shadow(0 0 6px var(--clp-live-glow))}
.clp .clp-cell.src .clp-hub{fill:var(--clp-hub);stroke:var(--clp-live);stroke-width:4}
.clp .clp-cell.src .clp-arm{stroke:var(--clp-live)}
.clp .clp-cell.hintflash::before{background:var(--clp-gold);opacity:.28}
.clp .clp-cell.locked:not(.live) .clp-arm{stroke:var(--clp-gold-wire)}
.clp .clp-cell.locked .clp-lockdot{fill:var(--clp-gold);opacity:.9}
.clp-lockdot{fill:transparent}

/* ---------------- stats + controls ---------------- */
.clp-stats{
  display:flex;flex-wrap:wrap;margin:12px 0 0;background:var(--clp-panel);
  border:1px solid var(--clp-line);border-radius:13px;overflow:hidden;
}
.clp-stats div{flex:1 1 25%;min-width:78px;padding:10px 12px;border-left:1px solid var(--clp-line)}
.clp-stats div:first-child{border-left:0}
.clp-stats b{
  display:block;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--clp-ink-3);font-weight:600;
}
.clp-stats span{display:block;font-size:17px;font-weight:700;margin-top:3px;color:var(--clp-ink)}
.clp-stats span.warn{color:var(--clp-warn)}
.clp-stats span.good{color:var(--clp-live)}

.clp-ctrls{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.clp .clp-btn{
  flex:1 1 auto;cursor:pointer;background:var(--clp-panel-2);color:var(--clp-ink);
  border:1px solid var(--clp-line);border-radius:11px;padding:11px 12px;font-size:13.5px;
  font-weight:600;font-family:inherit;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:none;
  transition:background .16s,border-color .16s,transform .1s;
}
.clp .clp-btn svg{margin-right:7px;color:var(--clp-ink-2)}
.clp .clp-btn:hover{background:var(--clp-panel);border-color:var(--clp-live-line)}
.clp .clp-btn:active{transform:translateY(1px)}
.clp .clp-btn[disabled]{opacity:.4;cursor:not-allowed}
.clp .clp-btn-hint{color:var(--clp-gold)}
.clp .clp-btn-hint svg{color:var(--clp-gold)}
.clp .clp-btn-danger{flex:0 1 auto}
.clp .clp-btn-danger:hover{border-color:var(--clp-warn);color:var(--clp-warn);background:var(--clp-panel-2)}

.clp-hows{
  margin-top:14px;background:var(--clp-panel);border:1px solid var(--clp-line);border-radius:13px;
  padding:13px 15px;font-size:13px;color:var(--clp-ink-2);line-height:1.6;
}
.clp-hows b{color:var(--clp-ink)}
.clp-hows kbd{
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:11.5px;
  background:var(--clp-panel-2);border:1px solid var(--clp-line);border-radius:5px;
  padding:1px 6px;color:var(--clp-ink);
}
.clp-save-note{margin:10px 0 0;font-size:11.5px;color:var(--clp-ink-3);text-align:center;line-height:1.5}

/* ---------------- win overlay ---------------- */
.clp-win{
  position:absolute;left:8px;right:8px;top:8px;bottom:8px;border-radius:12px;
  background:var(--clp-veil);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:22px;opacity:0;pointer-events:none;transition:opacity .28s var(--clp-ease);z-index:5;
}
.clp-win.on{opacity:1;pointer-events:auto}
.clp-win h2{
  margin:0;font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--clp-live);
  font-family:var(--font-display,var(--font-body,sans-serif));line-height:1.15;
}
.clp-win p{margin:8px 0 0;font-size:13.5px;color:var(--clp-ink-2)}
.clp-stars{display:flex;gap:7px;margin:14px 0 2px}
.clp-stars svg{color:var(--clp-dead)}
.clp-stars svg.lit{color:var(--clp-gold)}
.clp .clp-win .clp-btn{
  flex:0 0 auto;margin-top:16px;padding:12px 24px;background:var(--clp-live);
  color:var(--clp-src-ink);border-color:var(--clp-live);font-weight:800;
}
.clp .clp-win .clp-btn:hover{filter:brightness(1.08);border-color:var(--clp-live)}

@media (max-width:480px){
  .clp-stats div{flex:1 1 50%}
  .clp-titles h1{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .clp,.clp *{transition:none !important;animation:none !important}
}