/* Website interface motion, not a physical world/Core depiction. Native CSS
   transform-only routes use one CSS pixel per step. No per-frame JS renderer. */
.pixel-page-circuit{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;}
.pixel-circuit-route{position:absolute;top:0;bottom:0;width:2px;background:#542637;opacity:.32;}
.pixel-circuit-packet{position:absolute;top:-12px;left:0;width:2px;height:8px;background:#8b4eaa;box-shadow:0 -4px 0 #da783d;animation:pixel-circuit-flow-r20 var(--route-duration) steps(var(--route-distance),end) var(--route-phase) infinite;}
@keyframes pixel-circuit-flow-r20{from{transform:translateY(0)}to{transform:translateY(calc(var(--route-distance)*1px))}}
.pixel-frame-flow{position:absolute;inset:-16px;pointer-events:none;overflow:hidden;contain:strict;}
.pixel-rail-packet{position:absolute;width:6px;height:2px;background:#da783d;opacity:.72;box-shadow:-4px 0 0 #8b4eaa;animation:pixel-frame-flow-r20 var(--route-duration) steps(var(--route-distance),end) var(--route-phase) infinite;}
.pixel-rail-packet[data-axis=y]{width:2px;height:6px;box-shadow:0 -4px 0 #8b4eaa;}
@keyframes pixel-frame-flow-r20{0%{transform:translate(0,0);opacity:0}8%{opacity:.72}88%{opacity:.72}100%{transform:translate(var(--travel-x),var(--travel-y));opacity:0}}
.is-pixel-background-paused .pixel-circuit-packet,.is-pixel-background-paused .pixel-rail-packet{animation-play-state:paused;}
/* The future game viewport itself stays clear and interactive. These packets
   follow only its existing16px frame; they do not respond to game pause/audio. */
@media(prefers-reduced-motion:reduce){
 .pixel-page-circuit,.pixel-frame-flow{display:none;}
 .pixel-circuit-packet,.pixel-rail-packet{animation:none!important;}
}
@media(forced-colors:active){.pixel-page-circuit,.pixel-frame-flow{display:none;}}