/* 
   ========================================================================
   ★ INDICE DE ESTILOS (CSS) ★
   ========================================================================
   1. CONFIGURACION GENERAL (Variables)
   2. LAYOUT Y FONDO (Background, Grid)
   3. HUD & INTERFAZ (Esquinas, Mapa, Textos)
   4. ANIMACIONES VISUALES (Explosion, Humo, Antena)
   5. ANIMACIONES DEL TANQUE (Orugas, Ruedas, Rebote)
   6. RESPONSIVE DESIGN (Media Queries)
   ========================================================================
*/

/* ======================================================================== */
/* 1. CONFIGURACION GENERAL */
/* ======================================================================== */
:root {
    /* 
       ★ CONTROL DE VELOCIDAD DEL TREN DE RODAJE (ORUGAS Y RUEDAS) ★
       - Cambia este valor para acelerar o frenar todo junto.
       - 1.0 = Velocidad Normal
       - 0.5 = Doble de Rápido (Duración más corta)
       - 2.0 = Mitad de Lento (Duración más larga)
    */
    --tank-speed-multiplier: 0.5;
}

body {
    /* FONDO MILITAR: Gradiente azul imitando el estilo del caballo */
    background: radial-gradient(circle at 50% 30%, #e8f0fe 0%, #a4c2f4 40%, #0032A0 100%);
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
    color: #e0e0e0;
    /* Texto claro */
}

/* ======================================================================== */
/* 2. LAYOUT Y FONDO */
/* ======================================================================== */

/* --- FONDO DE LINEAS CRUZADAS (GRID) --- */
/* --- FONDO DE MAPA TOPOGRAFO (GRID + CURVAS NIVEL) --- */
/* --- FONDO DE LINEAS CRUZADAS (GRID) --- */
.radar-lines {
    position: fixed;
    /* FIXED para cubrir toda la ventana sin importar contenedores */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Patron de cuadricula estilo mira tactica */
    display: none;
    /* REMOVIDO PARA IMITAR EL FONDO LIMPIO DEL CABALLO */

    z-index: 0;
    pointer-events: none;
}

/* Efecto viñeta para oscurecer bordes (REMOVIDO A PETICIÓN) */
/*
.radar-lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none;
}
*/

/* --- CONTENEDOR PRINCIPAL (LAYOUT VERTICAL) --- */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.ui-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: -20px;
    /* Acercar texto al tanque */
    z-index: 2;
}

/* --- SUELO / PISO (Imitando al caballo) --- */
.suelo {
    background-color: #a4c2f4;
    background: linear-gradient(to bottom, #1e3a5f 0%, #0a192f 100%);
    /* Suelo frio y elegante */
    position: fixed;
    top: 64.25vh;
    /* Ajuste calculado a partir de 50vh + 0.75rem con font-size 19vh del caballo */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1) inset;
    /* Profundidad */
    z-index: 0;
}

