@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@300;400;700;900&family=Share+Tech+Mono&display=swap');
        
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.star {
    position: absolute;
    background: #00ffcc;
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.world-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3C!-- Ocean background --%3E%3Crect width='1000' height='500' fill='%234A90A4'/%3E%3C!-- North America --%3E%3Cpath d='M30 150 C50 130 80 140 120 135 C160 130 200 140 240 145 C280 150 320 160 360 165 C400 170 440 175 480 180 C520 185 550 190 570 200 C590 210 600 220 590 230 C580 240 560 250 530 255 C500 260 460 265 420 270 C380 275 340 280 300 285 C260 290 220 295 180 300 C140 305 100 310 70 315 C40 320 20 325 15 330 C10 335 15 340 25 345 C35 350 50 355 70 360 C90 365 110 370 130 375 C150 380 170 385 190 390 C210 395 230 400 250 405 C270 410 290 415 310 420 C330 425 350 430 370 435 C390 440 410 445 430 450 C450 455 470 460 490 465 C510 470 530 475 550 480 C570 485 590 490 610 495 C630 500 650 495 670 490 C690 485 710 480 730 475 C750 470 770 465 790 460 C810 455 830 450 850 445 C870 440 890 435 910 430 C930 425 950 420 970 415 C990 410 1000 405 1000 400 L1000 0 L950 5 C900 10 850 15 800 20 C750 25 700 30 650 35 C600 40 550 45 500 50 C450 55 400 60 350 65 C300 70 250 75 200 80 C150 85 100 90 50 95 C25 100 10 110 5 125 C0 140 10 150 30 150 Z' fill='%23F4E4C1'/%3E%3C!-- Greenland --%3E%3Cpath d='M350 30 C380 25 410 30 440 35 C470 40 500 45 520 55 C540 65 550 75 545 85 C540 95 525 105 505 110 C485 115 460 115 435 110 C410 105 385 95 365 85 C345 75 335 65 340 55 C345 45 350 35 350 30 Z' fill='%23FFFFFF'/%3E%3C!-- South America --%3E%3Cpath d='M280 280 C300 275 320 280 340 285 C360 290 380 295 400 305 C420 315 440 325 455 340 C470 355 480 370 485 385 C490 400 490 415 485 430 C480 445 470 460 455 470 C440 480 420 485 400 485 C380 485 360 480 340 475 C320 470 300 465 285 455 C270 445 260 430 255 415 C250 400 250 385 255 370 C260 355 270 340 280 325 C285 310 280 295 280 280 Z' fill='%23F4E4C1'/%3E%3C!-- Africa --%3E%3Cpath d='M480 200 C510 195 540 200 570 210 C600 220 630 235 655 255 C680 275 700 300 715 325 C730 350 740 375 745 400 C750 425 750 450 745 470 C740 490 730 505 715 515 C700 525 680 530 660 530 C640 530 620 525 600 515 C580 505 560 490 545 470 C530 450 520 425 515 400 C510 375 510 350 515 325 C520 300 530 275 540 255 C550 235 560 220 570 210 C580 200 590 195 600 195 C580 190 560 185 540 185 C520 185 500 190 485 200 C475 205 470 210 480 200 Z' fill='%23F4E4C1'/%3E%3C!-- Europe --%3E%3Cpath d='M450 140 C480 135 510 140 540 145 C570 150 600 160 620 175 C640 190 650 210 645 225 C640 240 625 250 605 255 C585 260 560 260 535 255 C510 250 485 240 470 225 C455 210 450 190 455 175 C460 160 465 150 450 140 Z' fill='%23F4E4C1'/%3E%3C!-- Asia --%3E%3Cpath d='M620 120 C660 115 700 125 740 135 C780 145 820 160 860 175 C900 190 940 210 970 235 C1000 260 1000 285 995 305 C990 325 980 340 965 350 C950 360 930 365 910 365 C890 365 870 360 850 350 C830 340 810 325 795 305 C780 285 770 260 765 235 C760 210 760 185 765 165 C770 145 780 130 795 120 C810 110 830 105 850 105 C830 100 810 95 790 95 C770 95 750 100 730 110 C710 120 690 135 675 155 C660 175 650 200 645 225 C640 250 640 275 645 295 C650 315 660 330 675 340 C690 350 710 355 730 355 C710 360 690 365 670 365 C650 365 630 360 615 350 C600 340 590 325 585 305 C580 285 580 260 585 235 C590 210 600 185 615 165 C630 145 650 130 670 120 C680 115 690 112 695 110 C685 108 675 106 665 105 C655 104 645 104 635 105 C625 106 615 108 620 120 Z' fill='%23F4E4C1'/%3E%3C!-- Australia --%3E%3Cpath d='M760 350 C790 345 820 350 850 360 C880 370 905 385 920 405 C935 425 940 450 935 470 C930 490 915 505 895 510 C875 515 850 510 825 500 C800 490 775 475 760 455 C745 435 740 410 745 390 C750 370 760 355 760 350 Z' fill='%23F4E4C1'/%3E%3C!-- Country Labels - Major Powers --%3E%3Ctext x='280' y='200' font-family='Arial' font-size='10' fill='%23333' font-weight='bold'%3EUNITED STATES%3C/text%3E%3Ctext x='320' y='380' font-family='Arial' font-size='10' fill='%23333' font-weight='bold'%3EBRAZIL%3C/text%3E%3Ctext x='750' y='180' font-family='Arial' font-size='12' fill='%23333' font-weight='bold'%3ERUSSIA%3C/text%3E%3Ctext x='720' y='220' font-family='Arial' font-size='10' fill='%23333' font-weight='bold'%3ECHINA%3C/text%3E%3Ctext x='680' y='240' font-family='Arial' font-size='8' fill='%23333' font-weight='bold'%3EINDIA%3C/text%3E%3Ctext x='830' y='420' font-family='Arial' font-size='10' fill='%23333' font-weight='bold'%3EAUSTRALIA%3C/text%3E%3C!-- North America --%3E%3Ctext x='140' y='160' font-family='Arial' font-size='10' fill='%23333'%3ECANADA%3C/text%3E%3Ctext x='220' y='260' font-family='Arial' font-size='8' fill='%23333'%3EMexico%3C/text%3E%3C!-- US Cities --%3E%3Ctext x='390' y='190' font-family='Arial' font-size='4' fill='%23555'%3ENew York%3C/text%3E%3Ctext x='200' y='210' font-family='Arial' font-size='4' fill='%23555'%3ELos Angeles%3C/text%3E%3Ctext x='320' y='185' font-family='Arial' font-size='4' fill='%23555'%3EChicago%3C/text%3E%3Ctext x='340' y='175' font-family='Arial' font-size='4' fill='%23555'%3EWashington%3C/text%3E%3Ctext x='250' y='195' font-family='Arial' font-size='4' fill='%23555'%3ELas Vegas%3C/text%3E%3Ctext x='370' y='205' font-family='Arial' font-size='4' fill='%23555'%3EMiami%3C/text%3E%3C!-- Canadian Cities --%3E%3Ctext x='120' y='170' font-family='Arial' font-size='4' fill='%23555'%3EToronto%3C/text%3E%3Ctext x='80' y='155' font-family='Arial' font-size='4' fill='%23555'%3EVancouver%3C/text%3E%3Ctext x='160' y='180' font-family='Arial' font-size='4' fill='%23555'%3EMontreal%3C/text%3E%3C!-- Mexican Cities --%3E%3Ctext x='240' y='270' font-family='Arial' font-size='4' fill='%23555'%3EMexico City%3C/text%3E%3Ctext x='200' y='275' font-family='Arial' font-size='4' fill='%23555'%3EGuadalajara%3C/text%3E%3C!-- South America --%3E%3Ctext x='290' y='420' font-family='Arial' font-size='8' fill='%23333'%3EArgentina%3C/text%3E%3Ctext x='310' y='340' font-family='Arial' font-size='6' fill='%23333'%3EColombia%3C/text%3E%3Ctext x='290' y='350' font-family='Arial' font-size='6' fill='%23333'%3EVenezuela%3C/text%3E%3Ctext x='330' y='400' font-family='Arial' font-size='6' fill='%23333'%3EPeru%3C/text%3E%3Ctext x='370' y='360' font-family='Arial' font-size='6' fill='%23333'%3EChile%3C/text%3E%3Ctext x='350' y='380' font-family='Arial' font-size='6' fill='%23333'%3EBolivia%3C/text%3E%3Ctext x='380' y='430' font-family='Arial' font-size='6' fill='%23333'%3EUruguay%3C/text%3E%3C!-- South American Cities --%3E%3Ctext x='350' y='390' font-family='Arial' font-size='4' fill='%23555'%3ESao Paulo%3C/text%3E%3Ctext x='360' y='380' font-family='Arial' font-size='4' fill='%23555'%3ERio de Janeiro%3C/text%3E%3Ctext x='320' y='430' font-family='Arial' font-size='4' fill='%23555'%3EBuenos Aires%3C/text%3E%3Ctext x='320' y='350' font-family='Arial' font-size='4' fill='%23555'%3EBogota%3C/text%3E%3Ctext x='280' y='360' font-family='Arial' font-size='4' fill='%23555'%3ECaracas%3C/text%3E%3Ctext x='340' y='410' font-family='Arial' font-size='4' fill='%23555'%3ELima%3C/text%3E%3Ctext x='380' y='370' font-family='Arial' font-size='4' fill='%23555'%3ESantiago%3C/text%3E%3C!-- Europe --%3E%3Ctext x='520' y='180' font-family='Arial' font-size='8' fill='%23333'%3EFrance%3C/text%3E%3Ctext x='540' y='160' font-family='Arial' font-size='8' fill='%23333'%3EGermany%3C/text%3E%3Ctext x='580' y='190' font-family='Arial' font-size='6' fill='%23333'%3EItaly%3C/text%3E%3Ctext x='480' y='150' font-family='Arial' font-size='6' fill='%23333'%3EUK%3C/text%3E%3Ctext x='500' y='200' font-family='Arial' font-size='6' fill='%23333'%3ESpain%3C/text%3E%3Ctext x='490' y='190' font-family='Arial' font-size='5' fill='%23333'%3EPortugal%3C/text%3E%3Ctext x='510' y='150' font-family='Arial' font-size='5' fill='%23333'%3ENetherlands%3C/text%3E%3Ctext x='530' y='150' font-family='Arial' font-size='5' fill='%23333'%3EBelgium%3C/text%3E%3Ctext x='560' y='150' font-family='Arial' font-size='6' fill='%23333'%3EPoland%3C/text%3E%3Ctext x='580' y='140' font-family='Arial' font-size='6' fill='%23333'%3EUkraine%3C/text%3E%3Ctext x='520' y='120' font-family='Arial' font-size='6' fill='%23333'%3ENorway%3C/text%3E%3Ctext x='540' y='120' font-family='Arial' font-size='6' fill='%23333'%3ESweden%3C/text%3E%3Ctext x='560' y='110' font-family='Arial' font-size='5' fill='%23333'%3EFinland%3C/text%3E%3Ctext x='510' y='130' font-family='Arial' font-size='5' fill='%23333'%3EDenmark%3C/text%3E%3Ctext x='550' y='170' font-family='Arial' font-size='5' fill='%23333'%3ESwitzerland%3C/text%3E%3Ctext x='570' y='160' font-family='Arial' font-size='5' fill='%23333'%3EAustria%3C/text%3E%3Ctext x='590' y='200' font-family='Arial' font-size='6' fill='%23333'%3EGreece%3C/text%3E%3Ctext x='610' y='180' font-family='Arial' font-size='7' fill='%23333'%3ETurkey%3C/text%3E%3C!-- European Cities --%3E%3Ctext x='490' y='160' font-family='Arial' font-size='4' fill='%23555'%3ELondon%3C/text%3E%3Ctext x='530' y='190' font-family='Arial' font-size='4' fill='%23555'%3EParis%3C/text%3E%3Ctext x='550' y='170' font-family='Arial' font-size='4' fill='%23555'%3EBerlin%3C/text%3E%3Ctext x='590' y='200' font-family='Arial' font-size='4' fill='%23555'%3ERome%3C/text%3E%3Ctext x='510' y='210' font-family='Arial' font-size='4' fill='%23555'%3EMadrid%3C/text%3E%3Ctext x='500' y='200' font-family='Arial' font-size='4' fill='%23555'%3ELisbon%3C/text%3E%3Ctext x='520' y='160' font-family='Arial' font-size='4' fill='%23555'%3EAmsterdam%3C/text%3E%3Ctext x='540' y='160' font-family='Arial' font-size='4' fill='%23555'%3EBrussels%3C/text%3E%3Ctext x='570' y='160' font-family='Arial' font-size='4' fill='%23555'%3EWarsaw%3C/text%3E%3Ctext x='590' y='150' font-family='Arial' font-size='4' fill='%23555'%3EKiev%3C/text%3E%3Ctext x='530' y='130' font-family='Arial' font-size='4' fill='%23555'%3EOslo%3C/text%3E%3Ctext x='550' y='130' font-family='Arial' font-size='4' fill='%23555'%3EStockholm%3C/text%3E%3Ctext x='760' y='190' font-family='Arial' font-size='4' fill='%23555'%3EMoscow%3C/text%3E%3Ctext x='620' y='190' font-family='Arial' font-size='4' fill='%23555'%3EIstanbul%3C/text%3E%3Ctext x='600' y='210' font-family='Arial' font-size='4' fill='%23555'%3EAthens%3C/text%3E%3C!-- Asia --%3E%3Ctext x='850' y='260' font-family='Arial' font-size='6' fill='%23333'%3EJapan%3C/text%3E%3Ctext x='830' y='240' font-family='Arial' font-size='6' fill='%23333'%3ES.Korea%3C/text%3E%3Ctext x='810' y='230' font-family='Arial' font-size='6' fill='%23333'%3EN.Korea%3C/text%3E%3Ctext x='780' y='270' font-family='Arial' font-size='6' fill='%23333'%3EVietnam%3C/text%3E%3Ctext x='760' y='280' font-family='Arial' font-size='6' fill='%23333'%3EThailand%3C/text%3E%3Ctext x='740' y='290' font-family='Arial' font-size='5' fill='%23333'%3EMyanmar%3C/text%3E%3Ctext x='800' y='300' font-family='Arial' font-size='6' fill='%23333'%3EIndonesia%3C/text%3E%3Ctext x='780' y='320' font-family='Arial' font-size='6' fill='%23333'%3EMalaysia%3C/text%3E%3Ctext x='830' y='280' font-family='Arial' font-size='6' fill='%23333'%3EPhilippines%3C/text%3E%3Ctext x='640' y='200' font-family='Arial' font-size='7' fill='%23333'%3EIran%3C/text%3E%3Ctext x='660' y='210' font-family='Arial' font-size='6' fill='%23333'%3EIraq%3C/text%3E%3Ctext x='650' y='240' font-family='Arial' font-size='6' fill='%23333'%3ESaudi Arabia%3C/text%3E%3Ctext x='700' y='230' font-family='Arial' font-size='6' fill='%23333'%3EPakistan%3C/text%3E%3Ctext x='720' y='250' font-family='Arial' font-size='6' fill='%23333'%3EBangladesh%3C/text%3E%3Ctext x='680' y='180' font-family='Arial' font-size='6' fill='%23333'%3EAfghanistan%3C/text%3E%3Ctext x='720' y='160' font-family='Arial' font-size='6' fill='%23333'%3EKazakhstan%3C/text%3E%3Ctext x='700' y='300' font-family='Arial' font-size='5' fill='%23333'%3ESri Lanka%3C/text%3E%3C!-- Asian Cities --%3E%3Ctext x='860' y='270' font-family='Arial' font-size='4' fill='%23555'%3ETokyo%3C/text%3E%3Ctext x='740' y='230' font-family='Arial' font-size='4' fill='%23555'%3EBeijing%3C/text%3E%3Ctext x='770' y='240' font-family='Arial' font-size='4' fill='%23555'%3EShanghai%3C/text%3E%3Ctext x='690' y='250' font-family='Arial' font-size='4' fill='%23555'%3EDelhi%3C/text%3E%3Ctext x='680' y='260' font-family='Arial' font-size='4' fill='%23555'%3EMumbai%3C/text%3E%3Ctext x='840' y='250' font-family='Arial' font-size='4' fill='%23555'%3ESeoul%3C/text%3E%3Ctext x='780' y='280' font-family='Arial' font-size='4' fill='%23555'%3EHo Chi Minh%3C/text%3E%3Ctext x='770' y='290' font-family='Arial' font-size='4' fill='%23555'%3EBangkok%3C/text%3E%3Ctext x='810' y='310' font-family='Arial' font-size='4' fill='%23555'%3EJakarta%3C/text%3E%3Ctext x='790' y='330' font-family='Arial' font-size='4' fill='%23555'%3EKuala Lumpur%3C/text%3E%3Ctext x='840' y='290' font-family='Arial' font-size='4' fill='%23555'%3EManila%3C/text%3E%3Ctext x='650' y='210' font-family='Arial' font-size='4' fill='%23555'%3ETehran%3C/text%3E%3Ctext x='670' y='220' font-family='Arial' font-size='4' fill='%23555'%3EBaghdad%3C/text%3E%3Ctext x='660' y='250' font-family='Arial' font-size='4' fill='%23555'%3ERiyadh%3C/text%3E%3Ctext x='710' y='240' font-family='Arial' font-size='4' fill='%23555'%3EKarachi%3C/text%3E%3Ctext x='730' y='260' font-family='Arial' font-size='4' fill='%23555'%3EDhaka%3C/text%3E%3Ctext x='690' y='190' font-family='Arial' font-size='4' fill='%23555'%3EKabul%3C/text%3E%3C!-- Africa --%3E%3Ctext x='580' y='340' font-family='Arial' font-size='8' fill='%23333'%3ENigeria%3C/text%3E%3Ctext x='620' y='380' font-family='Arial' font-size='6' fill='%23333'%3ECongo%3C/text%3E%3Ctext x='640' y='300' font-family='Arial' font-size='6' fill='%23333'%3EEthiopia%3C/text%3E%3Ctext x='600' y='420' font-family='Arial' font-size='6' fill='%23333'%3ESouth Africa%3C/text%3E%3Ctext x='550' y='240' font-family='Arial' font-size='6' fill='%23333'%3EEgypt%3C/text%3E%3Ctext x='570' y='250' font-family='Arial' font-size='6' fill='%23333'%3ELibya%3C/text%3E%3Ctext x='520' y='260' font-family='Arial' font-size='6' fill='%23333'%3EAlgeria%3C/text%3E%3Ctext x='480' y='250' font-family='Arial' font-size='6' fill='%23333'%3EMorocco%3C/text%3E%3Ctext x='620' y='330' font-family='Arial' font-size='5' fill='%23333'%3EKenya%3C/text%3E%3Ctext x='640' y='360' font-family='Arial' font-size='5' fill='%23333'%3ETanzania%3C/text%3E%3Ctext x='540' y='320' font-family='Arial' font-size='5' fill='%23333'%3EGhana%3C/text%3E%3Ctext x='590' y='280' font-family='Arial' font-size='5' fill='%23333'%3ESudan%3C/text%3E%3Ctext x='680' y='440' font-family='Arial' font-size='6' fill='%23333'%3EMadagascar%3C/text%3E%3C!-- African Cities --%3E%3Ctext x='560' y='250' font-family='Arial' font-size='4' fill='%23555'%3ECairo%3C/text%3E%3Ctext x='590' y='350' font-family='Arial' font-size='4' fill='%23555'%3ELagos%3C/text%3E%3Ctext x='610' y='430' font-family='Arial' font-size='4' fill='%23555'%3EJohannesburg%3C/text%3E%3Ctext x='630' y='340' font-family='Arial' font-size='4' fill='%23555'%3ENairobi%3C/text%3E%3Ctext x='490' y='260' font-family='Arial' font-size='4' fill='%23555'%3ECasablanca%3C/text%3E%3Ctext x='530' y='270' font-family='Arial' font-size='4' fill='%23555'%3EAlgiers%3C/text%3E%3Ctext x='580' y='260' font-family='Arial' font-size='4' fill='%23555'%3ETripoli%3C/text%3E%3Ctext x='650' y='310' font-family='Arial' font-size='4' fill='%23555'%3EAddis Ababa%3C/text%3E%3Ctext x='630' y='390' font-family='Arial' font-size='4' fill='%23555'%3EKinshasa%3C/text%3E%3Ctext x='550' y='330' font-family='Arial' font-size='4' fill='%23555'%3EAccra%3C/text%3E%3C!-- Arctic --%3E%3Ctext x='420' y='60' font-family='Arial' font-size='8' fill='%23333'%3EGreenland%3C/text%3E%3Ctext x='420' y='100' font-family='Arial' font-size='5' fill='%23333'%3EIceland%3C/text%3E%3C!-- Oceania --%3E%3Ctext x='920' y='470' font-family='Arial' font-size='6' fill='%23333'%3ENew Zealand%3C/text%3E%3Ctext x='850' y='340' font-family='Arial' font-size='5' fill='%23333'%3EPapua New Guinea%3C/text%3E%3C!-- Australian Cities --%3E%3Ctext x='860' y='430' font-family='Arial' font-size='4' fill='%23555'%3ESydney%3C/text%3E%3Ctext x='840' y='440' font-family='Arial' font-size='4' fill='%23555'%3EMelbourne%3C/text%3E%3Ctext x='790' y='410' font-family='Arial' font-size='4' fill='%23555'%3EPerth%3C/text%3E%3Ctext x='880' y='400' font-family='Arial' font-size='4' fill='%23555'%3EBrisbane%3C/text%3E%3Ctext x='930' y='480' font-family='Arial' font-size='4' fill='%23555'%3EAuckland%3C/text%3E%3C!-- Caribbean --%3E%3Ctext x='240' y='250' font-family='Arial' font-size='5' fill='%23333'%3ECuba%3C/text%3E%3Ctext x='260' y='260' font-family='Arial' font-size='4' fill='%23333'%3EJamaica%3C/text%3E%3Ctext x='250' y='260' font-family='Arial' font-size='4' fill='%23555'%3EHavana%3C/text%3E%3Ctext x='270' y='270' font-family='Arial' font-size='4' fill='%23555'%3EKingston%3C/text%3E%3C!-- Islands --%3E%3Ccircle cx='680' cy='420' r='12' fill='%23F4E4C1'/%3E%3Ccircle cx='900' cy='220' r='8' fill='%23F4E4C1'/%3E%3Ccircle cx='480' cy='150' r='6' fill='%23F4E4C1'/%3E%3Ccircle cx='920' cy='450' r='5' fill='%23F4E4C1'/%3E%3Ccircle cx='800' cy='320' r='4' fill='%23F4E4C1'/%3E%3Ccircle cx='820' cy='325' r='3' fill='%23F4E4C1'/%3E%3Ccircle cx='840' cy='330' r='3' fill='%23F4E4C1'/%3E%3Ccircle cx='860' cy='280' r='4' fill='%23F4E4C1'/%3E%3Ccircle cx='250' cy='240' r='3' fill='%23F4E4C1'/%3E%3Ccircle cx='260' cy='245' r='2' fill='%23F4E4C1'/%3E%3Ccircle cx='270' cy='250' r='2' fill='%23F4E4C1'/%3E%3Ccircle cx='420' cy='100' r='5' fill='%23F4E4C1'/%3E%3Ccircle cx='700' cy='300' r='3' fill='%23F4E4C1'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
    cursor: grab;
}

