@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

:root {
    /* Global variables */
    --game-width: 800px;
    --game-height: 400px;
    --player-frame-size: 50px; /* Largura e Altura de um quadro na sprite sheet */
    --player-sheet-width: 300px; /* 6 quadros * 50px = 300px */
    --ground-height: 20px;
    --ground-level: calc(var(--game-height) - var(--ground-height) - var(--player-frame-size));
    --obstacle-size: 30px;
    --main-color: #333;
    --accent-color: #007bff;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: monospace;
    background: radial-gradient(ellipse at center, #1a1205, #0d0902);
    overflow: hidden;
}

/* --- Main game container --- */
#game-container {
    position: relative;
    width: var(--game-width);
    height: var(--game-height);
    overflow: hidden;
    border: 3px solid var(--main-color);
    background-color: #e6f7ff;
    transition: opacity 1.5s ease-in-out; 
}

.fade-out {
    opacity: 0;
}

/* --- Background and ground elements --- */

#ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--ground-height);
    background: linear-gradient(to bottom, #4CAF50, #388E3C);
    z-index: 10;
}

#background-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; 
    height: 100%;
    background: 
        repeating-linear-gradient(90deg, #cceeff 0, #cceeff 100px, #b3e6ff 100px, #b3e6ff 200px);
    z-index: 1;
    will-change: transform;
    animation: slide 5s linear infinite; 
}

@keyframes slide {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(calc(-1 * var(--game-width)), 0, 0); }
}


/* --- Character sprite sheet setup --- */

#player {
    position: absolute;
    bottom: var(--player-frame-size); 
    left: 50px;
    width: var(--player-frame-size);
    height: var(--player-frame-size);
    z-index: 20;
    
    /* Sprite settings */
    background-image: url('character.png');
    background-repeat: no-repeat;
    background-size: var(--player-sheet-width) var(--player-frame-size); /* 300px x 50px */
    
    transform: translate3d(0, 0, 0); 
    transition: transform 0.1s linear; 
}

/* Running animation (4 frames) */
.player-run {
    animation: run-cycle 0.4s steps(4, end) infinite; 
    background-size: var(--player-sheet-width) var(--player-frame-size); 
}

/* Keyframes: Move a background-position para a esquerda, passando pelos 4 quadros de corrida */
@keyframes run-cycle {
    from { background-position: 0px 0px; }
    to { background-position: calc(-4 * var(--player-frame-size)) 0px; } 
}

/* Jump class (W): static frame at X = -200px (5th frame) */
.player-jump {
    animation: none;
    background-position: calc(-4 * var(--player-frame-size)) 0px; 
}

/* Duck class (S): static frame at X = -250px (6th frame) */
.player-duck {
    animation: none;
    height: calc(var(--player-frame-size) / 2); /* Reduces the collision box by half */
    background-position: calc(-5 * var(--player-frame-size)) 0px; 
    /* Ajuste visual para manter a base */
    transform: translateY(calc(var(--player-frame-size) / 2)); 
}


/* --- Obstacles --- */

.obstacle {
    position: absolute;
    bottom: var(--ground-height);
    right: 0;
    width: var(--obstacle-size);
    height: var(--obstacle-size);
    background-color: #f44336; 
    border: 2px solid #b71c1c;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    z-index: 20;
    will-change: transform;
}

/* New: flying obstacle */
.obstacle-flying {
    /* Positions the obstacle in the air at standing head height */
    bottom: calc(var(--ground-height) + (var(--player-frame-size) / 2) + 10px);
    
    /* Muda a cor para diferenciar visualmente */
    background-color: #ff9800; /* Laranja */
    border-color: #e65100;
    
    /* Adds text to indicate the action */
    content: 'DUCK!';
}

/* --- Scoreboard and victory scene --- */

#score {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2em;
    color: var(--main-color);
    z-index: 30;
}

#victory-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff8e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 100;
    padding: 20px;
    box-sizing: border-box;
}

.hidden {
    display: none!important;
}

.espetinho {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
}