/* --- BỐ CỤC PHÒNG ĐIỀU HÀNH MÁY CHỦ --- */
.datacenter-arena {
    height: 220px;
    background: radial-gradient(circle at 50% 50%, #112233 0%, #000000 100%);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
    position: relative;
    overflow: hidden;
    border: 5px solid #00e676;
    border-radius: 12px;
}

/* Lưới tọa độ Data (Matrix style) */
.data-grid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 230, 118, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 230, 118, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
    animation: grid-scroll 10s linear infinite;
}
@keyframes grid-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

/* Tủ Máy Chủ (Server Rack) */
.server-rack {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    width: 140px;
    height: 160px;
    background: #212121;
    border: 3px solid #424242;
    border-radius: 5px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}

/* Các khay Server */
.server-blade {
    width: 100%;
    height: 20px;
    background: #424242;
    border: 1px solid #616161;
    border-radius: 2px;
    position: relative;
}

/* Đèn tín hiệu trên Server */
.server-lights {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00e676;
    box-shadow: 0 0 10px #00e676;
}

/* Đèn nhấp nháy lúc chờ xử lý */
.processing {
    animation: blink-process 0.5s infinite alternate;
}
@keyframes blink-process {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
}

/* Đèn Xanh khi trả lời đúng */
.access-granted {
    background-color: #00e5ff;
    box-shadow: 0 0 20px 5px #00e5ff;
    animation: none;
}

/* Đèn Đỏ khi sai */
.access-denied {
    background-color: #ff1744;
    box-shadow: 0 0 20px 5px #ff1744;
    animation: alert-blink 0.2s infinite;
}
@keyframes alert-blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Lỗi nhiễu màn hình khi trả lời sai (Glitch) */
.glitch-error {
    animation: screen-shake 0.3s infinite;
    filter: sepia(1) hue-rotate(-50deg) saturate(5) invert(0.1);
}
@keyframes screen-shake {
    0% { transform: translate(0) scale(1); }
    25% { transform: translate(-3px, 3px) scale(1.02); }
    50% { transform: translate(3px, -3px) scale(0.98); }
    75% { transform: translate(-3px, -3px) scale(1.02); }
    100% { transform: translate(0) scale(1); }
}

/* Chiến thắng: Server phát sáng toàn bộ */
.system-secure {
    background-color: #76ff03;
    box-shadow: 0 0 30px 10px #76ff03;
    height: 12px;
    width: 12px;
    animation: none;
}

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