html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05060a;
  color: #d8cfb8;
  font: 14px/1.4 Georgia, 'Times New Roman', serif;
}

#escena {
  display: block;
  width: 100vw;
  height: 100vh;
}

/* Oscurece los bordes de la imagen. */
#vineta {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
}

body.maqueta #vineta {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}

/* El marcador: una tabla tallada al pie de la pantalla. */
#marcador {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, 1200px);
  aspect-ratio: 8 / 1;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.8);
}

#estado {
  position: fixed;
  left: 8px;
  top: 8px;
  font: 11px monospace;
  opacity: 0.7;
}

#aviso {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-style: italic;
  text-shadow: 0 0 6px #000;
}

/* La pantalla de título. */
#titulo {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7vh 16px 5vh;
  box-sizing: border-box;
  text-align: center;
  /* Deja ver la abadía, que da vueltas detrás: solo se oscurecen arriba y abajo. */
  background: linear-gradient(rgba(0, 0, 0, 0.7), transparent 38%, transparent 62%, rgba(0, 0, 0, 0.8));
}

#titulo[hidden] { display: none; }
body.en-titulo #marcador { display: none; }
#titulo p { margin: 0; text-shadow: 0 0 8px #000, 0 0 2px #000; }
#titulo .cabecera { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#titulo .nombre {
  margin: 0;
  font: clamp(44px, 9vw, 104px)/0.95 'Papiro', Georgia, serif;
  color: #f1dca0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #5a3a12, 0 0 24px rgba(0, 0, 0, 0.9), 0 0 60px rgba(120, 60, 10, 0.6);
}
#titulo .nombre::first-letter { color: #c8321e; }
#titulo .despues {
  margin: 0.15em 0 0;
  font: clamp(30px, 5.5vw, 64px)/1 'Papiro', Georgia, serif;
  color: #f1dca0;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #5a3a12, 0 0 24px rgba(0, 0, 0, 0.9), 0 0 60px rgba(120, 60, 10, 0.6);
}
#titulo .pie { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#titulo .empezar { font: clamp(18px, 2.4vw, 26px) 'Papiro', Georgia, serif; color: #fff4d6; animation: latido 1.6s infinite; }
#titulo .teclas { font-size: 13px; color: #d8ceb4; line-height: 1.7; }
#titulo .creditos { font-size: 11px; color: #a49a82; }
@keyframes latido { 50% { opacity: 0.35; } }

kbd {
  font: inherit;
  padding: 0 5px;
  border: 1px solid rgba(216, 207, 184, 0.5);
  border-radius: 3px;
}

/* El pergamino del principio y del final. */
@font-face {
  font-family: 'Papiro';
  src: url('fonts/papiro.woff2') format('woff2');
}
#pergamino {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 3, 2, 0.82);
}

#pergamino[hidden] { display: none; }

/* Un rollo: la hoja entre dos rodillos de madera; el papel (textura y bordes rotos) lo
   pinta pergamino.js. Las páginas leídas se sueltan y caen. */
#pergamino .rollo {
  position: relative;
  width: min(94vw, 520px);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6));
}
/* Los rodillos: la sombra del cilindro encima y, debajo, la veta de la madera, que se
   mueve cuando el rollo gira (pergamino.js). */
