:root {
    --neon: #00ff33;
    --dark: #000000;
}

/* Base unificada para PC y Mobile */
body {
    background-color: var(--dark);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* En PC lo centra perfecto */
    height: 100vh;
    width: 100vw;
    overflow: hidden; 
    cursor: crosshair;
    touch-action: none; 
}

/* LA SOLUCIÓN DEFINITIVA PARA EL MAPEO */
.rack-container.unified-vertical {
    position: relative;
    /* inline-block hace que el contenedor abrace a la imagen sin sobrar ni un pixel */
    display: inline-block; 
}

.chassis-img {
    display: block;
    /* Estos dos límites son la magia: */
    max-width: 100vw;   /* En celu, nunca será más ancho que la pantalla */
    max-height: 95vh;   /* En PC, NUNCA será más alto que tu monitor (adiós al zoom 67%) */
    
    width: auto;
    height: auto;
    pointer-events: none; 
}

/* FIX PARA EL MARGEN EN CELULAR */
@media (max-width: 768px) {
    body {
        align-items: flex-start; /* Deja de centrarlo, lo pega arriba */
    }
    .rack-container.unified-vertical {
        margin-top: 3vh; /* Un margen sutil para que no quede pegado al reloj/notch del celu */
    }
}

.control-surface {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
}

/* --- 1. OSCILOSCOPIO (Circular, arriba) --- */
.scope-display {
    position: absolute;
    left: 50%;
    top: 25%; /* Tu valor calibrado */
    transform: translate(-50%, -50%);
    width: 45%;    
    height: 18%;   
    border-radius: 50%; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none; 
    z-index: 10; 
}

#waveCanvas {
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

.inner-scope-counter {
    position: absolute;
    top: 85%; 
    font-family: 'Courier New', monospace;
    color: var(--neon);
    font-size: 1rem;
    text-shadow: 0 0 8px var(--neon);
    z-index: 15;
    background: rgba(0,0,0,0.5);
    padding: 2px 8px;
    border-radius: 3px;
}

/* --- 2. NUEVA PANTALLA RECTANGULAR LCD --- */
.terminal-screen {
    position: absolute;
    left: 50%;
    top: 53.5%; /* Tu valor calibrado */
    transform: translate(-50%, -50%);
    width: 50%; 
    height: 12%; 
    background: #020a02; /* Verde LCD apagado */
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    box-shadow: inset 0 0 15px rgba(0, 255, 51, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    overflow: hidden;
    flex-direction: column;
}

/* Scanlines de la pantalla LCD y de la Mini Pantalla Inferior */
.terminal-screen::after, .bottom-terminal::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
}

#bizarre-messages {
    position: relative;
    width: 100%;
    font-family: 'Courier New', monospace; 
    font-size: 0.6rem; 
    color: var(--neon);
    text-shadow: 0 0 8px var(--neon);
    text-align: center;
    line-height: 1.2;
    z-index: 20;
}

.countdown-led {
    position: relative;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem; 
    font-weight: bold;
    color: var(--neon);
    text-shadow: 0 0 15px var(--neon);
    text-align: center;
    line-height: 1.2;
    z-index: 20;
}

/* --- 3. BOTONES Y PERILLAS --- */
.knob {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 12%; 
    height: 8%;
    background: rgba(255, 0, 0, 0); /* Área invisible cliqueable */
    cursor: pointer;
    z-index: 50; 
    border-radius: 50%; 
}

.btn-trigger {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent; 
    border: none;
    cursor: pointer;
    z-index: 100; 
    width: 16%; /* Tu valor calibrado */
    height: 8%;  /* Tu valor calibrado */
}

/* --- 4. NUEVA MINI PANTALLA INFERIOR DE MARCA (TESKABOT SYSTEMS) --- */
.bottom-terminal {
    position: absolute;
    left: 50%;
    bottom: 4.5%; /* 🛠️ AJUSTÁ ESTE % si necesitas subirla o bajarla un toque */
    transform: translateX(-50%);
    width: 35%;   /* Ancho del recuadro */
    height: 4.5%; /* Alto del recuadro */
    background: #010601; /* Verde militar ultra oscuro */
    border: 1px solid #111;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem; /* Letra chiquita técnica */
    font-weight: bold;
    color: var(--neon);
    text-shadow: 0 0 5px var(--neon);
    letter-spacing: 2px;
    overflow: hidden;
    z-index: 15;
}

/* --- MEDIA QUERIES PARA CELULARES MUY CHICOS --- */
@media (max-width: 380px) {
    .countdown-led { font-size: 1.2rem; } /* Achiqué un poco tu 1.6rem solo para celus enanos */
    #bizarre-messages { font-size: 0.85rem; }
    .bottom-terminal { font-size: 0.55rem; } /* Que la marca no se desborde */
}

/* --- ANIMACIONES --- */
.hidden { display: none !important; }
.glitch-active { animation: flash 0.3s infinite; }
.flicker { animation: flicker 0.3s ease-out; }
.blink-text { animation: pulse 1.5s infinite; }

@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
@keyframes flicker {
    0% { opacity: 0.8; }
    10% { opacity: 0.2; }
    100% { opacity: 1; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}