:root {
    --cyber-bg: linear-gradient(135deg, #030611 0%, #070d22 100%);
    --cyber-cyan: #00f7ff;
    --cyber-pink: #ff00ea;
    --cyber-purple: #8b5cf6;
    --cyber-dark: #02050f;
    --cyber-text: #00f7ff; /* Schimbat în cyan pentru aspectul de terminal din imagine */
    --cyber-glow: 0 0 15px rgba(0, 247, 255, 0.5);
}

/* Wrapper-ul principal - Transformat în Șasiu de Consolă Mainframe */
.pve-wrapper {
    position: relative;
    overflow: hidden;
    margin: 15px auto;
    padding: 16px; /* Oferă spațiu ecranului interior, exact ca rama consolei */
    
    background: var(--cyber-bg);
    border: 2px solid #0b1533;
    backdrop-filter: blur(12px);
    
    /* Tăiere fină și simetrică a colțurilor exterioare */
    clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px);
    
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.9),
        0 20px 50px rgba(0, 0, 0, 0.9);
    text-align: center;
    transition: all 0.3s ease;
}

/* Liniile de scanare fine CRT (Scanlines din imagine) */
.pve-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.4) 50%);
    background-size: 100% 3px;
    z-index: 5;
    opacity: 0.3;
}

/* Rama Interioară Geometrică Neon (Chenarul Magenta din Imagine) */
.pve-wrapper::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 0, 234, 0.7);
    pointer-events: none;
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
    box-shadow: 
        inset 0 0 15px rgba(255, 0, 234, 0.2),
        0 0 10px rgba(255, 0, 234, 0.3);
    animation: consolePulse 5s infinite alternate ease-in-out;
    z-index: 1;
}

/* Ecranul Video / Iframe */
.pve-wrapper iframe,
.pve-wrapper video {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid rgba(0, 247, 255, 0.3);
    border-radius: 0px;
    box-shadow: 0 0 25px rgba(0, 247, 255, 0.15);
    z-index: 2;
}

/* Finisat: Textul de Preview (Mesajul de transmisiune din imagine) */
.pve-preview-text {
    display: block;
    margin: 12px 0 18px 0;
    color: var(--cyber-text);
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px; /* Mai mic și mai elegant */
    font-weight: 800;
    letter-spacing: 1.5px; /* Spațiere curată de terminal militar */
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(0, 247, 255, 0.8);
    position: relative;
    z-index: 3;
}

/* Reconfigurat COMPLET: Butonul Cybernetic Mod "Wow" (Svelt, Thinner și Solid) */
.playButton {
    position: relative;
    border: none;
    outline: none;
    cursor: pointer;
    
    /* Redus înălțimea pentru a fi mai finuț și mai lat */
    padding: 10px 35px; 
    
    color: var(--cyber-dark); /* Text întunecat pentru contrast maxim pe fundal luminos */
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px; /* Scalat discret */
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 5px auto 15px auto;
    overflow: hidden;
    z-index: 3;
    
    /* Culoarea plină Cyan din imagine */
    background: var(--cyber-cyan);
    
    /* Tăiere unghiulară fină a colțurilor */
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    
    /* Bloom puternic și curat de lumină cyan */
    box-shadow: 
        0 0 20px rgba(0, 247, 255, 0.6),
        0 0 4px var(--cyber-cyan);
    
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.playButton::before {
    content: "▶ INITIALIZE";
}

/* Efect de strălucire dinamică la hover */
.playButton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: translateX(-100%) skewX(-30deg);
    transition: none;
}

/* Hover: Overload de Culoare și Schimbare de Stare */
.playButton:hover {
    background: #ffffff; /* Trece în alb intens pentru efectul de flash bliț */
    color: #000000;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 0 30px rgba(0, 247, 255, 0.95),
        0 0 10px rgba(255, 0, 234, 0.5);
}

.playButton:hover::before {
    content: "▶ EXECUTE_UI"; /* Textul alternativ din modulul tău */
}

.playButton:hover::after {
    transform: translateX(100%) skewX(-30deg);
    transition: transform 0.5s ease-in-out;
}

/* Transformat: Loader-ul în Orbul de Plasmă / Singularity din Imagine */
.pve-loader {
    width: 44px;
    height: 44px;
    margin: 15px auto 10px;
    border-radius: 50%;
    position: relative;
    background: transparent;
    
    /* Straturi de umbre suprapuse pentru a crea efectul de sferă energetică încețoșată */
    box-shadow: 
        inset 0 0 12px var(--cyber-pink),
        0 0 15px var(--cyber-cyan),
        0 0 25px var(--cyber-pink);
    
    /* Filtru de blur pentru fuziunea organică a culorilor neon */
    filter: blur(0.6px);
    animation: plasmaVortex 1s linear infinite;
}

/* Marginile orbului care se rotesc asimetric */
.pve-loader::before,
.pve-loader::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
}

.pve-loader::before {
    border-top-color: var(--cyber-cyan);
    border-bottom-color: var(--cyber-purple);
    animation: cyberSpin 1.4s linear infinite;
}

.pve-loader::after {
    border-left-color: var(--cyber-pink);
    border-right-color: transparent;
    animation: cyberSpin 0.7s linear infinite reverse;
}

/* Animații noi pentru Consola și Vortexul energetic */
@keyframes plasmaVortex {
    0% { transform: scale(0.96) rotate(0deg); filter: hue-rotate(0deg); }
    50% { transform: scale(1.04) rotate(180deg); }
    100% { transform: scale(0.96) rotate(360deg); filter: hue-rotate(45deg); }
}

@keyframes cyberSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes consolePulse {
    0% { opacity: 0.6; border-color: rgba(255, 0, 234, 0.5); }
    100% { opacity: 1; border-color: rgba(255, 0, 234, 0.95); }
}

.pve-color-1, .pve-color-2, .pve-color-3, .pve-color-4, .pve-color-5 {
    background: var(--cyber-bg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pve-wrapper {
        padding: 10px;
        clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    }
    
    .pve-wrapper::after {
        inset: 4px;
        clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    }

    .playButton {
        width: 85%;
        font-size: 13px;
        padding: 9px 20px;
    }
}