/*
 * Shared header responsive rules belong to site-header.css.
 * Do not reintroduce page-local header breakpoints here.
 */

.game-landing {
  --muted: #aab3bb;
  color: #f4f7f8;
}

.game-landing .eyebrow,
.game-landing .mini-title,
.game-landing .story-copy > p.mini-title,
.game-landing .landing-heading > p.eyebrow {
  color: #8cff00 !important;
  text-shadow: 0 0 18px rgba(140, 255, 0, .18);
}

.game-landing .hero-game-title,
.game-landing .story-copy .title,
.game-landing .landing-heading h2,
.game-landing .activation-card h2,
.game-landing .card h2,
.game-landing .card h3 {
  color: #f7f9fa !important;
}

.game-landing .hero-description,
.game-landing .hero-compact-description,
.game-landing .story-copy .text,
.game-landing .story-copy > p:not(.eyebrow):not(.mini-title),
.game-landing .story-copy li,
.game-landing .digital-delivery > p,
.game-landing .activation-card p,
.game-landing .card p,
.game-landing dd {
  color: #cbd2d8 !important;
}

.game-landing dt,
.game-landing .product-breadcrumb span {
  color: #929da6 !important;
}

.game-landing .story-copy .title {
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.02;
}

.game-landing .landing-heading h2,
.game-landing .activation-card h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.04;
}

@media (max-width: 520px) {
  .game-landing .story-copy .title {
    font-size: clamp(28px, 9vw, 40px);
  }
  .game-landing .landing-heading h2,
  .game-landing .activation-card h2 {
    font-size: clamp(26px, 8vw, 36px);
  }
}



.purchase-modal .purchase-facts > div {
  text-align: center;
}
.purchase-modal .purchase-facts dt,
.purchase-modal .purchase-facts dd {
  width: 100%;
  text-align: center;
}


/* ==========================================================================
   PINUT CANONICAL FOOTER (Game Landing Pages Override)
   Overrides legacy landing-v41.css footer flex & centering rules.
   ========================================================================== */
