/* Styles specific to the Game Display page */

:root {
    /* Tokens from Game Display PC DSL (79:4975) */
    --gdp-paint-1-441: #FFFFFF; /* white */
    --gdp-paint-1-581-url: url('../../images/hero/game-display-banner-pokemon-pc.jpg'); /* PC Banner - Updated */
    --gdp-paint-1-523: #101010; /* near black */
    --gdp-font-1-765-family: "Alibaba Sans SEA";
    --gdp-font-1-765-size: 32px;
    --gdp-font-1-765-style: Bold;
    --gdp-font-1-765-line-height: 32px;
    --gdp-paint-1-599: #666666; /* gray for text */
    --gdp-font-1-597-family: "Alibaba Sans SEA";
    --gdp-font-1-597-size: 16px;
    --gdp-font-1-597-style: Medium;
    --gdp-font-1-597-line-height: 28px;
    --gdp-font-4-0123-family: "Alibaba Sans SEA";
    --gdp-font-4-0123-size: 32px;
    --gdp-font-4-0123-style: Bold;
    --gdp-font-4-0123-line-height: 26px;
    --gdp-paint-1-543-url: url('https://image-resource.mastergo.com/62435708278538/62435708278540/2cc36373c488e6ca560793ae42bc2cbb.png'); /* 5t1 screenshot placeholder */
    --gdp-paint-1-574: rgba(255, 255, 255, 0.8); /* semi-transparent white for card backgrounds */
    --gdp-effect-1-576: box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    --gdp-paint-1-571: #414141; /* gallery arrow color */
    --gdp-paint-1-657-url: url('../../images/content/game-pokemon-icon.png'); /* Game Icon - Updated */
    --gdp-font-1-493-family: "Alibaba Sans SEA";
    --gdp-font-1-493-size: 24px;
    --gdp-font-1-493-style: Bold;
    --gdp-font-1-493-line-height: 32px;
    --gdp-paint-1-502: #333333; /* dark gray for text */
    --gdp-font-79-2190-family: "Alibaba Sans SEA";
    --gdp-font-79-2190-size: 16px;
    --gdp-font-79-2190-style: Regular;
    --gdp-font-79-2190-line-height: 26px;
    --gdp-font-1-605-family: "Alibaba Sans SEA";
    --gdp-font-1-605-size: 12px;
    --gdp-font-1-605-style: Regular;
    --gdp-font-1-631-family: "Alibaba Sans SEA"; /* For Free to Play tag */
    --gdp-font-1-631-size: 12px;
    --gdp-font-1-631-style: Regular;
    --gdp-font-1-631-line-height: 26px;
    --gdp-paint-1-615: #060607; /* download button background */
    --gdp-font-1-626-family: "Alibaba Sans SEA"; /* Download button main text */
    --gdp-font-1-626-size: 22px;
    --gdp-font-1-626-style: Medium;
    --gdp-font-1-626-line-height: 24px;
    --gdp-font-1-621-family: "Alibaba Sans SEA"; /* Download button sub text */
    --gdp-font-1-621-size: 16px;
    --gdp-font-1-621-style: Regular;
    --gdp-font-1-621-line-height: 16px;
    --gdp-paint-1-611: #FFFFFF; /* white, for button text */
    --gdp-paint-1-700-url: url('https://image-resource.mastergo.com/62435708278538/62435708278540/00D8FF_TODO.png'); /* Google Play icon color component? Treat as image or color */
    --gdp-paint-1-691-url: url('https://image-resource.mastergo.com/62435708278538/62435708278540/FF003C_TODO.png'); /* Google Play icon color component? */
    --gdp-paint-1-694-url: url('https://image-resource.mastergo.com/62435708278538/62435708278540/FFCA00_TODO.png'); /* Google Play icon color component? */
    --gdp-paint-1-697-url: url('https://image-resource.mastergo.com/62435708278538/62435708278540/00F765_TODO.png'); /* Google Play icon color component? */
    --gdp-effect-1-537: box-shadow: 0px 4px 10px 0px #000000; /* breadcrumb shadow */
    --gdp-font-1-540-family: "Source Han Sans";
    --gdp-font-1-540-size: 16px;
    --gdp-font-1-540-style: Medium;
    --gdp-font-1-540-line-height: 16px;
    --gdp-paint-1-452: #D8D8D8; /* footer bg strip */
    /* Tokens from Game Display M-site DSL (79:4540) - some might overlap or need prefixing */
    --gdp-m-paint-1-863-url: url('../../images/hero/home-hero-mobile.png'); /* M-site banner - Updated */
    --gdp-m-font-1-765-size: 32px; /* Same as PC, can consolidate */
    --gdp-m-font-1-917-family: "Alibaba Sans SEA"; /* Version/Size text */
    --gdp-m-font-1-917-size: 24px;
    --gdp-m-font-1-917-style: Regular;
    --gdp-m-font-1-917-line-height: 26px;
    --gdp-m-font-1-821-family: "Alibaba Sans SEA"; /* Tag text */
    --gdp-m-font-1-821-size: 24px;
    --gdp-m-font-1-821-style: Regular;
    --gdp-m-font-1-810-family: "Alibaba Sans SEA"; /* Mobile Download button main text */
    --gdp-m-font-1-810-size: 28px;
    --gdp-m-font-1-810-style: Medium;
    --gdp-m-font-1-810-line-height: 24px;
    --gdp-m-font-1-805-family: "Alibaba Sans SEA"; /* Mobile Download button sub text */
    --gdp-m-font-1-805-size: 24px;
    --gdp-m-font-1-805-style: Regular;
    --gdp-m-font-1-805-line-height: 24px;
    --gdp-m-paint-1-717-url: url('https://image-resource.mastergo.com/62435708278538/62435708278540/A5CA39_TODO.png'); /* Android icon color/image */
    --gdp-m-font-1-521-family: "Alibaba Sans SEA"; /* Company Profile title (Game Intro) */
    --gdp-m-font-1-521-size: 44px;
    --gdp-m-font-1-521-style: Bold;
    --gdp-m-font-1-521-line-height: 40px;
    --gdp-m-font-1-827-family: "Alibaba Sans SEA"; /* Game description text */
    --gdp-m-font-1-827-size: 28px;
    --gdp-m-font-1-827-style: Regular;
    --gdp-m-font-1-827-line-height: 40px;
    /* General page layout vars */
    --gdp-text-light: var(--gdp-paint-1-441);
    --gdp-text-dark: var(--gdp-paint-1-523);
    --gdp-text-medium: var(--gdp-paint-1-502);
    --gdp-text-light-gray: var(--gdp-paint-1-599);
    /* PC Styles from DSL 79:4975 */
    --gdp-pc-banner-bg-url: var(--gdp-paint-1-581-url); /* Uses updated PC banner path */
    --gdp-pc-banner-overlay-color: rgba(0, 0, 0, 0.5); /* paint_1:582 */
    --gdp-pc-breadcrumb-color: #FFFFFF;
    /* Mobile Styles from DSL 79:4540 */
    --gdp-m-banner-bg-url: var(--gdp-m-paint-1-863-url); /* Uses updated Mobile banner path */
    --gdp-m-banner-overlay-color: rgba(0,0,0,0.5); /* paint_1:028 */
    --gdp-m-breadcrumb-color: #FFFFFF;
}

