@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800;900&family=Quicksand:wght@300;400;500;600;700&family=Great+Vibes&display=swap";
:root{--space-bg:#03010a;--space-card-bg:#0b081ca6;--space-cyan:#38bdf8;--space-purple:#a855f7;--space-pink:#ec4899;--space-gold:#fbbf24;--space-text-light:#f1f5f9;--space-text-muted:#94a3b8}.space-theme{background-color:var(--space-bg);color:var(--space-text-light);-webkit-font-smoothing:antialiased;font-family:Quicksand,sans-serif;overflow-x:hidden}.font-cosmic{font-family:Orbitron,sans-serif!important}.font-script{font-family:Great Vibes,cursive!important}.global-space-bg{z-index:0;pointer-events:none;background:radial-gradient(circle,#0c0824 0%,#03010a 100%);position:fixed;inset:0;overflow:hidden}.space-viewport-wrapper{background:radial-gradient(circle at 50% 30%,#0d0a21 0%,#060412 55%,#020106 100%);border-left:1px solid #38bdf840;border-right:1px solid #38bdf840;width:100%;max-width:480px;min-height:100vh;margin:0 auto;position:relative;overflow-x:hidden;box-shadow:0 0 60px #a855f74d}.airlock-gateway-overlay{z-index:100;pointer-events:none;background:0 0;position:fixed;inset:0;overflow:hidden}.airlock-door{z-index:10;pointer-events:auto;background:linear-gradient(135deg,#0f0b24 0%,#05030d 100%);border-bottom:2px solid #38bdf833;align-items:center;width:50%;display:flex;position:absolute;top:0;bottom:0;overflow:hidden}.airlock-left{border-right:4px solid var(--space-cyan);justify-content:flex-end;left:0;box-shadow:20px 0 40px #0009}.airlock-right{border-left:4px solid var(--space-cyan);justify-content:flex-start;right:0;box-shadow:-20px 0 40px #0009}.airlock-frame{pointer-events:none;border:1px solid #a855f733;position:absolute;inset:16px}.airlock-left .airlock-frame{background:linear-gradient(90deg,#38bdf805,#0000);border-right:none;border-radius:24px 0 0 24px}.airlock-right .airlock-frame{background:linear-gradient(-90deg,#38bdf805,#0000);border-left:none;border-radius:0 24px 24px 0}.airlock-stripes{opacity:.15;width:12px;height:100%;position:absolute}.airlock-left .airlock-stripes{background:repeating-linear-gradient(45deg, var(--space-cyan), var(--space-cyan) 10px, transparent 10px, transparent 20px);right:8px}.airlock-right .airlock-stripes{background:repeating-linear-gradient(45deg, var(--space-cyan), var(--space-cyan) 10px, transparent 10px, transparent 20px);left:8px}.airlock-circuit{background:linear-gradient(to bottom, transparent, var(--space-cyan), var(--space-purple), transparent);opacity:.7;width:2px;position:absolute}.airlock-left .airlock-circuit{height:70%;box-shadow:0 0 12px var(--space-cyan);right:40px}.airlock-right .airlock-circuit{height:70%;box-shadow:0 0 12px var(--space-purple);left:40px}.airlock-lock-core{border:3px solid var(--space-cyan);cursor:pointer;background:radial-gradient(circle,#16103c 0%,#08051a 100%);border-radius:50%;justify-content:center;align-items:center;width:110px;height:110px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;box-shadow:0 0 25px #38bdf880,inset 0 0 20px #a855f780}.airlock-lock-core:hover{border-color:var(--space-pink);transform:scale(1.08);box-shadow:0 0 35px #ec489999,inset 0 0 25px #38bdf899}.airlock-lock-core:before{content:"";border:1px dashed var(--space-purple);border-radius:50%;animation:16s linear infinite spinDashboard;position:absolute;inset:-8px}.airlock-lock-core:after{content:"";border:1.5px dotted #38bdf84d;border-radius:50%;animation:24s linear infinite reverse spinDashboard;position:absolute;inset:-15px}@keyframes spinDashboard{to{transform:rotate(360deg)}}.space-card{background:var(--space-card-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid #38bdf826;border-radius:28px;transition:all .4s;position:relative;overflow:hidden;box-shadow:0 20px 40px #0006,inset 0 0 25px #a855f714}.space-card:before{content:"";background:linear-gradient(90deg, transparent, var(--space-cyan), var(--space-purple), var(--space-pink), transparent);width:100%;height:3px;position:absolute;top:0;left:0}.space-card:hover{border-color:#38bdf840;box-shadow:0 25px 45px #00000080,inset 0 0 30px #38bdf80d}.hud-porthole-container{justify-content:center;align-items:center;width:250px;height:250px;display:flex;position:relative}.hud-ring-outer{border:2px dashed #38bdf873;border-radius:50%;animation:28s linear infinite spinDashboard;position:absolute;inset:-12px}.hud-ring-mid{border:1px solid #a855f766;border-radius:50%;animation:18s linear infinite reverse spinDashboard;position:absolute;inset:-6px}.hud-ring-inner{border:4px solid #38bdf866;border-radius:50%;position:absolute;inset:0;box-shadow:0 0 25px #38bdf84d}@keyframes twinkleStar{0%,to{opacity:.15;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}@keyframes driftNebula{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-30px)rotate(3deg)}to{transform:translateY(0)rotate(0)}}@keyframes driftPlanet{0%{transform:translateY(115vh)translate(0)rotate(0)}to{transform:translateY(-25vh)translate(60px)rotate(360deg)}}@keyframes floatAstronaut{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-12px)rotate(2deg)}}@keyframes streak{0%{opacity:0;transform:translate(-100px,-100px)rotate(-45deg)scaleX(0)}15%{opacity:1;transform:translate(50px,50px)rotate(-45deg)scaleX(1)}30%{opacity:0;transform:translate(200px,200px)rotate(-45deg)scaleX(0)}to{opacity:0;transform:translate(200px,200px)rotate(-45deg)scaleX(0)}}.animate-twinkle-star{animation:twinkleStar var(--duration,3.5s) ease-in-out infinite}.animate-drift-nebula{animation:24s ease-in-out infinite driftNebula}.animate-drift-planet{animation:driftPlanet var(--duration,28s) linear infinite}.animate-float-astronaut{animation:6s ease-in-out infinite floatAstronaut}.shooting-star-streak{pointer-events:none;opacity:0;width:120px;height:2px;animation:streak var(--duration,5s) linear infinite;background:linear-gradient(90deg,#38bdf8 0%,#a855f700 100%);position:absolute;transform:rotate(-45deg)}.text-neon-cyan{text-shadow:0 0 10px #38bdf8b3}.text-neon-purple{text-shadow:0 0 10px #a855f7b3}.text-neon-pink{text-shadow:0 0 10px #ec4899b3}.scrollbar-space::-webkit-scrollbar{width:5px}.scrollbar-space::-webkit-scrollbar-track{background:#ffffff05;border-radius:10px}.scrollbar-space::-webkit-scrollbar-thumb{background:#38bdf833;border-radius:10px}.scrollbar-space::-webkit-scrollbar-thumb:hover{background:#a855f773}@keyframes confettiFall{0%{opacity:1;transform:translateY(-50px)rotate(0)}to{opacity:0;transform:translateY(105vh)rotate(720deg)}}.animate-confetti{animation:confettiFall var(--duration,4s) linear forwards}
