/* --- BỐ CỤC XƯỞNG ROBOT --- */
.factory-arena {
    height: 220px;
    background: linear-gradient(180deg, #9e9e9e 0%, #424242 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative; 
    overflow: hidden;
}

/* Băng chuyền chuyển động ngang */
.conveyor-belt {
    position: absolute;
    bottom: 0; left: 0;
    width: 200%; height: 25px;
    background: repeating-linear-gradient(
        -45deg,
        #212121,
        #212121 15px,
        #616161 15px,
        #616161 30px
    );
    animation: belt-move 3s linear infinite;
    border-top: 3px solid #000;
    z-index: 1;
}
@keyframes belt-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50px); }
}

/* Box chứa góc */
.angle-box {
    position: relative;
    width: 60px; height: 60px;
    z-index: 2;
}

/* Đỉnh của góc */
.vertex {
    position: absolute;
    bottom: 0; left: 0;
    width: 8px; height: 8px;
    background-color: #ff3d00; /* Điểm đỏ */
    border-radius: 50%;
    transform: translate(-4px, 4px);
    z-index: 3;
}

/* Cạnh nằm ngang (Trục X) */
.edge-base {
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 5px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
}

/* Cạnh xoay (Trục xoay) */
.edge-rot {
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 5px;
    background-color: #ffeb3b; /* Cạnh màu vàng dễ phân biệt */
    border-radius: 3px;
    transform-origin: left center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
    transition: transform 0.5s ease-out;
}

/* Nhân vật Robot */
.robot-char {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 3.5rem;
    z-index: 5;
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.6));
    animation: float-robot 2s ease-in-out infinite alternate;
}

@keyframes float-robot {
    0% { transform: translateY(-5px); }
    100% { transform: translateY(5px); }
}

/* Hiệu ứng Robot nhảy khi Đúng */
.happy-jump {
    animation: bot-jump 0.8s ease-out forwards !important;
}
@keyframes bot-jump {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
}

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

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