/* =========================================================================
   1. RESET I USTAWIENIA GLOBALNE SYSTEMU
   ========================================================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    background-color: #000;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    font-family: 'Courier New', Courier, monospace;
    color: #00ffcc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene-container {
    position: relative;
    width: 100vw;
    max-width: calc(100vh * (16 / 9));
    height: 100vh;
    max-height: calc(100vw * (9 / 16));
    cursor: pointer;
    overflow: hidden;
    background-color: #010406;
}

.layer { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
}

/* =========================================================================
   2. WARSTWY TŁA (MOCOWANIE CIENIA LEWIATANA)
   ========================================================================= */
.deep-sea-bg {
    z-index: 1;
    background-image: url('../assets/images/bgs/bgs01.png');
    background-size: cover;
    background-position: center bottom;
    transform: scale(1.05); 
    opacity: 0; 
    filter: blur(15px) brightness(0.05); 
}

.leviathan-layer { 
    z-index: 2; 
    opacity: 0; 
}

.leviathan {
    position: absolute;
    top: 15%; 
    left: 100%; 
    width: 60vw; 
    height: 40vh;
    background-image: url('../assets/images/bgs/mons01.png');
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    
    /* NAPRAWA: Usunięto opacity, potwór jest teraz potężnym, głębokim, czarnym sylwetkowym cieniem */
    filter: brightness(0.08) contrast(1.4) blur(2px); 
}

.sea-fog {
    z-index: 3; 
    background: radial-gradient(circle at center, rgba(1, 12, 18, 0.1) 0%, rgba(1, 8, 12, 0.65) 45%, rgba(0, 2, 4, 0.98) 90%);
    opacity: 0; 
    transform: scale(1.04); 
}

/* =========================================================================
   3. GEOMETRIA KOKPITU
   ========================================================================= */
.cockpit-top {
    z-index: 6;
    background-image: url('../assets/images/cockpit/new_cocpit_01.png');
    background-size: 100% auto; 
    background-position: top center; 
    background-repeat: no-repeat;
    filter: brightness(0.12) contrast(1.2); 
}

.cockpit-bottom {
    z-index: 6;
    background-image: url('../assets/images/cockpit/new_cocpit_02.png');
    background-size: 100% auto; 
    background-position: bottom center; 
    background-repeat: no-repeat;
    filter: brightness(0.12) contrast(1.2);
}

.cockpit-lights {
    z-index: 7;
    background-image: url('../assets/images/light/light.png');
    background-size: 100% auto; 
    background-position: center center; 
    background-repeat: no-repeat;
    mix-blend-mode: screen; 
    opacity: 0; 
}

/* =========================================================================
   4. CENTRALNY RDZEŃ TERMINALA (Helisa DNA)
   ========================================================================= */
.ui-terminal {
    z-index: 8;
    position: absolute;
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
    pointer-events: none; 
}

.terminal-content {
    position: absolute;
    width: 550px; 
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    text-shadow: 0 0 5px #00ffcc, 0 0 15px rgba(0, 255, 204, 0.8), 0 0 30px rgba(0, 255, 204, 0.4);
    user-select: none;
    z-index: 9;
}

#holo-canvas { 
    display: block; 
    margin: 0 auto; 
    opacity: 0; 
    z-index: 10; 
}

#terminal-text {
    position: absolute;
    width: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 11;
}

#terminal-text h1 { font-size: 2.2rem; letter-spacing: 4px; margin-bottom: 10px; }
#terminal-text p { font-size: 1.1rem; color: #88ffeb; }
.cursor { animation: blink 1.0s infinite step-end; color: #00ffcc; }
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }

.hologram-hitbox {
    position: absolute;
    top: 35%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 40vw; 
    height: 25vh; 
    pointer-events: auto; 
    z-index: 15;
}

/* =========================================================================
   5. TAKTYCZNE HUD-Y BOCZNE
   ========================================================================= */
.cockpit-trigger {
    position: absolute;
    top: 42%; 
    width: max-content; 
    height: auto; 
    padding: 10px 20px; 
    background: transparent; 
    border: none;            
    cursor: pointer; 
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    user-select: none; 
    opacity: 0;           
}
#panel-left { left: 8%; }
#panel-right { right: 8%; }

