:root {
        --neon-blue: #00f2ff;
        --neon-orange: #ff5e00;
        --void-black: #050508;
        --laser-red: #ff003c;
    }

    #strategy-map {
        background-color: var(--void-black);
        background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.03) 1px, transparent 0);
        background-size: 50px 50px;
        color: #fff;
        font-family: 'Share Tech Mono', monospace;
        padding: 40px 0; 
        overflow: hidden;
        position: relative;
        min-height: 800px;
    }

     
    .planet {
        position: absolute; border-radius: 50%; opacity: 0.6; z-index: 0;
        filter: blur(1px) drop-shadow(0 0 20px rgba(255,255,255,0.1));
        pointer-events: none;
    }

    .nebula {
        position: absolute; width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(0, 242, 255, 0.05) 0%, transparent 70%);
        z-index: 0; pointer-events: none;
    }

   
    .radar-circle {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        border: 1px solid rgba(0, 242, 255, 0.05); border-radius: 50%;
        pointer-events: none; z-index: 1;
    }

    .op-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 10; }
    .op-header h1 {
        font-family: 'Orbitron', sans-serif;
        font-size: clamp(28px, 4vw, 45px);
        letter-spacing: 12px;
        text-transform: uppercase;
        margin: 0;
        background: linear-gradient(90deg, transparent, #fff, transparent);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 15px var(--neon-blue));
    }

    
    .roadmap-grid {
        display: grid; grid-template-columns: 1fr; gap: 40px; 
        max-width: 900px; margin: 0 auto; position: relative; z-index: 10;
    }

    .roadmap-grid::before {
        content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
        background: linear-gradient(180deg, var(--neon-blue), var(--neon-orange), var(--neon-blue));
        box-shadow: 0 0 10px var(--neon-blue);
        z-index: 1;
    }

    .sector-node { display: flex; align-items: center; position: relative; z-index: 2; width: 100%; }
    .sector-node:nth-child(even) { flex-direction: row-reverse; }

    .tech-panel {
        width: 44%; background: rgba(5, 10, 20, 0.9);
        border: 1px solid rgba(0, 242, 255, 0.2);
        padding: 20px; position: relative; backdrop-filter: blur(10px);
        transition: 0.3s all ease;
    }

    .tech-panel::before {
        content: '['; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
        font-size: 25px; color: var(--neon-blue);
    }

    .sector-node:nth-child(even) .tech-panel::before { content: ']'; left: auto; right: -10px; }

    .sector-id { color: var(--neon-blue); font-size: 11px; display: block; margin-bottom: 5px; }
    .tech-panel h3 { font-family: 'Orbitron', sans-serif; font-size: 18px; margin: 5px 0; }
    .tech-panel p { font-size: 13px; color: #a0acb9; line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }

    .core-hub {
        width: 44px; height: 44px; background: var(--void-black);
        border: 2px solid var(--neon-blue); transform: rotate(45deg);
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 0 15px var(--neon-blue);
        position: absolute; left: 50%; transform: translate(-50%, 0) rotate(45deg);
    }
    .core-hub i { transform: rotate(-45deg); font-size: 16px; color: var(--neon-blue); }

    .node-active .tech-panel { border-color: var(--neon-orange); }
    .node-active .core-hub { border-color: var(--neon-orange); box-shadow: 0 0 20px var(--neon-orange); animation: pulse 2s infinite; }

    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

    
    .war-vessel { position: absolute; z-index: 5; pointer-events: none; }
    .laser-bolt { 
        position: absolute; height: 2px; width: 20px; border-radius: 4px;
        z-index: 4; pointer-events: none;
    }
    .hit-spark {
        position: absolute; width: 4px; height: 4px; background: #fff;
        box-shadow: 0 0 10px 2px var(--neon-orange); border-radius: 50%;
    }

    @media (max-width: 768px) {
        .roadmap-grid::before { left: 25px; }
        .core-hub { left: 25px; transform: translate(-50%, 0) rotate(45deg) scale(0.8); }
        .sector-node, .sector-node:nth-child(even) { flex-direction: column; align-items: flex-start; padding-left: 60px; }
        .tech-panel { width: 100%; }
        .tech-panel::before { display: none; }
    }