: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;--font-heading-zh: "ZCOOL QingKe HuangYou", cursive;--font-body-zh: "ZCOOL XiaoWei", serif;--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;--glow-color: #00ffff;--border-radius: 0px;--border-width: 2px;--border-style: solid;--button-glow: 1;--card-border-top: 1;--card-shadow: none;--heading-transform: uppercase;--text-shadow-enabled: 1;--bg-pattern-opacity: .1}body,.card,button,h1,h2,h3,h4,h5,h6,input,textarea{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,font-family .2s ease}*{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);background-image:var(--bg-image, none);background-size:cover;background-position:center;background-attachment:fixed;color:var(--text-primary);min-height:100vh;min-height:100dvh;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}html[lang=zh] body{font-family:var(--font-body-zh),var(--font-mono)}html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3,html[lang=zh] h4,html[lang=zh] h5,html[lang=zh] h6,html[lang=zh] .heading,html[lang=zh] .title,html[lang=zh] button{font-family:var(--font-heading-zh),var(--font-pixel)}html[lang=zh] input,html[lang=zh] textarea,html[lang=zh] p,html[lang=zh] span,html[lang=zh] div{font-family:var(--font-body-zh),var(--font-mono)}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:var(--bg-pattern-opacity, .1)}body[data-bg-pattern=scanlines]:before{background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px)}body[data-bg-pattern=grid]:before{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px}body[data-bg-pattern=dots]:before{background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);background-size:15px 15px}body[data-bg-pattern=hearts]:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff69b4' fill-opacity='0.08' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");background-size:40px 40px}body[data-bg-pattern=waves]:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cpath fill='none' stroke='%2300ced1' stroke-opacity='0.1' stroke-width='2' d='M0 10 Q 25 0, 50 10 T 100 10'/%3E%3C/svg%3E");background-size:100px 20px}body[data-bg-pattern=stars]:before{background-image:radial-gradient(circle at 20% 30%,rgba(255,215,0,.15) 1px,transparent 1px),radial-gradient(circle at 80% 20%,rgba(255,215,0,.1) 2px,transparent 2px),radial-gradient(circle at 40% 70%,rgba(255,215,0,.12) 1px,transparent 1px),radial-gradient(circle at 60% 50%,rgba(255,215,0,.08) 2px,transparent 2px);background-size:100px 100px}body[data-bg-pattern=none]:before{display:none}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-pixel);text-transform:var(--heading-transform, uppercase);letter-spacing:2px}h1{font-size:2rem}h1[data-text-shadow=true]{text-shadow:0 0 10px var(--glow-color),0 0 20px var(--glow-color),0 0 40px var(--glow-color)}h2{font-size:1.25rem;color:var(--neon-pink)}h2[data-text-shadow=true]{text-shadow:0 0 5px var(--neon-pink),0 0 10px var(--neon-pink)}.text-glow{text-shadow:0 0 10px var(--glow-color),0 0 20px var(--glow-color)}button{font-family:var(--font-pixel);font-size:.9rem;padding:14px 28px;background:transparent;border:var(--border-width, 2px) var(--border-style, solid) var(--neon-cyan);border-radius:var(--border-radius, 0px);color:var(--neon-cyan);cursor:pointer;text-transform:var(--heading-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)}button[data-button-glow=true]:hover{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)}button.primary[data-button-glow=true]:hover{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)}button.danger[data-button-glow=true]:hover{box-shadow:0 0 10px var(--neon-red),0 0 20px var(--neon-red)}button[data-button-style=filled]{background:var(--neon-cyan);color:var(--bg-dark)}button[data-button-style=filled]:hover{filter:brightness(1.2)}button[data-button-style=filled].primary{background:var(--neon-green)}button[data-button-style=filled].danger{background:var(--neon-red)}button[data-button-style=gradient]{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink));border:none;color:#fff}button[data-button-style=gradient]:hover{filter:brightness(1.1);transform:translateY(-1px)}input,textarea{font-family:var(--font-mono);font-size:1.1rem;padding:14px 18px;background:var(--bg-darker);border:var(--border-width, 2px) var(--border-style, solid) var(--text-muted);border-radius:var(--border-radius, 0px);color:var(--text-primary);outline:none;transition:border-color .2s ease}input:focus,textarea:focus{border-color:var(--neon-cyan)}input[data-button-glow=true]:focus,textarea[data-button-glow=true]:focus{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);border-radius:var(--border-radius, 0px);padding:20px;position:relative;box-shadow:var(--card-shadow, none)}.card[data-card-border-top=true]: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));border-radius:var(--border-radius, 0px) var(--border-radius, 0px) 0 0}@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)}