.train-score { position: absolute; z-index: 10; top: 10px; right: 12px; border-radius: 999px; padding: 8px 13px; background: rgba(255,255,255,.95); font-weight: 900; box-shadow: 0 4px 0 rgba(51,39,98,.15); }
.train-progress { position: absolute; z-index: 10; top: 18px; left: 14px; display: flex; gap: 6px; }
.train-progress i { width: 11px; height: 11px; border-radius: 50%; background: rgba(62,48,120,.18); }
.train-progress i.done { background: #ffbd31; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.train-scene { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border: 7px solid #fff; border-radius: 32px; background: #8edcff url("assets/estacao-da-ceci.png") center / 100% 100% no-repeat; box-shadow: 0 10px 26px rgba(42,64,106,.2); transform-origin: center bottom; }
.train-seats { position: absolute; z-index: 3; left: 39%; right: 5%; top: 38%; height: 27%; display: grid; grid-template-columns: repeat(5,1fr); gap: 1.8%; align-items: center; }
.train-seat { display: grid; width: 100%; aspect-ratio: .78; place-items: center; overflow: hidden; border-radius: 45% 45% 20% 20%; }
.train-seat.arriving { animation: passenger-arrive .62s cubic-bezier(.2,.8,.3,1); }
.train-animal { display: block; width: 100%; aspect-ratio: 1; background: url("assets/passageiros.png") var(--sprite-x) var(--sprite-y) / 300% 200% no-repeat; filter: drop-shadow(0 5px 4px rgba(46,31,66,.28)); pointer-events: none; }
.train-animal--seated { width: 118%; transform: translateY(14%); }
.train-passengers { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; padding: 11px 2px 5px; }
.train-passenger { min-width: 0; aspect-ratio: 1; border: 4px solid #fff; border-radius: 24px; padding: 2px; background: linear-gradient(#fff,#edfaff); cursor: pointer; box-shadow: 0 5px 0 rgba(48,46,106,.14); transition: opacity .2s, transform .2s; }
.train-passenger:active { transform: translateY(4px) scale(.95); box-shadow: 0 1px 0 rgba(48,46,106,.14); }
.train-passenger.boarded { opacity: .24; transform: scale(.82); }
.train-smoke { position: absolute; z-index: 4; left: 13%; top: 15%; }
.train-smoke i { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.82); animation: train-smoke 2s ease-out infinite; }
.train-smoke i:nth-child(2) { animation-delay: .65s; }
.train-smoke i:nth-child(3) { animation-delay: 1.3s; }
.train-scene.traveling { animation: train-travel 3.4s ease-in-out both; }
.train-scene.traveling .train-seat { animation: passenger-bob .5s ease-in-out infinite alternate; }
@keyframes passenger-arrive { from { transform: translateY(-100%) scale(.35) rotate(-12deg); opacity: 0; } 70% { transform: translateY(4%) scale(1.12) rotate(4deg); } }
@keyframes passenger-bob { to { transform: translateY(-5px) rotate(2deg); } }
@keyframes train-smoke { from { transform: translate(0,25px) scale(.35); opacity: .8; } to { transform: translate(35px,-52px) scale(1.5); opacity: 0; } }
@keyframes train-travel { 0%,100% { transform: translateX(0); } 12%,34%,56%,78% { transform: translateX(-7px) rotate(-.35deg); } 23%,45%,67%,89% { transform: translateX(7px) rotate(.35deg); } 50% { filter: saturate(1.25) brightness(1.08); } }
@media (max-width: 600px) { .train-passengers { grid-template-columns: repeat(3,1fr); } .train-passenger { aspect-ratio: 1.15; } }
@media (prefers-reduced-motion: reduce) { .train-smoke i, .train-scene.traveling, .train-seat { animation: none !important; } }