@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;800&display=swap";:root{--neon-pink: #ff00ff;--neon-blue: #00ffff;--neon-purple: #8a2be2;--bg-dark: #050505;--glass: rgba(15, 15, 20, .5);--glass-border: rgba(255, 255, 255, .15)}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{font-family:Outfit,sans-serif;background-color:var(--bg-dark);background-image:linear-gradient(135deg,#05050af2,#0f0a19f2);color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;overflow-x:hidden;overflow-y:auto}#app{position:relative;width:100%;max-width:600px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 50px #00ffff0d}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;touch-action:auto}.screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:auto;z-index:10;padding:20px;touch-action:auto!important}h1,h2{font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;text-align:center;background:linear-gradient(to right,var(--neon-blue),var(--neon-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(0,255,255,.6)) drop-shadow(0 0 20px rgba(255,0,255,.4))}h3{font-weight:800;font-size:24px;margin-bottom:5px;color:#fff}.logo{width:160px;margin-bottom:30px;filter:drop-shadow(0 0 15px var(--neon-pink));animation:float 6s ease-in-out infinite,pulse-glow 3s ease-in-out infinite alternate}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes pulse-glow{0%{filter:drop-shadow(0 0 5px var(--neon-pink))}to{filter:drop-shadow(0 0 25px var(--neon-pink))}}.active-users{margin-bottom:30px;padding:12px 25px;border-radius:30px;background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:300;letter-spacing:1px;box-shadow:0 8px 32px #0000004d}.game-grid{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:450px;justify-content:center}.game-card{position:relative;width:100%;max-width:340px;border-radius:24px;overflow:hidden;padding:2px;cursor:pointer;background:#0003;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 30px #0009;display:flex}.game-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0%,var(--neon-blue) 25%,transparent 45%,transparent 55%,var(--neon-pink) 75%,transparent 100%);animation:rotate-border 4s linear infinite;z-index:1;pointer-events:none}.game-card-inner{position:relative;flex:1;background:#0a0a0fe6;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-radius:22px;padding:25px 20px;text-align:center;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;box-shadow:inset 0 0 20px #00ffff08;transition:all .4s ease}@keyframes rotate-border{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.game-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #0ff3}.game-card:hover .game-card-inner{background:#0f0f19f2;box-shadow:inset 0 0 30px #00ffff14}.game-card-inner h3{font-weight:800;font-size:24px;margin-bottom:5px;color:#fff;text-shadow:0 0 10px rgba(0,255,255,.3)}.game-card-inner p{color:#aaa;font-weight:300;font-size:14px;margin-bottom:15px}.name-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:90%;margin:0 auto}input{background:#00000080;border:1px solid var(--glass-border);color:#fff;padding:18px 25px;border-radius:12px;font-size:18px;font-family:Outfit,sans-serif;margin-bottom:25px;width:100%;outline:none;text-align:center;transition:all .3s ease;box-shadow:inset 0 0 10px #00000080}input:focus{border-color:var(--neon-blue);box-shadow:0 0 20px #0ff3,inset 0 0 10px #00000080;background:#0a0a14cc}input::placeholder{font-size:14px;opacity:.6}button{background:linear-gradient(135deg,var(--neon-pink) 0%,var(--neon-purple) 100%);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:Outfit,sans-serif;font-size:18px;font-weight:800;letter-spacing:1px;padding:16px 45px;border-radius:30px;cursor:pointer;box-shadow:0 10px 20px #ff00ff4d;transition:all .3s ease;width:100%}button:hover{transform:translateY(-3px);box-shadow:0 15px 30px #ff00ff80;background:linear-gradient(135deg,#f3f,#a044ff)}.hub-btn{background:#0006;border:1px solid var(--glass-border);color:#ccc;font-size:13px;font-weight:500;padding:10px 18px;border-radius:20px;cursor:pointer;box-shadow:none;width:auto}.hub-btn:hover{background:#00ffff1a;border-color:var(--neon-blue);color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px #0ff3}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:50;padding:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#0f0f14d9;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid var(--neon-blue);border-radius:24px;padding:25px 20px;max-width:440px;width:100%;text-align:center;box-shadow:0 20px 50px #00000080,inset 0 0 20px #00ffff1a;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.close-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 25px;font-size:15px;margin-top:15px;width:100%;box-shadow:none}.close-btn:hover{background:#ffffff26;border-color:#fff}.hub-separator{display:flex;align-items:center;width:100%;max-width:450px;margin:35px 0 25px;color:#fff6;font-size:26px;font-weight:800;letter-spacing:4px;text-transform:uppercase}.hub-separator:before{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(0,255,255,.25));margin-right:15px}.hub-separator:after{content:"";flex:1;height:1px;background:linear-gradient(to left,transparent,rgba(255,0,255,.25));margin-left:15px}.hub-separator span{background:linear-gradient(to right,var(--neon-blue),var(--neon-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 5px rgba(0,255,255,.3))}.hidden{display:none!important}.inactivity-timer{position:absolute;top:calc(env(safe-area-inset-top,40px) + 20px);right:20px;color:#fffc;font-size:13px;font-family:Outfit,sans-serif;font-weight:500;z-index:20;text-shadow:0 2px 4px rgba(0,0,0,.5);background:#0006;padding:4px 10px;border-radius:12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.disconnect-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#05050af2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:99}.hub-screen{display:block!important;text-align:center;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-top:50px;padding-bottom:50px}.hub-screen>*{margin-left:auto;margin-right:auto}