.chicken-board {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  background: #2b2f3a;
}
.chicken-board::after {
  /* Vignette so the road fades at the edges of the frame. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(11 17 29 / 0.55), transparent 12%, transparent 88%, rgb(11 17 29 / 0.55));
  pointer-events: none;
  z-index: 6;
}

.road {
  --offset: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--road-w);
  display: flex;
  transform: translateX(var(--offset));
  transition: transform 520ms var(--ease-out);
}
.road.no-transition, .chicken.no-transition { transition: none; }

.sidewalk {
  position: relative;
  flex: none;
  width: 132px;
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgb(0 0 0 / 0.18) 46px 48px),
    linear-gradient(90deg, #6b7086, #7c8198);
}
.sidewalk--start { box-shadow: inset -6px 0 0 #b8bccb; }
.sidewalk--finish {
  box-shadow: inset 6px 0 0 #b8bccb;
  background:
    repeating-conic-gradient(#f1f3fb 0 25%, #15171f 0 50%) 0 0 / 22px 22px;
}
.sidewalk__label {
  position: absolute;
  top: 18px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(11 17 29 / 0.7);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lane {
  position: relative;
  flex: none;
  width: 104px;
  background: #353a4a;
  overflow: hidden;
}
.lane:nth-child(odd) { background: #2f3442; }
.lane::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  width: 4px;
  background: repeating-linear-gradient(180deg, #e8e2c8 0 26px, transparent 26px 50px);
  opacity: 0.45;
}
.lane.is-crossed { background: #3a3f50; }

.lane__cover {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 76px;
  height: 76px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  z-index: 1;
}
.lane__cover > span { position: absolute; inset: 0; }
.lane__cover .sprite { width: 100%; height: 100%; }
.lane__cover strong {
  position: relative;
  color: #e8e2c8;
  font-size: 12.5px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.5);
  transition: color 200ms;
}
.lane.is-next .lane__cover strong { color: #fff; }
.lane.is-next .lane__cover { animation: cover-glow 1.2s ease-in-out infinite alternate; }
@keyframes cover-glow { to { filter: drop-shadow(0 0 10px rgb(255 197 61 / 0.55)); } }
.lane.is-crossed .sprite--cover circle:nth-of-type(1), .lane.is-current .sprite--cover circle:nth-of-type(1) { fill: #8a5d00; }
.lane.is-crossed .sprite--cover circle:nth-of-type(2), .lane.is-current .sprite--cover circle:nth-of-type(2) { fill: #ffc53d; }
.lane.is-crossed .sprite--cover circle:nth-of-type(3), .lane.is-current .sprite--cover circle:nth-of-type(3) { stroke: #e0a100; }
.lane.is-crossed .sprite--cover circle:nth-of-type(4), .lane.is-current .sprite--cover circle:nth-of-type(4) { stroke: #fff1c1; opacity: 0.6; }
.lane.is-crossed .lane__cover strong, .lane.is-current .lane__cover strong { color: #3a2600; text-shadow: 0 1px 0 rgb(255 255 255 / 0.35); }
.lane__cover.is-claimed { animation: cover-claim 460ms var(--ease-spring); }
@keyframes cover-claim { 0% { scale: 0.8; } 45% { scale: 1.14; } }

.lane__barrier {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 92px;
  translate: -50% -60px;
  opacity: 0;
  z-index: 3;
  transition: translate 320ms var(--ease-spring), opacity 200ms;
}
.lane__barrier .sprite { width: 100%; height: auto; }
.lane.is-crossed .lane__barrier { translate: -50% 0; opacity: 1; }

.car {
  --dur: 1600ms;
  position: absolute;
  top: -20%;
  left: 50%;
  width: 52px;
  translate: -50% -50%;
  z-index: 2;
  animation: drive var(--dur) linear forwards;
}
.car .sprite { width: 100%; height: auto; }
.car--truck { width: 56px; }
/* Near miss: brakes hard, nose dips, then waits where it stopped. */
.car.is-brake { animation: brake 620ms cubic-bezier(0.15, 0.75, 0.3, 1) forwards; }
.car.is-brake .sprite { animation: nose-dip 620ms ease-out forwards; transform-origin: 50% 100%; }
@keyframes brake { from { top: -25%; } to { top: 24%; } }
@keyframes nose-dip { 0%, 55% { transform: none; } 75% { transform: scaleY(0.95) translateY(3px); } 100% { transform: none; } }

.skid {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 34px;
  height: 22%;
  translate: -50% 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(12 13 18 / 0.55) 8% 26%, transparent 26% 74%, rgb(12 13 18 / 0.55) 74% 92%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent, black 40%, black 80%, transparent);
  opacity: 0.6;
  z-index: 1;
  animation: fade-in 300ms ease-out backwards;
  pointer-events: none;
}
.lane.is-hit .skid { top: 30%; height: 30%; }
@keyframes drive { from { top: -20%; } to { top: 120%; } }
/* The car that hits the chicken reaches it halfway through its run. */
.car.is-hit { z-index: 5; animation-name: drive-hit; }
@keyframes drive-hit { 0% { top: -20%; } 50% { top: 50%; } 100% { top: 125%; } }