.panel-hint {
    font-family: 'Courier New', Courier, monospace; 
    font-size: 0.95rem; 
    font-weight: bold; 
    text-transform: uppercase;    
    color: rgba(0, 255, 204, 0.35); 
    letter-spacing: 2px; 
    text-shadow: 0 0 3px rgba(0, 255, 204, 0.15);
    transition: all 0.3s ease; 
    pointer-events: none;
}
.cockpit-trigger:hover .panel-hint { color: #ffffff; letter-spacing: 4px; text-shadow: 0 0 8px #00ffcc, 0 0 20px rgba(0, 255, 204, 0.6); }
.cockpit-trigger:hover { background: linear-gradient(90deg, rgba(0, 255, 204, 0) 0%, rgba(0, 255, 204, 0.05) 50%, rgba(0, 255, 204, 0) 100%); transform: scale(1.05); }
.cockpit-trigger.active-protocol .panel-hint { color: #00ffcc; letter-spacing: 3px; text-shadow: 0 0 12px #00ffcc; }
.cockpit-trigger.active-protocol { border-bottom: 1px dashed rgba(0, 255, 204, 0.5); background: rgba(0, 255, 204, 0.02); }

/* =========================================================================
   6. PANEL FORMULARZA (IDEALNE POZYCJONOWANIE NA SUFICIE)
   ========================================================================= */
.protocol-form {
    width: 660px !important;             
    border: 1px solid #00ffcc !important;
    padding: 25px 40px !important;
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.25) !important;
    text-shadow: none !important; 
    
    /* Półprzezroczyste szkło CRT */
    background: rgba(1, 12, 15, 0.35) !important; 
    backdrop-filter: blur(5px) !important; 
    
    /* FIX NA POZYCJĘ: fixed spina z oknem przeglądarki, a nie z kontenerem bocznym */
    position: fixed !important;
    left: 50% !important;
    top: 2vh !important; 
    transform: translateX(-50%) !important;
    
    z-index: 500 !important;   
    pointer-events: auto !important; 
}

.protocol-form h2 { 
    font-size: 1.15rem; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin-bottom: 20px; 
    letter-spacing: 2px; 
    color: #00ffcc; 
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.5); 
    min-height: 1.2rem; 
    text-align: left !important;
}

.input-group { 
    margin-bottom: 14px; 
}

.input-group label { 
    display: block; 
    font-size: 0.85rem; 
    margin-bottom: 5px; 
    color: #88ffeb; 
    letter-spacing: 1px; 
    font-weight: bold; 
    text-align: left !important;
}

/* =========================================================================
   7. STYLIZACJA INPUTÓW I PRZYCISKÓW CRT
   ========================================================================= */
.protocol-form input {
    width: 100% !important;
    background: linear-gradient(rgba(0, 15, 25, 0.85) 50%, rgba(0, 8, 15, 0.9) 50%), linear-gradient(90deg, rgba(0, 25, 30, 0.05), rgba(0, 25, 30, 0.01)) !important;
    background-size: 100% 4px, 6px 100% !important;
    border: 1px solid rgba(0, 255, 204, 0.4) !important;
    padding: 12px !important; 
    color: #00ffcc !important; 
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.8);
    font-family: 'Courier New', Courier, monospace !important; 
    font-size: 1rem !important; 
    outline: none !important;
    box-shadow: inset 0 0 8px rgba(0, 255, 204, 0.15) !important; 
    transition: all 0.3s ease !important; 
    pointer-events: auto !important; 
}
.protocol-form input:focus { border-color: #00ffcc !important; background-color: rgba(0, 25, 35, 0.9) !important; box-shadow: 0 0 15px rgba(0, 255, 204, 0.5), inset 0 0 10px rgba(0, 255, 204, 0.3) !important; }
.protocol-form input::placeholder { color: rgba(0, 255, 204, 0.35) !important; }

#form-operator-reg, #form-operator-login { display: flex !important; flex-direction: column !important; }

.protocol-form button {
    background: rgba(0, 25, 30, 0.85) !important; 
    border: 1px solid rgba(0, 255, 204, 0.6) !important;
    width: 360px !important; 
    margin: 15px auto 0 auto !important; 
    padding: 12px !important; 
    cursor: pointer !important; 
    pointer-events: auto !important; 
    outline: none !important;
    font-family: 'Courier New', Courier, monospace !important; 
    font-size: 0.95rem !important; 
    font-weight: bold !important;    
    color: #00ffcc !important; 
    letter-spacing: 3px !important; 
    text-transform: uppercase !important; 
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important; 
    animation: glowPulse 2s infinite ease-in-out !important; 
}
.protocol-form button:hover { background-color: #00ffcc !important; color: #000000 !important; border-color: #00ffcc !important; font-weight: 900 !important; box-shadow: 0 0 25px #00ffcc, 0 0 50px rgba(0, 255, 204, 0.5) !important; transform: translateY(-2px) scale(1.01); text-shadow: none !important; animation: none !important; }

@keyframes glowPulse {
    0% { box-shadow: 0 0 10px rgba(0, 255, 204, 0.2); border-color: rgba(0, 255, 204, 0.5); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.4); border-color: rgba(0, 255, 204, 1); }
    100% { box-shadow: 0 0 10px rgba(0, 255, 204, 0.2); border-color: rgba(0, 255, 204, 0.5); }
}

/* =========================================================================
   8. SYSTEM STATUS LOG (PANCERNE CENTROWANIE DO ŚRODKA PANELU)
   ========================================================================= */
.system-status-log {
    font-size: 0.85rem !important; 
    font-weight: bold !important; 
    text-transform: uppercase !important; 
    color: #00ffcc !important;
    margin-top: 20px !important; 
    letter-spacing: 1px !important; 
    min-height: 1.2rem !important; 
    text-shadow: 0 0 6px rgba(0, 255, 204, 0.6) !important;
    
    /* GWARANCJA CENTROWANIA: Blok zajmuje 100% szerokości i wymusza tekst w osi */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important; /* Pozwala na elastyczne ułożenie w boksie */
    
    position: relative !important; 
    z-index: 999 !important; 
    visibility: visible !important; 
    opacity: 1 !important;
}