/* ==========================================================
   GAME SINGLE
   Página individual do Jogo
   ========================================================== */


/* ==========================================================
   CONTAINER
   ========================================================== */

.us-game-page {

    padding-top: 24px;
    padding-bottom: 60px;

}


/* ==========================================================
   HERO
   ========================================================== */

.us-game-hero {

    position: relative;

    width: 100%;
    min-height: 360px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background-color: #171717;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 16px;

    margin-bottom: 32px;

}


/*
 * Quando o jogo não possui Featured Image nem Hero Artwork,
 * o Hero continua sendo exibido como um cabeçalho neutro,
 * seguindo o mesmo visual utilizado na página de plataforma.
 *
 * O background-color funciona como fallback quando não existe
 * uma imagem de fundo.
 */

.us-game-hero:not([style]) {

    min-height: 180px;

    padding: 36px 40px;

    align-items: flex-end;

    background: linear-gradient(
        135deg,
        #1b1b1b 0%,
        #111 100%
    );

    border: 1px solid #2a2a2a;

}


/*
 * Overlay usado somente quando existe imagem.
 *
 * No Hero sem imagem, removemos o overlay para manter
 * exatamente o aspecto limpo do cabeçalho da plataforma.
 */

.us-game-hero:not([style]) .us-game-hero-overlay {

    display: none;

}

.us-game-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .90) 0%,
        rgba(0, 0, 0, .50) 45%,
        rgba(0, 0, 0, .10) 100%
    );

}

.us-game-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    padding: 36px 40px;

}

.us-game-title {

    margin: 0;

    color: #fff;

    font-size: 44px;
    line-height: 1.05;

    font-weight: 700;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .65);

}


/*
 * Título do Hero sem imagem.
 *
 * Igual ao título da página de plataforma.
 */

.us-game-hero:not([style]) .us-game-title {

    font-size: 42px;

    text-shadow: none;

}


/* ==========================================================
   LAYOUT 70 / 30
   ========================================================== */

.us-game-layout {

    display: grid;

    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);

    gap: 28px;

    align-items: start;

}


/* ==========================================================
   ÁREA PRINCIPAL
   ========================================================== */

.us-game-main {

    min-width: 0;

}


/* ==========================================================
   ABAS
   ========================================================== */

.us-game-tabs {

    display: flex;

    width: 100%;

    margin-bottom: 28px;

    border-bottom: 1px solid #303030;

}

.us-game-tab {

    appearance: none;

    border: 0;

    border-bottom: 3px solid transparent;

    background: transparent;

    color: #aaa;

    padding: 14px 22px;

    margin: 0;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease;

}

.us-game-tab:hover {

    color: #fff;

    background: #181818;

}

.us-game-tab.active {

    color: #fff;

    border-bottom-color: #FF3B30;

}


/* ==========================================================
   PAINÉIS DAS ABAS
   ========================================================== */

.us-game-tab-panel {

    display: none;

}

.us-game-tab-panel.active {

    display: block;

}


/* ==========================================================
   LISTA DE CONTEÚDO
   ========================================================== */

.us-game-content-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


/* ==========================================================
   CARD DE CONTEÚDO
   Notícias / Rumores / Especiais / Opiniões
   ========================================================== */

.us-game-content-card {

    display: grid;

    grid-template-columns: 220px minmax(0, 1fr);

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid #2b2b2b;

}

.us-game-content-card-image {

    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 8px;

    background: #171717;

}

.us-game-content-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .25s ease;

}

.us-game-content-card-image:hover img {

    transform: scale(1.04);

}


/* ==========================================================
   CORPO DO CARD
   ========================================================== */

.us-game-content-card-body {

    min-width: 0;

    display: flex;

    flex-direction: column;

}

.us-game-content-card-category {

    margin-bottom: 6px;

    color: #FF3B30;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .07em;

}

.us-game-content-card-title {

    margin: 0 0 8px;

    font-size: 21px;

    line-height: 1.15;

}

.us-game-content-card-title a {

    color: #fff;

    text-decoration: none;

}

.us-game-content-card-title a:hover {

    color: #FF3B30;

}

.us-game-content-card-excerpt {

    margin-bottom: 12px;

    color: #aaa;

    font-size: 14px;

    line-height: 1.5;

}

.us-game-content-card-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;

    color: #777;

    font-size: 12px;

}

.us-game-content-card-author {

    color: #aaa;

}

.us-game-content-card-author::after {

    content: "•";

    margin-left: 8px;

    color: #555;

}

.us-game-content-card-score {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 26px;

    padding: 0 7px;

    border-radius: 4px;

    background: #FF3B30;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

}


/* ==========================================================
   REVIEWS
   ========================================================== */

.us-game-reviews-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.us-game-review-card {

    display: grid;

    grid-template-columns: 220px minmax(0, 1fr);

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid #2b2b2b;

}

.us-game-review-card-image {

    position: relative;

    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 8px;

    background: #171717;

}

.us-game-review-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .25s ease;

}

.us-game-review-card-image:hover img {

    transform: scale(1.04);

}

