/* --- BỐ CỤC KHÔNG GIAN BÃI CỎ --- */
.nature-arena {
    height: 180px;
    background: linear-gradient(180deg, #aed581 0%, #558b2f 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    position: relative; /* Dùng relative để tự do đặt vị trí trái/phải[cite: 2] */
}

/* Nền mây trôi (Thay cho nền sao) */
.nature-bg {
    position: absolute;
    width: 200%; height: 100%;
    background-image: radial-gradient(circle at 30px 40px, rgba(255,255,255,0.8) 10px, transparent 11px),
                      radial-gradient(circle at 100px 20px, rgba(255,255,255,0.6) 15px, transparent 16px);
    background-repeat: repeat;
    animation: fly-clouds 15s linear infinite;
    z-index: 1;
}
@keyframes fly-clouds {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Đoạn thẳng */
.line-segment {
    position: absolute;
    top: 75%;
    left: 10%;
    width: 80%;
    height: 6px;
    background-color: #3e2723; /* Màu đất/gỗ */
    border-radius: 3px;
    z-index: 2;
}

/* Vạch chia */
.tick-mark {
    position: absolute;
    top: 75%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 20px;
    background-color: #3e2723;
    z-index: 2;
}

.tick-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Nhân vật Cào Cào */
.grasshopper {
    position: absolute;
    top: 55%;
    transform: translateX(-50%) scaleX(-1); /* Thêm scaleX(-1) vào đây */
    font-size: 3.5rem;
    z-index: 4;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4)); /* Đổi chiều bóng đổ để tự nhiên hơn */
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), top 0.2s ease-out;
}

/* Hiệu ứng nhảy vòm cung */
.jumping {
    top: 35% !important;
}

/* Rung lắc khi trả lời sai (Giữ nguyên frame keyframes[cite: 2]) */
.shake-error { animation: shake-bug 0.4s; }
@keyframes shake-bug {
    0% { transform: translateX(-50%) scaleX(-1) rotate(0); }
    25% { transform: translateX(-50%) scaleX(-1) rotate(-15deg); }
    50% { transform: translateX(-50%) scaleX(-1) rotate(15deg); }
    75% { transform: translateX(-50%) scaleX(-1) rotate(-15deg); }
    100% { transform: translateX(-50%) scaleX(-1) rotate(0); }
}

.min-h-75 { min-height: 85px; }
.hl-num { color: #d32f2f; font-weight: 900; font-size: 1.2em; }