*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100dvh;background:#0a0a0a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff}#app{display:flex;flex-direction:column;min-height:100dvh}a{color:inherit;text-decoration:none}.nav{display:flex;align-items:center;gap:2rem;padding:1rem 2rem;background:#111;border-bottom:1px solid #222}.nav-logo{font-size:1.3rem;font-weight:900;letter-spacing:.05em;cursor:pointer}.nav-logo .pos{color:#e74c3c}.nav-logo .neg{color:#3498db}.nav-links{display:flex;gap:1.5rem;align-items:center;flex:1}.nav-link{color:#888;font-size:.9rem;cursor:pointer;transition:color .15s;background:none;border:none;font-family:inherit}.nav-link:hover,.nav-link.active{color:#fff}.nav-right{display:flex;align-items:center;gap:1rem}.nav-user-label{color:#555;font-size:.8rem}.nav-link-account{color:#3498db;font-size:.8rem;cursor:pointer;background:none;border:1px solid #3498db44;border-radius:4px;padding:.25rem .6rem;font-family:inherit;transition:color .15s,border-color .15s,background .15s}.nav-link-account:hover{background:#3498db22;border-color:#3498db}.nav-signout{color:#666;font-size:.8rem;cursor:pointer;background:none;border:1px solid #333;border-radius:4px;padding:.25rem .6rem;font-family:inherit;transition:color .15s,border-color .15s}.nav-signout:hover{color:#e74c3c;border-color:#e74c3c}.page{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem;width:100%;transition:opacity .25s ease,transform .25s ease}.page-enter{opacity:0;transform:translateY(8px)}.page h2{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;width:100%;max-width:960px}.games-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;width:100%;max-width:960px;flex:1;align-items:center}.game-card{background:#151520;border:1px solid #222;border-radius:16px;padding:1rem 1.25rem;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center}.game-card:hover{transform:translateY(-3px) scale(1.03);border-color:#e74c3c44;box-shadow:0 8px 32px #e74c3c1a}.gc-top{width:100%;display:flex;align-items:center;justify-content:space-between}.gc-top-left{display:flex;align-items:center;gap:.5rem}.gc-title{font-size:1.4rem;font-weight:900;letter-spacing:.05em;line-height:1}.gc-title .pos{color:#e74c3c}.gc-title .neg{color:#3498db}.gc-title-magnets{background:radial-gradient(circle at 25% 50%,#3498db,#5dade2 30%,#ff6b5b 70%,#e74c3c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;padding-bottom:4px}.gc-hero{position:relative;width:280px;display:flex;align-items:center;justify-content:center;margin-top:1rem}.magnets-attractor{width:110px;height:110px;margin-top:32px}.att-glow{animation:att-pulse-glow 3s ease-in-out infinite;transform-origin:100px 100px}.att-ring{animation:att-pulse-ring 2.5s ease-in-out infinite;transform-origin:100px 100px}.att-core{animation:att-pulse-core 2s ease-in-out infinite;transform-origin:100px 100px}.att-p1{animation:att-orbit 3s linear infinite;transform-origin:100px 100px}.att-p2{animation:att-orbit-rev 4s linear infinite;transform-origin:100px 100px}.att-p3{animation:att-orbit 5s linear infinite;transform-origin:100px 100px}.att-p4{animation:att-orbit-rev 3.5s linear infinite;transform-origin:100px 100px}.att-p5{animation:att-orbit 6s linear infinite;transform-origin:100px 100px}@keyframes att-pulse-glow{0%,to{transform:scale(.9)}50%{transform:scale(1)}}@keyframes att-pulse-ring{0%,to{transform:scale(1)}50%{transform:scale(.85)}}@keyframes att-pulse-core{0%,to{transform:scale(.92)}50%{transform:scale(1.08)}}@keyframes att-orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes att-orbit-rev{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.gc-word{position:absolute;font-weight:800;text-transform:uppercase;letter-spacing:.12em;transform-origin:center center}.gc-eat{left:16px;top:50%;transform:translateY(-50%);font-size:.8rem;color:#f0a840;animation:eat-chomp 2s ease-in-out infinite}.gc-grow{top:12px;left:50%;transform:translate(-50%);font-size:.8rem;color:#3498db;animation:grow-swell 2s ease-in-out .7s infinite}.gc-explode{right:-12px;top:50%;transform:translateY(-50%);font-size:.85rem;color:#e74c3c;animation-delay:1.4s}.gc-players{color:#555;font-size:.75rem}.gc-players .online{color:#4caf50}.game-card-badge{width:24px;height:24px;flex-shrink:0}@keyframes eat-chomp{0%,to{transform:translateY(-50%) scale(1);clip-path:inset(0 0 0 0)}15%{transform:translateY(-50%) scale(1.15);clip-path:inset(0 35% 0 0)}30%{transform:translateY(-50%) scale(1.05);clip-path:inset(0 0 0 35%)}45%{transform:translateY(-50%) scale(1.2);clip-path:inset(25% 0 0 0)}60%{transform:translateY(-50%) scale(1.1);clip-path:inset(0 0 25% 0)}75%{transform:translateY(-50%) scale(1.25);clip-path:inset(0 0 0 0);color:#ffd080}}@keyframes grow-swell{0%,to{transform:translate(-50%) scale(1);opacity:.7}20%{transform:translate(-50%) scale(.6);opacity:.4}50%{transform:translate(-50%) scale(1.5);opacity:1;color:#5dade2;text-shadow:0 0 14px #3498db66}70%{transform:translate(-50%) scale(1.4)}}.gc-explode-letter{display:inline-block;animation:explode-idle 2s ease-in-out infinite;animation-delay:inherit}.gc-el-0{--ex: -12px;--ey: -8px}.gc-el-1{--ex: -6px;--ey: -14px}.gc-el-2{--ex: -2px;--ey: 10px}.gc-el-3{--ex: 4px;--ey: -12px}.gc-el-4{--ex: 8px;--ey: 8px}.gc-el-5{--ex: 10px;--ey: -6px}.gc-el-6{--ex: 14px;--ey: 10px}@keyframes explode-idle{0%,5%{transform:translate(0) scale(1);opacity:1}12%{transform:translate(calc(var(--ex) * 2.5),calc(var(--ey) * 2.5)) scale(.6);opacity:.4}18%{transform:translate(calc(var(--ex) * 3),calc(var(--ey) * 3)) scale(.3);opacity:0}50%{transform:translate(calc(var(--ex) * 1.5),calc(var(--ey) * 1.5)) scale(.5);opacity:0}90%{transform:translate(0) scale(1);opacity:1}to{transform:translate(0) scale(1);opacity:1}}.profile-header{margin-bottom:2rem;width:100%;max-width:960px}.profile-edit{display:flex;align-items:center;gap:.5rem}.profile-edit input{background:#1a1a2e;border:2px solid #333;border-radius:8px;padding:.5rem .75rem;font-size:1rem;color:#fff;outline:none;width:220px;transition:border-color .2s ease}.profile-edit input:focus{border-color:#e74c3c}.profile-edit button{background:#e74c3c;border:none;border-radius:8px;padding:.5rem 1rem;color:#fff;font-weight:600;cursor:pointer;font-size:.9rem;min-width:90px;text-align:center;transition:background .2s ease,opacity .15s ease}.profile-edit button:hover:not(:disabled){background:#c0392b}.profile-edit button:disabled{opacity:.6;cursor:not-allowed}.profile-edit button.saved{background:#27ae60}.profile-edit button.btn-fade{opacity:0}.error-shake{animation:shake .4s ease}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;width:100%;max-width:960px}.stats-card{background:#151520;border:1px solid #222;border-radius:12px;padding:1.5rem}.stats-card-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.stats-card-color{width:12px;height:12px;border-radius:3px;display:inline-block}.stat-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid #1a1a2e}.stat-row:last-child{border-bottom:none}.stat-label{color:#888;font-size:.85rem}.stat-value{font-weight:600;font-size:.85rem}.empty-state{color:#555;font-size:.9rem;padding:2rem 0;width:100%;max-width:960px}.login-page{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}.login-page.visible{opacity:1;transform:translateY(0)}.login-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:360px}.login-logo{font-size:2.5rem;font-weight:900;letter-spacing:.05em;margin-bottom:.75rem}.login-logo .pos{color:#e74c3c}.login-logo .neg{color:#3498db}.login-view{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;transition:opacity .2s ease,transform .2s ease}.login-view-exit{opacity:0;transform:translateY(-8px)}.login-view-enter{opacity:0;transform:translateY(8px)}.btn-login{width:100%;padding:.7rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;color:#fff;font-family:inherit;transition:background .15s ease,transform .1s ease,opacity .15s ease}.btn-login:active:not(:disabled){transform:scale(.98)}.btn-login.shake{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(5px)}45%{transform:translate(-4px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}.btn-login:disabled{opacity:.5;cursor:not-allowed}.btn-guest{background:#e74c3c}.btn-guest:hover:not(:disabled){background:#c0392b}.btn-submit{background:#3498db}.btn-submit:hover:not(:disabled){background:#2980b9}.login-divider{width:100%;text-align:center;color:#555;font-size:.8rem;position:relative;margin:.25rem 0}.login-divider:before,.login-divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:#333}.login-divider:before{left:0}.login-divider:after{right:0}.login-oauth{display:flex;gap:.5rem;width:100%}.btn-oauth{flex:1}.btn-google{background:#4285f4}.btn-google:hover{background:#3367d6}.btn-discord{background:#5865f2}.btn-discord:hover{background:#4752c4}.login-form{display:flex;flex-direction:column;gap:.5rem;width:100%}.login-input{background:#1a1a2e;border:2px solid #333;border-radius:8px;padding:.6rem .8rem;font-size:.9rem;color:#fff;outline:none;font-family:inherit;transition:border-color .2s ease}.login-input:focus{border-color:#3498db}.login-error{color:#e74c3c;font-size:.8rem}.login-error:empty{display:none}.login-warning{color:#999;font-size:.8rem;text-align:center;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .35s ease;margin:0}.login-warning.expanded{max-height:80px;opacity:1;margin:.25rem 0}.login-switch{color:#888;font-size:.8rem;text-align:center}.login-switch-link{color:#3498db;font-weight:600;cursor:pointer;transition:color .15s ease}.login-switch-link:hover{color:#5dade2;text-decoration:underline}.login-toggle{color:#666;font-size:.75rem;text-align:center;cursor:pointer;transition:color .15s ease}.login-toggle:hover{color:#bbb}.loading{display:flex;align-items:center;justify-content:center;padding:4rem;color:#666;font-size:1rem}.error{color:#e74c3c;padding:1rem;font-size:.9rem}@media(max-width:600px){.nav{padding:.75rem 1rem;gap:1rem}.page{padding:1.5rem 1rem}.profile-edit{flex-direction:column;align-items:stretch}.profile-edit input{width:100%}.nav-user-label{display:none}}