@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter:wght@300;400;600&family=Cinzel:wght@500;700&display=swap');

/* Reset global para evitar desbordamiento horizontal */
*, *:before, *:after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Clases de Tipografía */
.font-typewriter {
    font-family: 'Special Elite', monospace;
}

.font-title {
    font-family: 'Cinzel', serif;
}

/* Estilos Generales y Responsividad Móvil */
body {
    font-family: 'Inter', sans-serif;
    background-color: #050507;
    color: #c5b9ab;
    -webkit-tap-highlight-color: transparent;
}

/* Animación de parpadeo de pantalla y estática */
@keyframes static-flicker {
    0% { opacity: 0.95; }
    50% { opacity: 0.85; }
    100% { opacity: 0.98; }
}

.flicker {
    animation: static-flicker 0.15s infinite;
}

/* Efecto de pulso y asfixia visual adaptado para no causar mareos en pantallas pequeñas */
@keyframes pulse-suffocate {
    0%, 100% {
        transform: scale(1);
        filter: contrast(110%) brightness(90%) blur(0px);
    }
    50% {
        transform: scale(1.01);
        filter: contrast(150%) brightness(65%) blur(1px) sepia(30%) hue-rotate(-30deg);
    }
}

.suffocating {
    animation: pulse-suffocate 4s infinite ease-in-out;
}

/* Viñeta oscura perimetral optimizada */
@keyframes vignette-pulse {
    0%, 100% { box-shadow: inset 0 0 50px rgba(0,0,0,0.8); }
    50% { box-shadow: inset 0 0 100px rgba(10,0,0,0.95), inset 0 0 20px rgba(139,0,0,0.4); }
}

.vignette-overlay {
    animation: vignette-pulse 6s infinite ease-in-out;
    pointer-events: none;
}

/* Efecto de líneas de escaneo de monitor antiguo */
.scanlines {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    pointer-events: none;
}

/* Media Queries específicas para optimizar lectura y botones en móviles pequeños */
@media (max-width: 640px) {
    body {
        padding: 0.5rem !important;
    }
    
    main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    button {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
}