.world-map.dragging {
    cursor: grabbing;
    transition: none;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image: 
        linear-gradient(rgba(0, 255, 204, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 204, 0.2) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    animation: gridPulse 8s infinite ease-in-out;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.08; }
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.radar-hud {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #00ffcc;
    text-shadow: 0 0 10px #00ffcc;
    z-index: 20;
}

.radar-hud .status-line {
    margin-bottom: 5px;
    opacity: 0.8;
}

.timestamp {
    color: #ffeb3b;
    text-shadow: 0 0 10px #ffeb3b;
}

.threat-level {
    color: #ff4444;
    text-shadow: 0 0 10px #ff4444;
    animation: threatBlink 2s infinite;
}

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

.radar-container {
    position: relative;
    width: 450px;
    height: 450px;
    margin-bottom: 60px;
}

.radar-circle {
    position: absolute;
    border: 2px solid #00ffcc;
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(0, 255, 204, 0.3),
        inset 0 0 20px rgba(0, 255, 204, 0.1);
}

.radar-circle:nth-child(1) { 
    width: 120px; height: 120px; 
    top: 190px; left: 190px; 
    opacity: 0.9;
    animation: radarPulse 3s infinite ease-in-out;
}
.radar-circle:nth-child(2) { 
    width: 200px; height: 200px; 
    top: 150px; left: 150px; 
    opacity: 0.7;
    animation: radarPulse 3s infinite ease-in-out 0.5s;
}
.radar-circle:nth-child(3) { 
    width: 300px; height: 300px; 
    top: 100px; left: 100px; 
    opacity: 0.6;
    animation: radarPulse 3s infinite ease-in-out 1s;
}
.radar-circle:nth-child(4) { 
    width: 400px; height: 400px; 
    top: 50px; left: 50px; 
    opacity: 0.5;
    animation: radarPulse 3s infinite ease-in-out 1.5s;
}
.radar-circle:nth-child(5) { 
    width: 480px; height: 480px; 
    top: 10px; left: 10px; 
    opacity: 0.4;
    animation: radarPulse 3s infinite ease-in-out 2s;
}

@keyframes radarPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(0, 255, 204, 0.3), inset 0 0 20px rgba(0, 255, 204, 0.1);
    }
    50% { 
        transform: scale(1.02); 
        box-shadow: 0 0 30px rgba(0, 255, 204, 0.6), inset 0 0 30px rgba(0, 255, 204, 0.2);
    }
}

