@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: inherit;
  }

  * {
    color-scheme: dark;
  }
}


@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root {
    --white: #FFFFFF; --black: #000000; --green: #00FF00; --dark-green: #009600;
    --red: #FF0000; --blue: #0000FF; --yellow: #FFFF00; --orange: #FFA500;
    --grey: #555555; --light-grey: #aaaaaa;
    /* Base dimensions for internal calculations & aspect ratio */
    --canvas-base-width: 700;
    --canvas-base-height: 800;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }

body {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    background-color: var(--black); color: var(--white);
    font-family: 'Press Start 2P', monospace; overflow: hidden; /* Prevent body scroll */
    text-transform: uppercase; font-size: 10px; padding: 5px 0;
    touch-action: none; /* Prevent default touch actions like scroll/zoom */
}

#header {
    text-align: center; width: 100%; margin-bottom: 5px; position: relative; z-index: 5;
    flex-shrink: 0; /* Prevent header from shrinking */
}

#header h1 {
    font-size: clamp(2.0em, 5vw, 2.6em); margin: 20px 0 15px 0px; color: var(--green);
    text-shadow: 2px 2px var(--dark-green); animation: glitch 5s linear infinite alternate-reverse;
    margin-top: 50px;
}

@keyframes glitch {
  0%, 100% { text-shadow: 2px 2px var(--dark-green), -1px -1px var(--red); } 49% { text-shadow: 2px 2px var(--dark-green), -1px -1px var(--red); }
  50% { text-shadow: -1px 2px var(--dark-green), 1px -1px var(--blue); transform: translateX(-1px); } 51% { text-shadow: 2px 2px var(--dark-green), -1px -1px var(--red); transform: translateX(0); }
}

#statsDisplay {
    font-size: clamp(1.1em, 3vw, 1.4em); color: var(--white); min-height: 1.2em;
    display: flex; justify-content: center; gap: 20px;
}
#scoreDisplay, #levelDisplay { display: inline-block; }

#gameContainer {
    position: relative;
    /* Let the container grow and shrink to fill available space */
    flex: 1;
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    max-width: 100vw;
    /* Important: Prevent container from overflowing its flex space */
    overflow: hidden;
    margin: 0; /* Remove default margins if any */
    min-height: 0; /* Allow container to shrink properly if needed */
}

canvas#gameCanvas {
    display: block;
    /* Width/Height set by JS */
    max-width: 100%; /* Ensure canvas doesn't exceed container width */
    max-height: 100%; /* Ensure canvas doesn't exceed container height */
    background-color: transparent; cursor: pointer; image-rendering: pixelated;
    position: relative; z-index: 1;
    top: -40px;
    touch-action: none; /* Prevent default actions on the canvas */
}

/* --- Pantallas Superpuestas --- */
.overlayScreen {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center; z-index: 20;
    cursor: pointer; padding: 20px; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
}
.overlayScreen.visible {
     opacity: 1; visibility: visible; transition: opacity 0.3s ease;
     pointer-events: auto;
}

#levelUpMessage {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(2.5em, 7vw, 4em); color: var(--yellow); z-index: 25;
    pointer-events: none; text-shadow: 3px 3px var(--orange); opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
#levelUpMessage.visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }

.overlayScreen h1, .overlayScreen h2 { font-size: clamp(2.0em, 6vw, 2.8em); margin-bottom: 20px; line-height: 1.4; }
#gameOverScreen h1 { color: var(--red); } #startScreen h2 { color: var(--yellow); } #pauseScreen h2 { color: var(--blue); }
.overlayScreen p { font-size: clamp(1.2em, 3.5vw, 1.6em); margin: 10px 0; line-height: 1.5; }
.actionText { color: var(--green); margin-top: 30px; font-size: clamp(1.4em, 4vw, 1.8em); animation: blink 1.5s linear infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

/* --- Modal "Cómo Jugar" --- */
 #howToPlayModal { background-color: rgba(10, 0, 20, 0.95); cursor: default; justify-content: flex-start; overflow-y: auto; }
 #howToPlayModal h3 { font-size: clamp(1.8em, 5vw, 2.4em); color: var(--yellow); margin-bottom: 20px; }
 #howToPlayModal .instructions { text-align: left; font-size: clamp(1.1em, 3vw, 1.4em); line-height: 1.8; max-width: 85%; margin-bottom: 20px; }
 #howToPlayModal .instructions strong { color: var(--green); }
 #howToPlayModal .instructions ul { list-style: none; padding-left: 1em; }
 #howToPlayModal .instructions li::before { content: ">"; margin-right: 0.5em; color: var(--green); }
 #closeModalButton { font-family: 'Press Start 2P', monospace; font-size: clamp(1.2em, 3.5vw, 1.6em); padding: 8px 15px; color: var(--black); background-color: var(--light-grey); border: 2px solid var(--white); cursor: pointer; text-transform: uppercase; margin-top: 15px; }
 #closeModalButton:hover { background-color: var(--white); }

/* --- Footer --- */
#footer {
    width: 100%; 
    text-align: center; 
    padding: 8px 0; 
    font-size: clamp(0.8em, 2.5vw, 1.0em); 
    position: relative; 
    z-index: 5;
    margin-top: 5px;
    flex-shrink: 0; /* Prevent footer from shrinking */
    background-color: var(--black); /* Ensure background color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed;
    bottom: 20px;
}

/* Control Buttons in Footer */
#game-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 5px;
}

.control-button {
    font-family: 'Press Start 2P', monospace;
    width: 42px;
    height: 42px;
    font-size: 22px;
    line-height: 1;
    background-color: var(--dark-green);
    color: var(--white);
    border: 3px solid var(--green);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 0 var(--black);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    position: relative;
}

.control-button:hover {
    background-color: var(--green);
    color: var(--black);
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
    text-shadow: none;
}

.control-button:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.control-button.muted {
    background-color: var(--grey);
    border-color: var(--light-grey);
    color: var(--light-grey);
}

.control-button.muted::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 3px;
    background-color: var(--red);
    transform: rotate(45deg);
}

/* Pixel art style for icons */
.pixel-icon {
    font-size: 16px;
    display: inline-block;
    letter-spacing: -3px;
    position: relative;
    top: 0px;
}

#footerCredit { 
    color: var(--grey); 
    margin-top: 20px;
} 

#footerCredit a { 
    color: var(--green); 
    text-decoration: none; 
} 

#footerCredit a:hover { 
    text-decoration: underline; 
}

/* Ocultar audio controls */
.audio-controls { position: absolute; top: -9999px; left: -9999px; }

/* Fondo estrellado en el body */
#star-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background-color: var(--black); }
#star-background > div { position: absolute; background-color: var(--grey); border-radius: 50%; }

/* Mobile adjustments for footer visibility */
@media screen and (max-height: 600px) {
    #footer {
        position: fixed;
        bottom: 20px;
        left: 0;
        width: 100%;
        padding: 5px 0;
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .control-button {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
    
    .pixel-icon {
        font-size: 18px;
    }
    
    #footerCredit {
        font-size: 0.8em;
        margin-top: 20px;
    }
}

/* Para pantallas pequeñas en horizontal */
@media screen and (max-width: 480px) {
    #game-controls {
        gap: 15px;
    }
    
    .control-button {
        width: 36px;
        height: 36px;
    }
}


/* Estilo para el icono de idioma */
.lang-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

/* Ajustar tamaño en pantallas pequeñas */
@media screen and (max-height: 600px) {
    .lang-icon {
        font-size: 16px;
    }
}