* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Courier New", monospace;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  color: #ddd;
  overflow: hidden;
}

.book {
  position: relative;
  width: min(920px, 94vw, calc(88vh * 380 / 520));
  height: min(920px, calc(94vw * 520 / 380), 88vh);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.5);
}

.paper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  perspective: 1600px;
  transform-style: preserve-3d;
  will-change: transform;
}

.front,
.back {
  /* Real paper: warm cream with subtle grain + fibers */
  background-color: #f7f2e8;
  background-image:
    /* fine grain / speckles */
    radial-gradient(
      circle,
      rgba(115, 100, 70, 0.085) 0.65px,
      transparent 0.9px
    ),
    radial-gradient(
      circle at 65% 40%,
      rgba(105, 90, 65, 0.055) 0.5px,
      transparent 0.85px
    ),
    /* very faint laid paper fibers */
    linear-gradient(to bottom, rgba(110, 95, 65, 0.032) 1px, transparent 1px);
  background-size:
    2.9px 2.9px,
    4.6px 4.6px,
    100% 3.2px;
  background-position:
    0 0,
    2px 1.5px,
    0 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  /* soft edge definition instead of heavy black border */
  border: 1px solid #d9d0bf;
  box-shadow:
    /* gentle lift off the book */
    1px 2px 6px rgba(0, 0, 0, 0.18),
    /* page thickness on the free edge */ -1px 0 0 #e8e0d0,
    /* soft texture depth */ inset 0 0 70px rgba(90, 75, 50, 0.1),
    /* binding-side shadow (spine feels thicker) */ inset 32px 0 38px -18px
      rgba(0, 0, 0, 0.13);
}

.front {
  z-index: 1;
  backface-visibility: hidden;
  /* stronger binding edge on the left (spine) */
  border-left: 3px solid #c9bea8;
  box-shadow:
    1px 2px 6px rgba(0, 0, 0, 0.18),
    -1px 0 0 #e8e0d0,
    inset 0 0 70px rgba(90, 75, 50, 0.1),
    inset 38px 0 44px -22px rgba(0, 0, 0, 0.16);
}

.front::before {
  /* soft top-edge highlight (light falling on paper) */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 235, 0.28) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

.front::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* binding shadow gradient — more natural on light paper */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.035) 18%,
    transparent 38%
  );
  pointer-events: none;
  z-index: 2;
}

.back {
  z-index: 0;
  background-color: #f2e9d8;
  background-image:
    radial-gradient(circle, rgba(110, 95, 65, 0.075) 0.6px, transparent 0.85px),
    radial-gradient(
      circle at 55% 70%,
      rgba(100, 85, 60, 0.05) 0.5px,
      transparent 0.8px
    ),
    linear-gradient(to bottom, rgba(105, 90, 60, 0.03) 1px, transparent 1px);
  background-size:
    3.1px 3.1px,
    4.9px 4.9px,
    100% 3.5px;
  box-shadow:
    1px 2px 6px rgba(0, 0, 0, 0.16),
    inset 0 0 55px rgba(85, 70, 45, 0.09),
    inset 26px 0 32px -14px rgba(0, 0, 0, 0.11);
}
.front-content,
.back-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 26px;
  position: relative;
  /* Dark warm ink on real paper */
  color: #2c241c;
}
.back-content {
  transform: rotateY(180deg);
  justify-content: flex-start;
}

.flipped .front,
.flipped .back {
  transform: rotateY(-180deg);
}

.polaroid {
  /* Classic instant photo / polaroid look on paper */
  background: #f9f5ed;
  color: #2c241c;
  box-shadow:
    4px 6px 14px rgba(0, 0, 0, 0.22),
    0 1px 0 #e8e0ce;
  border: 9px solid #f1e9d8;
  border-bottom: 11px solid #f1e9d8; /* slightly thicker bottom like real polaroids */
  margin-bottom: 16px;
  width: 100%;
  max-width: 300px;
}

.stamp {
  transform: rotate(0deg);
  opacity: 0.2;
  letter-spacing: 3px;
}

/* Initial stack */
#p1 {
  z-index: 10;
}
#p2 {
  z-index: 9;
}
#p3 {
  z-index: 8;
}
#p4 {
  z-index: 7;
}
#p5 {
  z-index: 6;
}
#p6 {
  z-index: 5;
}
#p7 {
  z-index: 4;
}
#p8 {
  z-index: 3;
}
#p9 {
  z-index: 2;
}
#p10 {
  z-index: 1;
}

