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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* IMAGEM DE FUNDO DA INTERNET (Troque o link abaixo para mudar o fundo) */
    background: #1a1a2e url('img/gif.gif') no-repeat center center / cover;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

.game-container {
    width: 1000px;
    height: 450px;
    /* Fundo do jogo levemente transparente para ver o papel de parede atrás */
    background-color: rgba(255, 255, 255, 0.8); 
    position: relative;
    overflow: hidden;
    border-bottom: 5px solid #535353;
    border-radius: 15px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}

/* --- CENÁRIO --- */
.ground {
    position: absolute; bottom: 0; width: 200%; height: 5px;
    background: #535353; animation: move-ground 1.4s infinite linear;
}
@keyframes move-ground { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cloud { position: absolute; background: #fff; border-radius: 20px; opacity: 0.6; animation: move-clouds linear infinite; }
.cloud1 { width: 60px; height: 20px; top: 40px; animation-duration: 10s; }
.cloud2 { width: 40px; height: 15px; top: 80px; animation-duration: 15s; }
@keyframes move-clouds { from { left: 1000px; } to { left: -100px; } }

/* --- DINO --- */
#dino {
    width: 50px; height: 55px; background: #333;
    position: absolute; bottom: 5px; left: 60px; border-radius: 5px; z-index: 10;
}
.leg { width: 10px; height: 15px; background: #333; position: absolute; bottom: -12px; }
.leg-left { left: 8px; } .leg-right { right: 8px; }
.dino-run .leg-left { animation: legs 0.15s infinite alternate; }
.dino-run .leg-right { animation: legs 0.15s infinite alternate-reverse; }
@keyframes legs { from { height: 15px; } to { height: 4px; } }

/* Pulo Calibrado para 350px de altura */
.jumping { animation: jump-anim 0.6s ease-out; }
@keyframes jump-anim {
    0%, 100% { bottom: 5px; }
    50% { bottom: 180px; }
}

/* --- CACTO REAL --- */
#cactus {
    width: 18px; height: 50px; background: #147e75;
    position: absolute; bottom: 5px; left: 1100px; border-radius: 5px;
    animation: move-cactus 1.4s infinite linear; z-index: 5;
}
.arm-left, .arm-right { width: 12px; height: 20px; background: #147e75; position: absolute; border-radius: 5px; }
.arm-left { left: -10px; top: 10px; border-bottom-right-radius: 0; }
.arm-right { right: -10px; top: 15px; border-bottom-left-radius: 0; }

@keyframes move-cactus { from { left: 1000px; } to { left: -60px; } }

/* --- INTERFACE E ANIMAÇÕES --- */
.score-board { position: absolute; top: 20px; right: 25px; font-weight: bold; font-size: 22px; color: #333; z-index: 20; }
#resetBtn { cursor: pointer; border: none; background: #eee; padding: 5px 8px; border-radius: 5px; margin-left: 10px; }

.record-flash { animation: flash-bg 0.8s ease-out 2; }
@keyframes flash-bg { 50% { background-color: rgba(46, 204, 113, 0.7); } }

.celebrate { color: #0f8640; animation: jump-text 0.4s ease-in-out 3; display: inline-block; }
@keyframes jump-text { 50% { transform: translateY(-15px) scale(1.2); } }

.hidden { display: none !important; }
#gameOver {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    background: rgba(0,0,0,0.85); color: white;
    display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100;
}