#map-scene{position:absolute;inset:0}
#map-scene .bg-back,
#map-scene .bg-front,
#map-scene .moon-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#map-scene .bg-back{z-index:1;object-fit:cover}
#map-scene .moon-layer{z-index:2;pointer-events:none}
#map-scene .bg-front{z-index:3;object-fit:cover;pointer-events:none}

.map-title{
  position:absolute;
  top:14%;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  font-family:'Sora',sans-serif;
  font-size:3.5vw;
  font-weight:800;
  color:#F2D811;
  letter-spacing:3px;
  text-shadow:3px 3px 0 #2A1145, 0 0 30px rgba(255,200,50,.6);
  white-space:nowrap;
}

.levels-grid{
  position:absolute;
  top:25%;
  left:50%;
  transform:translateX(-50%);
  width:48%;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1.5vw 1.4vw;
  z-index:10;
}
.level-tile{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  position:relative;
  transition:transform .15s;
  width:100%;
  aspect-ratio: 41 / 51;
}
.level-tile:hover{animation:vibrate .18s ease-in-out infinite}
.level-tile:active{transform:scale(.95)}
.level-tile.shake{animation:shake .45s ease-out}
@keyframes vibrate{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-1.5px,1px) rotate(-1deg)}
  50%{transform:translate(1.5px,-1px) rotate(1deg)}
  75%{transform:translate(-1px,-1.5px) rotate(-0.7deg)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-10px) rotate(-3deg)}
  35%{transform:translateX(10px) rotate(3deg)}
  55%{transform:translateX(-8px) rotate(-2deg)}
  75%{transform:translateX(6px) rotate(1deg)}
  90%{transform:translateX(-2px)}
}
.tile-bg{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}
.tile-num{
  position:absolute;
  top:30%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:'Sora',sans-serif;
  font-weight:900;
  font-size:1.9vw;
  color:#fff;
  text-shadow:2px 2px 0 #2A1145, 0 0 10px rgba(0,0,0,.7);
  pointer-events:none;
  z-index:2;
}
.level-tile[data-locked="1"] .tile-num{opacity:0}