/* --- GENERAL STYLING --- */
body {
  margin: 0;
  font-family: 'Georgia', serif;
  /* background: #2c241b; */
  color: #f4f1ea;
}
header {
  text-align: center;
  padding: 1.25rem;
  background: radial-gradient(circle at center, #ad4545 4%, #0f0f0f 70%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  max-width: 90rem;
  margin: 0 auto;
}

#menu{
  position: fixed;
  font-size: clamp( 1rem, 2vw, 2rem);
  width: clamp(5%, 6vw, 10%);
  max-width: 100%;
  height: 5%;
  background:skyblue;
  opacity: 1;
  color: white;
  box-shadow: inset 0 0 0 1px black;
  border: 0.2vw solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1vw;
  z-index: 10;
}

#menu:hover{
  background:lightgrey;
  color:aliceblue;
  box-shadow:inset 0 0 0 1px white;
  border:0.5vw solid darkgreen; cursor: pointer;
}

header h1 {
  margin: 10px 0;
  color: #d4af37;
  letter-spacing: 2px;
  font-size: clamp(2rem, 4dvw, 4rem);
}

.instructions{
  color: white;
  margin-top: 5vh;
  margin-inline: auto;
  font-size: clamp(1rem, 1.25vw, 2rem);
  height: 2%;
  width: 100%;
}

.shelf-container {
  padding: 2rem 1rem;
  max-width: 90rem;
  margin: 0 auto;
}
.continent h2 {
  color: #d4af37;
  border-bottom: 0.5rem solid #5c4033;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: clamp(1.5rem, 2vw, 3rem);
  letter-spacing: 1px;
}

/* --- SHELF STYLING --- */
.shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 30px 40px 50px;
  background: linear-gradient(to bottom, #a68479 0%, #6d4c41 85%, #b88073 85%, #4e342e 100%);
  border-radius: 5px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.6), inset 0 -5px 10px rgba(0,0,0,0.3);
  /* Perspective is required for the 3D pull-out effect */
  perspective: 150rem;
  align-items: flex-end; /* Books stand upright on the shelf */
  margin-bottom: 3.2rem;
}

/* --- BOOK STYLING --- */
.book {
  width: 12rem;
  height: 12rem;
  position: relative;
  transform-style: preserve-3d; /* Allows children to exist in 3D space */
  cursor: pointer;
  /* Smooth transition for pulling the book out */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.book:hover {
  transform: translateY(-10px); /* Slight lift on hover */
}

/* Base for all book faces */
.book > div {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 1. Front Cover (Faces the user) */
.cover {
  background: #8b0000; /* Fallback color */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding: 10px;
  /* Pushed forward to create thickness */
  transform: translateZ(12px);
  transform-origin: left center; /* Hinges on the left side */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 2px 5px 15px rgba(0,0,0,0.5);
  border-left: 4px solid rgba(255,255,255,0.2); /* Simulates page edges */

}
img{width: 100%; height: auto; border-radius: 15%;}

/* 2. Inside Cover (Visible when the book opens) */
.inside-cover {
  background: #e8e4d9;
  /* Placed just behind the front cover, rotated to face forward when opened */
  transform: translateZ(11px) rotateY(180deg);
  backface-visibility: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

/* 3. Pages (Visible inside the book) */
.pages {
  background: #f4f1ea;
  transform: translateZ(0); /* Sits in the middle */
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-style: italic;
  font-size: 0.8rem;
}
chinese{font-size: 1.5rem;}

/* 4. Back Cover */
.back {
  background: #5c0000;
  transform: translateZ(-12px); /* Pushed to the very back */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* --- ANIMATION STATES --- */

/* Pull the book forward off the shelf */
.book.pulled-out {
  transform: translateZ(80px) translateY(-10px);
}

/* Swing the front cover open */
.book.open .cover {
  transform: translateZ(12px) rotateY(-150deg);
}

/* --- BOOK COLORS (To make the shelf look diverse) --- */
.book.c1 .cover { background: linear-gradient(135deg, #2c3e50, #4ca1af); }
.book.c2 .cover { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
.book.c3 .cover { background: linear-gradient(135deg, #11998e, #38ef7d); }
.book.c4 .cover { background: linear-gradient(135deg, #ee0979, #ff6a00); }
.book.c5 .cover { background: linear-gradient(135deg, #000046, #1cb5e0); }
.book.c6 .cover { background: linear-gradient(135deg, #f12711, #f5af19); }
.book.c7 .cover { background: linear-gradient(135deg, #654ea3, #eaafc8); }
.book.c8 .cover { background: linear-gradient(135deg, #200122, #6f0000); }
.book.c9 .cover { background: linear-gradient(135deg, #200122, #157b51); }
.book.c10 .cover { background: linear-gradient(135deg, #200122, #b493bb); }
.book.c11 .cover { background: linear-gradient(135deg, #200122, #cbcb4b); }
.book.c12 .cover { background: linear-gradient(135deg, #200122, #665d88); }
.book.c13 .cover { background: linear-gradient(135deg, #200122, #d6bee8); }
.book.c14 .cover { background: linear-gradient(135deg, #200122, #a34a4a); }
.book.c15 .cover { background: linear-gradient(135deg, #200122, #a4dfd1); }
.book.c16 .cover { background: linear-gradient(135deg, #200122, #6f0000); }
.book.c17 .cover { background: linear-gradient(135deg, #200122, #3c088b); }
.book.c18 .cover { background: linear-gradient(135deg, #200122, #b9d005); }
.book.c19 .cover { background: linear-gradient(135deg, #200122, #bd9617); }
.book.c20 .cover { background: linear-gradient(135deg, #da96df, #032616); }
.book.c21 .cover { background: linear-gradient(135deg, #088763, #130b23); }
.book.c22 .cover { background: linear-gradient(135deg, #200122, #4f8234); }