/* Surviversus critters: a 5-7 runner pixel lane race in quiet spaces. Sheet from tools/build-critter-sheet.mjs. */
/* Motion is transform plus a 2-step background-position on 32px boxes; JS only writes variables once per race. */
/* Fixed height whatever the runner count, so a new race never shifts the page; --ln lanes sit centred on --lb. */
.svc-strip{ --px:1; --lp:12px; --ln:7; --lb:calc(4px + (7 - var(--ln))*var(--lp)/2); --r0:1s; --cd:2.4s; --tb:7s; --rp:12s;
  position:relative; display:block; height:104px; overflow:hidden; margin:12px 0 4px; pointer-events:none; user-select:none;
  contain:layout paint style;
  background:repeating-linear-gradient(to bottom, #1c1917 0 3px, #f5f5f4 3px 6px) right 20px bottom var(--lb)/3px calc(var(--ln)*var(--lp)) no-repeat,
    repeating-linear-gradient(to top, transparent 0 calc(var(--lp) - 1px), rgba(128,128,128,.28) calc(var(--lp) - 1px) var(--lp)) 0 calc(100% - var(--lb))/100% calc(var(--ln)*var(--lp)) no-repeat }
.svc-strip[hidden]{ display:none }
.svc-strip--flex{ flex:0 0 100%; margin:6px 0 2px }
.svc-slot{ height:104px; margin:12px 0 4px }
.svc-slot .svc-strip{ margin:0 }

/* The flag tops the finish line and ticks the race clock: its invisible animation ends when the race is over. */
.svc-flag{ position:absolute; right:4px; bottom:calc(var(--lb) + var(--ln)*var(--lp) - 4px); width:calc(16px*var(--px)); height:calc(16px*var(--px));
  background:url(/images/critters/sheet.png) no-repeat; background-size:calc(368px*var(--px)) calc(16px*var(--px));
  background-position:calc(var(--px)*-16px*21) 0; image-rendering:pixelated; animation:svc-clock var(--rp) linear both }
@keyframes svc-clock{ from{ opacity:1 } to{ opacity:.99 } }

/* Runner slots: one lane each (--ly px above the bottom lane, set per race), one start line, nose on the finish line. */
.svc-run{ --rt:3.6s; --wd:0s; --wb:3.5s; --j:0; --ly:0; --z:1; --rx:svc-flop; --tr:none; position:absolute; z-index:var(--z);
  left:2px; bottom:calc(var(--lb) + var(--ly)*1px - 2px);
  width:calc(100% - 37px); height:calc(16px*var(--px));
  animation:svc-run var(--rt) linear var(--r0) forwards, svc-back var(--wb) ease-in-out calc(var(--tb) + var(--wd)) forwards }
.svc-run.is-out{ display:none }
.svc-run.win{ z-index:9; --rx:svc-cheer }
.svc-run.rx1{ --rx:svc-shrug }
.svc-run.rx2{ --rx:svc-clap }
.svc-run.trip{ --tr:svc-trip }

.svc-hero{ position:absolute; left:0; bottom:0; width:calc(16px*var(--px)); height:calc(16px*var(--px));
  background:url(/images/critters/sheet.png) no-repeat; background-size:calc(368px*var(--px)) calc(16px*var(--px));
  background-position:calc(var(--px)*-16px*var(--c)) 0; image-rendering:pixelated; transform-origin:50% 90%;
  animation:svc-walk .4s steps(2) infinite,
    var(--rx) var(--cd) linear calc(var(--r0) + var(--rt)),
    var(--tr) 1s linear calc(var(--r0) + var(--rt)*.35),
    svc-face calc((var(--wd) + var(--wb)) / .85) linear var(--tb) }
.svc-crown{ display:none; position:absolute; left:0; top:calc(-11px*var(--px)); width:calc(16px*var(--px)); height:calc(16px*var(--px));
  background:url(/images/critters/sheet.png) no-repeat; background-size:calc(368px*var(--px)) calc(16px*var(--px));
  background-position:calc(var(--px)*-16px*22) 0; image-rendering:pixelated; transform-origin:50% 100%; transform:scale(0) }
.svc-run.win .svc-crown{ display:block;
  animation:svc-pop .4s ease-out calc(var(--r0) + var(--rt)) forwards, svc-unpop .3s linear var(--tb) forwards }

/* Off-screen, hidden tab, or not the one animating strip: stand in the lineup, no animation at all. */
.svc-strip.is-off *, .svc-strip.svc-reset *{ animation:none !important }

@keyframes svc-walk{
  from{ background-position-x:calc(var(--px)*-16px*(var(--c) + 1)) }
  to{ background-position-x:calc(var(--px)*-16px*(var(--c) + 3)) }
}
@keyframes svc-run{
  0%{ transform:translateX(0) }
  50%{ transform:translateX(calc(50% + var(--j)*1%)) }
  100%{ transform:translateX(100%) }
}
@keyframes svc-back{ from{ transform:translateX(100%) } to{ transform:translateX(0) } }

/* Hero layer: translateY rotate scaleX in every keyframe so the transforms interpolate cleanly. */
@keyframes svc-cheer{
  0%, 100%{ transform:translateY(0) rotate(0) scaleX(1) }
  10%{ transform:translateY(calc(var(--px)*-4px)) rotate(0) scaleX(1) }
  10.01%{ transform:translateY(calc(var(--px)*-4px)) rotate(0) scaleX(-1) }
  20%, 30%{ transform:translateY(0) rotate(0) scaleX(-1) }
  30.01%{ transform:translateY(calc(var(--px)*-4px)) rotate(0) scaleX(-1) }
  35%{ transform:translateY(calc(var(--px)*-4px)) rotate(0) scaleX(1) }
  40%, 45%{ transform:translateY(0) rotate(0) scaleX(1) }
  50%{ transform:translateY(calc(var(--px)*-4px)) rotate(0) scaleX(1) }
  50.01%{ transform:translateY(calc(var(--px)*-4px)) rotate(0) scaleX(-1) }
  60%, 65%{ transform:translateY(0) rotate(0) scaleX(-1) }
  70%{ transform:translateY(calc(var(--px)*-3px)) rotate(0) scaleX(-1) }
  70.01%{ transform:translateY(calc(var(--px)*-3px)) rotate(0) scaleX(1) }
  80%{ transform:translateY(0) rotate(0) scaleX(1) }
}
@keyframes svc-flop{
  0%{ transform:translateY(0) rotate(0) scaleX(1) }
  8%, 70%{ transform:translateY(calc(var(--px)*2px)) rotate(80deg) scaleX(1) }
  80%{ transform:translateY(calc(var(--px)*-3px)) rotate(0) scaleX(1) }
  90%, 100%{ transform:translateY(0) rotate(0) scaleX(1) }
}
@keyframes svc-shrug{
  0%, 100%{ transform:translateY(0) rotate(0) scaleX(1) }
  15%{ transform:translateY(calc(var(--px)*-2px)) rotate(0) scaleX(1) }
  30%, 55%{ transform:translateY(0) rotate(0) scaleX(1) }
  70%{ transform:translateY(calc(var(--px)*-2px)) rotate(-8deg) scaleX(1) }
  85%{ transform:translateY(0) rotate(0) scaleX(1) }
}
@keyframes svc-clap{
  0%, 100%{ transform:translateY(0) rotate(0) scaleX(1) }
  12%, 36%, 60%, 84%{ transform:translateY(calc(var(--px)*-3px)) rotate(0) scaleX(1) }
  24%, 48%, 72%{ transform:translateY(0) rotate(0) scaleX(1) }
}
@keyframes svc-trip{
  0%, 100%{ transform:translateY(0) rotate(0) scaleX(1) }
  12%, 70%{ transform:translateY(calc(var(--px)*2px)) rotate(80deg) scaleX(1) }
  85%{ transform:translateY(calc(var(--px)*-3px)) rotate(0) scaleX(1) }
}
/* Walking home facing left, then turning to face the next start. */
@keyframes svc-face{
  0%, 85%{ transform:translateY(0) rotate(0) scaleX(-1) }
  85.01%, 100%{ transform:translateY(0) rotate(0) scaleX(1) }
}
@keyframes svc-pop{ 0%{ transform:scale(0) } 60%{ transform:scale(1.4) } 100%{ transform:scale(1) } }
@keyframes svc-unpop{ from{ transform:scale(1) } to{ transform:scale(0) } }

/* Reduced motion: the lineup stands still with the crown on the winner. */
@media (prefers-reduced-motion: reduce){
  .svc-strip *{ animation:none !important }
  .svc-run.win .svc-crown{ transform:scale(1) }
}