#pergamino .rodillo {
  position: relative;
  z-index: 2;
  height: 24px;
  margin: 0 -16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(30, 16, 4, 0.75) 0%, rgba(30, 16, 4, 0.1) 30%, rgba(255, 235, 190, 0.35) 42%, rgba(30, 16, 4, 0.05) 60%, rgba(30, 16, 4, 0.8) 100%),
    repeating-linear-gradient(180deg, #a87a42 0 3px, #8e6230 3px 5px, #b58548 5px 9px, #7d5426 9px 10px);
}
#pergamino .rodillo::before, #pergamino .rodillo::after {
  /* Los pomos de los extremos. */
  content: '';
  position: absolute;
  top: -5px;
  width: 16px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, #3a220c, #8a5e2c 40%, #c9a064 50%, #6e461c 70%, #2e1a08);
}
#pergamino .rodillo::before { left: -12px; }
#pergamino .rodillo::after { right: -12px; }
#pergamino .rodillo.arriba { margin-bottom: -6px; }
#pergamino .rodillo.abajo { margin-top: -6px; }
/* La piel a la vista, con los lados rotos; dentro, la tira que se enrolla. */
#pergamino .papel {
  position: relative;
  overflow: hidden;
  height: calc(10lh + 64px);           /* una página: el mismo alto que .hoja */
  font: 26px/1.35 'Papiro', Georgia, serif;
  color: #2a1a0c;
  background-color: #d4b77e;
  clip-path: var(--borde, none);
}
/* Donde la piel entra en los rodillos, en sombra. */
#pergamino .papel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(60, 32, 8, 0.55), transparent 9%, transparent 91%, rgba(60, 32, 8, 0.55));
}
#pergamino .tira {
  background: var(--textura, none) 0 0 / 100% 640px repeat-y;
}
#pergamino .hoja {
  box-sizing: border-box;
  height: calc(10lh + 64px);
  margin: 0;
  padding: 30px 40px 34px;
  font: 26px/1.35 'Papiro', Georgia, serif;
  white-space: pre;
}

#pergamino .hoja .inicial {
  color: #a3170f;
}

#pergamino .pie {
  position: absolute;
  right: 40px;
  bottom: 10px;
  z-index: 1;
  font: italic 12px Georgia, serif;
  text-align: right;
  color: #5a3f1c;
}
#marcador.oculto { display: none; }

/* El botón de pantalla completa, discreto en la esquina de arriba. */
#pantalla-completa {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  width: 38px;
  height: 38px;
  padding: 7px;
  border: 1px solid rgba(255, 160, 74, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffa04a;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s;
}
#pantalla-completa:hover,
#pantalla-completa:focus-visible { opacity: 1; }
#pantalla-completa svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; }
#pantalla-completa .cerrar,
.en-pantalla-completa #pantalla-completa .abrir { display: none; }
.en-pantalla-completa #pantalla-completa .cerrar { display: inline; }

/* El fundido a negro de las transiciones (el fin de la misa, la noche). */
#fundido {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* El menú de la pausa: una tabla oscura con el filo naranja del marcador. */
#menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
}
#menu[hidden] { display: none; }
#menu .tabla {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: min(86vw, 340px);
  padding: 26px 30px 22px;
  border: 2px solid #ff6a10;
  border-radius: 12px;
  background: linear-gradient(#141210, #050505);
  box-shadow: 0 0 0 4px #000, 0 0 0 5px #0a6e6c, 0 18px 50px rgba(0, 0, 0, 0.8);
}
#menu h2 {
  margin: 0 0 8px;
  font: 40px 'Papiro', Georgia, serif;
  font-weight: normal;
  text-align: center;
  color: #ffa04a;
  text-shadow: 0 2px 0 #a83800, 0 0 12px rgba(255, 106, 16, 0.4);
}
#menu button {
  padding: 9px 14px;
  border: 1px solid #0a6e6c;
  border-radius: 6px;
  background: linear-gradient(#0d4a48, #033c3b);
  color: #fff36a;
  font: 19px Georgia, 'Times New Roman', serif;
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#menu button.elegido {
  border-color: #fff36a;
  background: linear-gradient(#2aa5a0, #0a6e6c);
  color: #fffbd0;
  box-shadow: 0 0 10px rgba(255, 243, 106, 0.35);
}
#menu button:disabled { opacity: 0.4; cursor: default; }
#menu .nota {
  min-height: 1.3em;
  margin: 6px 0 0;
  font: italic 14px Georgia, serif;
  text-align: center;
  color: #d8ceb4;
}
#titulo .guardada { font: clamp(14px, 1.7vw, 18px) Georgia, serif; font-style: italic; color: #fff36a; }