/* ==========================================================================
   statuses-page.css
   Стили для новой страницы /statuses. Подключается только там —
   на остальные страницы не влияет.
   Цвета статусов взяты из main.css (.detected/.undetected/.useatownrisk/
   .onupdate), чтобы не заводить отдельную цветовую схему для одного и
   того же смысла в разных местах сайта.
   ========================================================================== */

:root {
    --st-detected: #b50e35;
    --st-undetected: #48af48;
    --st-risk: #d8a80b;
    --st-frozen: #048bc7;
    --st-purple: #a029d9;
}

#statuses {
    position: relative;
    padding-top: 150px;
    padding-bottom: 100px;
    overflow: hidden;
}

/* декоративная геометрия справа — тихий фон, не мешает контенту */
#statuses .deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background:
        linear-gradient(135deg, transparent 40%, rgba(4, 139, 199, .12) 41%, transparent 42%),
        linear-gradient(115deg, transparent 55%, rgba(160, 41, 217, .14) 56%, transparent 60%),
        linear-gradient(150deg, transparent 70%, rgba(4, 139, 199, .1) 71%, transparent 74%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

#statuses .container {
    position: relative;
    z-index: 1;
}

#statuses .-navigation-links {
    margin-bottom: 40px;
    color: rgba(255, 255, 255, .4);
}

#statuses .-navigation-links .fa-light.fa-angle-right {
    margin: 0 10px;
}

#statuses .-navigation-links .fa-light.fa-house-heart {
    margin-right: 5px;
}

#statuses .-navigation-links a.active {
    color: #fff;
}

#statuses .empty {
    color: rgba(255, 255, 255, .4);
    padding: 40px 0;
}

#statuses .statuses-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

#statuses .status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(20% - 12px);
    min-width: 220px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
    background-color: #17181c;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    transition: .2s all;
}

#statuses .status-card:hover {
    border-color: rgba(255, 255, 255, .16);
    transform: translateY(-2px);
    color: inherit !important;
}

#statuses .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    font-size: 15px;
    background: rgba(255, 255, 255, .05);
}

#statuses .status-game {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

#statuses .status-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* цвета по статусу — иконка и подпись */
#statuses .status-card.detected .status-icon,
#statuses .status-card.detected .status-label {
    color: var(--st-detected);
}

#statuses .status-card.undetected .status-icon,
#statuses .status-card.undetected .status-label {
    color: var(--st-undetected);
}

#statuses .status-card.risk .status-icon,
#statuses .status-card.risk .status-label {
    color: var(--st-risk);
}

#statuses .status-card.frozen .status-icon,
#statuses .status-card.frozen .status-label {
    color: var(--st-frozen);
}

@media (max-width: 1200px) {
    #statuses .status-card {
        width: calc(25% - 11px);
    }
}

@media (max-width: 900px) {
    #statuses .status-card {
        width: calc(33.333% - 10px);
    }
}

@media (max-width: 640px) {
    #statuses .status-card {
        width: calc(50% - 7px);
    }

    #statuses .deco {
        display: none;
    }
}