.radar-line {
    position: absolute;
    width: 2px;
    height: 240px;
    background: linear-gradient(to bottom, 
        rgba(0, 255, 204, 0.8), 
        rgba(0, 255, 204, 0.4), 
        transparent);
    left: 50%;
    top: 10px;
    transform-origin: bottom;
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

.radar-line:nth-child(6) { transform: translateX(-50%) rotate(0deg); }
.radar-line:nth-child(7) { transform: translateX(-50%) rotate(45deg); }
.radar-line:nth-child(8) { transform: translateX(-50%) rotate(90deg); }
.radar-line:nth-child(9) { transform: translateX(-50%) rotate(135deg); }
.radar-line:nth-child(10) { transform: translateX(-50%) rotate(180deg); }
.radar-line:nth-child(11) { transform: translateX(-50%) rotate(225deg); }
.radar-line:nth-child(12) { transform: translateX(-50%) rotate(270deg); }
.radar-line:nth-child(13) { transform: translateX(-50%) rotate(315deg); }

.sweep {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 250px;
    transform-origin: center;
    animation: radarSweep 4s linear infinite;
    z-index: 5;
}

.sweep::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 220px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 220px solid rgba(0, 255, 204, 0.15);
    transform: rotate(-30deg);
    transform-origin: bottom right;
    filter: blur(3px);
    box-shadow: 0 0 50px rgba(0, 255, 204, 0.3);
}

