/* ==========================================================================
   1. CONFIGURACIÓN COMPLETA CYBERPUNK
   ========================================================================= */
:root {
    --bg-dark: #030508;
    --bg-card: #090d16;
    --neon-blue: #00f0ff;
    --neon-orange: #ff6600;
    --neon-pink: #ff0055;
    --neon-green: #3ade83;
    --neon-purple: #9d4edd;
    --text-white: #ffffff;
    --text-gray: #94a3b8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Orbitron', sans-serif; background-color: var(--bg-dark); color: var(--text-white); overflow-x: hidden; letter-spacing: 1px; }

.cyber-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(0, 240, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 240, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; z-index: 1; pointer-events: none; }
.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04)); background-size: 100% 4px, 6px 100%; z-index: 999; pointer-events: none; }

/* GIFS FLOTANTES DINÁMICOS LATERALES */
.floating-gif { position: fixed; top: 38%; width: 130px; height: auto; z-index: 10; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4)); }
.gif-left { left: 3%; animation: floatY 3.5s ease-in-out infinite; }
.gif-right { right: 3%; animation: floatY 3.5s ease-in-out infinite 1.75s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

.page-container { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 20px; }

/* ==========================================================================
   2. HEADER TITULO GIGANTE GLITCH
   ========================================================================= */
.main-header { text-align: center; padding: 50px 0 25px 0; }
.game-title { font-family: 'Press Start 2P', monospace; font-size: 3.5rem; text-shadow: 4px 4px 0px var(--neon-pink), -2px -2px 0px var(--neon-blue); animation: twitch 3s infinite; line-height: 1.3; }
.subtitle { font-size: 1rem; color: var(--neon-blue); letter-spacing: 5px; margin-top: 15px; font-weight: bold; }
.live-badge { display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 0.65rem; background: rgba(255, 102, 0, 0.15); color: var(--neon-orange); padding: 8px 16px; border: 2px solid var(--neon-orange); margin-top: 20px; box-shadow: 0 0 15px rgba(255, 102, 0, 0.25); }

/* ==========================================================================
   3. CAROUSEL CON DESPLAZAMIENTO PREMIUM
   ========================================================================= */
.carousel-section { margin-bottom: 40px; }
.carousel-container { position: relative; background: #000; border: 3px solid var(--neon-blue); box-shadow: 0 0 30px rgba(0, 240, 255, 0.2); overflow: hidden; }
.carousel-track { display: flex; width: 100%; transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); }
.carousel-slide { min-width: 100%; }
.carousel-slide img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; margin-top: -22px; color: #fff; font-weight: bold; font-size: 24px; background-color: rgba(0,0,0,0.8); border: 1px solid var(--neon-blue); z-index: 10; }
.next { right: 0; }
.prev:hover, .next:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 15px var(--neon-blue); }
.glitch-transition { animation: quickGlitch 0.3s steps(2); }
@keyframes quickGlitch { 0%, 100% { filter: none; } 50% { filter: hue-rotate(60deg) saturate(2); } }

/* Títulos de Bloques */
.section-title, .section-title-orange, .section-title-pink { font-family: 'Press Start 2P', monospace; font-size: 0.95rem; margin-bottom: 25px; text-align: center; line-height: 1.5; }
.section-title { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255,0,85,0.3); }
.section-title-orange { color: var(--neon-orange); text-shadow: 0 0 8px rgba(255,102,0,0.3); }
.section-title-pink { color: var(--neon-blue); text-shadow: 0 0 8px rgba(0,240,255,0.3); }

/* ==========================================================================
   4. SECCIÓN ARSENAL INTERACTIVA (Ventanilla de GIFs con Hover)
   ========================================================================= */
