/* Book Theme Reset & Variables */
:root {
  --bg-wood: #3e2723;
  --leather-primary: #8b0000;
  --leather-dark: #4a0404;
  --parchment: #fffaf0;
  --parchment-dark: #e6dac3;
  --ink: #1a0f0f;
  --gold: #ffd700;

  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Crimson Text', serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #2e1a12;
  /* Realistic Wood Texture */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
    repeating-linear-gradient(to right, transparent 0%, rgba(40, 20, 10, 0.4) 2%, transparent 4%),
    repeating-linear-gradient(to bottom, #3e2723 0%, #3e2723 10px, #2e1a12 10px, #2e1a12 20px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 20%);
  background-size: 100% 100%, 200px 100%, 100px 100%, 100% 100%;
  font-family: var(--font-body);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.scene {
  position: relative;
  width: 1000px;
  height: 700px;
}

/* Book Container */
.book {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  /* This centers the book initially */
  /* Closed State: Center the Right Page (Front Cover) */
  /* Scene width 1000px. Book width 1000px. Right Page is at 500-1000px. Center at 750px. */
  /* We want 750px to align with Scene Center (500px). Shift Left 250px (-25%). */
  transform: translateX(-25%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* When book is open, we shift it to center the spine */
.book.open {
  transform: translateX(0);
}

/* Paper / Pages */
.paper {
  position: absolute;
  width: 50%;
  /* Each page is half the book width (the right side initially) */
  height: 100%;
  top: 0;
  left: 50%;
  /* Position on the right half */
  transform-origin: left center;
  /* Pivot from the spine */
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 1;
}

/* Layering logic: highest ID on top initially */
#p1 {
  z-index: 4;
}

#p2 {
  z-index: 3;
}

#p3 {
  z-index: 2;
}

#p4 {
  z-index: 1;
}

/* Flipped state */
.paper.flipped {
  transform: rotateY(-180deg);
}

/* Z-Index shuffling for proper overlap when flipping back */
.paper.flipped {
  z-index: 1;
}

/* As we flip p1, it goes to z-index 1 (lowest) on the left stack? 
   Actually, we need to handle z-index dynamically with JS for perfect stacking, 
   but for 4 pages we can often get away with just descending order if we only go forward. 
   We'll use JS to adjust z-index for backward flips. */

/* Front and Back Faces */
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding: 40px;
  border-radius: 5px 15px 15px 5px;
  /* Common styling */
  background-color: var(--parchment);

  /* Paper texture */
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 5%),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGZzPSJub1N0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4xIi8+PC9zdmc+');

  box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.1);
  /* Spine shadow */
  border: 1px solid #e0d8c0;
}

.front {
  z-index: 2;
}

.back {
  z-index: 1;
  transform: rotateY(180deg);
  border-radius: 15px 5px 5px 15px;
  /* Mirrored radius for left side */
  background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 0%, transparent 5%),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGZzPSJub1N0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4xIi8+PC9zdmc+');
  border-left: none;
  /* No spine border on edge? */
  box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.1);
}

/* Checkbox Styling */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 30px 0;
}

.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 1.2rem;
  user-select: none;
  font-family: var(--font-heading);
  color: var(--ink);
  text-align: left;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: transparent;
  border: 2px solid var(--leather-primary);
  border-radius: 4px;
}

.custom-checkbox:hover input~.checkmark {
  background-color: rgba(93, 29, 29, 0.1);
}

.custom-checkbox input:checked~.checkmark {
  background-color: var(--leather-primary);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked~.checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--gold);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Unique Cover Styling */
#p1 .front {
  background-color: var(--leather-primary);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjNWQxZDFkIi8+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlPSIjM2UxMjEyIiBzdHJva2Utd2lkdGg9IjAuNSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc+');
  border: 4px solid var(--leather-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gold);
}

.corner-logo {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  /* Adjust size as needed */
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}

/* Content Styles */
.cover-ornament {
  width: 60px;
  height: 60px;
  border: 2px solid var(--gold);
  transform: rotate(45deg);
  margin-bottom: 30px;
  background: radial-gradient(circle, var(--gold) 10%, transparent 15%);
  background-size: 8px 8px;
}

.book-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

.book-subtitle {
  font-style: italic;
  color: rgba(197, 160, 89, 0.8);
  margin-bottom: 40px;
}

.leather-btn {
  background: var(--leather-dark);
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 12px 30px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.page-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.center-flex {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-number {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  color: #888;
}

h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--leather-primary);
  text-align: center;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(93, 29, 29, 0.2);
  padding-bottom: 10px;
}

.instruction-text {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
  font-style: italic;
  color: #444;
}

textarea {
  width: 100%;
  flex-grow: 1;
  max-height: 300px;
  background: transparent;
  border: none;
  font-family: 'Crimson Text', serif;
  font-size: 1.3rem;
  line-height: 1.5;
  background-image: repeating-linear-gradient(transparent, transparent 29px, rgba(0, 0, 0, 0.1) 30px);
  background-size: 100% 30px;
  background-attachment: local;
  resize: none;
  outline: none;
  padding: 5px;
}

.nav-buttons {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.nav-buttons-left {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
}

.ink-btn {
  background: none;
  border: none;
  color: var(--leather-primary);
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.ink-btn:hover {
  border-bottom-color: var(--leather-primary);
}

/* Slider Styles */
.slider-group {
  margin-bottom: 30px;
}

.slider-group label {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--leather-primary);
  cursor: pointer;
  margin-top: -6px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
}

/* Result specific */
.result-box,
#btn-restart,
.ink-divider {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.result-revealed .result-box,
.result-revealed #btn-restart,
.result-revealed .ink-divider {
  opacity: 1;
}

.result-box {
  text-align: center;
  margin: 30px 0;
}

#job-title {
  font-size: 2.2rem;
  color: var(--leather-primary);
  margin: 20px 0;
  font-weight: 700;
}

.ink-divider {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--ink), transparent);
  opacity: 0.3;
  margin: 20px 0;
}

.decoration-circle {
  width: 150px;
  height: 150px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  margin: 50px auto;
}