.login-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(#050505f2,#050505f2),url(https://images.unsplash.com/photo-1605806616949-1e87b487bc2a?q=80&w=2574&auto=format&fit=crop) no-repeat center center fixed;background-size:cover;overflow:hidden;position:relative}.login-container:before{content:"";position:absolute;width:200%;height:200%;background:radial-gradient(circle at 20% 50%,rgba(0,243,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,0,255,.1) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(176,38,255,.1) 0%,transparent 50%);animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.login-card{position:relative;z-index:10;background:#0a0a14b3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid var(--neon-blue);border-radius:20px;padding:4rem 3rem;box-shadow:0 0 40px #00f3ff4d,0 0 80px #00f3ff1a,inset 0 0 40px #00f3ff0d;text-align:center;min-width:400px;animation:cardGlow 3s ease-in-out infinite}@keyframes cardGlow{0%,to{box-shadow:0 0 40px #00f3ff4d,0 0 80px #00f3ff1a,inset 0 0 40px #00f3ff0d}50%{box-shadow:0 0 60px #f0f6,0 0 100px #f0f3,inset 0 0 60px #ff00ff14;border-color:var(--neon-pink)}}.login-title{font-family:Orbitron,sans-serif;font-size:3.5rem;font-weight:900;margin:0 0 1rem;background:linear-gradient(135deg,var(--neon-blue),var(--neon-pink),var(--neon-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:4px;animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{filter:drop-shadow(0 0 20px rgba(0,243,255,.8))}50%{filter:drop-shadow(0 0 30px rgba(255,0,255,.9))}}.login-subtitle{font-family:Orbitron,sans-serif;font-size:1.2rem;color:#ffffffb3;margin:0 0 3rem;letter-spacing:2px;text-transform:uppercase}.google-signin-btn{background:linear-gradient(135deg,#00f3ff33,#f0f3);border:2px solid var(--neon-blue);color:#fff;font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:700;padding:1.2rem 3rem;border-radius:50px;cursor:pointer;text-transform:uppercase;letter-spacing:2px;transition:all .3s ease;box-shadow:0 0 20px #00f3ff66,inset 0 0 20px #00f3ff1a;display:inline-flex;align-items:center;gap:1rem;position:relative;overflow:hidden}.google-signin-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff1a;transform:translate(-50%,-50%);transition:width .6s,height .6s}.google-signin-btn:hover:before{width:300px;height:300px}.google-signin-btn:hover{border-color:var(--neon-pink);box-shadow:0 0 40px #f0f9,inset 0 0 30px #f0f3;transform:translateY(-2px)}.google-signin-btn:active{transform:translateY(0)}.google-icon{width:24px;height:24px;position:relative;z-index:1}.btn-text{position:relative;z-index:1}.chess-pieces{position:absolute;font-size:4rem;opacity:.1;animation:floatPiece 15s ease-in-out infinite}.piece-1{top:10%;left:10%;animation-delay:0s}.piece-2{top:20%;right:15%;animation-delay:3s}.piece-3{bottom:15%;left:15%;animation-delay:6s}.piece-4{bottom:20%;right:10%;animation-delay:9s}@keyframes floatPiece{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(180deg)}}.loading{display:none;margin-top:2rem;color:var(--neon-blue);font-family:Orbitron,sans-serif;font-size:1rem;letter-spacing:2px;animation:pulse 1.5s ease-in-out infinite}.loading.active{display:block}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.error-message{display:none;margin-top:1.5rem;padding:1rem;background:#ff00641a;border:1px solid rgba(255,0,100,.5);border-radius:8px;color:#ff0064;font-family:Orbitron,sans-serif;font-size:.9rem}.error-message.active{display:block}:root{--neon-blue: #00f3ff;--neon-pink: #ff00ff;--neon-green: #00ff00;--neon-yellow: #fcee0a;--neon-purple: #b026ff}.selection-container{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(#050505f2,#050505f2),url(https://images.unsplash.com/photo-1605806616949-1e87b487bc2a?q=80&w=2574&auto=format&fit=crop) no-repeat center center fixed;background-size:cover;overflow:hidden;position:relative;padding:2rem;box-sizing:border-box}.selection-container:before{content:"";position:absolute;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(0,243,255,.08) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(255,0,255,.08) 0%,transparent 50%),radial-gradient(circle at 50% 30%,rgba(0,255,0,.08) 0%,transparent 50%);animation:floatBg 25s ease-in-out infinite}@keyframes floatBg{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(40px,-40px) rotate(120deg)}66%{transform:translate(-30px,30px) rotate(240deg)}}.selection-header{position:relative;z-index:10;text-align:center;margin-bottom:3rem}.selection-title{font-family:Orbitron,sans-serif;font-size:3rem;font-weight:900;margin:0 0 .5rem;background:linear-gradient(135deg,var(--neon-blue),var(--neon-pink),var(--neon-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:4px;filter:drop-shadow(0 0 20px rgba(0,243,255,.6))}.selection-subtitle{font-family:Orbitron,sans-serif;font-size:1.2rem;color:#ffffffb3;margin:0;letter-spacing:2px;text-transform:uppercase}.cards-container{position:relative;z-index:10;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:1200px;width:100%}.game-mode-card{background:#0a0a14b3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid var(--neon-blue);border-radius:16px;padding:2.5rem 2rem;cursor:pointer;transition:all .4s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1.5rem;box-shadow:0 0 30px #00f3ff33,inset 0 0 30px #00f3ff0d}.game-mode-card:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff0d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.game-mode-card:hover:before{width:500px;height:500px}.game-mode-card:hover{transform:translateY(-10px);border-color:var(--neon-pink);box-shadow:0 0 50px #f0f6,inset 0 0 50px #ff00ff1a}.card-icon{font-size:4rem;filter:drop-shadow(0 0 15px currentColor);position:relative;z-index:1}.card-random{border-color:var(--neon-green)}.card-random:hover{border-color:var(--neon-green);box-shadow:0 0 50px #0f06,inset 0 0 50px #00ff001a}.card-random .card-icon{color:var(--neon-green)}.card-join{border-color:var(--neon-blue)}.card-join:hover{border-color:var(--neon-blue);box-shadow:0 0 50px #00f3ff66,inset 0 0 50px #00f3ff1a}.card-join .card-icon{color:var(--neon-blue)}.card-create{border-color:var(--neon-yellow)}.card-create:hover{border-color:var(--neon-yellow);box-shadow:0 0 50px #fcee0a66,inset 0 0 50px #fcee0a1a}.card-create .card-icon{color:var(--neon-yellow)}.card-title{font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:2px;margin:0;text-align:center;position:relative;z-index:1}.card-description{font-family:Orbitron,sans-serif;font-size:.9rem;color:#fff9;text-align:center;margin:0;line-height:1.6;position:relative;z-index:1}.join-input-container{width:100%;position:relative;z-index:1}.join-code-input{width:100%;padding:.8rem;background:#00f3ff0d;border:1px solid rgba(0,243,255,.3);border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:1rem;text-align:center;text-transform:uppercase;letter-spacing:3px;box-sizing:border-box;transition:all .3s ease}.join-code-input:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 20px #00f3ff4d}.join-code-input::placeholder{color:#ffffff4d;letter-spacing:2px}.card-button{width:100%;padding:1rem;background:linear-gradient(135deg,#00f3ff33,#f0f3);border:2px solid var(--neon-pink);border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .3s ease;position:relative;z-index:1;box-shadow:0 0 20px #ff00ff4d}.card-button:hover{transform:scale(1.05);box-shadow:0 0 30px #ff00ff80}.card-button:active{transform:scale(.98)}.status-text{font-family:Orbitron,sans-serif;font-size:.9rem;text-align:center;margin:.5rem 0;min-height:1.5rem;position:relative;z-index:1}.error-text{font-family:Orbitron,sans-serif;font-size:.8rem;color:#ff0064;text-align:center;margin:.5rem 0;display:none;position:relative;z-index:1}.back-btn{position:absolute;top:2rem;left:2rem;padding:.8rem 1.5rem;background:#ff00641a;border:1px solid rgba(255,0,100,.5);border-radius:8px;color:#ff0064;font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease;z-index:100}.back-btn:hover{background:#ff006433;box-shadow:0 0 15px #ff00644d}@media(max-width:768px){.cards-container{grid-template-columns:1fr}.selection-title{font-size:2rem}}:root{font-family:Orbitron,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#050505;--neon-blue: #00f3ff;--neon-pink: #ff00ff;--neon-green: #00ff00;--neon-yellow: #fcee0a;--glass-bg: rgba(20, 20, 30, .6);--glass-border: rgba(0, 243, 255, .3);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(#050505f2,#050505f2),url(https://images.unsplash.com/photo-1605806616949-1e87b487bc2a?q=80&w=2574&auto=format&fit=crop) no-repeat center center fixed;background-size:cover}#app{width:100%;height:100%;display:flex;flex-direction:row;margin:0;padding:0;max-width:none}#game-container{width:75%;height:100%;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,rgba(0,243,255,.05) 0%,transparent 70%)}#board-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#board{width:min(90vh,90vw);height:min(90vh,90vw);box-shadow:0 0 30px #00f3ff33,0 0 60px #00f3ff1a;border:2px solid var(--neon-blue);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a14d9;padding:10px;border-radius:4px}#sidebar{width:25%;height:100vh;background:#000c;border-left:1px solid var(--neon-blue);display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;box-sizing:border-box;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;box-shadow:-5px 0 20px #00f3ff1a;overflow-y:auto}h1{font-size:2.5rem;line-height:1.1;color:var(--neon-yellow);text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px var(--neon-yellow),0 0 20px var(--neon-yellow);margin-bottom:2rem;text-align:center}#status{font-size:1.1rem;font-weight:700;color:var(--neon-blue);text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 10px var(--neon-blue);margin-top:1rem;padding:1rem;border:1px solid var(--glass-border);background:#00f3ff0d;border-radius:4px;width:100%;text-align:center;box-sizing:border-box}.game-info{margin-top:auto;color:#ffffff80;font-size:.9rem;text-align:center}.user-info{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.8rem;background:#00f3ff0d;border:1px solid var(--glass-border);border-radius:8px}.user-avatar{width:3vw;height:3vw;border-radius:50%;border:2px solid var(--neon-blue);box-shadow:0 0 10px var(--neon-blue)}.user-email{font-size:.7vw;color:#ffffffb3;text-align:center;word-break:break-all}.room-info-section{width:100%;margin-top:1.5rem;padding:1rem;background:#00f3ff0d;border:1px solid var(--glass-border);border-radius:8px}.section-title{font-size:1.1rem;color:var(--neon-pink);text-transform:uppercase;letter-spacing:1px;margin:0 0 1rem;text-shadow:0 0 8px var(--neon-pink);text-align:center}.room-mode-display,.room-code-display-container,.room-status-display{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;padding:.6rem;background:#0000004d;border-radius:6px}.room-status-display{margin-bottom:0}.mode-label{font-size:.9rem;color:#fff9;font-weight:600}.mode-value,.status-value{font-size:1rem;color:var(--neon-blue);font-weight:700;text-shadow:0 0 8px var(--neon-blue)}.room-code-small{font-size:1.2rem;color:var(--neon-yellow);font-weight:900;letter-spacing:2px;text-shadow:0 0 10px var(--neon-yellow)}.leave-room-btn{width:100%;padding:.8rem;margin-top:1.5rem;background:#ffa5001a;border:1px solid rgba(255,165,0,.5);border-radius:8px;color:orange;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease}.leave-room-btn:hover{background:#ffa50033;box-shadow:0 0 15px #ffa5004d}.signout-btn{width:100%;padding:.6rem;margin-top:1rem;background:#ff00641a;border:1px solid rgba(255,0,100,.5);border-radius:8px;color:#ff0064;font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease}.signout-btn:hover{background:#ff006433;box-shadow:0 0 15px #ff00644d}.notification{position:fixed;top:2rem;right:2rem;padding:1rem 2rem;background:#00f3ffe6;border:2px solid var(--neon-blue);border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 0 30px #00f3ff80;z-index:1000;opacity:0;transform:translate(400px);transition:all .3s ease}.notification.show{opacity:1;transform:translate(0)}.notification.success{background:#00ff00e6;border-color:var(--neon-green);box-shadow:0 0 30px #00ff0080}.notification.error{background:#ff0064e6;border-color:#ff0064;box-shadow:0 0 30px #ff006480}.white-1e1d7{background-color:#ffffff08;color:var(--neon-blue);box-shadow:inset 0 0 0 1px #00f3ff26,inset 0 0 10px #00f3ff0d}.black-3c85d{background-color:#000000b3;color:var(--neon-blue);box-shadow:inset 0 0 0 1px #00f3ff26}.highlight1-32417,.highlight2-9c5d2{box-shadow:inset 0 0 20px var(--neon-blue),0 0 15px var(--neon-blue),inset 0 0 0 1px var(--neon-blue);background:#00f3ff4d!important}.highlight-legal{box-shadow:inset 0 0 20px var(--neon-green),0 0 15px var(--neon-green),inset 0 0 0 1px var(--neon-green)!important;background:#0f06!important}.highlight-illegal{box-shadow:inset 0 0 20px var(--neon-pink),0 0 15px var(--neon-pink),inset 0 0 0 1px var(--neon-pink)!important;background:#ff00ff4d!important}.piece-417db{filter:drop-shadow(0 0 5px rgba(255,255,255,.8));transition:transform .2s ease-in-out}.square-55d63:hover{box-shadow:inset 0 0 15px var(--neon-pink);cursor:pointer}.esc-hint{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);padding:.5rem 1rem;background:#00f3ff1a;border:1px solid var(--neon-blue);border-radius:8px;color:var(--neon-blue);font-family:Orbitron,sans-serif;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:100}.esc-hint.show{opacity:1}.esc-hint kbd{display:inline-block;padding:.2rem .5rem;background:#00f3ff33;border:1px solid var(--neon-blue);border-radius:4px;font-family:Orbitron,monospace;font-weight:700}.game-over-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;opacity:0;animation:fadeIn .5s ease forwards}@keyframes fadeIn{to{opacity:1}}.winner-card{background:linear-gradient(135deg,#0a0a1ef2,#140a28f2);border:3px solid var(--neon-yellow);border-radius:20px;padding:3rem 4rem;text-align:center;box-shadow:0 0 50px var(--neon-yellow),inset 0 0 30px #fcee0a1a;animation:scaleIn .6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes scaleIn{0%{transform:scale(.5) rotate(-10deg)}to{transform:scale(1) rotate(0)}}.winner-trophy{font-size:5rem;margin-bottom:1rem;animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.winner-title{font-family:Orbitron,sans-serif;font-size:2.5rem;font-weight:900;color:var(--neon-yellow);text-transform:uppercase;letter-spacing:4px;margin:0 0 1rem;text-shadow:0 0 20px var(--neon-yellow),0 0 40px var(--neon-yellow);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.winner-name{font-family:Orbitron,sans-serif;font-size:3rem;font-weight:900;background:linear-gradient(90deg,var(--neon-blue),var(--neon-pink),var(--neon-yellow),var(--neon-green));background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 2rem;animation:gradientShift 3s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.winner-buttons{display:flex;gap:1rem;margin-top:2rem}.winner-btn{padding:1rem 2rem;border:2px solid var(--neon-blue);border-radius:10px;background:#00f3ff1a;color:var(--neon-blue);font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;cursor:pointer;transition:all .3s ease;box-shadow:0 0 20px #00f3ff4d}.winner-btn:hover{background:#00f3ff33;box-shadow:0 0 30px #00f3ff80;transform:translateY(-3px)}.winner-btn.primary{border-color:var(--neon-yellow);color:var(--neon-yellow);background:#fcee0a1a;box-shadow:0 0 20px #fcee0a4d}.winner-btn.primary:hover{background:#fcee0a33;box-shadow:0 0 30px #fcee0a80}#confetti-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9998}