/* Mobile / landscape: shrink internal content so it stays inside the (sometimes very short) book pages */
@media (max-width: 700px), (max-height: 500px) {
  .front,
  .back {
    border-width: 6px;
  }
  .front {
    border-left-width: 3px;
  }

  .front-content,
  .back-content {
    padding: 8px;
  }

  .polaroid {
    margin-bottom: 6px;
    border-width: 4px;
    box-shadow:
      2px 3px 6px rgba(0, 0, 0, 0.18),
      0 1px 0 #e8e0ce;
    border-bottom-width: 5px;
  }

  /* scale down titles and cover text for small book (landscape especially) */
  .front-content h2[style*="2rem"] {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
  }

  /* scale down other common titles and cover text */
  .front-content h1[style*="3.2rem"] {
    font-size: 1.8rem !important;
  }
  .front-content p[style*="1.7rem"] {
    font-size: 1rem !important;
  }
  .front-content h2[style*="1.85rem"],
  .back-content h2[style*="1.85rem"] {
    font-size: 1.2rem !important;
  }

  /* back cover Thank You and welcome titles */
  .back-content h2[style*="2.6rem"] {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }
  .back-content h2[style*="2rem"] {
    font-size: 1.3rem !important;
    margin-bottom: 6px !important;
  }
  .back-content p[style*="1.35rem"] {
    font-size: 0.95rem !important;
  }

  /* shrink decorative icons in small book */
  .front-content i.fa-book,
  .back-content i.fa-heart {
    font-size: 1.8rem !important;
  }
}

/* Writing bar (ported from memory-book/ test project) - dark elegant theme matching our book */
.writing-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  border-top: 1px solid #000000;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  z-index: 2000;
  color: #e8dcc4;
  box-shadow: none;
}
.writing-input-bar .message-input {
  flex: 1;
  font-family: inherit;
  font-size: 1em;
  padding: 8px 10px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #2a2a2a;
  color: #f8f1e3;
  caret-color: #f8f1e3;
  resize: none;
}
.writing-input-bar .message-input::placeholder {
  color: #8a8a8a;
  opacity: 1;
}
.writing-input-bar .char-counter {
  font-size: 0.7em;
  color: #b8a98a;
  min-width: 38px;
  text-align: right;
  align-self: center;
}
.writing-input-bar .name-input {
  font-size: 0.8em;
  border: 1px solid #555;
  padding: 4px 6px;
  height: 26px;
  background: #2a2a2a;
  color: #f8f1e3;
  caret-color: #f8f1e3;
  width: 110px;
  flex-shrink: 0;
}
.writing-input-bar .name-input::placeholder {
  color: #8a8a8a;
  opacity: 1;
}
.writing-input-bar .finish-btn {
  font-size: 0.85em;
  padding: 6px 14px;
  background: #000000;
  color: #f8f1e3;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 32px;
  align-self: flex-end;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Desktop: ensure writing bar is never squeezed */
@media (min-width: 701px) {
  .writing-input-bar {
    padding: 10px 20px;
    gap: 10px;
  }
  .writing-input-bar .finish-btn {
    padding: 8px 18px;
    font-size: 0.9em;
  }
}
.writing-input-bar .finish-btn:hover {
  background: #0a0a0a;
}

/* Preview that appears inside the blank page while writing (live sync) */
.preview-small {
  font-size: 1.25em;
  line-height: 1.12;
  color: #5c5142;
  white-space: pre-wrap;
  opacity: 0.92;
  text-align: left;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
}

/* Left page preview (after auto-flip) — bottom-aligned like original */
#p2 .back-content .preview-small,
#p3 .back-content .preview-small {
  padding-right: 26px;
  padding-bottom: 32px;
  box-sizing: border-box;
  position: static;
}

/* Blank page prompt when not writing */
.blank-prompt {
  font-style: italic;
  color: #7a6a52;
  text-align: center;
  padding: 18px 14px;
  border: 1px dashed #c9b99e;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(255, 252, 242, 0.35);
}
.blank-prompt:hover {
  background: rgba(255, 252, 242, 0.55);
}

/* Ensure blank page is empty when typing is activated (prompt disappears) */
.writing-input-bar ~ .blank-prompt,
#writing-bar[style*="flex"] ~ .blank-prompt,
.writingActive .blank-prompt {
  display: none !important;
}