.sweep::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 240px;
    background: linear-gradient(to bottom, 
        #00ffcc, 
        rgba(0, 255, 204, 0.8), 
        transparent);
    left: -1.5px;
    top: -240px;
    box-shadow: 0 0 20px #00ffcc, 0 0 40px rgba(0, 255, 204, 0.6);
}

@keyframes radarSweep {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

.threat-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #ff4444, #cc0000);
    border-radius: 50%;
    border: 2px solid #ff6666;
    animation: threatPulse 1.5s infinite;
    box-shadow: 
        0 0 20px #ff4444,
        0 0 40px rgba(255, 68, 68, 0.6);
    z-index: 10;
}

@keyframes threatPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
        box-shadow: 0 0 20px #ff4444, 0 0 40px rgba(255, 68, 68, 0.6);
    }
    50% { 
        transform: scale(1.8); 
        opacity: 0.8;
        box-shadow: 0 0 30px #ff4444, 0 0 60px rgba(255, 68, 68, 0.8);
    }
}

.threat-ring {
    position: absolute;
    border: 2px solid #ff4444;
    border-radius: 50%;
    animation: threatRing 2s infinite;
    pointer-events: none;
}

@keyframes threatRing {
    0% { 
        width: 14px; 
        height: 14px; 
        opacity: 0.8; 
        margin: -7px;
    }
    100% { 
        width: 50px; 
        height: 50px; 
        opacity: 0; 
        margin: -25px;
    }
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #00ffcc, #009999);
    border-radius: 50%;
    border: 2px solid #66ffee;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 20px #00ffcc,
        0 0 40px rgba(0, 255, 204, 0.8);
    z-index: 15;
    animation: centerPulse 2s infinite;
}