body.game-landing-page footer.pinut-site-footer {
    display: grid !important;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr !important;
    gap: 48px !important;
    width: 100% !important;
    max-width: 1240px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 60px 24px 80px 24px !important;
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    text-align: left !important;
    align-items: start !important;
    justify-content: stretch !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

body.game-landing-page footer.pinut-site-footer > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.game-landing-page .pinut-site-footer-logo {
    display: block !important;
    margin: 0 0 16px 0 !important;
    text-decoration: none !important;
}

body.game-landing-page .pinut-site-footer-logo img {
    display: block !important;
    width: 300px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

body.game-landing-page .pinut-site-footer-heading {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 16px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    text-align: left !important;
}

body.game-landing-page .pinut-site-footer-text,
body.game-landing-page .pinut-site-footer-link {
    display: block !important;
    margin: 0 0 10px 0 !important;
    color: #929da6 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    text-align: left !important;
    transition: color 0.2s ease !important;
}

body.game-landing-page .pinut-site-footer-link:hover {
    color: #78d900 !important;
}

body.game-landing-page .pinut-site-footer-copy {
    grid-column: 1 / -1 !important;
    margin: 30px 0 0 0 !important;
    padding: 24px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
    color: #616e78 !important;
    font-size: 13px !important;
    width: 100% !important;
}

@media (max-width: 960px) {
    body.game-landing-page footer.pinut-site-footer {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
        padding: 50px 24px 110px 24px !important;
    }
    body.game-landing-page .pinut-site-footer-logo img {
        width: 240px !important;
    }
}

@media (max-width: 540px) {
    body.game-landing-page footer.pinut-site-footer {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 40px 18px 120px 18px !important;
    }
    body.game-landing-page .pinut-site-footer-logo img { width: 200px !important; }
}


/* ==========================================================================
   HERO MOBILE LAYOUT — v1.0
   eyebrow + title: top-left | "Ver detalhes": bottom-right
   Font sizes: doubled PHP clamp values, with mobile reset for readability.
   ========================================================================== */

/* === Desktop: larger clamped fonts via the CSS vars set by PHP === */
@media (min-width: 761px) {
  /* Font sizes are already doubled in PHP getFontSize() via --hero-game-name-size */
}

/* === Mobile hero layout === */
/* hero-mobile-layout */
@media (max-width: 760px) {
  /* Stretch hero-content to fill the full hero height (hero is aspect-ratio 1/1) */
  .game-landing .hero {
    align-items: stretch !important;
  }

  .game-landing .hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    /* Enough bottom padding so the button floats clear of the scroll-cue */
    padding-bottom: 56px !important;
    height: 100% !important;
  }

  /* Eyebrow and title sit at the top — natural flex flow, no changes needed */

  /* "Ver detalhes" pushed all the way to the bottom-right */
  .game-landing .hero-content .hero-actions {
    margin-top: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  /* Description stays hidden on mobile (already hidden by aspect-ratio query,
     but explicit here for safety) */
  .game-landing .hero-content .hero-description {
    display: none !important;
  }

  /* Mobile font reset: user confirmed mobile sizes are great — keep them
     close to the original (pre-doubling) so only desktop gets bigger. */
  .game-landing .hero-game-title .game-name {
    font-size: clamp(36px, 10vw, 58px) !important;
  }
  .game-landing .hero-game-title .game-subname {
    font-size: clamp(22px, 7vw, 38px) !important;
  }
}
/* ==========================================================================
   FLOATING BUY BUTTON — RESPONSIVE SCALING & MOBILE FIX
   floating-buy-responsive
   ========================================================================== */

/* 1. Force the button to always float (overriding legacy position: static on mobile) 
   2. Scale the button size dynamically based on viewport width, up to double size */
body.game-landing-page .floating-buy {
    position: fixed !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Dynamic sizing: scales from standard size up to double based on screen width */
    font-size: clamp(14px, 1.1vw, 28px) !important;
    padding: clamp(16px, 1.25vw, 32px) clamp(24px, 2.5vw, 64px) !important;
    border-radius: clamp(4px, 0.4vw, 8px) !important;
    
    /* Dynamic positioning */
    bottom: clamp(20px, 3vw, 40px) !important;
    right: clamp(20px, 3vw, 40px) !important;
    
    margin: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    
    /* Ensure colors and shadow remain strong when scaling */
    box-shadow: 0 clamp(8px, 1.5vw, 16px) clamp(25px, 3vw, 50px) rgba(0,0,0,0.6) !important;
}

/* On very small mobile screens, we can let it stretch or stay bottom-right.
   The clamp functions above handle the smooth scaling, but we ensure the fixed 
   position is respected regardless of legacy media queries. */
@media (max-width: 520px) {
    body.game-landing-page .floating-buy {
        /* Optional: make it span most of the width on tiny screens for better tap target,
           but keeping it floating. */
        left: 20px !important;
        right: 20px !important;
        width: calc(100% - 40px) !important;
        bottom: 20px !important;
    }
}
/* ==========================================================================
   STORY ABOUT PROPORTIONS
   story-about-proportions
   ========================================================================== */

/* Give the "Sobre o jogo" text more space and the logo panel less space on desktop */
@media (min-width: 851px) {
    body.game-landing-page .story-about {
        grid-template-columns: 1.55fr 0.85fr !important;
    }
}
/* ==========================================================================
   LANDING CONTENT EXPANDED
   landing-content-expanded
   ========================================================================== */

/* Expand the main content area on wider screens to make better use of space for 1080p and 4K, 
   while maintaining comfortable reading widths. Legacy was locked to 1240px. */
@media (min-width: 1241px) {
    body.game-landing-page .landing-content {
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
    }
    
    body.game-landing-page .story-copy {
        max-width: 850px !important;
    }
    
        /* A imagem e o container devem manter a proporcao, mas nunca devem ultrapassar 375px de altura */
    body.game-landing-page .story-sequence .story-media {
        height: auto !important;
        /* USER RULE: O bloco de midia (imagem ou video) nao deve ter mais que 375px de altura */
        max-height: 375px !important;
        /* Centraliza o conteudo horizontalmente caso a imagem seja contida pelo max-height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.game-landing-page .story-sequence .story-media video,
    body.game-landing-page .story-sequence .story-media img {
        width: auto !important;
        max-width: 100% !important;
        /* USER RULE: A midia nao deve ter mais que 375px de altura */
        max-height: 375px !important;
        /* USER RULE: Manter proporcao da imagem sem cortes, mesmo que nao preencha os 100% de largura */
        object-fit: contain !important; 
    }

    /* USER RULE: Aproximar a imagem e o painel "sobre o jogo" do texto nas telas largas */
    body.game-landing-page .story-about .story-copy {
        justify-self: flex-end !important;
    }
    
    body.game-landing-page .story-about .game-logo-panel {
        justify-self: flex-start !important;
        margin-left: 0 !important;
    }
    
    body.game-landing-page .story-sequence .story-block:nth-child(odd) .story-media {
        justify-self: flex-end !important;
    }
    
    body.game-landing-page .story-sequence .story-block:nth-child(even) .story-media {
        justify-self: flex-start !important;
    }


    /* USER RULE: Aproximar o texto da margem interna (gap) */
    body.game-landing-page .story-sequence .story-block:nth-child(odd) .story-copy {
        justify-self: flex-start !important;
    }
    
    body.game-landing-page .story-sequence .story-block:nth-child(even) .story-copy {
        justify-self: flex-end !important;
    }

    /* USER RULE: Fix zig-zag gap by making columns symmetrical since media is no longer filling the space */
    body.game-landing-page .story-sequence .story-block,
    body.game-landing-page .story-sequence .story-block:nth-child(even),
    body.game-landing-page .story-about {
        grid-template-columns: 1fr 1fr !important;
    }

    
}

/* For ultra-wide 4K screens, let it breathe even more up to 1800px */
@media (min-width: 1921px) {
    body.game-landing-page .landing-content {
        padding-left: 8vw !important;
        padding-right: 8vw !important;
    }
}

/* USER RULE: Wrapper para limitar as secoes inferiores (requisitos, detalhes, entrega) na mesma largura do footer */
body.game-landing-page .footer-sections-wrapper {
    max-width: 1240px;
    margin: 0 auto;
}
/* USER RULE: Remover a limitacao de largura desnecessaria no texto de entrega digital */
body.game-landing-page .digital-delivery > p {
    max-width: none !important;
}
/* USER RULE: O gap da secao 'Sobre o Jogo' deve ser identico ao gap das secoes de historia (14px) */
body.game-landing-page .story-about {
    gap: 14px !important;
}
/* USER RULE: Remover a sombra aplicada aos containers de fotos e/ou videos */
body.game-landing-page .story-sequence .story-media {
    box-shadow: none !important;
}

    /* USER RULE: O painel deve ter um degrade onde a direita eh 100% transparente */
    body.game-landing-page .story-about .game-logo-panel {
        -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 100%) !important;
        mask-image: linear-gradient(to right, black 0%, black 30%, transparent 100%) !important;
    }

    /* USER RULE: A imagem do card no painel "Sobre o jogo" max 460x215 e manter proporcao */
    body.game-landing-page .story-about .game-logo-panel img {
        width: 100% !important;
        height: auto !important;
        max-width: 460px !important;
        max-height: 215px !important;
        aspect-ratio: 460 / 215 !important;
        object-fit: contain !important;
    }
/* USER RULE: Fundo dos cards com 50% de transparencia nas secoes inferiores */
body.game-landing-page .footer-sections-wrapper .card {
    background: linear-gradient(145deg, rgba(22, 27, 33, 0.5), rgba(12, 15, 19, 0.5)) !important;
}
/* USER RULE: Centralizar modal de preco e adicionar mais espaco entre os botoes de compra e carrinho */


body.game-landing-page .purchase-cart {
    margin-top: 12px !important;
}
/* USER RULE: Padronizar e ordenar os botoes do modal */
body.game-landing-page .purchase-confirm,
body.game-landing-page .purchase-cart,
body.game-landing-page .wishlist {
    margin: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

body.game-landing-page .purchase-confirm {
    border: 0 !important;
    background: var(--accent) !important;
    color: #091007 !important;
}

body.game-landing-page .purchase-cart {
    background: #2a2d33 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

body.game-landing-page .wishlist {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    color: #fff !important;
}
/* USER RULE: Aumentar o tamanho do logo no modal de compra para 231x87 */
body.game-landing-page .purchase-brand > img {
    width: 231px !important;
    max-height: 87px !important;
    object-fit: contain !important;
}

@media(max-width: 850px) {
    body.game-landing-page .purchase-brand > img {
        width: 180px !important; /* Proporcionalmente maior no mobile tbm */
    }
}

/* USER RULE: O video (ou imagem) no bloco de historia deve ficar centralizado verticalmente */
body.game-landing-page .story-sequence .story-media {
    align-self: center !important;
    align-items: center !important;
}
/* USER RULE: Breakpoint de 1090px para empilhar os blocos de historia igual ao mobile */
@media (max-width: 1240px) {
    body.game-landing-page .story-sequence .story-block,
    body.game-landing-page .story-sequence .story-block:nth-child(even),
    body.game-landing-page .story-about {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
        min-height: 0 !important;
        align-content: start !important;
    }
    
    /* Media/Video ocupando largura total sem restrição de altura (mantem proporcao nativa do video) */
    body.game-landing-page .story-sequence .story-media,
    body.game-landing-page .story-sequence .story-block:nth-child(even) .story-media {
        order: 1 !important; /* Colocar a media ACIMA do texto */
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        justify-self: stretch !important;
    }
    
    /* Imagens e videos dentro da media acompanham o container ocupando 100% da largura */
    body.game-landing-page .story-sequence .story-media video,
    body.game-landing-page .story-sequence .story-media img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
    
    body.game-landing-page .story-sequence .story-copy,
    body.game-landing-page .story-sequence .story-block:nth-child(even) .story-copy {
        order: 2 !important; /* Colocar o texto ABAIXO da media */
        justify-self: stretch !important;
    }

    /* Resetar o alinhamento de texto para a esquerda, ja que agora e vertical */
    body.game-landing-page .landing-content .story-sequence .story-block:nth-child(even) .story-copy,
    body.game-landing-page .landing-content .story-sequence .story-block:nth-child(even) .story-copy .mini-title,
    body.game-landing-page .landing-content .story-sequence .story-block:nth-child(even) .story-copy .title,
    body.game-landing-page .landing-content .story-sequence .story-block:nth-child(even) .story-copy .text {
        text-align: left !important;
    }
}
/* USER RULE: Forcar a centralizacao vertical do grid block inteiro para garantir que texto e midia fiquem alinhados ao meio */
body.game-landing-page .story-sequence .story-block {
    align-items: center !important;
}
/* USER RULE: Remover o fundo solido da descricao compacta em telas verticais/mobile */
body.game-landing-page .hero-compact-description {
    background: transparent !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 0 !important;
    margin-top: 15px !important;
}
/* USER RULE: Alinhar simetricamente o bloco de logo e o bloco de preco usando o mesmo eixo central e espacamento */
body.game-landing-page .purchase-brand,
body.game-landing-page .purchase-price {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important; /* Mesmo gap do story-block */
    width: 100% !important;
}

body.game-landing-page .purchase-brand {
    align-items: center !important;
}



/* Se por acaso um deles nao tiver o item da esquerda (ex: sem desconto), centraliza o item unico */
body.game-landing-page .purchase-brand > :only-child,
body.game-landing-page .purchase-price > :only-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
}

/* Item da esquerda: encosta no gap (direita) */
body.game-landing-page .purchase-brand > :first-child:not(:last-child),
body.game-landing-page .purchase-price > :first-child:not(:last-child) {
    justify-self: flex-end !important;
}

/* Item da direita: encosta no gap (esquerda) */
body.game-landing-page .purchase-brand > :last-child:not(:first-child),
body.game-landing-page .purchase-price > :last-child:not(:first-child) {
    justify-self: flex-start !important;
    text-align: left !important;
}
/* USER RULE: Remover os espacos sobressalentes das fontes para que o bloco de texto tenha exatamente a mesma altura da caixa verde */
body.game-landing-page .purchase-price del,
body.game-landing-page .purchase-price strong {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Opcional: aproximar o preco antigo do preco novo para ficar mais compacto */
body.game-landing-page .purchase-price del {
    margin-bottom: 2px !important;
}
/* USER RULE: Aumentar as fontes dos purchase-facts em ~25% */
body.game-landing-page .purchase-facts dt {
    font-size: 11.25px !important; /* 9px * 1.25 */
}
body.game-landing-page .purchase-facts dd {
    font-size: 15px !important; /* 12px * 1.25 */
}
/* USER RULE: Garantir que a caixa verde e o bloco de texto tenham a exata mesma altura e distribuam seu conteudo */
body.game-landing-page .purchase-price {
    align-items: stretch !important;
}

body.game-landing-page .purchase-price > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.game-landing-page .purchase-price > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Espalha o preco antigo no topo e o novo na base */
}

body.game-landing-page .purchase-price del {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.game-landing-page .purchase-price strong {
    font-size: 38px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* USER RULE: Garantir que o conteudo de texto da historia se mantenha no meio matematico do bloco */
body.game-landing-page .story-sequence .story-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}

@media (max-width: 1240px) {
    /* USER RULE: O botao Ver Detalhes deve ficar a esquerda no mobile/vertical */
    body.game-landing-page .hero-actions {
        text-align: left !important;
        border: none !important;
    }
    
    /* USER RULE: Remover qualquer linha abaixo da descricao compacta */
    body.game-landing-page .hero-compact-description {
        border-bottom: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
}
/* USER RULE: Ajustar padding top e bottom da area de conteudo principal */
body.game-landing-page .landing-content {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
}
/* USER RULE: Ajustes de mobile para o Modal de Compra */
@media (max-width: 850px) {
    /* Empilhar apenas o purchase-brand: Imagem em cima, nome embaixo */
    body.game-landing-page .purchase-brand {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Centralizar o conteudo do purchase-brand quando empilhado */
    body.game-landing-page .purchase-brand > :first-child:not(:last-child),
    body.game-landing-page .purchase-brand > :last-child:not(:first-child) {
        justify-self: center !important;
        text-align: center !important;
    }

    /* Reduzir os textos de preco */
    body.game-landing-page .purchase-price del {
        font-size: 16px !important;
    }
    body.game-landing-page .purchase-price strong {
        font-size: 28px !important;
    }
    body.game-landing-page .purchase-price > span {
        font-size: 20px !important;
        padding: 8px 14px !important;
    }

    /* Reduzir os textos dos facts */
    body.game-landing-page .purchase-facts dt {
        font-size: 8px !important;
    }
    body.game-landing-page .purchase-facts dd {
        font-size: 11px !important;
    }
}
@media (max-width: 850px) {
    /* USER RULE: Forcar 3 colunas nos facts mesmo no mobile, senao os itens quebram de linha */
    body.game-landing-page .purchase-facts {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* USER RULE: Proteger o footer do carrinho contra o CSS agressivo da landing page que afeta todos os <footer> */
body.game-landing-page .cart-drawer-footer {
    margin: 0 !important;
    width: 100% !important;
    padding: 20px 24px 24px !important;
    max-width: none !important;
}
/* USER RULE: Facts sempre em uma linha unica (sem quebra de texto) e fonte dinamica baseada na largura */
body.game-landing-page .purchase-facts {
    container-type: inline-size;
}

body.game-landing-page .purchase-facts div {
    overflow: hidden; /* para evitar vazar se ficar muito pequeno */
}

body.game-landing-page .purchase-facts dt {
    white-space: nowrap !important;
    font-size: clamp(8px, 2.5cqi, 11px) !important;
}

body.game-landing-page .purchase-facts dd {
    white-space: nowrap !important;
    font-size: clamp(10px, 3.5cqi, 16px) !important;
}
/* USER RULE: Reduzir padding e margins do modal (e seus elementos internos) pela metade */
body.game-landing-page .purchase-modal {
    padding: 20px !important;
}

body.game-landing-page .purchase-brand {
    margin-bottom: 15px !important;
}

body.game-landing-page .purchase-price {
    margin: 14px 0 !important;
}

body.game-landing-page .purchase-facts {
    margin-top: 14px !important;
    padding-top: 9px !important;
}

@media (max-width: 850px) {
    body.game-landing-page .purchase-modal {
        padding: 15px 11px !important;
    }
}
/* USER RULE: Mover o botao X (fechar modal) para a esquerda */
body.game-landing-page .purchase-close {
    right: auto !important;
    left: 15px !important;
}