/* ============================================================================
   GAMEFILLED - GAME.CSS
   Página de detalhe de jogo: /games/{id}

   Objetivo deste ficheiro:
   - Definir o layout principal da página de jogo
   - Criar o hero/background no topo com imagem de cover art
   - Posicionar o conteúdo por cima do background
   - Estilizar a cover, título, metadados, cards estatísticos e screenshots
   - Garantir comportamento responsivo
   - Evitar overflow lateral / scroll horizontal indesejado
   ============================================================================ */


/* ============================================================================
   WRAPPER GLOBAL DA PÁGINA
   - position: relative permite posicionar elementos absolutos lá dentro
   - overflow-x: clip evita scroll lateral causado por blur, sombras ou rounding
   ============================================================================ */
.gf-game-page {
    position: relative;
    overflow-x: clip;
}


/* ============================================================================
   HERO / COVER ART DE FUNDO
   - Esta imagem fica apenas na zona superior da página
   - É usada como background visual da página do jogo
   ============================================================================ */
#game-cover-art,
.gf-cover-art {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 520px; /* Altura visual do hero */
    overflow: hidden;
    z-index: 0; /* Fica atrás do conteúdo */
}

    /* Imagem de fundo do hero */
    #game-cover-art img,
    .gf-cover-art img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Faz a imagem preencher a área */
        object-position: 50% 42%; /* Ajusta o enquadramento vertical */
        display: block;
        filter: saturate(1.05) brightness(0.90); /* Realce visual ligeiro */
    }


/* ============================================================================
   OVERLAY / GRADIENTE SOBRE A IMAGEM
   - Dá contraste ao topo para navbar/texto
   - Faz fade para o fundo do site
   - Reduz o corte “seco” da imagem
   ============================================================================ */
#gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none; /* Não interfere com cliques */
    background:
    /* Escurece a parte superior para a navbar */
    linear-gradient( to bottom, rgba(10,12,16,0.92) 0%, rgba(10,12,16,0.68) 18%, rgba(10,12,16,0.30) 40%, rgba(10,12,16,0.14) 60%, rgba(10,12,16,0.05) 72%, rgba(10,12,16,0.00) 78% ),
    /* Vinheta central */
    radial-gradient( 110% 120% at 50% 35%, rgba(10,12,16,0.00) 0%, rgba(10,12,16,0.30) 58%, rgba(10,12,16,0.86) 100% ),
    /* Fade para o fundo base do site */
    linear-gradient( to bottom, rgba(14,16,21,0.00) 0%, rgba(14,16,21,0.74) 80%, rgba(14,16,21,1.00) 100% );
}


/* ============================================================================
   SHELL PRINCIPAL DO CONTEÚDO
   - Fica por cima do hero
   - Usa z-index superior ao background/overlay
   - O padding-top empurra o conteúdo para baixo, para ficar como no Backloggd
   ============================================================================ */
.bl-shell {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 180px 0 0;
}


/* ============================================================================
   TOPO DA PÁGINA
   - Coluna esquerda: cover
   - Coluna direita: informação principal do jogo
   ============================================================================ */
.bl-top {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 28px;
    align-items: start;
}


/* ============================================================================
   COVER DO JOGO
   ============================================================================ */
.bl-cover img {
    width: 190px;
    border-radius: 12px;
    box-shadow: 0 18px 55px rgba(0,0,0,0.60);
    display: block;
}

/* Fallback caso não exista cover */
.bl-cover-fallback {
    width: 190px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}


/* ============================================================================
   BLOCO PRINCIPAL DE TEXTO
   ============================================================================ */
.bl-main {
    padding-top: 10px;
}


/* ============================================================================
   LINHA DO TÍTULO
   - Espaço para título + algum elemento lateral futuro
   ============================================================================ */
.bl-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* Evita que o texto rebente o layout */
.bl-title-wrap {
    min-width: 0;
}

/* Título principal do jogo */
.bl-title {
    margin: 0;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: 0.2px;
}

/* Texto secundário de autoria / estúdio / publisher */
.bl-byline {
    margin-top: 6px;
    opacity: .75;
    font-size: 13px;
}

    .bl-byline strong {
        opacity: 1;
    }

/* Linha com data e pills associadas */
.bl-release {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    white-space: nowrap;
}


