/* /home/amil8ka/bot/web_app/css/pages/games.css */

/* Заголовок страницы игр */
#games-page .page-header h1 {
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.games-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    padding: 20px;
}

.game-card {
    /* Мягкий приглушенный градиентный фон */
    background: linear-gradient(135deg,
                #14532d 0%,      /* Темно-зеленый */
                #166534 35%,     /* Лесной зеленый */
                #15803d 65%,     /* Приглушенный изумрудный */
                #14532d 100%);   /* Темно-зеленый */
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 25px 15px;
    /* Мягкая светящаяся рамка */
    border: 2px solid rgba(52, 211, 153, 0.3);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25),
                0 2px 8px rgba(52, 211, 153, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 200px;
    position: relative;
}

/* Светящийся эффект при наведении */
.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg,
                #34d399,  /* Изумрудный */
                #10b981,  /* Зеленый */
                #059669,  /* Темно-зеленый */
                #047857); /* Глубокий зеленый */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card:hover::before {
    opacity: 0.5;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35),
                0 4px 15px rgba(52, 211, 153, 0.25),
                0 0 40px rgba(34, 197, 94, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(52, 211, 153, 0.5);
    /* Немного усиливаем яркость при наведении */
    filter: brightness(1.05) saturate(1.05);
}

/* Активное состояние */
.game-card:active {
    transform: translateY(-4px) scale(0.98);
}

.game-card-image {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15),
                inset 0 2px 5px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.game-card:hover .game-card-image {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 30px rgba(52, 211, 153, 0.4),
                0 4px 15px rgba(16, 185, 129, 0.3),
                inset 0 2px 8px rgba(255, 255, 255, 0.3);
}

.game-card-image img,
.game-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.game-card-text {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.game-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    color: #ffffff;
}

.game-card-description {
    font-size: 0.85rem;
    font-weight: 400;
    text-align: center;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
}

/* Бейджи для игр */
.game-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 14px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 10;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35),
                0 1px 4px rgba(0, 0, 0, 0.2);
    animation: badge-pulse 2s ease-in-out infinite;
}

.game-badge-hot {
    background: linear-gradient(135deg, #f87171, #ef4444, #dc2626);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.game-badge-new {
    background: linear-gradient(135deg, #4ade80, #22c55e, #16a34a);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Пульсирующая анимация для популярных игр */
@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25),
                    0 2px 8px rgba(52, 211, 153, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4),
                    0 3px 15px rgba(52, 211, 153, 0.3),
                    0 0 35px rgba(34, 197, 94, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

.game-card:nth-child(1) {
    animation: pulse-green 3s ease-in-out infinite;
}

/* Стиль для emoji в карточках игр */
.game-card .case-card-emoji {
    font-size: 50px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.95;
}

.game-card:hover .case-card-emoji {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 5px 15px rgba(52, 211, 153, 0.4));
    opacity: 1;
}

/* Специальные эффекты для ракеты */
.game-card[data-game-id="crash"] .case-card-emoji {
    filter: drop-shadow(0 3px 8px rgba(239, 68, 68, 0.3))
            drop-shadow(0 0 10px rgba(239, 68, 68, 0.2));
}

.game-card[data-game-id="crash"]:hover .case-card-emoji {
    transform: scale(1.2) translateY(-5px) rotate(5deg);
    filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.5))
            drop-shadow(0 0 20px rgba(239, 68, 68, 0.4));
    animation: rocket-pulse 1s ease-in-out infinite;
}

/* Специальные эффекты для мины */
.game-card[data-game-id="minesweeper"] .case-card-emoji {
    filter: drop-shadow(0 3px 8px rgba(234, 179, 8, 0.3))
            drop-shadow(0 0 10px rgba(234, 179, 8, 0.2));
}

.game-card[data-game-id="minesweeper"]:hover .case-card-emoji {
    transform: scale(1.15) rotate(-10deg);
    filter: drop-shadow(0 5px 15px rgba(234, 179, 8, 0.5))
            drop-shadow(0 0 20px rgba(234, 179, 8, 0.4));
    animation: mine-shake 0.5s ease-in-out infinite;
}

/* Анимация для ракеты */
@keyframes rocket-pulse {
    0%, 100% {
        filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.5))
                drop-shadow(0 0 20px rgba(239, 68, 68, 0.4));
    }
    50% {
        filter: drop-shadow(0 8px 25px rgba(239, 68, 68, 0.7))
                drop-shadow(0 0 30px rgba(239, 68, 68, 0.6));
    }
}

/* Анимация для мины */
@keyframes mine-shake {
    0%, 100% {
        transform: scale(1.15) rotate(-10deg) translateX(0);
    }
    25% {
        transform: scale(1.15) rotate(-12deg) translateX(-2px);
    }
    75% {
        transform: scale(1.15) rotate(-8deg) translateX(2px);
    }
}

/* Отдельный стиль для Lottie анимаций */
.game-card-image > div {
    border-radius: 50%;
    overflow: hidden;
}

/* Специальные эффекты для Апгрейда */
.game-card[data-game-id="upgrade"] .game-card-image {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(168, 85, 247, 0.1));
}

.game-card[data-game-id="upgrade"]:hover .game-card-image {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.25), rgba(168, 85, 247, 0.15));
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.4);
}

.game-card[data-game-id="upgrade"]:hover .game-card-image img,
.game-card[data-game-id="upgrade"]:hover .game-card-img {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 4px 15px rgba(147, 51, 234, 0.5));
}

/* Специальные эффекты для Дуэли */
.game-card[data-game-id="dice"] .game-card-image {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.1));
}

.game-card[data-game-id="dice"]:hover .game-card-image {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(96, 165, 250, 0.15));
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.game-card[data-game-id="dice"]:hover .game-card-image > div {
    transform: scale(1.1);
}

/* Эффект свечения для активной карточки */
.game-card:active {
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4),
                0 0 30px rgba(52, 211, 153, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    filter: brightness(1.05) saturate(1.05);
}

/* Добавляем мягкое внутреннее свечение для всех карточек */
.game-card::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%,
                rgba(255, 255, 255, 0.08) 0%,
                transparent 60%);
    pointer-events: none;
    opacity: 0.4;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 480px) {
    .games-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .game-card {
        min-height: 180px;
        padding: 20px 10px;
    }

    .game-card-image {
        width: 80px;
        height: 80px;
    }

    .game-card .case-card-emoji {
        font-size: 40px !important;
    }

    .game-card-title {
        font-size: 1rem;
    }
}