@keyframes centerPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 0 0 20px #00ffcc, 0 0 40px rgba(0, 255, 204, 0.8);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.3); 
        box-shadow: 0 0 30px #00ffcc, 0 0 60px rgba(0, 255, 204, 1);
    }
}

.bottom-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.waveform-container {
    flex: 1;
    height: 120px;
    position: relative;
    margin-right: 60px;
    border: 1px solid rgba(0, 255, 204, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.waveform-title {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 0.9rem;
    color: #00ffcc;
    text-shadow: 0 0 10px #00ffcc;
    z-index: 10;
}

.waveform {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 80px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #00ffcc 5%, 
        #00ffcc 15%, 
        #ffeb3b 20%, 
        #ffeb3b 25%, 
        #ff4444 30%, 
        #ff4444 35%, 
        #00ffcc 40%, 
        #00ffcc 60%, 
        #ff4444 65%, 
        #ff4444 70%, 
        #ffeb3b 75%, 
        #ffeb3b 80%, 
        #00ffcc 85%, 
        #00ffcc 95%, 
        transparent 100%);
    clip-path: polygon(
        0% 60%, 3% 55%, 6% 65%, 9% 45%, 12% 75%, 
        15% 40%, 18% 80%, 21% 35%, 24% 85%, 27% 30%, 
        30% 90%, 33% 25%, 36% 85%, 39% 35%, 42% 80%, 
        45% 40%, 48% 75%, 51% 45%, 54% 70%, 57% 50%, 
        60% 65%, 63% 55%, 66% 70%, 69% 50%, 72% 75%, 
        75% 45%, 78% 80%, 81% 40%, 84% 75%, 87% 50%, 
        90% 70%, 93% 55%, 96% 65%, 99% 60%, 100% 60%, 
        100% 100%, 0% 100%
    );
    animation: waveAnimation 2s infinite;
    filter: drop-shadow(0 0 10px currentColor);
}

@keyframes waveAnimation {
    0%, 100% { 
        clip-path: polygon(
            0% 60%, 3% 55%, 6% 65%, 9% 45%, 12% 75%, 
            15% 40%, 18% 80%, 21% 35%, 24% 85%, 27% 30%, 
            30% 90%, 33% 25%, 36% 85%, 39% 35%, 42% 80%, 
            45% 40%, 48% 75%, 51% 45%, 54% 70%, 57% 50%, 
            60% 65%, 63% 55%, 66% 70%, 69% 50%, 72% 75%, 
            75% 45%, 78% 80%, 81% 40%, 84% 75%, 87% 50%, 
            90% 70%, 93% 55%, 96% 65%, 99% 60%, 100% 60%, 
            100% 100%, 0% 100%
        );
    }
    25% { 
        clip-path: polygon(
            0% 55%, 3% 65%, 6% 50%, 9% 70%, 12% 45%, 
            15% 75%, 18% 40%, 21% 80%, 24% 35%, 27% 85%, 
            30% 30%, 33% 90%, 36% 25%, 39% 85%, 42% 35%, 
            45% 80%, 48% 40%, 51% 75%, 54% 45%, 57% 70%, 
            60% 50%, 63% 65%, 66% 55%, 69% 70%, 72% 50%, 
            75% 75%, 78% 45%, 81% 80%, 84% 40%, 87% 75%, 
            90% 50%, 93% 70%, 96% 55%, 99% 65%, 100% 55%, 
            100% 100%, 0% 100%
        );
    }
    50% { 
        clip-path: polygon(
            0% 70%, 3% 45%, 6% 75%, 9% 40%, 12% 80%, 
            15% 35%, 18% 85%, 21% 30%, 24% 90%, 27% 25%, 
            30% 85%, 33% 35%, 36% 80%, 39% 40%, 42% 75%, 
            45% 45%, 48% 70%, 51% 50%, 54% 65%, 57% 55%, 
            60% 70%, 63% 50%, 66% 75%, 69% 45%, 72% 80%, 
            75% 40%, 78% 85%, 81% 35%, 84% 80%, 87% 45%, 
            90% 75%, 93% 50%, 96% 70%, 99% 55%, 100% 70%, 
            100% 100%, 0% 100%
        );
    }
    75% { 
        clip-path: polygon(
            0% 65%, 3% 50%, 6% 70%, 9% 55%, 12% 65%, 
            15% 60%, 18% 55%, 21% 70%, 24% 45%, 27% 75%, 
            30% 40%, 33% 80%, 36% 35%, 39% 85%, 42% 30%, 
            45% 90%, 48% 25%, 51% 85%, 54% 35%, 57% 80%, 
            60% 40%, 63% 75%, 66% 45%, 69% 70%, 72% 50%, 
            75% 65%, 78% 55%, 81% 70%, 84% 50%, 87% 65%, 
            90% 60%, 93% 55%, 96% 70%, 99% 65%, 100% 65%, 
            100% 100%, 0% 100%
        );
    }
}

.right-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 204, 0.3);
    border-radius: 15px;
    padding: 25px;
    backdrop-filter: blur(10px);
}

