/* ===== SPLASH / LOGIN / PROFILE SCREENS ===== */
.screen{display:none;position:fixed;inset:0;z-index:3000;overflow-y:auto;}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}

/* SPLASH */
#screen-splash{
  background:linear-gradient(160deg,#1a0533 0%,#2d0f5e 40%,#0f3460 100%);
  justify-content:center;align-items:center;
}
.splash-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.splash-star{position:absolute;border-radius:50%;background:#fff;animation:twinkle 2s ease-in-out infinite;}
.splash-logo{width:180px;height:180px;object-fit:contain;
  animation:splash-pop .8s cubic-bezier(.2,1.6,.4,1) forwards;
  filter:drop-shadow(0 8px 32px rgba(255,200,100,.5));}
.splash-title{font-family:'Fredoka One',sans-serif;font-size:34px;color:#fff;
  text-align:center;margin-top:10px;line-height:1.1;
  text-shadow:0 2px 16px rgba(255,150,80,.7);}
.splash-title span{color:#FFD700;}
.splash-sub{font-size:14px;color:rgba(255,255,255,.7);font-weight:700;
  letter-spacing:.5px;margin-top:4px;text-align:center;}
.splash-tagline{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px;font-style:italic;}
.splash-btn{
  margin-top:28px;padding:15px 44px;border-radius:40px;border:none;
  background:linear-gradient(135deg,#FF6B9D,#FF8C00);
  color:#fff;font-size:18px;font-weight:800;cursor:pointer;
  font-family:'Fredoka One',sans-serif;
  box-shadow:0 6px 28px rgba(255,107,157,.55);
  animation:pulse-btn 2s ease-in-out infinite;
  transition:transform .15s;
}
.splash-btn:hover{transform:scale(1.06);}

/* LOGIN */
#screen-login{
  background:linear-gradient(160deg,#FFF5FB 0%,#EEF0FF 100%);
  padding:20px 12px 40px;
}
.login-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;margin-top:8px;}
.login-logo{width:52px;height:52px;object-fit:contain;}
.login-brand{font-family:'Fredoka One',sans-serif;font-size:22px;color:#3D2B56;}
.login-brand span{color:#FF6B9D;}
.login-card{
  background:#fff;border-radius:24px;padding:24px 22px;
  box-shadow:0 8px 40px rgba(100,50,150,.14);
  width:100%;max-width:380px;
}
.login-title{font-family:'Fredoka One',sans-serif;font-size:22px;color:#3D2B56;
  text-align:center;margin-bottom:4px;}
.login-sub{font-size:13px;color:#9E8FB8;text-align:center;margin-bottom:20px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:12px;font-weight:800;color:#7A6890;
  margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px;}
.login-input{width:100%;padding:12px 14px;border-radius:14px;
  border:2px solid #E8D5F5;font-size:14px;font-weight:700;
  font-family:'Nunito',sans-serif;color:#3D2B56;outline:none;
  transition:border-color .2s;}
.login-input:focus{border-color:#A855F7;}
.login-btn{
  width:100%;padding:13px;border-radius:16px;border:none;
  background:linear-gradient(135deg,#FF6B9D,#A855F7);
  color:#fff;font-size:16px;font-weight:800;cursor:pointer;
  font-family:'Fredoka One',sans-serif;
  box-shadow:0 4px 18px rgba(168,85,247,.4);
  transition:transform .15s;margin-top:4px;
}
.login-btn:hover{transform:translateY(-2px);}
.login-divider{text-align:center;font-size:12px;color:#C0B0D8;font-weight:700;
  margin:14px 0;position:relative;}
.login-divider::before,.login-divider::after{content:'';position:absolute;top:50%;
  width:38%;height:1px;background:#E8D5F5;}
.login-divider::before{left:0}.login-divider::after{right:0}
.login-guest-btn{
  width:100%;padding:11px;border-radius:14px;
  border:2px solid #E8D5F5;background:white;
  color:#7A6890;font-size:14px;font-weight:800;cursor:pointer;
  font-family:'Nunito',sans-serif;transition:all .15s;
}
.login-guest-btn:hover{background:#F8F0FF;border-color:#C084FC;}

/* PROFILE SELECT */
#screen-profile{
  background:linear-gradient(160deg,#FFF5FB 0%,#EEF0FF 100%);
  padding:20px 12px 40px;
}
.profile-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;margin-top:8px;width:100%;max-width:480px;}
.profile-logo{width:46px;height:46px;object-fit:contain;}
.profile-brand{font-family:'Fredoka One',sans-serif;font-size:20px;color:#3D2B56;}
.profile-welcome{font-family:'Fredoka One',sans-serif;font-size:22px;color:#3D2B56;
  text-align:center;margin-bottom:4px;width:100%;max-width:480px;}
.profile-sub{font-size:13px;color:#9E8FB8;text-align:center;margin-bottom:20px;width:100%;max-width:480px;}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  width:100%;max-width:480px;}
.profile-card{
  background:#fff;border-radius:20px;padding:18px 10px;text-align:center;
  border:3px solid #E8D5F5;cursor:pointer;
  box-shadow:0 4px 16px rgba(100,50,150,.1);
  transition:all .2s;position:relative;
}
.profile-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(100,50,150,.2);border-color:#C084FC;}
.profile-card.add-new{border-style:dashed;background:#FEFAFF;color:#C084FC;}
.profile-card.add-new:hover{background:#F5EEFF;}
.profile-avatar{font-size:42px;margin-bottom:6px;display:block;line-height:1;}
.profile-name{font-size:13px;font-weight:800;color:#3D2B56;font-family:'Fredoka One',sans-serif;}
.profile-level{font-size:10px;color:#9E8FB8;font-weight:700;margin-top:2px;}
.profile-stars{font-size:11px;margin-top:3px;}
.profile-badge{position:absolute;top:8px;right:8px;background:#FF6B9D;color:#fff;
  font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px;}
.add-icon{font-size:32px;color:#C084FC;margin-bottom:6px;display:block;}
.add-label{font-size:12px;font-weight:800;color:#C084FC;}

/* ADD PROFILE MODAL */
.add-profile-modal{
  display:none;position:fixed;inset:0;z-index:4000;
  background:rgba(30,10,50,.75);
  align-items:center;justify-content:center;padding:20px;
}
.add-profile-modal.show{display:flex;}
.add-profile-inner{
  background:#fff;border-radius:24px;padding:24px 22px;
  width:100%;max-width:340px;
  box-shadow:0 20px 60px rgba(80,0,120,.35);
}
.add-profile-title{font-family:'Fredoka One',sans-serif;font-size:20px;color:#3D2B56;
  text-align:center;margin-bottom:4px;}
.add-profile-sub{font-size:12px;color:#9E8FB8;text-align:center;margin-bottom:16px;}
.avatar-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;}
.av-opt{font-size:28px;cursor:pointer;padding:6px;border-radius:12px;
  border:2px solid transparent;transition:all .15s;}
.av-opt.sel{border-color:#FF6B9D;background:#FFF0F8;transform:scale(1.2);}
.av-opt:hover{background:#F8F0FF;}
/* THEME PICKER (inside add-profile modal) */
.theme-picker-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
.theme-opt{flex:1;min-width:64px;padding:8px 6px;border-radius:14px;
  border:2px solid transparent;font-size:12px;font-weight:800;cursor:pointer;
  font-family:'Nunito',sans-serif;text-align:center;transition:all .18s;
  background:#f5f0ff;color:#6B5A82;}
.theme-opt.sel{transform:scale(1.08);box-shadow:0 3px 12px rgba(0,0,0,.18);}
.theme-opt.t-girl{background:linear-gradient(135deg,#FF9ED2,#FF6BAE);color:#fff;border-color:#FF4B9B;}
.theme-opt.t-boy{background:linear-gradient(135deg,#6BBFFF,#3A8BFF);color:#fff;border-color:#1A6FFF;}
.theme-opt.t-unisex{background:linear-gradient(135deg,#A8F0A0,#4CAF50);color:#fff;border-color:#2E8B57;}
.theme-opt.t-galaxy{background:linear-gradient(135deg,#B39DDB,#7B1FA2);color:#fff;border-color:#6A1B9A;}
/* Profile theme dot shown on profile cards */
.profile-theme{font-size:9px;font-weight:700;margin-top:3px;opacity:.8;}

.add-profile-actions{display:flex;gap:8px;margin-top:4px;}
.ap-cancel{flex:1;padding:10px;border-radius:12px;border:2px solid #E8D5F5;
  background:white;color:#9E8FB8;font-size:13px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;}
.ap-save{flex:2;padding:10px;border-radius:12px;border:none;
  background:linear-gradient(135deg,#FF6B9D,#A855F7);
  color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;}