*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
#particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.star{position:absolute;border-radius:50%;background:white;animation:twinkle var(--d) ease-in-out infinite;opacity:var(--o);}
@keyframes twinkle{0%,100%{opacity:var(--o);}50%{opacity:calc(var(--o)*0.2);}}
.nebula{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;transform:translateZ(0);will-change:transform;}
/* Mobile: blur pesado em elemento fixo causa flicker constante em Safari iOS — reduz */
@media (max-width: 600px){
  .nebula{filter:blur(28px);opacity:0.6;}
}

/* LOGIN */
#login-screen{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:var(--bg);}
#login-screen.hidden{display:none;}
.login-box{background:var(--card);border:1px solid var(--border2);border-radius:20px;padding:40px;width:400px;max-width:95vw;box-shadow:0 30px 80px rgba(0,0,0,0.6);position:relative;z-index:1;animation:fadeUp 0.4s ease;}
.login-logo{font-family:'Cinzel Decorative',serif;font-size:1.5rem;background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin-bottom:8px;}
.login-sub{text-align:center;color:var(--muted2);font-size:0.82rem;margin-bottom:28px;}
.login-error{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.2);border-radius:8px;padding:8px 12px;font-size:0.8rem;color:var(--red);margin-bottom:14px;display:none;}
.login-error.show{display:block;}

/* APP */
#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;display:none;}
#app.visible{display:flex;}