.arsenal-section { margin-bottom: 50px; }
.weapons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.weapon-card { background: var(--bg-card); border: 2px solid #151d2a; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden; cursor: crosshair; }

.preview-box { position: relative; width: 100%; aspect-ratio: 1.5 / 1; background: #020407; border-radius: 6px; margin-bottom: 15px; border: 1px solid #1c2637; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preview-box img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; position: absolute; top: 0; left: 0; transition: opacity 0.25s ease; }

.action-gif { opacity: 0; z-index: 1; }
.static-img { opacity: 1; z-index: 2; }

.hover-hint { position: absolute; bottom: 4px; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--neon-blue); opacity: 0.5; z-index: 3; letter-spacing: 0px; }

.weapon-card h3 { font-size: 1.3rem; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; }
.weapon-card p { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; color: var(--text-gray); line-height: 1.5; }

.weapon-card:hover { transform: scale(1.04); box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.weapon-card:hover .static-img { opacity: 0; }
.weapon-card:hover .action-gif { opacity: 1; }
.weapon-card:hover .hover-hint { opacity: 0; }

.weapon-card.ice:hover { border-color: var(--neon-blue); box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); }
.weapon-card.ice h3 { color: var(--neon-blue); }
.weapon-card.blob:hover { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(58, 222, 131, 0.2); }
.weapon-card.blob h3 { color: var(--neon-green); }
.weapon-card.minigun:hover { border-color: var(--neon-orange); box-shadow: 0 0 20px rgba(255, 102, 0, 0.2); }
.weapon-card.minigun h3 { color: var(--neon-orange); }
.weapon-card.missile:hover { border-color: var(--neon-pink); box-shadow: 0 0 20px rgba(255, 0, 85, 0.2); }
.weapon-card.missile h3 { color: var(--neon-pink); }

/* ==========================================================================
   5. SINOPSIS, BESTIARIO CON SPRITES EN VIVO & LOOT
   ========================================================================= */
.sinopsis-card, .loot-card, .controls-card { background: var(--bg-card); border: 1px solid rgba(0, 240, 255, 0.15); padding: 35px; margin-bottom: 50px; position: relative; box-shadow: inset 0 0 20px rgba(0,240,255,0.02); }
.card-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--neon-blue); }
.top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.sinopsis-card h2, .loot-card h2, .controls-card h2 { font-family: 'Press Start 2P', monospace; font-size: 0.85rem; color: var(--neon-blue); text-align: center; margin-bottom: 20px; line-height: 1.5; }
.sinopsis-card p { font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; text-align: center; color: #cbd5e1; line-height: 1.6; }

/* Bestiario */
.bestiary-section { margin-bottom: 50px; }
.enemy-scroller { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.enemy-card { background: #0c111c; border: 1px solid #1c2637; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 25px; transition: all 0.3s ease; }

.enemy-sprite { width: 75px; height: 75px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 0, 85, 0.15)); transition: transform 0.3s ease, filter 0.3s ease; }

.enemy-meta h4 { font-size: 1.2rem; color: #fff; margin-bottom: 6px; }
.enemy-meta span { font-family: 'Press Start 2P', monospace; font-size: 0.55rem; font-weight: bold; padding: 4px 8px; border-radius: 3px; display: inline-block; }
.danger-low { background: rgba(58, 222, 131, 0.12); color: var(--neon-green); border: 1px solid var(--neon-green); }
.danger-medium { background: rgba(255, 102, 0, 0.12); color: var(--neon-orange); border: 1px solid var(--neon-orange); }
.danger-high { background: rgba(255, 0, 85, 0.12); color: var(--neon-pink); border: 1px solid var(--neon-pink); }

.enemy-card:hover { border-color: var(--neon-pink); background: rgba(255, 0, 85, 0.03); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(255,0,85,0.15); }
.enemy-card:hover .enemy-sprite { transform: scale(1.1) rotate(-3deg); filter: drop-shadow(0 0 15px var(--neon-pink)); }

/* Suministros Loot */
.loot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; }
.loot-item { text-align: center; padding: 10px; transition: transform 0.2s; }
.loot-item img { width: 45px; height: auto; image-rendering: pixelated; margin-bottom: 12px; }
.loot-item p { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; color: var(--text-gray); line-height: 1.4; }
.loot-item:hover { transform: scale(1.05); }
.loot-item strong { display: block; color: #fff; margin-bottom: 3px; font-size: 1.15rem; }

/* ==========================================================================
   6. CONTROLES Y TABLA DE DESCARGAS
   ========================================================================= */
.controls-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.control-key { background: #0c111c; border-left: 4px solid var(--neon-green); padding: 15px; font-size: 1rem; font-weight: bold; display: flex; align-items: center; }
.key-box { font-family: 'Press Start 2P', monospace; font-size: 0.75rem; background: #1b263b; border: 2px solid #3a86ff; border-radius: 4px; padding: 5px 10px; margin-right: 15px; color: var(--neon-blue); box-shadow: 0 3px 0px #1d4ed8; }

/* Tabla de Descargas */
.downloads-section { margin-bottom: 50px; text-align: center; }
.downloads-table { background: var(--bg-card); border: 2px solid #1a2333; box-shadow: 0 15px 35px rgba(0,0,0,0.8); }
.table-header { display: grid; grid-template-columns: 1fr 1fr; background: #0f1420; padding: 15px; border-bottom: 2px solid #1a2333; font-weight: bold; font-size: 0.9rem; color: var(--neon-blue); }
.table-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 18px 20px; border-bottom: 1px solid #141b29; }
.table-row:last-child { border-bottom: none; }
.os-column { display: flex; align-items: center; gap: 15px; justify-content: flex-start; padding-left: 20px; }
.table-os-icon { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.os-name { font-size: 1.2rem; font-weight: bold; color: #fff; }
.download-link { font-family: 'Press Start 2P', monospace; font-size: 0.7rem; text-decoration: none; padding: 12px 20px; border-radius: 4px; transition: all 0.2s; display: inline-block; width: fit-content; margin: 0 auto; }
.link-apk { background: rgba(58, 222, 131, 0.08); color: var(--neon-green); border: 1px solid var(--neon-green); }
.link-apk:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 15px var(--neon-green); }
.link-pc { background: rgba(255, 102, 0, 0.08); color: var(--neon-orange); border: 1px solid var(--neon-orange); }
.link-pc:hover { background: var(--neon-orange); color: #fff; box-shadow: 0 0 15px var(--neon-orange); }
.file-meta { margin-top: 20px; font-size: 0.8rem; color: #475569; }

/* ==========================================================================
   7. FOOTER
   ========================================================================= */
.main-footer { border-top: 1px dashed #1a2333; padding: 35px 20px; text-align: center; color: #475569; }
.tech-badges { margin-top: 12px; display: flex; justify-content: center; gap: 15px; font-size: 0.75rem; font-weight: bold; color: var(--neon-blue); }

@keyframes twitch {
    0%, 93%, 100% { text-shadow: 4px 4px 0px var(--neon-pink), -2px -2px 0px var(--neon-blue); transform: skew(0deg); }
    94% { text-shadow: -4px -4px 0px var(--neon-pink), 4px 4px 0px var(--neon-blue); transform: skew(2deg); }
    96% { text-shadow: 6px -2px 0px var(--neon-orange), -4px 4px 0px var(--neon-blue); transform: skew(-2deg); }
}

/* ==========================================================================
   8. COMPLETA OPTIMIZACIÓN RESPONSIVA (CRUCIAL PARA SMARTPHONES)
   ========================================================================= */
@media (max-width: 1120px) {
    .floating-gif { display: none !important; } /* Adiós elementos laterales estorbosos en móviles */
}

@media (max-width: 768px) {
    .page-container { padding: 12px; }

    /* Reducción controlada del Título Principal para que no se encime */
    .game-title { font-size: 2.2rem; text-shadow: 3px 3px 0px var(--neon-pink), -1px -1px 0px var(--neon-blue); }
    .subtitle { font-size: 0.85rem; letter-spacing: 3px; }

    /* Reducción de títulos de secciones generales */
    .section-title, .section-title-orange, .section-title-pink { font-size: 0.75rem; line-height: 1.6; padding: 0 5px; }

    /* Ajustes para las cajas contenedoras de texto */
    .sinopsis-card, .loot-card, .controls-card { padding: 25px 15px; margin-bottom: 35px; }
    .sinopsis-card h2, .loot-card h2, .controls-card h2 { font-size: 0.7rem; }
    .sinopsis-card p { font-size: 1.1rem; line-height: 1.5; }

    /* Las cuadrículas pasan a 1 sola columna para mejor lectura vertical */
    .weapons-grid { grid-template-columns: 1fr; gap: 15px; }
    .weapon-card { padding: 15px; }
    .preview-box { aspect-ratio: 16 / 9; } /* Formato más cómodo para el video del arma en teléfono */

    .enemy-scroller { grid-template-columns: 1fr; gap: 12px; }
    .enemy-card { padding: 12px; gap: 15px; }

    .loot-grid { grid-template-columns: 1fr 1fr; gap: 15px; } /* 2 por fila para que no se haga infinito */
    .loot-item strong { font-size: 1rem; }
    .loot-item p { font-size: 0.95rem; }

    .controls-layout { grid-template-columns: 1fr; gap: 12px; }
    .control-key { padding: 12px; font-size: 0.9rem; }
}

@media (max-width: 480px) {
    /* Optimización extrema para pantallas muy angostas */
    .game-title { font-size: 1.7rem; }
    .subtitle { font-size: 0.75rem; letter-spacing: 2px; }

    /* Reajuste total de la tabla de descargas */
    .table-header { grid-template-columns: 1fr; display: none; } /* Ocultamos el header para ganar espacio */
    .table-row { grid-template-columns: 1fr; gap: 12px; padding: 15px; text-align: center; }
    .os-column { justify-content: center; padding-left: 0; }
    .download-link { width: 100%; text-align: center; font-size: 0.65rem; padding: 14px; }

    .loot-grid { grid-template-columns: 1fr; } /* 1 por fila en pantallas enanas */
}