/* ======================================================================== */
/* 3. HUD & INTERFAZ (CORNERS) */
/* ======================================================================== */
.hud-corners {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.hud-tl {
    position: absolute;
    top: 20px;
    left: 20px;
}

.hud-tr {
    position: absolute;
    top: 20px;
    right: 20px;
}

.hud-top-center {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* Ocupar más espacio en pantallas anchas */
    max-width: 1400px;
    /* Limitado para no tocar esquinas extremas */
    min-width: 320px;
    /* Mínimo para móvil */
    height: 60px;
    pointer-events: none;
    overflow: hidden;
}

.hud-bl {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.hud-br {
    position: absolute;
    /* Ajuste para que entre el texto "LOCATION" superior */
    bottom: 40px;
    right: 20px;
}



/* Responsive HUD adjust */
@media (max-width: 768px) {

    .hud-tl,
    .hud-tr,
    .hud-bl,
    .hud-br {
        transform: scale(0.7);
        /* Reducir tamaño en movil */
    }

    .hud-tl {
        top: 10px;
        left: 10px;
        transform-origin: top left;
    }

    .hud-tr {
        top: 10px;
        right: 10px;
        transform-origin: top right;
    }

    .hud-bl {
        bottom: 10px;
        left: 10px;
        transform-origin: bottom left;
    }

    .hud-br {
        bottom: 10px;
        right: 10px;
        transform-origin: bottom right;
    }


}

.wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ======================================================================== */
/* 4. ANIMACIONES VISUALES (EXPLOSION Y POLVO) */
/* ======================================================================== */

/* --- ANIMACIONES DE EXPLOSION Y POLVO --- */

/* --- ANIMACIONES DE EXPLOSION MEJORADAS --- */
#GrupoFogonazo {
    transform-origin: 0 0;
    animation: flash-fire-complex 4s infinite;
    /* Removed mix-blend-mode: screen from here so smoke contributes darkness */
}

/* Solo el fuego debe brillar/mezclarse como luz */
.muzzle-fire {
    mix-blend-mode: screen;
}

@keyframes flash-fire-complex {

    0%,
    88% {
        opacity: 0;
        transform: scale(0.1);
    }

    /* FLASHAZO BLANCO INTENSO */
    88.5% {
        opacity: 1;
        transform: scale(1.5);
    }

    /* EXPLOSION AMARILLA/NARANJA - MAXIMA POTENCIA */
    89% {
        opacity: 1;
        transform: scale(2.5, 2.0);
    }

    /* MANTENER HUMO VISIBLE (LINGER) */
    92% {
        opacity: 0.9;
        transform: scale(3.2, 2.8);
    }

    /* DISIPACION LENTA DEL HUMO */
    96% {
        opacity: 0.4;
        transform: scale(4.0, 3.5);
    }

    /* FIN DE LA PARTICULA */
    99% {
        opacity: 0;
        transform: scale(4.5, 4.0);
    }

    100% {
        opacity: 0;
    }
}

/* POLVO (DUST) REUBICADO */
/* ... */

/* --- ANIMACION DE ANTENA (EFECTO LATIGO/ONDULACION) --- */
#MovimientoAntena {
    transform-origin: 0 0;
    /* Pivote en la base */
    animation: antenna-whip 2.5s ease-in-out infinite;
}

@keyframes antenna-whip {

    0%,
    100% {
        transform: rotate(0deg) skewX(0deg);
    }

    33% {
        transform: rotate(6deg) skewX(3deg);
        /* Inclinacion acentuada adelante */
    }

    66% {
        transform: rotate(-4deg) skewX(-2deg);
        /* Inclinacion acentuada atras */
    }
}

.ground-effect {
    position: absolute;
    /* Ubicado EXACTAMENTE debajo de la oruga trasera */
    bottom: 6.76%;
    left: 20%;
    z-index: -1;
    display: flex;
    flex-direction: row-reverse;
}

/* HUMO DE ESCAPE (EXHAUST SMOKE) */
.exhaust-smoke-particle {
    opacity: 0;
    transform-origin: center center;
    transform-box: fill-box;
    animation: exhaust-puff 2.5s infinite linear;
    /* fill eliminado para usar colores inline del HTML (Tierra) */
}

.es1 {
    animation-delay: 0s;
}

.es2 {
    animation-delay: 0.5s;
}

.es3 {
    animation-delay: 1.0s;
}

.es4 {
    animation-delay: 0.2s;
}

.es5 {
    animation-delay: 0.7s;
}

.es6 {
    animation-delay: 1.2s;
}

.es7 {
    animation-delay: 0.4s;
}

.es8 {
    animation-delay: 0.9s;
}

.es9 {
    animation-delay: 1.4s;
}

.es10 {
    animation-delay: 0.1s;
}

.es11 {
    animation-delay: 0.35s;
}

.es12 {
    animation-delay: 0.65s;
}

.es13 {
    animation-delay: 0.85s;
}

.es14 {
    animation-delay: 1.15s;
}

.es15 {
    animation-delay: 1.35s;
}

