/* Override the background to use our synthwave scene instead of the vapor image */
    body {
        background-image: none !important;
        background: linear-gradient(180deg, #ae81b8 0%, #e1a1c8 30%, #f1c2a2 70%, #ffcbb1 100%) !important;
        background-attachment: fixed !important;
        position: relative;
        overflow: hidden;
    }

    /* Remove the existing grid overlay and grain */
    body::after {
        display: none !important;
    }
    
    .grain-overlay {
        display: none !important;
    }

    /* Synthwave scene container */
    .synthwave-scene {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 0;
        pointer-events: none;
    }

    /* All synthwave styles */
    .sky-container {
        position: relative;
        width: 100%;
        height: 100vh;
    }

    /* Cloud styles */
    .cloud-simple {
        position: absolute;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50px;
        opacity: 0.6;
    }

    .cloud-simple::before,
    .cloud-simple::after {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
    }

    .cloud1 {
        width: 80px;
        height: 30px;
        top: 15%;
        left: -100px;
        z-index: 5;
        animation: floatRight 20s linear infinite;
    }

    .cloud1::before {
        width: 40px;
        height: 40px;
        top: -20px;
        z-index: 5;
        left: 10px;
    }

    .cloud1::after {
        width: 50px;
        height: 50px;
        top: -25px;
        z-index: 5;
        right: 10px;
    }

    .cloud2 {
        width: 100px;
        height: 35px;
        top: 25%;
        left: -120px;
        z-index: 5;
        animation: floatRight 25s linear infinite 5s;
    }

    .cloud2::before {
        width: 45px;
        height: 45px;
        top: -22px;
        left: 15px;
    }

    .cloud2::after {
        width: 55px;
        height: 55px;
        top: -28px;
        right: 15px;
    }

    .cloud3 {
        width: 60px;
        height: 25px;
        top: 35%;
        left: -80px;
        z-index: 5;
        animation: floatRight 30s linear infinite 10s;
    }

    .cloud3::before {
        width: 30px;
        height: 30px;
        top: -15px;
        left: 8px;
    }

    .cloud3::after {
        width: 35px;
        height: 35px;
        top: -18px;
        right: 8px;
    }

    @keyframes floatRight {
        0% { 
            transform: translateX(0px) translateY(0px);
            opacity: 0;
        }
        5% { opacity: 0.6; }
        95% { opacity: 0.6; }
        100% { 
            transform: translateX(calc(100vw + 150px)) translateY(-10px);
            opacity: 0;
        }
    }

    /* Synthwave Style Clouds */
    .cloud-synthwave {
        position: absolute;
        background: linear-gradient(
            135deg,
            rgba(255, 0, 150, 0.2) 0%,
            rgba(0, 255, 255, 0.2) 50%,
            rgba(255, 0, 150, 0.2) 100%
        );
        border-radius: 30px;
        backdrop-filter: blur(2px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .cloud-synthwave::before,
    .cloud-synthwave::after {
        content: '';
        position: absolute;
        background: linear-gradient(
            135deg,
            rgba(255, 0, 150, 0.3) 0%,
            rgba(0, 255, 255, 0.3) 100%
        );
        border-radius: 50%;
    }

    .neon-cloud1 {
        width: 90px;
        height: 35px;
        top: 20%;
        left: -110px;
        z-index: 5;
        animation: neonFloat 18s linear infinite;
    }

    .neon-cloud1::before {
        width: 40px;
        height: 40px;
        top: -20px;
        left: 12px;
    }

    .neon-cloud1::after {
        width: 50px;
        height: 50px;
        top: -25px;
        right: 12px;
    }

    .neon-cloud2 {
        width: 70px;
        height: 28px;
        top: 40%;
        z-index: 5;
        left: -90px;
        animation: neonFloat 26s linear infinite 8s;
    }

    .neon-cloud2::before {
        width: 32px;
        height: 32px;
        top: -16px;
        z-index: 5;
        left: 10px;
    }

    .neon-cloud2::after {
        width: 38px;
        height: 38px;
        top: -19px;
        right: 10px;
    }

    @keyframes neonFloat {
        0% { 
            transform: translateX(0px) translateY(0px);
            opacity: 0;
            filter: hue-rotate(0deg);
        }
        10% { opacity: 0.7; }
        90% { opacity: 0.7; }
        100% { 
            transform: translateX(calc(100vw + 120px)) translateY(-5px);
            opacity: 0;
            filter: hue-rotate(360deg);
        }
    }

    /* SUN WITH OPTIMIZED GLOW */
    .sun {
        position: absolute;
        top: 25%;
        left: 50%;
        width: min(300px, 70vw);
        height: min(300px, 70vw);
        transform: translateX(-50%);
        background: linear-gradient(186deg, #f9ea75 10%, #f9a875 60%, #f89191 95%);
        border-radius: 50%;
        z-index: 3;
        opacity: 0.8;
        animation: continuousRotate 8s linear infinite;
    }

    .sun::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(5deg, transparent 75px, transparent 20px, rgba(218, 149, 190, .4) 80px, rgba(218, 149, 190, .1) 90px);
        border-radius: 50%;
    }

    /* OPTIMIZED SUN GLOW - Using pseudo-element with transforms */
    .sun::after {
        content: '';
        position: absolute;
        top: -50%; 
        left: -50%;
        width: 200%; 
        height: 200%;
        background: radial-gradient(circle, rgba(243,197,82,0.4) 0%, rgba(245,12,10,0.3) 30%, transparent 60%);
        border-radius: 50%;
        animation: glowPulse 5s ease-in-out infinite;
        z-index: -1;
    }

    @keyframes continuousRotate {
        0% { transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1); }
        50% { transform: translateX(-50%) translateY(-30px) rotate(180deg) scale(1.2); }
        100% { transform: translateX(-50%) translateY(0px) rotate(360deg) scale(1); }
    }

    @keyframes glowPulse {
        0%, 100% { 
            transform: scale(0.8); 
            opacity: 0.3; 
        }
        50% { 
            transform: scale(1.4); 
            opacity: 0.8; 
        }
    }

    .cityscape {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        z-index: 3;
    }

    .building {
        position: absolute;
        bottom: 0px;
        background: linear-gradient(135deg, #8F71A9 0%, #9C7FDF 50%, #BB8EE6 100%);
        border: 1px solid rgba(255, 255, 255, .3);
        opacity: 0.6;
        overflow: visible;
        z-index: 2;
    }

    /* Create 3D depth with pseudo-elements */
    .building::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        width: 15%;
        height: 100%;
        background: linear-gradient(180deg, 
            rgba(0, 0, 0, 0.3) 0%, 
            rgba(0, 0, 0, 0.5) 50%, 
            rgba(0, 0, 0, 0.7) 100%
        );
        transform: skewY(-8deg);
        transform-origin: bottom left;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        z-index: -1;
    }

    /* Add subtle scan lines moving up the buildings */
    .building::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(0, 255, 255, 0.8) 30%, 
            rgba(255, 0, 150, 0.8) 70%, 
            transparent 100%
        );
        filter: blur(1px);
        animation: scanLine 4s linear infinite;
        z-index: 1;
    }

    /* Taller buildings get enhanced scan lines */
    .building:nth-child(3)::before,
    .building:nth-child(7)::before,
    .building:nth-child(12)::before,
    .building:nth-child(17)::before,
    .building:nth-child(21)::before {
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 0, 0.6) 20%, 
            rgba(0, 255, 255, 0.8) 50%, 
            rgba(255, 0, 150, 0.6) 80%, 
            transparent 100%
        );
        height: 4px;
        animation: scanLineFast 2.5s linear infinite;
    }

    /* Add some random flickering windows as small details */
    .building:nth-child(2n+1) {
        box-shadow: 
            inset 20% 15% 0 -1px rgba(0, 255, 255, 0.8),
            inset 70% 25% 0 -1px rgba(255, 0, 150, 0.7),
            inset 40% 50% 0 -1px rgba(0, 255, 128, 0.8),
            inset 80% 65% 0 -1px rgba(255, 255, 0, 0.7),
            inset 15% 80% 0 -1px rgba(0, 255, 255, 0.6),
            inset 60% 75% 0 -1px rgba(255, 0, 150, 0.6);
    }

    .building:nth-child(2n) {
        box-shadow: 
            inset 30% 20% 0 -1px rgba(255, 0, 150, 0.8),
            inset 60% 35% 0 -1px rgba(0, 255, 255, 0.7),
            inset 15% 60% 0 -1px rgba(255, 255, 0, 0.8),
            inset 85% 75% 0 -1px rgba(0, 255, 128, 0.7),
            inset 25% 85% 0 -1px rgba(255, 0, 150, 0.6),
            inset 75% 90% 0 -1px rgba(0, 255, 255, 0.6);
    }

    /* Tall buildings get extra window dots - NO ANIMATIONS on the building itself */
    .building:nth-child(3),
    .building:nth-child(7),
    .building:nth-child(11),
    .building:nth-child(13),
    .building:nth-child(21) {
        box-shadow: 
            inset 25% 10% 0 -1px rgba(0, 255, 255, 0.9),
            inset 75% 15% 0 -1px rgba(255, 0, 150, 0.8),
            inset 15% 25% 0 -1px rgba(0, 255, 128, 0.9),
            inset 85% 30% 0 -1px rgba(255, 255, 0, 0.8),
            inset 45% 40% 0 -1px rgba(0, 255, 255, 0.7),
            inset 25% 50% 0 -1px rgba(255, 0, 150, 0.9),
            inset 75% 55% 0 -1px rgba(0, 255, 128, 0.8),
            inset 50% 65% 0 -1px rgba(255, 255, 0, 0.7),
            inset 15% 75% 0 -1px rgba(0, 255, 255, 0.6),
            inset 85% 80% 0 -1px rgba(255, 0, 150, 0.8),
            inset 55% 85% 0 -1px rgba(0, 255, 128, 0.7);
    }

    /* OCCASIONAL GLITCH EFFECT - Only select buildings glitch every 10 seconds */
    .building:nth-child(3) { animation: buildingGlitch 30s linear infinite; }
    .building:nth-child(7) { animation: buildingGlitch 30s linear infinite 10s; }
    .building:nth-child(12) { animation: buildingGlitch 30s linear infinite 20s; }

    /* GLITCH EFFECT - Building hologram flickers out then regenerates with corruption */
    @keyframes buildingGlitch {
        0%, 89% { 
            transform: translateX(0px) scaleX(1);
            opacity: 0.6;
            filter: none;
        }
        /* Hologram flicker out */
        90% { 
            opacity: 0.4;
            filter: brightness(1.5);
        }
        90.5% { 
            opacity: 0.8;
            filter: brightness(0.8);
        }
        91% { 
            opacity: 0.2;
            filter: brightness(2);
        }
        91.5% { 
            opacity: 0.6;
            filter: brightness(0.5);
        }
        92% { 
            opacity: 0.1;
            filter: brightness(3);
        }
        92.5% { 
            opacity: 0.3;
            filter: brightness(0.3);
        }
        93% { 
            opacity: 0;
            filter: brightness(0);
        }
        /* Gone for a moment */
        93.5% { 
            opacity: 0;
            transform: translateX(0px) scaleX(1);
            filter: brightness(0);
        }
        /* Regeneration with corruption */
        94% { 
            opacity: 0.2;
            transform: translateX(-4px) scaleX(1.08);
            filter: hue-rotate(180deg) brightness(2.5) contrast(1.5);
        }
        94.5% { 
            opacity: 0.7;
            transform: translateX(5px) scaleX(0.92);
            filter: hue-rotate(90deg) brightness(0.3) contrast(2);
        }
        95% { 
            opacity: 0.1;
            transform: translateX(-3px) scaleX(1.06);
            filter: hue-rotate(270deg) brightness(3) contrast(0.5);
        }
        95.5% { 
            opacity: 0.9;
            transform: translateX(3px) scaleX(0.94);
            filter: hue-rotate(45deg) brightness(1.8) contrast(1.8);
        }
        96% { 
            opacity: 0.3;
            transform: translateX(-2px) scaleX(1.03);
            filter: hue-rotate(315deg) brightness(0.6) contrast(1.2);
        }
        96.5% { 
            opacity: 0.8;
            transform: translateX(2px) scaleX(0.97);
            filter: hue-rotate(135deg) brightness(2.2) contrast(1.6);
        }
        97% { 
            opacity: 0.5;
            transform: translateX(-1px) scaleX(1.02);
            filter: hue-rotate(225deg) brightness(1.4) contrast(1.3);
        }
        97.5% { 
            opacity: 0.7;
            transform: translateX(1px) scaleX(0.99);
            filter: hue-rotate(60deg) brightness(1.1) contrast(1.1);
        }
        98% { 
            opacity: 0.6;
            transform: translateX(0px) scaleX(1.01);
            filter: hue-rotate(30deg) brightness(1.05) contrast(1.05);
        }
        98.5% { 
            opacity: 0.6;
            transform: translateX(0px) scaleX(1);
            filter: hue-rotate(10deg) brightness(1.02) contrast(1.02);
        }
        99%, 100% { 
            transform: translateX(0px) scaleX(1);
            opacity: 0.6;
            filter: none;
        }
    }

    /* Scan line animations */
    @keyframes scanLine {
        0% { 
            transform: translateY(100vh);
            opacity: 0;
        }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { 
            transform: translateY(-100%);
            opacity: 0;
        }
    }

    @keyframes scanLineFast {
        0% { 
            transform: translateY(100vh);
            opacity: 0;
        }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { 
            transform: translateY(-100%);
            opacity: 0;
        }
    }

    /* Building positions with better aesthetic distribution */
    .building:nth-child(1) { left: 0%; width: 65px; height: 120px; }
    .building:nth-child(2) { left: 6%; width: 45px; height: 180px; }
    .building:nth-child(3) { left: 10%; width: 85px; height: 320px; }
    .building:nth-child(4) { left: 16%; width: 55px; height: 200px; }
    .building:nth-child(5) { left: 20%; width: 70px; height: 140px; }
    .building:nth-child(6) { left: 26%; width: 40px; height: 160px; }
    .building:nth-child(7) { left: 29%; width: 95px; height: 380px; }
    .building:nth-child(8) { left: 36%; width: 60px; height: 110px; }
    .building:nth-child(9) { left: 40%; width: 50px; height: 240px; }
    .building:nth-child(10) { left: 44%; width: 75px; height: 180px; }
    .building:nth-child(11) { left: 50%; width: 90px; height: 300px; }
    .building:nth-child(12) { left: 57%; width: 55px; height: 220px; }
    .building:nth-child(13) { left: 61%; width: 105px; height: 360px; }
    .building:nth-child(14) { left: 69%; width: 45px; height: 130px; }
    .building:nth-child(15) { left: 72%; width: 65px; height: 190px; }
    .building:nth-child(16) { left: 77%; width: 80px; height: 260px; }
    .building:nth-child(17) { left: 84%; width: 70px; height: 150px; }
    .building:nth-child(18) { left: 89%; width: 55px; height: 280px; }
    .building:nth-child(19) { left: 93%; width: 85px; height: 200px; }
    .building:nth-child(20) { left: 98%; width: 60px; height: 240px; }
    .building:nth-child(21) { right: 0%; width: 95px; height: 340px; }

    /* GRID STYLES MATCHING EXAMPLE */
    .grid-overlay {
        position: absolute;
        top: -20%;
        left: -70%;
        width: 240%;
        height: 160%;
        background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 4px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 4px);
        background-size: 50px 50px;
        z-index: 1;
        transform: perspective(1200px) rotateY(-10deg) rotateX(0deg) rotate(0deg) scale(0.5);
        transform-origin: top center;
    }

    .grid-floor {
        position: absolute;
        bottom: -80%;
        left: -70%;
        width: 200%;
        height: 124%;
        background-image: linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 4px), linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 4px);
        background-size: 50px 50px;
        z-index: 1;
        transform: perspective(2000px) rotateY(-40deg) rotateX(80deg) rotate(15deg);
        transform-origin: top center;
    }

    .glow-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        background: radial-gradient(ellipse at center bottom, rgba(243, 197, 82, 0.4) 0%, transparent 40%);
        z-index: 4;
        pointer-events: none;
    }

    /* TERMINAL CONSOLE STYLES - SUBTLE */
    .terminal-console {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 80vw;
        max-width: 800px;
        height: 60vh;
        max-height: 500px;
        background: rgba(5, 5, 15, 0.85);
        border: 1px solid rgba(0, 255, 255, 0.3);
        border-radius: 6px;
        z-index: 1001;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        display: flex;
        flex-direction: column;
        font-family: 'Courier New', monospace;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        pointer-events: none;
        visibility: hidden;
    }

    .terminal-console.show {
        pointer-events: all;
        visibility: visible;
        animation: gentleMaterialize 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    .terminal-console.hide {
        animation: gentleDisintegrate 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    }

    @keyframes gentleMaterialize {
        0% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0;
            filter: blur(8px);
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.8;
            filter: blur(0px);
        }
    }

    @keyframes gentleDisintegrate {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.8;
            filter: blur(0px);
        }
        100% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            filter: blur(8px);
        }
    }

    .terminal-header {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        border-bottom: 1px solid rgba(0, 255, 255, 0.2);
        padding: 8px 15px;
        border-radius: 5px 5px 0 0;
        position: relative;
    }

    .terminal-title {
        color: rgba(0, 255, 255, 0.8);
        font-size: 11px;
        font-weight: normal;
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
        letter-spacing: 0.5px;
    }

    .terminal-close {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: rgba(255, 0, 128, 0.7);
        font-size: 16px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .terminal-close:hover {
        background: rgba(255, 0, 128, 0.1);
        color: rgba(255, 0, 128, 0.9);
    }

    .terminal-body {
        padding: 15px 20px;
        background: rgba(0, 0, 0, 0.4);
        max-height: 400px;
        overflow-y: auto;
        border-radius: 0 0 5px 5px;
        position: relative;
    }

    .terminal-line {
        margin: 6px 0;
        font-size: 13px;
        line-height: 1.4;
        color: rgba(0, 255, 255, 0.8);
        text-shadow: 0 0 3px rgba(0, 255, 255, 0.2);
    }

    .prompt {
        color: rgba(255, 0, 128, 0.8);
        text-shadow: 0 0 4px rgba(255, 0, 128, 0.3);
    }

    .command {
        color: rgba(0, 255, 128, 0.8);
        text-shadow: 0 0 4px rgba(0, 255, 128, 0.3);
        margin-left: 5px;
    }

    .output {
        color: rgba(255, 255, 255, 0.8);
        margin-left: 20px;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
    }

    .status-ok {
        color: rgba(0, 255, 128, 0.9);
        text-shadow: 0 0 5px rgba(0, 255, 128, 0.4);
    }

    .status-warn {
        color: rgba(255, 255, 0, 0.9);
        text-shadow: 0 0 5px rgba(255, 255, 0, 0.4);
    }

    .status-error {
        color: rgba(255, 0, 128, 0.9);
        text-shadow: 0 0 5px rgba(255, 0, 128, 0.4);
    }

    .terminal-output {
        color: rgba(0, 255, 255, 0.8);
        margin-bottom: 6px;
        white-space: pre-wrap;
        font-size: 13px;
    }

    .terminal-output.command-response {
        color: rgba(255, 0, 255, 0.8);
        background: rgba(255, 0, 255, 0.05);
        padding: 3px 6px;
        border-left: 2px solid rgba(255, 0, 255, 0.3);
        margin: 6px 0;
        border-radius: 2px;
    }

    .loading-bar {
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        overflow: hidden;
        margin: 6px 0;
    }

    .loading-fill {
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 0, 255, 0.6), rgba(0, 255, 255, 0.6));
        border-radius: 3px;
        width: 0%;
        animation: loadingFill 1.5s ease-in-out forwards;
    }

    @keyframes loadingFill {
        0% { width: 0%; }
        100% { width: 100%; }
    }

    .terminal-input-line {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .terminal-prompt {
        color: rgba(255, 0, 128, 0.8);
        text-shadow: 0 0 4px rgba(255, 0, 128, 0.3);
        margin-right: 8px;
    }

    .terminal-input {
        background: transparent;
        border: none;
        outline: none;
        color: rgba(0, 255, 128, 0.9);
        font-family: 'Courier New', monospace;
        font-size: 13px;
        text-shadow: 0 0 4px rgba(0, 255, 128, 0.3);
        caret-color: rgba(0, 255, 255, 0.8);
        width: auto;
        min-width: 300px;
        margin: 0;
        padding: 0;
    }

    .terminal-input::placeholder {
        color: rgba(0, 255, 128, 0.2);
    }

    .terminal-cursor {
        color: rgba(0, 255, 255, 0.8);
        text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
        animation: cursorBlink 1s infinite;
        margin-left: 2px;
    }

    @keyframes cursorBlink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }

    /* DISPLAY COMPONENT STYLES */
    .display-component {
        position: fixed;
        top: 20%;
        left: 20%;
        width: 400px;
        max-width: 80vw;
        max-height: 60vh;
        background: rgba(12, 12, 24, 0.9);
        border: 2px outset rgba(192, 192, 192, 0.6);
        border-radius: 0;
        z-index: 1002;
        font-family: 'MS Sans Serif', sans-serif;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.4),
            inset 1px 1px 0 rgba(255, 255, 255, 0.2),
            inset -1px -1px 0 rgba(128, 128, 128, 0.3);
        backdrop-filter: blur(15px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.9);
        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .display-component.show {
        opacity: 0.9;
        visibility: visible;
        pointer-events: all;
        transform: scale(1);
    }

    .display-header {
        background: linear-gradient(180deg, rgba(192, 192, 192, 0.8) 0%, rgba(128, 128, 128, 0.8) 100%);
        border-bottom: 1px solid rgba(128, 128, 128, 0.5);
        padding: 4px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: move;
        user-select: none;
    }

    .display-title {
        color: #000000;
        font-size: 11px;
        font-weight: bold;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
    }

    .display-close {
        background: rgba(192, 192, 192, 0.9);
        border: 1px outset rgba(192, 192, 192, 0.8);
        color: #000000;
        font-size: 11px;
        font-weight: bold;
        cursor: pointer;
        width: 16px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.1s ease;
        font-family: 'MS Sans Serif', sans-serif;
    }

    .display-close:hover {
        background: rgba(255, 255, 255, 0.9);
    }

    .display-close:active {
        border: 1px inset rgba(192, 192, 192, 0.8);
    }

    .display-content {
        padding: 12px;
        background: rgba(0, 0, 0, 0.3);
        color: rgba(0, 255, 255, 0.9);
        font-family: 'Courier New', monospace;
        font-size: 12px;
        line-height: 1.4;
        max-height: 300px;
        overflow-y: auto;
        text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
    }

    .display-content p {
        margin: 8px 0;
        color: rgba(255, 255, 255, 0.9);
    }

    .display-content div {
        margin: 4px 0;
    }

    /* Ensure main content appears above the scene */
    main {
        position: relative;
        z-index: 10;
        min-height: 100vh;
        padding-top: 120px;
    }

    /* Update content container for synthwave theme */
    .content-container {
        background: rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    /* Text styling for synthwave */
    .vapor-text {
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255, 0, 150, 0.5) !important;
    }

    .vapor-text-light {
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
        .cityscape {
            height: 200px;
        }

        .building:nth-child(1) { width: clamp(20px, 4vw, 65px); height: clamp(60px, 15vh, 120px); }
        .building:nth-child(2) { width: clamp(18px, 3vw, 45px); height: clamp(90px, 22vh, 180px); }
        .building:nth-child(3) { width: clamp(25px, 5vw, 85px); height: clamp(160px, 40vh, 320px); }
        .building:nth-child(4) { width: clamp(20px, 4vw, 55px); height: clamp(100px, 25vh, 200px); }
        .building:nth-child(5) { width: clamp(22px, 4.5vw, 70px); height: clamp(70px, 17vh, 140px); }
        .building:nth-child(6) { width: clamp(16px, 3vw, 40px); height: clamp(80px, 20vh, 160px); }
        .building:nth-child(7) { width: clamp(28px, 6vw, 95px); height: clamp(190px, 47vh, 380px); }
        .building:nth-child(8) { width: clamp(20px, 4vw, 60px); height: clamp(55px, 14vh, 110px); }
        .building:nth-child(9) { width: clamp(18px, 3.5vw, 50px); height: clamp(120px, 30vh, 240px); }
        .building:nth-child(10) { width: clamp(24px, 5vw, 75px); height: clamp(90px, 22vh, 180px); }
        .building:nth-child(11) { width: clamp(26px, 5.5vw, 90px); height: clamp(150px, 37vh, 300px); }
        .building:nth-child(12) { width: clamp(20px, 4vw, 55px); height: clamp(110px, 27vh, 220px); }
        .building:nth-child(13) { width: clamp(30px, 6.5vw, 105px); height: clamp(180px, 45vh, 360px); }
        .building:nth-child(14) { width: clamp(18px, 3vw, 45px); height: clamp(65px, 16vh, 130px); }
        .building:nth-child(15) { width: clamp(22px, 4vw, 65px); height: clamp(95px, 24vh, 190px); }
        .building:nth-child(16) { width: clamp(24px, 5vw, 80px); height: clamp(130px, 32vh, 260px); }
        .building:nth-child(17) { width: clamp(22px, 4.5vw, 70px); height: clamp(75px, 19vh, 150px); }
        .building:nth-child(18) { width: clamp(20px, 4vw, 55px); height: clamp(140px, 35vh, 280px); }
        .building:nth-child(19) { width: clamp(25px, 5vw, 85px); height: clamp(100px, 25vh, 200px); }
        .building:nth-child(20) { width: clamp(20px, 4vw, 60px); height: clamp(120px, 30vh, 240px); }
        .building:nth-child(21) { width: clamp(28px, 6vw, 95px); height: clamp(170px, 42vh, 340px); }

        .grid-overlay {
            background-size: 30px 30px;
            transform: perspective(800px) rotateY(-8deg) rotateX(0deg) rotate(0deg) scale(0.6);
        }

        .grid-floor {
            background-size: 30px 30px;
            transform: perspective(1200px) rotateY(-30deg) rotateX(75deg) rotate(12deg);
        }
        
        main {
            padding-top: 80px;
        }

        .terminal-console {
            width: 95vw;
            height: 70vh;
        }
    }

    @media (max-width: 480px) {
        .grid-overlay {
            background-size: 25px 25px;
            transform: perspective(600px) rotateY(-5deg) rotateX(0deg) rotate(0deg) scale(0.7);
        }

        .grid-floor {
            background-size: 25px 25px;
            transform: perspective(1000px) rotateY(-25deg) rotateX(70deg) rotate(10deg);
        }
    }