@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap);*{box-sizing:border-box;margin:0;padding:0}body,html{scrollbar-width:none}.App,body,html{overflow-y:auto!important}.App{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh;overflow-x:hidden!important;width:100vw}.landing-page{align-items:center;background:radial-gradient(ellipse at top,#667eea 0,#764ba2 50%,#1a1a3e 100%);display:flex;justify-content:center;min-height:100vh;overflow-x:hidden;padding:40px 20px;position:relative}.floating-elements{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.cloud{animation:float 6s ease-in-out infinite;font-size:2rem;opacity:.6;position:absolute}.cloud-1{animation-delay:0s;left:10%;top:10%}.cloud-2{animation-delay:2s;right:15%;top:20%}.cloud-3{animation-delay:4s;bottom:25%;left:20%}.sparkle{animation:twinkle 3s ease-in-out infinite;font-size:1.5rem;position:absolute}.sparkle-1{animation-delay:1s;right:25%;top:15%}.sparkle-2{animation-delay:2.5s;bottom:30%;right:10%}.sparkle-3{animation-delay:.5s;left:5%;top:60%}.hero-section{max-width:1200px;position:relative;text-align:center;width:100%;z-index:2}.drone-hero{animation:hover 4s ease-in-out infinite;height:120px;margin:0 auto 3rem;position:relative;width:120px}.drone-body{filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));font-size:4rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:3}.propeller{animation:spin .1s linear infinite;background:linear-gradient(90deg,#4ade80,#22c55e);border-radius:2px;box-shadow:0 0 10px #4ade8080;height:4px;position:absolute;width:25px}.prop-1{left:15px}.prop-1,.prop-2{top:15px;transform-origin:center}.prop-2{right:15px}.prop-3{left:15px}.prop-3,.prop-4{bottom:15px;transform-origin:center}.prop-4{right:15px}.drone-shadow{animation:shadowPulse 4s ease-in-out infinite;background:#0003;border-radius:50%;bottom:-40px;filter:blur(8px);height:20px;left:50%;position:absolute;transform:translateX(-50%);width:60px}.game-title{display:flex;flex-wrap:wrap;font-family:Just Me Again Down Here,cursive;font-size:6.5rem;font-weight:400;gap:1rem;justify-content:center;margin-bottom:1rem;text-shadow:2px 2px 4px #0000004d}.title-word{-webkit-text-fill-color:#0000;animation:titleBounce 3s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706);background-clip:text;-webkit-background-clip:text;display:inline-block;text-shadow:0 4px 8px #fbbf244d}.title-word:nth-child(2){animation-delay:.3s}.title-word:nth-child(3){animation-delay:.6s}.game-subtitle{color:#ffffffe6;font-size:1.3rem;font-weight:300;margin-bottom:3rem;margin-left:auto;margin-right:auto;max-width:600px}.connection-flow{flex-wrap:wrap;gap:2rem;justify-content:center;margin-bottom:4rem}.connection-flow,.device{align-items:center;display:flex}.device{animation:devicePulse 3s ease-in-out infinite;color:#fff;flex-direction:column;font-size:3rem;gap:.5rem;position:relative}.device span{color:#fffc;font-size:.9rem;font-weight:600;letter-spacing:1px;text-transform:uppercase}.phone-device{animation-delay:0s}.pc-device{animation-delay:1.5s}.signal{animation:signalBlink 2s ease-in-out infinite;border-radius:50%;height:8px;position:absolute;top:-10px;width:8px}.signal-phone{background:#10b981;box-shadow:0 0 15px #10b981;right:-5px}.signal-pc{background:#3b82f6;box-shadow:0 0 15px #3b82f6;left:-5px}.wifi-connection{align-items:center;display:flex;justify-content:center;position:relative}.wifi-waves{height:60px;position:absolute;width:60px}.wave{animation:waveExpand 2s ease-out infinite;border:2px solid #4ade8099;border-radius:50%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.wave-1{animation-delay:0s}.wave-2{animation-delay:.7s}.wave-3{animation-delay:1.4s}.wifi-icon{align-items:center;filter:drop-shadow(0 4px 8px rgba(74,222,128,.3));position:relative;z-index:2}.role-selection,.wifi-icon{display:flex;justify-content:center}.role-selection{flex-wrap:wrap;gap:3rem;margin-bottom:3rem}.role-button{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border:2px solid #fff3;border-radius:30px;color:#fff;display:flex;flex-direction:column;min-width:250px;overflow:hidden;padding:2rem 2.5rem;position:relative;text-decoration:none;transform-style:preserve-3d;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.role-button:before{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:28px;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.role-button:hover:before{opacity:1}.role-button:hover{border-color:#fff6;box-shadow:0 25px 50px #00000040;transform:translateY(-15px) rotateX(5deg)}.button-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));font-size:3.5rem;margin-bottom:1rem}.button-content h3{font-size:1.4rem;font-weight:700;margin-bottom:.5rem}.button-content p{font-size:.9rem;font-weight:300;opacity:.8}.button-glow{border-radius:30px;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .4s ease}.controller-glow{background:radial-gradient(circle at center,#a78bfa33,#0000 70%)}.receiver-glow{background:radial-gradient(circle at center,#3b82f633,#0000 70%)}.controller-role:hover .controller-glow,.receiver-role:hover .receiver-glow{opacity:1}.network-notice{align-items:center;animation:noticePulse 4s ease-in-out infinite;background:#10b9811a;border:2px solid #10b9814d;border-radius:50px;display:flex;gap:1rem;justify-content:center;margin:0 auto;max-width:500px;padding:1rem 2rem}.notice-icon{animation:iconSpin 10s linear infinite;font-size:2rem}.notice-text{color:#ffffffe6;font-size:.9rem;font-weight:400;text-align:left}.notice-text strong{color:#10b981;font-weight:600}.how-to-play{margin-left:auto;margin-right:auto;margin-top:4rem;max-width:700px}.section-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fbbf24,#f59e0b);background-clip:text;-webkit-background-clip:text;color:#fff;font-size:2rem;font-weight:700;margin-bottom:2rem;text-shadow:0 4px 8px #fbbf244d}.play-steps{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.play-step{align-items:flex-start;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;display:flex;gap:1rem;overflow:hidden;padding:1.5rem;position:relative;transition:all .3s ease}.play-step:before{background:linear-gradient(135deg,#ffffff0d,#ffffff05);bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease}.play-step:hover:before{opacity:1}.play-step:hover{border-color:#ffffff40;box-shadow:0 15px 35px #0003;transform:translateY(-5px)}.step-number{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 4px 15px #667eea4d;color:#fff;display:flex;flex-shrink:0;font-size:1.1rem;font-weight:700;height:40px;justify-content:center;width:40px}.step-content{flex:1 1}.step-content strong{color:#fff;display:block;font-size:1.1rem;font-weight:600;margin-bottom:.3rem}.step-content p{color:#ffffffbf;font-size:.9rem;font-weight:300;line-height:1.4}.decorative-paths{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.flight-path{height:200px;position:absolute;width:300px}.flight-path:first-child{animation:pathFlow 8s ease-in-out infinite;right:5%;top:10%}.path-2{animation:pathFlow 8s ease-in-out infinite reverse;bottom:15%;left:5%}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes twinkle{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}@keyframes hover{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes shadowPulse{0%,to{opacity:.2;transform:translateX(-50%) scale(1)}50%{opacity:.3;transform:translateX(-50%) scale(1.1)}}@keyframes titleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes devicePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes signalBlink{0%,50%,to{opacity:1}25%,75%{opacity:.3}}@keyframes waveExpand{0%{height:20px;opacity:1;width:20px}to{height:80px;opacity:0;width:80px}}@keyframes noticePulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes iconSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pathFlow{0%,to{opacity:.3}50%{opacity:.6}}@media (max-width:768px){.game-title{font-size:3.5rem;gap:.5rem}.game-subtitle{font-size:1.1rem;margin-bottom:2rem}.connection-flow{gap:1rem;margin-bottom:2.5rem}.device{font-size:2rem}.role-selection{align-items:center;flex-direction:column;gap:2rem}.role-button{min-width:280px;padding:2rem}.network-notice{flex-direction:column;padding:1.5rem}.network-notice,.notice-text{text-align:center}}@media (max-width:480px){.landing-page{padding:15px}.game-title{flex-direction:column;font-size:3rem;gap:0}.drone-hero{height:100px;margin-bottom:2rem;width:100px}.drone-body{font-size:3rem}.role-button{min-width:250px;padding:1.5rem}}button:hover{background:#333!important;box-shadow:0 2px 4px #0000004d;transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{cursor:not-allowed;opacity:.5}button:disabled:hover{background:#1a1a1a!important;transform:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.propeller-top-left{animation:propellerSpin .1s linear infinite}.propeller-bottom-left,.propeller-top-right{animation:propellerSpin .08s linear infinite reverse}.propeller-bottom-right{animation:propellerSpin .1s linear infinite}@keyframes propellerSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--popup-primary:#3b82f6;--popup-secondary:#8b5cf6;--popup-accent:#06b6d4;--popup-success:#10b981;--popup-danger:#f97316;--popup-background:#1e293b;--primary-color:#2563eb;--primary-hover:#1d4ed8;--secondary-color:#64748b;--success-color:#10b981;--danger-color:#ef4444;--warning-color:#f59e0b;--background-primary:#0f1419;--background-secondary:#1a1f2e;--background-tertiary:#252b3a;--text-primary:#fff;--text-secondary:#94a3b8;--border-color:#334155;--border-hover:#475569;--shadow-primary:0 4px 20px #2563eb26;--shadow-secondary:0 2px 10px #0000004d;--shadow-playful:0 8px 32px #8b5cf626}body,html{-webkit-touch-callout:none;-webkit-text-size-adjust:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif;margin:0;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none}#root,body,html{height:100%;width:100%}.controller{background:linear-gradient(135deg,#0f1419,#1a1f2e);background:linear-gradient(135deg,var(--background-primary) 0,var(--background-secondary) 100%);color:#fff;color:var(--text-primary);display:flex;flex-direction:column;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw}.controller-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1a1f2ef2;border-bottom:1px solid #334155;border-bottom:1px solid var(--border-color);justify-content:space-between;min-height:60px;padding:16px 24px;z-index:100}.brand,.controller-header{align-items:center;display:flex}.brand{gap:12px}.brand-icon{filter:drop-shadow(0 0 8px #2563eb);filter:drop-shadow(0 0 8px var(--primary-color));font-size:24px}.brand-text{color:#fff;color:var(--text-primary);font-size:18px;font-weight:600;letter-spacing:.5px}.connection-indicator{align-items:center;display:flex}.status-connected,.status-disconnected{align-items:center;border-radius:20px;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .3s ease}.status-connected{background:#10b98126;border:1px solid #10b981;border:1px solid var(--success-color);color:#10b981;color:var(--success-color)}.status-connected:hover{background:#10b98140;transform:scale(1.02)}.status-disconnected{background:#ef444426;border:1px solid #ef4444;border:1px solid var(--danger-color);color:#ef4444;color:var(--danger-color)}.status-dot{animation:pulse 2s infinite;background:currentColor;border-radius:50%;height:8px;width:8px}.controller-main{align-items:center;display:flex;flex:1 1;justify-content:center;padding:20px;position:relative}@media (orientation:landscape){.controller-main{height:100vh;padding:0}}.simple-connection-status{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1f2ee6;border:1px solid #334155;border:1px solid var(--border-color);border-radius:20px;color:#10b981;color:var(--success-color);display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;position:absolute;right:-15px;top:60px;transform:rotate(90deg);z-index:10}@media (orientation:landscape){.simple-connection-status{border-radius:20px;flex-direction:column;gap:6px;left:auto;padding:12px 8px;right:20px;text-orientation:mixed;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;writing-mode:vertical-rl;z-index:20}}.simple-connection-status .status-dot{animation:pulse 2s infinite;border-radius:50%;height:8px;width:8px}.simple-connection-status .status-dot,.simple-connection-status .status-dot.connected{background:#10b981;background:var(--success-color);box-shadow:0 0 8px #10b981;box-shadow:0 0 8px var(--success-color)}.simple-connection-status .status-dot.disconnected{animation:pulse-red 2s infinite;background:#ef4444;background:var(--danger-color);box-shadow:0 0 8px #ef4444;box-shadow:0 0 8px var(--danger-color)}.simple-connection-status.disconnected{color:#ef4444;color:var(--danger-color)}.reconnect-button{-webkit-tap-highlight-color:transparent;background:#ef4444;background:var(--danger-color);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;margin-left:8px;outline:none;padding:4px 8px 0;position:absolute;right:25px;top:170PX;transform:rotate(90deg);transition:all .2s ease}.reconnect-button:hover{background:#dc2626;transform:scale(1.1)}.reconnect-button:active{transform:scale(.95)}@keyframes pulse-red{0%{box-shadow:0 0 0 0 #ef4444b3}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 0 0 #ef444400}}.joysticks-container{align-items:center;display:flex;gap:50px;justify-content:space-between;margin-top:-40px;max-width:900px;padding:0 40px 0 0;width:100%}@media (orientation:landscape){.joysticks-container{align-items:center;box-sizing:border-box;flex-direction:column;gap:0;height:100vh;justify-content:space-between;max-width:none;padding:50px 0;width:100%}.joystick-group:first-child{align-self:center;margin-top:0}.joystick-group:last-child{align-self:center;margin-bottom:0}}.joystick-group{align-items:center;display:flex;flex-direction:column;position:relative;transition:all .3s ease}@media (orientation:landscape){.joystick-group{gap:15px}}.joystick-label{background:#64748b1a;border:1px solid #334155;border:1px solid var(--border-color);border-radius:20px;color:#94a3b8;color:var(--text-secondary);font-size:14px;font-weight:500;letter-spacing:1px;padding:8px 16px;position:relative;text-transform:uppercase;transform:rotate(90deg)}.joystick-label.right{bottom:-110px;left:-120px}.joystick-label.left{left:-120px;top:-110px}.pad{background:radial-gradient(circle at 30% 30%,#252b3a 0,#1a1f2e 100%);background:radial-gradient(circle at 30% 30%,var(--background-tertiary) 0,var(--background-secondary) 100%);border:2px solid #334155;border:2px solid var(--border-color);border-radius:50%;box-shadow:inset 0 4px 12px #0006,0 2px 10px #0000004d;box-shadow:inset 0 4px 12px #0006,var(--shadow-secondary);height:min(50vmin,275px);overflow:hidden;position:relative;touch-action:none;transition:border-color .3s ease;width:min(50vmin,275px)}@media (orientation:landscape){.pad{height:min(45vh,315px);width:min(45vh,315px)}}.pad:hover{border-color:#475569;border-color:var(--border-hover)}.pad:before{background:radial-gradient(circle at 50% 50%,#2563eb0d 0,#0000 70%);border-radius:50%;bottom:0;left:0;right:0;top:0}.pad:after,.pad:before{content:"";pointer-events:none;position:absolute}.pad:after{border:1px dashed #94a3b84d;border-radius:50%;height:24px;left:50%;top:50%;transform:translate(-50%,-50%);width:24px}.stick{background:linear-gradient(145deg,#4a5568,#2d3748);border:2px solid #334155;border:2px solid var(--border-color);border-radius:50%;box-shadow:0 4px 16px #0006,inset 0 2px 4px #ffffff1a;cursor:grab;height:60px;left:calc(50% - 30px);position:absolute;top:calc(50% - 30px);transform:translateZ(0);transition:none;width:60px;will-change:transform}@media (orientation:landscape){.stick{height:65px;left:calc(50% - 32.5px);top:calc(50% - 32.5px);width:65px}}.stick:active{box-shadow:0 2px 8px #00000080,inset 0 3px 6px #ffffff26;cursor:grabbing;transform:scale(.95)}.stick:before{background:#2563eb;background:var(--primary-color);border-radius:50%;box-shadow:0 0 4px #2563eb;box-shadow:0 0 4px var(--primary-color);content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.connection-overlay{align-items:center;animation:fadeIn .4s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0c1222f2;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.connection-popup{background:linear-gradient(135deg,#1e293b,#252b3a);background:linear-gradient(135deg,var(--popup-background) 0,var(--background-tertiary) 100%);border:2px solid;border-image:linear-gradient(135deg,#3b82f6,#8b5cf6) 1;border-image:linear-gradient(135deg,var(--popup-primary),var(--popup-secondary)) 1;border-radius:20px;box-shadow:0 8px 32px #8b5cf626;box-shadow:var(--shadow-playful);max-width:400px;overflow:hidden;padding:40px;position:relative;text-align:center;width:90%}.connection-popup:before{background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4);background:linear-gradient(90deg,var(--popup-primary),var(--popup-secondary),var(--popup-accent));content:"";height:4px;left:0;position:absolute;right:0;top:0}.connecting-step,.orientation-step,.scanning-step{align-items:center;display:flex;flex-direction:column;gap:24px}.step-icon{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3b82f6,#8b5cf6);background:linear-gradient(135deg,var(--popup-primary),var(--popup-secondary));-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 12px rgba(59,130,246,.5));font-size:48px;margin-bottom:8px}.step-icon.loading{animation:spin 2s linear infinite}.connection-popup h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3b82f6,#8b5cf6);background:linear-gradient(135deg,var(--popup-primary),var(--popup-secondary));-webkit-background-clip:text;background-clip:text;color:#fff;color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.connection-popup p{color:#94a3b8;color:var(--text-secondary);font-size:16px;line-height:1.5;margin:0}.orientation-instruction{background:#2563eb1a;border:1px solid #2563eb33;border-radius:12px;flex-direction:column;padding:20px}.orientation-instruction,.phone-icon{align-items:center;display:flex;gap:16px}.phone-body,.phone-icon{position:relative}.phone-body{background:#252b3a;background:var(--background-tertiary);border:2px solid #334155;border:2px solid var(--border-color);border-radius:8px;height:70px;width:40px}.phone-screen{background:#2563eb;background:var(--primary-color);border-radius:4px;bottom:6px;left:4px;opacity:.8;position:absolute;right:4px;top:6px}.rotation-arrow{animation:bounce 1s ease-in-out infinite;color:#2563eb;color:var(--primary-color);font-size:24px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.primary-button{background:linear-gradient(135deg,#3b82f6,#8b5cf6);background:linear-gradient(135deg,var(--popup-primary),var(--popup-secondary));border:none;border-radius:12px;box-shadow:0 4px 20px #3b82f640;color:#fff;color:var(--text-primary);cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;padding:14px 32px;text-transform:uppercase;transition:all .3s ease}.primary-button:hover{box-shadow:0 6px 25px #3b82f659;transform:translateY(-2px)}.primary-button:active{transform:translateY(0)}.loading-dots{display:flex;gap:8px;justify-content:center}.loading-dots span{animation:loadingDot 1.4s ease-in-out infinite both;background:#06b6d4;background:var(--popup-accent);border-radius:50%;height:8px;width:8px}.loading-dots span:first-child{animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes loadingDot{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.qr-scanner-modal{animation:fadeIn .4s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0c1222f2;z-index:2000}.qr-scanner-content{background:linear-gradient(135deg,#1a1f2e,#252b3a);background:linear-gradient(135deg,var(--background-secondary) 0,var(--background-tertiary) 100%);border:2px solid;border-image:linear-gradient(135deg,#2563eb,#64748b) 1;border-image:linear-gradient(135deg,var(--primary-color),var(--secondary-color)) 1;border-radius:24px;box-shadow:0 8px 32px #8b5cf626,0 0 0 1px #8b5cf64d;box-shadow:var(--shadow-playful),0 0 0 1px #8b5cf64d;max-width:90%;overflow:hidden;padding:0;position:relative;text-align:center;width:350px}.qr-scanner-content:before{background:linear-gradient(90deg,#2563eb,#64748b,var(--accent-color));background:linear-gradient(90deg,var(--primary-color),var(--secondary-color),var(--accent-color));content:"";height:4px;left:0;position:absolute;right:0;top:0}.qr-scanner-header{background:#1e293b80;border-bottom:1px solid #8b5cf633;padding:24px 24px 16px}.qr-scanner-header h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#2563eb,#64748b);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;background-clip:text;color:#fff;color:var(--text-primary);font-size:20px}.qr-scanner-header p{color:#94a3b8;color:var(--text-secondary);font-size:14px;margin:8px 0 0;opacity:.8}.qr-scanner-body{padding:32px 24px 24px;position:relative}.qr-camera-container{background:#0f1419;background:var(--background-primary);border:2px solid #3b82f64d;border-radius:16px;box-shadow:inset 0 4px 12px #0000004d,0 4px 20px #3b82f633;height:280px;overflow:hidden;position:relative;width:100%}.qr-camera-container:before{background:linear-gradient(45deg,#0000 45%,#3b82f61a 50%,#0000 55%),linear-gradient(-45deg,#0000 45%,#8b5cf61a 50%,#0000 55%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.qr-scanner-overlay{border:3px solid #2563eb;border:3px solid var(--primary-color);border-radius:16px;height:200px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:200px;z-index:2}.qr-scanner-overlay:after,.qr-scanner-overlay:before{border:3px solid var(--accent-color);content:"";height:20px;position:absolute;width:20px}.qr-scanner-overlay:before{border-bottom:none;border-right:none;border-top-left-radius:16px;left:-3px;top:-3px}.qr-scanner-overlay:after{border-bottom-right-radius:16px;border-left:none;border-top:none;bottom:-3px;right:-3px}.qr-scanner-corners{border:3px solid var(--accent-color);border-bottom:none;border-left:none;border-top-right-radius:16px;height:20px;position:absolute;right:-3px;top:-3px;width:20px}.qr-scanner-corners:after{border:3px solid var(--accent-color);border-bottom-left-radius:16px;border-right:none;border-top:none;bottom:calc(100% - 14px);content:"";height:20px;left:calc(100% - 14px);position:absolute;width:20px}.scanning-animation{animation:scanLine 2s ease-in-out infinite;background:linear-gradient(90deg,#0000 0,var(--accent-color) 50%,#0000 100%);height:2px;left:20px;position:absolute;right:20px;top:20px;z-index:3}@keyframes scanLine{0%{opacity:1;transform:translateY(0)}50%{opacity:.8}to{opacity:1;transform:translateY(240px)}}.qr-close-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e293be6;border:2px solid #8b5cf64d;border-radius:50%;color:#94a3b8;color:var(--text-secondary);cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .3s ease;width:40px}.qr-close-button:hover{background:#8b5cf633;border-color:#64748b;border-color:var(--secondary-color);color:#fff;color:var(--text-primary);transform:scale(1.1)}@media (max-width:768px){.joysticks-container{flex-direction:column}.connection-popup{padding:30px 20px}.controller-header{padding:12px 16px}}@media (orientation:landscape){.controller-main{display:none}.controller:after{background:#000000e6;border-radius:10px;color:#fff;content:"Please rotate your device to portrait mode for the best experience";font-size:16px;font-weight:500;left:50%;line-height:1.4;max-width:80%;padding:20px;position:fixed;text-align:center;top:50%;transform:translate(-50%,-50%);z-index:9999}}@media (min-width:600px) and (max-width:1024px){.joystick-label.left{left:-170px;top:-150px}.joystick-label.right{bottom:-150px;left:-170px}}@media (min-width:390px) and (max-width:500px){.joystick-label.left,.joystick-label.right{left:-141px}}.power-button,.power-button-container{align-items:center;display:flex;justify-content:center;position:relative}.power-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:linear-gradient(145deg,#252b3a,#1a1f2e);background:linear-gradient(145deg,var(--background-tertiary),var(--background-secondary));border:none;border-radius:50%;box-shadow:inset 0 4px 8px #0000004d,0 4px 16px #0003,0 0 0 2px #334155;box-shadow:inset 0 4px 8px #0000004d,0 4px 16px #0003,0 0 0 2px var(--border-color);cursor:pointer;height:55px;outline:none;right:20px;touch-action:manipulation;transition:all .3s ease;-webkit-user-select:none;user-select:none;width:55px}.power-button:hover{box-shadow:inset 0 4px 8px #0006,0 6px 20px #0000004d,0 0 0 2px #475569;box-shadow:inset 0 4px 8px #0006,0 6px 20px #0000004d,0 0 0 2px var(--border-hover);transform:scale(1.05)}.power-button:active{box-shadow:inset 0 6px 12px #00000080,0 2px 8px #0000004d;transform:scale(.95)}.power-button:focus{box-shadow:inset 0 4px 8px #0000004d,0 4px 16px #0003,0 0 0 2px #475569,0 0 0 4px #2563eb4d;box-shadow:inset 0 4px 8px #0000004d,0 4px 16px #0003,0 0 0 2px var(--border-hover),0 0 0 4px #2563eb4d;outline:none}.power-button.power-on{background:linear-gradient(145deg,#2d3748,#1a202c);box-shadow:inset 0 4px 8px #0006,0 4px 16px #6858e74d,0 0 0 2px #2563eb;box-shadow:inset 0 4px 8px #0006,0 4px 16px #6858e74d,0 0 0 2px var(--primary-color)}.power-ring{border:3px solid #0000;border-radius:50%;bottom:-6px;left:-6px;position:absolute;right:-6px;top:-6px;transition:all .4s ease}.power-ring.ring-active{border-color:#2563eb;border-color:var(--primary-color);box-shadow:0 0 12px #2563eb,inset 0 0 12px #6858e733;box-shadow:0 0 12px var(--primary-color),inset 0 0 12px #6858e733}.power-icon{color:#94a3b8;color:var(--text-secondary);display:flex;font-size:32px;transform:rotate(90deg);transition:all .3s ease;z-index:1}.power-button.power-on .power-icon{color:#2563eb;color:var(--primary-color);text-shadow:0 0 8px #2563eb;text-shadow:0 0 8px var(--primary-color)}.browser-warning{background:#ffc10726;border-radius:12px;box-shadow:0 4px 12px #ffc10733;flex-direction:column;gap:12px;margin-bottom:20px;padding:16px;text-align:center}@media (max-width:480px){.browser-warning{gap:10px;margin:0 8px 20px;padding:16px 12px}}.warning-icon{font-size:32px;margin-bottom:4px}.warning-content{flex:1 1;min-width:0}.warning-content h4{font-size:15px;line-height:1.2;margin:0 0 8px}.warning-content p{word-wrap:break-word;font-size:13px;line-height:1.3;margin:6px 0}@media (max-width:480px){.warning-icon{font-size:28px}.warning-content h4{font-size:14px;margin-bottom:6px}.warning-content p{font-size:12px;line-height:1.4;margin:4px 0}}.qr-scanner-modal{align-items:center;background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10000}.qr-scanner-content{background:#1a1a1a;border:2px solid #0f8;border-radius:15px;box-shadow:0 10px 30px #00ff884d;max-height:90vh;max-width:500px;overflow-y:auto;padding:20px;width:100%}.qr-scanner-header{align-items:center;border-bottom:1px solid #333;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:15px}.qr-scanner-header h3{color:#0f8;font-size:1.2em;font-weight:700;margin:0}.close-btn{background:none;border:none;border-radius:5px;color:#f44;font-size:1.5em;padding:5px 10px;transition:all .3s ease}.close-btn:hover,.error-message{background:#f44;color:#fff}.error-message{border-radius:8px;font-weight:700;margin-bottom:15px;padding:15px;text-align:center}.permission-help{border-top:1px solid #ffffff4d;font-weight:400;margin-top:15px;padding-top:15px;text-align:left}.permission-help p{font-size:13px;line-height:1.4;margin:8px 0}.retry-permission-btn{background:#fff;border:none;border-radius:5px;color:#f44;cursor:pointer;display:block;font-size:14px;font-weight:700;margin-left:auto;margin-right:auto;margin-top:10px;padding:8px 16px;transition:all .3s ease}.retry-permission-btn:hover{background:#f0f0f0;transform:translateY(-1px)}.scanner-section{margin-bottom:20px;position:relative}.qr-video{background:#000;border:2px solid #333;border-radius:10px;height:300px;object-fit:cover;width:100%}.scanning-overlay{align-items:center;border-radius:10px;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0}.scan-frame{animation:pulse 2s ease-in-out infinite;border:3px solid #0f8;border-radius:15px;height:200px;position:relative;width:200px}.scan-frame:after,.scan-frame:before{border:4px solid #0f8;content:"";height:30px;position:absolute;width:30px}.scan-frame:before{border-bottom:none;border-right:none;left:-4px;top:-4px}.scan-frame:after{border-left:none;border-top:none;bottom:-4px;right:-4px}.scanning-overlay p{background:#000000b3;border-radius:20px;color:#0f8;font-weight:700;margin-top:20px;padding:8px 16px}.camera-loading{align-items:center;background:#000c;border-radius:10px;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0}.camera-loading p{color:#0f8;font-weight:700;margin-bottom:15px}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #333;border-left-color:#0f8;border-radius:50%;height:40px;width:40px}.camera-selector{background:#2a2a2a;border:1px solid #333;border-radius:10px;margin-bottom:20px;padding:15px}.camera-selector label{color:#0f8;font-weight:700;margin-right:10px}.camera-selector select{background:#1a1a1a;border:2px solid #333;border-radius:5px;color:#0f8;cursor:pointer;font-size:14px;outline:none;padding:8px}.camera-selector select:focus{border-color:#0f8}.manual-input-section{background:#2a2a2a;border:1px solid #333;border-radius:10px;margin-bottom:20px;padding:15px}.manual-input-section h4{color:#0f8;font-size:1em;margin:0 0 10px}.manual-input-section textarea{background:#1a1a1a;border:2px solid #333;border-radius:8px;box-sizing:border-box;color:#fff;font-family:monospace;font-size:12px;margin-bottom:10px;outline:none;padding:10px;resize:vertical;width:100%}.manual-input-section textarea:focus{border-color:#0f8}.manual-input-section textarea::placeholder{color:#666}.manual-submit-btn{background:#0f8;border:none;border-radius:5px;color:#000;cursor:pointer;font-size:14px;font-weight:700;padding:8px 16px;transition:all .3s ease}.manual-submit-btn:hover:not(:disabled){background:#00cc6a;transform:translateY(-2px)}.manual-submit-btn:disabled{background:#666;color:#999;cursor:not-allowed}.debug-info{border-top:1px solid #333;margin-top:15px;padding-top:10px}.debug-info summary{color:#0f8;cursor:pointer;font-size:12px;margin-bottom:10px}.debug-info summary:hover{color:#00cc6a}.debug-content{background:#111;border:1px solid #333;border-radius:5px;margin-top:5px;padding:10px}.debug-content p{color:#ccc;font-family:monospace;font-size:11px;margin:5px 0}.debug-content strong{color:#0f8}.scanner-buttons{display:flex;gap:10px;justify-content:center}.scanner-buttons button{background:#333;border:2px solid #0f8;border-radius:8px;color:#0f8;cursor:pointer;font-weight:700;padding:10px 20px;transition:all .3s ease}.scanner-buttons button:hover{background:#0f8;color:#000;transform:translateY(-2px)}@media (max-width:600px){.qr-scanner-modal{padding:10px}.qr-scanner-content{max-height:95vh;padding:15px}.qr-video{height:250px}.scan-frame{height:150px;width:150px}.scanner-buttons{flex-direction:column}.scanner-buttons button{width:100%}}.receiver-container{background:#0a0a0a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;height:100vh;position:relative;width:100%}.top-navbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#00000030;border-bottom:1px solid #ffffff1a;box-shadow:0 2px 20px #00000080;height:60px;left:0;padding:0 20px;position:fixed;top:0;width:100%;z-index:1000}.navbar-section,.top-navbar{align-items:center;display:flex}.navbar-section{font-size:13px;font-weight:500;margin-right:30px}.navbar-section:last-child{margin-left:auto;margin-right:0}.connection-section .connection-indicator{border:1px solid;border-radius:6px;color:#fff;font-size:12px;font-weight:600;padding:4px 10px}.connection-indicator.connected{background:#22c55e1a;border-color:#22c55e4d;color:#22c55e}.connection-indicator.connecting{background:#f59e0b1a;border-color:#f59e0b4d;color:#f59e0b}.connection-indicator.disconnected,.connection-indicator.failed{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.position-section{margin-left:50px}.position-section .position-info{color:#fff;font-family:Courier New,monospace;font-size:14px;font-weight:600}.speed-section{align-items:center;display:flex;gap:6px;margin-left:20px}.speed-section .speed-info{color:#fff;font-family:Courier New,monospace;font-size:13px;font-weight:600;text-shadow:0 0 6px #00bcd44d}.controls-section{margin-left:20px}.power-section{align-items:center;display:flex;gap:8px}.power-section .power-indicator{border:1px solid;border-radius:6px;font-size:12px;font-weight:600;padding:4px 10px}.power-indicator.power-on{animation:powerPulse 2s infinite;background:#22c55e1a;border-color:#22c55e4d;color:#22c55e}.power-indicator.power-off{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.navbar-power-button{align-items:center;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:none;border-radius:50%;box-shadow:inset 0 2px 4px #0000004d,0 2px 8px #0003,0 0 0 1px #ffffff1a;cursor:default;display:flex;height:35px;justify-content:center;pointer-events:none;position:relative;transform:rotate(-90deg);transition:all .3s ease;width:35px}.navbar-power-button.power-on{background:linear-gradient(145deg,#2d3748,#1a202c);box-shadow:inset 0 2px 4px #0006,0 2px 8px #22c55e4d,0 0 0 1px #22c55e}.navbar-power-button .power-ring{border:2px solid #0000;border-radius:50%;bottom:-3px;left:-3px;position:absolute;right:-3px;top:-3px;transition:all .4s ease}.navbar-power-button .power-ring.ring-active{border-color:#22c55e;box-shadow:0 0 8px #22c55e,inset 0 0 8px #22c55e33}.navbar-power-button .power-icon{color:#888;display:flex;transform:rotate(90deg);transition:all .3s ease;z-index:1}.navbar-power-button.power-on .power-icon{color:#22c55e;text-shadow:0 0 6px #22c55e}.power-section .power-label{color:#888;font-size:12px;font-weight:600}.power-section .power-label.power-on{color:#22c55e}.power-section .power-label.power-off{color:#ef4444}.controls-section .controls-info{color:#fff;font-family:Courier New,monospace;font-size:14px;font-weight:600;letter-spacing:.5px}.camera-section .camera-mode-btn{align-items:center;background:#007acc1a;border:1px solid #007acc;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:5px;padding:8px 14px;transition:all .3s ease}.camera-section .camera-mode-btn:hover{background:#007acc33;transform:translateY(-1px)}.camera-section .camera-mode-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.camera-section .camera-mode-btn.chase,.camera-section .camera-mode-btn.free{background:#22c55e1a;border-color:#79c2eb}.latency-display{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#000000d9;border:1px solid #ffffff1a;border-radius:8px;bottom:20px;box-shadow:0 4px 20px #00000080;left:20px;padding:7px;position:fixed;z-index:1000}.latency-display .latency-info{align-items:center;color:#22c55e;display:flex;font-family:Courier New,monospace;font-size:12px;font-weight:600;gap:5px}.camera-toggle{position:absolute;right:20px;top:20px;z-index:1000}.camera-mode-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#007acc1a;border:2px solid #007acc;border-radius:8px;box-shadow:0 4px 12px #0000004d;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 18px;transition:all .3s ease}.camera-mode-btn:hover{background:#007acc33;box-shadow:0 6px 16px #0006;transform:translateY(-2px)}.camera-mode-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.camera-mode-btn.chase{background:#22c55e1a}.camera-mode-btn.free{background:#f59e0b1a}.receiver-canvas{background:#000;height:100%;width:100%}.receiver-controls{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f0f0ff2;border:1px solid #333;border-radius:12px;box-shadow:0 8px 32px #00000080;left:20px;max-width:350px;padding:20px;position:absolute;top:20px}.panel-header,.webrtc-panel{margin-bottom:15px}.panel-header{align-items:center;border-bottom:1px solid #333;display:flex;justify-content:space-between;padding-bottom:10px}.panel-header h3{color:#fff;font-size:16px;font-weight:600;margin:0}.connection-status{border-radius:6px;font-size:12px;font-weight:600;padding:4px 8px;text-transform:uppercase}.connection-status.connecting{background:#f59e0b1a;border:1px solid #f59e0b4d;color:#f59e0b}.connection-status.connected{background:#22c55e1a;border:1px solid #22c55e4d;color:#22c55e}.connection-status.disconnected,.connection-status.failed{background:#ef44441a;border:1px solid #ef44444d;color:#ef4444}.room-info{align-items:center;display:flex;gap:10px;margin-bottom:15px}.room-info label{color:#888;font-size:12px;font-weight:500}.room-input{background:#1a1a1a;border:1px solid #444;border-radius:6px;color:#fff;font-family:Courier New,monospace;font-size:12px;padding:8px 12px;width:120px}.room-input:focus{border-color:#007acc;box-shadow:0 0 0 2px #007acc33;outline:none}.webrtc-controls{display:flex;gap:10px;margin-bottom:15px}.primary-btn{background:linear-gradient(135deg,#007acc,#005a99);border:1px solid #007acc;color:#fff}.secondary-btn{background:linear-gradient(135deg,#22c55e,#16a34a);border:1px solid #22c55e;color:#fff}.primary-btn,.secondary-btn{border-radius:6px;box-shadow:0 2px 8px #0003;cursor:pointer;font-size:12px;font-weight:600;padding:10px 16px;transition:all .2s ease}.primary-btn:hover,.secondary-btn:hover{box-shadow:0 4px 12px #0000004d;transform:translateY(-1px)}.primary-btn:disabled,.secondary-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.connection-stats{display:flex;flex-direction:column;font-size:11px;gap:8px}.stat-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:4px;display:flex;justify-content:space-between;padding:6px 10px}.stat-label{color:#888;font-weight:500}.stat-value{color:#22c55e;font-family:Courier New,monospace;font-weight:600}.stat-value.power-on{animation:powerPulse 2s infinite;color:#22c55e;text-shadow:0 0 8px #22c55e80}.stat-value.power-off{color:#ef4444;text-shadow:0 0 8px #ef44444d}@keyframes powerPulse{0%,to{opacity:1}50%{opacity:.7}}.qr-code-display{animation:slideIn .3s ease;background:#000000f2;border:2px solid #007acc;border-radius:12px;margin:15px 0;padding:20px;text-align:center}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.qr-code-display h3{color:#fff;font-size:14px;font-weight:600;margin:0 0 15px}.qr-code-container{margin:15px 0}.qr-code-display img{background:#fff;border:3px solid #fff;border-radius:8px;max-width:200px}.qr-code-display p{color:#ccc;font-size:12px;margin:15px 0}.close-btn{background:#ef444433;border:1px solid #ef4444;border-radius:6px;color:#ef4444;cursor:pointer;font-size:12px;font-weight:600;padding:8px 16px;transition:all .2s ease}.close-btn:hover{background:#ef44444d}.details-toggle{margin:15px 0}.details-toggle-btn{align-items:center;background:#ffffff0d;border:1px solid #444;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:500;gap:8px;padding:10px 12px;transition:all .3s ease;width:100%}.details-toggle-btn:hover{background:#ffffff1a;border-color:#666}.details-toggle-btn .arrow{color:#007acc;font-size:10px;transition:transform .3s ease}.details-toggle-btn .arrow.up{transform:rotate(180deg)}.drone-position-panel{background:#22c55e0d;border:1px solid #22c55e33;border-radius:8px;font-size:11px;margin-bottom:15px;padding:15px}.drone-position-panel strong{color:#22c55e;display:block;font-size:12px;margin-bottom:12px}.attitude-grid,.position-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr 1fr 1fr;margin-bottom:10px}.attitude-item,.position-item{align-items:center;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;display:flex;justify-content:space-between;padding:6px 8px}.position-label{color:#007acc;font-weight:600}.position-value{color:#22c55e;font-family:Courier New,monospace;font-weight:600}.attitude-label{color:#f59e0b;font-weight:600}.attitude-value{color:#fbbf24;font-family:Courier New,monospace;font-weight:600}.scene-info{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;font-size:11px;margin-bottom:15px;padding:10px}.scene-info strong{color:#007acc;font-weight:600}.controls-buttons{display:flex;flex-direction:column;gap:8px}.control-button{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:6px;box-shadow:0 2px 4px #0003;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:10px 12px;transition:all .2s ease}.control-button:hover{background:linear-gradient(135deg,#3a3a3a,#2a2a2a);box-shadow:0 4px 8px #0000004d;transform:translateY(-1px)}.control-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.performance-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f0f0fe6;border:1px solid #333;border-radius:8px;bottom:20px;box-shadow:0 4px 12px #0000004d;padding:12px 16px;position:absolute;right:20px}.fps-info{color:#22c55e;font-family:Courier New,monospace;font-size:11px;font-weight:600}.popup-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000d9;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10000}.popup{animation:popupSlideIn .3s ease-out;background:linear-gradient(145deg,#1a1a2e,#16213e);border:2px solid #007acc;border-radius:16px;box-shadow:0 20px 60px #007acc4d;max-width:500px;min-width:400px;padding:0}@keyframes popupSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.popup-header{background:linear-gradient(90deg,#007acc,#06c);border-radius:14px 14px 0 0;color:#fff;padding:20px;text-align:center}.popup-header h2{font-size:20px;font-weight:600;margin:0}.popup-content{padding:30px}.browser-warning{align-items:center;animation:warningPulse 3s ease-in-out infinite;background:#ffc1071a;border:2px solid #ffc107;border-radius:10px;display:flex;gap:15px;margin-bottom:25px;padding:20px}.warning-icon{flex-shrink:0;font-size:28px;margin-top:2px}.warning-content h4{color:#ffc107;font-size:16px;font-weight:600;margin:0 0 10px}.warning-content p{color:#fff;font-size:14px;line-height:1.4;margin:8px 0}.warning-content strong{color:#ffc107;font-weight:600}@keyframes warningPulse{0%,to{background:#ffc1071a;border-color:#ffc107}50%{background:#ffc10726;border-color:#ffed4e}}.connecting-step,.setup-step,.waiting-step{color:#fff;text-align:center}.connecting-step p,.setup-step p,.waiting-step p{font-size:16px;line-height:1.5;margin-bottom:20px}.instruction-text{background:#ffc1071a;border-left:3px solid #ffc107;border-radius:4px;color:#ffc107!important;font-size:14px!important;font-weight:500;margin-bottom:25px!important;padding:10px 15px}.generate-btn{background:linear-gradient(45deg,#007acc,#06c);border:none;border-radius:8px;box-shadow:0 4px 15px #007acc4d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:15px 30px;transition:all .3s ease}.generate-btn:hover{background:linear-gradient(45deg,#06c,#0052a3);box-shadow:0 6px 20px #007acc66;transform:translateY(-2px)}.qr-container{background:#fff;border-radius:12px;box-shadow:0 4px 15px #0003;display:inline-block;margin:20px 0;padding:20px}.qr-container img{display:block;max-height:200px;max-width:200px}.connection-actions{margin-top:20px}.start-connection-btn{background:linear-gradient(45deg,#28a745,#20c997);border:none;border-radius:8px;box-shadow:0 4px 15px #28a7454d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:15px 30px;transition:all .3s ease}.start-connection-btn:hover{background:linear-gradient(45deg,#218838,#1ea085);box-shadow:0 6px 20px #28a74566;transform:translateY(-2px)}.connecting-step .spinner{animation:spin 1s linear infinite;border:4px solid #333;border-radius:50%;border-top-color:#007acc;height:40px;margin:0 auto 20px;width:40px}.disconnected-step{color:#fff;text-align:center}.disconnected-icon{animation:pulse 2s infinite;font-size:48px;margin-bottom:20px}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.disconnected-step h3{color:#dc3545;font-size:22px;font-weight:600;margin:0 0 15px}.disconnected-step p{font-size:16px;line-height:1.5;margin-bottom:20px}.disconnection-reason{background:#dc35451a;border:1px solid #dc3545;border-radius:8px;margin:20px 0;padding:15px}.disconnection-reason p{color:#dc3545;font-size:14px;margin:0}.reconnection-actions{display:flex;gap:15px;justify-content:center;margin-top:25px}.reconnect-btn{background:linear-gradient(2deg,#002a46,#007fff);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 20px;transition:all .3s ease}.reconnect-btn:hover{background:linear-gradient(45deg,#5a6268,#495057);transform:translateY(-1px)}.retry-btn{background:linear-gradient(2deg,#002a46,#007fff);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 20px;transition:all .3s ease}.retry-btn:hover{background:linear-gradient(45deg,#06c,#0052a3);transform:translateY(-1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.scene-loading-overlay{align-items:center;background:linear-gradient(135deg,#0a0a0a,#1a1a2e);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:5000}.scene-loading-content{color:#fff;max-width:400px;padding:40px;text-align:center}.scene-loading-spinner{animation:spin 1s linear infinite;border:4px solid #333;border-radius:50%;border-top-color:#007acc;height:60px;margin:0 auto 30px;width:60px}.scene-loading-content h3{color:#007acc;font-size:24px;font-weight:600;margin:0 0 15px}.scene-loading-content p{color:#ccc;font-size:16px;line-height:1.5;margin:0 0 30px}.loading-progress{align-items:center;display:flex;flex-direction:column;gap:15px}.progress-item{align-items:center;display:flex;font-size:16px}.progress-item .completed{color:#28a745;font-weight:600}.progress-item .loading{color:#ffc107;font-weight:600}.loading-details{background:#ffc1071a;border:1px solid #ffc1074d;border-radius:8px;margin-top:15px;padding:10px;text-align:center}.loading-details p{color:#ffc107;font-size:12px;margin:5px 0}
/*# sourceMappingURL=main.21f1ba45.css.map*/