@keyframes exhaust-puff {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translate(-180px, -50px) scale(4.5);
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   SISTEMA DE POLVO PROFESIONAL v2
   Capa 1 (.svg-dust)     → Tierra gruesa: pesada, baja, va lejos
   Capa 2 (.svg-dust)     → (reutiliza misma clase, distinto delay)
   Capa 3 (.svg-dust-air) → Polvo fino: se eleva, deriva y disipa
   ══════════════════════════════════════════════════════════════ */

/* ── CAPA 1 & 2: Tierra gruesa y nube media ── */
.svg-dust {
    opacity: 0;
    transform-origin: center bottom;
    /* pivota desde el suelo */
    transform-box: fill-box;
    animation: svg-dust-ground 2s infinite ease-out;
}

/* Delays escalonados — capa suelo (d1–d6) */
.d1 {
    animation-delay: 0s;
    animation-duration: 1.8s;
}

.d2 {
    animation-delay: 0.3s;
    animation-duration: 2.1s;
}

.d3 {
    animation-delay: 0.7s;
    animation-duration: 1.6s;
}

.d4 {
    animation-delay: 0.15s;
    animation-duration: 2.3s;
}

.d5 {
    animation-delay: 0.5s;
    animation-duration: 1.9s;
}

.d6 {
    animation-delay: 0.9s;
    animation-duration: 2.0s;
}

/* Delays escalonados — capa media (d7–d11) */
.d7 {
    animation-delay: 0.1s;
    animation-duration: 2.4s;
    animation-name: svg-dust-puff;
}

.d8 {
    animation-delay: 0.45s;
    animation-duration: 2.0s;
    animation-name: svg-dust-puff;
}

.d9 {
    animation-delay: 0.8s;
    animation-duration: 2.2s;
    animation-name: svg-dust-puff;
}

.d10 {
    animation-delay: 0.25s;
    animation-duration: 2.6s;
    animation-name: svg-dust-puff;
}

.d11 {
    animation-delay: 0.6s;
    animation-duration: 2.1s;
    animation-name: svg-dust-puff;
}

/* ── CAPA 1: Tierra gruesa — sale hacia atrás y se expande a ras de suelo */
@keyframes svg-dust-ground {
    0% {
        transform: translate(0px, 0px) scale(0.3);
        opacity: 0;
    }

    8% {
        opacity: 0.85;
        /* Aparece rápido */
    }

    60% {
        transform: translate(-70px, 8px) scale(1.8);
        opacity: 0.5;
    }

    100% {
        transform: translate(-130px, 15px) scale(3.2);
        opacity: 0;
    }
}

/* ── CAPA 2: Nube media — sube mientras se aleja */
@keyframes svg-dust-puff {
    0% {
        transform: translate(0px, 0px) scale(0.25);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    55% {
        transform: translate(-55px, -30px) scale(2.0);
        opacity: 0.4;
    }

    100% {
        transform: translate(-110px, -55px) scale(3.5);
        opacity: 0;
    }
}

/* ── CAPA 3: Polvo fino en el aire — se eleva y deriva lejos */
.svg-dust-air {
    opacity: 0;
    transform-origin: center center;
    transform-box: fill-box;
    animation: svg-dust-air-rise 3s infinite ease-out;
}

.da1 {
    animation-delay: 0s;
    animation-duration: 3.2s;
}

.da2 {
    animation-delay: 0.6s;
    animation-duration: 2.8s;
}

.da3 {
    animation-delay: 1.1s;
    animation-duration: 3.5s;
}

.da4 {
    animation-delay: 0.3s;
    animation-duration: 2.6s;
}

.da5 {
    animation-delay: 0.9s;
    animation-duration: 3.0s;
}

@keyframes svg-dust-air-rise {
    0% {
        transform: translate(0px, 0px) scale(0.2);
        opacity: 0;
    }

    12% {
        opacity: 0.5;
    }

    50% {
        transform: translate(-60px, -40px) scale(1.6);
        opacity: 0.3;
    }

    100% {
        transform: translate(-150px, -80px) scale(3.0);
        opacity: 0;
    }
}


/* --- TANK CONTAINER POSITION - EDIT HERE --- */
/* --- TANK CONTAINER POSITION - RESPONSIVE --- */
.tank-container {
    position: absolute;
    bottom: 35.75vh;
    left: 50%;
    transform: translateX(-50%) translateY(6.765%);
    /* Ancho dinámico basado en pantalla, maximo controlado */
    width: 100%;
    max-width: 1000px;
    height: auto;
    /* Escala relativa al viewBox para que se ajuste sin dejar margen */
    aspect-ratio: 680/340;

    z-index: 1;
    margin: 0;
}

/* El SVG interno debe adaptar su tamaño al contenedor */
.tank-container svg {
    width: 100%;
    height: 100%;
    display: block;
    /* Elimina espacio inferior inline */
}

/* ======================================================================== */
/* 6. RESPONSIVE DESIGN */
/* ======================================================================== */
@media (max-width: 768px) {
    .main-container {
        /* Asegurar que el contenedor principal permita el flujo vertical */
        justify-content: center;
    }
}

.ui-layer {
    width: 90%;
    margin-top: 0;
    /* Reset margin */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrar contenido UI */
}

.title {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
    /* Tamaño fluido pero restringido */
    white-space: normal;
    /* Permitir saltos de línea */
    line-height: 1.2;
    display: block;
    width: 100%;
    word-wrap: break-word;
}



/* ======================================================================== */
/* 5. ANIMACIONES DEL TANQUE (SVG) */
/* ======================================================================== */

/* SVG STYLING */
#tank-svg {
    width: 100%;
    height: 100%;
    /* Main Tank Bounce Animation */
    animation: svg-tank-bounce 0.6s ease-in-out infinite alternate;
}

/* Animations for SVG Parts */
@keyframes svg-tank-bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-4px);
    }
}

