.app-container{min-height:100vh;background:linear-gradient(135deg,var(--dark-bg) 0%,var(--dark-surface) 100%);position:relative;overflow:hidden}.background-effects{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.scanline{position:absolute;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--neon-purple),transparent);animation:scanline 8s linear infinite;opacity:.3}.particles{position:absolute;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,var(--neon-purple),transparent),radial-gradient(2px 2px at 40px 70px,var(--neon-pink),transparent),radial-gradient(1px 1px at 90px 40px,var(--neon-purple),transparent),radial-gradient(2px 2px at 160px 120px,var(--neon-pink),transparent),radial-gradient(1px 1px at 230px 80px,var(--neon-purple),transparent),radial-gradient(2px 2px at 300px 150px,var(--neon-pink),transparent);background-size:350px 200px;animation:float 20s ease-in-out infinite;opacity:.5}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:linear-gradient(180deg,rgba(139,92,246,.1) 0%,transparent 100%);border-bottom:1px solid rgba(139,92,246,.2);position:relative;z-index:1}.app-title{font-family:Orbitron,sans-serif;font-size:2rem;font-weight:900;background:linear-gradient(90deg,var(--neon-purple),var(--neon-pink),var(--neon-red));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(139,92,246,.5);letter-spacing:2px}.title-luna{font-size:2.5rem}.title-sub{font-size:1.5rem;font-weight:400;opacity:.9}.header-controls{display:flex;gap:15px;align-items:center}@media (max-width: 768px){.header-controls{flex-wrap:wrap;gap:8px;justify-content:center}.connection-status{font-size:.8rem;padding:6px 12px}.connect-button,.disconnect-button,.start-button{font-size:.8rem;padding:8px 16px}.settings-button{font-size:1rem;padding:8px 12px}}.settings-hidden{margin-bottom:200px}.connection-status{font-family:Orbitron,sans-serif;font-size:.9rem;padding:8px 16px;border-radius:20px;background:#1a1a2ecc;border:1px solid rgba(139,92,246,.3);transition:all .3s ease}.connection-status.connected{color:#10b981;border-color:#10b98180;box-shadow:0 0 15px #10b9814d}.connection-status.disconnected{color:var(--neon-red);border-color:#f8717180;box-shadow:0 0 15px #f871714d}.connect-button,.disconnect-button,.start-button,.settings-button{font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:600;padding:10px 20px;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.connect-button:before,.disconnect-button:before,.start-button:before,.settings-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s ease}.connect-button:hover:before,.disconnect-button:hover:before,.start-button:hover:before,.settings-button:hover:before{left:100%}.connect-button:active,.disconnect-button:active,.start-button:active,.settings-button:active{transform:scale(.95);transition:transform .1s ease}.connect-button{background:linear-gradient(90deg,#10b981,#34d399);color:#fff;box-shadow:0 0 15px #10b9814d}.connect-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 25px #10b98180}.connect-button:disabled{background:linear-gradient(90deg,#6b7280,#9ca3af);cursor:not-allowed;opacity:.7}.disconnect-button{background:linear-gradient(90deg,var(--neon-red),#FCA5A5);color:#fff;box-shadow:0 0 15px #f871714d}.disconnect-button:hover{transform:translateY(-2px);box-shadow:0 0 25px #f8717180}.start-button{background:linear-gradient(90deg,var(--neon-purple),var(--neon-pink));color:#fff;box-shadow:0 0 15px #8b5cf64d;font-size:1rem;padding:12px 24px}.start-button:hover{transform:translateY(-2px);box-shadow:0 0 25px #8b5cf680}.settings-button{background:linear-gradient(90deg,#6b7280,#9ca3af);color:#fff;box-shadow:0 0 15px #6b72804d;font-size:1.1rem;padding:10px 15px}.settings-button:hover{transform:translateY(-2px);box-shadow:0 0 25px #6b728080}.game-not-started{display:flex;align-items:center;justify-content:center;height:100%;background:#1a1a2ecc;border-radius:16px;border:1px solid rgba(139,92,246,.2);padding:40px;text-align:center}.game-not-started-content h2{font-family:Orbitron,sans-serif;font-size:1.8rem;color:var(--neon-purple);margin-bottom:20px;text-shadow:0 0 15px rgba(139,92,246,.5)}.game-not-started-content p{font-size:1.1rem;color:var(--text-secondary);margin-bottom:30px;line-height:1.5}.start-game-tips{background:#8b5cf60d;border-radius:12px;padding:20px;text-align:left;border:1px solid rgba(139,92,246,.1)}.start-game-tips h3{font-family:Orbitron,sans-serif;font-size:1.2rem;color:var(--neon-pink);margin-bottom:15px}.start-game-tips li{color:var(--text-secondary);margin-bottom:10px;padding-left:25px;position:relative;line-height:1.4}.start-game-tips li:before{content:"✨";position:absolute;left:0;color:var(--neon-purple)}.app-main{display:grid;grid-template-columns:350px 1fr 350px;gap:20px;padding:20px;min-height:calc(100vh - 100px);height:auto;position:relative;z-index:1}.left-panel,.right-panel{display:flex;flex-direction:column;gap:20px;height:100%}.center-panel{display:flex;flex-direction:column;height:100%;min-height:0}.glitch-effect{animation:glitch .3s ease-in-out}.glitch-effect:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#ef44441a;pointer-events:none;z-index:1000}@media (max-width: 1400px){.app-main{grid-template-columns:300px 1fr 300px}}@media (max-width: 1200px){.app-main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow-y:auto}.left-panel,.right-panel{height:auto}.center-panel{height:600px}.header-controls{flex-wrap:wrap;justify-content:center}}@media (max-width: 480px){.app-header{gap:15px;padding:15px;margin:0 -10px 15px}.app-title{font-size:1.5rem}.title-luna{font-size:1.8rem}.title-sub{font-size:1.1rem}.header-controls{gap:12px;padding:15px}.connect-button,.disconnect-button,.start-button,.settings-button{min-height:52px;font-size:1rem}.game-not-started{padding:20px;margin:15px}.game-not-started-content h2{font-size:1.5rem}.game-not-started-content p{font-size:1rem}.start-game-tips{padding:20px}.start-game-tips h3{font-size:1.1rem}.start-game-tips li{font-size:1rem;padding-left:25px}.app-main{padding:10px;gap:20px}.left-panel,.right-panel{padding:15px}.center-panel{min-height:400px;padding:15px}button{min-height:52px;min-width:52px}input,textarea{min-height:52px}}@media (min-width: 481px) and (max-width: 768px){.app-header{flex-direction:column;gap:20px;padding:20px;background:linear-gradient(180deg,rgba(139,92,246,.2) 0%,transparent 100%);border-bottom:1px solid rgba(139,92,246,.3);border-radius:0 0 24px 24px;box-shadow:0 4px 20px #0003;margin:0 -15px 20px}.app-title{font-size:1.8rem;text-shadow:0 0 40px rgba(139,92,246,.7);text-align:center}.title-luna{font-size:2.2rem}.title-sub{font-size:1.3rem;opacity:1}.header-controls{flex-direction:column;align-items:stretch;gap:15px;background:#1a1a2ecc;padding:20px;border-radius:16px;border:1px solid rgba(139,92,246,.3);box-shadow:0 4px 15px #0003}.connect-button,.disconnect-button,.start-button,.settings-button{width:100%;text-align:center;min-height:56px;font-size:1.1rem;border-radius:28px;box-shadow:0 6px 20px #0000004d;transition:all .3s ease;position:relative;overflow:hidden}.connect-button:hover:not(:disabled),.disconnect-button:hover,.start-button:hover,.settings-button:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0006}.connect-button:active,.disconnect-button:active,.start-button:active,.settings-button:active{transform:translateY(-1px);box-shadow:0 4px 15px #0000004d}.settings-button{padding:12px;background:linear-gradient(90deg,#7c3aed,#9333ea);box-shadow:0 6px 20px #7c3aed66}.settings-button:hover{box-shadow:0 8px 25px #7c3aed99}.game-not-started{padding:30px;background:#1a1a2ef2;border:1px solid rgba(139,92,246,.3);border-radius:20px;box-shadow:0 12px 40px #0006;margin:20px;position:relative;overflow:hidden}.game-not-started:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-purple),var(--primary-pink))}.game-not-started-content h2{font-size:1.8rem;text-shadow:0 0 20px rgba(139,92,246,.7);margin-bottom:20px}.game-not-started-content p{font-size:1.2rem;line-height:1.6;margin-bottom:15px}.start-game-tips{background:#8b5cf61a;border:1px solid rgba(139,92,246,.2);padding:25px;border-radius:16px;margin-top:20px;box-shadow:inset 0 2px 10px #0003}.start-game-tips h3{font-size:1.3rem;text-shadow:0 0 15px rgba(236,72,153,.5);margin-bottom:15px}.start-game-tips li{font-size:1.1rem;line-height:1.5;padding-left:30px;margin-bottom:10px}.start-game-tips li:before{font-size:1.2rem;left:2px}.app-main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:15px;height:auto;min-height:600px;overflow-y:auto;gap:25px}.left-panel,.right-panel{display:flex;height:auto;background:#1a1a2ee6;border-radius:20px;border:1px solid rgba(139,92,246,.3);padding:20px;box-shadow:0 8px 25px #0000004d;position:relative;overflow:hidden}.left-panel:before,.right-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-purple),transparent)}.left-panel{grid-row:1}.center-panel{grid-row:2;min-height:480px;background:#1a1a2ee6;border-radius:20px;border:1px solid rgba(139,92,246,.3);padding:20px;box-shadow:0 8px 25px #0000004d;position:relative;overflow:hidden}.center-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-pink),var(--primary-purple))}.right-panel{grid-row:3}button{min-height:48px;min-width:48px;-webkit-tap-highlight-color:transparent;cursor:pointer}input,textarea{min-height:48px;font-size:16px;border-radius:12px;border:1px solid rgba(139,92,246,.3);padding:0 15px;background:#1a1a2ee6;color:var(--text-primary);box-shadow:inset 0 2px 8px #0003}input:focus,textarea:focus{outline:none;border-color:var(--neon-purple);box-shadow:inset 0 2px 8px #0003,0 0 20px #8b5cf64d}.connection-status{font-size:1rem;padding:12px 24px;border-radius:28px;text-align:center;box-shadow:0 4px 15px #0003;border:1px solid rgba(139,92,246,.2)}.connection-status.connected{box-shadow:0 4px 20px #10b98166;background:#10b9811a}.connection-status.disconnected{box-shadow:0 4px 20px #f8717166;background:#f871711a}.left-panel,.center-panel,.right-panel{animation:fadeInUp .6s ease-out;animation-fill-mode:both}.left-panel{animation-delay:.1s}.center-panel{animation-delay:.2s}.right-panel{animation-delay:.3s}}@media (max-width: 768px){::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a2ecc;border-radius:4px}::-webkit-scrollbar-thumb{background:#8b5cf699;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#8b5cf6cc}::-moz-selection{background:#8b5cf64d;color:var(--text-primary)}::selection{background:#8b5cf64d;color:var(--text-primary)}*{touch-action:manipulation}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}.visual-depth{position:relative;z-index:1}.visual-depth:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ffffff0d,#0000001a);border-radius:inherit;z-index:-1}.card-hover{transition:all .3s ease}.card-hover:hover{transform:translateY(-5px);box-shadow:0 12px 30px #0006}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px var(--neon-purple),0 0 20px var(--neon-purple)}50%{box-shadow:0 0 20px var(--neon-purple),0 0 30px var(--neon-purple),0 0 40px var(--neon-purple)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes scanline{0%{top:0;opacity:0}50%{opacity:.3}to{top:100%;opacity:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--neon-purple),0 0 10px var(--neon-purple)}50%{box-shadow:0 0 20px var(--neon-purple),0 0 30px var(--neon-purple)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes colorChange{0%{color:var(--neon-purple)}33%{color:var(--neon-pink)}66%{color:var(--neon-red)}to{color:var(--neon-purple)}}.particles:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(1px 1px at 50px 100px,var(--neon-purple),transparent),radial-gradient(1px 1px at 100px 50px,var(--neon-pink),transparent),radial-gradient(2px 2px at 150px 150px,var(--neon-purple),transparent),radial-gradient(1px 1px at 200px 80px,var(--neon-pink),transparent),radial-gradient(2px 2px at 250px 200px,var(--neon-purple),transparent);background-size:300px 250px;animation:float 25s ease-in-out infinite reverse;opacity:.3}.connect-button:hover:not(:disabled),.disconnect-button:hover,.start-button:hover{animation:glow 1s ease-in-out infinite}.connection-status.connected{animation:pulse 2s ease-in-out infinite}.game-not-started-content{animation:fadeIn .5s ease-out}.start-game-tips li{animation:slideIn .3s ease-out;animation-fill-mode:both}.start-game-tips li:nth-child(1){animation-delay:.1s}.start-game-tips li:nth-child(2){animation-delay:.2s}.start-game-tips li:nth-child(3){animation-delay:.3s}.start-game-tips li:nth-child(4){animation-delay:.4s}.start-game-tips li:nth-child(5){animation-delay:.5s}.app-title{animation:colorChange 5s ease-in-out infinite}.left-panel>*,.right-panel>*{animation:fadeIn .3s ease-out;animation-fill-mode:both}.left-panel>*:nth-child(1){animation-delay:.1s}.left-panel>*:nth-child(2){animation-delay:.2s}.left-panel>*:nth-child(3){animation-delay:.3s}.right-panel>*:nth-child(1){animation-delay:.1s}.right-panel>*:nth-child(2){animation-delay:.2s}.right-panel>*:nth-child(3){animation-delay:.3s}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scanline,.particles{display:none}.connection-status.connected,.app-title{animation:none}}@media (max-width: 768px) and (prefers-reduced-motion: no-preference){.scanline{animation-duration:12s}.particles{animation-duration:30s}.connection-status.connected{animation-duration:3s}}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--dark-bg) 0%,var(--dark-surface) 100%);color:var(--text-primary);font-family:Orbitron,sans-serif}.spinner{width:60px;height:60px;border:4px solid rgba(139,92,246,.2);border-top:4px solid var(--neon-purple);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px;box-shadow:0 0 20px #8b5cf64d}.loading-spinner p{font-size:1.1rem;color:var(--neon-purple);text-shadow:0 0 10px rgba(139,92,246,.5);animation:pulse 2s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}img{max-width:100%;height:auto;transition:opacity .3s ease}img.lazy{opacity:0}img.lazy.loaded{opacity:1}*{box-sizing:border-box}.app-container,.app-header,.app-main{transform:translateZ(0);will-change:transform}.scanline,.particles,.message,.suggestion-button{backface-visibility:hidden;perspective:1000px}.game-not-started{display:flex;align-items:center;justify-content:center;height:100%;padding:40px;background:linear-gradient(135deg,#8b5cf60d,#ec48990d);border-radius:16px;margin:20px;border:1px solid rgba(139,92,246,.1)}.game-not-started-content{text-align:center;max-width:600px;background:#1a1a2ecc;padding:40px;border-radius:20px;border:1px solid rgba(139,92,246,.3);box-shadow:0 20px 40px #8b5cf633;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-not-started-content h2{font-family:Orbitron,sans-serif;font-size:2.5rem;color:var(--neon-purple);margin-bottom:15px;text-shadow:0 0 20px rgba(139,92,246,.8);background:linear-gradient(90deg,var(--neon-purple),var(--neon-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-not-started-content p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:30px;line-height:1.6}.start-game-tips{background:#0f0f1999;border-radius:12px;padding:25px;border:1px solid rgba(139,92,246,.2);margin-top:20px}.start-game-tips h3{font-family:Orbitron,sans-serif;font-size:1.3rem;color:var(--neon-pink);margin-bottom:15px;text-align:left}.start-game-tips ul{list-style:none;padding:0;margin:0}.start-game-tips li{color:var(--text-secondary);font-size:.95rem;line-height:1.8;margin-bottom:10px;padding-left:20px;position:relative;text-align:left}.start-game-tips li:before{content:"⚡";position:absolute;left:0;color:var(--neon-purple);font-size:.8rem}.start-game-tips li:last-child{margin-bottom:0}@media (max-width: 768px){.game-not-started{padding:20px;margin:10px}.game-not-started-content{padding:25px}.game-not-started-content h2{font-size:2rem}.game-not-started-content p{font-size:1rem}.start-game-tips{padding:20px}.start-game-tips h3{font-size:1.1rem}.start-game-tips li{font-size:.9rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-purple: #8B5CF6;--primary-pink: #EC4899;--primary-red: #EF4444;--dark-bg: #0A0A0F;--dark-surface: #1A1A2E;--dark-card: #16213E;--neon-purple: #A855F7;--neon-pink: #F472B6;--neon-red: #F87171;--text-primary: #E5E7EB;--text-secondary: #9CA3AF}body{font-family:Noto Sans SC,sans-serif;background:var(--dark-bg);color:var(--text-primary);overflow-x:hidden;min-height:100vh}#root{min-height:100vh}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}@keyframes heartbeat{0%,to{transform:scale(1)}10%{transform:scale(1.1)}20%{transform:scale(1)}30%{transform:scale(1.15)}40%{transform:scale(1)}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--neon-purple),0 0 40px var(--neon-purple)}50%{box-shadow:0 0 40px var(--neon-pink),0 0 80px var(--neon-pink)}}.scrollbar-thin::-webkit-scrollbar{width:6px}.scrollbar-thin::-webkit-scrollbar-track{background:var(--dark-surface)}.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--primary-purple);border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background:var(--neon-purple)}