/* ============================================================
   CIRCUIT LOCK — the second gate type.
   Brass-and-arcane clockwork; reuses the Torchlit design tokens.
   ============================================================ */

/* ---------- MAIN SCREEN: full-bleed takeover ---------- */
.main-screen.circuit-mode .scene-grad { z-index: 1; }
.circuit-stage {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.5rem, 1.6vh, 1.1rem);
  padding: clamp(110px, 15vh, 150px) clamp(1rem, 3vw, 2rem) clamp(18px, 3vh, 34px);
  overflow: hidden;
}
.circuit-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, hsl(38 80% 45% / .12), transparent 52%),
    radial-gradient(circle at 50% 120%, hsl(28 40% 10% / .8), transparent 60%);
}
.circuit-titlebar { position: relative; z-index: 2; text-align: center; }
.circuit-title {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: hsl(var(--foreground));
  letter-spacing: .08em; text-shadow: 0 0 30px hsl(var(--primary) / .25);
}
.circuit-sub {
  margin-top: .35rem; color: hsl(var(--muted-foreground));
  font-size: clamp(.78rem, 1.4vw, 1rem); letter-spacing: .03em;
}

.circuit-board {
  position: relative; z-index: 1;
  width: min(50vh, 50vw); aspect-ratio: 1; max-width: 580px;
  display: grid; place-items: center;
}
.circuit-lock { width: 100%; height: 100%; overflow: visible; }
.circuit-lock.complete { animation: cl-lock-flare .9s ease-out 2; }
@keyframes cl-lock-flare {
  0%,100% { filter: drop-shadow(0 0 10px hsl(var(--primary) / .5)); }
  50%     { filter: drop-shadow(0 0 40px hsl(var(--primary) / .95)); }
}

/* backplate + tracks */
.cl-plate { fill: none; stroke: hsl(38 22% 30% / .35); stroke-width: 14; }
.cl-track { fill: none; stroke: currentColor; stroke-width: 2; opacity: .18; }

/* rotatable ring group — the clockwork snap lives here */
.ring-group {
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  transform-box: view-box; transform-origin: 200px 200px;
}

/* conductor path */
.conductor { stroke-width: 8; stroke-linecap: round; fill: none; transition: opacity .3s; }
.conductor.dim  { stroke: hsl(38 12% 60%); opacity: .42; }
.conductor.live {
  stroke: currentColor; opacity: 1;
  filter: drop-shadow(0 0 9px currentColor);
  stroke-dasharray: 12 8; animation: cl-flow 1s linear infinite;
}
@keyframes cl-flow { to { stroke-dashoffset: -20; } }

/* radial entry/exit ports */
.cl-port { stroke-width: 7; stroke-linecap: round; fill: none; transition: opacity .3s; }
.cl-port.dim  { stroke: hsl(var(--muted-foreground)); opacity: .3; }
.cl-port.live { stroke: currentColor; opacity: 1; filter: drop-shadow(0 0 6px currentColor); }

/* port nodes */
.cl-node { fill: currentColor; opacity: .45; transition: opacity .3s; }
.cl-node.live { opacity: 1; filter: drop-shadow(0 0 7px currentColor); }

/* power source */
.cl-power-core { fill: hsl(var(--primary)); filter: drop-shadow(0 0 12px hsl(var(--primary))); }
.cl-power-halo { fill: hsl(var(--primary) / .18); animation: cl-power-pulse 2.2s ease-in-out infinite; }
@keyframes cl-power-pulse { 0%,100% { opacity:.5; r:15; } 50% { opacity:.95; } }
.cl-power-feed { stroke: hsl(var(--primary)); stroke-width: 6; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 6px hsl(var(--primary))); }

