/* UI Animations для UIManager */

@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutFade {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

/* Стили для панелей UI */
.ui-panel {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: white;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.ui-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .ui-panel {
        font-size: 11px;
        padding: 8px;
        min-width: unset;
        max-width: 90vw;
    }
    
    #unifiedGameUI {
        font-size: 11px;
    }
    
    /* Перепозиционируем панели для мобильных */
    #network-info-panel {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    #player-info-panel {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    #food-stats-panel,
    #game-stats-panel {
        display: none !important; /* Скрываем на мобильных */
    }
}

/* Стили для уведомлений */
.notification {
    min-width: 200px;
    max-width: 400px;
    word-wrap: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Стили для счета */
#score-display {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#score-value {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}