/* ==================================================
   01. VARIÁVEIS GLOBAIS
   Todas as cores e medidas-base editáveis ficam aqui.
   ================================================== */

:root {
    /* ---------- Cores ---------- */
    --color-page-top: #C10506;
    --color-page-bottom: #F7B51B;

    /* ---------- Layout ---------- */
    --content-max-width: 430px;
    --button-max-width: 360px;
    --button-gap: clamp(10px, 4vw, 10px);
    --button-width: min(86%, var(--button-max-width));
}


/* ==================================================
   02. RESET E CONFIGURAÇÕES GERAIS
   ================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    /* Fundo externo/overscroll superior */
    background: var(--color-page-top);
}

body {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;

    overflow-x: hidden;

    font-family: Arial, Helvetica, sans-serif;
    background: var(--color-page-top);

    overscroll-behavior-y: none;
}


/* ==================================================
   03. CONTAINER GERAL DA PÁGINA
   O fundo complementar usa o mesmo tom da arte.
   ================================================== */

.page {
    position: relative;

    width: 100%;
    max-width: var(--content-max-width);
    min-height: 100dvh;

    overflow: hidden;

    /* Completa visualmente a parte inferior da arte */
    background: var(--color-page-bottom);
}


/* ==================================================
   04. IMAGEM DE FUNDO
   A arte mantém sua proporção original e nunca é esticada.
   ================================================== */

.background-layer {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../assets/images/background/background.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;

    pointer-events: none;
}


/* ==================================================
   05. CONTEÚDO PRINCIPAL
   Os botões ficam sobre a área livre da arte.
   ================================================== */

.main-content {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 100dvh;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    /*
       A posição acompanha a referência visual:
       os botões começam abaixo do personagem principal.
    */
    padding-top: clamp(350px, 93vw, 353px);
    padding-bottom: clamp(180px, 42vw, 260px);
}


/* ==================================================
   06. BOTÕES PRINCIPAIS
   Sem sombra, conforme especificado.
   ================================================== */

.main-links {
    width: var(--button-width);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--button-gap);
}

.main-button {
    display: block;
    width: 100%;

    line-height: 0;

    -webkit-tap-highlight-color: transparent;

    transition:
        filter 120ms ease,
        transform 120ms ease;
}

.main-button img {
    display: block;
    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;
}


/* ---------- Feedback visual do clique ---------- */

.main-button:active,
.main-button.is-pressed {
    filter: brightness(0.90);
    transform: scale(0.99);
}


/* ==================================================
   07. RESPONSIVIDADE
   Ajustes finos para telas muito estreitas.
   ================================================== */

@media (max-width: 340px) {
    :root {
        --button-width: 88%;
    }

    .main-content {
        padding-top: clamp(330px, 96vw, 400px);
    }
}