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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 20% 20%, rgba(76,140,255,.18), transparent 22%),
        radial-gradient(circle at 80% 10%, rgba(140,80,255,.12), transparent 20%),
        radial-gradient(circle at 50% 75%, rgba(120,255,220,.08), transparent 25%),
        radial-gradient(ellipse at center, #0f1732 0%, #070b16 58%, #000 100%);
    color: #fff;
}

#nvc-scene {
    position: relative;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#gp3-stars,
#gp3-stars::before,
#gp3-stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(120,180,255,.65) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(202,255,0,.45) 0 1px, transparent 1.8px);
    background-size: 140px 140px, 210px 210px, 320px 320px;
    background-position: 0 0, 40px 70px, 90px 20px;
    opacity: .42;
    pointer-events: none;
}
#gp3-stars::before { transform: scale(1.2); opacity: .18; }
#gp3-stars::after  { transform: scale(1.45); opacity: .10; }

#gp3-ufo-stage {
    position: relative;
    width: min(92vw, 980px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

#gp3-ufo {
    position: relative;
    width: min(88vw, 860px);
    min-height: 520px;
    animation: ufoFloat 4.8s ease-in-out infinite;
}
@keyframes ufoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

#gp3-ufo-glow {
    position: absolute;
    width: min(72vw, 640px);
    height: 140px;
    bottom: 38px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(74,158,255,.38) 0%, rgba(74,158,255,.14) 38%, rgba(74,158,255,0) 72%);
    filter: blur(10px);
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

#gp3-ufo-beam {
    position: absolute;
    bottom: 66px;
    width: min(42vw, 300px);
    height: 260px;
    background: linear-gradient(180deg, rgba(110,220,255,.22) 0%, rgba(88,168,255,.16) 32%, rgba(140,255,210,.07) 65%, rgba(140,255,210,0) 100%);
    clip-path: polygon(42% 0%, 58% 0%, 100% 100%, 0% 100%);
    filter: blur(1px);
    opacity: .9;
    animation: beamFlicker 2.4s ease-in-out infinite;
}
@keyframes beamFlicker {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

#gp3-ufo-dome-wrap {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    width: min(54vw, 390px);
    height: 238px;
}

#gp3-ufo-dome-glass {
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 42% 42% / 65% 65% 35% 35%;
    background:
        linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 16%, rgba(70,110,180,.16) 50%, rgba(24,36,74,.55) 100%),
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.32), transparent 42%);
    border: 1px solid rgba(180,220,255,.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -20px 34px rgba(10,18,40,.56),
        0 0 28px rgba(120,190,255,.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#gp3-ufo-dome-shine {
    position: absolute;
    width: 36%;
    height: 42%;
    left: 14%;
    top: 14%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.52) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,0) 76%);
    filter: blur(2px);
}

#gp3-cockpit {
    position: absolute;
    inset: 18px 26px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 2;
}

.gp3-logo-block { text-align: center; }
.gp3-logo-text {
    font-family: "Courier New", monospace;
    font-size: clamp(18px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: 4px;
    color: #caff00;
    text-shadow: 0 0 20px rgba(202,255,0,.6), 0 0 6px rgba(202,255,0,.3);
    animation: gp3LogoPulse 3s ease-in-out infinite;
    white-space: nowrap;
}
.gp3-logo-sub {
    margin-top: 5px;
    font-family: "Courier New", monospace;
    font-size: clamp(9px, 1vw, 12px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(74,158,255,.82);
}
@keyframes gp3LogoPulse {
    0%,100% { text-shadow: 0 0 20px rgba(202,255,0,.6), 0 0 6px rgba(202,255,0,.3); }
    50% { text-shadow: 0 0 36px rgba(202,255,0,.95), 0 0 14px rgba(202,255,0,.55); }
}

.gp3-sep {
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,158,255,.5) 35%, rgba(74,158,255,.88) 50%, rgba(74,158,255,.5) 65%, transparent);
    box-shadow: 0 0 8px rgba(74,158,255,.22);
}

