:root{--neon-pink: #ff00ff;--neon-cyan: #00ffff;--neon-green: #00ff00;--neon-yellow: #ffff00;--neon-orange: #ff8800;--neon-red: #ff0044;--neon-blue: #0088ff;--neon-purple: #aa00ff;--neon-magenta: #ff0088;--bg-dark: #0a0a0f;--bg-darker: #050508;--bg-card: #12121a;--bg-card-hover: #1a1a25;--text-primary: #ffffff;--text-secondary: #888899;--text-muted: #555566;--success: #00ff88;--error: #ff4466;--warning: #ffaa00;--font-pixel: "Press Start 2P", cursive;--font-mono: "Courier New", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--mobile-breakpoint: 1024px;--sidebar-width: 220px;--right-panel-width: 300px;--min-touch-target: 44px;--mobile-bottom-bar-height: 60px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:clamp(14px,1.5vw + 10px,18px);-webkit-text-size-adjust:100%}body{font-family:var(--font-mono);background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;min-height:100dvh;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:9999}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-pixel);text-transform:uppercase;letter-spacing:2px}h1{font-size:2rem;text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan)}h2{font-size:1.25rem;color:var(--neon-pink);text-shadow:0 0 5px var(--neon-pink),0 0 10px var(--neon-pink)}button{font-family:var(--font-pixel);font-size:.9rem;padding:14px 28px;background:transparent;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;text-transform:uppercase;transition:all .2s ease;position:relative;overflow:hidden;min-height:var(--min-touch-target);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}button:hover{background:var(--neon-cyan);color:var(--bg-dark);box-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan)}button:active{transform:scale(.95);opacity:.9}button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}button.primary{border-color:var(--neon-green);color:var(--neon-green)}button.primary:hover{background:var(--neon-green);color:var(--bg-dark);box-shadow:0 0 10px var(--neon-green),0 0 20px var(--neon-green)}button.danger{border-color:var(--neon-red);color:var(--neon-red)}button.danger:hover{background:var(--neon-red);color:var(--bg-dark);box-shadow:0 0 10px var(--neon-red),0 0 20px var(--neon-red)}input,textarea{font-family:var(--font-mono);font-size:1.1rem;padding:14px 18px;background:var(--bg-darker);border:2px solid var(--text-muted);color:var(--text-primary);outline:none;transition:border-color .2s ease}input:focus,textarea:focus{border-color:var(--neon-cyan);box-shadow:0 0 5px var(--neon-cyan),inset 0 0 5px #00ffff1a}input::placeholder,textarea::placeholder{color:var(--text-muted)}.card{background:var(--bg-card);border:1px solid var(--text-muted);padding:20px;position:relative}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan),var(--neon-green))}@keyframes phase-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 5px currentColor,0 0 10px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}.pulse{animation:pulse 1s ease-in-out infinite}.glow{animation:glow 2s ease-in-out infinite}.blink{animation:blink 1s step-end infinite}@keyframes pulse-glow{0%,to{box-shadow:0 4px 12px #00ff004d;transform:scale(1)}50%{box-shadow:0 4px 20px #0f09,0 0 30px #0f06;transform:scale(1.05)}}.status-connected{color:var(--success)}.status-disconnected{color:var(--error)}.status-waiting{color:var(--warning)}.container{max-width:1200px;margin:0 auto;padding:20px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-4{gap:16px}.gap-6{gap:24px}@media (max-width: 1023px){:root{--spacing-sm: 6px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px}h1{font-size:1.5rem}h2{font-size:1rem}button{padding:12px 20px;font-size:.8rem}input,textarea{padding:12px 14px;font-size:1rem}.card{padding:16px}.container{padding:12px}body:before{background:repeating-linear-gradient(0deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 1px,transparent 3px)}}@media (max-width: 479px){:root{--spacing-sm: 4px;--spacing-md: 8px;--spacing-lg: 12px}h1{font-size:1.25rem;letter-spacing:1px}h2{font-size:.9rem}button{padding:10px 16px;font-size:.75rem}.card{padding:12px}.container{padding:8px}.gap-4{gap:12px}.gap-6{gap:16px}}@media (max-width: 1023px) and (orientation: landscape){:root{--mobile-bottom-bar-height: 50px}}@media (hover: none){button:hover{background:transparent;color:var(--neon-cyan);box-shadow:none}button.primary:hover{background:transparent;color:var(--neon-green);box-shadow:none}button.danger:hover{background:transparent;color:var(--neon-red);box-shadow:none}}@supports (padding: env(safe-area-inset-bottom)){.mobile-bottom-bar{padding-bottom:calc(var(--spacing-sm) + env(safe-area-inset-bottom))}}.mobile-only{display:none}.desktop-only{display:block}@media (max-width: 1023px){.mobile-only{display:block}.desktop-only{display:none}.mobile-flex{display:flex}}.mobile-bottom-bar{position:fixed;bottom:0;left:0;right:0;height:var(--mobile-bottom-bar-height);background:var(--bg-darker);border-top:1px solid var(--text-muted);display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-sm);z-index:100}.mobile-bottom-bar button{flex:1;max-width:80px;padding:8px;font-size:.6rem;display:flex;flex-direction:column;align-items:center;gap:4px;border:none;background:transparent;color:var(--text-secondary)}.mobile-bottom-bar button.active{color:var(--neon-cyan)}.mobile-bottom-bar button span.icon{font-size:1.2rem}.mobile-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:200;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.mobile-drawer-overlay.open{opacity:1;visibility:visible}.mobile-drawer{position:fixed;bottom:0;left:0;right:0;max-height:80vh;background:var(--bg-card);border-top:2px solid var(--neon-cyan);border-radius:16px 16px 0 0;z-index:201;transform:translateY(100%);transition:transform .3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-drawer.open{transform:translateY(0)}.mobile-drawer-handle{width:40px;height:4px;background:var(--text-muted);border-radius:2px;margin:12px auto}.mobile-drawer-content{padding:var(--spacing-md);padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom,0px))}.virtual-keyboard{display:flex;flex-direction:column;gap:6px;padding:var(--spacing-sm);background:var(--bg-darker);border-top:1px solid var(--text-muted)}.virtual-keyboard-row{display:flex;justify-content:center;gap:4px}.virtual-key{min-width:32px;min-height:48px;padding:8px 4px;font-family:var(--font-pixel);font-size:.8rem;background:var(--bg-card);border:1px solid var(--text-muted);color:var(--text-primary);display:flex;align-items:center;justify-content:center;border-radius:4px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:all .1s ease}.virtual-key:active{transform:scale(.95);background:var(--bg-card-hover)}.virtual-key.active{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}.virtual-key.pressed{background:var(--neon-cyan);color:var(--bg-dark)}.game-area-responsive{height:clamp(250px,45vh,450px)}@media (max-width: 1023px) and (orientation: landscape){.game-area-responsive{height:clamp(180px,60vh,300px)}}.virtual-key.mode-switch{background:var(--bg-darker);border-color:var(--text-muted);color:var(--text-secondary);font-size:.65rem}.virtual-key.mode-switch.active-mode{background:var(--neon-yellow);border-color:var(--neon-yellow);color:var(--bg-dark);box-shadow:0 0 8px var(--neon-yellow)}.virtual-key.mode-switch:active{transform:scale(.95)}