@import url('https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');


html, body { margin: 0; overflow-y: auto; }

.back-button {
  position: fixed;
  top: 30px;
  left: 30px;
  width: 50px; 
  height: auto;
  z-index: 100; 
  display: block;
}

.back-button img {
  width: 100%;
  height: auto;
  display: block;
}

#paper {
  width: 100%;
  min-height: 100%;
}

.tape-assembly {
  position: fixed;
  left: 30%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  aspect-ratio: 800 / 500;  
}

.tape-hitbox {
  position: absolute;
  top: 23%;       
  left: 22%;     
  width: 55.5%;
  height: 52.5%;
  cursor: pointer;
  background: rgba(255, 0, 0, 0); 
  border-radius: 12px;           
  z-index: 3;                     
}


.tape-image-main {
  position: absolute;
  inset: 0;     
  width: 100%;
  height: 100%;
  z-index: 2;
}

.tape-circle {
  position: fixed;
  width: 6%;
  height: auto;
  z-index: 1;
  pointer-events: none;  
  transform-origin: 50% 50%;
  will-change: transform;
}

.left-circle {
  top: 41.4%;
  left: 35.6%;
}
.right-circle {
  top: 41.4%;
  left: 58.3%;
}

.text-content {
  margin-left: 40%;
  padding: 5%;
  text-align: center;
}

.song-title {
  font-family: 'Waiting for the Sunrise';
  font-size: 6rem;
  color: #cacce7;
  margin: 10px 0;
}

.artist-name,
.lyrics {
  font-family: 'Annie Use Your Telescope';
}

.artist-name {
  font-size: 2.8rem;
  color: #717499;
  margin-bottom: 50px;
}

.lyrics {
  text-align: center;
  max-width: 100%;
  line-height: 1.8;
  font-size: 2rem;
  color: #717499;
}

#player {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tape-circle.paused {
  animation: spin 5s linear infinite;
  animation-play-state: paused;
}

.tape-circle.spinning {
  animation: spin 5s linear infinite;
  animation-play-state: running;
}