#gp3-wifi-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.gp3-wifi-icon {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 28px;
}
.gp3-wifi-bar {
    width: clamp(7px, 1vw, 9px);
    border-radius: 3px 3px 0 0;
    background: rgba(255,255,255,.12);
    transition: background .45s ease, box-shadow .45s ease;
}
.gp3-wifi-bar:nth-child(1) { height: 28%; }
.gp3-wifi-bar:nth-child(2) { height: 48%; }
.gp3-wifi-bar:nth-child(3) { height: 72%; }
.gp3-wifi-bar:nth-child(4) { height: 100%; }
.gp3-wifi-icon.sig-0 .gp3-wifi-bar { background: rgba(255,255,255,.12); box-shadow:none; }
.gp3-wifi-icon.sig-1 .gp3-wifi-bar:nth-child(1) { background:#e03030; box-shadow:0 0 6px rgba(224,48,48,.8); }
.gp3-wifi-icon.sig-2 .gp3-wifi-bar:nth-child(1),
.gp3-wifi-icon.sig-2 .gp3-wifi-bar:nth-child(2) { background:#ff8800; box-shadow:0 0 6px rgba(255,136,0,.8); }
.gp3-wifi-icon.sig-3 .gp3-wifi-bar:nth-child(1),
.gp3-wifi-icon.sig-3 .gp3-wifi-bar:nth-child(2),
.gp3-wifi-icon.sig-3 .gp3-wifi-bar:nth-child(3) { background:#ffe100; box-shadow:0 0 6px rgba(255,225,0,.7); }
.gp3-wifi-icon.sig-4 .gp3-wifi-bar { background:#caff00; box-shadow:0 0 8px rgba(202,255,0,.8); }

#gp3-speed-val {
    min-height: 1em;
    font-family: "Courier New", monospace;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 700;
    color: #caff00;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 14px rgba(202,255,0,.7);
}
#gp3-speed-unit {
    font-family: "Courier New", monospace;
    font-size: clamp(9px, 1vw, 12px);
    letter-spacing: 2.5px;
    color: rgba(200,180,255,.58);
    text-transform: uppercase;
    margin-top: -2px;
}
#gp3-speed-label {
    min-height: 1em;
    font-family: "Courier New", monospace;
    font-size: clamp(10px, 1.15vw, 13px);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(200,180,255,.5);
    transition: color .4s;
    text-align: center;
}

#gp3-ufo-rim-lights {
    position: absolute;
    left: 50%;
    top: 210px;
    transform: translateX(-50%);
    width: min(80vw, 700px);
    display: flex;
    justify-content: space-between;
    padding: 0 44px;
    z-index: 3;
}
#gp3-ufo-rim-lights span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff 0%, #caff00 28%, rgba(74,158,255,.85) 56%, rgba(74,158,255,.2) 78%, rgba(74,158,255,0) 100%);
    box-shadow: 0 0 10px rgba(74,158,255,.55), 0 0 18px rgba(202,255,0,.18);
    animation: rimBlink 2.6s ease-in-out infinite;
}
#gp3-ufo-rim-lights span:nth-child(2n) { animation-delay: .35s; }
#gp3-ufo-rim-lights span:nth-child(3n) { animation-delay: .7s; }
@keyframes rimBlink {
    0%, 100% { transform: scale(.86); opacity: .7; }
    50% { transform: scale(1.12); opacity: 1; }
}

#gp3-ufo-body {
    position: absolute;
    left: 50%;
    top: 156px;
    transform: translateX(-50%);
    width: min(86vw, 760px);
    min-height: 270px;
    padding: 76px 72px 56px;
    border-radius: 50% / 38%;
    background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,.22), transparent 26%),
        linear-gradient(180deg, #73839d 0%, #4a576c 18%, #2b3443 56%, #151a26 100%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        inset 0 16px 26px rgba(255,255,255,.14),
        inset 0 -24px 38px rgba(0,0,0,.45),
        0 26px 70px rgba(0,0,0,.58),
        0 0 48px rgba(74,158,255,.1);
    overflow: hidden;
}

#gp3-body-highlight {
    position: absolute;
    inset: 14px 16% auto;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.18), rgba(255,255,255,0) 68%);
    filter: blur(4px);
}