#Hull {
    /* Filters or shadows can go here */
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.6));
}

#TurretGroup {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: svg-turret-stabilize 2s ease-in-out infinite alternate;
}

@keyframes svg-turret-stabilize {
    0% {
        transform: rotate(0deg);
    }

    33% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0.5deg);
    }
}



#GrupoCanon {
    animation: svg-cannon-cycle 4s infinite;
}

@keyframes svg-cannon-cycle {

    /* REPOSO: sin desplazamiento (la posicion base la da GrupoCanonPos en HTML) */
    0%,
    88% {
        transform: translate(0px, 0px);
    }

    /* DISPARO: retrocede -50px en X */
    89% {
        transform: translate(-50px, 0px);
    }

    /* RECUPERACION */
    96%,
    100% {
        transform: translate(0px, 0px);
    }
}

/* ── ParteBaseCanon FIJO: cancela el retroceso del padre (GrupoCanon) ──
   GrupoCanon retrocede -50px en X al disparar (40px → -10px).
   Esta animación compensa +50px en el hijo para que quede estático.
   Mismo ciclo 4s, mismos keyframes, mismo timing = sincronía perfecta.   */
#ParteBaseCanon {
    animation: base-canon-antiretroceso 4s infinite;
    transform-box: fill-box;
}

@keyframes base-canon-antiretroceso {

    /* Reposo: posición normal del hijo */
    0%,
    88% {
        transform: translate(-25px, 0) scale(1.3);
    }

    /* Retroceso del padre: +50px para compensar los -50px del padre */
    89% {
        transform: translate(25px, 0) scale(1.3);
    }

    /* Recuperación */
    96%,
    100% {
        transform: translate(-25px, 0) scale(1.3);
    }
}

/* WHEEL SPINS */
.wheel-spin {
    transform-box: fill-box;
    transform-origin: center center;
    /* Velocidad base 3s ajustada por variable global */
    animation: svg-wheel-spin calc(3s * var(--tank-speed-multiplier)) linear infinite;
}

@keyframes svg-wheel-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ANIMACIONES AMETRALLADORA (Machine Gun) - FUEGO CONTINUO */
#MGMuzzleFlash {
    opacity: 1;
    /* Siempre visible el contenedor, el flicker controla la luz */
    animation: none;
    /* Quitamos el ciclo de ráfagas para fuego continuo */
}

/* El destello en sí mismo (Flicker rápido constante) */
#MGMuzzleFlash path,
#MGMuzzleFlash circle {
    animation: mg-flash-flicker 0.08s infinite alternate;
    /* Muy rápido */
}

@keyframes mg-flash-flicker {
    0% {
        opacity: 0.2;
        transform: scale(0.7);
    }

    100% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Movimiento de la cinta de munición - CONTINUO HACIA ARRIBA */
.mg-ammo-belt {
    stroke-dashoffset: 0;
    /* Animación lineal continua, offset negativo mueve "hacia la máquina" (arriba/izquierda en este path) */
    animation: mg-belt-feed 0.3s linear infinite;
}

@keyframes mg-belt-feed {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -4;
    }

    /* Valor negativo = sube por la curva */
}

/* TREAD ANIMATION */
.track-anim {
    stroke-dashoffset: 0;
    /* Velocidad base 0.5s ajustada por variable global */
    animation: svg-tread-move calc(0.5s * var(--tank-speed-multiplier)) linear infinite;
}

@keyframes svg-tread-move {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -15;
    }
}

/* MUZZLE FLASH */
#SvgMuzzleFlash {
    animation: svg-flash-fire 5s infinite;
    mix-blend-mode: screen;
}

@keyframes svg-flash-fire {

    0%,
    89% {
        opacity: 0;
        transform: scale(0.5);
    }

    90% {
        opacity: 1;
        transform: scale(1.5);
        fill: #fff;
    }

    91% {
        opacity: 0.8;
        transform: scale(2);
        fill: orange;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* MACHINE GUN RAPID FIRE */
.mg-fire-anim {
    animation: mg-rapid-fire 0.08s infinite alternate;
    /* Muy rápido */
}

@keyframes mg-rapid-fire {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.5;
        transform: scale(1.0);
    }
}

/* ANTENNA SWAY */
/* ANTENNA SWAY */
#Antenna,
#Antenna2 {
    transform-box: fill-box;
    /* Pivot at the base (0,0) of the path */
    transform-origin: 0 0;
    animation: svg-antenna-sway 2.5s ease-in-out infinite alternate;
}

