/* RESET & BASE */
* { box-sizing: border-box; }
body {
    cursor: url('https://cdn.cursors-4u.net/previews/starcraft-pointer-380c63f0-32.webp') 32 32, auto !important;
    margin: 0;
    padding: 0;
    background-color: #000;
    /* OPCIÓN DEFINITIVA: El fondo se ancla al body y no se mueve */
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.238 8.218c-0.247 1.050-1.19 1.832-2.315 1.832-1.314 0-2.379-1.065-2.379-2.379 0-0.234 0.034-0.46 0.098-0.674l-7.851-4.778 0.212 9.172c1.016 0.271 1.765 1.197 1.765 2.299 0 1.314-1.065 2.379-2.379 2.379-0.214 0-0.421-0.029-0.618-0.082l-4.768 7.835 8.921-0.206c0.25-1.046 1.191-1.824 2.313-1.824 1.314 0 2.379 1.065 2.379 2.379 0 0.186-0.022 0.366-0.062 0.539l8.051 4.9-0.2-8.644c-1.13-0.184-1.994-1.165-1.994-2.348 0-1.314 1.065-2.379 2.379-2.379 0.19 0 0.375 0.023 0.553 0.065l5.050-8.297-9.155 0.212zM18.116 20.102c-2.314 1.336-5.272 0.543-6.607-1.771s-0.543-5.272 1.77-6.607c2.314-1.336 5.272-0.543 6.607 1.771s0.543 5.272-1.77 6.608z' fill='%230b1a0b' fill-opacity='0.8'/%3E%3C/svg%3E");
    background-attachment: fixed; /* ESTO ES LO QUE HACE QUE NO SE MUEVA */
    background-repeat: repeat;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
}

/* MONITOR CRT FRAME */
.crt-screen {
    width: 100vw;
    max-width: 1200px; /* Un ancho máximo para que no se estire infinito en pantallas 4K */
    min-height: 100vh;
    background: rgba(5, 5, 5, 0.9); /* Un poco de transparencia para ver el fondo */
    position: relative;
    border-left: 20px solid #1a1a1a;
    border-right: 20px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: inset 0 0 100px rgba(0,0,0,1);
    /* Efecto Scanlines */
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 4px;
}


/* LATERALES DE SHURIKENS FIJOS */
.shuriken-side {
    position: fixed;
    top: 0;
    width: 80px;
    height: 100vh;
    background-color: #1a4d1a;
    background-image: inherit; /* Hereda el patrón del body */
    z-index: 1;
    border-left: 3px solid #39ff14;
    border-right: 3px solid #39ff14;
}
.left-side { 
    left: 0; 
}
.right-side { 
    right: 0; 
}

header { text-align: center; margin-bottom: 10px; z-index: 2; }
h1 {
    color: #d4ff00;
    font-size: 2.8em;
    text-shadow: 0 0 10px #d4ff00, 0 0 20px #39ff14;
    margin: 0;
}
nav { margin: 10px 0; }
nav a {
    color: #fffb00;
    text-decoration: none;
    border: 2px solid #39ff14;
    padding: 2px 10px;
    margin: 0 5px;
    background: #000;
    font-size: 14px;
    box-shadow: 0 0 8px #39ff14;
}

/* MODAL mIRC */
#modal-mirc {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background: #fff;
    border: 3px outset #fff;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.6);
    z-index: 3500;
    flex-direction: column;
    font-family: 'Courier New', Courier, monospace;
}


