/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
width: 100%;
height: 100%;
background-color: skyblue; /* Fundo azul estilo Mario */
overflow: hidden;
font-family: 'Press Start 2P', cursive;
}

/* ===============================
 Tela de Abertura / Start Screen
 =============================== */
.opening-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 1s ease;
z-index: 1000;
}

.opening-screen.fade-out {
opacity: 0;
}

.opening-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.start-container {
position: relative;
z-index: 10;
text-align: center;
}

#startForm {
display: flex;
flex-direction: column;
align-items: center;
}

#playerNameInput {
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
text-align: center;
border: 2px solid #000;
background: #fff;
color: #000;
}

#saveButton {
padding: 10px 20px;
font-size: 18px;
background: #ffcc00;
border: 2px solid #000;
cursor: pointer;
transition: transform 0.3s ease;
}

#saveButton:hover {
transform: scale(1.1);
}

#playButton {
padding: 10px 20px;
font-size: 18px;
font-family: 'Press Start 2P', cursive;
background: #ffcc00;
border: 2px solid #000;
cursor: pointer;
transition: transform 0.3s ease;
margin-top: 10px;
}

#playButton:hover {
transform: scale(1.1);
}

.mouse-pointer {
position: absolute;
width: 40px;
height: 40px;
background: url('./imagens/mouse-pointer.png') no-repeat center center/contain;
animation: pointerClick 1s infinite;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}

@keyframes pointerClick {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(0.8); }
}

/* ===============================
 Pop-up de Tutorial
 =============================== */
.tutorial-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border: 2px solid #000;
text-align: center;
width: 80%;
max-width: 500px;
transition: transform 0.5s ease;
z-index: 2000;
}

.tutorial-popup.show {
transform: translate(-50%, -50%) scale(1);
}

.tutorial-popup button {
margin-top: 15px;
padding: 10px 20px;
font-size: 16px;
background: #ffcc00;
border: 2px solid #000;
cursor: pointer;
}

/* ===============================
 Game Board (estilo clássico do Mario)
 =============================== */
/* Configuração do jogo */
.game-board {
width: 100%;
max-width: 1280px;
height: 100%;
aspect-ratio: 18/9;
background: linear-gradient(#87CEEB, #E0F6FF);
display: flex;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 420px;
position: relative;
overflow: visible;
}

/* Terra e grama com pseudo-elementos */
.game-board::after {
content: "";
position: absolute;
bottom: -530px;
left: 0;
width: 100%;
height: 500px;
background: 
/* Blocos de terra */
repeating-linear-gradient(90deg,
#5C3317 0 2px,
transparent 2px 40px,
transparent 40px,
#5C3317 40px 42px
),
repeating-linear-gradient(0deg,
#5C3317 0 2px,
transparent 2px 40px
),
linear-gradient(#A0522D, #A0522D);
background-size: 40px 40px;
border-top: 30px solid;
border-image: linear-gradient(to top, #228B22, #32CD32) 30;
box-shadow: inset 0 15px 0 -5px rgba(50,205,50,0.3),
inset 0 30px 0 -10px rgba(50,205,50,0.2);
}

/* Efeito 3D na terra */
.game-board::before {
content: "";
position: absolute;
bottom: -530px;
left: 0;
width: 100%;
height: 500px;
background: repeating-linear-gradient(
45deg,
rgba(0,0,0,0.1) 0 5px,
transparent 5px 40px
);
pointer-events: none;
}

/* Nuvens geradas com CSS */
.clouds2 {
position: absolute;
top: -150px;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to bottom, white 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 70%);
border-radius: 50%;
opacity: 0.8;
animation: moveClouds 20s linear infinite;
z-index: 0;
}

.clouds2::before,
.clouds2::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}

.clouds2::before {
width: 200px;
height: 150px;
left: 60px;
top: -50px;
}

.clouds2::after {
width: 180px;
height: 120px;
right: 60px;
top: 0;
}

/* Animação das nuvens (deslizando da esquerda para a direita) */
@keyframes moveClouds {
0% {
left: -100%;
}
100% {
left: 100%;
}
}

/* Passarinhos com imagem GIF */
.birds2 {
position: absolute;
top: -300px;
left: 0;
width: 100%;
height: 150px;
pointer-events: none;
z-index: 999999;
/* border: 1px solid red; */
}

.birds2 .bird2 {
position: absolute;
width: 60px;
height: 40px;
background: url('./imagens/passaro.gif') no-repeat center center;
background-size: contain;
animation: moveBirds2 20s infinite linear;
}

.birds2 .bird2:nth-child(1) {
top: 20px;
left: 20%;
animation-delay: 0s;
}

.birds2 .bird2:nth-child(2) {
top: 60px;
left: 50%;
animation-delay: 0.2s;
}

.birds2 .bird2:nth-child(3) {
top: 40px;
left: 80%;
animation-delay: 0.4s;
}

/* Animação dos passarinhos (movimento mais suave, similar ao das nuvens) */
@keyframes moveBirds2 {
0% {
left: -50px;
top: 20%;
}
50% {
top: 40%;
}
100% {
left: 100%;
top: 30%;
}
}

/* Scoreboard */
#scoreboard {
position: absolute;
top: 10px;
left: 10px;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
border: 2px solid #000;
font-size: 14px;
}

/* ===============================
 Elementos do Jogo
 =============================== */
/* Mario – tamanho aumentado */
.mario,
.mario.game-over {
width: 100px;
position: absolute;
bottom: 0;
left: 50px;
}

/* Cano (pipe) – tamanho aumentado e posicionado corretamente */
.pipe {
position: absolute;
bottom: 0;
width: 60px;
left: 100%;
}

/* ===============================
 Animação de pulo do Mario
 =============================== */
.jump {
animation: jumpAnimation 0.7s ease-out;
}

@keyframes jumpAnimation {
0% { transform: translateY(0); }
30%{ transform: translateY(-130px); }
60%{ transform: translateY(-130px); }
100% { transform: translateY(0); }
}

/* ===============================
 Nuvens
 =============================== */
.clouds {
position: absolute;
top: 20px;
width: 300px;
animation: clouds-animation 20s linear infinite;
}

@keyframes clouds-animation {
0% {
transform: translateX(-350px);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(calc(100vw + 50px));
opacity: 0;
}
}

/* ===============================
 Pop-up de Game Over
 =============================== */
.gameover-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.97);
padding: 30px;
border: 2px solid #000;
text-align: center;
width: 80%;
max-width: 500px;
z-index: 3000;
display: none;
}

.gameover-popup button {
margin: 10px 5px;
padding: 10px 20px;
font-size: 16px;
font-family: 'Press Start 2P', cursive;
background: #ffcc00;
border: 2px solid #000;
cursor: pointer;
}

/* ===============================
 Pop-up de Ranking
 =============================== */
.ranking-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.97);
padding: 30px;
border: 2px solid #000;
text-align: center;
width: 80%;
max-width: 500px;
z-index: 3000;
display: none;
}

.ranking-popup ul {
list-style: none;
max-height: 300px;
overflow-y: auto;
margin: 15px 0;
padding: 0;
text-align: left;
}

.ranking-popup li {
padding: 5px;
border-bottom: 1px solid #ccc;
}

.ranking-popup button {
margin-top: 15px;
padding: 10px 20px;
font-size: 16px;
background: #ffcc00;
border: 2px solid #000;
cursor: pointer;
}

/* Debug (opcional) */
.debug-box {
position: absolute;
border: 2px solid red;
background: rgba(255, 0, 0, 0.2);
}