/* Signal (layout, controls and result card come from flow.css) */
[hidden] { display: none !important; }
.sig-board { --n: 7; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 100%; aspect-ratio: 1; padding: 6px; border-radius: 16px; border: 1px solid #2C3846; background: #0F161E; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sig-board.wrap { border-style: dashed; border-color: rgba(91,207,230,.45); }
.tile { position: relative; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 1; min-width: 0; -webkit-tap-highlight-color: transparent; border-radius: 6px; }
.tile:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.tile:disabled { cursor: default; }
.tile svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform .16s cubic-bezier(.3,.7,.3,1); }
.tile .wires line { stroke: #46576A; stroke-width: 15; stroke-linecap: butt; transition: stroke .2s; }
.tile .joint { fill: #46576A; transition: fill .2s; }
.tile .dest { fill: #0F161E; stroke: rgba(236,72,153,.75); stroke-width: 6; transition: fill .2s, stroke .2s; }
.tile .core { fill: var(--green); stroke: #0F161E; stroke-width: 5; }
.tile.on .wires line { stroke: var(--green); }
.tile.on .joint { fill: var(--green); }
.tile.on .wires { filter: drop-shadow(0 0 5px rgba(74,222,128,.55)); }
.tile.on .dest { fill: var(--pink); stroke: var(--pink); }
.tile.lock::after { content: ""; position: absolute; left: 10%; top: 10%; width: 12%; height: 12%; border-radius: 50%; background: var(--cyan); opacity: .8; }
.tile.no { animation: signo .3s; }
@keyframes signo { 40% { background: rgba(247,200,115,.22); } }
@media (hover: hover) { .tile:not(:disabled):hover { background: rgba(255,255,255,.04); } }

/* the win: a bright pulse runs out from the source, tile by tile, then the destinations bloom */
.sig-board.surge .tile .wires line, .sig-board.surge .tile .joint { animation: surge .55s ease-out both; animation-delay: var(--d, 0ms); }
.sig-board.surge .tile .joint { animation-name: surgej; }
.sig-board.surge .tile .dest { animation: bloom .7s cubic-bezier(.2,.8,.2,1.3) both; animation-delay: var(--d, 0ms); transform-box: fill-box; transform-origin: center; }
.sig-board.surge .tile.src .core { animation: corepulse .8s ease-out; transform-box: fill-box; transform-origin: center; }
.sig-board.solved .tile .wires line { stroke: var(--cyan); }
.sig-board.solved .tile .joint { fill: var(--cyan); }
.sig-board.solved .tile .wires { filter: drop-shadow(0 0 5px rgba(91,207,230,.5)); }
@keyframes surge { 0% { stroke: var(--green); } 35% { stroke: #F4F6F8; } 100% { stroke: var(--cyan); } }
@keyframes surgej { 0% { fill: var(--green); } 35% { fill: #F4F6F8; } 100% { fill: var(--cyan); } }
@keyframes bloom { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes corepulse { 30% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .tile svg { transition: none; }
  .sig-board.surge .tile .wires line, .sig-board.surge .tile .joint, .sig-board.surge .tile .dest, .sig-board.surge .tile.src .core, .tile.no { animation: none; }
}
#hint { min-width: 7.5em; font-variant-numeric: tabular-nums; }
#levels { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#levels .seg { width: 100%; min-width: 0; }
#levels .seg button { padding: 6px 4px; }
@media (max-width: 420px) { #levels { grid-template-columns: minmax(0, 1fr); } #levels .btn { justify-self: start; } }
.sig-board.solved .tile.lock::after { display: none; }