.bot-icon {
    font-size: 4rem;
    color: #00ffcc;
    text-shadow: 0 0 20px #00ffcc;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #00ffcc);
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-2deg); }
}

.anomaly-text {
    text-align: center;
    font-size: 1.4rem;
    color: #00ffcc;
    text-shadow: 0 0 15px #00ffcc;
    line-height: 1.3;
    font-weight: 700;
}

.anomaly-count {
    font-size: 2.2rem;
    color: #ff4444;
    text-shadow: 0 0 20px #ff4444;
    animation: countPulse 2s infinite;
}

@keyframes countPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notification {
    position: absolute;
    top: 80px;
    right: 20px;
    background: rgba(255, 68, 68, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
    transform: translateX(100%);
    animation: slideIn 0.5s ease-out forwards, slideOut 0.5s ease-in 3s forwards;
    z-index: 100;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}

@keyframes slideIn {
    to { transform: translateX(0); }
}

@keyframes slideOut {
    to { transform: translateX(100%); }
}

.zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 100;
}

.zoom-btn {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #00ffcc;
    border-radius: 8px;
    color: #00ffcc;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-family: 'Orbitron', monospace;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
}

.zoom-btn:hover {
    background: rgba(0, 255, 204, 0.2);
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.6);
    transform: scale(1.1);
}

.zoom-level {
    position: absolute;
    top: 180px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #00ffcc;
    border-radius: 5px;
    padding: 8px 10px;
    color: #00ffcc;
    font-size: 0.8rem;
    font-family: 'Share Tech Mono', monospace;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
    z-index: 100;
    text-align: center;
    line-height: 1.3;
}
    .radar-container {
        width: 350px;
        height: 350px;
    }
    
    .bottom-section {
        flex-direction: column;
        height: 200px;
        padding: 20px;
        gap: 20px;
    }
    
    .waveform-container {
        margin-right: 0;
        height: 80px;
    }
    
    .anomaly-text {
        font-size: 1.1rem;
    }
    
    .bot-icon {
        font-size: 3rem;
    }
    
    .radar-hud {
        font-size: 0.8rem;
    }
