/* --- Configuração Global --- */
:root {
    --color-producer: #2ecc71;
    --color-c1: #f1c40f;
    --color-c2: #e67e22;
    --color-c3: #9b59b6;
    --color-predator: #e74c3c;
    --color-toxin: #ff00ff;
    --color-energy: #00ffff;
    --color-water: #3498db;
    --font-pixel: 'Press Start 2P', cursive;
}
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    font-family: var(--font-pixel);
    user-select: none;
}
#screen-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- Telas do Jogo --- */
.screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none; /* Começam ocultas */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #1a1a1a;
    padding: 20px;
}
.screen.active {
    display: flex; /* A tela ativa é mostrada */
}

/* --- Telas de Título, Transição e Finais --- */
#title-screen, #level-intro-screen, #game-over-screen, #win-screen {
    background: linear-gradient(180deg, #333 0%, #111 100%);
}
h1 {
    color: #fff;
    text-shadow: 4px 4px 0px var(--color-producer);
    font-size: 2.5em;
}
h2 {
    color: #fff;
    text-shadow: 2px 2px 0px var(--color-c1);
}
p {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 700px;
    color: #eee;
}
#game-over-screen h1 {
    text-shadow: 4px 4px 0px var(--color-predator);
}
#game-over-message {
    font-size: 1.2em;
    color: var(--color-toxin);
    background: #2a002a;
    padding: 15px;
    border: 2px solid var(--color-toxin);
    border-radius: 5px;
}
#win-screen h1 {
    text-shadow: 4px 4px 0px #f1c40f;
}

.game-button {
    font-family: var(--font-pixel);
    font-size: 1.2em;
    padding: 20px 30px;
    background-color: #333;
    color: white;
    border: 4px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 30px;
}
.game-button:hover, .game-button:active {
    background-color: #fff;
    color: #000;
}

/* --- Tela Principal do Jogo --- */
#game-screen {
    background: #111;
    padding: 0;
}
#game-world {
    position: relative;
    width: 100%;
    flex-grow: 1; /* Ocupa todo o espaço menos o HUD */
    overflow: hidden;
    cursor: none;
    /* Fundo dinâmico */
    background-color: #558B2F; /* Grama */
}
#game-world.level-1 { background-color: #a1887f; } /* Terra */
#game-world.level-2 { background-color: #558B2F; } /* Grama */
#game-world.level-3 { background-color: #424242; } /* Pântano */
#game-world.level-4 { background-color: #a1887f; } /* Terra */


/* --- Objetos do Jogo --- */
.game-object {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    transition: transform 0.1s linear;
    will-change: transform, left, top; /* Otimização para tablets */
}
#player {
    z-index: 10;
}
.food, .resource {
    z-index: 5;
    animation: bounce 0.5s infinite alternate ease-in-out;
}
.predator, .pest {
    z-index: 8;
    font-size: 50px;
    width: 60px;
    height: 60px;
}
.food.toxic-food {
    animation: toxic-glow 1s infinite alternate;
}
@keyframes toxic-glow {
    from { filter: drop-shadow(0 0 5px var(--color-toxin)); }
    to { filter: drop-shadow(0 0 20px var(--color-toxin)) brightness(1.5); }
}
@keyframes bounce {
    from { transform: translateY(0px) scale(1); }
    to { transform: translateY(-5px) scale(1.05); }
}
/* Efeito de "hit" no jogador */
#player.hit {
    animation: player-hit 0.3s;
}
@keyframes player-hit {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(10deg); filter: brightness(2); }
}

/* --- HUD (Interface) --- */
#hud {
    width: 100%;
    background-color: #212121;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-top: 4px solid #424242;
}
.hud-item {
    text-align: center;
}
.hud-item label {
    font-size: 0.8em;
    display: block;
    margin-bottom: 5px;
    color: #aaa;
}
#hud-level {
    font-size: 1.5em;
    color: #fff;
}
#score {
    font-size: 2em;
    color: #f1c40f;
}
#status-bars {
    display: flex;
    gap: 20px;
}
/* Barras de Status */
.bar-container {
    width: 200px;
    height: 25px;
    background-color: #111;
    border: 3px solid #000;
    border-radius: 5px;
    overflow: hidden;
}
.bar {
    height: 100%;
    width: 100%;
    transition: width 0.3s ease;
}
#energy-bar {
    background: #4CAF50;
}
#toxin-bar {
    background: var(--color-toxin);
    width: 0%;
}
/* Ocultar barras desnecessárias */
#energy-hud.hidden, #toxin-hud.hidden {
    display: none;
}