/* estilo.css - Versão Finalizada */

body {
margin:0;
overflow:hidden;
background: linear-gradient(to top,#87CEEB,#e0f7fa);
font-family:sans-serif;
}

#game {
position:relative;
width:100vw;
height:100vh;
overflow:hidden;
background:#87CEEB;
}

#track {
position:absolute;
bottom:50px;
width:100%;
height:200px;
background:linear-gradient(to top,#228B22,#32CD32);
z-index:1;
}

#player {
 position:absolute;
 bottom:80px;
 left:50%;
 width:90px;
 height:60px;
 z-index:3;
 transform:translateX(-50%);
}

.obstacle {
 position:absolute;
 bottom:80px;
 width:30px;
 height:30px;
 z-index:2;
}

.square{
    background:#00FF00; box-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00;
}

.rectangle{width:50px;height:20px;background:purple;}

.triangle{
width:0;
height:0;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom:30px solid #CA0B1E; 
background:none;
filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #FFFF0D);
}
/* ======================================= */

.collectible {
 position:absolute;
 z-index:3;
 pointer-events:none;
}

#info {
 position:absolute;
 top:10px;
 right:10px;
 color:#000;
 font-size:28px;
 z-index:4;
}

#recorde {
    position: absolute;
    top: 50px; 
    right: 10px;
    color: #000;
    font-size: 24px;
    z-index: 4;
}

/* === NOVO E LIMPO BLOCO #LIVES === */
#lives {
position:absolute;
bottom:10px; /* GARANTIDO: Rodapé (Inferior) */
left:10px; /* GARANTIDO: Esquerdo */
z-index:4;
font-size:24px;
display: flex; /* Adicionado para alinhar os corações */
gap: 5px; 
}
/* ================================= */

#jumpButton{
position:absolute;
bottom:80px;
left:20px;
width:60px;
height:60px;
background:rgba(255,0,0,0.7);
border-radius:10px;
z-index:4;
display:none;
touch-action:manipulation;
}
#recordModal, #gameOverModal{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0.5);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:5;
}

#recordContent{
 background:#fff;
 padding:20px;
 border-radius:10px;
 text-align:center;
}

/* Partículas do rastro (classe mantida) */
.trail {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 z-index:2;
}

/* Sol */
.sun {
 position: absolute;
 top: 20px;
 left: 50px;
 width: 80px;
 height: 80px;
 background: radial-gradient(circle at center, #FFD700 0%, #FFA500 70%);
 border-radius: 50%;
 z-index: 2; /* Abaixo do Player e HUD, mas acima do céu */
}

/* Nuvens */
.cloud {
 position: absolute;
 width: 200px;
 height: 80px;
 /* Verifique se o caminho da imagem está correto. Use 'imagem/cloud.png' ou 'assets/cloud.png' */
 background: url('imagem/cloud.png') no-repeat; 
 background-size: contain;
 z-index: 2; /* Z-index igual ao Sol */
 animation-name: moveClouds;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

.cloud-1 {
    top: 50px;
    animation-duration: 40s; 
    animation-delay: 5s;
}

.cloud-2 {
    top: 150px;
    animation-duration: 60s; 
    animation-delay: 15s;
}

@keyframes moveClouds {
 0% { left: 100%; }
 100% { left: -200px; }
}


/* === Mobile adjustments === */
@media (max-width:768px){
#jumpButton {
display:block;
}

#lives {
display:none;
}
}

/* === NOVO E LIMPO BLOCO MOBILE LANDSCAPE (MANTÉM NO RODAPÉ, MUDA PARA DIREITA) === */
@media (max-width:768px) and (orientation: landscape) {
#lives {
display:flex;
bottom:10px; /* FICA NO RODAPÉ (INFERIOR) */
right:10px; /* MOVE PARA A DIREITA (LONGE DO BOTÃO DE PULO) */
left:auto; /* Cancela o 'left: 10px' do bloco principal */
top:auto; /* Cancela qualquer regra 'top' */
}
}

/* === AJUSTE PARA TELAS ULTRA-PEQUENAS (Contêiner Reduzido e Centralizado) === */
@media (max-width: 460px) {
    
    #game {
        width: 95vw; /* Ocupa 95% da largura da tela */
        height: 95vh; /* Ocupa 95% da altura da tela */
        
        /* Centraliza o contêiner na tela, deixando uma pequena margem/borda ao redor */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
 }
}
/* ========================================== */