/* Shared looks for all books! / ¡El estilo compartido de todos los libros! */
/* Try changing these colors! / ¡Prueba cambiar los colores! */
:root { --c1: #6ec6ff; --c2: #2b3a8f; --accent: #e23636; }
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Comic Sans MS", sans-serif;
  text-align: center;
  margin: 0;
  min-height: 100vh;
  color: #1a2238;
  background: radial-gradient(circle at 20% 20%, var(--c1), var(--c2));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}
.home-link {
  color: white; background: rgba(0,0,0,0.25); text-decoration: none;
  padding: 0.4em 1em; border-radius: 999px; margin: 14px; font-size: 1rem;
}
.home-link:hover { background: rgba(0,0,0,0.4); }
h1 {
  color: white; font-size: 2.2rem; margin: 0.4em 0.2em 0.1em;
  text-shadow: 3px 3px 0 var(--accent);
}
.subtitle { color: #ffe66d; font-size: 1.1rem; margin: 0 0 0.4em; }
.book {
  background: white; width: min(92vw, 640px); min-height: 430px;
  border-radius: 24px;
  box-shadow: 0 12px 0 rgba(0,0,0,0.25), 0 0 0 8px var(--accent);
  padding: 24px 20px 30px; margin: 10px; position: relative;
  animation: pop 0.4s ease;
}
@keyframes pop {
  from { transform: scale(0.9) rotate(-2deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.page-emoji { font-size: 5rem; margin: 0.2rem; line-height: 1.1; }
.page-title { font-size: 1.7rem; color: var(--c2); margin: 0.3em 0; }
.page-text  { font-size: 1.25rem; margin: 0.4em auto; max-width: 520px; }
.page-cast  { font-size: 2.6rem; margin: 0.3em 0; letter-spacing: 4px; }
.controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 14px; }
button {
  font-family: inherit; font-size: 1.15rem; padding: 0.6em 1.2em;
  border: none; border-radius: 999px; background: var(--accent);
  color: white; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,0.35);
  transition: transform 0.1s;
}
button:hover { transform: scale(1.06); }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.blue-btn { background: var(--c2); }
.green-btn { background: #2ecc71; }
.page-count { color: white; font-size: 1rem; margin: 4px; }
.web { position: fixed; font-size: 2rem; opacity: 0.45; pointer-events: none; }