/* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Layout tokens */
    --ground-height: clamp(40px, 5dvh, 60px); /* Responsive ground height */
    --hero-base-width: 80px;
    --hero-base-height: 100px;
    --obstacle-base-width: 180px;
    --obstacle-base-height: 80px;

    --hero-width: clamp(80px, 15vw, var(--hero-base-width)); /* Increased min size */
    --hero-height: clamp(100px, 18.75vw, var(--hero-base-height)); /* Increased min size */
    --obstacle-width: 150px;
    --obstacle-height: 100px;
    
    /* Color palette - Cyberpunk theme */
    --color-neon-blue: #00ffff;
    --color-neon-green: #00ff00;
    --color-neon-yellow: #ffff00;
    --color-neon-pink: #ff00ff;
    --color-neon-orange: #ff6500;
    --color-dark-purple: #1a0033;
    --color-dark-blue: #0a0a2a;
    --color-dark-grey: #1c1c1c;
    
    /* Background colors */
    --color-bg-primary: var(--color-dark-grey);
    
    /* Grid and patterns */
    --grid-color: rgba(0, 255, 255, 0.15); /* Mais sutil */
    --grid-size: 50px;
    
    /* Spacing scale */
    --space-xs: clamp(2px, 0.5vw, 4px);
    --space-sm: clamp(4px, 1vw, 8px);
    --space-md: clamp(8px, 2vw, 16px);
    --space-lg: clamp(12px, 3vw, 24px);
    
    /* Typography scale */
    --font-size-base: clamp(0.8rem, 1.5vw, 1rem);
    --font-size-lg: clamp(1rem, 2vw, 1.125rem);
    --font-size-xl: clamp(1.1rem, 2.2vw, 1.25rem);
    --font-size-2xl: clamp(1.2rem, 2.5vw, 1.5rem);
    --font-size-4xl: clamp(2rem, 5vw, 3rem);
    
    /* Animation timing */
    --duration-normal: 0.3s;
    --duration-jump: 1.1s;
    --obstacle-animation-duration: 2.5s; /* Controlled by JS */

    /* Z-index scale */
    --z-ground: 1;
    --z-game-elements: 2;
    --z-hud: 10;
    --z-modal: 100;
    
    /* Shadows and effects */
    --shadow-glow-sm: 0 0 8px;
    --shadow-glow-md: 0 0 15px;
    --shadow-glow-lg: 0 0 25px;
}

/* ===== BASE STYLES ===== */
body {
    margin: 0;
    font-family: 'Press Start 2P', 'Courier New', Courier, monospace; /* Adicionando fonte cyberpunk */
    background-color: var(--color-bg-primary);
    color: white;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== GAME CONTAINER ===== */
#game-container {
    position: fixed; /* Use fixed to anchor to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Controlled by JS */
    background-image: url('assets/img/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: backgroundGlow 10s infinite alternate; /* Nova animação de fundo */
}

/* One life mode background */
#game-container.one-life-mode {
    background-image: url('assets/img/one-life.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* Ensure no background color interferes */
}

/* Ground simulation */
#game-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--ground-height);
    z-index: var(--z-ground);
    background: var(--color-bg-primary);
    border-top: 2px solid var(--color-neon-blue);
    box-shadow: var(--shadow-glow-sm) var(--color-neon-blue); /* Adicionando brilho */
}

/* Nova animação para o fundo */
@keyframes backgroundGlow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.1); }
}

/* ===== GAME ELEMENTS ===== */
#hero {
    position: absolute;
    bottom: var(--ground-height);
    left: clamp(20px, 5vw, 50px); /* Responsive left position */
    width: var(--hero-width);
    height: var(--hero-height);
    z-index: var(--z-game-elements);
    background-image: url('assets/img/hero-run.gif');
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 5px var(--color-neon-green)); /* Brilho no herói */
}

#obstacle {
    position: absolute;
    bottom: var(--ground-height);
    right: -50px;
    width: var(--obstacle-width);
    height: var(--obstacle-height);
    z-index: var(--z-game-elements);
    background-image: url('assets/img/enemy.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* Garante que não há cor de fundo */
    border: none; /* Garante que não há borda */
    box-shadow: none; /* Removido o box-shadow para evitar o retângulo */
    border-radius: 5px; /* Bordas levemente arredondadas */
    display: none; /* Controlled by JS */
    filter: drop-shadow(0 0 5px var(--color-neon-pink)); /* Brilho vermelho similar ao herói */
}

/* ===== ANIMATIONS ===== */
@keyframes jump {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-250px); }
    100% { transform: translateY(0); }
}

@keyframes moveObstacle {
    from { right: -50px; }
    to   { right: 100vw; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===== ANIMATION TRIGGERS ===== */
#hero.jump {
    animation: jump var(--duration-jump) linear;
    background-image: url('assets/img/hero-jump.gif');
}

#obstacle.move {
    animation: moveObstacle var(--obstacle-animation-duration) linear;
}

.hero-hit {
    animation: blink 0.5s 3; /* Blink for 1.5s total */
}

/* ===== HUD (HEADS-UP DISPLAY) ===== */
#hud {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: var(--z-hud);
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--color-neon-blue);
    text-shadow: var(--shadow-glow-sm) var(--color-neon-blue);
    background: rgba(0, 0, 0, 0.8);
    padding: var(--space-md);
    border: 2px solid var(--color-neon-blue);
    border-radius: 8px;
    box-shadow: var(--shadow-glow-sm) var(--color-neon-blue); /* Brilho no HUD */
}

#hud span {
    margin-right: var(--space-lg);
}

