:root {
    --bg-color: #0a0510;
    --accent-color: #3a1c54;
    --error-color: #ff003c;
    --success-color: #00ff66;
    --text-color: #e5d9f2;
    --font-stack: 'Courier New', 'Courier Prime', Courier, monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
    font-family: var(--font-stack);
    color: var(--text-color);
    overflow: hidden;
    position: relative;
    user-select: none;
}

/* Logo CSS */
.loader-logo, .logo, .final-logo {
    max-height: 100%;
    filter: drop-shadow(0 0 10px var(--accent-color));
}

.loader-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color); z-index: 9998;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.loader-logo {
    width: 100px; height: 100px; margin-bottom: 20px;
    animation: spin-glitch 2s infinite step-end;
}

.loader-text {
    font-size: 1.2rem; letter-spacing: 3px; color: var(--accent-color);
    animation: blink 1s infinite;
    text-align: center;
    padding: 0 1rem;
}

/* Tło i CRT */
.background-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('Zenitria\ Wallpaper.png');
    background-size: cover; background-position: center;
    background-color: #050208;
    z-index: 1; display: none;
}
.background-layer::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 5, 16, 0.90);
}

.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9000; pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 3px, 3px 100%;
}

.crt-vignette {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9001; pointer-events: none;
    background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
    animation: flicker 0.15s infinite;
}

@keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 1; } 100% { opacity: 0.98; } }

/* Terminal */
.container {
    position: relative; z-index: 10; display: none; flex-direction: column; align-items: center;
    height: 100%; padding: 2rem; max-width: 900px; margin: 0 auto;
}

.logo-container { margin-top: 3vh; margin-bottom: 1.5rem; height: 70px; }

.terminal-container { width: 100%; flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.terminal-output { font-size: 0.95rem; line-height: 1.5; text-shadow: 0 0 5px var(--accent-color); }
.terminal-line { margin-bottom: 0.4rem; display: block; word-break: break-all; }

/* Obsługa ładowarek w osobnej linii na mobile */
.terminal-line .load-bar {
    display: inline;
}

@media (max-width: 600px) {
    .terminal-line .load-bar {
        display: block; /* Przenosi pasek pod tekst na małych ekranach */
        margin-top: 2px;
        padding-left: 0;
    }
}

.cursor {
    display: inline-block; width: 10px; height: 1.1rem; background-color: var(--text-color);
    vertical-align: middle; animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Access Granted Popup */
.success-popup-center {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: var(--success-color); color: #000;
    padding: 20px 40px; border: 3px solid #fff; z-index: 500;
    font-weight: 900; font-size: 2.2rem; text-align: center; text-transform: uppercase;
    box-shadow: 0 0 40px var(--success-color);
    display: none;
    animation: popup-glitch 0.2s infinite;
}

@keyframes popup-glitch {
    0% { transform: translate(-50%, -50%) skew(0deg); }
    25% { transform: translate(-52%, -48%) skew(2deg); filter: invert(0.2); }
    50% { transform: translate(-48%, -52%) skew(-2deg); filter: invert(0); }
    75% { transform: translate(-51%, -50%) skew(1deg); }
    100% { transform: translate(-50%, -50%) skew(0deg); }
}

/* Gładkie przejście */
.long-white-glitch { animation: white-glitch-anim 2s forwards ease-in-out; }
@keyframes white-glitch-anim {
    0% { background-color: var(--bg-color); filter: invert(0); }
    20% { background-color: #ffffff; filter: invert(1); transform: scale(1.02) skewX(1deg); }
    40% { background-color: #11051f; filter: invert(0); transform: scale(0.99) skewX(-1deg); }
    50% { background-color: #ffffff; filter: invert(1) brightness(1.5); transform: scale(1.01); }
    55% { background-color: #ffffff; filter: invert(1) brightness(1.5); transform: scale(1.01); }
    70% { background-color: #2b0b42; filter: invert(0); }
    85% { background-color: #ffffff; filter: invert(0.8); }
    100% { background-color: #050208; filter: invert(0); }
}

/* Ekran Finałowy */
.final-screen {
    display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2000; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 2rem;
    background: radial-gradient(circle at center, #1a0000 0%, #050000 100%);
    animation: random-bg-flash 3.5s infinite;
}

@keyframes random-bg-flash {
    0%, 28%, 31%, 58%, 61%, 88%, 91%, 100% { filter: invert(0); }
    29%, 30% { filter: invert(0.1) hue-rotate(90deg); } 
    59%, 60% { filter: invert(0.8); } 
    89%, 90% { filter: invert(0.2) hue-rotate(180deg); } 
}

.final-logo {
    width: 100px; height: 100px; margin-bottom: 2rem;
    color: var(--error-color);
    filter: drop-shadow(0 0 20px var(--error-color));
    animation: logo-pulse 2s infinite alternate;
}
@keyframes logo-pulse {
    from { transform: scale(1); filter: drop-shadow(0 0 10px var(--error-color)); }
    to { transform: scale(1.05); filter: drop-shadow(0 0 35px var(--error-color)); }
}

.glitch-wrapper {
    display: flex; flex-direction: column; align-items: center;
}

.final-text-main {
    font-size: clamp(1.8rem, 5vw, 3.5rem); 
    font-weight: 900; 
    color: var(--error-color);
    text-transform: uppercase; 
    letter-spacing: 4px; 
    margin-bottom: 1.5rem;
    text-shadow: 0 0 25px rgba(255, 0, 60, 0.9);
}

.final-text-sub {
    font-size: clamp(1rem, 2.2vw, 1.4rem); 
    color: var(--error-color);
    letter-spacing: 2px; 
    line-height: 2;
    max-width: 900px;
    text-shadow: 0 0 10px rgba(255, 0, 60, 0.8);
}

.data-highlight {
    color: inherit;
    font-weight: 900;
    text-decoration: none;
}