/* Chain Reaction (layout, controls and result card come from flow.css) */
[hidden] { display: none !important; }
.ch-board { width: 100%; border-radius: 16px; border: 1px solid #2C3846; background: #0F161E; padding: 6px; }
.ch-board svg { display: block; width: 100%; aspect-ratio: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ch-board svg.running { cursor: progress; }
.gridl line { stroke: rgba(255,255,255,.07); stroke-width: .02; }
.block rect { fill: rgba(247,200,115,.16); stroke: #F7C873; stroke-width: .035; }
.block path { stroke: rgba(247,200,115,.7); stroke-width: .035; stroke-linecap: round; fill: none; }
.stepn rect { fill: #0F161E; stroke: var(--cyan); stroke-width: .05; transition: fill .2s; }
.stepn text { fill: var(--cyan); font-family: inherit; font-weight: 700; font-size: .32px; text-anchor: middle; dominant-baseline: central; transition: fill .2s; }
.stepn circle { fill: var(--cyan); transition: fill .2s; }
.stepn.hit rect { fill: var(--cyan); }
.stepn.hit text, .stepn.hit circle { fill: #0F161E; }
.endn .ring { fill: none; stroke: var(--pink); stroke-width: .05; }
.endn .core { fill: var(--pink); }
.startn circle { fill: rgba(74,222,128,.16); stroke: var(--green); stroke-width: .05; }
.startn .dirmark path, .router .arr path { fill: none; stroke-width: .06; stroke-linecap: round; stroke-linejoin: round; }
.startn .dirmark path { stroke: var(--green); }
.router rect { stroke-width: .045; }
.router.mine rect { fill: rgba(74,222,128,.12); stroke: var(--green); }
.router.mine .arr path { stroke: var(--green); }
.router.fixed rect { fill: rgba(91,207,230,.12); stroke: var(--cyan); stroke-dasharray: .08 .06; }
.router.fixed .arr path { stroke: var(--cyan); }
.lockdot { fill: var(--cyan); }
.trail { fill: none; stroke: var(--green); stroke-width: .12; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.token { fill: #F4F6F8; stroke: var(--green); stroke-width: .05; transition: cx .1s linear, cy .1s linear; filter: drop-shadow(0 0 .12px rgba(74,222,128,.9)); }
.token.bad { fill: #F7C873; stroke: #F7C873; animation: chbad .5s; }
@keyframes chbad { 30% { r: .26; } }
svg.failed .trail { stroke: #F7C873; opacity: .45; }

/* the chain reaction: the route becomes a live signal, steps fire in order, the destination blooms */
svg.won .trail { opacity: 1; stroke: var(--cyan); stroke-dasharray: .35 .2; animation: chflow .6s linear infinite; filter: drop-shadow(0 0 .1px var(--cyan)); }
svg.won .token { opacity: 0; transition: opacity .3s; }
svg.won .stepn .pop { animation: chfire .6s cubic-bezier(.2,.8,.2,1.3) both; animation-delay: var(--d, 0ms); transform-box: fill-box; transform-origin: center; }
svg.won .endn .core { animation: chbloom 1s cubic-bezier(.2,.8,.2,1.2) .7s both; transform-box: fill-box; transform-origin: center; }
svg.won .endn .ring { animation: chring 1.2s ease-out .7s both; transform-box: fill-box; transform-origin: center; }
svg.won.still .stepn .pop, svg.won.still .endn .core, svg.won.still .endn .ring { animation: none; }
@keyframes chflow { to { stroke-dashoffset: -.55; } }
@keyframes chfire { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes chbloom { 0% { transform: scale(1); } 40% { transform: scale(1.9); } 100% { transform: scale(1.3); } }
@keyframes chring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .token { transition: none; }
  svg.won .trail, svg.won .stepn .pop, svg.won .endn .core, svg.won .endn .ring, .token.bad { animation: none; }
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 2px 0; padding: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend .k-start { border-radius: 50%; border: 2px solid var(--green); }
.legend .k-step { border: 2px solid var(--cyan); transform: rotate(45deg) scale(.85); border-radius: 2px; }
.legend .k-block { background: rgba(247,200,115,.25); border: 2px solid #F7C873; }
.legend .k-router { border: 2px solid var(--green); }
.legend .k-fixed { border: 2px dashed var(--cyan); }
.legend .k-end { border-radius: 50%; background: var(--pink); }
#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; } }
.ch-board svg:focus { outline: none; }
.ch-board:has(svg:focus-visible) { box-shadow: 0 0 0 2px var(--green); }
.cursor { fill: none; stroke: #F4F6F8; stroke-width: .05; stroke-dasharray: .12 .08; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }