/* game.css */
.train-container, .train-preview {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5vmin;
    margin: 4vmin 0 8vmin 0; /* margin bottom for wheels */
    transition: transform 2s ease-in-out;
}
.train-container.moving-out {
    transform: translateX(120vw);
}
@media (prefers-reduced-motion: reduce) {
    .train-container { transition: opacity 1s ease-in-out; }
    .train-container.moving-out { transform: none; opacity: 0; }
}

.locomotive {
    width: 16vmin;
    height: 14vmin;
    background: #FF5A5F;
    border-radius: 0 4vmin 0 0;
    position: relative;
    border: 0.5vmin solid #333;
    box-sizing: border-box;
}
/* Smokestack */
.locomotive::after {
    content: '';
    position: absolute;
    top: -4vmin;
    right: 2vmin;
    width: 4vmin;
    height: 4vmin;
    background: #333;
    border-radius: 1vmin 1vmin 0 0;
}
/* Window */
.locomotive::before {
    content: '';
    position: absolute;
    top: 2vmin;
    right: 2vmin;
    width: 5vmin;
    height: 5vmin;
    background: #E0F7FA;
    border: 0.5vmin solid #333;
    border-radius: 1vmin;
}
.wheel-front, .wheel-back {
    position: absolute;
    bottom: -3vmin;
    width: 4vmin;
    height: 4vmin;
    background: #333;
    border-radius: 50%;
}
.wheel-front { right: 1vmin; }
.wheel-back { left: 1vmin; }

.car {
    width: 12vmin;
    height: 10vmin;
    background: #4A90E2;
    border-radius: 1vmin;
    position: relative;
    border: 0.5vmin solid #333;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.car:nth-child(odd) { background: #F8E71C; }
.car:nth-child(even) { background: #7ED321; }

/* Connection to the right item */
.car::after {
    content: '';
    position: absolute;
    right: -2vmin;
    bottom: 2vmin;
    width: 2vmin;
    height: 1vmin;
    background: #333;
}
.car .wheel-front, .car .wheel-back {
    bottom: -2.5vmin;
    width: 3vmin;
    height: 3vmin;
}

.car img {
    max-width: 8vmin;
    max-height: 8vmin;
    object-fit: contain;
    /* drop shadow for cutout */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
.car.missing-slot {
    background: #FFF8EC;
    border: 0.5vmin dashed #333;
}
.car.missing-slot img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Choices */
.choices {
    display: flex;
    justify-content: center;
    gap: 4vmin;
    margin-top: 4vmin;
}
.choice {
    width: 24vmin;
    height: 24vmin;
    background: white;
    border: 0.5vmin solid #333;
    border-radius: 2vmin;
    box-shadow: 0 1vmin 0 #ccc;
    cursor: pointer;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.choice:active:not(:disabled) {
    transform: translateY(0.5vmin);
    box-shadow: 0 0.5vmin 0 #ccc;
}
.choice:disabled {
    cursor: default;
    opacity: 0.6;
}
.choice img {
    max-width: 18vmin;
    max-height: 18vmin;
}
.choice.correct {
    border-color: #7ED321;
    background: #eaffd0;
    opacity: 1;
}
.choice.wrong {
    animation: shake 0.4s;
    border-color: #FF5A5F;
    background: #ffe0e1;
}
.choice.hinted {
    animation: pulse 1s infinite alternate;
    border-color: #F8E71C;
    background: #fffac8;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1vmin); }
    75% { transform: translateX(1vmin); }
}
@keyframes pulse {
    from { box-shadow: 0 0 0 0 rgba(248, 231, 28, 0.7); }
    to { box-shadow: 0 0 0 2vmin rgba(248, 231, 28, 0); }
}

/* รถไฟ 4 ตู้ (ABAB) มีที่เหลือ: ขยายตู้และภาพให้เด็กเห็นชัด */
.train-container[data-len="4"] .car { width: 15vmin; height: 13vmin; }
.train-container[data-len="4"] .car img { max-width: 11vmin; max-height: 11vmin; }
.train-container[data-len="4"] .locomotive { width: 18vmin; height: 16vmin; }