/* ---------- level select screen (asset-driven) ---------- */
#levelSelectScreen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:#05070a;
}
#levelSelectScreen.hidden{display:none;}

#levelSelectFrame{
  position:relative;
  width:100%;height:100dvh;max-height:100dvh;
  max-width:480px;
  overflow:hidden;
  background:url('../images/levels/top-bg.jpg'),url('../images/levels/bottom-bg.jpg'), url('../images/levels/center-bg.jpg');
  background-position:top center, bottom center, center center;
  background-size:100%;
  background-repeat:no-repeat,no-repeat, repeat;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
@media (min-width:520px) and (min-height:760px){
  #levelSelectFrame{height:900px;max-height:92vh;border-radius:28px;}
}
@media (min-width:520px) and (max-height:636px){
  #levelSelectFrame{width:360px;max-width:360px;}
}
@media (pointer:coarse) and (min-width:600px){
  #levelSelectFrame{width:400px;max-width:400px;height:100dvh;max-height:768px;border-radius:0;}
}

#levelContentWrap{
  position:absolute;left:0;right:0;top:24%;bottom:6%;
  display:flex;flex-direction:column;align-items:center;
  gap:20px;
}
#levelGrid{
  width:84%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4%;
}
.level-tile{
  position:relative;aspect-ratio:231/237;
  border:none;padding:0;background:none;cursor:pointer;
  opacity:0;transform:scale(.7);
  animation:tilePop .35s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:transform .12s ease;
}
.level-tile.locked{cursor:default;}
.tile-bg{width:100%;height:100%;display:block;}
.tile-bg-overlay{position:absolute;inset:0;opacity:1;transition:opacity .4s ease;pointer-events:none;}
.tile-num{
  position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  font-family:"Baloo 2",sans-serif;font-weight:800;color:#fff5db;
  font-size:35px;
  text-shadow:2px 2px 0px rgb(0,0,0);
  transition:opacity .35s ease,transform .35s ease;
}

.tile-stars{
  position:absolute;bottom:12%;
  display:flex;padding:0 12%;
  transition:opacity .35s ease,transform .35s ease;
}
.tile-star{width:33%;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
.tile-num.reveal-hidden{opacity:0;transform:translate(-50%,-50%) scale(.4);}
.tile-stars.reveal-hidden{opacity:0;transform:scale(.4);}
@keyframes tilePop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.level-tile:active:not(.locked){transform:scale(.92);}
.tile-unlocking{animation:tileUnlockGlow .65s ease;}
@keyframes tileUnlockGlow{
  0%{transform:scale(.7);filter:drop-shadow(0 0 0 rgba(255,230,120,0));}
  60%{transform:scale(1.1);filter:drop-shadow(0 0 14px rgba(255,230,120,.9));}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,230,120,0));}
}
.tile-glow-gold{animation:tileGoldGlow 1.1s ease;}
@keyframes tileGoldGlow{
  0%{filter:drop-shadow(0 0 0 rgba(255,214,90,0));}
  45%{filter:drop-shadow(0 0 12px rgba(255,214,90,.85));}
  100%{filter:drop-shadow(0 0 0 rgba(255,214,90,0));}
}
.tile-sparkle-wrap{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:4;}
.tile-sparkle{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:radial-gradient(circle,#fff8d6,#ffcf3f 55%,rgba(255,207,63,0) 72%);
  opacity:0;animation:tileSparkleBurst .8s ease-out forwards;
}
@keyframes tileSparkleBurst{
  0%{opacity:1;transform:translate(0,0) scale(.4);}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1);}
}

#levelPagination{
  width:84%;
  display:flex;align-items:center;justify-content:center;gap:4%;
  margin-top: auto;
}
.level-nav-btn{
  width:100%;max-width:54px;border:none;background:none;padding:0;cursor:pointer;
  transition:transform .12s ease;
}
.level-nav-btn img{width:100%;display:block;}
.level-nav-btn:active{transform:scale(.9);}
.level-nav-btn.hidden-nav{visibility:hidden;pointer-events:none;}
#levelDots{display:flex;align-items:center;gap:2px;}
#levelDots img{width:14px;height:auto;display:block;}