body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Press Start 2P', cursive;
    /* Tu imagen de fondo (asegúrate que se llame fondo.jpg en la carpeta img) */
    background: url('img/fondo.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

/* Contenedor de las banderas */
.language-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

/* Estilo de las banderas */
.flag {
    width: 45px;
    height: auto;
    cursor: pointer;
    border: 3px solid #000;
    image-rendering: pixelated;
    transition: 0.2s;
}

.flag:hover {
    transform: scale(1.2);
    border-color: #A020F0; /* Borde lila al pasar el mouse */
}

/* Contenedor central */
.container {
    text-align: center;
    /* Bajamos el contenido para que no tape el logo "Kaotic World" de tu imagen */
    margin-top: 180px; 
}

/* Estilo del personaje GIF */
.main-character {
    max-width: 280px; /* Tamaño del personaje */
    height: auto;
    image-rendering: pixelated; /* Mantiene los píxeles nítidos */
    margin-bottom: 30px;
}

/* El Botón Rojo Especial */
.pixel-btn {
    display: block;
    margin: 0 auto;
    background-color: #FF0000; /* Rojo puro */
    color: #000000; /* Letras negras */
    border: 6px solid #000; /* Borde negro grueso */
    padding: 20px 40px;
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    cursor: pointer;
    /* Sombra lila en el texto */
    text-shadow: 3px 3px 0px #A020F0; 
    /* Sombra negra del botón para efecto 3D */
    box-shadow: 6px 6px 0px #000;
    transition: 0.1s;
}

/* Efecto al hacer clic */
.pixel-btn:active {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px #000;
}