#gp3-load-block {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.gp3-orbit {
    position: relative;
    width: 66px;
    height: 66px;
}
.gp3-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}
.gp3-orbit-ring-1 {
    border-top-color: #caff00;
    border-right-color: rgba(202,255,0,.12);
    animation: gp3Spin 1.1s linear infinite;
}
.gp3-orbit-ring-2 {
    inset: 10px;
    border-left-color: #4a9eff;
    border-bottom-color: rgba(74,158,255,.12);
    animation: gp3Spin 1.8s linear infinite reverse;
}
.gp3-orbit-ring-3 {
    inset: 20px;
    border-top-color: rgba(202,255,0,.45);
    animation: gp3Spin 2.6s linear infinite;
}
.gp3-orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #caff00;
    box-shadow: 0 0 10px rgba(202,255,0,.9);
    animation: gp3DotPulse 1.1s ease-in-out infinite;
}
@keyframes gp3Spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gp3DotPulse {
    0%,100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.6); opacity: .4; }
}

#gp3-progress-track {
    width: min(72%, 460px);
    height: 12px;
    padding: 2px;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.26));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.38), 0 0 14px rgba(74,158,255,.08);
}
#gp3-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4a9eff 0%, #66c7ff 45%, #caff00 100%);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(202,255,0,.55);
    transition: width .35s ease;
}

#gp3-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
#gp3-status-text {
    font-family: "Courier New", monospace;
    font-size: clamp(10px, 1vw, 13px);
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: rgba(220,230,255,.68);
    text-align: center;
    min-height: 1em;
    animation: gp3StatusBlink 2s ease-in-out infinite;
}
@keyframes gp3StatusBlink { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.nvc-signal { display:inline-flex; align-items:flex-end; gap:3px; height:13px; }
.nvc-signal i { display:block; width:4px; background:#fff; border-radius:2px; opacity:.32; }
.nvc-signal i:nth-child(1){height:4px;}
.nvc-signal i:nth-child(2){height:7px;}
.nvc-signal i:nth-child(3){height:10px;}
.nvc-signal i:nth-child(4){height:13px;}
.nvc-signal.level-1 i:nth-child(-n+1),
.nvc-signal.level-2 i:nth-child(-n+2),
.nvc-signal.level-3 i:nth-child(-n+3),
.nvc-signal.level-4 i:nth-child(-n+4) { opacity:1; }

#nvc-ticker-pre {
    width: min(88vw, 840px);
    height: 22px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(30,15,60,0) 0%, rgba(30,15,60,.72) 8%, rgba(30,15,60,.9) 50%, rgba(30,15,60,.72) 92%, rgba(30,15,60,0) 100%);
    border-top: 1px solid rgba(160,120,255,.18);
    border-bottom: 1px solid rgba(74,158,255,.12);
    box-shadow: 0 0 20px rgba(0,0,0,.18);
    pointer-events: none;
    z-index: 5;
}
#nvc-ticker-track-pre {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    padding-left: 100%;
    animation: tickerScroll 14s linear infinite;
}
#nvc-ticker-text-pre {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: .08em;
    color: rgba(200,180,255,.78);
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

#gp3-flash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
#gp3-flash.active { opacity: 1; }

#gp3-preload-frame {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    border: none;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    #gp3-ufo { min-height: 470px; }
    #gp3-ufo-dome-wrap { width: min(64vw, 340px); height: 220px; }
    #gp3-ufo-rim-lights { top: 198px; width: min(86vw, 620px); padding: 0 34px; }
    #gp3-ufo-body { top: 152px; width: min(92vw, 690px); min-height: 250px; padding: 72px 40px 48px; }
}

@media (max-width: 640px) {
    #gp3-ufo-stage { width: 100vw; }
    #gp3-ufo { width: 96vw; min-height: 420px; }
    #gp3-ufo-dome-wrap { width: 76vw; height: 205px; top: 8px; }
    #gp3-cockpit { inset: 18px 16px 24px; gap: 12px; }
    .gp3-logo-text { letter-spacing: 2px; }
    .gp3-logo-sub { letter-spacing: 1.5px; }
    #gp3-ufo-rim-lights { top: 178px; width: 94vw; padding: 0 26px; }
    #gp3-ufo-rim-lights span { width: 12px; height: 12px; }
    #gp3-ufo-body { top: 140px; width: 96vw; min-height: 230px; padding: 62px 20px 40px; }
    #gp3-progress-track { width: 88%; height: 11px; }
    #nvc-ticker-pre { width: 96vw; }
}