/* ---------- homepage / splash screen ---------- */
#homeScreen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:#05070a;
}
#homeScreen.hidden{display:none;}
#homeFrame{
  position:relative;
  width:100%;height:100dvh;max-height:100dvh;
  max-width:480px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,5.5vh,44px);
  overflow:hidden;
  background:url('../images/home-bg.jpg') center/cover no-repeat, #0d1021;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  padding-top:120px;
  padding-bottom:100px;
  z-index:1;
}
#homeFrame > img, #homeFrame > button, #homeFrame > div{position:relative;z-index:2;}
#homeFrame::after{
  content:"";position:absolute;inset:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.4);
  z-index:0;
}
@media (min-width:520px) and (min-height:760px){
  #homeFrame{height:900px;max-height:92vh;border-radius:28px;}
}
@media (min-width:520px) and (max-height:636px){
  #homeFrame{width:360px;max-width:360px;    padding-top: 90px;
    padding-bottom: 50px;}
}
@media (pointer:coarse) and (min-width:600px){
  #homeFrame{width:400px;max-width:400px;height:100dvh;max-height:768px;border-radius:0;}
}

.home-el{
  display:block;height:auto;
  opacity:0;transform:translateY(18px) scale(.92);
  animation:homeFadeUp .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes homeFadeUp{
  from{opacity:0;transform:translateY(18px) scale(.92);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

#homeTopLogo{
  width:21%;max-width:150px;
  animation-delay:.1s;
}
#homeGameLogo{
  width:78%;max-width:450px;
  animation-delay:.3s;
}
#homePlaySlot{
  position:relative;
  width:46%;max-width:220px;
  aspect-ratio:745/239;
  margin-top:auto;
  animation-delay:.55s;
}

/* loader occupies the exact same box the PLAY button sits in, so nothing shifts when it swaps out */
#homeLoaderWrap{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:1;transition:opacity .4s ease;
}
#homeLoaderWrap.faded{opacity:0;pointer-events:none;}
#loadingBarWrap{position:relative;width:100%;}
#loadingBarTrack{width:100%;display:block;}
#loadingBarFill{
  position:absolute;left:11px;top:6px;bottom:9px;
  max-height:13px;
  width:calc(100% - 22px);
  transform:scaleX(0);transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(180deg,#d9ff8a,#7ed321 55%,#4a9e0f);
  box-shadow:0 0 8px rgba(126,211,33,.7);
  transition:transform .25s ease;
}
#loadingText{
  margin-top:-3px;
  font-family:'Baloo 2',"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  font-size:20px;font-weight:800;letter-spacing:2px;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  animation:loadingTextPulse 1.4s ease-in-out infinite;
}
@keyframes loadingTextPulse{0%,100%{opacity:.55;}50%{opacity:1;}}

#homePlayBtn{
  position:absolute;inset:0;width:100%;height:100%;
  border:none;background:none;padding:0;cursor:pointer;
  opacity:0;transform:scale(.8);pointer-events:none;
  transition:transform .12s ease;
}
#homePlayBtn.show{
  opacity:1;transform:scale(1);pointer-events:auto;
  animation:homePlayBtnIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes homePlayBtnIn{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:scale(1);}}
#homePlayBtn img{width:100%;height:100%;display:block;object-fit:contain;}
#homePlayBtn.show:active{transform:scale(.93);}