@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap";:root{--bg: #080a0f;--bg-2: #0f1117;--bg-3: #161923;--bg-4: #1e2233;--bg-5: #252a3d;--border: rgba(255,255,255,.06);--border-2: rgba(255,255,255,.11);--border-3: rgba(255,255,255,.18);--text-1: #eef0f8;--text-2: #8892b0;--text-3: #4a5070;--accent: #6366f1;--accent-2: #818cf8;--accent-3: #a5b4fc;--accent-glow: rgba(99,102,241,.3);--accent-glow-2:rgba(99,102,241,.15);--green: #22c55e;--red: #ef4444;--yellow: #f59e0b;--orange: #f97316;--pink: #ec4899;--cyan: #06b6d4;--purple: #a855f7;--draw-color: #f97316;--ttt-color: #6366f1;--quiz-color: #22c55e;--emoji-color: #ec4899;--scramble-color: #06b6d4;--r-xs: 6px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 20px;--r-2xl: 28px;--shadow-sm: 0 1px 4px rgba(0,0,0,.5);--shadow-md: 0 4px 20px rgba(0,0,0,.5);--shadow-lg: 0 12px 48px rgba(0,0,0,.6);--shadow-xl: 0 24px 80px rgba(0,0,0,.7);--shadow-accent: 0 8px 32px var(--accent-glow);--t: .18s ease;--t-md: .28s ease;--t-lg: .4s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px;scroll-behavior:smooth}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text-1);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,button,textarea,select{font-family:DM Sans,sans-serif}input:focus,textarea:focus{outline:none}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--border-3)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}@keyframes fadeLeft{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}@keyframes fadeRight{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:none}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes scaleUp{0%{opacity:0;transform:scale(.85) translateY(12px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}60%{transform:translate(7px)}80%{transform:translate(-4px)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow{0%,to{box-shadow:0 0 12px var(--accent-glow)}50%{box-shadow:0 0 32px var(--accent-glow),0 0 60px var(--accent-glow-2)}}@keyframes gradientX{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(20px,-15px) scale(1.04)}66%{transform:translate(-12px,10px) scale(.97)}}@keyframes barPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes dotBounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes ripple{to{transform:scale(3.5);opacity:0}}@keyframes navIn{0%{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes borderSpin{to{transform:rotate(360deg)}}.fade-up{animation:fadeUp .28s ease both}.fade-down{animation:fadeDown .28s ease both}.fade-in{animation:fadeIn .22s ease both}.scale-in{animation:scaleIn .22s ease both}.scale-up{animation:scaleUp .3s cubic-bezier(.34,1.56,.64,1) both}.spin{animation:spin 1s linear infinite}.pulse{animation:pulse 1.6s ease infinite}.float-y{animation:floatY 3s ease-in-out infinite}.heading{font-family:Outfit,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.15}.subheading{font-family:Outfit,sans-serif;font-weight:600;letter-spacing:-.01em}.mono{font-family:Outfit,sans-serif;font-weight:700;letter-spacing:.02em}.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}.card:hover{border-color:var(--border-2)}.card-interactive{cursor:pointer;position:relative;overflow:hidden}.card-interactive:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(99,102,241,.08) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}.card-interactive:hover:after{opacity:1}.card-interactive:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:0 12px 36px #00000080}.card-interactive:active{transform:translateY(-1px) scale(.99)}.card-glow-draw{--card-glow: rgba(249,115,22,.25)}.card-glow-ttt{--card-glow: rgba(99,102,241,.25)}.card-glow-quiz{--card-glow: rgba(34,197,94,.25)}.card-glow-emoji{--card-glow: rgba(236,72,153,.25)}.card-glow-scramble{--card-glow: rgba(6,182,212,.25)}.card-interactive:hover{box-shadow:0 12px 36px var(--card-glow, rgba(0,0,0,.5))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:var(--r-md);border:none;cursor:pointer;font-family:Outfit,sans-serif;font-weight:600;font-size:.875rem;letter-spacing:-.01em;transition:opacity var(--t),transform var(--t),box-shadow var(--t),background var(--t);white-space:nowrap;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.btn:before{content:"";position:absolute;inset:0;background:#fff0;transition:background .15s}.btn:hover:before{background:#ffffff0f}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}.btn-primary:hover:not(:disabled){box-shadow:0 8px 28px var(--accent-glow)}.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border-2)}.btn-ghost:hover:not(:disabled){background:var(--bg-3);color:var(--text-1);border-color:var(--border-3)}.btn-danger{background:#ef44441a;color:var(--red);border:1px solid rgba(239,68,68,.2)}.btn-danger:hover:not(:disabled){background:#ef44442e}.btn-success{background:#22c55e1f;color:var(--green);border:1px solid rgba(34,197,94,.2)}.btn-sm{padding:5px 12px;font-size:.8rem;border-radius:var(--r-sm)}.btn-lg{padding:12px 28px;font-size:1rem;border-radius:var(--r-lg)}.btn-xl{padding:14px 34px;font-size:1.05rem;border-radius:var(--r-xl)}.btn-2xl{padding:16px 40px;font-size:1.1rem;border-radius:var(--r-2xl)}.btn-icon{padding:8px;border-radius:var(--r-md);background:var(--bg-3);color:var(--text-2);border:1px solid var(--border);width:34px;height:34px}.btn-icon:hover:not(:disabled){color:var(--text-1);background:var(--bg-4);border-color:var(--border-2)}.btn-icon.btn-sm{width:30px;height:30px;padding:6px;border-radius:var(--r-sm)}.input{width:100%;padding:10px 14px;background:var(--bg-3);border:1.5px solid var(--border-2);border-radius:var(--r-md);color:var(--text-1);font-size:.9rem;font-family:DM Sans,sans-serif;transition:border-color var(--t),box-shadow var(--t),background var(--t)}.input::placeholder{color:var(--text-3)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6366f124;background:var(--bg-4)}.input:hover:not(:focus){border-color:var(--border-3)}.input-lg{padding:13px 16px;font-size:1rem;border-radius:var(--r-lg)}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-family:Outfit,sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.badge-accent{background:#6366f12e;color:var(--accent-3);border:1px solid rgba(99,102,241,.2)}.badge-green{background:#22c55e24;color:#4ade80;border:1px solid rgba(34,197,94,.2)}.badge-red{background:#ef444424;color:#f87171;border:1px solid rgba(239,68,68,.2)}.badge-yellow{background:#f59e0b24;color:#fbbf24;border:1px solid rgba(245,158,11,.2)}.badge-orange{background:#f9731624;color:#fb923c;border:1px solid rgba(249,115,22,.2)}.badge-pink{background:#ec489924;color:#f472b6;border:1px solid rgba(236,72,153,.2)}.badge-cyan{background:#06b6d424;color:#22d3ee;border:1px solid rgba(6,182,212,.2)}.avatar{border-radius:50%;background:linear-gradient(135deg,var(--bg-4),var(--bg-5));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:Outfit,sans-serif;font-weight:800;color:var(--text-2);border:1.5px solid var(--border-2);transition:transform var(--t),box-shadow var(--t)}.avatar:hover{transform:scale(1.06);box-shadow:0 0 0 2px var(--accent-glow)}.avatar-xs{width:26px;height:26px;font-size:.62rem}.avatar-sm{width:32px;height:32px;font-size:.78rem}.avatar-md{width:42px;height:42px;font-size:1rem}.avatar-lg{width:56px;height:56px;font-size:1.3rem}.avatar-xl{width:72px;height:72px;font-size:1.7rem}.avatar-2xl{width:96px;height:96px;font-size:2.2rem}.avatar-online{border-color:var(--green);box-shadow:0 0 0 2px #22c55e40}.progress-bar{height:6px;background:var(--bg-5);border-radius:99px;overflow:hidden}.progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);transition:width .6s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);background-size:200%;animation:shimmer 1.5s ease infinite}.tab-bar{display:flex;gap:3px;background:var(--bg-3);border-radius:var(--r-lg);padding:4px;border:1px solid var(--border)}.tab-btn{flex:1;padding:7px 14px;border-radius:var(--r-md);border:none;background:transparent;color:var(--text-3);cursor:pointer;font-family:Outfit,sans-serif;font-weight:600;font-size:.82rem;transition:all var(--t);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.tab-btn:hover{color:var(--text-2);background:#ffffff0a}.tab-btn.active{background:var(--bg);color:var(--text-1);box-shadow:var(--shadow-sm)}.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:var(--bg-3);color:var(--text-2);font-size:.73rem;font-weight:600;border:1px solid var(--border);transition:all var(--t)}.tag:hover{border-color:var(--border-2);color:var(--text-1)}.divider{height:1px;background:var(--border)}.online-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--bg-2)}.online-dot.online{background:var(--green);box-shadow:0 0 6px #22c55e80}.online-dot.offline{background:var(--text-3)}.rank-1{color:#f59e0b}.rank-2{color:#94a3b8}.rank-3{color:#b45309}.chat-scroll{scrollbar-width:thin;scrollbar-color:var(--bg-5) transparent}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);background:var(--bg-3);border:1px solid var(--border-2);color:var(--text-1);padding:10px 22px;border-radius:var(--r-lg);font-family:Outfit,sans-serif;font-weight:600;font-size:.85rem;z-index:9999;box-shadow:var(--shadow-lg);white-space:nowrap;animation:toastIn .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.toast.success{border-color:#22c55e4d;background:#22c55e14;color:#4ade80}.toast.error{border-color:#ef44444d;background:#ef444414;color:#f87171}.toast.info{border-color:#6366f14d;background:#6366f114;color:var(--accent-3)}.modal-backdrop{position:fixed;inset:0;background:#000000bf;backdrop-filter:blur(8px);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}.modal-card{width:100%;max-width:480px;animation:scaleUp .25s cubic-bezier(.34,1.56,.64,1)}.navbar{background:#080a0fcc;backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--border);padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;animation:navIn .4s ease both}.navbar-logo{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--r-md);transition:all var(--t)}.navbar-logo:hover{background:#ffffff0a}.navbar-logo-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),#7c3aed);border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px var(--accent-glow);transition:box-shadow var(--t)}.navbar-logo:hover .navbar-logo-icon{box-shadow:0 0 20px var(--accent-glow)}.page{min-height:100vh;background:var(--bg)}.page-content{max-width:1080px;margin:0 auto;padding:28px 20px}.page-content-sm{max-width:720px;margin:0 auto;padding:28px 20px}.section-label{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}.section-title{font-family:Outfit,sans-serif;font-weight:900;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.03em;color:var(--text-1);margin-bottom:10px}.stat-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;text-align:center;transition:all var(--t)}.stat-card:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-value{font-family:Outfit,sans-serif;font-weight:900;font-size:1.8rem;line-height:1;color:var(--text-1);margin-bottom:4px}.stat-label{font-size:.73rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.07em}.game-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 18px;position:relative;overflow:hidden;cursor:default;transition:all .25s}.game-card-top-bar{position:absolute;top:0;left:0;right:0;height:2px;border-radius:99px 99px 0 0;transition:height .2s}.game-card:hover{border-color:var(--border-2);transform:translateY(-4px);box-shadow:0 16px 48px #00000080}.game-card:hover .game-card-top-bar{height:3px}.friend-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);transition:all var(--t)}.friend-card:hover{background:var(--bg-3);border-color:var(--border-2);transform:translate(3px)}.msg-bubble{max-width:72%;padding:9px 14px;border-radius:18px;font-size:.88rem;line-height:1.5;animation:fadeUp .2s ease;word-break:break-word}.msg-bubble.mine{background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%);color:#fff;border-bottom-right-radius:6px;box-shadow:0 4px 12px var(--accent-glow);margin-left:auto}.msg-bubble.theirs{background:var(--bg-3);color:var(--text-1);border:1px solid var(--border-2);border-bottom-left-radius:6px}.typing-dots{display:inline-flex;gap:4px;align-items:center;padding:10px 14px;background:var(--bg-3);border:1px solid var(--border-2);border-radius:18px 18px 18px 6px}.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-3)}.typing-dots span:nth-child(1){animation:dotBounce 1.2s 0s ease-in-out infinite}.typing-dots span:nth-child(2){animation:dotBounce 1.2s .2s ease-in-out infinite}.typing-dots span:nth-child(3){animation:dotBounce 1.2s .4s ease-in-out infinite}.xp-bar-wrap{background:var(--bg-5);border-radius:99px;height:8px;overflow:hidden;position:relative}.xp-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .7s cubic-bezier(.4,0,.2,1)}.xp-bar-fill:after{content:"";position:absolute;top:0;bottom:0;right:0;width:30px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35));border-radius:99px;animation:barPulse 1.5s ease-in-out infinite}.invite-banner{background:linear-gradient(135deg,#6366f11f,#7c3aed14);border-bottom:1px solid rgba(99,102,241,.2);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;animation:fadeDown .3s ease}.gchat-msg{animation:slideUp .18s ease both}.skeleton{background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-4) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;border-radius:var(--r-md)}.empty-state{text-align:center;padding:48px 24px;color:var(--text-3)}.empty-state-icon{width:56px;height:56px;margin:0 auto 16px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center}.empty-state-title{font-family:Outfit,sans-serif;font-weight:700;color:var(--text-2);margin-bottom:6px}.level-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:linear-gradient(135deg,#6366f133,#7c3aed1f);border:1px solid rgba(99,102,241,.25);font-family:Outfit,sans-serif;font-weight:700;font-size:.75rem;color:var(--accent-3)}.game-badge{padding:2px 9px;border-radius:99px;font-family:Outfit,sans-serif;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}@media (max-width: 768px){.hide-mobile{display:none!important}.page-content,.page-content-sm{padding:20px 16px}.btn-xl{padding:12px 24px;font-size:.95rem}.btn-2xl{padding:14px 30px;font-size:1rem}.modal-card{max-width:100%}.auth-left{padding:24px 20px!important}}@media (max-width: 480px){html{font-size:14px}.tab-btn{padding:6px 10px;font-size:.78rem}.card{padding:12px 14px}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.text-gradient{background:linear-gradient(135deg,var(--accent-2),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}