/* =========================================================
   BLACK SQUAD - INDIVIDUAL GAME DETAIL PAGES
   Loaded after style.css by files inside /games/
   ========================================================= */

/* =========================================================
   1. GAME DETAIL HERO
   ========================================================= */

.game-detail-hero {
    padding: 8rem 0 3.5rem;

    border-bottom: 1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            rgba(5, 7, 8, 0.72),
            rgba(5, 7, 8, 0.98)
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(0, 229, 229, 0.08),
            transparent 26rem
        );
}

.game-detail-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    font-weight: 900;
    text-transform: uppercase;
}

.game-detail-intro,
.game-intro {
    max-width: 820px;
    line-height: 1.7;
}


/* =========================================================
   2. HERO ARTWORK / OVERVIEW
   ========================================================= */

.game-hero-image-slot,
.game-version-image-slot,
.game-gallery-slot {
    margin: 0;
    overflow: hidden;

    background: rgba(19, 26, 29, 0.9);
    border: 1px solid var(--border);
    border-radius: 0.55rem;
}

.game-hero-image-slot {
    height: 600px;
}

.game-hero-image,
.game-version-image,
.game-gallery-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.game-overview,
.game-summary {
    height: 100%;
    padding: 1.6rem;

    border: 1px solid var(--border);
    border-radius: 0.55rem;
}

.game-overview {
    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.96),
            rgba(17, 24, 27, 0.96)
        );
}

.game-overview h2 {
    margin-bottom: 1rem;
}

.game-summary {
    background:
        radial-gradient(
            circle at top right,
            rgba(0, 229, 229, 0.08),
            transparent 17rem
        ),
        rgba(19, 26, 29, 0.94);
}

.game-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;
    padding: 0.85rem 0;

    border-bottom: 1px solid var(--border);
}

.game-info-row:last-child {
    border-bottom: 0;
}

.game-info-row span {
    color: var(--muted);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07rem;
    text-transform: uppercase;
}

.game-info-row strong {
    max-width: 58%;
    text-align: right;
}


/* =========================================================
   3. GAME FEATURES
   ========================================================= */

.game-feature-card {
    height: 100%;
    padding: 1.4rem;

    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.94),
            rgba(17, 24, 27, 0.94)
        );

    border: 1px solid var(--border);
    border-radius: 0.55rem;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.game-feature-card:hover,
.game-activity-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 229, 0.42);
}

.game-feature-number {
    margin-bottom: 0.8rem;

    color: var(--cyan);

    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08rem;
}

.game-feature-card h3 {
    font-size: 1.08rem;
}


/* =========================================================
   4. GAME / SERIES OVERVIEW CARDS
   ========================================================= */

.game-generation-card {
    height: 330px;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.96),
            rgba(17, 24, 27, 0.96)
        );

    border: 1px solid var(--border);
    border-radius: 0.6rem;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.game-generation-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 229, 0.32);
}

.game-generation-current {
    border-color: rgba(0, 229, 229, 0.42);
}

.game-generation-card > .row,
.game-generation-card > .row > [class*="col-"] {
    height: 100%;
}

.game-version-image-slot {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 0;
    border-radius: 0;
    border-right: 1px solid var(--border);
}

.game-generation-card .order-lg-2 .game-version-image-slot {
    border-right: 0;
    border-left: 1px solid var(--border);
}

.game-version-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.game-generation-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1.8rem;
}

.game-generation-content h3 {
    margin-bottom: 1rem;
    font-size: 1.55rem;
}


/* =========================================================
   5. GALLERY
   ========================================================= */

.game-gallery-intro {
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.game-gallery-slot {
    height: 230px;
}

.game-gallery-image {
    transition: transform 0.2s ease;
}

.game-gallery-slot:hover .game-gallery-image {
    transform: scale(1.03);
}


/* =========================================================
   6. COMMUNITY / ACTIVITY
   ========================================================= */

.game-activity-card {
    height: 100%;
    min-height: 225px;

    display: flex;
    flex-direction: column;

    padding: 1.4rem;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.game-activity-card p,
.game-flex-panel {
    flex: 1 1 auto;
}

.game-activity-card a {
    font-weight: 700;
    text-decoration: none;
}

.game-activity-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 1rem;

    background: rgba(0, 229, 229, 0.04);
    border: 1px solid rgba(0, 229, 229, 0.30);
    border-radius: 0.45rem;

    color: var(--cyan);
    font-weight: 900;
}

.game-lower-row > [class*="col-"] {
    min-width: 0;
}

.game-flex-panel {
    display: flex;
    flex-direction: column;
}

.game-flex-panel .badge {
    align-self: flex-start;
}


/* =========================================================
   7. GAME-SPECIFIC IMAGE CROPS
   Restored from the original per-game CSS.
   ========================================================= */

.ark-hero-image {
    object-position: center 45%;
}

.palworld-hero-image {
    object-position: center 90%;
}

.seven-days-hero-image {
    object-position: center 8%;
}

.v-rising-hero-image {
    object-position: center 90%;
}

.minecraft-hero-image {
    object-position: center 20%;
}

.wow-classic-image {
    object-position: center 45%;
}


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .game-hero-image-slot {
        height: 450px;
    }

    .game-generation-card {
        height: auto;
    }

    .game-generation-card > .row,
    .game-generation-card > .row > [class*="col-"] {
        height: auto;
    }

    .game-version-image-slot {
        height: 280px;

        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid var(--border);
    }

    .game-generation-card .order-lg-2 .game-version-image-slot {
        border-left: 0;
        border-bottom: 1px solid var(--border);
    }

    .game-version-image {
        position: static;
        height: 100%;
    }

    .game-generation-content {
        height: auto;
        padding: 1.5rem;
    }

    .seven-days-hero-image {
        object-position: center 30%;
    }

}


@media (max-width: 767.98px) {

    .game-detail-hero {
        padding-top: 6.5rem;
    }

    .game-hero-image-slot {
        height: 300px;
    }

    .game-version-image-slot {
        height: 240px;
    }

    .game-version-image {
        height: 100%;
    }

    .game-gallery-slot {
        height: 210px;
    }

    .game-overview,
    .game-summary,
    .game-generation-content,
    .game-activity-card {
        padding: 1.3rem;
    }

    .game-info-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .game-info-row strong {
        max-width: none;
        text-align: left;
    }

    .seven-days-hero-image {
        object-position: center 28%;
    }

}