/* --- BỐ CỤC KHÔNG GIAN BẮN NGANG --- */
.space-arena {
    height: 180px;
    background: linear-gradient(180deg, #0d1130 0%, #1a237e 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
}

.stars-bg {
    position: absolute;
    width: 200%; height: 100%;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0,0,0,0));
    background-repeat: repeat;
    animation: fly-stars-horizontal 8s linear infinite;
    z-index: 1;
}
@keyframes fly-stars-horizontal {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.spaceship {
    position: absolute;
    left: 5%;
    top: 50%;
    font-size: 3.5rem;
    z-index: 4;
    filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.5));
    animation: hover-ship 2s ease-in-out infinite alternate;
}
@keyframes hover-ship {
    0% { transform: translateY(-50%) rotate(45deg); }
    100% { transform: translateY(-60%) rotate(45deg); }
}

.asteroid {
    position: absolute;
    right: 5%;
    top: 50%;
    font-size: 3.5rem;
    z-index: 3;
    filter: drop-shadow(0 0 5px rgba(255,100,0,0.5));
    animation: float-asteroid 3s ease-in-out infinite alternate;
}
@keyframes float-asteroid {
    0% { transform: translateY(-60%) rotate(-10deg); }
    100% { transform: translateY(-40%) rotate(10deg); }
}

.laser-beam {
    position: absolute;
    height: 4px;
    background-color: #00e5ff;
    box-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    animation: shoot-laser 0.2s linear forwards;
}
@keyframes shoot-laser {
    0% { left: 20%; width: 10px; opacity: 1; }
    100% { left: 80%; width: 100px; opacity: 0; }
}

.explode {
    animation: boom 0.5s ease-out forwards;
}
@keyframes boom {
    0% { transform: translateY(-50%) scale(1); opacity: 1; filter: brightness(1); }
    50% { transform: translateY(-50%) scale(1.5); opacity: 1; filter: brightness(2); }
    100% { transform: translateY(-50%) scale(2); opacity: 0; }
}

.shake-error { animation: shake-ship 0.4s; }
@keyframes shake-ship {
    0% { transform: translateY(-50%) rotate(45deg) translateX(0); }
    25% { transform: translateY(-50%) rotate(45deg) translateX(-10px); }
    50% { transform: translateY(-50%) rotate(45deg) translateX(10px); }
    75% { transform: translateY(-50%) rotate(45deg) translateX(-10px); }
    100% { transform: translateY(-50%) rotate(45deg) translateX(0); }
}

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