:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{margin:0;padding:0;min-height:100vh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#1e1b4b,#0f172a);color:#f8fafc;font-family:Inter,system-ui,sans-serif;overflow-x:hidden}#root{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.lobby,.game{position:relative;z-index:2;background:#1e293b99;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);padding:40px;border-radius:32px;box-shadow:0 0 40px #0006,inset 0 0 20px #ffffff05;box-sizing:border-box;max-width:400px;width:90%;margin:0 auto;display:flex;flex-direction:column;align-items:center}.title-amazing,.gradient-text-amazing{background:linear-gradient(90deg,#2dd4bf,#22d3ee,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem;font-weight:900;margin:0;text-shadow:0 0 8px rgba(34,211,238,.6),0 0 20px rgba(45,212,191,.4),0 0 40px rgba(6,182,212,.3)}.title-stunning,.gradient-text-stunning{background:linear-gradient(90deg,#ff1f1f,#ff3b3b,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.5rem;font-weight:700;margin-bottom:1rem;text-shadow:0 0 6px rgba(255,31,31,.7),0 0 14px rgba(255,59,59,.6),0 0 28px rgba(255,31,31,.5)}.multiplayer{font-size:.7rem;margin:-5px 0 15px;color:#94a3b8}.board{display:grid;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);gap:15px;margin:20px 0;padding:15px;background:#0f172a80;border-radius:20px;border:1px solid rgba(255,255,255,.05)}.square{width:100px;height:100px;background:#1e293bcc;border:1px solid rgba(255,255,255,.1);border-radius:16px;font-size:2.5rem;font-weight:700;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.square:hover{background:#3b82f61a;border-color:#3b82f6;box-shadow:0 0 20px #3b82f64d;transform:scale(1.02)}.fading{opacity:.3;filter:blur(2px);transform:scale(.9)}.status{font-size:1.2rem;font-weight:600;margin:10px 0;color:#94a3b8}.lobby-controls{display:flex;flex-direction:column;gap:12px;width:100%}.lobby input{background:#0f172a99;border:1px solid rgba(255,255,255,.1);padding:12px;border-radius:12px;color:#fff;outline:none;transition:border .3s}.lobby input:focus{border-color:#3b82f6}.game-footer{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:20px;width:100%}button{padding:12px 24px;border-radius:12px;border:none;font-weight:800;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .3s ease}.reset-button,.quick-match{background:linear-gradient(45deg,#10b981,#3b82f6);color:#fff;box-shadow:0 4px 15px #10b98133}.leave-button{background:#f43f5e1a;border:1px solid rgba(244,63,94,.5);color:#f43f5e}button:hover{transform:translateY(-2px);filter:brightness(1.2);box-shadow:0 0 20px #3b82f666}.app-container{position:relative;min-height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#1e1b4b,#0f172a);overflow:hidden;margin:0;padding:0;z-index:1}.shape{position:absolute;filter:blur(80px);border-radius:50%;z-index:-1;opacity:.7;pointer-events:none;animation:float 20s infinite alternate ease-in-out}.shape-1{width:300px;height:300px;background:#22d3ee;top:-100px;left:-100px}.shape-2{width:400px;height:400px;background:#9333ea;bottom:-150px;right:-100px;animation-duration:25s;animation-delay:-5s}.shape-3{width:250px;height:250px;background:#f43f5e;top:40%;left:-50px;animation-duration:15s;animation-delay:-2s}@keyframes float{0%{transform:translate(0) scale(1) rotate(0)}33%{transform:translate(30px,50px) scale(1.1) rotate(120deg)}66%{transform:translate(-20px,20px) scale(.9) rotate(240deg)}to{transform:translate(0) scale(1) rotate(360deg)}}.separator{display:flex;align-items:center;width:100%;margin:10px 0;color:#ffffff4d;font-size:.8rem}.separator:before,.separator:after{content:"";flex:1;border-bottom:1px solid rgba(255,255,255,.1)}.separator span{padding:0 10px}.tech-input{width:100%;box-sizing:border-box}.room-id{background:#ffffff1a;padding:8px 12px;margin:0;border-radius:8px;font-size:xx-large}.role{font-weight:700;margin-top:5px;color:#cbd5e1;transition:color .3s ease}.status{text-align:center;margin:0;font-weight:800;font-size:1.2rem;color:#cbd5e1}.square-x{color:#22d3ee!important;text-shadow:0 0 10px rgba(34,211,238,.6);-webkit-text-fill-color:#22d3ee!important}.square-o{color:#f43f5e!important;text-shadow:0 0 10px rgba(244,63,94,.6);-webkit-text-fill-color:#f43f5e!important}.presence-indicator{font-size:.8rem;padding:5px 12px;background:#ffffff0d;border-radius:20px;display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#94a3b8}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.online{background:#10b981;box-shadow:0 0 10px #10b981}.dot.offline{background:#f43f5e;box-shadow:0 0 10px #f43f5e;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.info-note{font-size:.7rem;color:#94a3b8;text-align:center;width:70%;margin:0 auto}