/* --- BỐ CỤC LÀNG NINJA BÍ ẨN --- */
.ninja-arena {
    height: 180px;
    background: radial-gradient(circle at top right, #1a237e 0%, #000000 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
    border: 4px solid #388e3c;
    border-radius: 10px;
}

/* Mặt trăng mờ ảo */
.moon-bg {
    position: absolute;
    right: 15%; top: 10%;
    font-size: 3rem;
    filter: drop-shadow(0 0 15px #e0e0e0);
    z-index: 1;
}

/* Lá tre bay trong gió */
.bamboo-leaves {
    position: absolute;
    width: 100%; height: 100%;
    z-index: 2;
    background-image: radial-gradient(circle, rgba(76, 175, 80, 0.2) 2px, transparent 2px);
    background-size: 30px 40px;
    animation: wind-blow 10s linear infinite;
    opacity: 0.3;
}
@keyframes wind-blow {
    0% { background-position: 0 0; }
    100% { background-position: 100px 200px; }
}

/* Bia đỡ (Mục tiêu) ở giữa */
.target-item {
    position: absolute;
    left: 45%;
    top: 30%;
    font-size: 4rem;
    z-index: 3;
    transition: all 0.3s ease;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.6));
}

/* Hiệu ứng bia vỡ */
.target-break {
    animation: blast 0.5s ease-out forwards;
}
@keyframes blast {
    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
    50% { transform: scale(1.5); opacity: 1; filter: brightness(2); }
    100% { transform: scale(1.2); opacity: 0; }
}

/* Phi tiêu (Góc trái) */
.shuriken-item {
    position: absolute;
    left: 10%;
    top: 40%;
    font-size: 2.5rem;
    z-index: 4;
    filter: drop-shadow(0 0 5px #00e5ff);
}

/* Ném trúng */
.throw-anim {
    animation: shuriken-fly 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes shuriken-fly {
    0% { left: 10%; transform: rotate(0deg); }
    100% { left: 45%; transform: rotate(720deg); } /* Xoay tít mù */
}

/* Ném trượt rớt xuống đất */
.throw-miss {
    animation: shuriken-miss 0.8s ease-in forwards;
}
@keyframes shuriken-miss {
    0% { left: 10%; top: 40%; transform: rotate(0deg); }
    50% { left: 30%; top: 30%; transform: rotate(360deg); }
    100% { left: 40%; top: 100%; transform: rotate(720deg); opacity: 0; }
}

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