#Antenna2 {
    /* Slightly different timing for realism */
    animation-duration: 3s;
    animation-delay: 0.5s;
}

@keyframes svg-antenna-sway {
    from {
        transform: rotate(-3deg);
    }

    to {
        transform: rotate(3deg);
    }
}

/* REMOVE OLD HTML TANK STYLES to avoid confusion */
.tank,
.tank__top,
.tank__middle,
.tank__bottom,
.tank__wheel,
.tank__gun-barrel {
    display: none;
}

/* --- ESTILOS DE LA INTERFAZ DE USUARIO (UI) --- */
.ui-layer {
    margin-top: 20px;
    text-align: center;
    width: 80%;
    max-width: 600px;
    position: relative;
    z-index: 10;
}

/* GLITCH EFFECT FOR TITLE */
.title {
    font-size: 3rem;
    font-family: 'Black Ops One', cursive;
    margin-bottom: 5px;
    color: #e0e0e0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.title::before,
.title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #2e3b2e 0%, #1a241a 100%);
    /* Same as body bg to hide */
    opacity: 0.8;
}

.title::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.title::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(33px, 9999px, 11px, 0);
    }

    5% {
        clip: rect(68px, 9999px, 92px, 0);
    }

    10% {
        clip: rect(2px, 9999px, 83px, 0);
    }

    15% {
        clip: rect(87px, 9999px, 3px, 0);
    }

    20% {
        clip: rect(25px, 9999px, 94px, 0);
    }

    25% {
        clip: rect(48px, 9999px, 19px, 0);
    }

    30% {
        clip: rect(98px, 9999px, 89px, 0);
    }

    35% {
        clip: rect(11px, 9999px, 58px, 0);
    }

    40% {
        clip: rect(64px, 9999px, 15px, 0);
    }

    45% {
        clip: rect(61px, 9999px, 78px, 0);
    }

    50% {
        clip: rect(36px, 9999px, 40px, 0);
    }

    55% {
        clip: rect(93px, 9999px, 49px, 0);
    }

    60% {
        clip: rect(21px, 9999px, 30px, 0);
    }

    65% {
        clip: rect(70px, 9999px, 86px, 0);
    }

    70% {
        clip: rect(6px, 9999px, 89px, 0);
    }

    75% {
        clip: rect(57px, 9999px, 3px, 0);
    }

    80% {
        clip: rect(51px, 9999px, 99px, 0);
    }

    85% {
        clip: rect(81px, 9999px, 31px, 0);
    }

    90% {
        clip: rect(69px, 9999px, 62px, 0);
    }

    95% {
        clip: rect(100px, 9999px, 37px, 0);
    }

    100% {
        clip: rect(18px, 9999px, 94px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 88px, 0);
    }

    5% {
        clip: rect(26px, 9999px, 86px, 0);
    }

    10% {
        clip: rect(5px, 9999px, 13px, 0);
    }

    15% {
        clip: rect(32px, 9999px, 20px, 0);
    }

    20% {
        clip: rect(21px, 9999px, 28px, 0);
    }

    25% {
        clip: rect(10px, 9999px, 74px, 0);
    }

    30% {
        clip: rect(66px, 9999px, 77px, 0);
    }

    35% {
        clip: rect(57px, 9999px, 48px, 0);
    }

    40% {
        clip: rect(90px, 9999px, 26px, 0);
    }

    45% {
        clip: rect(62px, 9999px, 64px, 0);
    }

    50% {
        clip: rect(4px, 9999px, 5px, 0);
    }

    55% {
        clip: rect(79px, 9999px, 39px, 0);
    }

    60% {
        clip: rect(56px, 9999px, 60px, 0);
    }

    65% {
        clip: rect(8px, 9999px, 44px, 0);
    }

    70% {
        clip: rect(32px, 9999px, 94px, 0);
    }

    75% {
        clip: rect(47px, 9999px, 17px, 0);
    }

    80% {
        clip: rect(85px, 9999px, 61px, 0);
    }

    85% {
        clip: rect(13px, 9999px, 93px, 0);
    }

    90% {
        clip: rect(31px, 9999px, 36px, 0);
    }

    95% {
        clip: rect(69px, 9999px, 15px, 0);
    }

    100% {
        clip: rect(95px, 9999px, 24px, 0);
    }
}

