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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: 'Patrick Hand', cursive;
  background: radial-gradient(ellipse at 50% -10%, #23202b 0%, #16141c 55%, #0e0d12 100%);
  color: #eae3d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem clamp(0.5rem, 3vw, 2rem);
  gap: 0.6rem;
}

#topbar {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#topbar h1 {
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: #f0a24a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

#page-counter {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: #b8aa96;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
}

#book {
  flex: 1;
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.5vw, 1.2rem);
  min-height: 0;
}

.nav-btn {
  flex-shrink: 0;
  font-family: 'Kalam', cursive;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  width: clamp(2.2rem, 5vw, 3rem);
  height: clamp(2.2rem, 5vw, 3rem);
  border-radius: 50%;
  border: 2px solid #5a4a3a;
  background: #2a2420;
  color: #e0c8a0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  transition: transform 0.12s ease, background 0.12s ease;
}
.nav-btn:hover:not(:disabled) { background: #3a3128; transform: scale(1.06); }
.nav-btn:active:not(:disabled) { transform: scale(0.95); }
.nav-btn:disabled { opacity: 0.3; cursor: default; }

.page {
  flex: 1;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: #ede0c4;
  background-image:
    radial-gradient(ellipse at 85% 10%, rgba(150,100,40,0.10) 0%, transparent 32%),
    radial-gradient(ellipse at 10% 90%, rgba(120,80,30,0.10) 0%, transparent 30%);
  border-radius: 0.6rem;
  border: 3px solid #4a3a28;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 0 0 6px rgba(255,250,235,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #2c2418;
}

.illustration {
  flex: 1 1 62%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1f2e 0%, #241c2e 55%, #2e1f1a 100%);
  border-bottom: 3px solid #4a3a28;
  padding: 0.5rem;
}

.illustration svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.text-panel {
  flex: 1 1 38%;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(0.6rem, 2vw, 1.2rem) clamp(0.9rem, 3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.text-panel h2 {
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  color: #7a1f1f;
}

.text-panel p {
  font-size: clamp(0.8rem, 1.9vw, 1.05rem);
  line-height: 1.5;
  color: #3a2e1e;
}

#dots {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  max-width: 980px;
}

.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #4a4038;
  border: 1px solid #6a5a48;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dot:hover { transform: scale(1.2); }
.dot.active { background: #f0a24a; border-color: #f0a24a; }

@media (max-width: 640px) {
  .page { flex-direction: column; }
}