*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    overflow-x:hidden;
}

body{
    background:#0b1830;
}

#menu{
    width:100vw;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    position:relative;
    overflow:hidden;
    gap:30px;
}

#menu h1{
    color:white;
    font-size:50px;
}

#doormsg{
    color:white;
}

/* A logo fica presa perto do topo (não centralizada na tela
   toda), porque #scenario é ancorado embaixo por conta própria
   (ver mais abaixo). Se a logo fosse centralizada na altura
   inteira da tela, em telas baixas/largas ela acaba descendo
   até colidir com as portas. */
.logo{
    position:relative;
    z-index:2;
    padding-top:clamp(16px, 5vh, 64px);
    text-align: center;
}

.logo img{
    width: min(500px, 90vw);
    max-width: 100%;
    height: auto;
}

/* ========================================
   PALCO DO MENU (chão único e responsivo)
   ========================================
   Mesma ideia do #stage do jogo (ver resizeStage() em
   script.js): tudo aqui dentro é posicionado em pixel
   fixo usando a resolução real de cenario.png (1774x887).
   Um único fator de escala (resizeScenario() em script.js)
   redimensiona o palco inteiro pra caber na tela, ancorado
   embaixo e centralizado — por isso moto, personagem e
   portas ficam sempre grudados na mesma linha do chão,
   em qualquer tamanho de tela, sem precisar de números
   separados por @media. */
#scenario{
    position:absolute;
    left:50%;
    bottom:0;
    width:1774px;
    height:887px;
    transform-origin:50% 100%;
    z-index:1;
}

#cenarioImg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
}

/* Linha do chão (topo da grama) dentro do palco de 1774x887.
   O grupo moto + personagem + portas fica centralizado no
   palco (entre x=434 e x=1339) de propósito: como o palco
   também é centralizado na tela, o grupo inteiro já nasce
   centralizado, sem precisar de nenhum ajuste extra. Ver
   SCENARIO_CONTENT_WIDTH em script.js — é essa faixa que
   garante que moto e portas nunca saiam cortadas da tela. */
#xl125,
#player-preview,
.doors{
    position:absolute;
    bottom:190px;
}

#xl125{
    left:434px;
    width:320px;
}

#player-preview{
    left:804px;
}

#previewSprite{
    width:100px;
    display:block;
}

.doors{
    left:954px;
    display:flex;
    align-items:flex-end;
    gap:25px;
}

.door img{
    width:180px;
    cursor:pointer;
    transition:.3s;
}

.door img:hover{
    transform:scale(1.1);
}

#game{
    display:none;
    width:100vw;
    height:100vh;
    height:100dvh;
    position:relative;
    overflow:hidden;
    background:#111;
}

#jumpBtn{
    position:absolute;
    right:40px;
    bottom:40px;
    z-index:20;
    padding:15px 30px;
    font-size:20px;
    cursor:pointer;
}

#runBtn{
    position:absolute;
    left:40px;
    bottom:40px;
    z-index:20;
    padding:15px 30px;
    font-size:20px;
    cursor:pointer;
    user-select:none;
}

/* Resolução virtual fixa: toda a física em pixel do script.js
   funciona dentro deste "palco", que depois é escalado inteiro
   para caber na tela (ver resizeStage() em script.js). */
#stage{
    position:absolute;
    top:0;
    left:0;
    width:1280px;
    height:720px;
    transform-origin:0 0;
}

#background{
    position:absolute;
    left:260px;
    bottom:50px;
    width:710px;
    height:300px;
    display:block;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
}

#scene{
    position:absolute;
    inset:0;
}

#nuvem{
    position:absolute;
    bottom:320px;
    left:310px;
    width:100px;

}

#leftPlatform{
    position:absolute;
    bottom:32px;
    left: 240px;
    width:300px;
}

#bridge{
    position:absolute;
    bottom:170px;
    left:488px;
    width:250px;
    z-index:2;
}

#buraco{
    position:absolute;
    bottom:33px;
    left:477px;
    width:280px;
}

#rightPlatform{
    position:absolute;
    bottom:30px;
    left:700px;
    width:300px;
}

#trophy{
    position:absolute;
    bottom:206px;
    left:860px;
    width:100px;
}

#flag{
    display:none;
    position:absolute;
    bottom:214px;
    left:750px;
    width:60px;
}

#reward{
    display:none;
    position:absolute;
    bottom:300px;
    left:780px;
    width:120px;
}

#player{
    position:absolute;
    left:180px;
    bottom:100px;
    width:90px;
    height:150px;
    object-fit:contain;
    object-position:bottom center;
}

/* Frames de pulo/queda têm mais "espalhamento" horizontal
   (braços/pernas abertos) e ocupam menos altura do quadro,
   então precisam de uma caixa mais larga para não parecerem
   menores que o idle/walk. */
#player.walking{
    width:110px;
}

#player.jumping{
    width:115px;
}

#player.falling{
    width:125px;
}

/* Deitado no fundo do buraco (rip.png é bem mais largo que alto) */
#player.rip{
    width:170px;
    height:64px;
}

#tutorial{
    display:none;
    position:absolute;
    inset:0;
    z-index:30;
    background:rgba(0,0,0,.75);
    justify-content:center;
    align-items:center;
    cursor:pointer;
    text-align:center;
    padding:20px;
}

.tutorial-box{
    color:white;
    max-width:600px;
}

.tutorial-box p{
    margin:10px 0;
    font-size:20px;
}

#gameOver{
    display:none;
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.8);
    justify-content:center;
    align-items:center;
}

.panel{
    text-align:center;
}

#gameOverImage{
    width:600px;
    max-width:90%;
}

#gameOverTip{
    color:white;
    margin-top:15px;
    font-size:18px;
}

.buttons{
    margin-top:20px;
}

button{
    padding:15px 25px;
    font-size:18px;
    margin:5px;
    cursor:pointer;
}


/* ========================================
   RESPONSIVO — TELAS PEQUENAS (celular)
   #scenario (moto, personagem, portas) já escala sozinho
   via resizeScenario() em script.js, igual ao #stage do
   jogo — não precisa de valores separados aqui.
   ======================================== */
   @media (max-width:768px){

    #jumpBtn,
    #runBtn{
        padding:2.5vw 4.6vw;
        font-size:4.1vw;
    }

    #jumpBtn{
        right:3vw;
        bottom:22.5vh;
    }

    #runBtn{
        left:3vw;
        bottom:22.5vh;
    }

    #gameOverImage{
        width:400px;
    }

    button{
        padding:12px 18px;
        font-size:16px;
    }

    .tutorial-box p{
        font-size:16px;
    }
}

/* Celular em paisagem (deitado): pouca altura disponível.
   Reaproxima os controles do jogo do fundo da tela e
   encolhe o espaçamento do menu pra caber sem cortar nada. */
@media (max-height:500px) and (orientation:landscape){

    #menu{
        gap:12px;
    }

    .logo img{
        width:min(320px, 60vh);
    }

    #jumpBtn,
    #runBtn{
        bottom:4vh;
    }
}