/* --- BỐ CỤC MÀN HÌNH ĐIỀU KHIỂN DRONE KHO BÃI --- */
.warehouse-arena {
    height: 220px;
    background: linear-gradient(180deg, #1c2833 0%, #34495e 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
    border: 6px solid #2c3e50;
    border-radius: 12px;
}

/* Các kệ hàng trong kho (Background) */
.shelves-bg {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 200%;
    height: 120px;
    background-image: 
        linear-gradient(90deg, transparent 45px, #7f8c8d 45px, #7f8c8d 55px, transparent 55px),
        linear-gradient(0deg, #95a5a6 10px, transparent 10px);
    background-size: 100px 40px;
    z-index: 1;
    animation: pan-shelves 10s linear infinite;
    opacity: 0.5;
}
@keyframes pan-shelves {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

/* Các hộp hàng trên kệ */
.boxes-bg {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 200%;
    font-size: 2rem;
    letter-spacing: 35px;
    white-space: nowrap;
    z-index: 2;
    animation: pan-shelves 10s linear infinite;
    opacity: 0.8;
}
.boxes-bg::before { content: '📦 📺 📦 💻 📦 🖨️ 📦 📺'; }

/* Drone Kiểm kho */
.drone-item {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    font-size: 5rem;
    z-index: 4;
    transition: all 0.3s ease;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.6));
}
.hovering {
    animation: drone-hover 1.5s infinite alternate ease-in-out;
}
@keyframes drone-hover {
    0% { top: 20px; transform: translateX(-50%) rotate(-2deg); }
    100% { top: 30px; transform: translateX(-50%) rotate(2deg); }
}

/* Tia Laser quét mã vạch từ Drone */
.scan-beam {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 90px;
    width: 60px;
    height: 120px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.8) 0%, rgba(0, 229, 255, 0) 100%);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
    z-index: 3;
    transform-origin: top center;
}
.scanning {
    animation: beam-sweep 2s infinite alternate ease-in-out;
}
@keyframes beam-sweep {
    0% { transform: translateX(-50%) skewX(-15deg); }
    100% { transform: translateX(-50%) skewX(15deg); }
}

/* Màu Laser khi Đúng/Sai */
.beam-success {
    background: linear-gradient(180deg, rgba(0, 230, 118, 0.9) 0%, rgba(0, 230, 118, 0) 100%);
    animation: none;
}
.beam-error {
    background: linear-gradient(180deg, rgba(255, 23, 68, 0.9) 0%, rgba(255, 23, 68, 0) 100%);
    animation: alert-blink 0.2s infinite;
}
@keyframes alert-blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Lỗi Drone rung lắc */
.shake-error { animation: drone-fail 0.4s infinite; filter: sepia(1) hue-rotate(-50deg) saturate(3) drop-shadow(0 5px 5px red); }
@keyframes drone-fail {
    0% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(calc(-50% - 10px)) rotate(-10deg); }
    50% { transform: translateX(calc(-50% + 10px)) rotate(10deg); }
    75% { transform: translateX(calc(-50% - 10px)) rotate(-10deg); }
    100% { transform: translateX(-50%) rotate(0); }
}

/* Bay đi khi xong game */
.fly-away {
    animation: fly-out 2s ease-in forwards;
}
@keyframes fly-out {
    0% { top: 20px; transform: translateX(-50%) scale(1); }
    100% { top: -100px; transform: translateX(-50%) scale(0.2); opacity: 0; }
}

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