/*
 * Abertura das páginas internas (downloads, como jogar, dúvidas, privacidade).
 * É a versão menor da abertura da home (jogo-heroi): um mapa de batalha do jogo ao fundo,
 * os raios da recompensa girando e o título com o contorno marrom do jogo.
 * Candidata a ir para o ddt-tema.css como componente genérico.
 * Uso: <section class="jogo-abertura" style="--jogo-abertura-fundo: url(...)">
 */

.jogo-abertura {
    position: relative;
    padding: calc(var(--jogo-topo-altura) + 44px) 0 58px;
    background: #37a9d8 var(--jogo-abertura-fundo, url("../images/ddt/fundos/ceu.webp")) center 40% / cover no-repeat;
    border-bottom: 6px solid var(--jogo-madeira);
    box-shadow: inset 0 -3px 0 var(--jogo-ouro-escuro);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.jogo-abertura::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 46% 60% at 50% 55%, rgba(20, 50, 80, .35), transparent 75%),
        linear-gradient(rgba(8, 40, 70, .55), rgba(8, 40, 70, .12) 40%, rgba(40, 18, 2, .7));
}

/* os raios da recompensa atrás do título */
.jogo-abertura__raios {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 760px;
    margin: -360px 0 0 -380px;
    z-index: -1;
    background: url("../images/ddt/ui/raios.png") center / contain no-repeat;
    opacity: .16;
    mix-blend-mode: screen;
    animation: jogo-girar 70s linear infinite;
    pointer-events: none;
}

/* personagens do salão nas laterais */
.jogo-abertura__personagem {
    position: absolute;
    bottom: -6px;
    z-index: -1;
    height: 250px;
    width: auto;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
    pointer-events: none;
}

.jogo-abertura__personagem--esq {
    left: max(1vw, calc(50% - 640px));
}

.jogo-abertura__personagem--dir {
    right: max(1vw, calc(50% - 640px));
}

.jogo-abertura__centro {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

/* "Voltar ao universo": a seta amarela do jogo */
.jogo-abertura__voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 4px;
    font: 400 15px/1 var(--jogo-fonte-titulo);
    letter-spacing: .03em;
    color: var(--jogo-ouro-claro);
    text-decoration: none;
}

.jogo-abertura__voltar img {
    width: 40px;
    height: auto;
    transition: transform .15s ease;
}

.jogo-abertura__voltar:hover {
    color: var(--jogo-ouro);
}

.jogo-abertura__voltar:hover img {
    transform: translateX(-4px);
}

.jogo-abertura__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 2px 6px;
    font: 800 14px/1 var(--jogo-fonte);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jogo-abertura__selo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    margin: -8px 0;
}

.jogo-abertura h1 {
    margin: 0 0 12px;
    font: 400 clamp(34px, 5.6vw, 60px)/1.04 var(--jogo-fonte-titulo);
    letter-spacing: .01em;
}

.jogo-abertura__frase {
    margin: 0 auto;
    max-width: 600px;
    font: 800 clamp(16px, 2vw, 19px)/1.45 var(--jogo-fonte);
    color: #fff;
}

.jogo-abertura__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.jogo-abertura__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    font: 800 13px/1 var(--jogo-fonte);
}

.jogo-abertura__meta img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin: -8px 0;
}

@media (max-width: 1060px) {
    .jogo-abertura__personagem {
        height: 190px;
        opacity: .9;
    }
}

@media (max-width: 760px) {
    .jogo-abertura {
        padding: calc(var(--jogo-topo-altura) + 30px) 0 44px;
    }

    .jogo-abertura__personagem {
        display: none;
    }

    .jogo-abertura__voltar {
        margin-bottom: 12px;
    }

    .jogo-abertura__meta {
        gap: 6px;
    }

    .jogo-abertura__meta span {
        border-width: 10px 14px;
        border-image-width: 10px 14px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jogo-abertura__raios {
        animation: none;
    }
}