/* ===== UI SCREENS ===== */
.screen {
    position: fixed; /* Use fixed to anchor to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-bg-primary);
    z-index: var(--z-modal);
    box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.2); /* Efeito de brilho interno */
    overflow-y: auto; /* Allow scrolling */
    padding: var(--space-lg) var(--space-md); /* Add padding for content */
}

#setup-container {
    display: flex;
    justify-content: flex-start; /* Align content to top for scrolling */
    background-image: url('assets/img/start.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#game-over-container {
    background-image: url('assets/img/you-lose.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#game-container {
    display: none;
}

h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-neon-blue);
    text-shadow: var(--shadow-glow-md) var(--color-neon-blue);
}

.instructions {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--color-neon-blue);
    border-radius: 5px;
    max-width: 90%; /* Increased max-width for better mobile readability */
}

.instructions h2 {
    font-size: var(--font-size-xl);
    color: var(--color-neon-green);
    margin-bottom: var(--space-sm);
}

.instructions h3 {
    font-size: var(--font-size-lg);
    color: var(--color-neon-yellow);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.instructions p {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-xs);
}

.instructions kbd {
    background-color: var(--color-dark-blue);
    border: 1px solid var(--color-neon-blue);
    border-radius: 3px;
    padding: 2px 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size-base);
}

/* ===== FORM ELEMENTS & BUTTONS ===== */
input, button {
    font-family: inherit;
    font-size: var(--font-size-lg);
    padding: var(--space-md);
    margin: var(--space-md);
    border-radius: 4px;
    border: 2px solid var(--color-neon-blue);
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-neon-blue);
    transition: all var(--duration-normal) ease;
    box-shadow: var(--shadow-glow-sm) var(--color-neon-blue); /* Brilho padrão */
}

input:focus {
    outline: none;
    border-color: var(--color-neon-green);
    box-shadow: var(--shadow-glow-md) var(--color-neon-green); /* Brilho no foco */
}

button {
    cursor: pointer;
    border-color: var(--color-neon-yellow);
    color: var(--color-neon-yellow);
    box-shadow: var(--shadow-glow-sm) var(--color-neon-yellow); /* Brilho padrão */
}

button:hover {
    background: rgba(var(--color-neon-yellow), 0.2); /* Efeito hover */
    box-shadow: var(--shadow-glow-md) var(--color-neon-yellow); /* Brilho no hover */
}

/* ===== MOBILE RESPONSIVENESS (COMPACT) ===== */
@media screen and (max-width: 768px) {
    /* --- General Mobile Adjustments --- */
    :root {
        /* Drastically smaller fonts for mobile */
        --font-size-base: 0.6rem;
        --font-size-lg: 0.7rem;
        --font-size-xl: 0.8rem;
        --font-size-2xl: 1rem;
        --font-size-4xl: 1.5rem;

        /* Drastically smaller spacing for mobile */
        --space-xs: 2px;
        --space-sm: 4px;
        --space-md: 6px;
        --space-lg: 8px;

        /* Compact elements */
        --hero-width: 60px;
        --hero-height: 75px;
        --obstacle-width: 100px;
        --obstacle-height: 60px;
        --ground-height: 15px; /* Compact ground */
    }

    /* --- Screen Layouts --- */
    .screen {
        padding: var(--space-md);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #setup-container {
        justify-content: flex-start; /* Align to top */
    }

    /* --- Game Elements --- */
    #hud {
        padding: var(--space-sm);
        gap: var(--space-sm);
        transform: scale(0.75); /* Scaled down HUD */
        transform-origin: top left;
    }

    #hero {
        left: 20px;
        bottom: var(--ground-height);
    }

    #obstacle {
        bottom: var(--ground-height);
    }

    /* --- UI Elements --- */
    h1 {
        font-size: var(--font-size-2xl);
    }

    .instructions {
        max-width: 95%;
        padding: var(--space-sm);
        margin-top: var(--space-md);
    }

    input, button {
        font-size: var(--font-size-lg);
        padding: var(--space-md);
        margin: var(--space-md);
        min-height: 40px;
    }

    input {
        font-size: 16px !important; /* Prevent iOS zoom */
    }

    /* --- Orientation Specific --- */
    @media (orientation: portrait) {
        #game-container, .screen {
            display: none !important;
        }
        body::before {
            content: "🔄 Gire para a horizontal";
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #111; color: var(--color-neon-yellow);
            display: flex; align-items: center; justify-content: center;
            z-index: 9999; font-size: 1rem;
        }
    }

    @media (orientation: landscape) {
        body::before { display: none; }

        #setup-container {
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: var(--space-md);
        }
        .setup-column { display: flex; flex-direction: column; align-items: center; }
        .instructions { max-width: 45%; margin-top: 0; transform: scale(0.9); }
    }
}

/* ===== VERY SMALL SCREENS ===== */
@media screen and (max-width: 480px) {
    :root {
        --hero-width: clamp(45px, 10vw, 55px);
        --hero-height: clamp(55px, 12vw, 70px);
        --obstacle-width: clamp(80px, 16vw, 100px);
        --obstacle-height: clamp(50px, 10vw, 65px);
        --font-size-4xl: clamp(1.2rem, 2.5vw, 1.5rem);
    }

    #hud {
        font-size: clamp(0.5rem, 1vw, 0.7rem);
    }
}

/* ===== PREVENT UNWANTED BEHAVIORS ON MOBILE ===== */
@media screen and (max-width: 768px) {
    /* Prevent text selection */
    * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Allow text selection on inputs */
    input, textarea {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* Prevent bounce scrolling on game container only */
    #game-container {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* Prevent zoom */
    input, textarea, select {
        font-size: 16px !important;
    }

    /* Remove tap highlight */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}