.menu-screen,.death-screen,.loading,.server-browser-screen,.skins-screen{pointer-events:auto}.hud,.hud-leaderboard,.hud-mass{pointer-events:none}.menu-input{background:#1a1a2e;border:2px solid #333;border-radius:8px;padding:12px 20px;font-size:1.1rem;color:#fff;width:100%;max-width:340px;text-align:center;outline:none;transition:border-color .15s}.menu-input:focus{border-color:#e06050}.btn{padding:10px 32px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:transform .1s,box-shadow .1s;color:#fff}.btn:hover{transform:scale(1.05)}.btn:active{transform:scale(.98)}.btn-play{background:linear-gradient(135deg,#e06050,#c04838);box-shadow:0 4px 20px #e0605066;width:100%;max-width:340px}.btn-secondary{background:#1a1a2e;color:#ccc;border:1px solid #444;width:100%;max-width:340px}.btn-secondary:hover{color:#fff;border-color:#666}.menu-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#0a0a0af2;gap:.75rem;padding:2rem}.menu-screen h1{font-size:clamp(2rem,8vw,4rem);font-weight:900;letter-spacing:.1em;margin-bottom:.5rem}.menu-screen h1 .pos{color:#e74c3c}.menu-screen h1 .neg{color:#3498db}.menu-divider{width:100%;max-width:340px;height:1px;background:#333;margin:.5rem 0}.menu-links{display:flex;gap:8px;margin-top:.5rem}.auth-toggle-btn{color:#666;font-size:.8rem;background:none;border:none;cursor:pointer;padding:4px 8px;transition:color .15s}.auth-toggle-btn:hover{color:#aaa}.auth-section{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:340px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}.auth-section.collapsed{max-height:0;opacity:0;pointer-events:none}.auth-section.expanded{max-height:400px;opacity:1}.auth-divider{color:#888;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.auth-state{font-size:.85rem;color:#aaa;display:flex;align-items:center;gap:.6rem}.auth-signout{color:#e74c3c;text-decoration:none;font-size:.8rem}.auth-signout:hover{text-decoration:underline}.auth-email-form{display:flex;flex-direction:column;gap:.5rem;width:100%}.auth-input{font-size:.9rem!important;padding:.5rem .8rem!important}.auth-error{color:#e74c3c;font-size:.8rem;min-height:1.2em}.btn-auth-submit{background:#3498db!important;font-size:.9rem!important;padding:.5rem!important}.btn-auth-submit:hover{background:#2980b9!important}.btn-auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-toggle{color:#888;font-size:.75rem;text-decoration:none;text-align:center}.auth-toggle:hover{color:#bbb}.auth-oauth{display:flex;gap:.5rem;width:100%}.btn-oauth{flex:1;font-size:.75rem!important;padding:.5rem .3rem!important;border-radius:4px;border:none;cursor:pointer;color:#fff;font-weight:600}.btn-google{background:#4285f4!important}.btn-google:hover{background:#3367d6!important}.btn-discord{background:#5865f2!important}.btn-discord:hover{background:#4752c4!important}.btn-facebook{background:#1877f2!important}.btn-facebook:hover{background:#1565c0!important}.server-browser-screen{display:flex;flex-direction:column;width:100%;height:100%;background:#0a0a0af2;padding:2rem;color:#ddd}.sb-top-bar{display:flex;align-items:center;margin-bottom:1.5rem}.sb-back{background:none;border:none;color:#888;font-size:.9rem;cursor:pointer;padding:8px 12px;border-radius:6px;transition:color .15s,background .15s}.sb-back:hover{color:#fff;background:#ffffff14}.sb-title{flex:1;text-align:center;font-size:1.4rem;font-weight:700;margin-right:60px}.sb-server-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem;max-width:600px;width:100%;align-self:center}.sb-empty{text-align:center;color:#666;padding:3rem 2rem;font-size:1.1rem}.sb-region{display:flex;flex-direction:column;gap:.5rem}.sb-region-header{font-size:.7rem;text-transform:uppercase;color:#666;letter-spacing:.1em}.sb-server{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.4rem}.sb-server-info{display:flex;align-items:center;gap:.8rem}.sb-server-name{font-weight:600}.sb-ping{font-size:.8rem}.sb-ping-good{color:#2ecc71}.sb-ping-ok{color:#f1c40f}.sb-ping-bad{color:#e74c3c}.sb-players{margin-left:auto;color:#aaa;font-size:.85rem}.sb-room{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;font-size:.8rem;color:#aaa}.sb-join-btn{font-size:.75rem!important;padding:4px 12px!important;background:#3498db!important;border:none;border-radius:4px;color:#fff;cursor:pointer;font-weight:600}.sb-join-btn:hover{background:#2980b9!important}.sb-join-btn:disabled{opacity:.4;cursor:not-allowed}.sb-join-server{background:#27ae60!important;font-size:.8rem!important;padding:6px 12px!important;align-self:flex-end;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600}.sb-join-server:hover{background:#219a52!important}.sb-bottom{max-width:600px;width:100%;align-self:center;display:flex;flex-direction:column;gap:.75rem}.sb-actions{display:flex;flex-direction:column;gap:.5rem}.sb-quick-play{padding:12px;font-size:1rem}.sb-private-btn{background:#1a1a2e;border:1px solid #444;color:#ccc;padding:10px;font-size:.95rem;border-radius:8px;cursor:pointer;font-weight:600;transition:transform .1s,border-color .15s,color .15s}.sb-private-btn:hover{color:#fff;border-color:#666;transform:scale(1.02)}.sb-code-section{display:flex;gap:.5rem;align-items:center}.sb-code-input{flex:1;padding:10px 14px!important;font-size:.9rem!important;text-align:left!important}.sb-join-code{background:#e67e22!important;padding:10px 20px!important;font-size:.9rem!important;white-space:nowrap;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;transition:transform .1s}.sb-join-code:hover{background:#d35400!important;transform:scale(1.03)}.sb-private-form{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:400px;align-self:center}.sb-private-form .menu-input{max-width:100%}.sb-room-code{font-size:3rem;font-weight:700;letter-spacing:.3em;font-family:monospace;color:#f1c40f;padding:1.5rem;text-align:center}.sb-share-row{display:flex;gap:.5rem;justify-content:center}.sb-copy,.sb-share{background:#333;border:1px solid #555;color:#ccc;font-size:.85rem;padding:8px 16px;border-radius:6px;cursor:pointer;transition:color .15s,border-color .15s}.sb-copy:hover,.sb-share:hover{color:#fff;border-color:#888}.sb-servers-btn{background:#555!important;font-size:.85rem!important;padding:.4rem 1rem!important;margin-top:.3rem}.sb-servers-btn:hover{background:#666!important}.death-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#000000bf;gap:.5rem;padding:2rem}.death-screen h2{font-size:2rem;color:#e06050;margin-bottom:.25rem}.death-detail{font-size:1rem;color:#aaa;text-align:center}.death-mass{font-size:4rem;font-weight:900;color:#fff;margin:.5rem 0;animation:death-mass-pop .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes death-mass-pop{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.death-mass-label{font-size:.8rem;color:#666;text-transform:uppercase;letter-spacing:.1em;margin-top:-.25rem}.death-stats{margin:.5rem 0 1rem;text-align:center;line-height:1.8;color:#ccc}.death-timer{color:#888;font-size:.9rem}.death-buttons{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:340px;margin-top:.5rem}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#0a0a0a}.spinner{width:40px;height:40px;border:3px solid #333;border-top-color:#e74c3c;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:16px;color:#888}.loading-cancel{margin-top:24px;padding:8px 24px;font-size:.95rem;font-weight:600;background:transparent;color:#888;border:1px solid #444;border-radius:6px;cursor:pointer;transition:color .15s,border-color .15s}.loading-cancel:hover{color:#fff;border-color:#888}.hud{position:absolute;pointer-events:none}.hud-mass{bottom:16px;left:50%;transform:translate(-50%);font-size:1.5rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8)}.hud-debug{top:8px;left:8px;font-size:.75rem;font-family:monospace;color:#fff9;text-shadow:0 1px 4px rgba(0,0,0,.9);white-space:nowrap}.hud-leaderboard{top:16px;right:16px;background:#0009;border-radius:8px;padding:12px 16px;min-width:200px;max-height:calc(100vh - 48px);overflow:hidden;transition:width .3s ease,height .3s ease}.hud-leaderboard h3{font-size:.8rem;color:#666;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.hud-leaderboard-entry{display:flex;gap:8px;padding:3px 0;font-size:.85rem;white-space:nowrap}.lb-rank{color:#666;min-width:22px}.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis}.lb-mass{text-align:right;color:#aaa;min-width:40px}.hud-leaderboard-entry.self{color:#f0c840;font-weight:700;text-shadow:0 0 12px rgba(240,200,64,.3)}.hud-leaderboard-entry.self .lb-rank,.hud-leaderboard-entry.self .lb-mass{color:#f0c840}.hud-leaderboard-entry.entering{opacity:0;transform:translate(50px);max-height:0;overflow:hidden;transition:opacity .4s ease-out,transform .4s ease-out,max-height .4s ease-out}.hud-leaderboard-entry.entered{opacity:1;transform:translate(0);max-height:2em}.lb-death{pointer-events:none;border-radius:4px;animation:lb-death-flash .5s ease-out forwards}@keyframes lb-death-flash{0%{background:transparent;color:#fff;text-shadow:none}15%{background:#d0503cb3;color:#f08070;text-shadow:0 0 10px rgba(208,80,60,.9)}to{background:#280a05e6;color:#602020;text-shadow:none}}.lb-particle{position:absolute;border-radius:1px;animation:lb-scatter .6s ease-out forwards}@keyframes lb-scatter{0%{transform:translate(0) rotate(0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3);opacity:0}}.skins-screen{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;background:#0a0a0af2;padding:2rem}.skins-top-bar{display:flex;align-items:center;width:100%;margin-bottom:2rem}.skins-title{flex:1;text-align:center;font-size:1.4rem;font-weight:700;margin-right:60px}.skins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:16px;max-width:480px;width:100%}.skin-cell{aspect-ratio:1;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s,border-color .2s,box-shadow .2s}.skin-cell:hover{transform:scale(1.1)}.skin-cell.selected{border-color:#fff;box-shadow:0 0 16px #ffffff4d}.touch-joystick{position:absolute;pointer-events:none;touch-action:none;z-index:20;opacity:0;transition:opacity .15s}.touch-joystick.visible{opacity:1}.touch-attract{position:absolute;bottom:max(80px,calc(env(safe-area-inset-bottom) + 60px));right:24px;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;z-index:20;display:none;width:min(120px,18vw);height:min(120px,18vw);border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#ffffff0d;overflow:hidden}@media(pointer:coarse){.touch-attract{display:block}}.touch-attract.active{border-color:#fff9;background:#ffffff26}.touch-attract.ready{border-color:#50aad0e6;box-shadow:0 0 24px #50aad080;transition:border-color .6s ease-out,box-shadow .6s ease-out}.attract-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;letter-spacing:.05em;color:#ffffffb3}.touch-attract.active .attract-icon{color:#fff}.joystick-base{width:min(120px,18vw);height:min(120px,18vw);border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#ffffff0d;position:relative}.joystick-base.active{border-color:#ffffff80;background:#ffffff1a}.joystick-knob{position:absolute;top:50%;left:50%;width:40%;height:40%;border-radius:50%;background:#fff3;border:2px solid rgba(255,255,255,.4);transform:translate(-50%,-50%)}.joystick-base.active .joystick-knob{background:#ffffff59;border-color:#ffffffb3}#toast-container{position:fixed;bottom:32px;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{padding:12px 24px;border-radius:8px;font-size:.95rem;font-weight:600;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;pointer-events:auto}.toast-visible{opacity:1;transform:translateY(0)}.toast-error{background:#b4281ee6;color:#fff}.toast-info{background:#3c3c46e6;color:#ddd}@media(max-width:480px){.menu-screen{padding:1.5rem 1rem}.btn{padding:12px 20px;font-size:1rem}.menu-input{font-size:1rem;padding:14px 16px}.server-browser-screen{padding:1rem}.sb-code-section{flex-direction:column}.sb-code-input{width:100%}.sb-join-code{width:100%;text-align:center}.death-mass{font-size:3rem}.death-buttons{max-width:100%}.skins-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:12px}.hud-leaderboard{max-width:calc(100vw - 32px);min-width:160px}}