/* ============================================================================
   PILLS REUTILIZÁVEIS
   ============================================================================ */
.pill {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: rgba(229,231,235,0.88);
}

/* Variante mais discreta */
.pill-muted {
    background: rgba(0,0,0,0.22);
    color: rgba(229,231,235,0.75);
}


/* ============================================================================
   RESUMO / DESCRIÇÃO DO JOGO
   ============================================================================ */
.bl-summary {
    margin: 10px 0 14px;
    color: rgba(229,231,235,0.86);
    line-height: 1.6;
    font-size: 14px;
    max-width: 860px;
}


/* ============================================================================
   ROWS DE METADADOS
   Ex.: Platforms, Genres, Themes, etc.
   ============================================================================ */
.bl-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

/* Cada linha tem label à esquerda e conteúdo à direita */
.bl-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
}

.bl-row__label {
    color: rgba(229,231,235,0.55);
    font-size: 11px;
    letter-spacing: 0.8px;
}

.bl-row__value {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chip individual de dados */
.bl-chip {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
    color: rgba(229,231,235,0.82);
}


/* ============================================================================
   CARDS ESTATÍSTICOS (3 NO TOPO)
   - Maior altura para aspecto quase quadrado
   - Texto centralizado
   ============================================================================ */
.bl-cards {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.bl-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bl-card {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 16px 16px;
    backdrop-filter: blur(10px);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
    min-height: 108px;
}

/* Variante para conteúdo centrado */
.bl-card--center {
    text-align: center;
}

.bl-card__label {
    font-size: 12px;
    color: rgba(229,231,235,0.70);
    margin-bottom: 6px;
}

.bl-card__value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.0;
}

.bl-card__sub {
    font-size: 12px;
    color: rgba(229,231,235,0.60);
    margin-top: 8px;
}

/* Feedback visual no hover */
.bl-card:hover {
    border-color: rgba(0,176,32,0.30);
    background: rgba(255,255,255,0.065);
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}


/* ============================================================================
   TIME TO BEAT PANEL
   - Bloco rectangular separado
   - Valores centrados
   ============================================================================ */
.bl-ttb-panel {
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px 14px 12px;
    backdrop-filter: blur(10px);
}

/* Título do painel */
.bl-ttb-panel__title {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.7px;
    text-transform: none;
    color: rgba(229,231,235,0.78);
    font-weight: 700;
    margin-bottom: 10px;
}

/* Grid dos 3 valores TTB */
.bl-ttb {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bl-ttb__item {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
}

.bl-ttb__value {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.05;
}

.bl-ttb__label {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(229,231,235,0.65);
}


/* ============================================================================
   SCREENSHOTS / MEDIA
   ============================================================================ */
.bl-screens {
    margin-top: 26px;
}

/* Título das secções */
.bl-section-title {
    margin-top: 0;
    font-weight: 800;
    font-size: 14px;
    opacity: .9;
}

/* Grid das imagens */
.bl-media {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.bl-media__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 30px rgba(0,0,0,0.30);
}


/* ============================================================================
   RESPONSIVE - TABLET
   ============================================================================ */
@media (max-width: 992px) {
    #game-cover-art,
    .gf-cover-art {
        height: 560px;
    }

    .bl-shell {
        padding: 190px 18px 0;
        max-width: 980px;
    }

    .bl-top {
        grid-template-columns: 160px 1fr;
    }

    .bl-cover img,
    .bl-cover-fallback {
        width: 160px;
    }

    .bl-title {
        font-size: 30px;
    }

    .bl-cards--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bl-media {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ============================================================================
   RESPONSIVE - MOBILE
   ============================================================================ */
@media (max-width: 576px) {
    #game-cover-art,
    .gf-cover-art {
        height: 620px;
    }

    .bl-shell {
        padding: 170px 14px 0;
    }

    .bl-top {
        grid-template-columns: 1fr;
    }

    .bl-cover img,
    .bl-cover-fallback {
        width: 180px;
    }

    .bl-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-cards--3 {
        grid-template-columns: 1fr;
    }

    .bl-ttb {
        grid-template-columns: 1fr;
    }

    .bl-media {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================================
   FULLBLEED
   - Compensa navbar transparente quando a página usa layout fullbleed
   ============================================================================ */
body.fullbleed .gf-game-page {
    margin-top: -74px;
    padding-top: 74px;
}