/* --- RESTORED FOOTER STYLE (Clean & Simple) --- */

.loading-status {
    margin-top: 5px;
    font-size: 1rem;
    color: #4caf50;
    /* Green terminal */
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
}

.blinking-cursor {
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Progress bar invisible/minimal as per user preference (or just very subtle) */
.progress-bar-container {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    opacity: 0.5;
    /* Subdued */
}

.progress-fill {
    height: 100%;
    background: #fff;
    /* White line */
    width: 0%;
    box-shadow: 0 0 5px #fff;
    transition: width 0.1s linear;
}

.progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 5px;
    display: block;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.museum-info {
    margin-top: 15px;
    font-family: 'Share Tech Mono', monospace;
    /* Consistent font */
    font-size: 1rem;
    font-weight: normal;
    /* Not bold */
    color: #ccc;
    /* Light grey */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.coordinates {
    display: block;
    font-size: 0.85rem;
    color: #bbb;
    /* Grey, NOT Cyan */
    margin-top: 3px;
    opacity: 0.8;
    font-family: 'Share Tech Mono', monospace;
}

/* COMPASS AZIMUTH ANIMATION */
.compass-anim {
    transition: transform 0.1s linear;
    animation: compass-sway 12s ease-in-out infinite alternate;
}

@keyframes compass-sway {
    0% {
        transform: translateX(-180px);
        /* Move left (Simulate turning right) */
    }

    100% {
        transform: translateX(180px);
        /* Move right (Simulate turning left) */
    }
}

/* SYNCHRONIZED MINIMAP ROTATION */
.compass-sync {
    transform-origin: center center;
    transform-box: fill-box;
    animation: minimap-rotate-sync 12s ease-in-out infinite alternate;
}

@keyframes minimap-rotate-sync {
    0% {
        transform: rotate(30deg);
        /* Map rotates right when compass numbers move left */
    }

    100% {
        transform: rotate(-30deg);
        /* Map rotates left when compass numbers move right */
    }
}

/* BOTÓN ESTILO TANQUE */
.tank-button {
    background: linear-gradient(135deg, #3a4a3b, #1f2b1d);
    color: #c0c0c0;
    font-family: 'Black Ops One', cursive, sans-serif;
    font-size: 1.2rem;
    padding: 15px 40px;
    border: 3px solid #1a1e16;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    margin-top: 20px;
    overflow: hidden;
    z-index: 100;
}

.tank-button::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px dashed rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.tank-button:hover {
    background: linear-gradient(135deg, #4b5f4c, #2a3a28);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
    color: #e0e0e0;
}

.tank-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* OVERLAY DE OFUSCACIÓN */
.obfuscation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease-in-out;
    z-index: 9999;
}

.obfuscation-active {
    opacity: 1 !important;
    pointer-events: all;
}

/* ANIMACIÓN DE SALIDA DEL TANQUE */
@keyframes tank-advance-right {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(150vw);
        /* Salir por la derecha */
    }
}

.tank-exit {
    animation: tank-advance-right 3s ease-in forwards;
}



/* HUD SUPERIOR DERECHA (MINIMAPA) */
/* Ajuste de Posición, Escala y Rotación */
.hud-tr {
    position: absolute;
    top: 40px;
    /* DISTANCIA DESDE ARRIBA */
    right: 10px;
    /* DISTANCIA DESDE DERECHA */

    /* TRANSFORMACIONES (Escala y Rotación) */
    transform-origin: center center;
    transform: scale(0.8) rotate(0deg);
    /* Mueve estos valores: scale(0.8) o rotate(45deg) */

    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

/* RESPONSIVO PARA MINIMAPA */
@media (max-width: 768px) {
    .hud-tr {
        top: 20px !important;
        right: 10px !important;
        transform: scale(0.6) rotate(0deg) !important;
        /* Más pequeño en móvil */
    }
}

/* ======================================================================== */
/* 7. MILITARY KEYPAD MODAL STYLES */
/* ======================================================================== */
.keypad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    /* Higher than HUD */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.keypad-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Container Glassmorphism */
.keypad-container {
    background: rgba(20, 30, 40, 0.9);
    border: 2px solid #00f3ff;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 30px;
    width: 340px;
    text-align: center;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.keypad-overlay.active .keypad-container {
    transform: scale(1);
}

/* Header */
.keypad-header h2 {
    color: #fff;
    font-family: 'Black Ops One', cursive;
    /* Military Font */
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #00f3ff;
}

.header-deco {
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f3ff, transparent);
    margin-bottom: 10px;
}

.header-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.header-dots span {
    width: 6px;
    height: 6px;
    background: #00f3ff;
    border-radius: 50%;
    opacity: 0.7;
}

/* Display Screen */
.keypad-display {
    background: #050505;
    border: 1px solid #334455;
    border-radius: 8px;
    height: 60px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 2rem;
    color: #00f3ff;
    letter-spacing: 15px;
    /* Spacing for the code dots/stars */
    box-shadow: inset 0 0 10px #000;
}

.keypad-display.error {
    border-color: #ff3333;
    color: #ff3333;
    animation: shake 0.4s ease-in-out;
}

.keypad-display.success {
    border-color: #00ff00;
    color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

.cursor {
    animation: blink 1s step-end infinite;
    color: rgba(0, 243, 255, 0.5);
    font-size: 1.5rem;
}

/* Grid Layout */
.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.key-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.2);
    color: #e0e0e0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.4rem;
    height: 70px;
    /* Big touch targets */
    width: 70px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.key-btn:hover {
    background: rgba(0, 243, 255, 0.15);
    border-color: #00f3ff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
    transform: translateY(-2px);
}

.key-btn:active {
    transform: translateY(1px);
    background: rgba(0, 243, 255, 0.3);
}

/* Letter/Action Styles */
.letter-btn {
    border-radius: 12px;
    /* Differentiate shape */
    font-size: 1.2rem;
    color: #00ffcc;
    width: 65px;
    height: 65px;
}

.action-btn {
    color: #ffcc00;
    border-color: rgba(255, 204, 0, 0.3);
}

.action-btn:hover {
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.4);
    border-color: #ffcc00;
}

/* Footer Scanline */
.keypad-footer {
    height: 4px;
    background: #111;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.status-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: #00f3ff;
    box-shadow: 0 0 8px #00f3ff;
    animation: scan-bar 2s ease-in-out infinite alternate;
}

@keyframes scan-bar {
    0% {
        left: 0%;
    }

    100% {
        left: 70%;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ======================================================================== */
/* 9. ANIMACIONES DE SALIDA Y TRANSICION */
/* ======================================================================== */

/* Animación de salida del tanque */
.tank-exit {
    animation: tank-drive-away 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
}

@keyframes tank-drive-away {
    0% {
        transform: translateX(0) scale(1);
    }

    10% {
        transform: translateX(-20px) scale(0.98);
        /* Retroceso previo al impulso */
    }

    100% {
        transform: translateX(200vw) scale(1.2);
        /* Salir disparado a la derecha */
        opacity: 0;
    }
}

/* Ensure existing animations don't conflict */
.tank-container.tank-exit svg {
    animation: none;
    /* Stop bouncing while leaving */
}

/* Pantalla de Oscurecimiento (Fade to Black) */
.obfuscation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    /* Maximo nivel */
    transition: opacity 2s ease-in-out;
}

.obfuscation-overlay.obfuscation-active {
    opacity: 1;
    pointer-events: auto;
}

/* ======================================================================== */
/* 8. ESTILOS DE TECLADO MILITAR (SUPERIOR / MEJORADO) */
/* ======================================================================== */

/* CONTENEDOR PRINCIPAL FLOTANTE */
.keypad-container {
    background: rgba(10, 15, 20, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid #00f3ff;
    box-shadow:
        0 0 20px rgba(0, 243, 255, 0.15),
        inset 0 0 50px rgba(0, 0, 0, 0.8),
        0 0 0 4px rgba(0, 0, 0, 0.5);
    /* Borde extra negro */
    border-radius: 12px;
    /* Menos redondeado, más táctico */
    padding: 25px;
    width: 360px;
    text-align: center;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;

    /* Textura de fondo (Rejilla sutil) */
    /* Grid removed for cleaner look */
    overflow: hidden;
}

/* Decoraciones de esquina */
.keypad-container::before,
.keypad-container::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #00f3ff;
    transition: all 0.5s ease;
}

.keypad-container::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.keypad-container::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}



/* HEADER MEJORADO */
.keypad-header .header-decoration-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: rgba(0, 243, 255, 0.6);
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(0, 243, 255, 0.2);
    padding-bottom: 5px;
}

.confidential-text {
    animation: blink-text 3s infinite;
    color: #ff3333;
    /* Rojo alerta */
    font-weight: bold;
}

/* ICONO DE SEGURIDAD (CANDADO ANIMADO) */
.security-status-icon {
    height: 60px;
    margin: 10px auto;
    position: relative;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lock-icon {
    width: 40px;
    height: 50px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.lock-shackle {
    width: 24px;
    height: 20px;
    border: 4px solid #00f3ff;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.5s ease;
}

.lock-body {
    width: 36px;
    height: 30px;
    background: #00f3ff;
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.key-hole {
    width: 8px;
    height: 12px;
    background: #111;
    border-radius: 4px;
}

/* Estado DESBLOQUEADO (Animación) */
.keypad-container.unlocked .lock-shackle {
    /* Lift up and swing left */
    transform: translateX(-50%) translateY(-10px) rotate(-180deg);
    /* Swing 180 degrees left */
    transform-origin: 15% 100%;
    /* Pivot on left leg */
    border-color: #00ff00;
    transition: all 0.4s cubic-bezier(0.5, 1.8, 0.6, 0.8);
}

.keypad-container.unlocked .lock-body {
    background: #00ff00;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.8);
}

.keypad-container.unlocked {
    border-color: #00ff00;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
}

.keypad-header h2 {
    font-family: 'Black Ops One', cursive;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin: 10px 0;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

/* PUNTOS DE ESTADO (Animation Loading) */
.header-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #334455;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    background: #00f3ff;
    box-shadow: 0 0 8px #00f3ff;
}

/* PANTALLA DE VISUALIZACION */
.keypad-display {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #334455;
    border-radius: 4px;
    height: 55px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 2rem;
    color: #00f3ff;
    letter-spacing: 12px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
    position: relative;
    overflow: hidden;
}

/* Linea de escaneo constante en la pantalla */
.keypad-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 243, 255, 0.3);
    animation: scan-line-display 3s linear infinite;
    opacity: 0.5;
}

@keyframes scan-line-display {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* Estados de Error y Éxito */
.keypad-display.error {
    color: #ff3333;
    border-color: #ff3333;
    background: rgba(50, 0, 0, 0.5);
    animation: shake 0.4s ease-in-out;
    box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.3);
}

.keypad-display.success {
    color: #00ff00;
    border-color: #00ff00;
    background: rgba(0, 50, 0, 0.5);
    box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.3);
    text-shadow: 0 0 10px #00ff00;
}

/* BOTONES (Rejilla) */
.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    margin-bottom: 25px;
    padding: 0 10px;
}

