.elementor-2108 .elementor-element.elementor-element-c30e65a{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-2108 .elementor-element.elementor-element-c30e65a:not(.elementor-motion-effects-element-type-background), .elementor-2108 .elementor-element.elementor-element-c30e65a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-2108 .elementor-element.elementor-element-4591973{margin:50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2108 .elementor-element.elementor-element-1ae9443e{--display:flex;--min-height:150px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-2108 .elementor-element.elementor-element-1ae9443e:not(.elementor-motion-effects-element-type-background), .elementor-2108 .elementor-element.elementor-element-1ae9443e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#864C4C00;}.elementor-2108 .elementor-element.elementor-element-1ae9443e::before, .elementor-2108 .elementor-element.elementor-element-1ae9443e > .elementor-background-video-container::before, .elementor-2108 .elementor-element.elementor-element-1ae9443e > .e-con-inner > .elementor-background-video-container::before, .elementor-2108 .elementor-element.elementor-element-1ae9443e > .elementor-background-slideshow::before, .elementor-2108 .elementor-element.elementor-element-1ae9443e > .e-con-inner > .elementor-background-slideshow::before, .elementor-2108 .elementor-element.elementor-element-1ae9443e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#02010100;--background-overlay:'';}body.elementor-page-2108:not(.elementor-motion-effects-element-type-background), body.elementor-page-2108 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}:root{--page-title-display:none;}body.elementor-page-2108{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-2108 .elementor-element.elementor-element-c30e65a{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-4591973 *//* =========================================
    ESTILOS DEL JUEGO GLITCH BREAKER
    ========================================= */

/* Contenedor principal de la página, con fondo a 100% de ancho */
body {
    background-color: #1c1c1c; /* El fondo se aplica aquí */
    color: #f3f3ee;
    font-family: 'Geist Mono', monospace;
    font-weight: 100;
    margin: 0;
    cursor: none;
    padding-bottom: 250px;
}

/* Nuevo contenedor para centrar todo el contenido del juego */
#game-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    width: 80vw;
    margin: 0 auto; /* Esto centra el contenido */
}

/* Contenedor de la interfaz (fuera del tablero de juego) */
#game-ui {
    width: 100%; /* Ahora ocupará el 100% de su padre #game-content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f3f3ee;
    font-family: 'Geist Mono', monospace;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Estilos para el texto del juego */
.game-info {
    font-size: 24px;
    letter-spacing: 2px;
    color: #E26F54;
}

#game-title {
    font-weight: 100 !important;
}

#game-over-text {
    font-weight: 100 !important;
    font-size: 25px;
}

#score {
    font-size: 24px;
    letter-spacing: 2px;
}

#game-intro {
    font-family: 'Geist Mono', monospace;
    font-weight: 100;
    font-size: 16px !important;
    line-height: 22px !important;
}

/* Contenedor para agrupar las vidas y la puntuación */
#stats-container {
    display: flex;
    align-items: center;
    gap: 55px;
}

h2 {
    margin-top: 10px;
}

/* Estilos para el contenedor de vidas */
#lives-container {
    display: flex;
    gap: 25px;
}

/* Estilo del corazón pixel art */
.pixel-heart {
    width: 12px;
    height: 12px;
    background-color: #E26F54;
    position: relative;
    transform: rotate(-45deg);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.pixel-heart:before,
.pixel-heart:after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #E26F54;
    border-radius: 50%;
    position: absolute;
}

.pixel-heart:before {
    top: -6px;
    left: 0;
}

.pixel-heart:after {
    top: 0;
    left: 6px;
}

/* Contenedor principal del juego */
#game-container {
    width: 100%; /* Ahora ocupará el 100% de su padre #game-content */
    height: 80vh;
    max-height: 600px;
    position: relative;
    background-color: #1c1c1c;
    border: 2px solid #D9F250;
    overflow: hidden;
}

h3.game-over-text {
    font-size: 40px;
}

#start-screen p {
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 35px;
}

/* Estilos para los glitches */
.glitch-block {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #D9F250;
    opacity: 0;
    animation: glitch-fade 0.5s forwards;
    cursor: none;
}

.glitch-block.clicked {
    background-color: #E26F54;
    animation: none;
    opacity: 1;
    transform: scale(0);
    transition: transform 0.2s, opacity 0.2s;
}

@keyframes glitch-fade {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

/* Estilos para las pantallas de inicio y game over */
#start-screen,
#game-over-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c1c1c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 40px;
    display: none;
}

#start-screen h2,
#game-over-screen h2 {
    margin-bottom: 20px;
}

.large-button {
    width: 150px !important;
}

/* Centrado para el botón de inicio */
#start-screen .menu-item-mp {
    margin: 0 auto;
    width: fit-content;
}

/* ----------------------------------------------------------------------- */
/* AJUSTE PARA BOTONES DE GAME OVER EN FILA Y CENTRADOS */
/* ----------------------------------------------------------------------- */

#end-buttons {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    align-items: center;     /* Alinea los botones verticalmente */
    gap: 20px;               /* Espacio entre los botones */
    margin-top: 15px;        /* Espacio encima del contenedor de botones */
}

/* Eliminamos el margen del elemento para evitar desajustes */
#end-buttons .menu-item-mp {
    margin: 0;
}

/* Ajusta el ancho del botón para evitar problemas de centrado */
#end-buttons .menu-link {
    width: auto !important; /* El ancho se ajusta al contenido */
    padding: 0 15px;         /* Añade padding para el efecto de botón */
}
/* ----------------------------------------------------------------------- */
/* FIN DE AJUSTES */
/* ----------------------------------------------------------------------- *//* End custom CSS */