/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Uncial+Antiqua&family=MedievalSharp&family=Almendra+SC&display=swap');

/*BODY*/
body {
  background: #000 url('../images/journal-star-bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  margin: 0;
  font-family: 'Cinzel Decorative', 'Uncial Antiqua', 'MedievalSharp', 'Almendra SC', sans-serif;
  color: #fff;
  padding-top: 80px; 
}

/*SCROLLABLE NAV BAR*/
.scroll-banner {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.85);
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.scroll-banner ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scroll-banner li {
  margin: 0 12px;
  font-size: 1.1rem;
}

.scroll-banner a {
  color: #c4ac8c;
  text-decoration: none;
  font-family: 'MedievalSharp', cursive;
  transition: all 0.2s ease;
}

.scroll-banner a:hover {
  text-shadow: 0 0 6px #ffd700, 0 0 12px #ffec8b, 0 0 18px #fffacd;
}

.scroll-banner .rune {
  color: #62b7f8;
  font-size: 1.2rem;
  text-shadow: 0 0 4px #4406af, 0 0 8px #821eb4;
  pointer-events: none;
}

/*JOURNAL WRAPPER*/
.journal-wrapper {
  position: relative;
  width: 90%;
  max-width: 950px;
  aspect-ratio: 900 / 550;
  margin: 0 auto;
  transform-origin: top center;
}

/* CLOSED BOOK */
.book.closed {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.book-cover {
  width: 100%;
  height: 100%;
  background-image: url('../images/book-cover.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0,0,0,0.6);
}

/* OPEN BOOK */
.book.open {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.7);
}

#toggleBook:checked ~ .book.open { display: block; }
#toggleBook:checked ~ .book.closed { display: none; }

.book.open input { display: none; }

/* SPREADS */
.spread {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.spread1 { background-image: url('../images/book1.png'); }
.spread2 { background-image: url('../images/book1.png'); }
.spread3 { background-image: url('../images/book1.png'); }

#spread1:checked ~ .spread1,
#spread2:checked ~ .spread2,
#spread3:checked ~ .spread3 { display: block; }

/* TEXT BOXES */
.text-box {
  position: absolute;
  top: 17%;
  width: 31%;
  height: 65%;
  padding: 1.5%;
  background: rgba(255, 255, 255, 0);
  border-radius: 12px;
  overflow-y: auto;
  color: #2c1a0f;
  font-size: 0.9vw;
  line-height: 1.4;
  z-index: 5;
}

.text-box.left { left: 15%; }
.text-box.right { right: 15%; }

.text-box h2 {
  text-align: center;
  font-size: 1.2vw;
  font-weight: normal;
  margin-bottom: 0.5em;
}

.text-box p { line-height: 1.4; font-size: 0.9vw; }

/* PAGE TURN ARROWS */
.page-turn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  border: none;
  z-index: 10;
  font-size: 2vw;
}

.page-turn.right { right: 2%; color: #ffd700; }
.page-turn.left { left: 2%; color: #62b7f8; }

.page-turn.right { text-shadow: 0 0 6px #248cb4, 0 0 12px #ffec8b, 0 0 18px #fffacd; }
.page-turn.left { text-shadow: 0 0 6px #4406af, 0 0 12px #821eb4, 0 0 18px #bcb9bc; }

.page-turn.right, .page-turn.left {
  animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 6px #ffd700, 0 0 12px #ffec8b, 0 0 18px #fffacd; }
  50% { text-shadow: 0 0 10px #ffd700, 0 0 16px #ffec8b, 0 0 24px #fffacd; }
}

/*MEDIA QUERIES FOR SMALLER SCREENS*/
@media (max-width: 1000px) {
  .journal-wrapper { width: 95%; }
  .text-box { font-size: 1vw; }
  .text-box h2 { font-size: 1.5vw; }
  .page-turn { font-size: 3vw; }
}

@media (max-width: 700px) {
  .journal-wrapper { width: 100%; }
  .text-box {
    width: 90%;
    left: 5%;
    right: 5%;
    top: 10%;
    height: auto;
    font-size: 2vw;
  }
  .text-box h2 { font-size: 2.5vw; }
  .page-turn { font-size: 4vw; }
}

/*MOBILE LAYOUT*/
.mobile-journal {
  display: none;
}

@media screen and (max-width: 900px) {
  .journal-wrapper,
  .book,
  .spread,
  .text-box,
  .page-turn {
    display: none !important;
  }

  /* Show mobile column */
  .mobile-journal {
    display: block !important;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #f2e6c9; 
    color: #2c1a0f;
    min-height: 100vh;
    font-family: "MedievalSharp", serif;
  }

  .mobile-journal h2 {
    margin-top: 0;
    text-align: center;
    font-size: 1.6rem;
  }

  .mobile-page {
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 245, 220, 0.8);
    border: 2px solid #d2b48c;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
  }

  .mobile-page:last-child {
    margin-bottom: 80px;
  }
}