.us-game-review-card-score {

    position: absolute;

    right: 8px;
    bottom: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 30px;

    border-radius: 4px;

    background: #FF3B30;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

}

.us-game-review-card-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

}

.us-game-review-card-label {

    margin-bottom: 6px;

    color: #FF3B30;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .07em;

}

.us-game-review-card-content h2 {

    margin: 0 0 10px;

    font-size: 21px;

    line-height: 1.15;

}

.us-game-review-card-content h2 a {

    color: #fff;

    text-decoration: none;

}

.us-game-review-card-content h2 a:hover {

    color: #FF3B30;

}

.us-game-review-card-date {

    margin-top: auto;

    color: #777;

    font-size: 12px;

}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.us-game-sidebar {

    min-width: 0;

}

.us-game-info {

    padding: 22px;

    background: #1b1b1b;

    border: 1px solid #2a2a2a;

    border-radius: 12px;

}

.us-game-info-title {

    margin: 0 0 20px;

    color: #fff;

    font-size: 18px;

    line-height: 1.1;

    font-weight: 700;

}


/* ==========================================================
   CAPA
   ========================================================== */

.us-game-info-cover {

    width: 100%;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

}

.us-game-info-cover img {

    display: block;

    width: 100%;
    height: auto;

}


/* ==========================================================
   INFORMAÇÕES
   ========================================================== */

.us-game-info-data {

    display: flex;

    flex-direction: column;

}

.us-game-info-item {

    padding: 14px 0;

    border-top: 1px solid #303030;

}

.us-game-info-item:first-child {

    border-top: 0;

    padding-top: 0;

}

.us-game-info-item strong {

    display: block;

    margin-bottom: 5px;

    color: #888;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

}

.us-game-info-item span {

    display: block;

    color: #fff;

    font-size: 14px;

    line-height: 1.4;

}


/* ==========================================================
   PLATAFORMAS
   ========================================================== */

.us-game-info-platforms {

    padding-bottom: 0;

}

.us-game-platform-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;

}

.us-game-platform-list .us-platform-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 9px;

    border-radius: 4px;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

}


/* ==========================================================
   ESTADO VAZIO
   ========================================================== */

.us-game-empty {

    margin: 0;

    padding: 30px 0;

    color: #888;

    font-size: 15px;

}


/* ==========================================================
   RESPONSIVO — TABLET
   ========================================================== */

@media (max-width: 900px) {

    .us-game-layout {

        grid-template-columns: 1fr;

    }

    .us-game-sidebar {

        order: -1;

    }

    .us-game-info {

        display: grid;

        grid-template-columns: 180px minmax(0, 1fr);

        gap: 22px;

    }

    .us-game-info-title {

        grid-column: 1 / -1;

        margin-bottom: 0;

    }

    .us-game-info-cover {

        margin: 0;

    }

    .us-game-info-data {

        align-self: start;

    }

}


/* ==========================================================
   RESPONSIVO — MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .us-game-page {

        padding-top: 16px;

        padding-bottom: 40px;

    }

    .us-game-hero {

        min-height: 260px;

        margin-bottom: 20px;

        border-radius: 10px;

    }

    .us-game-hero-content {

        padding: 24px;

    }

    .us-game-title {

        font-size: 30px;

    }


    /*
     * Hero sem imagem — mesmo padrão do header de plataforma.
     */

    .us-game-hero:not([style]) {

        min-height: 140px;

        padding: 26px 24px;

        border-radius: 10px;

    }

    .us-game-hero:not([style]) .us-game-hero-content {

        padding: 0;

    }

    .us-game-hero:not([style]) .us-game-title {

        font-size: 30px;

    }


    /* Abas */

    .us-game-tabs {

        margin-bottom: 22px;

    }

    .us-game-tab {

        flex: 1;

        padding: 13px 8px;

        font-size: 12px;

    }


    /* Cards */

    .us-game-content-card,
    .us-game-review-card {

        grid-template-columns: 120px minmax(0, 1fr);

        gap: 14px;

    }

    .us-game-content-card-title,
    .us-game-review-card-content h2 {

        font-size: 16px;

    }

    .us-game-content-card-excerpt {

        display: none;

    }

    .us-game-content-card-category,
    .us-game-review-card-label {

        font-size: 10px;

    }

    .us-game-content-card-meta {

        font-size: 11px;

    }


    /* Sidebar */

    .us-game-info {

        display: block;

        padding: 18px;

    }

    .us-game-info-title {

        margin-bottom: 16px;

    }

    .us-game-info-cover {

        max-width: 220px;

        margin: 0 auto 20px;

    }


}


/* ==========================================================
   MOBILE PEQUENO
   ========================================================== */

@media (max-width: 420px) {

    .us-game-content-card,
    .us-game-review-card {

        grid-template-columns: 100px minmax(0, 1fr);

        gap: 12px;

    }

    .us-game-content-card-title,
    .us-game-review-card-content h2 {

        font-size: 15px;

    }

    .us-game-tab {

        font-size: 11px;

        padding-left: 5px;
        padding-right: 5px;

    }

}