.chicken {
  --x: 66px;
  position: absolute;
  top: 58%;
  left: 0;
  width: 78px;
  translate: calc(var(--x) - 50%) -62%;
  z-index: 4;
  transition: translate 420ms var(--ease-out);
  pointer-events: none;
}
.chicken .sprite { width: 100%; height: auto; overflow: visible; }
.chicken.is-hopping .chicken__body { animation: chicken-hop 420ms var(--ease-out); }
.chicken.is-hopping .chicken__wing { animation: wing-flap 140ms ease-in-out 3; }
.chicken__wing { transform-box: fill-box; transform-origin: 100% 20%; }
@keyframes wing-flap { 50% { transform: rotate(38deg); } }
.chicken.is-startled .chicken__body { animation: chicken-startle 420ms var(--ease-out); }
@keyframes chicken-startle {
  0% { transform: none; }
  30% { transform: translateY(-12px) scale(1.08, 0.94); }
  60% { transform: translateY(0) scale(0.96, 1.04); }
}

/* Idle life: a blink every few seconds and a slow head bob while waiting. */
.chicken__eye { transform-box: fill-box; transform-origin: center; animation: chicken-blink 4.2s infinite; }
@keyframes chicken-blink { 0%, 94%, 100% { transform: none; } 97% { transform: scaleY(0.1); } }
.chicken__head { transform-box: fill-box; transform-origin: 30% 100%; }
.chicken:not(.is-hit):not(.is-hopping):not(.is-happy) .chicken__head { animation: chicken-idle 2.6s ease-in-out infinite; }
@keyframes chicken-idle { 0%, 60%, 100% { transform: none; } 75% { transform: rotate(9deg) translateY(1px); } 85% { transform: rotate(-3deg); } }

.chicken-ghost {
  --x: 66px;
  position: absolute;
  top: 58%;
  left: 0;
  width: 70px;
  translate: calc(var(--x) - 50%) -62%;
  z-index: 5;
  opacity: 0;
  filter: grayscale(1) brightness(1.7) drop-shadow(0 0 10px rgb(255 255 255 / 0.5));
  pointer-events: none;
  animation: ghost-rise 1.9s ease-out 150ms forwards;
}
.chicken-ghost .sprite { width: 100%; height: auto; overflow: visible; }
.chicken-ghost .chicken__shadow { display: none; }
@keyframes ghost-rise {
  0% { opacity: 0; transform: translateY(0); }
  18% { opacity: 0.75; }
  40% { transform: translate(-8px, -70px); }
  70% { transform: translate(8px, -130px); opacity: 0.45; }
  100% { transform: translate(0, -190px); opacity: 0; }
}
.chicken.is-hopping .chicken__shadow { animation: chicken-shadow 420ms var(--ease-out); }
@keyframes chicken-hop {
  0% { transform: translateY(0) scaleY(0.9); }
  45% { transform: translateY(-26px) scaleY(1.06); }
  85% { transform: translateY(0) scaleY(0.92); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes chicken-shadow { 45% { transform: scale(0.6); opacity: 0.15; } }
.chicken__body, .chicken__shadow { transform-box: fill-box; transform-origin: 50% 100%; }
.chicken.is-hit .chicken__body { animation: chicken-flat 380ms var(--ease-out) forwards; }
@keyframes chicken-flat {
  0% { transform: none; }
  30% { transform: translateY(-10px) rotate(-18deg) scale(1.08); }
  100% { transform: rotate(-8deg) scaleY(0.42) scaleX(1.3); }
}
.chicken.is-hit .chicken__shadow { opacity: 0.5; transform: scaleX(1.4); }
.lane.is-hit .sprite--cover circle:nth-of-type(2) { fill: #7a2433; }
.lane.is-hit .lane__cover strong { color: #ffc2cb; }
.lane.is-hit { background: #3d2a33; }
.chicken.is-happy .chicken__body { animation: chicken-happy 600ms var(--ease-in-out) 3; }
@keyframes chicken-happy { 50% { transform: translateY(-14px) rotate(-6deg); } }


@media (max-width: 600px) {
  .chicken-board { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .chicken__eye, .chicken__head, .chicken.is-hopping .chicken__wing, .chicken-ghost, .car.is-brake .sprite { animation: none !important; }
}