.key-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 243, 255, 0.2);
    color: #e0e0e0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.3rem;
    height: 55px;
    width: 65px;
    /* Más ancho pero menos alto */
    margin: 0 auto;
    /* Centrar en celda */
    border-radius: 6px;
    /* Forma de tecla de teclado mecánico */
    cursor: pointer;
    transition: all 0.1s ease;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Efecto Hover Futurista */
.key-btn:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: #00f3ff;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
    transform: translateY(-2px);
    color: #fff;
}

/* Efecto Click "Press" */
.key-btn:active,
.key-btn.pressed {
    transform: translateY(1px) scale(0.95);
    background: rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.2);
    color: #000;
    /* Invertir color al presionar */
    font-weight: bold;
}

/* Estilos Específicos */
.letter-btn {
    border-color: rgba(0, 255, 204, 0.3);
    color: #00ffcc;
    font-weight: bold;
}

.letter-btn:hover {
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

/* BOTONES DE ACCIÓN (Grandes abajo) */
.keypad-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    gap: 15px;
}

.action-btn {
    flex: 1;
    height: 50px;
    background: transparent;
    border: 1px solid;
    border-radius: 6px;
    font-family: 'Black Ops One', cursive;
    /* Fuente militar */
    font-size: 1rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn {
    border-color: #ff4444;
    color: #ff4444;
    background: rgba(255, 68, 68, 0.05);
}

.delete-btn:hover {
    background: #ff4444;
    color: #000;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
}

.enter-btn {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.05);
}

.enter-btn:hover {
    background: #00ff00;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

/* FOOTER STATUS BAR */
.keypad-footer {
    margin-top: 20px;
    height: 6px;
    background: #111;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin: 20px 10px 0 10px;
}

.status-light {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: #00f3ff;
    box-shadow: 0 0 10px #00f3ff;
    animation: status-oscilate 2s ease-in-out infinite alternate;
}

@keyframes status-oscilate {
    0% {
        left: 0%;
        width: 20%;
        background: #00f3ff;
    }

    50% {
        width: 60%;
        background: #00ffcc;
    }

    100% {
        left: 80%;
        width: 20%;
        background: #00f3ff;
    }
}

@keyframes blink-text {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}