body{
  background-color:#2a2a2a;
  -webkit-font-smoothing:antialiased;
}
.hidden-scrollbar::-webkit-scrollbar{display:none;}
.hidden-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

.mobile-wrapper{
  max-width:480px;margin:0 auto;background-color:#F5F1E7;
  min-height:100vh;position:relative;overflow-x:hidden;
  box-shadow:0 0 40px rgba(0,0,0,0.5);
}

#cover-screen{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background-color:#121212;z-index:50;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  transition:transform 1s cubic-bezier(0.77,0,0.175,1);
  background-image:url('../images/cover.jpg');
  background-size:cover;background-position:center;
}
#cover-screen::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(to bottom, rgba(18,18,18,0.3), rgba(18,18,18,0.95));
  z-index:1;
}
.cover-content{position:relative;z-index:2;text-align:center;color:#F5F1E7;padding:20px;width:100%;}
.slide-up{transform:translateY(-100%);}

.gold-divider{height:2px;width:80px;background-color:#D4AF37;margin:1.5rem auto;}

.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out, transform .8s ease-out;}
.animate-on-scroll.is-visible{opacity:1;transform:translateY(0);}

#music-toggle{
  position:fixed;bottom:20px;right:calc(50% - 220px);
  background-color:#D4AF37;color:#121212;width:45px;height:45px;border-radius:50%;
  display:flex;justify-content:center;align-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:40;cursor:pointer;transition:transform .3s;
}
@media (max-width:480px){#music-toggle{right:20px;}}
#music-toggle:active{transform:scale(.9);}

.input-elegant{
  width:100%;background:transparent;border:1px solid rgba(212,175,55,.4);
  padding:12px 14px;font-family:'Montserrat',sans-serif;font-size:14px;color:#F5F1E7;
}
.input-elegant::placeholder{color:rgba(245,241,231,.45);}
.input-elegant:focus{outline:none;border-color:#D4AF37;}
.attendance-pill{
  flex:1;text-align:center;border:1px solid rgba(212,175,55,.4);padding:10px 4px;
  font-size:12px;cursor:pointer;color:#F5F1E7;transition:background .25s,color .25s;
}
.attendance-pill input{display:none;}
.attendance-pill:has(input:checked){background:#D4AF37;color:#121212;border-color:#D4AF37;}
.wish-card{border-bottom:1px solid rgba(212,175,55,.2);padding-bottom:12px;text-align:left;}