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

:root {
  --paper: #f0e6c8;
  --ink: #1e120a;
  --rust: #8b3516;
  --gold: #c49a2a;
  --gold-dim: #c49a2a55;
  --sienna: #8b6a3a;
}

body {
  min-height: 100vh;
  background: #100a04;
  background-image: radial-gradient(ellipse at 30% 0%, #2a1608 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, #1a0e05 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 32px;
  font-family: 'IM Fell English', serif;
  user-select: none;
}

.header-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 7px;
  color: var(--gold);
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.book-scene {
  perspective: 3500px;
  perspective-origin: 50% 45%;
  width: 100%;
  max-width: 900px;
}

.book {
  display: flex;
  position: relative;
  width: 100%;
  height: clamp(480px, 62vh, 600px);
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.9)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}

.page {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.page-left {
  background: linear-gradient(to right, #ddd0a8, var(--paper));
}

.page-right {
  background: linear-gradient(to left, #ddd0a8, var(--paper));
}

.page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.045'/%3E%3C/svg%3E");
}

.page-left::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08));
  z-index: 20;
  pointer-events: none;
}

.spine {
  flex: 0 0 30px;
  background: linear-gradient(to right, #1e0c04, #3a1e0a, #4a2810, #3a1e0a, #1e0c04);
  box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.5), inset 5px 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 10;
}

.spine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom, transparent 5%, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent 95%);
}

.edge-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  z-index: 25;
  cursor: pointer;
}

.edge-zone-right {
  right: 0;
}

.edge-zone-left {
  left: 0;
}

.edge-zone-right:hover::after {
  content: '›';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: var(--gold-dim);
}

.edge-zone-left:hover::after {
  content: '‹';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: var(--gold-dim);
}

.page-inner {
  position: absolute;
  inset: 0;
  padding: clamp(24px, 4%, 44px) clamp(22px, 5%, 42px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c49a2a44 transparent;
}

.page-inner::-webkit-scrollbar {
  width: 3px;
}

.page-inner::-webkit-scrollbar-thumb {
  background: #c49a2a44;
}

.pg-num {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--sienna);
  opacity: 0.6;
  margin-top: 16px;
  display: block;
}

.pg-num-right {
  text-align: right;
}

/* Character card */
.char-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(15px, 2.2vw, 20px);
  color: #5a1e0e;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.char-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 18px;
}

.char-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.char-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid #c8a87a;
}

.char-divider span {
  color: var(--gold);
  font-size: 12px;
}

.stat {
  margin-bottom: 9px;
  border-bottom: 1px dotted #d4bc94;
  padding-bottom: 7px;
}

.stat-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 2px;
}

.stat-value {
  font-family: 'IM Fell English', serif;
  font-size: clamp(12px, 1.6vw, 14px);
  color: var(--ink);
}

.stamp {
  display: inline-block;
  border: 2px solid #8b1a1a;
  color: #8b1a1a;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 4px;
  padding: 5px 14px;
  margin-top: 16px;
  transform: rotate(-7deg);
  opacity: 0.8;
}

.handnote {
  font-family: 'Caveat', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: #4a2c10;
  line-height: 1.6;
  margin-top: 14px;
}

/* Story */
.story-heading {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #c8a87a;
}

.story-body p {
  font-family: 'IM Fell English', serif;
  font-feature-settings: "liga" 0, "calt" 0;
  font-size: clamp(11px, 1.4vw, 13.5px);
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 12px;
  text-align: justify;
  hyphens: auto;
}

.story-body p:first-child::first-letter {
  font-family: 'Cinzel Decorative', serif;
  font-size: 3.8em;
  float: left;
  line-height: 0.72;
  margin: 3px 7px -2px 0;
  color: var(--rust);
}

.story-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.story-rule hr {
  flex: 1;
  border: none;
  border-top: 1px dotted #c8a87a;
}

.story-rule span {
  color: var(--gold);
  font-size: 11px;
}

/* Cover */
.cover-page {
  background: linear-gradient(145deg, #2e1508 0%, #4a2210 25%, #5c2c12 50%, #4a2210 75%, #2e1508 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.cover-page::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-dim);
  pointer-events: none;
}

.cover-page::after {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px solid #c49a2a22;
  pointer-events: none;
}

.cover-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(16px, 2.8vw, 24px);
  color: #d4a843;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.4;
  margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.cover-sub {
  font-family: 'Caveat', cursive;
  font-size: clamp(13px, 1.8vw, 17px);
  color: #c49a2a77;
  text-align: center;
  line-height: 1.9;
  margin-top: 8px;
}

.cover-rule {
  width: 60%;
  border: none;
  border-top: 1px solid var(--gold-dim);
  margin: 16px auto;
}

.cover-ornament {
  font-size: 24px;
  color: var(--gold-dim);
  letter-spacing: 6px;
}

/* End page */
.end-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.65;
  gap: 16px;
}

.end-inner .ornament {
  font-size: 32px;
  color: var(--gold);
}

.end-inner .elabel {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--sienna);
}

.end-inner .note {
  font-family: 'Caveat', cursive;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink);
  line-height: 2;
}

/* Inside cover */
.inside-deco {
  text-align: center;
  opacity: 0.35;
}

.inside-deco .emblem {
  font-size: 52px;
  color: var(--sienna);
}

.inside-deco .ilabel {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 5px;
  color: #5a2e10;
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}

.inside-deco .note {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: #5a2e10;
  margin-top: 18px;
  line-height: 1.8;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.nav-btn {
  background: none;
  border: 1px solid #c49a2a55;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-transform: uppercase;
}

.nav-btn:hover:not(:disabled) {
  background: #c49a2a18;
  border-color: var(--gold);
}

.nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.nav-indicator {
  font-family: 'Caveat', cursive;
  font-size: 17px;
  color: #c49a2a66;
  min-width: 48px;
  text-align: center;
}

/* Flip animation */
.turning {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(50% - 15px);
  transform-style: preserve-3d;
  z-index: 50;
  transition: transform 0.78s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.turning-right {
  right: 0;
  transform-origin: left center;
}

.turning-left {
  left: 0;
  transform-origin: right center;
}

.t-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.t-face-back {
  transform: rotateY(180deg);
}

@media(max-width:600px) {

  .page-left,
  .spine {
    display: none;
  }

  .book {
    height: clamp(460px, 75vh, 540px);
  }

  .page-right {
    flex: 1;
  }
}