body {
    /* common.css has body styles, this page might not need to override */
}

.page-container { /* Utility class for consistent horizontal padding */
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 10%;
    box-sizing: border-box;
}

/* Header and Footer are styled by their own CSS files, ensure they are correctly linked */

.game-display-page main {
    padding-top: 80px; /* Account for fixed header, adjust if header height changes */
}

/* Banner Section */
.game-banner-section {
    position: relative;
    margin-top: 80px;
}

    .game-banner-section .game-banner-img {
        width: 100%;
        min-height: 400px;
        object-fit: cover;
    }

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* Optional: dark overlay for better text visibility */
    z-index: 1;
}

.breadcrumbs {
    position: relative;
    z-index: 2;
    font-family: var(--gdp-font-1-540-family);
    font-size: var(--gdp-font-1-540-size);
    color: var(--gdp-text-light);
    text-shadow: 0px 2px 4px rgba(0,0,0,0.7); /* Similar to --gdp-effect-1-537 */
    margin-left: calc( (100% - 1400px)/2 + 40px); /* Align with page-container roughly */
}

    .breadcrumbs a {
        color: var(--gdp-text-light);
        text-decoration: none;
    }

        .breadcrumbs a:hover {
            text-decoration: underline;
        }

/* Game Main Info Section */
.game-main-info-section {
    position: absolute;
    bottom: 20px;
    left: 50%; /* 关键：改为居中 */
    transform: translateX(-50%); /* 精确居中 */
    width: 90%; /* 先给一个宽松比例 */
    max-width: 1400px; /* 防止超宽屏时太宽 */
    min-width: 280px; /* 手机端不至于压扁 */

    background-color: var(--gdp-paint-1-574);
    border-radius: 24px;
    padding: 40px;
    margin: 0;
    z-index: 3;
    box-shadow: var(--gdp-effect-1-576);
}

