/* games/static/games/css/game_tags.css */

/* ===== CSS VARIABLES FOR TAGS ===== */
:root {
    --ps-color: linear-gradient(135deg, #0066CC, #003399);
    --ps-border: #0099FF;

    --xbox-color: linear-gradient(135deg, #107C10, #0E6B0E);
    --xbox-border: #0EA15F;

    --nintendo-color: linear-gradient(135deg, #FF0000, #CC0000);
    --nintendo-border: #FF6B6B;

    --pc-color: linear-gradient(135deg, #6C757D, #495057);
    --pc-border: #ADB5BD;

    --mobile-color: linear-gradient(135deg, #6F42C1, #8E44AD);
    --mobile-border: #9B59B6;

    --sega-color: linear-gradient(135deg, #FF8C00, #E67E22);
    --sega-border: #F39C12;

    --retro-color: linear-gradient(135deg, #8B4513, #A0522D);
    --retro-border: #D2691E;

    --vr-color: linear-gradient(135deg, #17A2B8, #138496);
    --vr-border: #20C997;

    --cloud-color: linear-gradient(135deg, #20C997, #17A2B8);
    --cloud-border: #38D9A9;

    --arcade-color: linear-gradient(135deg, #DC3545, #C82333);
    --arcade-border: #E74C3C;

    --legacy-color: linear-gradient(135deg, #343A40, #212529);
    --legacy-border: #495057;

    --other-color: linear-gradient(135deg, #6C757D, #495057);
    --other-border: #ADB5BD;

    --main-game-color: linear-gradient(135deg, #28A745, #218838);
    --main-game-border: #34C759;

    --dlc-color: linear-gradient(135deg, #FFC107, #E0A800);
    --dlc-border: #FFD166;

    --bundle-color: linear-gradient(135deg, #6F42C1, #59369C);
    --bundle-border: #8A63D2;

    --expansion-color: linear-gradient(135deg, #17A2B8, #138496);
    --expansion-border: #20C997;

    --mod-color: linear-gradient(135deg, #20C997, #17A2B8);
    --mod-border: #38D9A9;

    --episode-color: linear-gradient(135deg, #FD7E14, #E8590C);
    --episode-border: #FF922B;

    --season-color: linear-gradient(135deg, #7950F2, #6741D9);
    --season-border: #9775FA;

    --remake-color: linear-gradient(135deg, #E83E8C, #D63384);
    --remake-border: #F06595;

    --remaster-color: linear-gradient(135deg, #FF6B35, #FF8C00);
    --remaster-border: #FFA500;

    --expanded-color: linear-gradient(135deg, #339AF0, #228BE6);
    --expanded-border: #4DABF7;

    --port-color: linear-gradient(135deg, #868E96, #495057);
    --port-border: #ADB5BD;

    --fork-color: linear-gradient(135deg, #DC3545, #C82333);
    --fork-border: #E74C3C;

    --pack-color: linear-gradient(135deg, #F59F00, #E67700);
    --pack-border: #FFD43B;

    --update-color: linear-gradient(135deg, #0CA678, #099268);
    --update-border: #12B886;

    --transition-speed: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== PLATFORM BADGES ===== */
.platform-badge {
    display: inline-block;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all var(--transition-speed);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    backdrop-filter: blur(10px);
    border: 1px solid;
    border-radius: 3px;
    font-size: 10px;
    padding: 2px 5px;
    max-width: 60px;
}

.platform-badge:hover {
    transform: translateY(-1px) scale(1.05);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Цвета для платформ */
.platform-ps {
    background: var(--ps-color) !important;
    color: white !important;
    border-color: var(--ps-border) !important;
}

.platform-xbox {
    background: var(--xbox-color) !important;
    color: white !important;
    border-color: var(--xbox-border) !important;
}

.platform-nintendo {
    background: var(--nintendo-color) !important;
    color: white !important;
    border-color: var(--nintendo-border) !important;
}

.platform-pc {
    background: var(--pc-color) !important;
    color: white !important;
    border-color: var(--pc-border) !important;
}

.platform-mobile {
    background: var(--mobile-color) !important;
    color: white !important;
    border-color: var(--mobile-border) !important;
}

.platform-sega {
    background: var(--sega-color) !important;
    color: white !important;
    border-color: var(--sega-border) !important;
}

.platform-retro {
    background: var(--retro-color) !important;
    color: white !important;
    border-color: var(--retro-border) !important;
}

.platform-vr {
    background: var(--vr-color) !important;
    color: white !important;
    border-color: var(--vr-border) !important;
}

.platform-cloud {
    background: var(--cloud-color) !important;
    color: white !important;
    border-color: var(--cloud-border) !important;
}

.platform-arcade {
    background: var(--arcade-color) !important;
    color: white !important;
    border-color: var(--arcade-border) !important;
}

.platform-legacy {
    background: var(--legacy-color) !important;
    color: white !important;
    border-color: var(--legacy-border) !important;
}

.platform-other {
    background: var(--other-color) !important;
    color: white !important;
    border-color: var(--other-border) !important;
}

/* Контейнер для платформ */
.platforms-container {
    position: relative;
    z-index: 5;
}

.platforms-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.platforms-overlay .platform-badge {
    pointer-events: auto;
}

/* ===== GAME TYPE BADGES ===== */
.game-type-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-speed);
    cursor: pointer;
    opacity: 0.9;
    backdrop-filter: blur(10px);
}

.game-type-badge:hover {
    transform: translateY(-1px) scale(1.05);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

/* Цвета для типов игр */
.type-main {
    background: var(--main-game-color) !important;
    color: white !important;
    border-color: var(--main-game-border) !important;
}

.type-dlc {
    background: var(--dlc-color) !important;
    color: #212529 !important;
    border-color: var(--dlc-border) !important;
}

.type-bundle {
    background: var(--bundle-color) !important;
    color: white !important;
    border-color: var(--bundle-border) !important;
}

.type-expansion {
    background: var(--expansion-color) !important;
    color: white !important;
    border-color: var(--expansion-border) !important;
}

.type-mod {
    background: var(--mod-color) !important;
    color: white !important;
    border-color: var(--mod-border) !important;
}

.type-episode {
    background: var(--episode-color) !important;
    color: white !important;
    border-color: var(--episode-border) !important;
}

.type-season {
    background: var(--season-color) !important;
    color: white !important;
    border-color: var(--season-border) !important;
}

.type-remake {
    background: var(--remake-color) !important;
    color: white !important;
    border-color: var(--remake-border) !important;
}

.type-remaster {
    background: var(--remaster-color) !important;
    color: white !important;
    border-color: var(--remaster-border) !important;
}

.type-expanded {
    background: var(--expanded-color) !important;
    color: white !important;
    border-color: var(--expanded-border) !important;
}

.type-port {
    background: var(--port-color) !important;
    color: white !important;
    border-color: var(--port-border) !important;
}

.type-fork {
    background: var(--fork-color) !important;
    color: white !important;
    border-color: var(--fork-border) !important;
}

.type-pack {
    background: var(--pack-color) !important;
    color: white !important;
    border-color: var(--pack-border) !important;
}

.type-update {
    background: var(--update-color) !important;
    color: white !important;
    border-color: var(--update-border) !important;
}

.type-other {
    background: var(--other-color) !important;
    color: white !important;
    border-color: var(--other-border) !important;
}

/* ===== RATING STARS ===== */
.rating-svg, .similarity-svg {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.rating-svg:hover, .similarity-svg:hover {
    transform: scale(1.1);
}

.no-rating-container {
    cursor: help;
}

.no-rating-container:hover {
    opacity: 0.8;
}

/* ===== GENRES STYLES ===== */
.game-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.game-genres .badge {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    transition: all var(--transition-speed);
}

.game-genres .badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 1200px) {
    .platform-badge {
        font-size: 9px;
        max-width: 55px;
        padding: 1px 4px;
    }

    .game-type-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 768px) {
    .platform-badge {
        font-size: 8px;
        max-width: 50px;
        padding: 1px 3px;
    }

    .game-type-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
    }
}

@media (max-width: 576px) {
    .platform-badge {
        font-size: 7px;
        max-width: 45px;
        padding: 0.5px 2px;
    }

    .game-type-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.25rem;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.platform-badge, .game-type-badge {
    animation: fadeInUp 0.4s ease-out;
}