/* Acabado común del lector y sus paneles, a juego con el inicio centrado. */
:root {
  --ui-ink: #0b1018;
  --ui-paper: #f3e7d5;
  --ui-gold: #c2a571;
  --ui-muted: #bdb8ae;
  --ui-serif: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}
* { scrollbar-width: thin; scrollbar-color: #9a8057 #0b1018; }
body { color: var(--ui-paper); font-family: Georgia, 'Times New Roman', serif; }
button, #audio-settings summary {
  border: 1px solid var(--ui-gold); border-radius: 28px;
  background: linear-gradient(180deg, rgba(24,29,38,.97), rgba(8,12,19,.96));
  color: var(--ui-paper); font: 18px/1.3 var(--ui-serif);
  padding: 10px 22px; box-shadow: inset 0 0 0 3px #ffffff06, 0 3px 12px #0003;
  transition: background-color .15s, border-color .15s, color .15s;
}
button:hover, #audio-settings summary:hover { background: #303039; border-color: #edd9b4; }
button:disabled, button:disabled:hover { background: #131821; color: #989387; border-color: #655b49; box-shadow: none; cursor: default; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #f3d49c; outline-offset: 4px; }
#confirm-new, #slot-confirm-yes, #error-home, .save-slot button[data-action='load']:not(:disabled), #dialogue.epilogue #choices button {
  background: linear-gradient(#fff5e0, #ddc79f); border-color: #f5dfb8; color: #181b20;
  box-shadow: inset 0 0 0 3px #6d502422, 0 3px 12px #0004;
}
#confirm-new:hover, #slot-confirm-yes:hover, #error-home:hover, .save-slot button[data-action='load']:not(:disabled):hover, #dialogue.epilogue #choices button:hover { background: #fff1d2; }
#toolbar { gap: 8px; }
#toolbar button { min-height: 44px; }
#menu-button { border-radius: 50%; font-family: Arial, sans-serif; }
#save-button { padding: 8px 20px; font-size: 17px; }
#audio-settings { background: rgba(8,12,19,.97); border-color: var(--ui-gold); border-radius: 18px; padding: 8px 14px 16px; box-shadow: 0 8px 30px #0007; }
#audio-settings:not([open]) { padding: 0; box-shadow: none; border-radius: 24px; }
#audio-settings summary { font-size: 14px; line-height: 28px; border-radius: 24px; padding: 3px 14px; }
#audio-settings label { font-size: 15px; line-height: 1.5; color: var(--ui-paper); }
#audio-settings input { accent-color: #d9bd88; }
#sound-screen #audio-settings { box-shadow: none; }
#dialogue:not(.epilogue) {
  background: linear-gradient(115deg, rgba(7,12,20,.96), rgba(15,20,28,.9));
  border: 1px solid #b99c69; border-radius: 20px;
  box-shadow: inset 0 0 0 4px #d5b87b0b, 0 8px 30px #0007;
}
#speaker { font-family: var(--ui-serif); color: #e6c992; letter-spacing: .025em; }
#text { color: #f3ebdf; line-height: 1.6; }
#next-button { border-radius: 50%; color: #e7d0a6; font-family: Arial, sans-serif; }
#center-choices { gap: 14px; }
#center-choices button {
  background: linear-gradient(180deg, rgba(20,26,35,.97), rgba(7,12,19,.97));
  color: var(--ui-paper); border: 1px solid #c2a571; border-radius: 30px;
  font-family: var(--ui-serif); line-height: 1.4; padding: 14px 28px;
  box-shadow: inset 0 0 0 3px #c5a16a0c, 0 4px 18px #0008;
}
#center-choices button:hover { background: linear-gradient(#fff5e0, #ddc79f); color: #181b20; border-color: #f5dfb8; }
.modal-panel {
  background: linear-gradient(145deg, #151d28, #090e16 70%);
  border-color: #b69a68; border-radius: 20px; color: var(--ui-paper);
  font-size: 16px; line-height: 1.65;
  box-shadow: inset 0 0 0 4px #d5b87b09, 0 24px 70px #0009;
}
.modal-panel::backdrop { background: rgba(68,68,68,.78); }
.modal-heading { padding: 10px 0 14px; margin-bottom: 16px; border-bottom: 1px solid #b69a684f; background: #101722; }
.modal-heading h2, .modal-panel > h2 { font: normal 28px/1.2 var(--ui-serif); color: #ead8b7; }
.modal-close { border-radius: 50%; padding: 0; font: 19px/1 Arial, sans-serif; box-shadow: none; }
.modal-panel > p { color: #e2d9cb; }
.modal-panel .journey-explanation, #journey-storage { color: var(--ui-muted); font: 14px/1.6 Georgia, serif; }
.save-slot, .journey-card { border-color: #b69a685c; border-radius: 14px; background: linear-gradient(145deg, #ffffff05, #00000018); padding: 16px; }
.save-slot h3, .journey-card h3 { color: #ead8b7; font: normal 22px/1.3 var(--ui-serif); }
.save-slot p, .journey-card p { color: #c8c0b3; font: 14px/1.6 Georgia, serif; }
.save-slot button, .journey-card button { font-size: 16px; padding: 9px 18px; }
.journey-card img { border-radius: 9px; }
.journey-card:not(:has(img)) { border-style: dashed; }
#journey-stats { padding: 14px 18px; border: 1px solid #b69a6866; border-radius: 12px; background: #d8b77908; color: #ead8b7; font-size: 17px; }
#journey-complete { background: #c2a57112; border-radius: 12px; border-color: #d8b77c; color: #f0d39d; }
#save-feedback { color: #e8cb95; }
.history-chapter { border-top-color: #b69a684f; padding: 10px 0; }
.history-chapter summary { font: normal 20px/1.4 var(--ui-serif); color: #e6ceaa; padding: 8px 0; box-sizing: border-box; }
.history-chapter summary::marker { color: #c2a571; }
.history-chapter p { padding-left: 12px; border-left: 1px solid #b69a683d; color: #e5ddd0; line-height: 1.65; }
#dialogue.epilogue #speaker { color: #ead8b7; }
#memory-screen {
  width: min(1100px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 32px));
  max-height: none; padding: 70px clamp(42px, 11vw, 145px) 76px;
  border: 0; border-radius: 0; box-shadow: none; overflow: hidden; outline: none;
}
#memory-screen[open] { display: flex; flex-direction: column; gap: 12px; }
#memory-screen .modal-heading { flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; margin: 0; padding: 0 0 12px; border-bottom-color: #b69a6855; }
#memory-title { grid-column: 2; text-align: center; overflow-wrap: anywhere; }
#close-memory { grid-column: 3; grid-row: 1; align-self: center; }
#memory-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0 6px; color: #f3ebdf; font-size: var(--reading-size); line-height: 1.65; overscroll-behavior: contain; }
@media (max-width: 600px) {
  #memory-screen { padding: 56px 42px 60px; }
  #memory-screen .modal-heading { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  #memory-title { grid-column: 1; font-size: 23px; }
  #close-memory { grid-column: 2; }
}
@media (max-height: 500px) {
  #memory-screen { padding: 34px 12% 40px; }
  #memory-screen .modal-heading { padding-bottom: 6px; }
  #memory-title { font-size: 23px; }
}
#error-screen .panel { background: #0e1520; border: 1px solid #b69a68; border-radius: 20px; padding: 24px; box-sizing: border-box; }
#error-screen h2 { font-family: var(--ui-serif); color: #ead8b7; }
@media (max-width: 600px) {
  .modal-heading h2, .modal-panel > h2 { font-size: 25px; }
  .modal-panel { padding: 20px; }
  .modal-heading { top: -20px; }
  #toolbar button { padding: 8px 14px; }
  #toolbar #menu-button { padding: 0; }
  #dialogue:not(.epilogue) { border-radius: 16px; }
  #center-choices button { padding: 13px 20px; border-radius: 26px; }
  .save-slot, .journey-card { padding: 14px; }
  .save-slot button, .journey-card button { font-size: 15px; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) { button, #audio-settings summary { transition: none; } }