.game-info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Changed back from stretch, to align tops */
    gap: 40px;
}

.game-info-left {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.game-info-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center, to align content to top */
}

.game-header-details {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.game-icon {
    width: 140px;
    height: 140px;
    background-size: cover;
    border-radius: 12px;
    margin-right: 30px;
    flex-shrink: 0;
}

.game-title-meta .game-title-recharge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
}

.game-title-meta .game-title {
    font-family: var(--gdp-font-1-493-family);
    font-size: var(--gdp-font-1-493-size);
    color: var(--gdp-text-dark);
    margin-right: 16px;
}

.game-title-meta .game-version,
.game-title-meta .game-size {
    font-family: var(--gdp-font-79-2190-family);
    font-size: var(--gdp-font-79-2190-size);
    color: var(--gdp-text-medium);
    margin: 5px 0;
    line-height: var(--gdp-font-79-2190-line-height);
}

.game-title-meta .game-title-recharge .recharge {
    width: 117px;
    height: 32px;
    border-radius: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(269deg, #F92C1A 0%, #F63D4B 99%);
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

.game-tags {
    margin-bottom: 0; /* Removed bottom margin as spacing handled by parent/wrapper */
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

    .game-tags .tag {
        background-color: var(--gdp-paint-1-574); /* semi-transparent white from DSL, might need adjustment */
        /* For tags, the DSL shows rectangles with text inside. Their fill is paint_1:574 */
        /* The text color is paint_1:599 (gray) */
        color: var(--gdp-text-light-gray);
        padding: 5px 15px;
        border-radius: 100px; /* from DSL for tag rectangles */
        font-family: var(--gdp-font-1-605-family);
        font-size: var(--gdp-font-1-605-size);
        line-height: 1.5; /* Ensure text fits well */
    }

/* Download Buttons */
.download-buttons-container {
    margin-top: 0;
    width: 100%;
}

.download-set.pc-downloads {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 15px;
    justify-items: stretch;
    align-items: stretch;
    /* Ensure this grid itself doesn't cause overflow issues if its content is too tall */
    /* It should be contained by .game-info-right */
}

.download-button {
    background-color: var(--gdp-paint-1-615); /* #060607 dark bg */
    color: var(--gdp-text-light);
    border-radius: 16px; /* From DSL */
    padding: 10px 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    min-width: 230px; /* From DSL for button groups */
    height: 72px; /* From DSL */
    box-sizing: border-box;
}

    .download-button:hover {
        opacity: 0.9;
    }

    .download-button .btn-icon {
        width: 44px; /* From DSL */
        height: 44px;
        margin-right: 15px;
        /* Placeholder, specific icons will be background images or actual img src */
        background-color: #ccc; /* Placeholder bg for icon area */
    }

    .download-button .btn-text-group {
        display: flex;
        flex-direction: column;
    }

    .download-button .btn-main-text {
        font-family: var(--gdp-font-1-626-family);
        font-size: var(--gdp-font-1-626-size);
        font-weight: var(--gdp-font-1-626-style);
        line-height: var(--gdp-font-1-626-line-height);
        margin-bottom: 5px;
    }

    .download-button .btn-sub-text {
        font-family: var(--gdp-font-1-621-family);
        font-size: var(--gdp-font-1-621-size);
        font-weight: var(--gdp-font-1-621-style);
        line-height: var(--gdp-font-1-621-line-height);
    }

/* Hide mobile buttons on PC and vice-versa by default */
.pc-downloads {
    display: flex;
}

.mobile-downloads {
    display: none;
}


/* Game Description Section */
.game-description-section {
    padding-top: 20px;
    padding-bottom: 20px;
}

    .game-description-section h2 {
        font-family: var(--gdp-font-1-765-family);
        font-size: var(--gdp-font-1-765-size);
        color: var(--gdp-text-dark);
        margin-bottom: 20px;
    }

.game-description-text {
    font-family: var(--gdp-font-1-597-family);
    font-size: var(--gdp-font-1-597-size);
    color: var(--gdp-text-light-gray);
    line-height: var(--gdp-font-1-597-line-height);
}

/* Screenshots Section */
.game-screenshots-section {
    padding-top: 20px;
    padding-bottom: 20px;
}

    .game-screenshots-section h2 {
        font-family: var(--gdp-font-4-0123-family); /* Using this variant from DSL */
        font-size: var(--gdp-font-4-0123-size);
        color: var(--gdp-text-dark);
        margin-bottom: 20px;
    }

.screenshots-gallery-wrapper { /* New wrapper for overflow control */
    position: relative; /* For absolute positioning of controls if needed later */
    margin-bottom: 40px;
}

.screenshots-gallery {
    display: flex; /* Changed from grid */
    flex-wrap: nowrap; /* Ensure images stay in one line */
    gap: 20px;
    overflow-x: scroll;
}

    .screenshots-gallery::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }

    .screenshots-gallery img {
        width: 348px; /* Example fixed width, adjust based on design */
        height: auto;
        border-radius: 12px; /* Consistent rounding */
        background-color: var(--gdp-paint-1-452); /* Placeholder bg */
        flex-shrink: 0; /* Prevent images from shrinking */
        display: block;
    }

.gallery-controls img {
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
}

    .gallery-controls img:hover {
        opacity: 0.8;
    }

.gallery-controls .gallery-prev {
    left: -42px;
}

.gallery-controls .gallery-next {
    right: -42px;
}
@media (max-width: 1024px) {
    .game-icon {
        width: 100px;
        height: 100px;
        margin-right: 15px;
    }

    .game-title-meta .game-title {
        font-size: 20px;
    }

    .game-title-meta .game-version, .game-title-meta .game-size {
        font-size: 14px;
    }

    .download-button {
        padding: 10px 15px;
        min-width: 190px;
        height: auto;
    }

        .download-button .btn-icon {
            width: 32px;
            height: 32px;
        }

        .download-button .btn-main-text {
            font-size: 18px;
        }

        .download-button .btn-sub-text {
            font-size: 14px;
        }

    .game-info-wrapper {
        gap: 20px;
    }
}

@media (max-width: 960px) {
    .game-icon {
        width: 100px;
        height: 100px;
        margin-right: 15px;
    }

    .game-title-meta .game-title {
        font-size: 20px;
    }

    .game-title-meta .game-version, .game-title-meta .game-size {
        font-size: 14px;
    }

    .download-button {
        padding: 10px 15px;
        min-width: 160px;
        height: auto;
    }

        .download-button .btn-icon {
            width: 32px;
            height: 32px;
        }

        .download-button .btn-main-text {
            font-size: 18px;
        }

        .download-button .btn-sub-text {
            font-size: 14px;
        }

    .game-info-wrapper {
        gap: 20px;
    }
}

/* ----- Mobile Styles ----- */
@media (max-width: 768px) {
    .page-container {
        margin: 0;
    }

    .page-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .game-banner-section .game-banner-img {
        min-height: 500px;
    }

    .download-button {
        min-width: auto;
        width: calc(50% - 10px);
    }

    .game-display-page main {
        padding-top: 70px; /* Adjust for smaller mobile header if needed */
    }

    .breadcrumbs {
        margin-left: 20px; /* Adjust breadcrumb alignment */
        font-size: calc(var(--gdp-font-1-540-size) * 0.9);
    }

    .game-info-wrapper {
        flex-direction: column; /* Stack left and right columns on mobile */
        gap: 10px;
    }

    .game-info-left, .game-info-right {
        flex: none; /* Reset flex sizing */
        width: 100%;
    }

    .game-info-right {
        align-items: stretch; /* Let mobile download buttons stretch */
    }

    .download-set.pc-downloads {
        display: none; /* Hide PC grid layout on mobile */
    }

    .download-set.mobile-downloads {
        display: flex; /* Ensure mobile buttons are shown and use flex as before */
        flex-wrap: wrap;
        align-items: stretch;
        gap: 15px;
        margin-top: 10px;
    }

    .game-header-details {
        align-items: center;
        margin-bottom: 0;
    }

    .game-icon {
        width: 70px; /* Smaller icon for mobile */
        height: 70px;
        margin-right: 16px;
        margin-bottom: 15px;
    }

    .game-title-meta .game-title-recharge {
        margin-bottom: 0;
    }

    .game-title-meta .game-title {
        font-size: 16px; /* Mobile title size from M-DSL */
    }

    .game-title-meta .game-title-recharge .recharge {
        position: absolute;
        right: 24px;
    }

    .game-title-meta .game-version,
    .game-title-meta .game-size {
        font-size: 12px;
        line-height: 14px;
    }

    .game-tags .tag {
        font-size: 12px; /* Mobile tag font from M-DSL */
        padding: 4px 12px;
    }

    .game-description-section {
        padding-top: 40px;
    }

        .game-description-section h2 {
            font-size: 22px;
            margin-top: 0;
            line-height: var(--gdp-m-font-1-521-line-height);
            text-align: center;
        }

    .game-description-text {
        font-size: 14px;
        line-height: 20px;
    }

    .game-screenshots-section h2 {
        font-size: 22px;
        text-align: center;
        /* Use same font as description h2 for consistency on mobile unless specified */
        line-height: var(--gdp-m-font-1-521-line-height);
        margin-top: 0;
    }

    .screenshots-gallery {
        grid-template-columns: 1fr; /* Single column for mobile */
        gap: 15px;
    }

    .gallery-controls button {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .download-button .btn-main-text {
        font-size: 12px;
    }

    .download-button .btn-sub-text {
        font-size: 8px;
    }
}
@media (max-width: 600px){
    .game-main-info-section {
        width: calc(100% - 32px); /* 左右各留 16px 安全边距 */
        padding: 20px;
        border-radius: 16px;
    }
}
@media (max-width: 480px) {
    .page-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .game-banner-section {
        margin-top: 60px;
    }

    .breadcrumbs {
        font-size: calc(var(--gdp-font-1-540-size) * 0.8);
    }

    .game-icon {
        width: 70px;
        height: 70px;
    }

    .game-title-meta .game-title {
        font-size: 16px;
    }

    .game-description-section {
        padding-top: 20px;
    }

        .game-description-section h2 {
            margin-bottom: 10px;
        }

    .game-screenshots-section {
        padding-top: 0;
    }

    .screenshots-gallery-wrapper {
        margin-bottom: 20px;
    }

    .screenshots-gallery img {
        width: 200px;
    }

    .gallery-controls {
        display: none;
    }
}