/* Eight generated game frames; the road moves right-to-left beneath the car. */
.j-site .v-rail > .v-rail-car {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    flex: 0 0 64px;
    min-height: 64px;
    padding: 10px 5px;
    border: 0;
    background: #fff;
    overflow: hidden;
}
.j-site .v-rail > .v-rail-car:hover,
.j-site .v-rail > .v-rail-car:focus-visible { background: #fff; }
.j-site .v-rail > .v-rail-car:focus-visible { outline: 2px solid #204be0; outline-offset: -4px; }
.v-car-scene { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; }
.v-car-sprite {
    position: absolute;
    inset: 0;
    background: url('./rail-car-sprite-v1.webp') 0 0 / 800% 100% no-repeat;
    animation: rail-car-wheels .8s steps(8, end) infinite, rail-car-suspension .8s ease-in-out infinite;
    animation-play-state: paused;
}
.v-car-road {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 0;
    height: 4px;
    border-top: 1px solid #d7e2f4;
    background: repeating-linear-gradient(90deg, #a6bae4 0 7px, transparent 7px 19px) 0 2px / 19px 1px repeat-x;
    animation: rail-car-road .65s linear infinite;
    animation-play-state: paused;
}
.v-rail-car[data-running="true"] :is(.v-car-sprite, .v-car-road) { animation-play-state: running; }
.v-car-playback {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 12px;
    height: 12px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: #eef3fc;
    color: #375580;
    opacity: .55;
    transition: opacity .2s ease;
}
.v-car-playback::before { content: ''; width: 5px; height: 5px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.v-rail-car[data-running="false"] .v-car-playback::before { width: 0; height: 0; border: 3px solid transparent; border-left: 4px solid currentColor; border-right: 0; margin-left: 1px; }
.v-rail-car:is(:hover, :focus-visible) .v-car-playback { opacity: 1; }
@keyframes rail-car-wheels { to { background-position: 114.285714% 0; } }
@keyframes rail-car-suspension { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-.5px); } }
@keyframes rail-car-road { to { background-position: -19px 2px; } }
@media (prefers-reduced-motion: reduce) {
    .v-car-sprite, .v-car-road { animation: none; }
    .v-car-playback { display: none; }
    .j-site .v-rail > .v-rail-car { cursor: default; }
}
@media (min-width: 1025px) and (max-height: 600px) {
    .j-site .v-rail { top: auto; bottom: 12px; transform: none; }
    .j-site .v-rail > .v-rail-car { flex-basis: 50px; min-height: 50px; padding-block: 4px; }
    .j-site .v-rail > :is(a, button):not(.v-rail-car), .j-site .v-rail #chat-launch { min-height: 60px; padding-block: 8px; gap: 5px; }
    .j-site .v-rail > button:last-child { min-height: 36px; }
}
@media (min-width: 1025px) and (max-height: 430px) {
    .j-site .v-rail > .v-rail-car { display: none; }
}