/* core receptacle */
.cl-core-ring { fill: none; stroke: hsl(38 24% 34% / .7); stroke-width: 4; }
.cl-core-fill { fill: hsl(24 18% 9%); transition: fill .4s; }
.cl-core-intake { stroke: hsl(38 24% 38%); stroke-width: 6; stroke-linecap: round; transition: stroke .3s; }
.cl-core.lit .cl-core-fill { fill: url(#cl-core-grad); }
.cl-core.lit .cl-core-ring { stroke: hsl(var(--primary)); filter: drop-shadow(0 0 16px hsl(var(--primary))); }
.cl-core.lit .cl-core-intake { stroke: hsl(var(--primary)); filter: drop-shadow(0 0 8px hsl(var(--primary))); }

/* gap marker — first broken junction */
.cl-gap-ring { fill: none; stroke: var(--gc, hsl(var(--damage))); stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .9; animation: cl-gap-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.cl-gap-x { stroke: var(--gc, hsl(var(--damage))); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--gc)); animation: cl-gap-blink 1s ease-in-out infinite; }
@keyframes cl-gap-spin { to { transform: rotate(360deg); } }
@keyframes cl-gap-blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* hint ghost */
.cl-hint-ghost { transform-box: view-box; transform-origin: 200px 200px; }
.cl-hint-arc { fill: none; stroke: hsl(var(--foreground)); stroke-width: 9; stroke-linecap: round; opacity: 0; animation: cl-hint 2.4s ease-out; }
@keyframes cl-hint { 0%,100% { opacity:0; } 12%,60% { opacity:.55; } }

/* surge + completion flashes */
.circuit-surge-flash { position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, hsl(265 60% 50% / .55) 100%);
  animation: cl-flash .55s ease-out forwards; }
.circuit-open-flare { position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, hsl(var(--primary) / .85), transparent 60%);
  animation: cl-flash 1.2s ease-out forwards; }
@keyframes cl-flash { 0% { opacity:0; } 18% { opacity:1; } 100% { opacity:0; } }

/* ---------- HUD ---------- */
.circuit-hud { position: relative; z-index: 2; width: min(92%, 720px); display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.cl-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; width: 100%; }
.cl-leg {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem .4rem; border-radius: 12px;
  background: hsl(var(--surface) / .5); border: 1px solid hsl(var(--border) / .5);
  opacity: .55; transition: opacity .3s, box-shadow .3s;
}
.cl-leg.lit { opacity: 1; box-shadow: inset 0 0 0 1px var(--rc), 0 0 18px hsl(38 80% 50% / .12); }
.cl-leg-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.cl-leg.lit .cl-leg-dot { animation: cl-dot-pulse 1.1s ease-in-out infinite; }
@keyframes cl-dot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.cl-leg-name { font-family: var(--font-display); font-size: .8rem; color: hsl(var(--foreground)); letter-spacing: .04em; }
.cl-leg-owner { font-size: .72rem; color: hsl(var(--muted-foreground)); }
.cl-leg-state { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }
.cl-leg:not(.lit) .cl-leg-state { color: hsl(var(--muted-foreground)); }

.cl-stuck {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: hsl(var(--foreground) / .85); letter-spacing: .01em;
  background: hsl(var(--surface) / .5); border: 1px solid hsl(var(--border) / .55);
  padding: .5rem .9rem; border-radius: 999px; text-align: center;
}
.cl-stuck-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }

.cl-surge { display: flex; align-items: center; gap: .7rem; width: min(100%, 460px); }
.cl-surge-lbl { font-family: var(--font-display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(265 70% 72%); white-space: nowrap; }
.cl-surge-bar { flex: 1; height: 7px; border-radius: 99px; background: hsl(var(--background) / .7); overflow: hidden; box-shadow: inset 0 0 0 1px hsl(265 50% 40% / .5); }
.cl-surge-fill { height: 100%; background: linear-gradient(90deg, hsl(265 70% 60%), hsl(285 70% 66%)); transition: width .16s linear; }
.cl-surge-fill.low { background: linear-gradient(90deg, hsl(var(--damage)), hsl(15 80% 55%)); }

.cl-open-text {
  font-size: clamp(2rem, 6vw, 4.2rem); color: hsl(var(--primary));
  letter-spacing: .14em; text-shadow: 0 0 50px hsl(var(--primary) / .7);
  animation: cl-open-rise 1.2s ease-out both;
}
@keyframes cl-open-rise { 0% { opacity:0; transform: scale(1.3); letter-spacing:.5em; } 100% { opacity:1; transform: scale(1); letter-spacing:.14em; } }

/* ============================================================
   RING PREVIEW (player + moderator)
   ============================================================ */
.cl-preview { display: block; }
.cl-pv-source { fill: hsl(var(--primary)); filter: drop-shadow(0 0 6px hsl(var(--primary))); }
.cl-pv-core { fill: hsl(24 18% 12%); stroke: hsl(38 24% 34% / .8); stroke-width: 2; }
.cl-pv-track { fill: none; stroke: currentColor; stroke-width: 2; opacity: .2; }
.cl-pv-ring { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.cl-pv-cond { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; opacity: .55; transition: opacity .3s; }
.cl-pv-stub { stroke: currentColor; stroke-width: 6; stroke-linecap: round; opacity: .5; transition: opacity .3s; }
.cl-pv-node { fill: currentColor; opacity: .6; }
.cl-pv-ring.lit .cl-pv-cond, .cl-pv-ring.lit .cl-pv-stub { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.cl-pv-ring.lit .cl-pv-node { opacity: 1; }

/* ============================================================
   PLAYER OVERLAY
   ============================================================ */
.circuit-overlay {
  position: fixed; inset: 0; z-index: 6000;
  background: radial-gradient(ellipse at 50% 30%, hsl(28 30% 9% / .96), hsl(20 16% 5% / .99));
  display: grid; place-items: center; overflow-y: auto; padding: 1.2rem;
}
.circuit-ov-inner { width: min(94vw, 460px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.circuit-ov-inner h2 { font-size: clamp(1.5rem, 7vw, 2rem); margin-bottom: .4rem; }
.cl-ov-eyebrow { font-family: var(--font-display); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: .5rem; }
.gn-hint { font-size: .9rem; line-height: 1.5; margin-bottom: 1.2rem; max-width: 38ch; }

.cl-ctrl-stack { display: flex; flex-direction: column; gap: .9rem; width: 100%; }
.cl-ctrl {
  position: relative; border-radius: 18px; padding: .9rem 1rem 1.1rem;
  background: hsl(var(--surface) / .6); border: 1px solid hsl(var(--border) / .6);
  box-shadow: inset 0 0 0 1px hsl(var(--rc) / 0);
  transition: box-shadow .3s;
}
.cl-ctrl.live { box-shadow: inset 0 0 0 1.5px var(--rc), 0 0 26px hsl(38 80% 50% / .14); }
.cl-ctrl.secondary { margin-top: .25rem; border-top: 2px dashed var(--rc); }
.cl-ctrl-head { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-bottom: .5rem; }
.cl-ctrl-eyebrow { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.cl-ctrl.secondary .cl-ctrl-eyebrow { color: var(--rc); }
.cl-ctrl-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--rc); display: inline-flex; align-items: center; gap: .5rem; }
.cl-ctrl-live { font-family: var(--font-body); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--primary)); padding: .12rem .4rem; border-radius: 99px; background: hsl(var(--primary) / .14); }
.cl-ctrl-body { display: flex; align-items: center; justify-content: center; gap: .7rem; }

.rotate-btn {
  width: 84px; height: 84px; border-radius: 9999px; flex: 0 0 84px;
  display: grid; place-items: center; font-size: 2.1rem; line-height: 1;
  color: hsl(var(--foreground)); cursor: pointer;
  transition: transform .12s ease, filter .2s ease;
}
.rotate-btn:hover { filter: brightness(1.2); }
.rotate-btn:active { transform: scale(0.94); }
.rotate-btn[disabled] { opacity: .35; pointer-events: none; }

.cl-watch { margin-top: 1rem; font-family: var(--font-display); font-size: .76rem; letter-spacing: .08em; color: hsl(var(--primary) / .85); text-transform: uppercase; }

.cl-ov-spark {
  width: 84px; height: 84px; margin: 0 auto .8rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff3d6, hsl(var(--primary)) 45%, transparent 72%);
  box-shadow: 0 0 60px hsl(var(--primary) / .8); animation: cl-spark 1.4s ease-out infinite;
}
@keyframes cl-spark { 0%,100% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.12); opacity:1; } }

/* ============================================================
   MODERATOR PANEL (rendered in host.jsx)
   ============================================================ */
.circuit-panel .cl-diff-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.cl-assign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .3rem; }
.cl-assign {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem;
  border-radius: 12px; background: hsl(var(--background) / .5);
  border: 1px solid hsl(var(--border) / .6); box-shadow: inset 0 0 0 1px hsl(var(--rc) / .35);
}
.cl-assign-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); flex: 0 0 auto; }
.cl-assign-name { font-family: var(--font-display); font-size: .76rem; color: var(--rc); flex: 0 0 auto; min-width: 38px; }
.cl-assign select { flex: 1; min-width: 0; }
.cl-mini-row { display: flex; gap: .35rem; justify-content: center; margin: .5rem 0; flex-wrap: wrap; }
.cl-mini { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.cl-mini-lbl { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.cl-hint-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.cl-status-line { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: hsl(var(--foreground) / .85); margin-top: .5rem; }