/* ===================================== */
/* ===== REMOVE DESKTOP WIDTH LOCK ===== */
/* ===================================== */

html, body {
  min-width: 0 !important;
  height: auto;
  overflow-x: hidden;
}


/* ===================================== */
/* ===== LANDING MOBILE SETTINGS ======= */
/* ===================================== */

:root {
  --shop-x: 28%;
  --lore-x: 46%;
  --music-x: 72%;

  --shop-y: 12%;
  --lore-y: 12%;
  --music-y: 12%;
}

/* Slightly smaller labels for mobile */
.label img {
  width: 18vw;
  max-width: 180px;
  min-width: 90px;

  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.9))
    drop-shadow(0 0 14px rgba(255,255,255,0.6));
}


/* ===================================== */
/* ===== MUSIC PAGE MOBILE CENTER ====== */
/* ===================================== */

/* Make body a flex container ONLY on music page */
.music-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Stage becomes positioning container */
.music-page .music-stage {
  position: relative;
  width: 100%;
  max-width: 900px;  /* prevents stretching on large phones/tablets */
}

/* Image scales strictly by width */
.music-page .music-art {
  width: 100%;
  height: auto;
  display: block;
}

/* Buttons stay positioned relative to stage */
.music-page .play-btn {
  position: absolute;
  width: 36px;
  height: 36px;
}

.music-page .play-btn img {
  width: 18px;
  height: 18px;
}

/* Popup stays visible and centered */
.music-page .track-popup {
  left: 50%;
  top: 6%;
  transform: translate(-50%, 0);
  max-width: 90vw;
}

/* Ensure mobile scrolling works if needed */
.music-page body {
  height: auto;
  overflow-y: auto;
}
/* ===================================== */
/* ===== LORE MOBILE ART SWAP ========= */
/* ===================================== */

.lore-page .lore-art {
  content: url("assets/lore-page.jpg");
}
/* ===================================== */
/* ===== MOBILE LORE READABILITY ======= */
/* ===================================== */

.lore-stage{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Make the book scale properly */
.lore-art{
  width:100vw;
  height:auto;
  max-height:100vh;
  object-fit:contain;
}

/* Hide right page entirely on mobile */
.lore-right{
  display:none !important;
}

/* Expand left page to readable width */
.lore-left{
  left:14%;
  top:20%;
  width:72%;
  height:58%;
  padding:20px;
  font-size:18px;
  line-height:1.7;
}

/* Better mobile typography */
.lore-left{
  font-size:18px;
}

.lore-text{
  white-space:pre-wrap;
  word-break:break-word;
}
/* ===================================== */
/* ===== MUSIC MOBILE SOUNDCLOUD ======= */
/* ===================================== */

.music-page .soundcloud-link {
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 44px;
  height: 44px;
}

.music-page .soundcloud-link img {
  width: 100%;
  height: auto;
  opacity: 0.85;
  transition: 0.2s ease;
}

.music-page .soundcloud-link img:active {
  transform: scale(0.92);
  opacity: 1;
}