/* --- BỐ CỤC NHÀ MÁY TÁI CHẾ --- */
.recycle-arena {
    height: 220px;
    background: linear-gradient(180deg, #e8f5e9 0%, #a5d6a7 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
    position: relative; 
    overflow: hidden;
}

/* Nền xưởng với các đường chéo an toàn */
.recycle-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.2),
        rgba(255,255,255,0.2) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 1;
}

/* --- BĂNG CHUYỀN --- */
.conveyor-belt {
    position: absolute;
    bottom: 20px;
    left: -10px; /* Bắt đầu từ sát lề trái */
    width: 80%;  /* Nới dài đâm thẳng vào trong lòng cỗ máy */
    height: 35px;
    background: #546e7a;
    border-top: 5px solid #37474f;
    border-radius: 0 15px 15px 0;
    z-index: 2;
    box-shadow: 0 8px 10px rgba(0,0,0,0.4);
}

.conveyor-surface {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Dùng repeating-linear-gradient kết hợp background-position để băng chạy siêu mượt */
    background: repeating-linear-gradient(90deg, #90a4ae 0px, #90a4ae 15px, #78909c 15px, #78909c 30px);
    animation: move-belt-smooth 1s linear infinite;
}

@keyframes move-belt-smooth {
    0% { background-position: 0 0; }
    100% { background-position: 30px 0; }
}

/* --- RÁC THẢI TRÊN BĂNG CHUYỀN --- */
.trash-item {
    position: absolute;
    bottom: 35px;
    left: 10%; 
    font-size: 3rem;
    z-index: 6; /* Nổi lên trên miệng máy để rơi vào trong */
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
}

/* --- HIỆU ỨNG RÁC CHẠY VÀO MÁY (Tự động thích ứng mọi màn hình) --- */
.move-to-machine {
    animation: recycle-responsive 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes recycle-responsive {
    0% { 
        left: 10%; 
        bottom: 35px;
        transform: scale(1) rotate(0deg); 
        opacity: 1; 
    }
    60% { 
        left: 65%; /* Trượt ngang trên băng chuyền đến sát miệng máy */
        bottom: 35px;
        transform: scale(1) rotate(45deg); 
        opacity: 1; 
    }
    80% { 
        left: 78%; /* Nảy bật lên không trung ngay trên miệng máy */
        bottom: 75px; 
        transform: scale(0.7) rotate(135deg); 
        opacity: 0.9; 
    }
    100% { 
        left: 78%; /* Rơi tọt xuống đáy máy, thu nhỏ và biến mất */
        bottom: 10px; 
        transform: scale(0) rotate(360deg); 
        opacity: 0; 
    }
}

/* --- CỖ MÁY TÁI CHẾ CÔNG NGHỆ CAO --- */
.recycle-machine {
    position: absolute;
    bottom: 20px;
    right: 2%;
    width: 120px; 
    height: 150px;
    background: linear-gradient(135deg, #e0e0e0 0%, #9e9e9e 100%);
    border: 5px solid #4caf50;
    border-radius: 15px 15px 10px 10px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: -8px 5px 15px rgba(0,0,0,0.4), inset 5px 5px 10px rgba(255,255,255,0.7);
}

/* Nắp vòm (Mái) của cỗ máy */
.recycle-machine::before {
    content: '';
    position: absolute;
    top: -15px;
    width: 140px;
    height: 25px;
    background: #4caf50;
    border-radius: 20px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3), inset 0 5px 5px rgba(255,255,255,0.4);
    z-index: 5;
}

/* Miệng máy hút rác */
.machine-mouth {
    width: 85px; 
    height: 50px;
    background: radial-gradient(circle at top, #424242 0%, #000000 100%);
    border: 3px solid #81c784;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: inset 0 15px 20px rgba(0,0,0,1);
    position: relative;
    z-index: 5;
}

/* Huy hiệu đèn LED ở bụng máy */
.machine-badge {
    margin-top: auto;
    margin-bottom: 15px;
    width: 45px;
    height: 45px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    animation: pulse-light 1.5s infinite alternate;
}

@keyframes pulse-light {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
}

/* --- NHÂN VẬT QUẢN ĐỐC --- */
.manager-char {
    position: absolute;
    bottom: 80px;
    left: 5%;
    font-size: 4rem;
    z-index: 5;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.4));
}

/* Nhảy mừng khi làm đúng */
.happy-jump {
    animation: build-jump 0.8s ease-out forwards !important;
}
@keyframes build-jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px) scale(1.1); }
    100% { transform: translateY(0); }
}

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

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