:root{--bg-dark: #0a0b10;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--neon-blue: #00d2ff;--neon-purple: #9d50bb;--neon-pink: #f00b51;--text-main: #ffffff;--text-dim: #b0b0b0;--accent-gradient: linear-gradient(135deg, var(--neon-blue), var(--neon-purple))}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Outfit,sans-serif}body{background-color:var(--bg-dark);background-image:radial-gradient(circle at 20% 20%,rgba(0,210,255,.05) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(157,80,187,.05) 0%,transparent 40%);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}#root{width:100%;max-width:1200px;padding:2rem}.glass-card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;padding:2.5rem;box-shadow:0 8px 32px #0000005e;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.glass-card:hover{border-color:#fff3;transform:translateY(-5px);box-shadow:0 12px 40px #00000073}.neon-text{font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(0,210,255,.3));letter-spacing:-1px}button{cursor:pointer;border:none;outline:none;transition:all .3s ease;font-weight:600;border-radius:12px}.primary-btn{background:var(--accent-gradient);color:#fff;padding:1rem 2.5rem;box-shadow:0 4px 15px #9d50bb4d}.primary-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #9d50bb80}.secondary-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-main);padding:.8rem 2rem}.secondary-btn:hover{background:rgba(255,255,255,.1);border-color:#ffffff4d}input{background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:12px;padding:1.2rem;color:#fff;width:100%;margin-bottom:1.5rem;font-size:1rem;transition:all .3s}input:focus{border-color:var(--neon-blue);background:rgba(255,255,255,.08);outline:none;box-shadow:0 0 15px #00d2ff33}.lobby-container{display:flex;flex-direction:column;max-width:450px;margin:auto;text-align:center}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:3rem}.game-card{cursor:pointer;text-align:center;padding:3rem 2rem;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1rem}.game-card .icon{font-size:3.5rem;margin-bottom:.5rem;filter:drop-shadow(0 0 10px rgba(255,255,255,.2))}.game-card:hover .icon{transform:scale(1.1) rotate(5deg)}.board{display:grid;grid-template-columns:repeat(3,100px);gap:15px;margin:2rem auto}.cell{width:100px;height:100px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;display:flex;justify-content:center;align-items:center;font-size:3rem;font-weight:700;cursor:pointer;transition:all .3s}.cell:hover{background:rgba(255,255,255,.1);transform:scale(1.02)}.cell.x{color:var(--neon-blue);text-shadow:0 0 15px rgba(0,210,255,.5)}.cell.o{color:var(--neon-pink);text-shadow:0 0 15px rgba(240,11,81,.5)}.chess-board{display:flex;flex-direction:column;border:4px solid var(--glass-border);width:fit-content;margin:1.5rem auto;border-radius:12px;overflow:hidden;box-shadow:0 0 30px #00000080}.chess-row{display:flex}.chess-square{width:60px;height:60px;display:flex;justify-content:center;align-items:center;font-size:2.5rem;cursor:pointer;transition:all .2s}.chess-square.light{background:rgba(255,255,255,.08)}.chess-square.dark{background:rgba(0,0,0,.3)}.chess-square.selected{background:rgba(0,210,255,.3)!important}.chess-square:hover{filter:brightness(1.2)}.chat-container{display:flex;flex-direction:column;height:400px;width:100%;margin-top:2rem}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}.message{padding:.6rem 1rem;border-radius:12px;max-width:80%;font-size:.9rem}.message.mine{align-self:flex-end;background:var(--accent-gradient);color:#fff}.message.other{align-self:flex-start;background:var(--glass-bg);border:1px solid var(--glass-border)}.chat-input-area{display:flex;gap:.5rem;padding:1rem;border-top:1px solid var(--glass-border)}.chat-input-area input{margin-bottom:0;padding:.8rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.glass-card{animation:fadeIn .6s ease-out forwards}@media (max-width: 600px){.chess-square{width:40px;height:40px;font-size:1.8rem}.board{grid-template-columns:repeat(3,80px);gap:10px}.cell{width:80px;height:80px;font-size:2.5rem}}