@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap";html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:root{--font-family-main: "Rajdhani", sans-serif;--font-family-display: "Orbitron", sans-serif;--color-background: #0a0a0a;--color-background-secondary: #1a1a1a;--color-text: #e0e0e0;--color-primary: #00ffff;--color-secondary: #ff00ff;--color-accent: #39ff14;--color-glow: rgba(0, 255, 255, .2);--color-glitch-1: #ff00ff;--color-glitch-2: #39ff14;font-family:var(--font-family-main),sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--border-glow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary), 0 0 15px var(--color-primary)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--color-background);background-image:radial-gradient(var(--color-background-secondary) 1px,transparent 1px),radial-gradient(var(--color-background-secondary) 1px,var(--color-background) 1px);background-size:40px 40px,40px 40px;background-position:0 0,20px 20px;color:var(--color-text)}#root{width:100%;height:100vh;max-width:1280px;margin:0 auto;padding:2rem;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.app-container{width:100%;height:100%;max-width:800px;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--color-primary);box-shadow:var(--border-glow);padding:2rem;background:#0a0a0abf;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:10px;position:relative;overflow:auto}.app-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);background-size:100% 4px,6px 100%;z-index:1;pointer-events:none;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}to{background-position:0 100%}}.cyber-button{font-family:var(--font-family-display);color:var(--color-primary);background-color:transparent;border:1px solid var(--color-primary);padding:12px 24px;font-size:1.2rem;cursor:pointer;position:relative;overflow:hidden;transition:color .3s ease,box-shadow .3s ease;text-transform:uppercase;letter-spacing:2px}.cyber-button:hover{color:var(--color-background);background-color:var(--color-primary);box-shadow:var(--border-glow)}.cyber-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);transition:left .4s ease}.cyber-button:hover:before{left:100%}.welcome-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.logo{width:150px;height:150px;margin-bottom:2rem}.welcome-container h1{font-family:var(--font-family-display);font-size:4rem;color:var(--color-primary);margin-bottom:1rem;text-transform:uppercase}.welcome-text{font-size:1.2rem;color:var(--color-text);margin-bottom:2rem;max-width:400px}.matching-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.scanner{width:200px;height:100px;border:2px solid var(--color-primary);border-radius:5px;position:relative;overflow:hidden;margin-bottom:2rem}.scanner:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--color-accent),transparent);animation:scan 2s infinite linear}@keyframes scan{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.matching-text{font-family:var(--font-family-display);font-size:2rem;color:var(--color-primary);text-transform:uppercase}.matching-subtext{color:var(--color-text)}.message{padding:10px 15px;border-radius:20px;margin-bottom:10px;max-width:80%;position:relative;font-size:1rem;line-height:1.4}.message.user{background-color:var(--color-primary);color:var(--color-background);align-self:flex-end;border-bottom-right-radius:5px}.message.opponent{background-color:var(--color-background-secondary);color:var(--color-text);align-self:flex-start;border-bottom-left-radius:5px}.chat-container{width:100%;height:100%;display:flex;flex-direction:column}.timer{font-family:var(--font-family-display);font-size:2rem;color:var(--color-accent);align-self:flex-start;margin-bottom:1rem}.messages-area{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:10px;margin-bottom:1rem}.input-area{display:flex;gap:10px}.chat-input{flex-grow:1;background-color:var(--color-background-secondary);border:1px solid var(--color-primary);color:var(--color-text);padding:10px 15px;font-family:var(--font-family-main);font-size:1rem;border-radius:5px;transition:border-color .3s,box-shadow .3s}.chat-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 5px var(--color-accent)}.messages-area::-webkit-scrollbar{width:8px}.messages-area::-webkit-scrollbar-track{background:var(--color-background-secondary)}.messages-area::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:4px;border:2px solid var(--color-background-secondary)}.voice-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.visualizer{display:flex;align-items:flex-end;justify-content:center;height:150px;width:100%;gap:4px}.visualizer .bar{background-color:var(--color-secondary);width:10px;height:10%;transition:height .3s ease}.visualizer.active .bar{animation:visualize 1.2s infinite ease-in-out alternate}@keyframes visualize{0%{height:10%}to{height:100%}}.visualizer.active .bar:nth-child(2n){animation-delay:.2s}.visualizer.active .bar:nth-child(3n){animation-delay:.5s}.visualizer.active .bar:nth-child(4n){animation-delay:.3s}.visualizer.active .bar:nth-child(5n){animation-delay:.7s}.voice-controls{display:flex;gap:20px}.guessing-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.guessing-container h2{font-family:var(--font-family-display);font-size:3rem;color:var(--color-primary);margin-bottom:1rem}.guessing-prompt{font-size:1.2rem;color:var(--color-text);margin-bottom:2rem;max-width:500px}.guess-buttons{display:flex;gap:2rem}.guess-buttons .cyber-button{padding:20px 40px;font-size:1.5rem}.results-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.results-container h2{font-family:var(--font-family-display);font-size:2.5rem;margin-bottom:1.5rem;text-transform:uppercase;padding:20px;border-width:2px;border-style:solid}.result-correct{color:var(--color-accent);border-color:var(--color-accent)}.result-incorrect{color:var(--color-secondary);border-color:var(--color-secondary)}.results-container p{font-size:1.2rem;color:var(--color-text);margin-bottom:2.5rem}