/* --- BỐ CỤC ĐƯỜNG ĐUA RỪNG XANH --- */
.racing-arena {
    height: 220px;
    background: linear-gradient(180deg, #81c784 0%, #388e3c 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
    position: relative; 
    overflow: hidden;
}

/* Nền cây rừng chuyển động */
.jungle-track-bg {
    position: absolute;
    top: 0; left: 0;
    width: 200%; height: 60%;
    background-image: 
        radial-gradient(circle at 30px 40px, rgba(27, 94, 32, 0.5) 20px, transparent 21px),
        radial-gradient(circle at 90px 20px, rgba(27, 94, 32, 0.4) 30px, transparent 31px);
    background-repeat: repeat;
    animation: pan-jungle 4s linear infinite;
    z-index: 1;
}

@keyframes pan-jungle {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Mặt đường chạy đua */
.racing-road {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 40%;
    background: #5d4037; /* Màu đất */
    border-top: 6px solid #3e2723;
    z-index: 2;
}
/* Các vạch kẻ đường chuyển động */
.racing-road::after {
    content: '';
    position: absolute;
    top: 40%; left: 0;
    width: 200%; height: 4px;
    background: repeating-linear-gradient(90deg, #ffd54f, #ffd54f 20px, transparent 20px, transparent 40px);
    animation: pan-road 1s linear infinite;
}
@keyframes pan-road {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

/* Xe Jeep - Đã lật ngược chiều (scaleX) */
.jeep-char {
    position: absolute;
    bottom: 10px;
    left: 20%;
    font-size: 4rem;
    z-index: 5;
    /* Đổi chiều bóng đổ để hợp lý với hướng xe mới */
    filter: drop-shadow(-3px 5px 4px rgba(0,0,0,0.5)); 
    transform: scaleX(-1); /* Lật ngược đầu xe */
    animation: bounce-car 0.5s ease-in-out infinite alternate;
}

/* Cập nhật nhún nảy (Giữ nguyên scaleX) */
@keyframes bounce-car {
    0% { transform: scaleX(-1) translateY(0); }
    100% { transform: scaleX(-1) translateY(-4px); }
}

/* Hiệu ứng xe vượt chướng ngại vật (Giữ nguyên scaleX) */
.drive-forward {
    animation: drive-dash 1s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
@keyframes drive-dash {
    0% { left: 20%; transform: scaleX(-1); }
    50% { left: 70%; transform: scaleX(-1) rotate(-10deg) translateY(-20px); }
    100% { left: 20%; transform: scaleX(-1); }
}

/* Rung lắc khi sai (Giữ nguyên scaleX) */
.shake-error { animation: shake-char 0.4s !important; }
@keyframes shake-char {
    0% { transform: scaleX(-1) translateX(0); }
    25% { transform: scaleX(-1) translateX(15px) rotate(-5deg); }
    50% { transform: scaleX(-1) translateX(-15px) rotate(5deg); }
    75% { transform: scaleX(-1) translateX(15px) rotate(-5deg); }
    100% { transform: scaleX(-1) translateX(0); }
}

/* Chướng ngại vật (Đá) */
.rock-obstacle {
    position: absolute;
    bottom: 10px;
    right: 30%;
    font-size: 3rem;
    z-index: 4;
    filter: drop-shadow(0 4px 2px rgba(0,0,0,0.5));
}

/* Hiệu ứng xe vượt chướng ngại vật */
.drive-forward {
    animation: drive-dash 1s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
@keyframes drive-dash {
    0% { left: 20%; }
    50% { left: 70%; transform: rotate(-10deg) translateY(-20px); }
    100% { left: 20%; }
}

/* Hiệu ứng đá văng đi */
.rock-smash {
    animation: fly-rock 0.5s ease-out forwards;
}
@keyframes fly-rock {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(100px, -100px) rotate(180deg); opacity: 0; }
}

/* Rung lắc khi sai */
.shake-error { animation: shake-char 0.4s !important; }
@keyframes shake-char {
    0% { transform: translateX(0); }
    25% { transform: translateX(-15px) rotate(-5deg); }
    50% { transform: translateX(15px) rotate(5deg); }
    75% { transform: translateX(-15px) rotate(-5deg); }
    100% { transform: translateX(0); }
}

.min-h-75 { min-height: 85px; }