.ticker { left: 0; right: 0; top: 0; margin: 0; padding: .3cqw 0; overflow: hidden; white-space: nowrap; font: 4.2cqw/1 "VT323", monospace; color: #3dff5a; text-shadow: 0 0 .8cqw rgba(60,255,90,.7); }
.ticker span { display: inline-block; animation: tick 60s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }
.sign { display: block; width: 100%; padding: 0 10px; text-align: center; font-family: "ArchivoBlack", "Anton", sans-serif; line-height: 1.02; text-transform: uppercase; color: #111; letter-spacing: -.01em; }
body.flip [data-quad] .sign { animation: swap .3s steps(3); }
@keyframes swap { from { opacity: 0; } }
.count { right: 3.5%; bottom: 5.5%; margin: 0; font: 5cqw/1 "VT323", monospace; color: #3dff5a; text-shadow: 0 0 .8cqw rgba(60,255,90,.7); }
.hit { top: 30%; bottom: 20%; width: 30%; } .hit.l { left: 0; } .hit.r { right: 0; }

/* A new clip flips the barricade boards over. */
body.flip [data-quad="left"] .sign, body.flip [data-quad="right"] .sign { animation: flap .42s steps(6) both; }
@keyframes flap { 0% { transform: scaleY(1); } 40% { transform: scaleY(.05); } 100% { transform: scaleY(1); } }