.mirc-header {
    background: linear-gradient(90deg, #000080 0%, #08216b 100%);
    color: #fff;
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}

.mirc-body {
    background: #fff;
    color: #000;
    padding: 10px;
    height: 250px;
    border: 2px inset #fff;
    margin: 2px;
    font-size: 13px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mirc-time { color: #808080; }
.mirc-action { color: #0000ff; }
.mirc-error { color: #ff0000; font-weight: bold; }

.mirc-input {
    margin-top: auto;
    border-top: 1px solid #c0c0c0;
    padding-top: 5px;
}

.cursor-line {
    animation: blinker 0.8s step-end infinite;
    font-weight: bold;
}


/* MODAL HISTORIA N64 */
#modal-historia {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 80vh;
    background: #000;
    border: 4px solid #33CCFF; /* Cyan N64 */
    box-shadow: 0 0 20px #33CCFF;
    z-index: 4000;
    flex-direction: column;
}

.n64-header {
    background: #33CCFF;
    color: #000;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

.n64-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative; /* Para que Layer1 se posicione bien */
}

/* Estilo para que el código viejo se vea bien */
.legacy-content {
    font-family: "MS Sans Serif", Geneva, sans-serif;
    color: #FFFFCC;
}

.legacy-content img {
    border: 2px solid #33CCFF;
    margin: 10px;
}


/* ESTILO TIENDA MERSH */
#modal-mersh {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 850px;
    height: 90vh;
    background: #c0c0c0; /* Gris Windows 98 */
    border: 3px outset #fff;
    z-index: 7000;
    flex-direction: column;
    font-family: 'MS Sans Serif', Arial, sans-serif;
}

.mersh-header {
    background: linear-gradient(90deg, #800080 0%, #ff00ff 100%);
    color: #fff;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.mersh-body {
    padding: 10px;
    overflow-y: auto;
    background: #fff;
    margin: 5px;
    border: 2px inset #fff;
}

.mersh-alert {
    background: #ff0;
    color: #000;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 10px;
}

.mersh-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.product-card {
    border: 1px solid #808080;
    padding: 8px;
    background: #f0f0f0;
    text-align: center;
    box-shadow: 2px 2px 0px #000;
}

.img-placeholder {
    width: 100%;
    height: 120px;
    background: #000;
    border: 2px inset #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.img-placeholder img {
    max-width: 100%;
    max-height: 100%;
}

.p-name { font-weight: bold; font-size: 12px; color: #000080; margin: 5px 0; }
.p-info { font-size: 10px; color: #333; }

.buy-btn {
    background: #c0c0c0;
    border: 2px outset #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 10px;
    cursor: pointer;
    margin-top: 5px;
}

.buy-btn:active { border-style: inset; }

.mersh-footer {
    background: #c0c0c0;
    font-size: 9px;
    padding: 5px;
    text-align: center;
    border-top: 1px solid #808080;
}


/* CONTENEDOR DE NOTICIAS */
.news-ticker-container {
    max-width: 1040px; /* Alineado con la grid */
    margin: 0 auto 20px auto;
    background: #000;
    border: 2px solid #39ff14;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
    font-family: 'Courier New', Courier, monospace;
    z-index: 2;
}

.news-header {
    background: #1a4d1a;
    color: #39ff14;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #39ff14;
}

.news-body {
    padding: 10px;
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
}

.news-date {
    color: #fffb00; /* Amarillo para las fechas */
    font-weight: bold;
}

.news-footer {
    background: #000;
    color: #39ff14;
    font-size: 9px;
    text-align: right;
    padding: 2px 10px;
    border-top: 1px dashed #39ff14;
}

/* Efecto para que el marquee se vea más CRT */
.news-body marquee p {
    margin: 5px 0;
    text-transform: uppercase;
}


/* ÁREA DE CONSTRUCCIÓN VINTAGE */
.construction-area {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

.construction-gif {
    /* La mayoría de estos GIFs eran pequeños, así que mantenemos su escala original */
    max-width: 150px; 
    filter: drop-shadow(0 0 5px #fffb00); /* Un brillo amarillo para que resalte */
}

.construction-area p {
    color: #fffb00;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px #000;
}

.assets-layer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    z-index: 2;
}
.asset-box { border: 2px solid; padding: 5px; background: #000; text-align: center; }
.under-con { border-color: #ff00de; color: #00ffff; box-shadow: 0 0 10px #ff00de; width: 120px; }
.ninja-face { border-color: #00d2ff; padding: 10px; }
.gody-rules { border-color: #fffb00; color: #fffb00; transform: rotate(5deg); box-shadow: 0 0 10px #fffb00; }


/* ÁREA DE CONTACTO CON GIF */
.contact-area {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Lo mantiene a la derecha como estaba antes */
    gap: 10px; /* Espacio entre el GIF y el link */
    margin-top: 15px;
}

.contact-gif {
    width: 30px; /* Tamaño discreto pero visible */
    height: auto;
    image-rendering: pixelated; /* Para que no se vea borroso al ser pequeño */
}

.contact-link {
    color: #00d2ff;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    margin-top: 0 !important; /* Quitamos el margen superior que tenía antes */
}

.contact-link:hover {
    color: #39ff14;
    text-decoration: underline;
}


/* CD PLAYER SELECTOR - CENTRADO */
.cd-player {
    background: #c0c0c0; 
    border: 2px outset #fff; 
    padding: 10px;
    width: 600px; 
    color: #000; 
    box-shadow: 4px 4px 10px #000;
    margin: 10px auto; /* ESTO CENTRA EL DIV */
    display: block;
}
.cd-display {
    background: #000080; color: #00ff00; font-family: monospace;
    padding: 5px; margin-bottom: 10px; border: 2px inset #fff;
    font-size: 12px; height: 40px; overflow: hidden;
    text-align: left;
}
.cd-buttons { display: flex; justify-content: center; gap: 5px; }
.cd-buttons button {
    background: #c0c0c0; border: 2px outset #fff; cursor: pointer;
    font-size: 11px; padding: 4px 8px; font-weight: bold;
}
.cd-buttons button:active { border-style: inset; }

/* ANIMATED NINJA */
.ninja-run-area { 
    height: 40px; 
    position: relative; 
    width: 100%; 
    margin: 15px 0; 
}
.running-ninja {
    width: 60px;
    position: absolute;
    animation: run 6s linear infinite alternate;
}
@keyframes run { from { left: 15%; transform: scaleX(1); } to { left: 80%; transform: scaleX(-1); } }

/* GRID CONTENT */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    z-index: 2;
    padding: 0 80px;
}
.neon-container {
    border: 3px solid #39ff14;
    border-radius: 15px;
    padding: 15px;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px #39ff14;
    position: relative;
}
.full-row { grid-column: 1 / span 2; }
.neon-container h2 { color: #39ff14; font-size: 16px; margin-top: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.neon-container p { color: #fff; font-size: 13px; line-height: 1.4; }
.neon-container a:visited {
    color: #ff00ff; /* Los links visitados cambian a magenta, muy 90s */
}


/* MODAL VCR */
#modal-vcr {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000; /* Encima de todos los modales */
    background: transparent; /* El fondo es el VCR */
}

/* CHASIS DEL VHS */
.vcr-frame {
    background: #2a2a2a; /* Plástico negro/gris oscuro de VCR */
    border: 6px solid #1a1a1a;
    border-radius: 10px;
    padding: 10px;
    width: 640px; /* Ancho típico de video SD */
    box-shadow: 15px 15px 0px rgba(0,0,0,0.7);
    color: #39ff14; /* Letras neón de display */
    font-family: monospace;
}

.vcr-header {
    text-align: center;
    color: #fff;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

/* PANTALLA CRT DEL VCR */
.vcr-screen-container {
    position: relative;
    background: #000;
    width: 100%;
    height: 480px; /* Proporción 4:3 */
    border: 4px inset #666;
    margin-bottom: 10px;
    overflow: hidden;
}

/* Simulación de On-Screen Display (OSD) verde pixelado */
.vcr-osd {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #39ff14;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px #000;
    display: none; /* Se activa con JS */
}

/* BOTONES VHS */
.vcr-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    background: #1a1a1a;
    border: 2px inset #fff;
}

.vcr-controls button {
    background: #c0c0c0; /* Botones grises mecánicos */
    border: 3px outset #fff;
    padding: 5px 15px;
    cursor: pointer;
    font-weight: bold;
    font-family: sans-serif;
}
.vcr-controls button:active { border-style: inset; }

.vcr-slot {
    width: 200px;
    height: 20px;
    background: #000;
    border: 2px inset #fff;
    text-align: center;
    font-size: 10px;
    color: #666;
}

/* FILTROS ULTRA VINTAGE PARA LA FOTO */
/* ESTILO ESPECÍFICO PARA CENTRAR EL PERGAMINO */
.pergamino-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.foto-pergamino-container {
    display: inline-block; /* Evita que el contenedor se estire al 100% */
    position: relative;
    border: 3px inset #c0c0c0;
    line-height: 0; /* Quita espacio extra inferior */
}

.foto-pergamino {
    width: 200px;
    height: 200px;
    object-fit: cover;
    /* El power vintage: ruido, sepia, contraste y desenfoque */
    filter: 
        contrast(1.5) 
        sepia(60%) 
        blur(0.8px)
        brightness(0.9)
        hue-rotate(-10deg);
    image-rendering: pixelated; /* Look 8-bit */
}

/* Capa de ruido estático (textura) */
.foto-pergamino-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('old/noise.png');
    opacity: 0.3;
    pointer-events: none;
}

/* CITA CENTRADA Y DESALINEADA */
.cita-autor {
    display: inline-block; /* Mantiene el ancho del texto solamente */
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #000;
    background: #ffff00;
    padding: 5px 15px;
    border: 1px dashed #000;
    margin-top: 15px; /* Espacio entre foto y cita */
    transform: rotate(-1deg); /* Mantenemos el look "pegado a mano" */
    box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

/* ESTILOS EL PC LOKO (MODAL VINTAGE) */
#modal-pc-loko {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: #c0c0c0;
    border: 4px outset #fff;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
    z-index: 999;
    flex-direction: column;
    font-family: 'Arial', sans-serif; /* Cambio a Arial para el feeling Win95 */
}
.pc-header {
    background: #000080;
    color: #fff;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}
.pc-close {
    background: #c0c0c0;
    border: 2px outset #fff;
    color: #000;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 12px;
}
.pc-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    background: #fff;
    margin: 10px;
    border: 2px inset #fff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}
.gallery-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border: 3px ridge #c0c0c0;
    filter: sepia(30%) contrast(1.2); /* Efecto foto vieja */
}
.gallery-img:hover {
    border-color: #000080;
    cursor: pointer;
}
.pc-loko-link { color: #ff00de; text-decoration: underline; cursor: pointer; }
.pc-loko-link:hover { color: #39ff14; }
/* MODAL ZOOM (FOTO GRANDE) */
#modal-zoom {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 1000; background: #c0c0c0; border: 3px outset #fff; padding: 4px; box-shadow: 15px 15px 0px rgba(0,0,0,0.6);
}
.zoom-header { 
    background: #808080; 
    color: #fff; 
    font-size: 12px; 
    padding: 3px 10px; 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 4px; }
#zoom-img { 
    max-width: 90vw; 
    max-height: 80vh; 
    border: 2px inset #fff; 
    display: block; }


/* ESTILOS POPUP VINTAGE (Alerta de Sistema) */
#modal-alerta-shuriken {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #c0c0c0;
    border: 3px outset #fff;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.6);
    z-index: 1001; /* Por encima de todo */
    font-family: 'Arial', sans-serif;
    color: #000;
}

.alert-header {
    background: #000080;
    color: #fff;
    padding: 3px 8px;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}

.alert-body {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #c0c0c0;
}

.alert-icon {
    font-size: 30px;
    color: #fffb00;
    text-shadow: 1px 1px #000;
}

.alert-text {
    font-size: 12px;
    line-height: 1.3;
}

.alert-footer {
    text-align: center;
    padding-bottom: 10px;
    background: #c0c0c0;
}

.alert-btn {
    background: #c0c0c0;
    border: 2px outset #fff;
    padding: 4px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}
.alert-btn:active { border-style: inset; }


/* MODAL ROSA VINTAGE */
#modal-manual-rosa {
    display: none;
    position: fixed;
    top: 45%; left: 55%; /* Desplazado para que se vea el desorden de ventanas */
    transform: translate(-50%, -50%);
    width: 350px;
    background: #ff66cc; /* Rosa chicle vintage */
    border: 4px outset #ffccff;
    box-shadow: 10px 10px 0px rgba(255, 0, 222, 0.3);
    z-index: 1500;
    flex-direction: column;
    font-family: 'Comic Sans MS', 'Arial', cursive; /* El toque maestro del mal gusto */
    color: #fff;
    text-align: center;
}

.rosa-header {
    background: #ff00de; /* Magenta fuerte */
    color: #fff;
    padding: 5px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-bottom: 2px solid #fff;
}

.rosa-body {
    padding: 20px;
    background: #ff99e6; /* Rosa más suave */
    margin: 5px;
    border: 2px inset #fff;
}

.rosa-footer {
    background: #ff66cc;
    padding: 5px;
    font-size: 10px;
    border-top: 1px solid #fff;
}

.biblioteca-link { color: #ff00de; text-decoration: underline; cursor: pointer; }
.biblioteca-link:hover { color: #39ff14; }


.contact-link { color: #00d2ff; text-decoration: none; font-weight: bold; display: block; text-align: right; margin-top: 10px; }
.counter { background: #000; border: 1px solid #39ff14; padding: 2px 5px; color: #fffb00; letter-spacing: 2px; }

#modal-recursos {
    display: none;
    position: fixed;
    top: 55%; left: 45%; /* Un poco desplazado para que no tape todo el PC Loko si ambos están abiertos */
    transform: translate(-50%, -50%);
    width: 450px;
    background: #c0c0c0;
    border: 4px outset #fff;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
    z-index: 1000;
    flex-direction: column;
    font-family: 'Arial', sans-serif;
}


/* MODAL ESTILO DIABLO */
#modal-gody {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    background: #1a0505; /* Rojo sangre muy oscuro */
    border: 6px double #5c0000; /* Borde gótico */
    box-shadow: 0 0 40px #ff0000, inset 0 0 20px #000;
    z-index: 6000; /* Por encima de todo lo conocido */
    flex-direction: column;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

.diablo-header {
    background: linear-gradient(0deg, #300 0%, #600 100%);
    color: #ffcc00; /* Dorado Diablo */
    padding: 8px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 2px solid #ffcc00;
    position: relative;
}

.diablo-gem {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px;
    background: #ff0000;
    box-shadow: 0 0 10px #ff0000;
    border-radius: 50%;
}
.diablo-gem.left { left: 15px; }
.diablo-gem.right { right: 45px; }

.diablo-close {
    position: absolute;
    right: 5px; top: 5px;
    background: #000;
    color: #ffcc00;
    border: 1px solid #ffcc00;
    cursor: pointer;
    font-size: 16px;
}

.diablo-body {
    padding: 20px;
    background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
    position: relative;
    overflow: hidden;
}

/* Efecto de fuego infernal */
.fire-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 50px;
    background: linear-gradient(transparent, rgba(255, 68, 0, 0.4));
    pointer-events: none;
}

.gody-frame {
    border: 4px inset #5c0000;
    background: #000;
    padding: 10px;
}

.gody-frame img {
    max-width: 100%;
    filter: sepia(20%) saturate(1.5) contrast(1.1);
    box-shadow: 0 0 20px #ff0000;
}

.diablo-footer {
    color: #ffcc00;
    padding: 10px;
    font-size: 11px;
}

.gody-subtitle {
    font-style: italic;
    color: #808080;
    margin-top: 10px;
}


/* CONTENEDOR DEL FOOTER (LAYOUT) */
.footer-container {
    grid-column: 1 / span 2; /* Ocupa todo el ancho de la grid */
    display: flex;
    justify-content: space-between; /* Empuja los elementos a los extremos */
    align-items: flex-end; /* Alinea por la base */
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px dashed #39ff14; /* Separación sutil */
}
/* Ajuste para que el contador no flote por toda la pantalla */
.visitor-area {
    position: static; /* Quitamos el position absolute anterior */
    text-align: right;
    color: #fff;
    z-index: 2;
    min-width: 200px;
}

/* Ajuste para el cuadro de texto de Netscape */
.optimizado-box p {
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Opcional: para ese look de terminal técnica */
    font-size: 10px;
}

.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* PANTALLA DE ERROR 404 FINGIDO */
#fake-404 {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #fff; /* Blanco puro de error de navegador antiguo */
    color: #000;
    padding: 50px;
    z-index: 9999;
    font-family: "Times New Roman", Times, serif;
    text-align: left;
    cursor: default !important;
}

#fake-404 h1 {
    font-size: 32px;
    text-shadow: none;
    color: #000;
}

#fake-404 hr {
    border: 0;
    border-top: 1px solid #000;
    margin: 20px 0;
}

#fake-404 .address {
    font-style: italic;
    font-size: 14px;
}

/* VENTANA DE DESCARGA VINTAGE */
#modal-download {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background: #c0c0c0;
    border: 3px outset #fff;
    padding: 15px;
    z-index: 2100;
    font-family: Arial, sans-serif;
    color: #000;
}

.progress-container {
    width: 100%;
    height: 20px;
    background: #fff;
    border: 2px inset #fff;
    margin: 10px 0;
    position: relative;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #000080; /* Azul Windows clásico */
}

#modal-email-error {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: #c0c0c0;
    border: 3px outset #fff;
    box-shadow: 12px 12px 0px rgba(0,0,0,0.8);
    z-index: 3000; /* Prioridad absoluta */
    font-family: 'Arial', sans-serif;
}

.webring-box {
    text-align: center; /* Centra el texto h3 y los inline */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente los hijos (h3 y content) */
    justify-content: center; /* Centra verticalmente si hay espacio de sobra */
    border: 2px dashed #39ff14 !important;
    margin-top: 20px;
    background: rgba(0, 50, 0, 0.2);
    width: 100%; /* Asegura que ocupe todo el ancho de la grid */
}

/* AJUSTE PARA EL ENCABEZADO DEL WEBRING */
.webring-box h3 {
    color: #d4ff00; /* Amarillo/Verde neón para que resalte sobre el negro */
    text-shadow: 0 0 8px #d4ff00; /* Efecto de brillo radioactivo */
    margin-top: 0;
    font-size: 14px;
    letter-spacing: 1px;
}

/* También aseguremos que el párrafo sea visible */
.webring-box p {
    color: #ffffff; /* Texto blanco para el estado del nodo */
    font-size: 11px;
    margin: 5px 0;
}

.webring-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el GIF, el P y los Links */
    width: 100%;
}

.webring-links {
    display: flex;
    justify-content: center; /* Centra los links en su propia línea */
    flex-wrap: wrap; /* Por si la pantalla es muy chica, que no se rompa */
    gap: 15px; /* Espacio uniforme entre links */
    margin-top: 5px;
}

.webring-links a {
    color: #ff00ff; /* Un fucsia chillón para resaltar */
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
    font-size: 12px;
}

.webring-links a:hover {
    background: #ff00ff;
    color: #000;
}

.webring-gif {
    border: 1px solid #39ff14;
    padding: 2px;
    background: #000;
    margin-bottom: 5px;
}


/* CONTENEDOR DE AWARDS 88x31 */
.awards-container {
    padding: 15px;
    text-align: center;
    background: #000;
    border-top: 1px dashed #39ff14;
    margin-top: 20px;
}

.awards-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.awards-grid img {
    width: 88px;
    height: 31px;
    image-rendering: pixelated;
    border: 1px solid #666;
}

/* BOTONES PERSONALIZADOS 88x31 (Hechos con puro CSS) */
.custom-award {
    width: 88px;
    height: 31px;
    display: flex;
    flex-direction: column;
    font-family: "Verdana", sans-serif;
    font-size: 8px;
    font-weight: bold;
    border: 1px solid #fff;
    cursor: default;
    overflow: hidden;
}

.award-top {
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.award-bottom {
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
}

/* Variación Cerumen Approved */
.cerumen-award { border-color: #39ff14; }
.cerumen-award .award-top { background: #000; color: #39ff14; }
.cerumen-award .award-bottom { background: #39ff14; color: #000; }

/* Variación Anti-Marcelo */
.anti-marcelo { border-color: #ff0000; }
.anti-marcelo .award-top { background: #ff0000; color: #fff; }
.anti-marcelo .award-bottom { background: #000; color: #ff0000; }

.free-cola { border-color: #0000ff; }
.free-cola .award-top { background: #0000ff; color: #fff; font-style: italic; }
.free-cola .award-bottom { background: #ff0000; color: #fff; font-weight: 900; }


/* CONTADOR ODÓMETRO VINTAGE */
.visitor-area {
    text-align: center;
    background: #222;
    padding: 5px;
    border: 2px outset #808080;
    width: 160px;
}

.odometer-label {
    font-size: 8px;
    color: #c0c0c0;
    margin-bottom: 3px;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

.odometer-frame {
    background: #000;
    border: 2px inset #fff;
    padding: 2px;
    display: inline-flex;
    gap: 1px;
}

.digit {
    background: #111;
    color: #39ff14; /* Verde neón */
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 18px;
    padding: 0 4px;
    border-right: 1px solid #333;
    /* Efecto de curvatura de odómetro */
    background: linear-gradient(0deg, #000 0%, #333 50%, #000 100%);
    text-shadow: 0 0 5px #39ff14;
}

.odometer-status {
    font-size: 9px;
    color: #ff0000;
    margin-top: 3px;
    font-weight: bold;
    animation: blinker 0.5s step-end infinite;
}


/* TERMINAL STARCRAFT STYLE */
#starcraft-terminal {
    display: none;
    position: fixed;
    bottom: 20px; right: 20px;
    width: 400px;
    height: 250px;
    background: rgba(0, 20, 40, 0.9);
    border: 3px solid #4a4a4a;
    box-shadow: 0 0 15px #00ffff, inset 0 0 10px #000;
    z-index: 8000;
    flex-direction: column;
    font-family: 'Courier New', Courier, monospace;
}

.terminal-header {
    background: #1a1a1a;
    color: #00ffff;
    font-size: 10px;
    padding: 4px 8px; /* Ajustamos el padding lateral */
    border-bottom: 2px solid #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: space-between; /* ESTO EMPUJA EL BOTÓN A LA DERECHA */
}

.terminal-close {
    background: #4a4a4a;
    color: #fff;
    border: 1px solid #00ffff;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    font-family: 'Courier New', monospace;
    transition: background 0.2s;
}

.terminal-close:hover {
    background: #ff0000; /* Efecto de alerta al pasar el mouse */
    color: #000;
}

.status-light {
    width: 8px; height: 8px;
    background: #0f0;
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 5px #0f0;
    animation: blinker 1s linear infinite;
}

.terminal-screen {
    flex-grow: 1;
    padding: 10px;
    color: #39ff14;
    font-size: 12px;
    overflow-y: auto;
    text-shadow: 0 0 2px #39ff14;
}

.input-line { display: flex; }

#terminal-input {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    flex-grow: 1;
    font-family: inherit;
    font-size: 12px;
}

.terminal-footer {
    padding: 5px;
    background: #111;
    display: flex;
    align-items: center;
    gap: 10px;
}

.energy-bar {
    width: 100px; height: 8px;
    border: 1px solid #00ffff;
    background: #000;
}

.energy-fill {
    width: 55%; 
    height: 100%;
    background: #00ffff;
    transition: width 2s ease-in-out, background 0.5s; /* Movimiento suave */
}

/* EFECTO POSESIÓN GODY */
.gody-possession {
    animation: shake 0.15s infinite; /* Un poco más rápido para mayor pánico */
    filter: invert(1) contrast(1.5) brightness(1.2) !important;
    background-color: #000 !important;
    transition: filter 0.1s;
}

/* El Overlay con estilo de advertencia militar */
#gody-virus-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 0, 0, 0.2);
    border: 20px double #ff0000; /* Marco de advertencia */
    box-sizing: border-box;
    z-index: 9999;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gody-virus-overlay marquee {
    color: #fff;
    font-family: "Impact", sans-serif;
    font-size: 80px;
    text-shadow: 5px 5px #000;
}


/* MODAL ZONA PROHIBIDA */
#modal-forbidden {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    background: #ff0066; /* Rosa fuerte erótico */
    border: 5px ridge #ffd700; /* Borde dorado "lujoso" */
    box-shadow: 0 0 50px rgba(255, 0, 102, 0.8);
    z-index: 5000;
    flex-direction: column;
    text-align: center;
    font-family: 'Times New Roman', serif;
}

.forbidden-header {
    background: #000;
    color: #ff0066;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 2px solid #ffd700;
    display: flex;
    justify-content: space-between;
}

.forbidden-body {
    padding: 15px;
    background: radial-gradient(circle, #660033 0%, #000000 100%);
    color: #ffd700;
}

.forbidden-text {
    color: #ff0066;
    font-weight: bold;
    text-shadow: 2px 2px #000;
    margin-bottom: 10px;
}

.forbidden-frame {
    border: 3px double #ffd700;
    padding: 15px;
    background: #000;
}

.forbidden-frame img {
    max-width: 100%;
    filter: contrast(1.2) brightness(1.1); /* Efecto foto de revista vieja */
}


/* EL SCROLLBAR NINJA-VINTAGE (Estilo Win95 / Neón) */
/* 1. Definimos el ancho del scrollbar */
::-webkit-scrollbar {
    width: 16px;
    background-color: #c0c0c0; /* Gris Windows 95 */
    border-left: 1px solid #000;
}

/* 2. El "Track" (el fondo por donde se mueve) */
::-webkit-scrollbar-track {
    background-color: #0b1a0b; /* Verde oscuro para que combine con el fondo */
    border: 1px inset #fff;
}

/* 3. La "Barra" (lo que arrastras) */
::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    border: 2px outset #fff; /* Efecto 3D de botón de Windows */
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #d0d0d0;
}

/* 4. Los botones de flecha (flechas simuladas con gradientes) */
::-webkit-scrollbar-button:single-button {
    background-color: #c0c0c0;
    display: block;
    border: 2px outset #fff;
    height: 16px;
    width: 16px;
}

/* Flecha Arriba */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black'><polygon points='50,20 20,80 80,80'/></svg>");
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Flecha Abajo */
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black'><polygon points='50,80 20,20 80,20'/></svg>");
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center;
}


body.mode-office {
    filter: grayscale(0.5); /* Un look más sobrio y aburrido de oficina */
    background-color: #c0c0c0 !important;
}

body.mode-hacker {
    background-color: #000 !important;
    color: #39ff14 !important;
    text-shadow: 0 0 5px #39ff14;
}

body.mode-deepweb {
    background-color: #200 !important;
    color: #f00 !important;
    animation: subtle-shake 5s infinite; /* Un temblor casi imperceptible */
}